@dubai-design-system/components-js 4.1.0 → 5.0.1

package/dist/collection/components/dda-credit-card/dda-credit-card.stories.js

@@ -36,20 +36,20 @@ export default {
     parameters: {
         docs: {
             description: {
-                component: `
-  To use the \`dda-credit-card\` component, pass the following props:
-  
-  \`\`\`html
-<dda-credit-card
-    balance="$5,750.20"
-    name="MARIA GOMEZ"
-    card_number="1289"
-    card_type="https://www.mastercard.com/content/dam/public/brandcenter/assets/images/logos/mclogo-for-footer.svg"
-    design="default"
-    custom_class=""
-    component_mode=""
-></dda-credit-card>
-    \`\`\`
+                component: `
+  To use the \`dda-credit-card\` component, pass the following props:
+  
+  \`\`\`html
+<dda-credit-card
+    balance="$5,750.20"
+    name="MARIA GOMEZ"
+    card_number="1289"
+    card_type="https://www.mastercard.com/content/dam/public/brandcenter/assets/images/logos/mclogo-for-footer.svg"
+    design="default"
+    custom_class=""
+    component_mode=""
+></dda-credit-card>
+    \`\`\`
   `,
             },
         },
@@ -92,4 +92,3 @@ Dark.args = {
     custom_class: '',
     component_mode: '',
 };
-//# sourceMappingURL=dda-credit-card.stories.js.map

package/dist/collection/components/dda-creditcard-field/dda-creditcard-field.js

@@ -5,8 +5,26 @@ export class DdaCreditCardField {
         this.disabled = false;
         this.custom_class = '';
         this.restrict_input = false;
+        // F-018 (WCAG 1.3.5): card number is exactly the field type autocomplete
+        // exists for. Default to the correct token; still overridable.
+        this.autocomplete = 'cc-number';
         this.formattedValue = '';
     }
+    // F-016: ids derived from the consumer-supplied input_id, same pattern as
+    // dda-input/dda-select.
+    get helperId() {
+        return this.input_id ? `${this.input_id}-helper` : undefined;
+    }
+    get errorId() {
+        return this.input_id ? `${this.input_id}-error` : undefined;
+    }
+    get describedBy() {
+        const ids = [
+            this.helper_text ? this.helperId : undefined,
+            this.error_message ? this.errorId : undefined,
+        ].filter(Boolean);
+        return ids.length ? ids.join(' ') : undefined;
+    }
     handleInput(event) {
         const inputElement = event.target;
         const inputValue = inputElement.value.replace(/[^0-9-]/g, '');
@@ -44,7 +62,7 @@ export class DdaCreditCardField {
             this.custom_class ? `${this.custom_class}` : '',
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: 'cb87049ae2531408d3f1efd24968274dab97b26c' }, h("div", { key: '21ce58a1b2a03ea881365861d5cd90bc75e951b2', class: inputClass }, this.label && h("label", { key: 'c96ad2b5dcd75aaaa1d0b30ce0ee1395e347a34a', htmlFor: this.input_id, class: "dda-input-label" }, this.label), h("div", { key: 'fc0a03be12c7154b931e4c064b34b50f8d00326b', class: "dda-input-field-wrapper" }, this.card_icon && h("img", { key: 'b9fcfa96fac13c5c9801e50250fd0619ce79dafe', src: this.card_icon, alt: "Card Icon", class: "dda-creditcard-icon" }), h("input", { key: 'c284ccccd0556c8166e4e181e195404500f99651', "aria-label": this.aria_label, id: this.input_id, type: "text", inputmode: "numeric", placeholder: this.placeholder, value: this.formattedValue, onInput: (event) => this.handleInput(event), class: "dda-input-field", disabled: this.disabled, maxlength: this.restrict_input ? 100 : 25 })), this.helper_text && h("span", { key: 'b34605dd7f4408677c57a933ca6d28e806f2b4be', class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '2f33a5be485b0c3a6868143d3350adf75aa5e0ee', class: "dda-error-message" }, this.error_message))));
+        return (h(Host, { key: '640731f6a54bbae77a0a77c5dfb23e5a42a41d4f' }, h("div", { key: '402f8104c51e949a5e0fd5c9b458ee4a585c4ebd', class: inputClass }, this.label && h("label", { key: '9952ea7f684ac81c2f392b139f9c1b33cf68e923', htmlFor: this.input_id, class: "dda-input-label" }, this.label), h("div", { key: 'cbd8c3549328e6366d78a8713faffd69093688b3', class: "dda-input-field-wrapper" }, this.card_icon && h("img", { key: '3960616cd63f3368e678d6dd2a82adcb795f9f18', src: this.card_icon, alt: "Card Icon", class: "dda-creditcard-icon" }), h("input", { key: '9597182a7f98f68bf94465da894a669b95b81dc9', "aria-label": this.aria_label, id: this.input_id, name: this.input_name, type: "text", inputmode: "numeric", autocomplete: this.autocomplete, placeholder: this.placeholder, value: this.formattedValue, onInput: (event) => this.handleInput(event), class: "dda-input-field", disabled: this.disabled, maxlength: this.restrict_input ? 100 : 25, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined })), this.helper_text && h("span", { key: 'ef7f3746abb8e205ee6b3be035ac9507318145b5', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '3f925024408b1ebdd4738a203ef00784efe5820f', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-creditcard-field"; }
     static get originalStyleUrls() {
@@ -75,8 +93,8 @@ export class DdaCreditCardField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
-                "reflect": false
+                "reflect": false,
+                "attribute": "placeholder"
             },
             "label": {
                 "type": "string",
@@ -94,8 +112,8 @@ export class DdaCreditCardField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "value": {
                 "type": "string",
@@ -113,8 +131,8 @@ export class DdaCreditCardField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false,
+                "attribute": "value",
                 "defaultValue": "''"
             },
             "card_icon": {
@@ -133,8 +151,8 @@ export class DdaCreditCardField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "card_icon",
-                "reflect": false
+                "reflect": false,
+                "attribute": "card_icon"
             },
             "error_message": {
                 "type": "string",
@@ -152,8 +170,8 @@ export class DdaCreditCardField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error_message",
-                "reflect": false
+                "reflect": false,
+                "attribute": "error_message"
             },
             "validation_type": {
                 "type": "string",
@@ -171,8 +189,8 @@ export class DdaCreditCardField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "validation_type",
-                "reflect": false
+                "reflect": false,
+                "attribute": "validation_type"
             },
             "size": {
                 "type": "string",
@@ -190,8 +208,8 @@ export class DdaCreditCardField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
-                "reflect": false
+                "reflect": false,
+                "attribute": "size"
             },
             "input_type": {
                 "type": "string",
@@ -209,8 +227,8 @@ export class DdaCreditCardField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input_type",
-                "reflect": false
+                "reflect": false,
+                "attribute": "input_type"
             },
             "helper_text": {
                 "type": "string",
@@ -228,8 +246,8 @@ export class DdaCreditCardField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "helper_text",
-                "reflect": false
+                "reflect": false,
+                "attribute": "helper_text"
             },
             "disabled": {
                 "type": "boolean",
@@ -247,8 +265,8 @@ export class DdaCreditCardField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "custom_class": {
@@ -267,8 +285,8 @@ export class DdaCreditCardField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "restrict_input": {
@@ -287,8 +305,8 @@ export class DdaCreditCardField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "restrict_input",
                 "reflect": false,
+                "attribute": "restrict_input",
                 "defaultValue": "false"
             },
             "component_mode": {
@@ -307,8 +325,8 @@ export class DdaCreditCardField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             },
             "input_id": {
                 "type": "string",
@@ -326,8 +344,8 @@ export class DdaCreditCardField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input_id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "input_id"
             },
             "aria_label": {
                 "type": "string",
@@ -345,8 +363,47 @@ export class DdaCreditCardField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria_label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "aria_label"
+            },
+            "input_name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input_name"
+            },
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autocomplete",
+                "defaultValue": "'cc-number'"
             }
         };
     }
@@ -356,4 +413,3 @@ export class DdaCreditCardField {
         };
     }
 }
-//# sourceMappingURL=dda-creditcard-field.js.map

package/dist/collection/components/dda-creditcard-field/dda-creditcard-field.stories.js

@@ -69,32 +69,42 @@ export default {
         onchange: {
             control: { type: 'text' },
             description: 'onchange event for the credit card field',
+        },
+        input_name: {
+            control: { type: 'text' },
+            description: 'Name of the input field',
+        },
+        autocomplete: {
+            control: { type: 'text' },
+            description: 'Autocomplete token for the card number input (WCAG 1.3.5). Defaults to "cc-number".',
         }
     },
     parameters: {
         docs: {
             description: {
-                component: `
-  To use the \`dda-credit-card-field\` component, pass the following props:
-  
-  \`\`\`html
-<dda-creditcard-field
-    placeholder="0000 - 0000 - 0000 - 0000"
-    label="Card Number"
-    restrict_input="false"
-    value=""
-    card_icon="https://www.mastercard.com/content/dam/public/brandcenter/assets/images/logos/mclogo-for-footer.svg"
-    size="default"
-    helper_text="Helper or footer text"
-    error_message=""
-    validation_type="normal"
-    custom_class=""
-    component_mode=""
-    input_id="input"
-    aria_label="credit-card-field"
-    onchange="console.log('changed')"
-></dda-creditcard-field>
-    \`\`\`
+                component: `
+  To use the \`dda-credit-card-field\` component, pass the following props:
+  
+  \`\`\`html
+<dda-creditcard-field
+    placeholder="0000 - 0000 - 0000 - 0000"
+    label="Card Number"
+    restrict_input="false"
+    value=""
+    card_icon="https://www.mastercard.com/content/dam/public/brandcenter/assets/images/logos/mclogo-for-footer.svg"
+    size="default"
+    helper_text="Helper or footer text"
+    error_message=""
+    validation_type="normal"
+    custom_class=""
+    component_mode=""
+    input_id="input"
+    aria_label="credit-card-field"
+    onchange="console.log('changed')"
+    input_name="input"
+    autocomplete="cc-number"
+></dda-creditcard-field>
+    \`\`\`
   `,
             },
         },
@@ -123,6 +133,8 @@ Default.args = {
     input_id: 'input',
     aria_label: 'credit-card-field',
     onchange: '',
+    input_name: 'input',
+    autocomplete: 'cc-number',
 };
 export const SmallSize = Template.bind({});
 SmallSize.args = {
@@ -140,6 +152,8 @@ SmallSize.args = {
     input_id: 'input',
     aria_label: 'credit-card-field',
     onchange: '',
+    input_name: 'input',
+    autocomplete: 'cc-number',
 };
 export const WithErrorMessage = Template.bind({});
 WithErrorMessage.args = {
@@ -157,6 +171,8 @@ WithErrorMessage.args = {
     input_id: 'input',
     aria_label: 'credit-card-field',
     onchange: '',
+    input_name: 'input',
+    autocomplete: 'cc-number',
 };
 export const Disabled = Template.bind({});
 Disabled.args = {
@@ -175,5 +191,6 @@ Disabled.args = {
     input_id: 'input',
     aria_label: 'credit-card-field',
     onchange: '',
+    input_name: 'input',
+    autocomplete: 'cc-number',
 };
-//# sourceMappingURL=dda-creditcard-field.stories.js.map

package/dist/collection/components/dda-dropdown/dda-dropdown.js

@@ -35,7 +35,7 @@ export class DdaDropdown {
             this.custom_class ? `${this.custom_class}` : '',
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: '99acc578502c9b2724462c76d679714f49144e80' }, h("div", { key: '0e2d4103b56e690c8d3bac7edf4bc17f872218a8', class: containerClass }, this.label && h("label", { key: '41822b0222dd52f96fd7a5fafaa8a2d55185c5e7', htmlFor: this.button_id, class: "dda-input-label" }, this.label), h("div", { key: '9cff0a65191376876ad12d08084730ce000be52c', class: `dda-dropdown-container ${this.type}` }, h("button", { key: '5e91ee72ba6177d9d2ea695e918a572cd94ba434', id: this.button_id, "aria-label": this.aria_label, type: "button", class: "dda-input-field dda-dropdown-header", onClick: () => this.toggleDropdown() }, h("i", { key: 'b824aa5adc658f96ffd379f6bc353aeaea5ef887', class: `three-dots material-icons` }, this.isopen ? 'more_vert' : 'more_vert'), !this.icon_mode && h("span", { key: '66e5880f23ec71b76f477f9a79b4560214ecee16', class: "dda-dropdown-text" }, h("span", { key: 'b8542e88cfa76e3613ef7b81a01d83e7d7c554d0' }, this.selected || 'Select an option'), " ", h("i", { key: '22acc211a0b8293b851e5cc7fdcd403aba87b510', class: `material-icons` }, this.isopen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'))), this.isopen && (h("div", { key: 'f4dafce50f9268c43c07adecdedc630fda2bf733', class: "dda-input-dropdown-list" }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (h("button", { type: "button", class: `dda-input-dropdown-item ${this.selected === option ? 'selected' : ''}`, onClick: () => { this.selectOption(option); } }, option)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available"))))), this.helper_text && h("span", { key: '3b412c977a21f49098446f74c9b04526650eff1d', class: "dda-helper-text" }, this.helper_text), this.error && h("span", { key: '30c17505effc6d6a813a3cd4bbe321936abdb73e', class: "dda-error-message" }, this.error))));
+        return (h(Host, { key: '670440482e1458551292232c6ecf4b8e54222dd5' }, h("div", { key: 'fe217205cb7551e3d2589af17099f29f7ddf1459', class: containerClass }, this.label && h("label", { key: '001a9f98169f9ea10fcc81ee244aeefcdc4cf274', htmlFor: this.button_id, class: "dda-input-label" }, this.label), h("div", { key: '76a1a5219278d1a9719d66144e0705070ce8e31e', class: `dda-dropdown-container ${this.type}` }, h("button", { key: '77267978ffe12646d58cca9ea78dc8c7a09f5e60', id: this.button_id, name: this.arrow_button_name, "aria-label": this.aria_label, type: "button", class: "dda-input-field dda-dropdown-header", onClick: () => this.toggleDropdown() }, h("i", { key: '1f055334eda72df38f48b0a6a16236ece8550dae', class: `three-dots material-icons` }, this.isopen ? 'more_vert' : 'more_vert'), !this.icon_mode && h("span", { key: '89c83de3aeb45ab86b680414f16b531b9b93169c', class: "dda-dropdown-text" }, h("span", { key: 'ab2e18139b8bc2df6abc5c39a733623902bd43df' }, this.selected || 'Select an option'), " ", h("i", { key: '29761f83b08188e3d9d68052849be96332d6c484', class: `material-icons` }, this.isopen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'))), this.isopen && (h("div", { key: 'd2e8282cce424d2711198de03921944e9e7bba71', class: "dda-input-dropdown-list" }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (h("button", { type: "button", name: this.dropdown_button_name, class: `dda-input-dropdown-item ${this.selected === option ? 'selected' : ''}`, onClick: () => { this.selectOption(option); } }, option)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available"))))), this.helper_text && h("span", { key: '4851be0b717e83d496a449981dfb45ec4eedc7e8', class: "dda-helper-text" }, this.helper_text), this.error && h("span", { key: '2d5dae4c61a2e4fa3a9b864ab649fcc25cc74b0d', class: "dda-error-message" }, this.error))));
     }
     static get is() { return "dda-dropdown"; }
     static get originalStyleUrls() {
@@ -66,8 +66,8 @@ export class DdaDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "options": {
                 "type": "string",
@@ -85,8 +85,8 @@ export class DdaDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "options",
-                "reflect": false
+                "reflect": false,
+                "attribute": "options"
             },
             "selected": {
                 "type": "string",
@@ -104,8 +104,8 @@ export class DdaDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "selected",
-                "reflect": false
+                "reflect": false,
+                "attribute": "selected"
             },
             "disabled": {
                 "type": "boolean",
@@ -123,8 +123,8 @@ export class DdaDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "error": {
@@ -143,8 +143,8 @@ export class DdaDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error",
-                "reflect": false
+                "reflect": false,
+                "attribute": "error"
             },
             "helper_text": {
                 "type": "string",
@@ -162,8 +162,8 @@ export class DdaDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "helper_text",
-                "reflect": false
+                "reflect": false,
+                "attribute": "helper_text"
             },
             "type": {
                 "type": "string",
@@ -181,8 +181,8 @@ export class DdaDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": false,
+                "attribute": "type",
                 "defaultValue": "'bg-white'"
             },
             "size": {
@@ -201,8 +201,8 @@ export class DdaDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'medium'"
             },
             "icon_mode": {
@@ -221,8 +221,8 @@ export class DdaDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon_mode",
                 "reflect": false,
+                "attribute": "icon_mode",
                 "defaultValue": "false"
             },
             "custom_class": {
@@ -241,8 +241,8 @@ export class DdaDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "component_mode": {
@@ -261,8 +261,8 @@ export class DdaDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             },
             "button_id": {
                 "type": "string",
@@ -280,8 +280,8 @@ export class DdaDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "button_id"
             },
             "aria_label": {
                 "type": "string",
@@ -299,8 +299,46 @@ export class DdaDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria_label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "aria_label"
+            },
+            "arrow_button_name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "arrow_button_name"
+            },
+            "dropdown_button_name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dropdown_button_name"
             }
         };
     }
@@ -310,4 +348,3 @@ export class DdaDropdown {
         };
     }
 }
-//# sourceMappingURL=dda-dropdown.js.map

package/dist/collection/components/dda-dropdown/dda-dropdown.stories.js

@@ -61,30 +61,40 @@ export default {
             control: { type: 'text' },
             description: 'Aria label for the dropdown field',
         },
+        arrow_button_name: {
+            control: { type: 'text' },
+            description: 'Name for the arrow button',
+        },
+        dropdown_button_name: {
+            control: { type: 'text' },
+            description: 'Name for the dropdown button',
+        },
     },
     parameters: {
         docs: {
             description: {
-                component: `
-To use the \`dda-dropdown\` component, pass the following props:
-
-\`\`\`html
-<dda-dropdown
-    label="Headline"
-    selected=""
-    disabled="false"
-    error=""
-    helper_text=""
-    type="bg-white"
-    size="default"
-    icon_mode="false"
-    custom_class=""
-    component_mode=""
-    button_id="dropdown"
-    aria_label="dropdown"
-    options='["Option 1","Option 2","Option 3"]'
-></dda-dropdown>
-  \`\`\`
+                component: `
+To use the \`dda-dropdown\` component, pass the following props:
+
+\`\`\`html
+<dda-dropdown
+    label="Headline"
+    selected=""
+    disabled="false"
+    error=""
+    helper_text=""
+    type="bg-white"
+    size="default"
+    icon_mode="false"
+    custom_class=""
+    component_mode=""
+    button_id="dropdown"
+    aria_label="dropdown"
+    options='["Option 1","Option 2","Option 3"]'
+    arrow_button_name="arrow-button"
+    dropdown_button_name="dropdown-button"
+></dda-dropdown>
+  \`\`\`
 `,
             },
         },
@@ -113,6 +123,8 @@ Default.args = {
     component_mode: '',
     button_id: 'dropdown',
     aria_label: 'dropdown',
+    arrow_button_name: 'arrow-button',
+    dropdown_button_name: 'dropdown-button',
 };
 export const Small = Template.bind({});
 Small.args = {
@@ -129,6 +141,8 @@ Small.args = {
     component_mode: '',
     button_id: 'dropdown',
     aria_label: 'dropdown',
+    arrow_button_name: 'arrow-button',
+    dropdown_button_name: 'dropdown-button',
 };
 export const Transparent = Template.bind({});
 Transparent.args = {
@@ -145,6 +159,8 @@ Transparent.args = {
     component_mode: '',
     button_id: 'dropdown',
     aria_label: 'dropdown',
+    arrow_button_name: 'arrow-button',
+    dropdown_button_name: 'dropdown-button',
 };
 export const icon_mode = Template.bind({});
 icon_mode.args = {
@@ -161,5 +177,6 @@ icon_mode.args = {
     component_mode: '',
     button_id: 'dropdown',
     aria_label: 'dropdown',
+    arrow_button_name: 'arrow-button',
+    dropdown_button_name: 'dropdown-button',
 };
-//# sourceMappingURL=dda-dropdown.stories.js.map