@dubai-design-system/components-js 5.0.3 → 5.1.0

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

@@ -12,10 +12,6 @@ export default {
             options: ['bg-transparent', 'bg-white'],
             description: 'Type of the dropdown field',
         },
-        placeholder: {
-            control: 'text',
-            description: 'Placeholder text for the dropdown field',
-        },
         label: {
             control: 'text',
             description: 'Label for the dropdown field',

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

@@ -1,5 +1,9 @@
 import { h } from "@stencil/core";
 export class DdaFooter {
+    constructor() {
+        /** Heading level (1 to 6) of `footerTitle`, to fit the page's heading order. Default: `4`. */
+        this.heading_level = 4;
+    }
     parseJsonArray(jsonString) {
         try {
             return JSON.parse(jsonString);
@@ -12,7 +16,11 @@ export class DdaFooter {
     render() {
         const sections = this.parseJsonArray(this.footerSections);
         const icons = this.parseJsonArray(this.socialIcons);
-        return (h("footer", { key: '6657c50eff682e64e6b269d7a2cf0ffa2a1d21b5', class: "WB-footer" }, h("div", { key: 'be415ac4d6e483730df3314082d79af16857acce', class: "dda-container line-seperater" }, h("div", { key: '7558145a98fd1d3cc5ab1badd20b1679a5fade8e', class: "dda-flex dda-align-center flex-column dda-gap-5" }, h("h4", { key: 'f2a1dbf62ea90256ab9c466ddf464bf2db79b352', class: "dda-fs-display-sm dda-fw-700 dda-color-black" }, this.footerTitle), h("p", { key: '0e9fa41a059d08fb54781e1760756135512b203a', class: "dda-fs-title-sm dda-fw-400 mb-3" }, this.description), h("div", { key: '8451368d1bccd69eed276ca2e4b529bffce1bd1d', class: "dda-flex dda-gap-5" }, h("dda-button", { key: 'e4da885d7a0f53cdef66b147cebb018e639e2e2f', button_color: "default-primary", size: "lg" }, this.signUpButtonText), h("dda-button", { key: 'a95e98fa9d15b8daa7c42507e1d6d3d43cd1119b', button_color: "default-tertiary", size: "lg" }, this.loginButtonText)))), h("div", { key: 'f1e25c4c14f5337325f772b0a6cfaae38b696597', class: "dda-container line-seperater" }, h("div", { key: '3c6484c94ba27eff6407dc402761b40130089019', class: "dda-row" }, h("div", { key: '57303485ca96d8d69955296be8c3e13edb127186', class: "dda-col-lg-4 mb-3" }, h("div", { key: 'bb38dba4e7aa677b0dbd576235462e18630c721a', class: "text-center" }, h("img", { key: 'a0753f43dd43aa0f8762b44e08f27cb61ae2e90e', class: "entt-logo", src: this.logoSrc, alt: this.logoAlt }), h("p", { key: 'c085e81867a6c1479bb9dbbd447e27d603906240', class: "dda-fs-title-sm" }, "Design outstanding interfaces with advanced Figma features in a matter of minutes."))), h("div", { key: 'cfe1db4dff6209067c8c3d3b238539b0e05ca089', class: "dda-col-lg-8" }, h("div", { key: 'c8ca286ee2b2e57dac56a75224ecc52096e1995f', class: "dda-row" }, sections.map((section) => (h("div", { class: "dda-col-6 dda-col-sm-6 dda-col-md-3 mb-3" }, h("p", { class: "dda-fs-title-sm dda-fw-700 dda-color-black mb-3" }, section.title), h("ul", { class: "footer-menu" }, section.links.map((link) => (h("li", null, h("a", { class: "dda-fs-title-sm dda-fw-400", href: link.href }, link.label)))))))))))), h("div", { key: '04db59e1c745c1f5c25f5f0e3de672370fbb9eb0', class: "dda-container pt-4" }, h("div", { key: '17f57c90b21973ebe0ec71e35e27af232875283f', class: "dda-flex dda-align-center dda-justify-space" }, h("p", { key: '4a70f6bc20d0e208b555bc381b6c47d1714bff74', class: "dda-fs-title-sm" }, this.copyrightText), h("ul", { key: 'dce8f8b9150f97b61e8c26363acdfff83009e609', class: "dda-flex dda-align-center dda-gap-4" }, icons.map((icon) => (h("li", null, h("a", { href: icon.href }, h("img", { class: "footer-social-icn", src: icon.src, alt: icon.alt }))))))))));
+        // Clamp to a valid heading element; the classes keep the same look at every level.
+        const requestedLevel = Math.round(Number(this.heading_level));
+        const level = Number.isNaN(requestedLevel) ? 4 : Math.min(6, Math.max(1, requestedLevel));
+        const TitleTag = `h${level}`;
+        return (h("footer", { key: '521caff9c6c521f0ead1a0ae11677769930328e1', class: "WB-footer" }, h("div", { key: '46129fc9bf4e99b05ec489538ebc73e48afe202a', class: "dda-container line-seperater" }, h("div", { key: 'd43a87a3fca769911595517f48b9f3985cc4b899', class: "dda-flex dda-align-center flex-column dda-gap-5" }, h(TitleTag, { key: 'b9d3bc417c4f039816584ac6cec62e189acc098d', class: "dda-fs-display-sm dda-fw-700 dda-color-black" }, this.footerTitle), h("p", { key: 'e7f7b0bf9098e8ec371f37935c5f5cd1d78d9ded', class: "dda-fs-title-sm dda-fw-400 mb-3" }, this.description), h("div", { key: '95de23ef3068e49bc5b0ce4c4eba6714fb17f32c', class: "dda-flex dda-gap-5" }, h("dda-button", { key: 'bb8802b5b0d2749f7484fb2e8c4b26d8979bb977', button_color: "default-primary", size: "lg" }, this.signUpButtonText), h("dda-button", { key: 'ab82dcb1b4acd031dc464a917d853e8b2f26e862', button_color: "default-tertiary", size: "lg" }, this.loginButtonText)))), h("div", { key: '9f08aec61f1f268cb0dc84051d7658e8bd408edd', class: "dda-container line-seperater" }, h("div", { key: '1016ef66bea421c57f8812666ec6e9ef5f512381', class: "dda-row" }, h("div", { key: '1b5f215c919718ce80ad1e5f3fe5141110c629ea', class: "dda-col-lg-4 mb-3" }, h("div", { key: 'a2fd45a7c6280332aed7c91a090cbe136b394f16', class: "text-center" }, h("img", { key: 'bf94335f5522b8c92b857a61bbfda0ebb130bce9', class: "entt-logo", src: this.logoSrc, alt: this.logoAlt }), this.logoDescription && h("p", { key: '3b9ed6c844a84dc776dbc278b7dddf640be93517', class: "dda-fs-title-sm" }, this.logoDescription))), h("div", { key: '47d6e05b4346b64d3127c02de78046f548570582', class: "dda-col-lg-8" }, h("div", { key: '7c70dbb05573e1e4f045350e8a4c65da0d42c121', class: "dda-row" }, sections.map((section) => (h("div", { class: "dda-col-6 dda-col-sm-6 dda-col-md-3 mb-3" }, h("p", { class: "dda-fs-title-sm dda-fw-700 dda-color-black mb-3" }, section.title), h("ul", { class: "footer-menu" }, section.links.map((link) => (h("li", null, h("a", { class: "dda-fs-title-sm dda-fw-400", href: link.href }, link.label)))))))))))), h("div", { key: '071adeab6bac91d82851d40a90a15cc28620f87b', class: "dda-container pt-4" }, h("div", { key: '19d9d4c2aa5e05a0d167da58a8cc2912d5275d1b', class: "dda-flex dda-align-center dda-justify-space" }, h("p", { key: '2027228124320bbdb6606787bffb726cd18e95c0', class: "dda-fs-title-sm" }, this.copyrightText), h("ul", { key: '23e2aa0f8b3582335e3934b22cfd86ba8836b82b', class: "dda-flex dda-align-center dda-gap-4" }, icons.map((icon) => (h("li", null, h("a", { href: icon.href }, h("img", { class: "footer-social-icn", src: icon.src, alt: icon.alt }))))))))));
     }
     static get is() { return "dda-footer"; }
     static get originalStyleUrls() {
@@ -39,13 +47,33 @@ export class DdaFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Heading of the call-to-action area at the top of the footer."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "footer-title"
             },
+            "heading_level": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading level (1 to 6) of `footerTitle`, to fit the page's heading order. Default: `4`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading_level",
+                "defaultValue": "4"
+            },
             "description": {
                 "type": "string",
                 "mutable": false,
@@ -58,7 +86,7 @@ export class DdaFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Paragraph under `footerTitle`."
                 },
                 "getter": false,
                 "setter": false,
@@ -77,7 +105,7 @@ export class DdaFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Label of the primary (Sign up) button. The button has no link or action."
                 },
                 "getter": false,
                 "setter": false,
@@ -96,7 +124,7 @@ export class DdaFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Label of the tertiary (Login) button. The button has no link or action."
                 },
                 "getter": false,
                 "setter": false,
@@ -115,7 +143,7 @@ export class DdaFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Image URL of the footer logo."
                 },
                 "getter": false,
                 "setter": false,
@@ -134,7 +162,7 @@ export class DdaFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Alternative text for the footer logo."
                 },
                 "getter": false,
                 "setter": false,
@@ -153,13 +181,32 @@ export class DdaFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Copyright text in the bottom row."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "copyright-text"
             },
+            "logoDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Short text shown under the footer logo. Nothing is shown when it is not set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "logo-description"
+            },
             "footerSections": {
                 "type": "string",
                 "mutable": false,
@@ -172,7 +219,7 @@ export class DdaFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Link columns. JSON array of `{ title, links: [{ label, href }] }`."
                 },
                 "getter": false,
                 "setter": false,
@@ -191,7 +238,7 @@ export class DdaFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Social links in the bottom row. JSON array of `{ href, src, alt }`, where `src` is an image URL."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -6,11 +6,11 @@ export default {
         docs: {
             description: {
                 component: `
-  To use the \`dda-chip\` component, pass the following props:
+  To use the \`dda-footer\` component, pass the following props:
   
   \`\`\`html
 <dda-footer
-    title="Welcome to your new digital reality."
+    footer-title="Welcome to your new digital reality."
     description="Let us help you take you from zero to serious business and beyond. Our no-strings attached free trial lets you test our product today."
     logo-src="https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo.svg"
     logo-alt="Dubai-Digital-Authority"
@@ -19,7 +19,6 @@ export default {
     copyright-text="© 2023 Digitaldubai. All Rights Reserved."
     footer-sections='[{"title":"About Us","links":[{"label":"Our Competition","href":"#"},{"label":"Channels","href":"#"},{"label":"Scale","href":"#"},{"label":"Watch the Demo","href":"#"}]},{"title":"Products","links":[{"label":"Features","href":"#"},{"label":"Products","href":"#"},{"label":"Enterprise","href":"#"},{"label":"Solutions","href":"#"}]},{"title":"Resources","links":[{"label":"Partners","href":"#"},{"label":"Developers","href":"#"},{"label":"Community","href":"#"},{"label":"Apps","href":"#"}]},{"title":"Company","links":[{"label":"About Us","href":"#"},{"label":"Leadership","href":"#"},{"label":"News","href":"#"}]}]'
     social-icons='[{"href":"#","src":"https://img.icons8.com/?size=256&amp;id=118497&amp;format=png","alt":"Facebook"},{"href":"#","src":"https://img.icons8.com/?size=256&amp;id=118497&amp;format=png","alt":"Google"},{"href":"#","src":"https://img.icons8.com/?size=256&amp;id=118497&amp;format=png","alt":"Apple"},{"href":"#","src":"https://img.icons8.com/?size=256&amp;id=118497&amp;format=png","alt":"Instagram"}]'
-    class="hydrated"
 ></dda-footer>
     \`\`\`
   `,
@@ -29,10 +28,11 @@ export default {
 };
 const Template = (args) => `
     <dda-footer 
-      title="${args.introTitle}"
+      footer-title="${args.introTitle}"
       description="${args.introText}"
       logo-src="${args.logoUrl}"
       logo-alt="${args.logoAlt}"
+      logo-description="${args.logoDescription}"
       sign-up-button-text="${args.signUpLabel}"
       login-button-text="${args.loginLabel}"
       copyright-text="${args.copyrightText}"
@@ -46,6 +46,7 @@ Default.args = {
     introText: "Let us help you take you from zero to serious business and beyond. Our no-strings attached free trial lets you test our product today.",
     logoUrl: "https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo.svg",
     logoAlt: "Dubai-Digital-Authority",
+    logoDescription: "Digital services for everyone in Dubai.",
     signUpLabel: "Sign Up",
     loginLabel: "Login",
     copyrightText: "© 2023 Digitaldubai. All Rights Reserved.",

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

@@ -34,3 +34,14 @@
     scroll-padding-top: 100px;
   }
 }
+
+/* The header adds this class to <html> while its side menu is open, so the page underneath
+   cannot scroll. The gutter keeps the layout from shifting when a desktop scrollbar hides. */
+:root.dda-scroll-lock {
+  overflow: hidden;
+  scrollbar-gutter: stable;
+}
+
+:root.dda-scroll-lock body {
+  overflow: hidden;
+}