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

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

@@ -1,72 +1,82 @@
-.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
-}
+.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;
+  width: 100%;
+  border: none;
+  margin: 0;
+  padding: 0;
+  background: none;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  appearance: none;
+  -webkit-appearance: none;
+}
+.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

@@ -3,15 +3,16 @@ export class DdaAccordion {
     constructor() {
         this.design = 'bg-border'; // Default to background and border design
         this.header_text = 'Accordion Header'; // Default header text
-        this.body_description = 'This is the accordion body content.'; // Default body description
+        this.body_description = ''; // Default body description
         this.custom_class = '';
+        this.accordion_icon = 'info'; // Default Material icon
         this.isOpen = false;
     }
     toggleAccordion() {
         this.isOpen = !this.isOpen;
     }
     render() {
-        return (h(Host, { key: '54bbb5f42d359197f7079be0147c80a4b21e19d8' }, h("div", { key: '17f1b4979062913beea948b3dc4bf4e94dd8cba8', class: `accordion-container ${this.design} ${this.custom_class} ${this.component_mode}` }, h("div", { key: '27deef30da0b3a0a96dacbc2998ece6ac57cb249', class: "accordion-header", onClick: () => this.toggleAccordion() }, h("div", { key: '440a9fbd4f26da208a8893f58fc99bdb278a87c4', class: "header-content" }, h("i", { key: '69ada88b239341d3ea08db7cae4a07d59e5245aa', class: "material-icons" }, "info"), h("span", { key: 'ca7e4226347cd468cbf046dd14acf32212897817', class: "header-text" }, this.header_text)), h("i", { key: '0484a56f50080a283e33a21181e5943da37767ef', class: `material-icons arrow-icon` }, this.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.isOpen && (h("div", { key: '0f0a31b0de40be48b5e0fc5fa643d0f400d698e8', class: "accordion-body" }, h("p", { key: '6ee9f75074c3b4db69078b1afef2bbac1433ebc3', class: "body-description" }, this.body_description))))));
+        return (h(Host, { key: '08be09ae3f5cbbf82ea7f12bbf169356b887c273' }, h("div", { key: '2a4b699039058216b5dd80bd115ba2bc2b4fdc15', class: `accordion-container ${this.design} ${this.custom_class} ${this.component_mode}` }, h("button", { key: '783e3676ac9fb0a1c548c84ef9ac950349a2aabb', type: "button", class: "accordion-header", onClick: () => this.toggleAccordion(), "aria-expanded": this.isOpen ? 'true' : 'false' }, h("div", { key: '640508d74f4a2b4f17b14a7ec52476a1bb5247d1', class: "header-content" }, h("i", { key: '21353ceba5c415ad802d27d7c7cd8c084aeb4418', class: "material-icons  material-symbols-outlined" }, this.accordion_icon), h("span", { key: '8dd2464046d54e74973a4e470318614be15f62c2', class: "header-text" }, this.header_text)), h("i", { key: '30be7c4b25ee370946e4c904d731493edb456fdc', class: `material-icons arrow-icon` }, this.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), h("div", { key: '9fcf7217e92e6371bf5a841ccd802e5d7bb186f3', class: this.isOpen ? 'accordion-body' : 'dda-d-none' }, h("p", { key: 'bd8bb3a34ffa0f8bc3cb59c3ba3fb38656b54176', class: "body-description" }, this.body_description), h("slot", { key: '8693cdbbc99671f1e16eb40a33a6b595d7ce37a3' })))));
     }
     static get is() { return "dda-accordion"; }
     static get originalStyleUrls() {
@@ -42,8 +43,8 @@ export class DdaAccordion {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "design",
                 "reflect": false,
+                "attribute": "design",
                 "defaultValue": "'bg-border'"
             },
             "header_text": {
@@ -62,8 +63,8 @@ export class DdaAccordion {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "header_text",
                 "reflect": false,
+                "attribute": "header_text",
                 "defaultValue": "'Accordion Header'"
             },
             "body_description": {
@@ -82,9 +83,9 @@ export class DdaAccordion {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "body_description",
                 "reflect": false,
-                "defaultValue": "'This is the accordion body content.'"
+                "attribute": "body_description",
+                "defaultValue": "''"
             },
             "custom_class": {
                 "type": "string",
@@ -102,8 +103,8 @@ export class DdaAccordion {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "component_mode": {
@@ -122,8 +123,28 @@ export class DdaAccordion {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
+            },
+            "accordion_icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accordion_icon",
+                "defaultValue": "'info'"
             }
         };
     }
@@ -133,4 +154,3 @@ export class DdaAccordion {
         };
     }
 }
-//# sourceMappingURL=dda-accordion.js.map

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

@@ -24,22 +24,27 @@ export default {
             options: ['light-mode'],
             description: 'Mode of the accordion component',
         },
+        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" 
-  header_text="Accordion Header" 
-  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>
+\`\`\`
 `,
             },
         },
@@ -59,6 +64,7 @@ BgBorder.args = {
     body_description: 'This is the accordion body content.',
     custom_class: '',
     component_mode: '',
+    accordion_icon: 'info',
 };
 export const NoBorder = Template.bind({});
 NoBorder.args = {
@@ -67,5 +73,5 @@ NoBorder.args = {
     body_description: 'This is the accordion body content.',
     custom_class: '',
     component_mode: '',
+    accordion_icon: 'info',
 };
-//# sourceMappingURL=dda-accordion.stories.js.map

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

@@ -1,148 +1,148 @@
-.dda-alert{
-  padding: 24px;
-  border-radius: 10px;
-  display: flex;
-  justify-content: space-between;
-  gap: 16px
-}
-.dda-alert .alert-content{
-  width: 100%;
-  display: grid;
-  row-gap: 10px;
-}
-.dda-alert .alert-title{
-  margin: 0; 
-  font-size: 24px;
-  line-height: 24px;
-}
-.dda-alert .alert-description{
-  margin: 0;
-}
-.dda-alert .info-icon{
-  font-size: 20px;
-  padding-top: 2px;
-}
-.alert-btn-wrap{
-  display: flex;
-  align-items: center;
-  justify-content: end;
-  gap: 15px;
-}
-.alert-btn-wrap a{
-  font-size: 16px;
-  font-weight: 500;
-}
-.dda-alert-close{
-  width: 20px;
-  height: 2px;
-  background: transparent;
-  border: transparent;
-  font-size: 18px;
-}
-
-.dda-alert-info{
-  background: var(--dda-primary-variant-95);
-  border: solid 1px var(--dda-color-primary-40);
-  color: var(--dda-color-primary-40);
-}
-.light-mode.dda-alert-info{
-  background: var(--dda-primary-95);
-  border: solid 1px var(--dda-primary-40);
-  color: var(--dda-primary-40);
-}
-/**/
-.dda-alert-warning{
-  background: var(--dda-warning-variant-95);
-  border: solid 1px var(--dda-color-warning-40);
-  color: var(--dda-color-warning-40);
-}
-.light-mode.dda-alert-warning{
-  background: var(--dda-warning-95);
-  border: solid 1px var(--dda-warning-40);
-  color: var(--dda-warning-40);
-}
-/**/
-.dda-alert-error{
-  background: var(--dda-error-variant-95);
-  border: solid 1px var(--dda-color-error-40);
-  color: var(--dda-color-error-40);
-}
-.light-mode.dda-alert-error{
-  background: var(--dda-error-95);
-  border: solid 1px var(--dda-error-40);
-  color: var(--dda-error-40);
-}
-/**/
-.dda-alert-success{
-  background: var(--dda-success-variant-95);
-  border: solid 1px var(--dda-color-success-40);
-  color: var(--dda-color-success-40);
-}
-.light-mode.dda-alert-success{
-  background: var(--dda-success-95);
-  border: solid 1px var(--dda-success-40);
-  color: var(--dda-success-40);
-}
-/**/
-.dda-alert-secondary{
-  background-color: var(--dda-surface-100);
-  border: solid 1px var(--dda-surface-90);
-  color: var(--dda-on-surface-0);
-  box-shadow: 0px 1px 2px 0px #1018280A;
-}
-.light-mode.dda-alert-secondary{
-  background-color: var(--dda-neutral-100);
-  border: solid 1px var(--dda-neutral-90);
-  color: var(--dda-neutral-0);
-}
-/**/
-.dda-alert-info.dda-alert-secondary .info-icon,
-.dda-alert-info .alert-btn-wrap a,
-.dda-alert-info .dda-alert-close{
-  color: var(--dda-color-primary-40);
-}
-.light-mode.dda-alert-info.dda-alert-secondary .info-icon,
-.light-mode.dda-alert-info .alert-btn-wrap a,
-.light-mode.dda-alert-info .dda-alert-close{
-  color: var(--dda-primary-40);
-}
-/**/
-.dda-alert-warning.dda-alert-secondary .info-icon,
-.dda-alert-warning .alert-btn-wrap a,
-.dda-alert-warning .dda-alert-close{
-  color: var(--dda-color-warning-40);
-}
-.light-mode.dda-alert-warning.dda-alert-secondary .info-icon,
-.light-mode.dda-alert-warning .alert-btn-wrap a,
-.light-mode.dda-alert-warning .dda-alert-close{
-  color: var(--dda-warning-40);
-}
-/**/
-.dda-alert-error.dda-alert-secondary .info-icon,
-.dda-alert-error .alert-btn-wrap a,
-.dda-alert-error .dda-alert-close{
-  color: var(--dda-color-error-40);
-}
-.light-mode.dda-alert-error.dda-alert-secondary .info-icon,
-.light-mode.dda-alert-error .alert-btn-wrap a,
-.light-mode.dda-alert-error .dda-alert-close{
-  color: var(--dda-error-40);
-}
-/**/
-.dda-alert-success.dda-alert-secondary .info-icon,
-.dda-alert-success .alert-btn-wrap a,
-.dda-alert-success .dda-alert-close{
-  color: var(--dda-color-success-40);
-}
-.light-mode.dda-alert-success.dda-alert-secondary .info-icon,
-.light-mode.dda-alert-success .alert-btn-wrap a,
-.light-mode.dda-alert-success .dda-alert-close{
-  color: var(--dda-success-40);
-}
-/**/
-
-
-.dda-alert-secondary .alert-btn-wrap a,
-.dda-alert-secondary .dda-alert-close{
-  color: var(--dda-color-neutral-0) !important;
-}
+.dda-alert{
+  padding: 24px;
+  border-radius: 10px;
+  display: flex;
+  justify-content: space-between;
+  gap: 16px
+}
+.dda-alert .alert-content{
+  width: 100%;
+  display: grid;
+  row-gap: 10px;
+}
+.dda-alert .alert-title{
+  margin: 0; 
+  font-size: 24px;
+  line-height: 24px;
+}
+.dda-alert .alert-description{
+  margin: 0;
+}
+.dda-alert .info-icon{
+  font-size: 20px;
+  padding-top: 2px;
+}
+.alert-btn-wrap{
+  display: flex;
+  align-items: center;
+  justify-content: end;
+  gap: 15px;
+}
+.alert-btn-wrap a{
+  font-size: 16px;
+  font-weight: 500;
+}
+.dda-alert-close{
+  width: 20px;
+  height: 2px;
+  background: transparent;
+  border: transparent;
+  font-size: 18px;
+}
+
+.dda-alert-info{
+  background: var(--dda-primary-variant-95);
+  border: solid 1px var(--dda-color-primary-40);
+  color: var(--dda-color-primary-40);
+}
+.light-mode.dda-alert-info{
+  background: var(--dda-primary-95);
+  border: solid 1px var(--dda-primary-40);
+  color: var(--dda-primary-40);
+}
+/**/
+.dda-alert-warning{
+  background: var(--dda-warning-variant-95);
+  border: solid 1px var(--dda-color-warning-40);
+  color: var(--dda-color-warning-40);
+}
+.light-mode.dda-alert-warning{
+  background: var(--dda-warning-95);
+  border: solid 1px var(--dda-warning-40);
+  color: var(--dda-warning-40);
+}
+/**/
+.dda-alert-error{
+  background: var(--dda-error-variant-95);
+  border: solid 1px var(--dda-color-error-40);
+  color: var(--dda-color-error-40);
+}
+.light-mode.dda-alert-error{
+  background: var(--dda-error-95);
+  border: solid 1px var(--dda-error-40);
+  color: var(--dda-error-40);
+}
+/**/
+.dda-alert-success{
+  background: var(--dda-success-variant-95);
+  border: solid 1px var(--dda-color-success-40);
+  color: var(--dda-color-success-40);
+}
+.light-mode.dda-alert-success{
+  background: var(--dda-success-95);
+  border: solid 1px var(--dda-success-40);
+  color: var(--dda-success-40);
+}
+/**/
+.dda-alert-secondary{
+  background-color: var(--dda-surface-100);
+  border: solid 1px var(--dda-surface-90);
+  color: var(--dda-on-surface-0);
+  box-shadow: 0px 1px 2px 0px #1018280A;
+}
+.light-mode.dda-alert-secondary{
+  background-color: var(--dda-neutral-100);
+  border: solid 1px var(--dda-neutral-90);
+  color: var(--dda-neutral-0);
+}
+/**/
+.dda-alert-info.dda-alert-secondary .info-icon,
+.dda-alert-info .alert-btn-wrap a,
+.dda-alert-info .dda-alert-close{
+  color: var(--dda-color-primary-40);
+}
+.light-mode.dda-alert-info.dda-alert-secondary .info-icon,
+.light-mode.dda-alert-info .alert-btn-wrap a,
+.light-mode.dda-alert-info .dda-alert-close{
+  color: var(--dda-primary-40);
+}
+/**/
+.dda-alert-warning.dda-alert-secondary .info-icon,
+.dda-alert-warning .alert-btn-wrap a,
+.dda-alert-warning .dda-alert-close{
+  color: var(--dda-color-warning-40);
+}
+.light-mode.dda-alert-warning.dda-alert-secondary .info-icon,
+.light-mode.dda-alert-warning .alert-btn-wrap a,
+.light-mode.dda-alert-warning .dda-alert-close{
+  color: var(--dda-warning-40);
+}
+/**/
+.dda-alert-error.dda-alert-secondary .info-icon,
+.dda-alert-error .alert-btn-wrap a,
+.dda-alert-error .dda-alert-close{
+  color: var(--dda-color-error-40);
+}
+.light-mode.dda-alert-error.dda-alert-secondary .info-icon,
+.light-mode.dda-alert-error .alert-btn-wrap a,
+.light-mode.dda-alert-error .dda-alert-close{
+  color: var(--dda-error-40);
+}
+/**/
+.dda-alert-success.dda-alert-secondary .info-icon,
+.dda-alert-success .alert-btn-wrap a,
+.dda-alert-success .dda-alert-close{
+  color: var(--dda-color-success-40);
+}
+.light-mode.dda-alert-success.dda-alert-secondary .info-icon,
+.light-mode.dda-alert-success .alert-btn-wrap a,
+.light-mode.dda-alert-success .dda-alert-close{
+  color: var(--dda-success-40);
+}
+/**/
+
+
+.dda-alert-secondary .alert-btn-wrap a,
+.dda-alert-secondary .dda-alert-close{
+  color: var(--dda-color-neutral-0) !important;
+}