@pine-ds/core 1.3.0-dev.2 → 1.3.0-dev.3

package/dist/collection/components/pds-chip/pds-chip.js

@@ -0,0 +1,189 @@
+import { downSmall, remove } from "@pine-ds/icons/icons";
+import { Host, h } from "@stencil/core";
+export class PdsChip {
+    constructor() {
+        this.handleCloseClick = () => {
+            this.pdsTagCloseClick.emit();
+        };
+        this.componentId = undefined;
+        this.sentiment = 'neutral';
+        this.dot = false;
+        this.label = undefined;
+        this.large = false;
+        this.variant = 'text';
+    }
+    classNames() {
+        const classNames = ['pds-chip'];
+        if (this.large) {
+            classNames.push('pds-chip--large');
+        }
+        if (this.variant) {
+            classNames.push('pds-chip--' + this.variant);
+        }
+        if (this.sentiment) {
+            classNames.push('pds-chip--' + this.sentiment);
+        }
+        return classNames.join('  ');
+    }
+    setChipContent() {
+        const isDropdown = this.variant === 'dropdown';
+        const chipContent = isDropdown ? (h("button", { class: "pds-chip__button", type: "button" }, this.dot && h("i", { class: "pds-chip__dot", "aria-hidden": "true" }), this.label, h("pds-icon", { icon: downSmall, size: "12px", "aria-hidden": "true" }))) : (h("span", { class: "pds-chip__label" }, this.dot && h("i", { class: "pds-chip__dot", "aria-hidden": "true" }), this.label));
+        return chipContent;
+    }
+    render() {
+        return (h(Host, { key: 'a2ad8c6a371ab1bead7715cdf7bbe684ce0d73a5', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.variant === 'tag' && (h("button", { key: '83d2273a0785c4516a57ed618645d937ba33f9f5', class: "pds-chip__close", type: "button", onClick: this.handleCloseClick, "aria-label": "Remove" }, h("pds-icon", { key: '6ca04621d1acd134ce3352a034ea69ea7f794fbd', icon: remove, size: "12px" })))));
+    }
+    static get is() { return "pds-chip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-chip.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-chip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier used for the underlying component `id` attribute."
+                },
+                "attribute": "component-id",
+                "reflect": false
+            },
+            "sentiment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'accent' | 'danger' | 'info' | 'neutral' | 'success' | 'warning'",
+                    "resolved": "\"accent\" | \"danger\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'neutral'"
+                        }],
+                    "text": "Sets the color scheme of the chip."
+                },
+                "attribute": "sentiment",
+                "reflect": false,
+                "defaultValue": "'neutral'"
+            },
+            "dot": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Determines whether a dot should be displayed on the chip."
+                },
+                "attribute": "dot",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the text label content of the chip."
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "large": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Determines whether the chip should be rendered in a larger size."
+                },
+                "attribute": "large",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'text' | 'tag' | 'dropdown'",
+                    "resolved": "\"dropdown\" | \"tag\" | \"text\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'text'"
+                        }],
+                    "text": "Sets the style variant of the chip."
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'text'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pdsTagCloseClick",
+                "name": "pdsTagCloseClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event when close button is clicked on tag variant."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=pds-chip.js.map

package/dist/collection/components/pds-chip/pds-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pds-chip.js","sourceRoot":"","sources":["../../../src/components/pds-chip/pds-chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,OAAO;;QAwCV,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;QAC/B,CAAC,CAAA;;yBAhCqF,SAAS;mBAMjF,KAAK;;qBAWH,KAAK;uBAM0B,MAAM;;IAW7C,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,UAAU,CAAC,CAAC;QAEhC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,UAAU,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACrC,CAAC;QACD,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;QAC/C,CAAC;QACD,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;QACjD,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAEO,cAAc;QACpB,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC;QAC/C,MAAM,WAAW,GAAG,UAAU,CAAC,CAAC,CAAC,CAC/B,cAAQ,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ;YAC3C,IAAI,CAAC,GAAG,IAAI,SAAG,KAAK,EAAC,eAAe,iBAAa,MAAM,GAAK;YAC5D,IAAI,CAAC,KAAK;YACX,gBAAU,IAAI,EAAE,SAAS,EAAE,IAAI,EAAC,MAAM,iBAAa,MAAM,GAAY,CAC9D,CACV,CAAC,CAAC,CAAC,CACF,YAAM,KAAK,EAAC,iBAAiB;YAC1B,IAAI,CAAC,GAAG,IAAI,SAAG,KAAK,EAAC,eAAe,iBAAa,MAAM,GAAK;YAC5D,IAAI,CAAC,KAAK,CACN,CACR,CAAC;QAEF,OAAO,WAAW,CAAC;IACrB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW;YACjD,IAAI,CAAC,cAAc,EAAE;YACrB,IAAI,CAAC,OAAO,KAAK,KAAK,IAAI,CACzB,+DAAQ,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,gBAAa,QAAQ;gBAC/F,iEAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,GAAY,CACxC,CACV,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { downSmall, remove } from '@pine-ds/icons/icons';\nimport { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'pds-chip',\n  styleUrl: 'pds-chip.scss',\n  shadow: true,\n})\nexport class PdsChip {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Sets the color scheme of the chip.\n   * @defaultValue 'neutral'\n   */\n  @Prop() sentiment: 'accent' | 'danger' | 'info' | 'neutral' | 'success' | 'warning' = 'neutral';\n\n  /**\n   * Determines whether a dot should be displayed on the chip.\n   * @defaultValue false\n   */\n  @Prop() dot = false;\n\n  /**\n   *  Sets the text label content of the chip.\n   */\n  @Prop() label: string;\n\n  /**\n   * Determines whether the chip should be rendered in a larger size.\n   * @defaultValue false\n   */\n  @Prop() large = false;\n\n  /**\n   * Sets the style variant of the chip.\n   * @defaultValue 'text'\n   */\n  @Prop() variant: 'text' | 'tag' | 'dropdown' = 'text';\n\n  /**\n   * Event when close button is clicked on tag variant.\n   */\n  @Event() pdsTagCloseClick: EventEmitter;\n\n  private handleCloseClick = () => {\n    this.pdsTagCloseClick.emit();\n  }\n\n  private classNames() {\n    const classNames = ['pds-chip'];\n\n    if (this.large) {\n      classNames.push('pds-chip--large');\n    }\n    if (this.variant) {\n      classNames.push('pds-chip--' + this.variant);\n    }\n    if (this.sentiment) {\n      classNames.push('pds-chip--' + this.sentiment);\n    }\n\n    return classNames.join('  ');\n  }\n\n  private setChipContent() {\n    const isDropdown = this.variant === 'dropdown';\n    const chipContent = isDropdown ? (\n      <button class=\"pds-chip__button\" type=\"button\">\n        {this.dot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n        {this.label}\n        <pds-icon icon={downSmall} size=\"12px\" aria-hidden=\"true\"></pds-icon>\n      </button>\n    ) : (\n      <span class=\"pds-chip__label\">\n        {this.dot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n        {this.label}\n      </span>\n    );\n\n    return chipContent;\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        {this.setChipContent()}\n        {this.variant === 'tag' && (\n          <button class=\"pds-chip__close\" type=\"button\" onClick={this.handleCloseClick} aria-label=\"Remove\">\n            <pds-icon icon={remove} size=\"12px\"></pds-icon>\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-chip/stories/pds-chip.stories.js

@@ -0,0 +1,79 @@
+import { html } from 'lit';
+import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
+import { withActions } from '@storybook/addon-actions/decorator';
+
+export default {
+  argTypes: extractArgTypes('pds-chip'),
+  component: 'pds-chip',
+  decorators: [withActions],
+  parameters: {
+    actions: {
+      handles: ['onclick', 'pdsTagCloseClick'],
+    },
+  },
+  title: 'components/Chip'
+}
+
+const BaseTemplate = (args) => html`
+<pds-chip
+  component-id="${args.componentId}"
+  dot="${args.dot}"
+  label="${args.label}"
+  large="${args.large}"
+  sentiment="${args.sentiment}"
+  variant="${args.variant}"
+/>`;
+
+export const Default = BaseTemplate.bind();
+Default.args = {
+  dot: false,
+  label: "label",
+  large: false,
+  sentiment: "neutral",
+  variant: "text",
+}
+
+export const Sentiment = BaseTemplate.bind();
+Sentiment.args = {
+  dot: false,
+  label: "label",
+  large: false,
+  sentiment: "success",
+  variant: "text",
+}
+
+export const Dots = BaseTemplate.bind();
+Dots.args = {
+  dot: true,
+  label: "label",
+  large: false,
+  sentiment: "neutral",
+  variant: "text",
+}
+
+export const Dropdown = BaseTemplate.bind();
+Dropdown.args = {
+  dot: false,
+  label: "label",
+  large: false,
+  sentiment: "neutral",
+  variant: "dropdown",
+}
+
+export const Tag = BaseTemplate.bind();
+Tag.args = {
+  dot: false,
+  label: "label",
+  large: false,
+  sentiment: "neutral",
+  variant: "tag",
+}
+
+export const Large = BaseTemplate.bind();
+Large.args = {
+  dot: false,
+  label: "label",
+  large: true,
+  sentiment: "neutral",
+  variant: "tag",
+}

package/dist/collection/components/pds-copytext/pds-copytext.css

@@ -0,0 +1,87 @@
+:host(.pds-copytext) {
+  --border-interactive-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);
+  --border-interactive-hover: var(--pine-border-width-thin) solid var(--pine-color-grey-400);
+  --border-radius-default: var(--pine-border-radius-125);
+  --border-radius-hover: var(--pine-border-radius-0);
+  --border-width-default: var(--pine-border-width-none);
+  --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);
+  --color-background-default: var(--pine-color-white);
+  --color-border-interactive-hover: var(--pine-color-grey-400);
+  --color-text-hover: var(--pine-color-charcoal-400);
+  --copytext-color-background-hover: var(--pine-color-grey-200);
+  --font-size-default: var(--pine-font-size-100);
+  --font-weight-default: var(--pine-font-weight-semi-bold);
+  --spacing-bordered-margin-inline-end: var(--pine-spacing-200);
+  --spacing-bordered-padding-block: var(--pine-spacing-100);
+  --spacing-bordered-padding-inline: var(--pine-spacing-200);
+  --spacing-margin-inline-end: var(--pine-spacing-100);
+  --spacing-padding-block: var(--pine-spacing-050);
+  --spacing-padding-inline: var(--pine-spacing-100);
+  --spacing-padding-none: var(--pine-spacing-0);
+  --typography-default: var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);
+}
+:host(.pds-copytext) pds-button {
+  align-items: center;
+  background: var(--color-background-default);
+  border: var(--border-width-default);
+  border-radius: var(--border-radius-default);
+  display: inline-flex;
+  font: var(--typography-default);
+  max-width: 100%;
+  padding: var(--spacing-padding-block) var(--spacing-padding-inline);
+}
+:host(.pds-copytext) pds-button::part(button):hover {
+  background-color: var(--copytext-color-background-hover);
+  border-radius: var(--border-radius-hover);
+  color: var(--color-text-hover);
+}
+:host(.pds-copytext) pds-button span {
+  margin-inline-end: var(--spacing-margin-inline-end);
+  white-space: nowrap;
+}
+:host(.pds-copytext) pds-button :nth-child(2) {
+  flex-shrink: 0;
+}
+:host(.pds-copytext):host(.pds-copytext--bordered) {
+  border: var(--border-width-default);
+  padding: var(--spacing-padding-none);
+}
+:host(.pds-copytext):host(.pds-copytext--bordered) pds-button {
+  padding: var(--spacing-padding-none);
+}
+:host(.pds-copytext):host(.pds-copytext--bordered) pds-button:hover {
+  background: none;
+}
+:host(.pds-copytext):host(.pds-copytext--bordered) span {
+  border: var(--border-interactive-default);
+  border-radius: var(--border-radius-default);
+  margin-inline-end: var(--spacing-bordered-margin-inline-end);
+  padding-block: var(--spacing-bordered-padding-block);
+  padding-inline: var(--spacing-bordered-padding-inline);
+}
+:host(.pds-copytext):host(.pds-copytext--bordered) :hover span {
+  border: var(--border-interactive-hover);
+}
+:host(.pds-copytext):host(.pds-copytext--full-width) {
+  display: flex;
+  width: 100%;
+}
+:host(.pds-copytext):host(.pds-copytext--full-width) pds-button {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+:host(.pds-copytext):host(.pds-copytext--full-width) pds-button span {
+  text-align: left;
+  width: 100%;
+}
+:host(.pds-copytext):host(.pds-copytext--truncated) pds-button {
+  display: flex;
+  width: 100%;
+}
+:host(.pds-copytext):host(.pds-copytext--truncated) pds-button span {
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  width: 100%;
+}

package/dist/collection/components/pds-copytext/pds-copytext.js

@@ -0,0 +1,173 @@
+import { Host, h } from "@stencil/core";
+import { copy as copyIcon } from "@pine-ds/icons/icons";
+export class PdsCopytext {
+    constructor() {
+        this.copyToClipboard = async (value) => {
+            try {
+                if (typeof navigator.clipboard !== 'undefined') {
+                    await navigator.clipboard.writeText(value);
+                    this.pdsCopyTextClick.emit('Copied to clipboard');
+                }
+            }
+            catch (err) {
+                this.pdsCopyTextClick.emit(`Error writing text to clipboard: ${err}`);
+            }
+        };
+        this.handleClick = () => {
+            this.copyToClipboard(this.value);
+        };
+        this.border = true;
+        this.componentId = undefined;
+        this.fullWidth = false;
+        this.truncate = false;
+        this.value = undefined;
+    }
+    classNames() {
+        const classNames = ['pds-copytext'];
+        if (this.border) {
+            classNames.push('pds-copytext--bordered');
+        }
+        if (this.fullWidth) {
+            classNames.push('pds-copytext--full-width');
+        }
+        if (this.truncate) {
+            classNames.push('pds-copytext--truncated');
+        }
+        return classNames.join('  ');
+    }
+    render() {
+        return (h(Host, { key: '9960146a3ac3810bc14834a976f2e50627569dad', class: this.classNames(), id: this.componentId }, h("pds-button", { key: '9d8c6dc9824be2483982d4362a5c8d8c4c232432', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: '7c093ec0ae96afdbad02adda3901be87989c9ce4' }, this.value), h("pds-icon", { key: '466f5c685e32be0067938869afee751db522d3d3', icon: copyIcon, size: "16px" }))));
+    }
+    static get is() { return "pds-copytext"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-copytext.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-copytext.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "border": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "true"
+                        }],
+                    "text": "Determines whether `copytext` should have a border."
+                },
+                "attribute": "border",
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier used for the underlying component `id` attribute."
+                },
+                "attribute": "component-id",
+                "reflect": false
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Determines whether `copytext` should expand to the full width of its container."
+                },
+                "attribute": "full-width",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "truncate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Determines whether the `value` should truncate and display with an ellipsis."
+                },
+                "attribute": "truncate",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "String that is displayed and that is also copied to the clipboard upon interaction."
+                },
+                "attribute": "value",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pdsCopyTextClick",
+                "name": "pdsCopyTextClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event when copyText button is clicked."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=pds-copytext.js.map

package/dist/collection/components/pds-copytext/pds-copytext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pds-copytext.js","sourceRoot":"","sources":["../../../src/components/pds-copytext/pds-copytext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE9E,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAOxD,MAAM,OAAO,WAAW;;QAkCd,oBAAe,GAAG,KAAK,EAAE,KAAa,EAAE,EAAE;YAChD,IAAI,CAAC;gBACH,IAAI,OAAO,SAAS,CAAC,SAAS,KAAK,WAAW,EAAE,CAAC;oBAC/C,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;oBAC3C,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;gBACpD,CAAC;YACH,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBACb,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,oCAAoC,GAAG,EAAE,CAAC,CAAC;YACxE,CAAC;QACH,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC,CAAC;sBA1CgC,IAAI;;yBAWlB,KAAK;wBAMN,KAAK;;;IA2BhB,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,cAAc,CAAC,CAAC;QAEpC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,UAAU,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;QAC5C,CAAC;QAED,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,UAAU,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;QAC9C,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;QAC7C,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW;YAClD,mEAAY,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW;gBACpE,+DAAO,IAAI,CAAC,KAAK,CAAQ;gBACzB,iEAAU,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,MAAM,GAAY,CACtC,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\n\nimport { copy as copyIcon } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-copytext',\n  styleUrl: 'pds-copytext.scss',\n  shadow: true,\n})\nexport class PdsCopytext {\n  /**\n   * Determines whether `copytext` should have a border.\n   * @defaultValue true\n   */\n  @Prop({ reflect: true }) border = true;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether `copytext` should expand to the full width of its container.\n   * @defaultValue false\n   */\n  @Prop() fullWidth = false;\n\n  /**\n   * Determines whether the `value` should truncate and display with an ellipsis.\n   * @defaultValue false\n   */\n  @Prop() truncate = false;\n\n  /**\n   * String that is displayed and that is also copied to the clipboard upon interaction.\n   */\n  @Prop() value!: string;\n\n  /**\n   * Event when copyText button is clicked.\n   */\n  @Event() pdsCopyTextClick: EventEmitter;\n\n  private copyToClipboard = async (value: string) => {\n    try {\n      if (typeof navigator.clipboard !== 'undefined') {\n        await navigator.clipboard.writeText(value);\n        this.pdsCopyTextClick.emit('Copied to clipboard');\n      }\n    } catch (err) {\n      this.pdsCopyTextClick.emit(`Error writing text to clipboard: ${err}`);\n    }\n  };\n\n  private handleClick = () => {\n    this.copyToClipboard(this.value);\n  };\n\n  private classNames() {\n    const classNames = ['pds-copytext'];\n\n    if (this.border) {\n      classNames.push('pds-copytext--bordered');\n    }\n\n    if (this.fullWidth) {\n      classNames.push('pds-copytext--full-width');\n    }\n\n    if (this.truncate) {\n      classNames.push('pds-copytext--truncated');\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        <pds-button type=\"button\" variant=\"unstyled\" onClick={this.handleClick}>\n          <span>{this.value}</span>\n          <pds-icon icon={copyIcon} size=\"16px\"></pds-icon>\n        </pds-button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-copytext/stories/pds-copytext.stories.js

@@ -0,0 +1,57 @@
+import { html } from 'lit';
+import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
+import { withActions } from '@storybook/addon-actions/decorator';
+
+export default {
+  argTypes: extractArgTypes('pds-copytext'),
+  component: 'pds-copytext',
+  decorators: [withActions],
+  parameters: {
+    actions: {
+      handles: ['onclick', 'pdsCopyTextClick'],
+    },
+  },
+  title: 'components/Copy Text',
+}
+
+const BaseTemplate = (args) => html`
+  <pds-copytext
+    border="${args.border}"
+    full-width="${args.fullWidth}"
+    component-id=${args.componentId}
+    onClick=${args.onClick}
+    truncate="${args.truncate}"
+    value="${args.value}">
+  </pds-copytext>`;
+
+export const Default = BaseTemplate.bind();
+Default.args = {
+  border: true,
+  fullWidth: false,
+  truncate: false,
+  value: 'Default copy text',
+};
+
+export const Borderless = BaseTemplate.bind();
+Borderless.args = {
+  border: false,
+  fullWidth: false,
+  truncate: false,
+  value: 'Borderless copy text',
+};
+
+export const FullWidth = BaseTemplate.bind();
+FullWidth.args = {
+  border: true,
+  fullWidth: true,
+  truncate: false,
+  value: 'Full width copy text',
+};
+
+export const Truncate = BaseTemplate.bind();
+Truncate.args = {
+  border: true,
+  fullWidth: false,
+  truncate: true,
+  value: 'Copy all of this really long text that should be truncated in the UI, but will still be copied to the clipboard. This can be used in cases where the text is too long to fit in the UI, but the user still needs to copy the full text.',
+};