@dubai-design-system/components-js 3.12.10 → 3.12.12

package/dist/collection/components/dda-accordion/dda-accordion.css

@@ -1,91 +1,72 @@
-.accordion-container{
-  display: grid;
-  gap: 20px;
-}
-.accordion-container.bg-border {
-  background-color: var(--dda-surface-100);
-  border: 1px solid var(--dda-surface-90);
-  border-radius: 5px;
-  padding: 16px 20px;
-}
-.light-mode.accordion-container.bg-border{
-  background-color: var(--dda-neutral-100);
-  border: 1px solid var(--dda-neutral-90);
-}
-.accordion-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-}
-.accordion-header .header-content {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.header-content i,
-.header-content svg{
-  font-size: 25px;
-  color: var(--dda-on-surface-variant-30);
-}
-.light-mode .header-content i,
-.light-mode .header-content svg{
-  color: var(--dda-neutral-variant-30);
-}
-.header-content svg path{
-  fill: var(--dda-on-surface-variant-30);
-}
-.light-mode .header-content svg path{
-  fill: var(--dda-neutral-variant-30);
-}
-.accordion-header .header-text {
-  font-size: var(--font-h6);
-  color: var(--dda-on-surface-0);
-  font-weight: var(--font-weight-regular);
-  display: flex;
-  align-items: center;
-  gap: 5px
-}
-.light-mode .accordion-header .header-text{
-  color: var(--dda-neutral-0);
-}
-
-.accordion-header .arrow-icon {
-  font-size: 25px;
-  color: var(--dda-on-surface-variant-30);
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .accordion-header .arrow-icon {
-    transition: transform 0.2s ease-in-out;
-  }
-}
-
-
-.light-mode .accordion-header .arrow-icon{
-  color: var(--dda-neutral-variant-30);
-}
-.accordion-header.active .arrow-icon{
-  transform: rotate(180deg);
-}
-.accordion-body {
-  color: var(--dda-on-surface-variant-30);
-}
-.light-mode .accordion-body{
-  color: var(--dda-neutral-variant-30);
-}
-.accordion-body .subtitle{
-  font: var(--font-body);
-  font-weight: var(--font-weight-regular);
-  color: var(--dda-on-surface-0);
-}
-.accordion-body .body-description {
-  margin: 0;
-  font: var(--font-body);
-  font-weight: var(--font-weight-regular);
-  color: var(--dda-on-surface-variant-30);
-}
-.accordion-container.no-border {
-  border: 1px solid transparent;
-  gap: 12px
-}
+.accordion-container{
+  display: grid;
+  gap: 20px;
+}
+.accordion-container.bg-border {
+  background-color: var(--dda-surface-100);
+  border: 1px solid var(--dda-surface-90);
+  border-radius: 5px;
+  padding: 16px 20px;
+}
+.light-mode.accordion-container.bg-border{
+  background-color: var(--dda-neutral-100);
+  border: 1px solid var(--dda-neutral-90);
+}
+.accordion-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+}
+.accordion-header .header-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.header-content i,
+.header-content svg{
+  font-size: 25px;
+  color: var(--dda-on-surface-variant-30);
+}
+.light-mode .header-content i,
+.light-mode .header-content svg{
+  color: var(--dda-neutral-variant-30);
+}
+.header-content svg path{
+  fill: var(--dda-on-surface-variant-30);
+}
+.light-mode .header-content svg path{
+  fill: var(--dda-neutral-variant-30);
+}
+.accordion-header .header-text {
+  font-size: var(--dda-fs-title-sm);
+  color: var(--dda-on-surface-0);
+  font-weight: var(--dda-fw-500);
+}
+.light-mode .accordion-header .header-text{
+  color: var(--dda-neutral-0);
+}
+.accordion-header .arrow-icon {
+  font-size: 25px;
+  color: var(--dda-on-surface-variant-30);
+  transition: transform 0.2s ease-in-out;
+}
+.light-mode .accordion-header .arrow-icon{
+  color: var(--dda-neutral-variant-30);
+}
+.accordion-header.active .arrow-icon{
+  transform: rotate(180deg);
+}
+.accordion-body {
+  color: var(--dda-on-surface-variant-30);
+}
+.light-mode .accordion-body{
+  color: var(--dda-neutral-variant-30);
+}
+.accordion-body .body-description {
+  margin: 0;
+}
+.accordion-container.no-border {
+  border: 1px solid transparent;
+  gap: 12px
+}

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

@@ -1,51 +1,28 @@
 import { h, Host } from "@stencil/core";
 export class DdaAccordion {
     constructor() {
-        this.design = 'bg-border';
-        this.header_text = 'Accordion Header';
-        this.sub_title = '';
-        this.body_description = '';
+        this.design = 'bg-border'; // Default to background and border design
+        this.header_text = 'Accordion Header'; // Default header text
+        this.body_description = ''; // Default body description
         this.custom_class = '';
-        this.link_button_text = '';
-        this.accordion_icon_class = '';
-        this.accordion_icon_text = '';
-        this.accordion_header_end_icon = '';
-        this.accordion_id = '';
-        this.default_open = false;
-    }
-    componentWillLoad() {
-        this.isOpen = this.default_open;
+        this.accordion_icon = 'info'; // Default Material icon
+        this.isOpen = false;
     }
     toggleAccordion() {
         this.isOpen = !this.isOpen;
     }
-    async openAccordion() {
-        this.isOpen = true;
-    }
-    async closeAccordion() {
-        this.isOpen = false;
-    }
-    async getIsOpen() {
-        return this.isOpen;
-    }
-    onHeaderEndIconClick(event) {
-        event.stopPropagation();
-        console.log('Header end icon clicked');
-    }
     render() {
-        return (h(Host, { key: 'bac0593081d789deb4f454ba6e8d945c53e104a6' }, h("div", { key: '096d1b2f7be57780933b9a027aba8d48d0672215', class: `accordion-container ${this.design} ${this.custom_class} ${this.component_mode}` }, h("div", { key: 'ef7f36b77b07f70d353592a6ef138077483ce6b5', class: "accordion-header", id: this.accordion_id, onClick: () => this.toggleAccordion() }, h("div", { key: 'e87777be0e8e322e28610bba28da32ed0de77341', class: "header-content" }, this.accordion_icon_text ? h("i", { class: this.accordion_icon_class }, this.accordion_icon_text) : null, this.header_text ?
-            h("span", { class: "header-text" }, this.header_text, h("i", { class: `body material-flat-icon ${this.accordion_icon_class}`, onClick: (event) => this.onHeaderEndIconClick(event) }, this.accordion_header_end_icon))
-            : null), h("i", { key: '22d6316247878dee4acc2633e4bcd409eb1aeb84', class: `material-icons arrow-icon`, "aria-hidden": "true" }, this.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), h("div", { key: '10ad865b64a97d91968151f8288464431ff91e8f', class: this.isOpen ? 'accordion-body' : 'dda-d-none' }, h("div", { key: '28f31b0693b114bd51048262b02185e7ad6aedb6', class: "dda-d-flex dda-flex-column dda-gap-lg" }, h("div", { key: '5fe251da252cdff81e9d9133e14a633f6d437ec8', class: "dda-d-flex dda-flex-column dda-gap-xs" }, this.sub_title ? h("p", { class: "subtitle" }, this.sub_title) : null, this.body_description ? h("p", { class: "body-description" }, this.body_description) : null), this.link_button_text ? (h("dda-link-button", { button_color: "default-link", end_icon: "arrow_forward", custom_class: "", link_button_text: this.link_button_text, href: "", component_mode: "", button_id: "link-button", aria_label: "link-Button" })) : null, h("slot", { key: 'ea0f628d0e80420bc482d9e11debc18b8e86aee6' }))))));
+        return (h(Host, { key: '08be09ae3f5cbbf82ea7f12bbf169356b887c273' }, h("div", { key: '2a4b699039058216b5dd80bd115ba2bc2b4fdc15', class: `accordion-container ${this.design} ${this.custom_class} ${this.component_mode}` }, h("div", { key: '628a3bbb80a6e10de4d2a0aebb8162ba2a484619', class: "accordion-header", onClick: () => this.toggleAccordion() }, h("div", { key: '8f33bef7c4218b0ce3076bd3c0a8093eef73c9db', class: "header-content" }, h("i", { key: 'cd77aff936b019abf7ddbcbf011aff0e8edc8d72', class: "material-icons  material-symbols-outlined" }, this.accordion_icon), h("span", { key: 'ea5928157f641210dbe7b7f83513ecd6100c0f72', class: "header-text" }, this.header_text)), h("i", { key: 'bfa7ecd4aaa2e9111f05d0d1ea2c0b24aa8d00d7', class: `material-icons arrow-icon` }, this.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), h("div", { key: '96628a8a6f278ce9bc0694904c979db772a59fb4', class: this.isOpen ? 'accordion-body' : 'dda-d-none' }, h("p", { key: 'c7f36c1d3b1d5ab20adff8301a6baf88bb267e95', class: "body-description" }, this.body_description), h("slot", { key: '21891fb96b57f95001d71ebd75d63b961431a3b1' })))));
     }
     static get is() { return "dda-accordion"; }
     static get originalStyleUrls() {
         return {
-            "$": ["dda-accordion.css"]
+            "$": ["dda-accordion.css", "../../global/global.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["dda-accordion.css"]
+            "$": ["dda-accordion.css", "../../global/global.css"]
         };
     }
     static get properties() {
@@ -66,8 +43,8 @@ export class DdaAccordion {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "design",
                 "reflect": false,
+                "attribute": "design",
                 "defaultValue": "'bg-border'"
             },
             "header_text": {
@@ -86,30 +63,10 @@ export class DdaAccordion {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "header_text",
                 "reflect": false,
+                "attribute": "header_text",
                 "defaultValue": "'Accordion Header'"
             },
-            "sub_title": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "sub_title",
-                "reflect": false,
-                "defaultValue": "''"
-            },
             "body_description": {
                 "type": "string",
                 "mutable": false,
@@ -126,8 +83,8 @@ export class DdaAccordion {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "body_description",
                 "reflect": false,
+                "attribute": "body_description",
                 "defaultValue": "''"
             },
             "custom_class": {
@@ -146,28 +103,8 @@ export class DdaAccordion {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "link_button_text": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "link_button_text",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "component_mode": {
@@ -186,50 +123,10 @@ export class DdaAccordion {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
-            },
-            "accordion_icon_class": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "accordion_icon_class",
                 "reflect": false,
-                "defaultValue": "''"
-            },
-            "accordion_icon_text": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "accordion_icon_text",
-                "reflect": false,
-                "defaultValue": "''"
+                "attribute": "component_mode"
             },
-            "accordion_header_end_icon": {
+            "accordion_icon": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -245,49 +142,9 @@ export class DdaAccordion {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accordion_header_end_icon",
                 "reflect": false,
-                "defaultValue": "''"
-            },
-            "accordion_id": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "accordion_id",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "default_open": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "default_open",
-                "reflect": false,
-                "defaultValue": "false"
+                "attribute": "accordion_icon",
+                "defaultValue": "'info'"
             }
         };
     }
@@ -296,60 +153,4 @@ export class DdaAccordion {
             "isOpen": {}
         };
     }
-    static get methods() {
-        return {
-            "openAccordion": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
-            "closeAccordion": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
-            "getIsOpen": {
-                "complexType": {
-                    "signature": "() => Promise<boolean>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<boolean>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            }
-        };
-    }
 }
-//# sourceMappingURL=dda-accordion.js.map

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

@@ -7,38 +7,14 @@ export default {
             options: ['bg-border', 'no-border'],
             description: 'Choice of design between two options: bg-border and no-border.',
         },
-        accordion_icon_class: {
-            control: { type: 'text' },
-            description: 'Custom class to be applied to the accordion icon',
-        },
-        accordion_icon_text: {
-            control: 'text',
-            description: 'Material icon to display in the header',
-        },
-        accordion_header_end_icon: {
-            control: 'text',
-            description: 'Material icon to display in the header',
-        },
-        accordion_id: {
-            control: 'text',
-            description: 'Material icon to display in the header',
-        },
         header_text: {
             control: 'text',
             description: 'Header text of the accordion',
         },
-        sub_title: {
-            control: 'text',
-            description: 'Body description of the accordion',
-        },
         body_description: {
             control: 'text',
             description: 'Body description of the accordion',
         },
-        link_button_text: {
-            control: { type: 'text' },
-            description: 'Custom class to be applied to the accordion icon',
-        },
         custom_class: {
             control: { type: 'text' },
             description: 'Custom class to be applied to the accordion',
@@ -48,30 +24,27 @@ export default {
             options: ['light-mode'],
             description: 'Mode of the accordion component',
         },
-        default_open: {
-            control: { type: 'boolean' },
-            description: 'If true, accordion will be open by default',
+        accordion_icon: {
+            control: 'text',
+            description: 'Material icon to display in the header',
         },
     },
     parameters: {
         docs: {
             description: {
-                component: `
-To use the \`dda-accordion\` component, pass the following props:
-
-\`\`\`html
-<dda-accordion 
-  design="bg-border" 
-  accordion_icon_class="material-icons  material-symbols-outlined"
-  accordion_icon_text="home">
-  header_text="Accordion Header" 
-  sub_title="Sub Title"
-  body_description="This is the accordion body content." 
-  custom_class="" 
-  component_mode=""
-  
-</dda-accordion>
-\`\`\`
+                component: `
+To use the \`dda-accordion\` component, pass the following props:
+
+\`\`\`html
+<dda-accordion 
+  design="bg-border" 
+  header_text="Accordion Header" 
+  body_description="This is the accordion body content." 
+  custom_class="" 
+  component_mode=""
+  accordion_icon="info">
+</dda-accordion>
+\`\`\`
 `,
             },
         },
@@ -87,31 +60,18 @@ const Template = (args) => {
 export const BgBorder = Template.bind({});
 BgBorder.args = {
     design: 'bg-border',
-    accordion_icon_class: 'material-icons  material-symbols-outlined',
-    accordion_icon_text: 'home',
-    accordion_header_end_icon: 'info',
-    accordion_id: 'accordionOne',
     header_text: 'Accordion Header',
-    sub_title: 'Sub Title',
     body_description: 'This is the accordion body content.',
-    link_button_text: "Button",
     custom_class: '',
     component_mode: '',
-    default_open: 'false',
+    accordion_icon: 'info',
 };
 export const NoBorder = Template.bind({});
 NoBorder.args = {
     design: 'no-border',
-    accordion_icon_class: 'material-icons  material-symbols-outlined',
-    accordion_icon_text: 'home',
-    accordion_header_end_icon: 'info',
-    accordion_id: 'accordionOne',
     header_text: 'Accordion Header',
-    sub_title: 'Sub Title',
     body_description: 'This is the accordion body content.',
-    link_button_text: "Button",
     custom_class: '',
     component_mode: '',
-    default_open: 'false',
+    accordion_icon: 'info',
 };
-//# sourceMappingURL=dda-accordion.stories.js.map