@pine-ds/core 4.0.0-mercury.0 → 4.1.0

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

@@ -0,0 +1,205 @@
+import { html } from 'lit';
+
+
+export default {
+
+  args: {
+    autocomplete: null,
+    disabled: false,
+    errorMessage: null,
+    hideLabel: false,
+    helperMessage: null,
+    highlight: false,
+    invalid: false,
+    multiple: false,
+    value: null,
+  },
+  component: 'pds-select',
+  parameters: {},
+  title: 'components/Select',
+};
+
+const options = [
+  { value: 'paul', label: 'Paul McCartney' },
+  { value: 'john', label: 'John Lennon' },
+  { value: 'george', label: 'George Harrison' },
+  { value: 'ringo', label: 'Ringo Starr' },
+];
+
+const optgroupOptions = [
+  {
+    label: 'Correct answers',
+    options: [
+      { value: 'paul', label: 'Paul McCartney' },
+      { value: 'john', label: 'John Lennon' },
+      { value: 'george', label: 'George Harrison' },
+    ],
+  },
+  {
+    label: 'Incorrect answers',
+    options: [{ value: 'ringo', label: 'Ringo Starr' }],
+  },
+];
+
+const BaseTemplate = (args) =>
+  html`<pds-select
+    autocomplete="${args.autocomplete}"
+    component-id="${args.componentId}"
+    ?disabled=${args.disabled}
+    error-message="${args.errorMessage}"
+    helper-message="${args.helperMessage}"
+    ?hide-label=${args.hideLabel}
+    ?highlight=${args.highlight}
+    ?invalid=${args.invalid}
+    label="${args.label}"
+    ?multiple=${args.multiple}
+    name="${args.name}"
+    ?required=${args.required}
+    type="${args.type}"
+    value="${args.value}"
+  >
+    ${args.action || ''}
+    ${options.map((option) => html`<option value="${option.value}">${option.label}</option>`)}
+  </pds-select>`;
+
+const OptgroupTemplate = (args) =>
+  html`<pds-select
+    autocomplete="${args.autocomplete}"
+    component-id="${args.componentId}"
+    ?disabled=${args.disabled}
+    error-message="${args.errorMessage}"
+    helper-message="${args.helperMessage}"
+    ?highlight=${args.highlight}
+    ?invalid=${args.invalid}
+    label="${args.label}"
+    ?multiple=${args.multiple}
+    name="${args.name}"
+    ?required=${args.required}
+    type="${args.type}"
+    value="${args.value}"
+  >
+    ${args.action || ''}
+    ${optgroupOptions.map(
+      (group) => html`<optgroup label="${group.label}">${group.options.map((option) => html`<option value="${option.value}">${option.label}</option>`)}</optgroup>`,
+    )}
+  </pds-select>`;
+
+export const Default = BaseTemplate.bind({});
+Default.args = {
+  componentId: 'pds-select-default-example',
+  disabled: false,
+  label: 'Select your favorite Beatle',
+  name: 'beatles',
+  required: true,
+  value: 'paul',
+};
+
+export const Disabled = BaseTemplate.bind({});
+Disabled.args = {
+  componentId: 'pds-select-disabled-example',
+  disabled: true,
+  label: 'Select your favorite Beatle',
+  name: 'beatles',
+  value: 'george',
+};
+
+export const Highlight = BaseTemplate.bind({});
+Highlight.args = {
+  componentId: 'pds-select-highlight-example',
+  highlight: true,
+  label: 'Select your favorite Beatle',
+  name: 'beatles',
+  value: 'paul',
+};
+
+export const withMessage = BaseTemplate.bind({});
+withMessage.args = {
+  componentId: 'pds-select-message-example',
+  disabled: false,
+  helperMessage: "Please don't pick Ringo",
+  label: 'Select your favorite Beatle',
+  name: 'beatles',
+  value: 'john',
+};
+
+export const Invalid = BaseTemplate.bind({});
+Invalid.args = {
+  componentId: 'pds-select-invalid-example',
+  disabled: false,
+  errorMessage: 'Its not Ringo',
+  invalid: true,
+  label: 'Select your favorite Beatle',
+  name: 'beatles',
+  value: 'ringo',
+};
+
+export const Autocomplete = BaseTemplate.bind({});
+Autocomplete.args = {
+  componentId: 'pds-select-autocomplete-example',
+  disabled: false,
+  autocomplete: 'on',
+  label: 'Select your favorite Beatle',
+  name: 'beatles',
+  value: 'paul',
+};
+
+export const Multiple = BaseTemplate.bind({});
+Multiple.args = {
+  componentId: 'pds-select-multiple-example',
+  disabled: false,
+  helperMessage: "Use 'Command' on your keyboard to select multiple options",
+  label: 'Select your favorite Beatle',
+  multiple: true,
+  name: 'beatles',
+};
+
+export const WithOptgroup = OptgroupTemplate.bind({});
+WithOptgroup.args = {
+  componentId: 'pds-select-optgroup-example',
+  disabled: false,
+  label: 'Select your favorite Beatle',
+  name: 'beatles',
+  value: 'george',
+};
+
+export const withActionLink = (args) => html`<pds-select
+  autocomplete="${args.autocomplete}"
+  component-id="pds-select-action-link"
+  ?disabled=${args.disabled}
+  error-message="${args.errorMessage}"
+  helper-message="${args.helperMessage}"
+  ?hide-label=${args.hideLabel}
+  ?highlight=${args.highlight}
+  ?invalid=${args.invalid}
+  label="Timezone"
+  ?multiple=${args.multiple}
+  name="timezone"
+  ?required=${args.required}
+  type="${args.type}"
+  value="${args.value}">
+  <pds-link href="#" slot="action">
+    Auto-detect
+  </pds-link>
+  ${options.map((option) => html`<option value="${option.value}">${option.label}</option>`)}
+</pds-select>`;
+
+export const withActionButton = (args) => html`<pds-select
+  autocomplete="${args.autocomplete}"
+  component-id="pds-select-action-button"
+  ?disabled=${args.disabled}
+  error-message="${args.errorMessage}"
+  helper-message="${args.helperMessage}"
+  ?hide-label=${args.hideLabel}
+  ?highlight=${args.highlight}
+  ?invalid=${args.invalid}
+  label="Country"
+  ?multiple=${args.multiple}
+  name="country"
+  ?required=${args.required}
+  type="${args.type}"
+  value="${args.value}">
+  <pds-button slot="action" variant="unstyled">
+    <pds-icon name="question-circle"></pds-icon>
+  </pds-button>
+  ${options.map((option) => html`<option value="${option.value}">${option.label}</option>`)}
+</pds-select>`;

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

@@ -1,37 +1,27 @@
 :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);
+  padding-block: var(--pine-dimension-xs);
+  padding-inline: var(--pine-dimension-md);
 }
 :host(.pds-sortable-item) .pds-sortable-item__actions {
   margin-inline-start: auto;
-  padding-inline-start: var(--spacing-padding-inline-start);
+  padding-inline-start: var(--pine-dimension-md);
 }
 :host(.pds-sortable-item) .pds-sortable-item__handle {
   line-height: 1;
-  margin-inline-end: var(--spacing-margin-inline-end);
+  margin-inline-end: var(--pine-dimension-md);
 }
 .pds-sortable--bordered :host(.pds-sortable-item):first-child {
-  border-start-end-radius: var(--border-radius);
-  border-start-start-radius: var(--border-radius);
+  border-start-end-radius: calc(var(--pine-dimension-xs) * 1.25);
+  border-start-start-radius: calc(var(--pine-dimension-xs) * 1.25);
 }
 .pds-sortable--bordered :host(.pds-sortable-item):last-child {
-  border-end-end-radius: var(--border-radius);
-  border-end-start-radius: var(--border-radius);
+  border-end-end-radius: calc(var(--pine-dimension-xs) * 1.25);
+  border-end-start-radius: calc(var(--pine-dimension-xs) * 1.25);
 }
 .pds-sortable--divided :host(.pds-sortable-item) {
-  border-block-end: var(--border-default);
+  border-block-end: var(--pine-border);
 }
 .pds-sortable--divided :host(.pds-sortable-item):last-child {
   border-block-end: 0;
@@ -42,22 +32,32 @@
 .pds-sortable--handle-type-handle :host(.pds-sortable-item) .pds-sortable-item__handle {
   cursor: grab;
 }
+.pds-sortable--disabled :host(.pds-sortable-item) {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.pds-sortable--disabled :host(.pds-sortable-item) .pds-sortable-item__handle {
+  cursor: not-allowed;
+}
 
-:host(.pds-sortable-item):hover {
-  background-color: var(--color-background-interactive);
+.pds-sortable--disabled :host(.pds-sortable-item):hover {
+  background-color: transparent;
+}
+.pds-sortable:not(.pds-sortable--disabled) :host(.pds-sortable-item):hover {
+  background-color: var(--pine-color-background-container-hover);
 }
-:host(.pds-sortable-item):hover pds-icon {
-  color: var(--color-interactive-handle);
+.pds-sortable:not(.pds-sortable--disabled) :host(.pds-sortable-item):hover pds-icon {
+  color: var(--pine-color-info);
 }
 
 :host(.pds-sortable-item--drag) {
-  background-color: var(--color-background-default);
+  background-color: var(--pine-color-background-container);
   border-radius: 0;
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--pine-box-shadow-400);
   opacity: 1;
 }
 
 :host(.pds-sortable-item--ghost) {
-  background-color: var(--color-background-interactive);
+  background-color: var(--pine-color-background-container-hover);
   border-radius: 0;
 }

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

@@ -5,10 +5,30 @@ import { handle as handleIcon } from "@pine-ds/icons/icons";
  */
 export class PdsSortableItem {
     constructor() {
+        /**
+         * Determines whether `sortable-item-actions` slot should be enabled.
+         * @defaultValue false
+         */
         this.enableActions = false;
-        this.componentId = undefined;
+        /**
+         * Determines whether `sortable-item` should have a handle.
+         * @defaultValue false
+         */
         this.showHandle = false;
     }
+    // Discards stale handle/actions siblings left by a page-cache (Turbo, bfcache) reconnect; the fresh handle is always first, the fresh actions wrapper always last.
+    componentDidRender() {
+        const handles = Array.from(this.el.children).filter((child) => child.matches('.pds-sortable-item__handle'));
+        handles.slice(1).forEach((stale) => stale.remove());
+        const actionsWrappers = Array.from(this.el.children).filter((child) => child.matches('.pds-sortable-item__actions'));
+        const freshActions = actionsWrappers[actionsWrappers.length - 1];
+        actionsWrappers.slice(0, -1).forEach((stale) => {
+            if (freshActions !== undefined) {
+                Array.from(stale.children).forEach((node) => freshActions.appendChild(node));
+            }
+            stale.remove();
+        });
+    }
     componentWillRender() {
         // When the parent sortable has a type of 'handle', the sortable items
         // will automatically set showHandle to 'true'.
@@ -18,7 +38,7 @@ export class PdsSortableItem {
         }
     }
     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" })))));
+        return (h(Host, { key: '18cf8345abe65e492b09add621df93c9eac77d30', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: 'a9545fad581a44740da59ae64209da530c91fc97', class: "pds-sortable-item__handle" }, h("pds-icon", { key: '4d0ecd4ec0ee6c0aa5249c060098d7748a05b910', "aria-hidden": "true", icon: handleIcon }))), h("slot", { key: 'f79fcb490cb435e578c3d6ff2ce4b8dcd4040555' }), this.enableActions && (h("div", { key: 'eac4084b1bc7e6c0e1026ec9fea2b3a9e33ac618', class: "pds-sortable-item__actions" }, h("slot", { key: '8f77cd2e46a7ed2d442f04747c2ef6b726912ad9', name: "sortable-item-actions" })))));
     }
     static get is() { return "pds-sortable-item"; }
     static get encapsulation() { return "scoped"; }
@@ -51,8 +71,10 @@ export class PdsSortableItem {
                         }],
                     "text": "Determines whether `sortable-item-actions` slot should be enabled."
                 },
-                "attribute": "enable-actions",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "enable-actions",
                 "defaultValue": "false"
             },
             "componentId": {
@@ -69,8 +91,10 @@ export class PdsSortableItem {
                     "tags": [],
                     "text": "A unique identifier used for the sortable item `id` attribute."
                 },
-                "attribute": "component-id",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component-id"
             },
             "showHandle": {
                 "type": "boolean",
@@ -89,12 +113,13 @@ export class PdsSortableItem {
                         }],
                     "text": "Determines whether `sortable-item` should have a handle."
                 },
-                "attribute": "show-handle",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "show-handle",
                 "defaultValue": "false"
             }
         };
     }
     static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=pds-sortable-item.js.map

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

@@ -1,8 +1,6 @@
 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',
 };

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

@@ -1,10 +1,8 @@
 :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);
+  border: var(--pine-border);
+  border-radius: var(--pine-dimension-2xs);
 }

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

@@ -2,16 +2,37 @@ import { Host, h } from "@stencil/core";
 import Sortable from "sortablejs";
 export class PdsSortable {
     constructor() {
+        /**
+         * Determines whether `sortable` should have a border.
+         * @defaultValue false
+         */
         this.border = false;
-        this.componentId = undefined;
+        /**
+         * Determines whether or not the sortable is disabled.
+         * @defaultValue false
+         */
+        this.disabled = false;
+        /**
+         * Determines whether `sortable` items should be divided with border.
+         */
         this.dividers = false;
+        /**
+         * Determines the grabbable area for the `pds-sortable-item`.
+         */
         this.handleType = 'row';
     }
+    handleDisabledChange() {
+        var _a;
+        (_a = this.sortableInstance) === null || _a === void 0 ? void 0 : _a.option('disabled', this.disabled);
+    }
     classNames() {
         const classNames = ['pds-sortable'];
         if (this.border) {
             classNames.push('pds-sortable--bordered');
         }
+        if (this.disabled) {
+            classNames.push('pds-sortable--disabled');
+        }
         if (this.dividers) {
             classNames.push('pds-sortable--divided');
         }
@@ -23,6 +44,7 @@ export class PdsSortable {
     componentDidLoad() {
         let sortableOptions = {
             animation: 150,
+            disabled: this.disabled,
             ghostClass: 'pds-sortable-item--ghost',
             dragClass: 'pds-sortable-item--drag',
             onEnd: (evt) => {
@@ -32,10 +54,10 @@ export class PdsSortable {
         if (this.handleType === 'handle') {
             sortableOptions = Object.assign(Object.assign({}, sortableOptions), { handle: '.pds-sortable-item__handle' });
         }
-        Sortable.create(this.el, sortableOptions);
+        this.sortableInstance = Sortable.create(this.el, sortableOptions);
     }
     render() {
-        return (h(Host, { key: '030286aa0de920f4b5ce4470f3d1b5ab14be2792', class: this.classNames(), id: this.componentId }, h("slot", { key: 'c38822d7c82273c2fbc28d09c919e4c179ebb49d' })));
+        return (h(Host, { key: '7c5c1c00c00f8e7122c292f83f33b0b5638a4617', class: this.classNames(), id: this.componentId }, h("slot", { key: 'c418a9e41ff37672d886259c3c8a060507b2a16a' })));
     }
     static get is() { return "pds-sortable"; }
     static get encapsulation() { return "scoped"; }
@@ -68,8 +90,33 @@ export class PdsSortable {
                         }],
                     "text": "Determines whether `sortable` should have a border."
                 },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
                 "attribute": "border",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Determines whether or not the sortable is disabled."
+                },
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "componentId": {
@@ -86,8 +133,10 @@ export class PdsSortable {
                     "tags": [],
                     "text": "A unique identifier used for the sortable container `id` attribute."
                 },
-                "attribute": "component-id",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component-id"
             },
             "dividers": {
                 "type": "boolean",
@@ -101,10 +150,12 @@ export class PdsSortable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Deternines whether `sortable` items should be divided with border."
+                    "text": "Determines whether `sortable` items should be divided with border."
                 },
-                "attribute": "dividers",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "dividers",
                 "defaultValue": "false"
             },
             "handleType": {
@@ -121,8 +172,10 @@ export class PdsSortable {
                     "tags": [],
                     "text": "Determines the grabbable area for the `pds-sortable-item`."
                 },
-                "attribute": "handle-type",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "handle-type",
                 "defaultValue": "'row'"
             }
         };
@@ -139,12 +192,24 @@ export class PdsSortable {
                     "text": "Event emitted when a sortable item is moved."
                 },
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
+                    "original": "SortableEvent",
+                    "resolved": "SortableEvent",
+                    "references": {
+                        "SortableEvent": {
+                            "location": "import",
+                            "path": "sortablejs",
+                            "id": "../../node_modules/@types/sortablejs/index.d.ts::SortableEvent",
+                            "referenceLocation": "SortableEvent"
+                        }
+                    }
                 }
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "handleDisabledChange"
+            }];
+    }
 }
-//# sourceMappingURL=pds-sortable.js.map

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

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

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

@@ -1,35 +1,29 @@
 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'],
-    },
-  },
+  parameters: {},
   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 ?border=${args.border} component-id="${args.componentId}" ?disabled=${args.disabled} ?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 ?border=${args.border} component-id="${args.componentId}" ?disabled=${args.disabled} ?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 ?border=${args.border} component-id="${args.componentId}" ?disabled=${args.disabled} ?dividers=${args.dividers} handle-type="${args.handleType}">
   <pds-sortable-item enable-actions>
     <div>Item 1</div>
     <div slot="sortable-item-actions">
@@ -51,7 +45,7 @@ const ActionsTemplate = (args) => html`
 </pds-sortable>`;
 
 const FullDemoTemplate = (args) => html`
-<pds-sortable border="${args.border}" component-id="${args.componentId}" dividers="${args.dividers}" handle-type="${args.handleType}">
+<pds-sortable ?border=${args.border} component-id="${args.componentId}" ?disabled=${args.disabled} ?dividers=${args.dividers} handle-type="${args.handleType}">
   <pds-sortable-item enable-actions>
     <div>
       <div><strong>Item 1</strong></div>
@@ -85,6 +79,7 @@ export const Default = BaseTemplate.bind();
 Default.args = {
   componentId: 'default',
   border: false,
+  disabled: false,
   dividers: false,
   handleType: 'row',
 };
@@ -93,14 +88,25 @@ export const Bordered = BaseTemplate.bind();
 Bordered.args = {
   componentId: 'bordered',
   border: true,
+  disabled: false,
   dividers: false,
   handleType: 'row',
 };
 
+export const Disabled = BaseTemplate.bind();
+Disabled.args = {
+  componentId: 'disabled',
+  border: true,
+  disabled: true,
+  dividers: true,
+  handleType: 'row',
+};
+
 export const Dividers = BaseTemplate.bind();
 Dividers.args = {
   componentId: 'dividers',
   border: false,
+  disabled: false,
   dividers: true,
   handleType: 'row',
 };
@@ -109,6 +115,7 @@ export const Handle = HandleTemplate.bind();
 Handle.args = {
   componentId: 'handle',
   border: false,
+  disabled: false,
   dividers: false,
   handleType: 'handle',
 };
@@ -117,6 +124,7 @@ export const Actions = ActionsTemplate.bind();
 Actions.args = {
   componentId: 'actions',
   border: false,
+  disabled: false,
   dividers: false,
   handleType: 'row',
 };
@@ -125,6 +133,7 @@ export const FullDemo = FullDemoTemplate.bind();
 FullDemo.args = {
   componentId: 'demo',
   border: true,
+  disabled: false,
   dividers: true,
   handleType: 'row',
 };