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

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

@@ -12,18 +12,17 @@ export class DdaFooter {
     render() {
         const sections = this.parseJsonArray(this.footerSections);
         const icons = this.parseJsonArray(this.socialIcons);
-        return (h("footer", { key: '236d2921397817b0d7a6b72c078ac0360587e4f2', class: "WB-footer" }, h("div", { key: '584fe763a98812d2f8e6fcd66392a55f77e090b7', class: "dda-container line-seperater" }, h("div", { key: '05ef614a6d1d86cf4086224ebb036cb2bc3989ab', class: "dda-flex dda-align-center flex-column dda-gap-5" }, h("h4", { key: '8f7ffeb8ee0190f4a6fcfb0b55322aa2ab2c049a', class: "dda-fs-display-sm dda-fw-700 dda-color-black" }, this.footerTitle), h("p", { key: 'f582eb84cfff3633ccd0318e31b15c14423903e7', class: "dda-fs-title-sm dda-fw-400 mb-3" }, this.description), h("div", { key: 'b08cd5166fd35b7c866f3e3dda0b2179f7cbc42b', class: "dda-flex dda-gap-5" }, h("dda-button", { key: '37d59b5e59af41dca771a1834e1cf350ba3b9551', button_color: "default-primary", size: "lg" }, this.signUpButtonText), h("dda-button", { key: '9b068a2e32ea590854bcd93fee2da56208567f92', button_color: "default-tertiary", size: "lg" }, this.loginButtonText)))), h("div", { key: '68ea8281fb65aa76d27472098af077945ee8798d', class: "dda-container line-seperater" }, h("div", { key: '391a26cc7df912fc23ed4e95cb4bb1918aa3cd1e', class: "dda-row" }, h("div", { key: '94b96062da555aa0750ede5506ab802e02f1f8b3', class: "dda-col-lg-4 mb-3" }, h("div", { key: 'fe68c72cf5fd8a8e5c7b72bbdb4b45b152ba0996', class: "text-center" }, h("img", { key: '5d03c983325b8b34e6e519dbb2efe2b62ae13e75', class: "entt-logo", src: this.logoSrc, alt: this.logoAlt }), h("p", { key: 'd6700f9bd93d2d4e7e6e8658da7e87d380c9b603', class: "dda-fs-title-sm" }, "Design outstanding interfaces with advanced Figma features in a matter of minutes."))), h("div", { key: 'af79dfadfe3aeee7d36262896be48a567f67e5fa', class: "dda-col-lg-8" }, h("div", { key: '9b8866a7c30aefab6181560bda630951620920bd', 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: '84aa9242978245a8eb6596c77c1aa1416c19012b', class: "dda-container pt-4" }, h("div", { key: '56e26dd4b4d359221488ecc87173b136d6eb2e03', class: "dda-flex dda-align-center dda-justify-space" }, h("p", { key: '07fb198e4d54d07f812f09c34330a9490ecd1f64', class: "dda-fs-title-sm" }, this.copyrightText), h("ul", { key: '1074ce0eaca3a34d3a061ff9828cc1b78d752069', 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 }))))))))));
+        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 }))))))))));
     }
     static get is() { return "dda-footer"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["dda-footer.css"]
+            "$": ["dda-footer.css", "../../global/global.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["dda-footer.css"]
+            "$": ["dda-footer.css", "../../global/global.css"]
         };
     }
     static get properties() {
@@ -44,8 +43,8 @@ export class DdaFooter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "footer-title",
-                "reflect": false
+                "reflect": false,
+                "attribute": "footer-title"
             },
             "description": {
                 "type": "string",
@@ -63,8 +62,8 @@ export class DdaFooter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "description",
-                "reflect": false
+                "reflect": false,
+                "attribute": "description"
             },
             "signUpButtonText": {
                 "type": "string",
@@ -82,8 +81,8 @@ export class DdaFooter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "sign-up-button-text",
-                "reflect": false
+                "reflect": false,
+                "attribute": "sign-up-button-text"
             },
             "loginButtonText": {
                 "type": "string",
@@ -101,8 +100,8 @@ export class DdaFooter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "login-button-text",
-                "reflect": false
+                "reflect": false,
+                "attribute": "login-button-text"
             },
             "logoSrc": {
                 "type": "string",
@@ -120,8 +119,8 @@ export class DdaFooter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "logo-src",
-                "reflect": false
+                "reflect": false,
+                "attribute": "logo-src"
             },
             "logoAlt": {
                 "type": "string",
@@ -139,8 +138,8 @@ export class DdaFooter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "logo-alt",
-                "reflect": false
+                "reflect": false,
+                "attribute": "logo-alt"
             },
             "copyrightText": {
                 "type": "string",
@@ -158,8 +157,8 @@ export class DdaFooter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "copyright-text",
-                "reflect": false
+                "reflect": false,
+                "attribute": "copyright-text"
             },
             "footerSections": {
                 "type": "string",
@@ -177,8 +176,8 @@ export class DdaFooter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "footer-sections",
-                "reflect": false
+                "reflect": false,
+                "attribute": "footer-sections"
             },
             "socialIcons": {
                 "type": "string",
@@ -196,10 +195,9 @@ export class DdaFooter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "social-icons",
-                "reflect": false
+                "reflect": false,
+                "attribute": "social-icons"
             }
         };
     }
 }
-//# sourceMappingURL=dda-footer.js.map

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

@@ -5,40 +5,40 @@ export default {
     parameters: {
         docs: {
             description: {
-                component: `
-  To use the \`dda-chip\` component, pass the following props:
-  
-  \`\`\`html
-<dda-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"
-    sign-up-button-text="Sign Up"
-    login-button-text="Login"
-    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>
-    \`\`\`
+                component: `
+  To use the \`dda-chip\` component, pass the following props:
+  
+  \`\`\`html
+<dda-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"
+    sign-up-button-text="Sign Up"
+    login-button-text="Login"
+    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>
+    \`\`\`
   `,
             },
         },
     },
 };
-const Template = (args) => `
-    <dda-footer 
-      title="${args.introTitle}"
-      description="${args.introText}"
-      logo-src="${args.logoUrl}"
-      logo-alt="${args.logoAlt}"
-      sign-up-button-text="${args.signUpLabel}"
-      login-button-text="${args.loginLabel}"
-      copyright-text="${args.copyrightText}"
-      footer-sections='${JSON.stringify(args.footerSections)}'
-      social-icons='${JSON.stringify(args.socialIcons)}'
-    ></dda-footer>
+const Template = (args) => `
+    <dda-footer 
+      title="${args.introTitle}"
+      description="${args.introText}"
+      logo-src="${args.logoUrl}"
+      logo-alt="${args.logoAlt}"
+      sign-up-button-text="${args.signUpLabel}"
+      login-button-text="${args.loginLabel}"
+      copyright-text="${args.copyrightText}"
+      footer-sections='${JSON.stringify(args.footerSections)}'
+      social-icons='${JSON.stringify(args.socialIcons)}'
+    ></dda-footer>
   `;
 export const Default = Template.bind({});
 Default.args = {
@@ -93,4 +93,3 @@ Default.args = {
         { href: "#", src: "https://img.icons8.com/?size=256&id=118497&format=png", alt: "Instagram" },
     ],
 };
-//# sourceMappingURL=dda-footer.stories.js.map

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

@@ -0,0 +1,36 @@
+/*
+ * F-009 (WCAG 2.4.11 - Focus Not Obscured): the header's own fixed
+ * positioning lives in global/templates/dda-header-main.css
+ * (`.dda-header { position: fixed; top: 0; z-index: 6; }`), with no
+ * scroll-padding/scroll-margin anywhere in the codebase. A keyboard user
+ * who lands on a focused element near the top of a scrolled page - by
+ * Tab, an in-page anchor, or a "skip to content" link - can have the
+ * browser scroll it flush under the fixed header, hiding what they just
+ * focused.
+ *
+ * scroll-padding-top on the root reserves that space for every scroll /
+ * scrollIntoView in the document. Sized to this header's real rendered
+ * height (measured against the live component, since `.dda-header`'s own
+ * CSS height is `auto`, driven entirely by its logo/nav children):
+ * ~158-162px from 768px up (the mega menu hides and `.dda-header` gains
+ * `padding: 10px 0` below 1024px, but the measured height stays in that
+ * range through 768px) and 80px at or below 767px
+ * (`.dda-menu-container { height: 80px }`, `.dda-head-logo { display:
+ * none }`). The transparent/white header variants only change colour, not
+ * box model, so they don't need a separate value.
+ *
+ * 170px / 100px match this codebase's own established convention for
+ * clearing this exact header - `.maincontent { padding-top: 170px }`
+ * (global/global.css), with the same 767px breakpoint dropping it to
+ * 100px - already relied on, in real page templates, to keep content clear
+ * of the header with a safety margin over the measured height above.
+ */
+:root {
+  scroll-padding-top: 170px;
+}
+
+@media screen and (max-width: 767px) {
+  :root {
+    scroll-padding-top: 100px;
+  }
+}