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

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

@@ -1,95 +1,99 @@
-.dda-progress-bar-container {
-  display: flex;
-  align-items: center;
-}
-
-.dda-progress-bar {
-  width: 100%;
-  position: relative;
-  height: 8px;
-  background-color: var(--dda-neutral-variant-92);
-  border-radius: 4px;
-}
-
-.dda-progress-value {
-  height: 100%;
-  background-color: var(--dda-color-primary-40);
-  position: relative;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.light-mode .dda-progress-value{
-  background-color: var(--dda-primary-40);
-}
-.dda-tooltip {
-  height: 35px;
-  background-color: var(--dda-neutral-100);
-  border: solid 1px var(--dda-neutral-90);
-  padding: 4px 8px;
-  border-radius: 4px;
-  -webkit-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);
-  -moz-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);
-  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);
-  font-size: 16px;
-  color: var(--dda-neutral-0);
-  font-weight: var(--dda-fw-500);
-  white-space: nowrap;
-  display: grid;
-  align-items: center;
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  transform: translateX(40%);
-}
-
-.tooltip-top {
-  top: -45px;
-}
-
-.dda-tooltip::before,
-.dda-tooltip::after {
-  content: "";
-  position: absolute;
-  border-left: 10px solid transparent;
-  border-right: 10px solid transparent;
-  left: 50%;
-  margin-left: -10px;
-}
-
-.dda-tooltip.tooltip-top::before {
-  top: 100%;
-  border-top: 8px solid var(--dda-neutral-90);
-  margin-top: 0px;
-}
-
-.dda-tooltip.tooltip-top::after {
-  top: 100%;
-  border-top: 8px solid var(--dda-neutral-100);
-  margin-top: -2px;
-  z-index: 1;
-}
-
-.tooltip-bottom {
-  top: 17px;
-}
-
-.dda-tooltip.tooltip-bottom::before {
-  bottom: 100%;
-  border-bottom: 8px solid var(--dda-neutral-90);
-  margin-bottom: 0px;
-}
-
-.dda-tooltip.tooltip-bottom::after {
-  bottom: 100%;
-  border-bottom: 8px solid var(--dda-neutral-100);
-  margin-bottom: -2px;
-  z-index: 1;
-}
-
-.dda-percentage-text {
-  margin-inline-start: 8px;
-  font-size: 16px;
-  color: var(--dda-neutral-0);
+.dda-progress-bar-container {
+  display: flex;
+  align-items: center;
+}
+
+.dda-progress-bar {
+  width: 100%;
+  position: relative;
+  height: 8px;
+  background-color: var(--dda-neutral-variant-92);
+  border-radius: 4px;
+}
+
+.dda-progress-value {
+  height: 100%;
+  background-color: var(--dda-color-primary-40);
+  position: relative;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.light-mode .dda-progress-value{
+  background-color: var(--dda-primary-40);
+}
+.dda-tooltip {
+  height: 35px;
+  background-color: var(--dda-neutral-100);
+  border: solid 1px var(--dda-neutral-90);
+  padding: 4px 8px;
+  border-radius: 4px;
+  -webkit-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);
+  -moz-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);
+  font-size: 16px;
+  color: var(--dda-neutral-0);
+  font-weight: var(--dda-fw-500);
+  white-space: nowrap;
+  display: grid;
+  align-items: center;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  transform: translateX(40%);
+}
+
+.tooltip-top {
+  top: -45px;
+}
+
+.dda-tooltip::before,
+.dda-tooltip::after {
+  content: "";
+  position: absolute;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  left: 50%;
+  margin-left: -10px;
+}
+
+.dda-tooltip.tooltip-top::before {
+  top: 100%;
+  border-top: 8px solid var(--dda-neutral-90);
+  margin-top: 0px;
+}
+
+.dda-tooltip.tooltip-top::after {
+  top: 100%;
+  border-top: 8px solid var(--dda-neutral-100);
+  margin-top: -2px;
+  z-index: 1;
+}
+
+.tooltip-bottom {
+  top: 17px;
+}
+
+.dda-tooltip.tooltip-bottom::before {
+  bottom: 100%;
+  border-bottom: 8px solid var(--dda-neutral-90);
+  margin-bottom: 0px;
+}
+
+.dda-tooltip.tooltip-bottom::after {
+  bottom: 100%;
+  border-bottom: 8px solid var(--dda-neutral-100);
+  margin-bottom: -2px;
+  z-index: 1;
+}
+
+.dda-percentage-text {
+  margin-inline-start: 8px;
+  font-size: 16px;
+  color: var(--dda-on-surface-0);
+}
+
+.light-mode .dda-percentage-text {
+  color: var(--dda-neutral-0);
 }

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

@@ -5,12 +5,13 @@ export class DdaProgressBar {
         this.tooltip = false;
         this.tooltip_position = 'top';
         this.show_percentage_text = false;
+        this.aria_label = 'Progress';
     }
     render() {
         const progressStyle = {
             width: `${this.progress}%`,
         };
-        return (h(Host, { key: '729326aeecbf2e5388e29164d13b8435c0e65fb4' }, h("div", { key: 'db9fc2c090bf0d115b4e9cb1da0ca49069c74c7a', class: `dda-progress-bar-container ${this.custom_class} ${this.component_mode}` }, h("div", { key: 'a96b3c0028dfa71064eb94ea7e00c68398060e1e', class: "dda-progress-bar" }, h("div", { key: '6986a1dedb2da161812c01e1403ccda4925e72ef', class: "dda-progress-value", style: progressStyle }, this.tooltip && (h("div", { key: '2247fd8cf5db141053bfec76bc3e1568a637b208', class: `dda-tooltip tooltip-${this.tooltip_position}` }, this.progress, "%")))), this.show_percentage_text && (h("span", { key: '992eb4805909f3236f4855bf01b4d594ec50fc08', class: "dda-percentage-text" }, this.progress, "%")))));
+        return (h(Host, { key: 'd15dd4450a6e3844824c70012a60a7ffc2929a05' }, h("div", { key: '272d319e6dc56d0887c8a5649df86ceefcbd15e1', class: `dda-progress-bar-container ${this.custom_class} ${this.component_mode}` }, h("div", { key: 'a6783ce163ce0f5d18a869f90a941b3956ab84bf', class: "dda-progress-bar", role: "progressbar", "aria-label": this.aria_label, "aria-valuenow": `${this.progress}`, "aria-valuemin": "0", "aria-valuemax": "100" }, h("div", { key: '18dde8d79aa85aa38550aad9b17f145ec1d513ac', class: "dda-progress-value", style: progressStyle }, this.tooltip && (h("div", { key: '682ba315e92ce66c2312169fe157723a0d6d7880', class: `dda-tooltip tooltip-${this.tooltip_position}` }, this.progress, "%")))), this.show_percentage_text && (h("span", { key: 'f8ac4a0f095600dfc5df8b6001fe7221533cc49f', class: "dda-percentage-text" }, this.progress, "%")))));
     }
     static get is() { return "dda-progressbar"; }
     static get originalStyleUrls() {
@@ -41,8 +42,8 @@ export class DdaProgressBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "progress",
                 "reflect": false,
+                "attribute": "progress",
                 "defaultValue": "0"
             },
             "tooltip": {
@@ -61,8 +62,8 @@ export class DdaProgressBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip",
                 "reflect": false,
+                "attribute": "tooltip",
                 "defaultValue": "false"
             },
             "tooltip_position": {
@@ -81,8 +82,8 @@ export class DdaProgressBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip_position",
                 "reflect": false,
+                "attribute": "tooltip_position",
                 "defaultValue": "'top'"
             },
             "show_percentage_text": {
@@ -101,8 +102,8 @@ export class DdaProgressBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show_percentage_text",
                 "reflect": false,
+                "attribute": "show_percentage_text",
                 "defaultValue": "false"
             },
             "custom_class": {
@@ -121,8 +122,8 @@ export class DdaProgressBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
-                "reflect": false
+                "reflect": false,
+                "attribute": "custom_class"
             },
             "component_mode": {
                 "type": "string",
@@ -140,10 +141,29 @@ export class DdaProgressBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
+            },
+            "aria_label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria_label",
+                "defaultValue": "'Progress'"
             }
         };
     }
 }
-//# sourceMappingURL=dda-progressbar.js.map

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

@@ -32,23 +32,29 @@ export default {
             options: ['light-mode'],
             description: 'Mode of the progress bar component',
         },
+        aria_label: {
+            control: { type: 'text' },
+            description: 'Accessible name announced for the progressbar role. Defaults to "Progress".',
+            defaultValue: 'Progress',
+        },
     },
     parameters: {
         docs: {
             description: {
-                component: `
-To use the \`dda-progressbar\` component, pass the following props:
-
-\`\`\`html
-<dda-progressbar
-    progress="20"
-    tooltip="false"
-    tooltip_position="top"
-    show_percentage_text="false"
-    custom_class=""
-    component_mode=""
-></dda-progressbar>
-  \`\`\`
+                component: `
+To use the \`dda-progressbar\` component, pass the following props:
+
+\`\`\`html
+<dda-progressbar
+    progress="20"
+    tooltip="false"
+    tooltip_position="top"
+    show_percentage_text="false"
+    custom_class=""
+    component_mode=""
+    aria_label="Progress"
+></dda-progressbar>
+  \`\`\`
 `,
             },
         },
@@ -88,4 +94,3 @@ WithPercentageText.args = {
     custom_class: '',
     component_mode: '',
 };
-//# sourceMappingURL=dda-progressbar.stories.js.map