docs(copytext): updates Copy Text docs (#335)

Kajabi · Dec 13, 2024 · 69ecac5 · 69ecac5
1 parent 783c94d
commit 69ecac5
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 22 deletions.
diff --git a/libs/core/src/components.d.ts b/libs/core/src/components.d.ts
@@ -304,7 +304,7 @@ export namespace Components {
     }
     interface PdsCopytext {
         /**
-          * Determines whether `copytext` should have a border.
+          * Determines whether `copytext` should have a visible border.
           * @defaultValue true
          */
         "border": boolean;
@@ -323,7 +323,7 @@ export namespace Components {
          */
         "truncate": boolean;
         /**
-          * String that is displayed and that is also copied to the clipboard upon interaction.
+          * The string displayed that is also copied to the clipboard upon interaction.
          */
         "value": string;
     }
@@ -1764,7 +1764,7 @@ declare namespace LocalJSX {
     }
     interface PdsCopytext {
         /**
-          * Determines whether `copytext` should have a border.
+          * Determines whether `copytext` should have a visible border.
           * @defaultValue true
          */
         "border"?: boolean;
@@ -1778,7 +1778,7 @@ declare namespace LocalJSX {
          */
         "fullWidth"?: boolean;
         /**
-          * Event when copyText button is clicked.
+          * Event fired when copyText button is clicked.
          */
         "onPdsCopyTextClick"?: (event: PdsCopytextCustomEvent<any>) => void;
         /**
@@ -1787,7 +1787,7 @@ declare namespace LocalJSX {
          */
         "truncate"?: boolean;
         /**
-          * String that is displayed and that is also copied to the clipboard upon interaction.
+          * The string displayed that is also copied to the clipboard upon interaction.
          */
         "value": string;
     }

diff --git a/libs/core/src/components/pds-copytext/docs/pds-copytext.mdx b/libs/core/src/components/pds-copytext/docs/pds-copytext.mdx
@@ -3,14 +3,26 @@ import { components } from '../../../../dist/docs.json';
 
 # Copy Text
 
-A component to use in places where "copy" text is provided to be copied elsewhere.
+The Copy Text component is a button that enables users to copy text to their clipboard upon interaction.
+
+## Guidelines
+
+### When to Use
+
+- When the user needs to copy specific, valuable text to the clipboard, such as URLs, emails, API keys, and other important information.
+
+### When Not to Use
+
+- When the user needs to copy a large amount of non-specific or dynamically-changing text.
 
 ## Properties
 
 <DocArgsTable componentName="pds-copytext" docSource={components} />
 
 ### Default
 
+The default copy text button.
+
 <DocCanvas client:only
   mdxSource={{
     react: '<PdsCopytext value="Copy this text"></PdsCopytext>',
@@ -21,7 +33,7 @@ A component to use in places where "copy" text is provided to be copied elsewher
 
 ### Borderless
 
-When `border` is set to `false`, the component will not have a border.
+When `border` is set to `false`, the component will not have a visible border.
 
 <DocCanvas client:only
   mdxSource={{
@@ -33,7 +45,7 @@ When `border` is set to `false`, the component will not have a border.
 
 ### Full width
 
-When `full-width` is set to `true`, the component will take up the full width of its container.
+When `full-width` is set to `true`, the component will occupy the full width of its parent container.
 
 <DocCanvas client:only
   mdxSource={{
@@ -45,7 +57,7 @@ When `full-width` is set to `true`, the component will take up the full width of
 
 ### Truncate
 
-When `truncate` is set to `true`, the value text will be truncated and an ellipsis added.
+When `truncate` is set to `true`, long value text will be truncated with an ellipsis added to the end. The full value will still be copied to the clipboard when clicked.
 
 <DocCanvas client:only
   mdxSource={{

diff --git a/libs/core/src/components/pds-copytext/pds-copytext.tsx b/libs/core/src/components/pds-copytext/pds-copytext.tsx
@@ -9,7 +9,7 @@ import { copy as copyIcon } from '@pine-ds/icons/icons';
 })
 export class PdsCopytext {
   /**
-   * Determines whether `copytext` should have a border.
+   * Determines whether `copytext` should have a visible border.
    * @defaultValue true
    */
   @Prop({ reflect: true }) border = true;
@@ -32,12 +32,12 @@ export class PdsCopytext {
   @Prop() truncate = false;
 
   /**
-   * String that is displayed and that is also copied to the clipboard upon interaction.
+   * The string displayed that is also copied to the clipboard upon interaction.
    */
   @Prop() value!: string;
 
   /**
-   * Event when copyText button is clicked.
+   * Event fired when copyText button is clicked.
    */
   @Event() pdsCopyTextClick: EventEmitter;
 

diff --git a/libs/core/src/components/pds-copytext/readme.md b/libs/core/src/components/pds-copytext/readme.md
@@ -7,20 +7,20 @@
 
 ## Properties
 
-| Property             | Attribute      | Description                                                                         | Type      | Default     |
-| -------------------- | -------------- | ----------------------------------------------------------------------------------- | --------- | ----------- |
-| `border`             | `border`       | Determines whether `copytext` should have a border.                                 | `boolean` | `true`      |
-| `componentId`        | `component-id` | A unique identifier used for the underlying component `id` attribute.               | `string`  | `undefined` |
-| `fullWidth`          | `full-width`   | Determines whether `copytext` should expand to the full width of its container.     | `boolean` | `false`     |
-| `truncate`           | `truncate`     | Determines whether the `value` should truncate and display with an ellipsis.        | `boolean` | `false`     |
-| `value` _(required)_ | `value`        | String that is displayed and that is also copied to the clipboard upon interaction. | `string`  | `undefined` |
+| Property             | Attribute      | Description                                                                     | Type      | Default     |
+| -------------------- | -------------- | ------------------------------------------------------------------------------- | --------- | ----------- |
+| `border`             | `border`       | Determines whether `copytext` should have a visible border.                     | `boolean` | `true`      |
+| `componentId`        | `component-id` | A unique identifier used for the underlying component `id` attribute.           | `string`  | `undefined` |
+| `fullWidth`          | `full-width`   | Determines whether `copytext` should expand to the full width of its container. | `boolean` | `false`     |
+| `truncate`           | `truncate`     | Determines whether the `value` should truncate and display with an ellipsis.    | `boolean` | `false`     |
+| `value` _(required)_ | `value`        | The string displayed that is also copied to the clipboard upon interaction.     | `string`  | `undefined` |
 
 
 ## Events
 
-| Event              | Description                            | Type               |
-| ------------------ | -------------------------------------- | ------------------ |
-| `pdsCopyTextClick` | Event when copyText button is clicked. | `CustomEvent<any>` |
+| Event              | Description                                  | Type               |
+| ------------------ | -------------------------------------------- | ------------------ |
+| `pdsCopyTextClick` | Event fired when copyText button is clicked. | `CustomEvent<any>` |
 
 
 ## Dependencies