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

package/dist/collection/components/dda-home-banner/dda-home-banner.stories.js

@@ -0,0 +1,94 @@
+const IMG_1 = 'https://images.pexels.com/photos/3680912/pexels-photo-3680912.jpeg';
+const IMG_2 = 'https://images.pexels.com/photos/1470405/pexels-photo-1470405.jpeg';
+const IMG_3 = 'https://images.pexels.com/photos/162031/dubai-tower-arab-emirates-162031.jpeg';
+const slide = (src, alt, title, subtitle) => `
+  <slide>
+    <img src="${src}" alt="${alt}" />
+    <div class="slide-wrap">
+      <div class="slide-content">
+        <h2>${title}</h2>
+        <p>${subtitle}</p>
+        <dda-button button_color="default-primary" size="lg">Call to action</dda-button>
+      </div>
+    </div>
+  </slide>`;
+export default {
+    title: 'Components/Home Banner',
+    component: 'dda-home-banner',
+    argTypes: {
+        autoplay: { control: 'boolean', description: 'Advance through the slides automatically' },
+        interval: { control: 'number', description: 'Milliseconds each slide is shown for when autoplay is on' },
+        aria_label: { control: 'text', description: 'Accessible name for the carousel region' },
+        previous_button_label: { control: 'text', description: 'Accessible name for the previous-slide button' },
+        next_button_label: { control: 'text', description: 'Accessible name for the next-slide button' },
+        pause_button_label: { control: 'text', description: 'Accessible name for the pause button' },
+        play_button_label: { control: 'text', description: 'Accessible name for the play button' },
+        slide_button_label: { control: 'text', description: 'Prefix for each dot’s accessible name' },
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: `
+The banner is **slotted** — each slide must be a \`<slide>\` element. The component
+collects slides with \`querySelectorAll('slide')\`, so \`<div>\` children are ignored.
+
+\`\`\`html
+<dda-home-banner autoplay="true" interval="5000">
+  <slide>
+    <img src="assets/img/home-banner.jpg" alt="Aerial view of Dubai at sunset" />
+    <div class="slide-wrap">
+      <div class="slide-content">
+        <h2>Digitalizing Life In Dubai</h2>
+        <p>Pioneering and accelerating the pace of digital transformation in the city</p>
+      </div>
+    </div>
+  </slide>
+</dda-home-banner>
+\`\`\`
+
+Layout CSS ships inside the component's own chunk and is injected when the element
+upgrades — the global \`dda.css\` plus \`defineCustomElements()\` is all you need.
+        `,
+            },
+        },
+        controls: { expanded: true },
+    },
+};
+const Template = args => `
+  <dda-home-banner
+    autoplay="${args.autoplay}"
+    interval="${args.interval}"
+    aria_label="${args.aria_label}"
+    previous_button_label="${args.previous_button_label}"
+    next_button_label="${args.next_button_label}"
+    pause_button_label="${args.pause_button_label}"
+    play_button_label="${args.play_button_label}"
+    slide_button_label="${args.slide_button_label}"
+  >
+    ${slide(IMG_1, 'Aerial view of Dubai at sunset', 'Digitalizing Life In Dubai', 'Pioneering and accelerating the pace of digital transformation in the city')}
+    ${slide(IMG_2, 'Dubai skyline at dusk', 'Explore More', 'Find the services you need')}
+    ${slide(IMG_3, 'Burj Khalifa against a clear sky', 'Join Us Today', 'Become part of our community')}
+  </dda-home-banner>`;
+const defaultArgs = {
+    autoplay: false,
+    interval: 5000,
+    aria_label: 'Highlights',
+    previous_button_label: 'Previous slide',
+    next_button_label: 'Next slide',
+    pause_button_label: 'Pause slideshow',
+    play_button_label: 'Play slideshow',
+    slide_button_label: 'Go to slide',
+};
+export const Default = Template.bind({});
+Default.args = Object.assign({}, defaultArgs);
+export const Autoplay = Template.bind({});
+Autoplay.args = Object.assign(Object.assign({}, defaultArgs), { autoplay: true, interval: 5000 });
+Autoplay.parameters = {
+    docs: {
+        description: {
+            story: 'With `autoplay` on, a pause/play button is rendered next to the slide dots (WCAG 2.2.2). ' +
+                'Autoplay also suspends on hover and on keyboard focus, and is disabled entirely when ' +
+                '`prefers-reduced-motion: reduce` is set.',
+        },
+    },
+};

package/dist/collection/components/dda-home-banner/home-banner.css

@@ -0,0 +1,195 @@
+.home-slider {
+  position: relative;
+  max-width: 100%;
+  overflow: hidden;
+  display: block;
+}
+
+.home-slider::before {
+  content: '';
+  width: 100%;
+  height: 80%;
+  position: absolute;
+  bottom: 0;
+  background: rgb(0, 0, 0);
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
+  z-index: 1;
+}
+
+.home-slider img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.slider-item {
+  display: none;
+  width: 100%;
+  transition: opacity 0.5s ease-in-out;
+}
+
+.slider-item.active {
+  display: block;
+}
+
+.slider-item img {
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+
+.home-slider slide {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+}
+
+.home-slider .slide-wrap {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+}
+
+.home-slider .dda-slider-container {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+}
+
+.home-slider .dda-slides {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100vh;
+  display: flex;
+  transition: all 0.7s ease-in-out;
+}
+
+.slide-content {
+  width: 90vw;
+  margin: 0 auto;
+  padding: 0 20px;
+  position: relative;
+  z-index: 1;
+}
+
+.slide-content h2 {
+  font-size: var(--dda-fs-display-sm);
+  color: #fff;
+  font-weight: var(--dda-fw-700);
+}
+.slide-content p {
+  font-size: var(--dda-fs-headline-sm);
+  color: #fff;
+  font-weight: var(--dda-fw-300);
+}
+.slider-nav {
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  bottom: 250px;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 15px;
+  height: 30px;
+  z-index: 3;
+}
+.slider-nav .prev,
+.slider-nav .next,
+.slider-nav .pause {
+  height: 28px;
+  width: 28px;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  background: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  background: rgba(0, 0, 0, 0);
+  border-radius: 50%;
+  font-size: 25px;
+  transition: all 0.2s linear;
+}
+.slider-nav .prev:hover,
+.slider-nav .next:hover,
+.slider-nav .pause:hover {
+  background: rgba(0, 0, 0, 0.45);
+}
+
+/* The icon is a Material Icons ligature. Until that font loads — or if the
+   consumer never loads it — the literal text renders and would overflow the
+   28px button and cover the slide dots, making them unclickable. Clip it. */
+.slider-nav .prev,
+.slider-nav .next,
+.slider-nav .pause {
+  overflow: hidden;
+  flex: 0 0 auto;
+}
+
+.slider-nav .prev i,
+.slider-nav .next i,
+.slider-nav .pause i {
+  font-size: 25px;
+  line-height: 1;
+  width: 25px;
+  height: 25px;
+  overflow: hidden;
+}
+.slider-nav ul {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.slider-nav li {
+  display: flex;
+}
+.slider-nav .dots {
+  display: block;
+  appearance: none;
+  -webkit-appearance: none;
+  width: 10px;
+  height: 10px;
+  background: rgba(255, 255, 255, 0.2);
+  overflow: hidden;
+  text-indent: -100px;
+  margin: 0;
+  padding: 0;
+  border: 0px;
+  border-radius: 20px;
+  cursor: pointer;
+  transition: all 0.2s linear;
+}
+
+.slider-nav .dots.active {
+  background: rgba(255, 255, 255, 0.85);
+}
+
+/* Controls sit over photography, where the UA default focus ring is often
+   invisible. Pair a white ring with a dark outer ring so it reads on any slide. */
+.slider-nav .prev:focus-visible,
+.slider-nav .next:focus-visible,
+.slider-nav .pause:focus-visible,
+.slider-nav .dots:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(0, 0, 0, 0.65);
+}
+
+
+@media screen and (max-width:992px) {
+  .slider-nav {
+    bottom: 100px;
+  }
+}

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

@@ -6,6 +6,23 @@ export class DdaInput {
     handleInput(event) {
         this.value = event.target.value;
     }
+    // F-016: ids are derived from the consumer-supplied input_id, the same
+    // pattern dda-select's listboxId already relies on for uniqueness. If a
+    // consumer omits input_id, no id-based association is emitted at all
+    // (rather than colliding on a shared literal id across instances).
+    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;
+    }
     render() {
         const inputClass = [
             'dda-input-container',
@@ -16,8 +33,9 @@ export class DdaInput {
             this.type === 'disabled' ? 'dda-input-disabled' : '',
             this.custom_class, // Include custom class
             this.component_mode,
+            this.input_name,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: '1492b00018a06f6762618b41fdb0f47b847c161d' }, h("div", { key: 'b168469ada7aff9e20a4c0cb612bf54e0c369335', class: inputClass }, this.label && h("label", { key: '9b9f7f951aa6046677455d0d421acef552b5f210', htmlFor: this.input_id, class: "dda-input-label" }, this.label), h("input", { key: '5abd61199e828063f0a0030192d40a00fa192189', "aria-label": this.aria_label, id: this.input_id, type: this.type, placeholder: this.placeholder, value: this.value, onInput: (event) => this.handleInput(event), class: "dda-input-field dda-input-text" }), this.helper_text && h("span", { key: '53d94124ca55e9b7f3df50bc8f972fd7540081c2', class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: 'a7f65329d475db8121eb2294b6c6827a4bdd62cf', class: "dda-error-message" }, this.error_message))));
+        return (h(Host, { key: '2cbe6df5e60ff611ece992565bb8f4f335c199fa' }, h("div", { key: 'e878d9e3055d199b69bad630541090902f24436e', class: inputClass }, this.label && h("label", { key: '336e7e91b2d3bbc2207507cbbca7636a9f8041c4', htmlFor: this.input_id, class: "dda-input-label" }, this.label), h("input", { key: '5a72ef700ad5aa6a14cc2beb04c90895586dfa82', "aria-label": this.aria_label, id: this.input_id, name: this.input_name, type: this.type, placeholder: this.placeholder, value: this.value, onInput: (event) => this.handleInput(event), class: "dda-input-field dda-input-text", "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined }), this.helper_text && h("span", { key: 'd1aed2d29bb8510248da9ef409209f77b53d2021', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: 'e9f72ebbb0beb1771238768a8ecdd7a27abcc309', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-input"; }
     static get originalStyleUrls() {
@@ -48,8 +66,8 @@ export class DdaInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "placeholder": {
                 "type": "string",
@@ -67,8 +85,8 @@ export class DdaInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
-                "reflect": false
+                "reflect": false,
+                "attribute": "placeholder"
             },
             "value": {
                 "type": "string",
@@ -86,8 +104,8 @@ export class DdaInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
-                "reflect": false
+                "reflect": false,
+                "attribute": "value"
             },
             "type": {
                 "type": "string",
@@ -105,8 +123,8 @@ export class DdaInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": false,
+                "attribute": "type",
                 "defaultValue": "'text'"
             },
             "helper_text": {
@@ -125,8 +143,8 @@ export class DdaInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "helper_text",
-                "reflect": false
+                "reflect": false,
+                "attribute": "helper_text"
             },
             "error_message": {
                 "type": "string",
@@ -144,8 +162,8 @@ export class DdaInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error_message",
-                "reflect": false
+                "reflect": false,
+                "attribute": "error_message"
             },
             "validation_type": {
                 "type": "string",
@@ -163,8 +181,8 @@ export class DdaInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "validation_type",
-                "reflect": false
+                "reflect": false,
+                "attribute": "validation_type"
             },
             "size": {
                 "type": "string",
@@ -182,8 +200,8 @@ export class DdaInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
-                "reflect": false
+                "reflect": false,
+                "attribute": "size"
             },
             "input_status": {
                 "type": "string",
@@ -201,8 +219,8 @@ export class DdaInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input_status",
-                "reflect": false
+                "reflect": false,
+                "attribute": "input_status"
             },
             "custom_class": {
                 "type": "string",
@@ -220,8 +238,8 @@ export class DdaInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
-                "reflect": false
+                "reflect": false,
+                "attribute": "custom_class"
             },
             "component_mode": {
                 "type": "string",
@@ -239,8 +257,8 @@ export class DdaInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             },
             "input_id": {
                 "type": "string",
@@ -258,8 +276,8 @@ export class DdaInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input_id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "input_id"
             },
             "aria_label": {
                 "type": "string",
@@ -277,10 +295,28 @@ export class DdaInput {
                 },
                 "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"
             }
         };
     }
 }
-//# sourceMappingURL=dda-input.js.map

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

@@ -62,31 +62,36 @@ export default {
         onchange: {
             control: { type: 'text' },
             description: 'onchange event for the input field',
+        },
+        input_name: {
+            control: { type: 'text' },
+            description: 'Name of the input field',
         }
     },
     parameters: {
         docs: {
             description: {
-                component: `
-To use the \`dda-input\` component, pass the following props:
-
-\`\`\`html
-<dda-input
-    placeholder="Enter text"
-    label="Text Input"
-    value=""
-    type="text"
-    size="default"
-    helper_text="Helper or footer text"
-    error_message=""
-    validation_type="normal"
-    custom_class=""
-    component_mode=""
-    input_id="input"
-    aria_label="input"
-    onchange="console.log('changed')"
-></dda-input>
-  \`\`\`
+                component: `
+To use the \`dda-input\` component, pass the following props:
+
+\`\`\`html
+<dda-input
+    placeholder="Enter text"
+    label="Text Input"
+    value=""
+    type="text"
+    size="default"
+    helper_text="Helper or footer text"
+    error_message=""
+    validation_type="normal"
+    custom_class=""
+    component_mode=""
+    input_id="input"
+    aria_label="input"
+    onchange="console.log('changed')"
+    input_name=""
+></dda-input>
+  \`\`\`
 `,
             },
         },
@@ -114,6 +119,7 @@ Text.args = {
     input_id: 'input',
     aria_label: 'input',
     onchange: '',
+    input_name: 'input',
 };
 export const Password = Template.bind({});
 Password.args = {
@@ -129,6 +135,7 @@ Password.args = {
     input_id: 'input',
     aria_label: 'input',
     onchange: '',
+    input_name: 'input',
 };
 export const Email = Template.bind({});
 Email.args = {
@@ -144,6 +151,7 @@ Email.args = {
     input_id: 'input',
     aria_label: 'input',
     onchange: '',
+    input_name: 'input',
 };
 export const Number = Template.bind({});
 Number.args = {
@@ -159,6 +167,7 @@ Number.args = {
     input_id: 'input',
     aria_label: 'input',
     onchange: '',
+    input_name: 'input',
 };
 export const Date = Template.bind({});
 Date.args = {
@@ -174,6 +183,7 @@ Date.args = {
     input_id: 'input',
     aria_label: 'input',
     onchange: '',
+    input_name: 'input',
 };
 export const Time = Template.bind({});
 Time.args = {
@@ -189,6 +199,7 @@ Time.args = {
     input_id: 'input',
     aria_label: 'input',
     onchange: '',
+    input_name: 'input',
 };
 export const Witherror = Template.bind({});
 Witherror.args = {
@@ -205,6 +216,7 @@ Witherror.args = {
     input_id: 'input',
     aria_label: 'input',
     onchange: '',
+    input_name: 'input',
 };
 export const disabled = Template.bind({});
 disabled.args = {
@@ -221,5 +233,5 @@ disabled.args = {
     input_id: 'input',
     aria_label: 'input',
     onchange: '',
+    input_name: 'input',
 };
-//# sourceMappingURL=dda-input.stories.js.map