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

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

@@ -0,0 +1,75 @@
+import { html } from 'lit-html';
+import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
+
+export default {
+  argTypes: extractArgTypes('pds-row'),
+  component: 'pds-row',
+  title: 'components/Layout/Row',
+};
+
+const BaseTemplate = (args) => html`
+<pds-row
+  align-items="${args.alignItems}"  
+  border="${args.border}"
+  component-id="${args.componentId}" 
+  col-gap="${args.colGap}"
+  justify-content="${args.justifyContent}"
+  min-height="${args.minHeight}"
+  no-wrap="${args.noWrap}"
+>
+  <pds-box border>Item 1</pds-box>
+  <pds-box border direction="column">
+    <p>Content 1</p>
+    <p>Content 2</p>
+  </pds-box>
+</pds-row>
+`;
+
+export const Default = BaseTemplate.bind();
+Default.args = {
+  border: "true",
+  componentId: 'opt0',
+  colGap: '8px',
+};
+
+const GapTemplate = (args) => html`
+<pds-row
+  align-items="${args.alignItems}"  
+  border="${args.border}"
+  component-id="${args.componentId}" 
+  col-gap="${args.colGap}"
+  justify-content="${args.justifyContent}"
+  min-height="${args.minHeight}"
+>
+  <pds-box size="4">
+    <pds-box
+      border="true"
+      border-radius="sm"
+      padding="sm"
+      shadow="sm"
+    >
+      Item 1
+    </pds-box>
+  </pds-box>
+  <pds-box size="8">
+    <pds-box
+      border="true"
+      border-radius="sm"
+      padding="sm"
+      shadow="sm"
+    >
+      Item 2
+    </pds-box>
+  </pds-box>
+</pds-row>
+`;
+
+
+export const Gap = GapTemplate.bind();
+Gap.args = {
+  border: "false",
+  componentId: 'opt0',
+  colGap: 'sm',
+};
+
+

package/dist/collection/components/pds-sortable/pds-sortable-item/pds-sortable-item.css

@@ -0,0 +1,63 @@
+:host(.pds-sortable-item) {
+  --border-radius: var(--pine-border-radius-125);
+  --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);
+  --box-shadow: var(--pine-box-shadow-lg);
+  --color-background-default: var(--pine-color-white);
+  --color-background-interactive: var(--pine-color-grey-200);
+  --color-interactive-handle: var(--pine-color-blue-300);
+  --spacing-margin-inline-end: var(--pine-spacing-300);
+  --spacing-padding-block-xs: var(--pine-spacing-100);
+  --spacing-padding-inline: var(--pine-spacing-300);
+  --spacing-padding-inline-start: var(--pine-spacing-300);
+  align-items: center;
+  display: flex;
+  padding-block: var(--spacing-padding-block-xs);
+  padding-inline: var(--spacing-padding-inline);
+}
+:host(.pds-sortable-item) .pds-sortable-item__actions {
+  margin-inline-start: auto;
+  padding-inline-start: var(--spacing-padding-inline-start);
+}
+:host(.pds-sortable-item) .pds-sortable-item__handle {
+  line-height: 1;
+  margin-inline-end: var(--spacing-margin-inline-end);
+}
+.pds-sortable--bordered :host(.pds-sortable-item):first-child {
+  border-start-end-radius: var(--border-radius);
+  border-start-start-radius: var(--border-radius);
+}
+.pds-sortable--bordered :host(.pds-sortable-item):last-child {
+  border-end-end-radius: var(--border-radius);
+  border-end-start-radius: var(--border-radius);
+}
+.pds-sortable--divided :host(.pds-sortable-item) {
+  border-block-end: var(--border-default);
+}
+.pds-sortable--divided :host(.pds-sortable-item):last-child {
+  border-block-end: 0;
+}
+.pds-sortable--handle-type-row :host(.pds-sortable-item) {
+  cursor: grab;
+}
+.pds-sortable--handle-type-handle :host(.pds-sortable-item) .pds-sortable-item__handle {
+  cursor: grab;
+}
+
+:host(.pds-sortable-item):hover {
+  background-color: var(--color-background-interactive);
+}
+:host(.pds-sortable-item):hover pds-icon {
+  color: var(--color-interactive-handle);
+}
+
+:host(.pds-sortable-item--drag) {
+  background-color: var(--color-background-default);
+  border-radius: 0;
+  box-shadow: var(--box-shadow);
+  opacity: 1;
+}
+
+:host(.pds-sortable-item--ghost) {
+  background-color: var(--color-background-interactive);
+  border-radius: 0;
+}

package/dist/collection/components/pds-sortable/pds-sortable-item/pds-sortable-item.js

@@ -0,0 +1,100 @@
+import { Host, h } from "@stencil/core";
+import { handle as handleIcon } from "@pine-ds/icons/icons";
+/**
+ * @slot sortable-item-actions - Content is placed within the `pds-sortable-item__actions` element as children. This slot is only rendered if `actions` is set to `true`.
+ */
+export class PdsSortableItem {
+    constructor() {
+        this.enableActions = false;
+        this.componentId = undefined;
+        this.showHandle = false;
+    }
+    componentWillRender() {
+        // When the parent sortable has a type of 'handle', the sortable items
+        // will automatically set showHandle to 'true'.
+        this.sortableRef = this.el.closest('pds-sortable');
+        if (this.sortableRef && this.sortableRef.handleType === 'handle') {
+            this.showHandle = true;
+        }
+    }
+    render() {
+        return (h(Host, { key: '60214e183314736338f9b38cb93a9c5989e16cdf', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: '7cc252c99598f384a87518c101d0772a4ce344e4', class: "pds-sortable-item__handle" }, h("pds-icon", { key: 'e2b219927cf717fa53112066ba3fe0ac12688edd', icon: handleIcon }))), h("slot", { key: 'e259bfbf7e8c848567d07639e62adfe5781f29b8' }), this.enableActions && (h("div", { key: 'e83d28d55b6fee971575433a3e3f8b1d5b7e52fe', class: "pds-sortable-item__actions" }, h("slot", { key: '7ac52a8109e49cfff96cead45a3b318646c7f064', name: "sortable-item-actions" })))));
+    }
+    static get is() { return "pds-sortable-item"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-sortable-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-sortable-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "enableActions": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Determines whether `sortable-item-actions` slot should be enabled."
+                },
+                "attribute": "enable-actions",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier used for the sortable item `id` attribute."
+                },
+                "attribute": "component-id",
+                "reflect": false
+            },
+            "showHandle": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Determines whether `sortable-item` should have a handle."
+                },
+                "attribute": "show-handle",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=pds-sortable-item.js.map

package/dist/collection/components/pds-sortable/pds-sortable-item/pds-sortable-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pds-sortable-item.js","sourceRoot":"","sources":["../../../../src/components/pds-sortable/pds-sortable-item/pds-sortable-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAC5D;;GAEG;AAMH,MAAM,OAAO,eAAe;;6BAOF,KAAK;;0BAWS,KAAK;;IAE3C,mBAAmB;QACjB,sEAAsE;QACtE,+CAA+C;QAC/C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,cAAc,CAA2B,CAAC;QAE7E,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,UAAU,KAAK,QAAQ,EAAE,CAAC;YACjE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACzB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW;YACjD,IAAI,CAAC,UAAU,IAAI,CAClB,4DAAK,KAAK,EAAC,2BAA2B;gBACpC,iEAAU,IAAI,EAAE,UAAU,GAAa,CACnC,CACP;YACD,8DAAa;YACZ,IAAI,CAAC,aAAa,IAAI,CACrB,4DAAK,KAAK,EAAC,4BAA4B;gBACrC,6DAAM,IAAI,EAAC,uBAAuB,GAAG,CACjC,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop } from '@stencil/core';\n\nimport { handle as handleIcon } from '@pine-ds/icons/icons';\n/**\n * @slot sortable-item-actions - Content is placed within the `pds-sortable-item__actions` element as children. This slot is only rendered if `actions` is set to `true`.\n */\n@Component({\n  tag: 'pds-sortable-item',\n  styleUrl: 'pds-sortable-item.scss',\n  scoped: true,\n})\nexport class PdsSortableItem {\n  @Element() el: HTMLPdsSortableItemElement;\n  sortableRef: HTMLPdsSortableElement;\n  /**\n   * Determines whether `sortable-item-actions` slot should be enabled.\n   * @defaultValue false\n   */\n  @Prop() enableActions = false;\n\n  /**\n   * A unique identifier used for the sortable item `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether `sortable-item` should have a handle.\n   * @defaultValue false\n   */\n  @Prop({ mutable: true }) showHandle = false;\n\n  componentWillRender() {\n    // When the parent sortable has a type of 'handle', the sortable items\n    // will automatically set showHandle to 'true'.\n    this.sortableRef = this.el.closest('pds-sortable') as HTMLPdsSortableElement;\n\n    if (this.sortableRef && this.sortableRef.handleType === 'handle') {\n      this.showHandle = true;\n    }\n  }\n\n  render() {\n    return (\n      <Host class=\"pds-sortable-item\" id={this.componentId}>\n        {this.showHandle && (\n          <div class=\"pds-sortable-item__handle\">\n            <pds-icon icon={handleIcon}></pds-icon>\n          </div>\n        )}\n        <slot></slot>\n        {this.enableActions && (\n          <div class=\"pds-sortable-item__actions\">\n            <slot name=\"sortable-item-actions\" />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-sortable/pds-sortable-item/stories/pds-sortable-item.stories.js

@@ -0,0 +1,24 @@
+import { html } from 'lit-html';
+import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
+
+export default {
+  argTypes: extractArgTypes('pds-sortable-item'),
+  component: 'pds-sortable-item',
+  title: 'components/Sortable/Sortable Item',
+};
+
+const BaseTemplate = (args) => html`
+<pds-sortable-item
+  action="${args.enableActions}"
+  component-id="${args.componentId}"
+  show-handle="${args.showHandle}"
+>
+  Item
+</pds-sortable-item>`;
+
+export const Default = BaseTemplate.bind();
+Default.args = {
+  componentId: 'default',
+  enableActions: false,
+  showHandle: false,
+};

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

@@ -0,0 +1,10 @@
+:host(.pds-sortable) {
+  --border-radius: var(--pine-border-radius-050);
+  --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);
+  display: flex;
+  flex-direction: column;
+}
+:host(.pds-sortable).pds-sortable--bordered {
+  border: var(--border-default);
+  border-radius: var(--border-radius);
+}

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

@@ -0,0 +1,150 @@
+import { Host, h } from "@stencil/core";
+import Sortable from "sortablejs";
+export class PdsSortable {
+    constructor() {
+        this.border = false;
+        this.componentId = undefined;
+        this.dividers = false;
+        this.handleType = 'row';
+    }
+    classNames() {
+        const classNames = ['pds-sortable'];
+        if (this.border) {
+            classNames.push('pds-sortable--bordered');
+        }
+        if (this.dividers) {
+            classNames.push('pds-sortable--divided');
+        }
+        if (this.handleType !== undefined) {
+            classNames.push(`pds-sortable--handle-type-${this.handleType}`);
+        }
+        return classNames.join('  ');
+    }
+    componentDidLoad() {
+        let sortableOptions = {
+            animation: 150,
+            ghostClass: 'pds-sortable-item--ghost',
+            dragClass: 'pds-sortable-item--drag',
+            onEnd: (evt) => {
+                this.pdsSortableItemMoved.emit(evt);
+            },
+        };
+        if (this.handleType === 'handle') {
+            sortableOptions = Object.assign(Object.assign({}, sortableOptions), { handle: '.pds-sortable-item__handle' });
+        }
+        Sortable.create(this.el, sortableOptions);
+    }
+    render() {
+        return (h(Host, { key: '030286aa0de920f4b5ce4470f3d1b5ab14be2792', class: this.classNames(), id: this.componentId }, h("slot", { key: 'c38822d7c82273c2fbc28d09c919e4c179ebb49d' })));
+    }
+    static get is() { return "pds-sortable"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-sortable.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-sortable.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": "false"
+                        }],
+                    "text": "Determines whether `sortable` should have a border."
+                },
+                "attribute": "border",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier used for the sortable container `id` attribute."
+                },
+                "attribute": "component-id",
+                "reflect": false
+            },
+            "dividers": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Deternines whether `sortable` items should be divided with border."
+                },
+                "attribute": "dividers",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "handleType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'handle' | 'row'",
+                    "resolved": "\"handle\" | \"row\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines the grabbable area for the `pds-sortable-item`."
+                },
+                "attribute": "handle-type",
+                "reflect": false,
+                "defaultValue": "'row'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pdsSortableItemMoved",
+                "name": "pdsSortableItemMoved",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a sortable item is moved."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=pds-sortable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pds-sortable.js","sourceRoot":"","sources":["../../../src/components/pds-sortable/pds-sortable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEvF,OAAO,QAAQ,MAAM,YAAY,CAAC;AAOlC,MAAM,OAAO,WAAW;;sBAYY,KAAK;;wBAUH,KAAK;0BAKF,KAAK;;IAEpC,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,QAAQ,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QAC3C,CAAC;QAED,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,EAAE,CAAC;YAClC,UAAU,CAAC,IAAI,CAAC,6BAA6B,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;QAClE,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,gBAAgB;QAEd,IAAI,eAAe,GAAiB;YAClC,SAAS,EAAE,GAAG;YACd,UAAU,EAAE,0BAA0B;YACtC,SAAS,EAAE,yBAAyB;YACpC,KAAK,EAAE,CAAC,GAAG,EAAE,EAAE;gBACb,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACtC,CAAC;SACF,CAAC;QAEF,IAAI,IAAI,CAAC,UAAU,KAAK,QAAQ,EAAE,CAAC;YACjC,eAAe,mCACV,eAAe,KAClB,MAAM,EAAE,4BAA4B,GACrC,CAAC;QACJ,CAAC;QAED,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE,eAAe,CAAC,CAAC;IAC5C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW;YAClD,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { SortableType } from './sortable-interface';\nimport Sortable from 'sortablejs';\n\n@Component({\n  tag: 'pds-sortable',\n  styleUrl: 'pds-sortable.scss',\n  scoped: true,\n})\nexport class PdsSortable {\n  @Element() el: HTMLPdsSortableElement;\n\n  /**\n   * Event emitted when a sortable item is moved.\n   */\n  @Event() pdsSortableItemMoved: EventEmitter;\n\n  /**\n   * Determines whether `sortable` should have a border.\n   * @defaultValue false\n   */\n  @Prop({ reflect: true }) border = false;\n\n  /**\n   * A unique identifier used for the sortable container `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Deternines whether `sortable` items should be divided with border.\n   */\n  @Prop({ reflect: true }) dividers = false;\n\n  /**\n   * Determines the grabbable area for the `pds-sortable-item`.\n   */\n  @Prop() handleType: 'handle' | 'row' = 'row';\n\n  private classNames() {\n    const classNames = ['pds-sortable'];\n\n    if (this.border) {\n      classNames.push('pds-sortable--bordered');\n    }\n\n    if (this.dividers) {\n      classNames.push('pds-sortable--divided');\n    }\n\n    if (this.handleType !== undefined) {\n      classNames.push(`pds-sortable--handle-type-${this.handleType}`);\n    }\n\n    return classNames.join('  ');\n  }\n\n  componentDidLoad() {\n\n    let sortableOptions: SortableType = {\n      animation: 150,\n      ghostClass: 'pds-sortable-item--ghost',\n      dragClass: 'pds-sortable-item--drag',\n      onEnd: (evt) => {\n        this.pdsSortableItemMoved.emit(evt);\n      },\n    };\n\n    if (this.handleType === 'handle') {\n      sortableOptions = {\n        ...sortableOptions,\n        handle: '.pds-sortable-item__handle',\n      };\n    }\n\n    Sortable.create(this.el, sortableOptions);\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-sortable/sortable-interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=sortable-interface.js.map

package/dist/collection/components/pds-sortable/sortable-interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortable-interface.js","sourceRoot":"","sources":["../../../src/components/pds-sortable/sortable-interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface SortableType {\n  animation: number;\n  ghostClass: string;\n  dragClass: string;\n  onEnd: (evt: Event) => void;\n  handle?: string;\n}"]}

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

@@ -0,0 +1,130 @@
+import { html } from 'lit-html';
+import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
+import { withActions } from '@storybook/addon-actions/decorator';
+
+export default {
+  argTypes: extractArgTypes('pds-sortable'),
+  component: 'pds-sortable',
+  decorators: [withActions],
+  parameters: {
+    actions: {
+      handles: ['onchange', 'pdsSortableItemMoved'],
+    },
+  },
+  title: 'components/Sortable',
+};
+
+const BaseTemplate = (args) => html`
+<pds-sortable border="${args.border}" component-id="${args.componentId}" dividers="${args.dividers}" handle-type="${args.handleType}">
+  <pds-sortable-item>Item 1</pds-sortable-item>
+  <pds-sortable-item>Item 2</pds-sortable-item>
+  <pds-sortable-item>Item 3</pds-sortable-item>
+</pds-sortable>`;
+
+const HandleTemplate = (args) => html`
+<pds-sortable border="${args.border}" component-id="${args.componentId}" dividers="${args.dividers}" handle-type="${args.handleType}">
+  <pds-sortable-item>Item 1</pds-sortable-item>
+  <pds-sortable-item>Item 2</pds-sortable-item>
+  <pds-sortable-item>Item 3</pds-sortable-item>
+</pds-sortable>`;
+
+const ActionsTemplate = (args) => html`
+<pds-sortable border="${args.border}" component-id="${args.componentId}" dividers="${args.dividers}" handle-type="${args.handleType}">
+  <pds-sortable-item enable-actions>
+    <div>Item 1</div>
+    <div slot="sortable-item-actions">
+      <pds-link href="#" variant="plain">action</pds-link>
+    </div>
+  </pds-sortable-item>
+  <pds-sortable-item enable-actions>
+    <div>Item 2</div>
+    <div slot="sortable-item-actions">
+      <pds-link href="#" variant="plain">action</pds-link>
+    </div>
+  </pds-sortable-item>
+  <pds-sortable-item enable-actions>
+    <div>Item 3</div>
+    <div slot="sortable-item-actions">
+      <pds-link href="#" variant="plain">action</pds-link>
+    </div>
+  </pds-sortable-item>
+</pds-sortable>`;
+
+const FullDemoTemplate = (args) => html`
+<pds-sortable border="${args.border}" component-id="${args.componentId}" dividers="${args.dividers}" handle-type="${args.handleType}">
+  <pds-sortable-item enable-actions>
+    <div>
+      <div><strong>Item 1</strong></div>
+      <div>Item 1 description copy text</div>
+    </div>
+    <div slot="sortable-item-actions">
+      <pds-link href="#" variant="plain">action</pds-link>
+    </div>
+  </pds-sortable-item>
+  <pds-sortable-item enable-actions>
+    <div>
+      <div><strong>Item 2</strong></div>
+      <div>Item 2 description copy text</div>
+    </div>
+    <div slot="sortable-item-actions">
+      <pds-link href="#" variant="plain">action</pds-link>
+    </div>
+  </pds-sortable-item>
+  <pds-sortable-item enable-actions>
+    <div>
+      <div><strong>Item 3</strong></div>
+      <div>Item 3 description copy text</div>
+    </div>
+    <div slot="sortable-item-actions">
+      <pds-link href="#" variant="plain">action</pds-link>
+    </div>
+  </pds-sortable-item>
+</pds-sortable>`;
+
+export const Default = BaseTemplate.bind();
+Default.args = {
+  componentId: 'default',
+  border: false,
+  dividers: false,
+  handleType: 'row',
+};
+
+export const Bordered = BaseTemplate.bind();
+Bordered.args = {
+  componentId: 'bordered',
+  border: true,
+  dividers: false,
+  handleType: 'row',
+};
+
+export const Dividers = BaseTemplate.bind();
+Dividers.args = {
+  componentId: 'dividers',
+  border: false,
+  dividers: true,
+  handleType: 'row',
+};
+
+export const Handle = HandleTemplate.bind();
+Handle.args = {
+  componentId: 'handle',
+  border: false,
+  dividers: false,
+  handleType: 'handle',
+};
+
+export const Actions = ActionsTemplate.bind();
+Actions.args = {
+  componentId: 'actions',
+  border: false,
+  dividers: false,
+  handleType: 'row',
+};
+
+export const FullDemo = FullDemoTemplate.bind();
+FullDemo.args = {
+  componentId: 'demo',
+  border: true,
+  dividers: true,
+  handleType: 'row',
+};