CopyText updated (#230)

* CopyText updated * Fix CSS var * Bump SDS to v1.1.3
stellar · Mar 27, 2024 · a53825e · a53825e
1 parent 4068154
commit a53825e
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 14 deletions.
diff --git a/@stellar/design-system-website/package.json b/@stellar/design-system-website/package.json
@@ -23,7 +23,7 @@
     "@docusaurus/remark-plugin-npm2yarn": "^3.1.0",
     "@docusaurus/theme-live-codeblock": "^3.1.0",
     "@mdx-js/react": "^3.0.0",
-    "@stellar/design-system": "^1.1.2",
+    "@stellar/design-system": "^1.1.3",
     "clsx": "^2.1.0",
     "prism-react-renderer": "^2.3.1",
     "react": "^18.2.0",

diff --git a/@stellar/design-system-website/src/components/ComponentProps/index.tsx b/@stellar/design-system-website/src/components/ComponentProps/index.tsx
@@ -4,13 +4,15 @@ import { Element } from "@site/src/components/Element";
 import { ParseSummary } from "@site/src/components/ParseSummary";
 import { ElementPropType } from "@site/src/components/ElementPropType";
 
+import "./styles.css";
+
 export const ComponentProps = ({
   componentName,
   relatedType,
 }: {
   componentName: string;
   // To associate custom types that are used in the component. For example,
-  // AssetIconSource in AssetIcon.
+  // AssetSource in Asset.
   relatedType?: string[];
 }) => {
   const component = SdsDocs?.children?.find(
@@ -28,6 +30,16 @@ export const ComponentProps = ({
   const PropRow = ({ p }: { p: any }) => {
     const defaultVal = p.comment?.blockTags?.[0]?.content?.[0];
 
+    // Don't show row that is optional and undefined
+    // (used in discriminated union types)
+    if (
+      p?.flags?.isOptional &&
+      p.type.type === "intrinsic" &&
+      p.type.name === "undefined"
+    ) {
+      return null;
+    }
+
     return (
       <tr key={p.id}>
         <td>
@@ -54,14 +66,14 @@ export const ComponentProps = ({
     );
   };
 
-  const props = component.children.map((p) => <PropRow p={p} />);
+  const props = component?.children?.map((p) => <PropRow p={p} />);
 
   const relatedTypeProps = relatedTypes?.map((t) => {
     const props = t.children || t?.type?.declaration?.children;
 
     return (
       <Fragment key={`t-${t.id}`}>
-        <tr>
+        <tr className="PropsTable__subtitle">
           <td colSpan={5}>
             <code>{t.name}</code>
           </td>
@@ -75,7 +87,7 @@ export const ComponentProps = ({
 
   return (
     <div>
-      <table>
+      <table className="PropsTable">
         <thead>
           <tr>
             <th>Prop</th>

diff --git a/@stellar/design-system-website/src/components/ComponentProps/styles.css b/@stellar/design-system-website/src/components/ComponentProps/styles.css
@@ -0,0 +1,8 @@
+tr.PropsTable__subtitle {
+  font-weight: 600;
+}
+
+tr.PropsTable__subtitle td {
+  border-top-width: 2px;
+  border-bottom-width: 2px;
+}
diff --git a/@stellar/design-system/package.json b/@stellar/design-system/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stellar/design-system",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "author": "Stellar Development Foundation <[email protected]>",
   "description": "Components for Stellar Development Foundation’s design system",
   "license": "Apache-2.0",

diff --git a/@stellar/design-system/src/components/CopyText/index.tsx b/@stellar/design-system/src/components/CopyText/index.tsx
@@ -1,13 +1,13 @@
-import React, { useState } from "react";
+import React, { cloneElement, useState } from "react";
 import CopyToClipboard from "react-copy-to-clipboard";
 import { Tooltip } from "../Tooltip";
 import "./styles.scss";
 
 /** */
-export interface CopyTextProps {
+export type CopyTextBaseProps = {
   /** Text to copy */
   textToCopy: string;
-  /** Label/text to display when copy action is done @defaultValue Copied */
+  /** Label/text to display when copy action is done @defaultValue `Copied` */
   doneLabel?: string;
   /** Position of the tooltip @defaultValue `bottom` */
   tooltipPlacement?:
@@ -23,17 +23,34 @@ export interface CopyTextProps {
     | "bottom-end"
     | "left-start"
     | "left-end";
-  /** Title text to show on hover @defaultValue Copy */
+  /** Title text to show on hover @defaultValue `Copy` */
   title?: string;
+};
+
+export type CopyTextEllipsisProps = {
+  /** Component display variant. `ellipsis` parent must have position relative. */
+  variant?: "ellipsis";
+  /** Copy click element */
+  children: string;
+};
+
+export type CopyTextVariantProps = {
+  /** Component display variant. `headless` parent must have position relative. @defaultValue `inline` */
+  variant?: "inline" | "headless";
   /** Copy click element */
   children: React.ReactElement;
-}
+};
+
+/** */
+export type CopyTextProps = (CopyTextVariantProps | CopyTextEllipsisProps) &
+  CopyTextBaseProps;
 
 /**
- * Use the `CopyText` component to copy a string. Done action label can be displayed in a tooltip, by default it will replace the component’s label inline. We’re using [react-copy-to-clipboard](https://github.com/nkbt/react-copy-to-clipboard) to handle the copy part.
+ * Use the `CopyText` component to copy a string. We’re using [react-copy-to-clipboard](https://github.com/nkbt/react-copy-to-clipboard) to handle the copy part.
  */
 export const CopyText: React.FC<CopyTextProps> = ({
   textToCopy,
+  variant = "inline",
   doneLabel = "Copied",
   tooltipPlacement = "bottom",
   title = "Copy",
@@ -54,8 +71,46 @@ export const CopyText: React.FC<CopyTextProps> = ({
     }, 1000);
   };
 
+  if (variant === "headless") {
+    return (
+      <Tooltip
+        isVisible={isTooltipVisible}
+        triggerEl={
+          <CopyToClipboard text={textToCopy} onCopy={handleCopyDone}>
+            {cloneElement(children as React.ReactElement, {
+              title,
+            })}
+          </CopyToClipboard>
+        }
+        placement={tooltipPlacement}
+      >
+        {doneLabel}
+      </Tooltip>
+    );
+  }
+
+  if (variant === "ellipsis") {
+    return (
+      <div className={`CopyText CopyText--${variant}`}>
+        <Tooltip
+          isVisible={isTooltipVisible}
+          triggerEl={
+            <CopyToClipboard text={textToCopy} onCopy={handleCopyDone}>
+              <div title={title} role="button" className="CopyText__content">
+                {children}
+              </div>
+            </CopyToClipboard>
+          }
+          placement={tooltipPlacement}
+        >
+          {doneLabel}
+        </Tooltip>
+      </div>
+    );
+  }
+
   return (
-    <div className="CopyText">
+    <div className={`CopyText CopyText--${variant}`}>
       <Tooltip
         isVisible={isTooltipVisible}
         triggerEl={

diff --git a/@stellar/design-system/src/components/CopyText/styles.scss b/@stellar/design-system/src/components/CopyText/styles.scss
@@ -1,5 +1,21 @@
 .CopyText {
-  display: inline-block;
+  &--inline {
+    display: inline-block;
+  }
+
+  &--ellipsis {
+    display: block;
+    position: absolute;
+    width: 100%;
+
+    .CopyText__content {
+      display: block;
+      max-width: 100%;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  }
 
   &__content {
     cursor: pointer;