@dubai-design-system/components-js 3.12.10 → 3.12.12

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

@@ -7,22 +7,10 @@ export default {
             control: { type: 'text' },
             description: 'Name for the hamburger menu button',
         },
-        accessibility_button_text: {
+        accessibility_button_name: {
             control: { type: 'text' },
             description: 'Name for the accessibility button',
         },
-        accessibility_button_id: {
-            control: { type: 'text' },
-            description: 'ID for the accessibility button',
-        },
-        accessibility_button_icon_family: {
-            control: { type: 'text' },
-            description: 'ID for the accessibility button',
-        },
-        accessibility_button_icon_name: {
-            control: { type: 'text' },
-            description: 'ID for the accessibility button',
-        },
         search_button_name: {
             control: { type: 'text' },
             description: 'Name for the search button',
@@ -31,10 +19,6 @@ export default {
             control: { type: 'text' },
             description: 'Name for the search input',
         },
-        search_value: {
-            control: { type: 'text' },
-            description: 'Value for the search input',
-        },
         language_button_name: {
             control: { type: 'text' },
             description: 'Name for the language button',
@@ -51,321 +35,164 @@ export default {
             control: { type: 'text' },
             description: 'Name for the close accessibility button',
         },
-        toggle_accessibility_button_name: {
-            control: { type: 'text' },
-            description: 'Name for the toggle accessibility button',
-        },
-        usePredesignedAccessibilityMenu: {
-            control: { type: 'boolean' },
-            description: 'Use predesigned accessibility menu',
-        },
-        first_logo_href: {
-            control: { type: 'text' },
-            description: 'Href for the first logo anchor',
-        },
-        firstLogoTarget: {
-            control: { type: 'text' },
-            description: 'Target attribute for the link (e.g., _blank)',
-        },
-        second_logo_href: {
+        close_sidebar_button_name: {
             control: { type: 'text' },
-            description: 'Href for the Second logo anchor',
+            description: 'Name for the close sidebar button',
         },
-        hideOtherMenu: {
-            control: { type: 'boolean' },
-            description: 'Hides the middle section of the footer',
-        },
-        otherMenuItems: {
-            control: { type: 'object' },
-            description: 'List of items to render in the Other Menu section',
-        },
-        read_speaker_link: {
-            control: { type: 'text' },
-            description: 'Href for the Read Speaker',
-        },
-        search_input_placeholder: {
-            control: { type: 'text' },
-            description: 'Search',
-        },
-        language_tooltip: {
-            control: { type: 'text' },
-            description: 'Search',
-        },
-        login_tooltip: {
-            control: { type: 'text' },
-            description: 'Search',
-        },
-        accessibility_tooltip: {
-            control: { type: 'text' },
-            description: 'Search',
-        },
-        search_tooltip: {
-            control: { type: 'text' },
-            description: 'Search',
-        },
-        loginIcon: {
-            control: { type: 'text' },
-            description: 'Search',
-        },
-        useLoginPopup: {
+        toggle_accessibility_button_name: {
             control: { type: 'text' },
-        },
-        quickLinks: {
-            control: 'object',
-            description: 'Optional quickLinks to render a dda-header-menu inside alert',
+            description: 'Name for the toggle accessibility button',
         },
     },
     parameters: {
         docs: {
             description: {
-                component: `
-To use the \`dda-header\` component, pass the following props:
-
-\`\`\`html
-<dda-header
-    first-logo-href="https://www.dubai.gov.ae"
-    first-logo-src="assets/img/government-of-dubai.svg"
-    first-logo-white-src="assets/img/government-of-dubai-white.svg"
-    first-logo-alt="Dubai-Digital-Authority"
-    second-logo-href="https://www.dubai.gov.ae"
-    second-logo-src="digital-logo.svg"
-    second-logo-white-src="digital-logo-white.svg"
-    second-logo-alt="Dubai-Digital-Authority"
-    login-link="/login"
-    read-speaker-link=""
-    language_text="العربية"
-    hamburger_menu_button_name="hamburger_menu_button_name"
-    accessibility_button_text="accessibility_button_text"
-    accessibility_button_id="accessibility_button_id"
-    accessibility_button_icon_family="material-icons  material-symbols-outlined"
-    accessibility_button_icon_name="accessible_forward"
-    search_button_name="search_button_name"
-    search_input_name="search_input_name"
-    search_value="search_value"
-    language_button_name="language_button_name"
-    close_menu_button_name="close_menu_button_name"
-    close_accessibility_button_name="close_accessibility_button_name"
-    toggle_accessibility_button_name="toggle_accessibility_button_name"
-    languageswitch="() => console.log('Language Switcher')"
-    useNavigator="true"
-    navigatorClick="() => console.log('Navigator')"
-    smtextsize="() => console.log('Small Text')"
-    basetextsize="() => console.log('Base Text')"
-    lgtextsize="() => console.log('Large Text')"
-    normalcontrast="() => console.log('Normal Text')"
-    blindcontrast="() => console.log('Blind Text')"
-    redcontrast="() => console.log('Red Text')"
-    greencontrast="() => console.log('Green Text')">
-    usePredesignedAccessibilityMenu="true"
-    useLoginPopup="true"
-    searchfunctionality="() => console.log('Search Functionality')"
-</dda-header>
-  \`\`\`
+                component: `
+To use the \`dda-header\` component, pass the following props:
+
+\`\`\`html
+<dda-header
+    first-logo-src="assets/img/government-of-dubai.svg"
+    first-logo-white-src="assets/img/government-of-dubai-white.svg"
+    first-logo-alt="Dubai-Digital-Authority"
+    second-logo-src="digital-logo.svg"
+    second-logo-white-src="digital-logo-white.svg"
+    second-logo-alt="Dubai-Digital-Authority"
+    login-link="/login"
+    readSpeakerLink=""
+    language_text="العربية"
+    hamburger_menu_button_name="hamburger_menu_button_name"
+    accessibility_button_name="accessibility_button_name"
+    search_button_name="search_button_name"
+    search_input_name="search_input_name"
+    language_button_name="language_button_name"
+    close_menu_button_name="close_menu_button_name"
+    close_accessibility_button_name="close_accessibility_button_name"
+    close_sidebar_button_name="close_sidebar_button_name"
+    toggle_accessibility_button_name="toggle_accessibility_button_name"
+    languageswitch="() => console.log('Language Switcher')"
+    smtextsize="() => console.log('Small Text')"
+    basetextsize="() => console.log('Base Text')"
+    lgtextsize="() => console.log('Large Text')"
+    normalcontrast="() => console.log('Normal Text')"
+    blindcontrast="() => console.log('Blind Text')"
+    redcontrast="() => console.log('Red Text')"
+    greencontrast="() => console.log('Green Text')">
+</dda-header>
+  \`\`\`
 `,
             },
         },
     },
 };
-const Template = args => `
-    <dda-header 
-      first-logo-href="${args.first_logo_href}"
-      first-logo-src="${args.firstlogoSrc}"
-      first-logo-white-src="${args.firstLogoWhiteSrc}"
-      first-logo-alt="${args.firstLogoAlt}"
-      first-logo-target="${args.firstLogoTarget}"
-
-      second-logo-href="${args.second_logo_href}"
-      second-logo-src="${args.secondLogoSrc}"
-      second-logo-white-src="${args.secondLogoWhiteSrc}"
-      second-logo-alt="${args.secondLogoAlt}"
-
-      search_button_name="${args.search_button_name}"
-      search_input_name="${args.search_input_name}"
-      search_value="${args.search_value}"
-      search_input_placeholder="${args.search_input_placeholder}"
-      searchfunctionality="${args.searchfunctionality}"
-      search_tooltip="${args.search_tooltip}"
-      mobile-menu-search-id="${args.mobileMenuSearchId}"
-      mobile-menu-search-url="${args.mobileMenuSearchUrl}"
-
-      use-predesigned-accessibility-menu="${args.usePredesignedAccessibilityMenu}"
-      accessibility_tooltip="${args.accessibility_tooltip}"
-      toggle_accessibility_button_name="${args.toggle_accessibility_button_name}"
-      accessibility_button_text="${args.accessibility_button_text}"
-      accessibility_button_id="${args.accessibility_button_id}"
-      accessibility_button_icon_family="${args.accessibility_button_icon_family}"
-      accessibility_button_icon_name="${args.accessibility_button_icon_name}"
-      accessibilitymenufunctionality="${args.accessibilitymenufunctionality}"
-      close_accessibility_button_name="${args.close_accessibility_button_name}"
-
-      contrast_title="${args.contrast_title}"
-      contrast_description="${args.contrast_description}"
-      contrast_noraml_text="${args.contrast_noraml_text}"
-      contrast_color_blind_text="${args.contrast_color_blind_text}"
-      contrast_red_weakness_text="${args.contrast_red_weakness_text}"
-      contrast_green_weakness_text="${args.contrast_green_weakness_text}"
-      normalContrast="() => console.log('Normal Text')"
-      blindContrast="() => console.log('Blind Text')"
-      redContrast="() => console.log('Red Text')"
-      greenContrast="() => console.log('Green Text')"
-
-      screen_reader_title="${args.screen_reader_title}"
-      screen_reader_description="${args.screen_reader_description}"
-      read_speaker_link="${args.read_speaker_link}"
-
-      text_size_title="${args.text_size_title}"
-      text_size_description="${args.text_size_description}"
-      smTextSize="() => console.log('Small Text')"
-      baseTextSize="() => console.log('Base Text')"
-      lgTextSize="() => console.log('Large Text')"
-
-      language_tooltip="${args.language_tooltip}"
-      language_text="${args.language_text}"
-      language_button_name="${args.language_button_name}"
-      languageSwitch="() => console.log('Language Switcher')"
-
-      useNavigator="${args.useNavigator}"
-      navigatorClick="() => console.log('Navigator')"
-
-      login_tooltip="${args.login_tooltip}"
-      login-text="${args.loginText}"
-      login-link="${args.loginLink}"
-      login-icon="${args.loginIcon}"
-      useLoginPopup="${args.useLoginPopup}"
-      
-
-      hamburger_menu_button_name="${args.hamburger_menu_button_name}"
-      side-main-menu-title="${args.sideMainMenuTitle}"
-      side-menu-items='${JSON.stringify(args.sideMenuItems)}'
-      hide-other-menu="${args.hideOtherMenu}"
-      side-other-menu-title="${args.sideOtherMenuTitle}"
-      other-menu-items='${JSON.stringify(args.otherMenuItems)}'
-      close_menu_button_name="${args.close_menu_button_name}"
-
-      quick-links='${JSON.stringify(args.quickLinks)}'
-      
-    ></dda-header>
-    <script>
-      (function () {
-        const args = {
-          languageSwitch: () => console.log('Language Switch'),
-          navigatorClick: () => console.log('Navigator'),
-          smTextSize: () => console.log('Small Text'),
-          baseTextSize: () => console.log('Base Text'),
-          lgTextSize: () => console.log('Large Text'),
-          normalContrast: () => console.log('Normal Contrast'),
-          blindContrast: () => console.log('Blind Contrast'),
-          redContrast: () => console.log('Red Contrast'),
-          greenContrast: () => console.log('Green Contrast'),
-          accessibilitymenufunctionality: () => console.log('Accessibility Menu'),
-          searchfunctionality: () => console.log('Search Functionality'),
-        };
-
-        const header = document.querySelector('dda-header');
-        if (!header) {
-          console.warn('dda-header element not found');
-          return;
-        }
-
-        header.addEventListener('languageSwitch', ${args.languageSwitch});
-        header.addEventListener('navigatorClick', ${args.navigatorClick});
-        header.addEventListener('smTextSize', ${args.smTextSize});
-        header.addEventListener('baseTextSize', ${args.baseTextSize});
-        header.addEventListener('lgTextSize', ${args.lgTextSize});
-        header.addEventListener('normalContrast', ${args.normalContrast});
-        header.addEventListener('blindContrast', ${args.blindContrast});
-        header.addEventListener('redContrast', ${args.redContrast});
-        header.addEventListener('greenContrast', ${args.greenContrast});
-        header.addEventListener('accessibilitymenufunctionality', ${args.accessibilitymenufunctionality});
-        header.addEventListener('searchfunctionality', ${args.searchfunctionality});
-      })();
-    </script>
+const Template = args => `
+    <dda-header 
+      first-logo-src="${args.firstlogoSrc}"
+      first-logo-white-src="${args.firstLogoWhiteSrc}"
+      first-logo-alt="${args.firstLogoAlt}"
+      second-logo-src="${args.secondLogoSrc}"
+      second-logo-white-src="${args.secondLogoWhiteSrc}"
+      second-logo-alt="${args.secondLogoAlt}"
+      login-link="${args.loginLink}"
+      language_text="${args.language_text}"
+      hamburger_menu_button_name="${args.hamburger_menu_button_name}"
+      accessibility_button_name="${args.accessibility_button_name}"
+      search_button_name="${args.search_button_name}"
+      search_input_name="${args.search_input_name}"
+      language_button_name="${args.language_button_name}"
+      close_menu_button_name="${args.close_menu_button_name}"
+      close_accessibility_button_name="${args.close_accessibility_button_name}"
+      close_sidebar_button_name="${args.close_sidebar_button_name}"
+      toggle_accessibility_button_name="${args.toggle_accessibility_button_name}"
+      readSpeakerLink="app-eu.readspeaker.com"
+      languageSwitch="() => console.log('Language Switcher')"
+      smTextSize="() => console.log('Small Text')"
+      baseTextSize="() => console.log('Base Text')"
+      lgTextSize="() => console.log('Large Text')"
+       normalContrast="() => console.log('Normal Text')"
+        blindContrast="() => console.log('Blind Text')"
+         redContrast="() => console.log('Red Text')"
+          greenContrast="() => console.log('Green Text')"
+      quick-links='${JSON.stringify(args.quickLinks)}'
+      side-menu-items='${JSON.stringify(args.sideMenuItems)}'
+    ></dda-header>
+        <script>
+      const header = document.querySelector('dda-header');
+      header.addEventListener('languageSwitch', ${args.languageSwitch});
+       header.addEventListener('smTextSize', ${args.smTextSize});
+              header.addEventListener('baseTextSize', ${args.baseTextSize});
+                     header.addEventListener('lgTextSize', ${args.lgTextSize});
+                      header.addEventListener('normalContrast', ${args.normalContrast});
+                       header.addEventListener('blindContrast', ${args.blindContrast});
+                        header.addEventListener('redContrast', ${args.redContrast});
+                         header.addEventListener('greenContrast', ${args.greenContrast});
+    </script>
   `;
 export const Default = Template.bind({});
 Default.args = {
-    first_logo_href: "https://www.dubai.gov.ae",
     firstlogoSrc: "https://www.dof.gov.ae/Style Library/img/gov-logo.svg",
     firstLogoWhiteSrc: "https://www.dof.gov.ae/Style Library/img/gov-logo-white.svg",
     firstLogoAlt: "Dubai-Digital-Authority",
-    firstLogoTarget: '',
-    second_logo_href: "https://www.dubai.gov.ae",
     secondLogoSrc: "https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo.svg",
-    secondLogoWhiteSrc: "https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo-white.svg",
+    secondLogoWhiteSrc: "https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo.svg",
     secondLogoAlt: "Dubai-Digital-Authority",
+    loginLink: "/login",
+    language_text: "العربية",
+    hamburger_menu_button_name: "hamburger_menu_button_name",
+    accessibility_button_name: "accessibility_button_name",
     search_button_name: "search_button_name",
     search_input_name: "search_input_name",
-    search_value: "",
-    search_input_placeholder: "Search",
-    searchfunctionality: "() => console.log('Search Functionality')",
-    search_tooltip: "Search",
-    mobileMenuSearchId: "mobileSearch",
-    mobileMenuSearchUrl: "javascript:void(0)",
-    usePredesignedAccessibilityMenu: true,
-    accessibility_tooltip: "Accessibility",
-    toggle_accessibility_button_name: "toggle_accessibility_button_name",
-    accessibility_button_text: "accessibility_button_text",
-    accessibility_button_id: "accessibility_button_id",
-    accessibility_button_icon_family: "material-icons  material-symbols-outlined",
-    accessibility_button_icon_name: "accessible_forward",
-    accessibilitymenufunctionality: "() => console.log('Accessibility Menu Functionality')",
+    language_button_name: "language_button_name",
+    close_menu_button_name: "close_menu_button_name",
     close_accessibility_button_name: "close_accessibility_button_name",
-    contrast_title: "Contrast",
-    contrast_description: "Select your preferred contrast setting",
-    contrast_noraml_text: "Normal",
-    contrast_color_blind_text: "Colours Blind",
-    contrast_red_weakness_text: "Red Weakness",
-    contrast_green_weakness_text: "Green Weakness",
+    close_sidebar_button_name: "close_sidebar_button_name",
+    toggle_accessibility_button_name: "toggle_accessibility_button_name",
+    languageSwitch: "() => console.log('Language Switcher')",
+    smTextSize: "() => console.log('Small Text')",
+    baseTextSize: "() => console.log('Base Text')",
+    lgTextSize: "() => console.log('Large Text')",
     normalContrast: "() => console.log('Normal Contrast')",
     blindContrast: "() => console.log('Blind Contrast')",
     redContrast: "() => console.log('Red Contrast')",
     greenContrast: "() => console.log('Green Contrast')",
-    screen_reader_title: "Screen Reader",
-    screen_reader_description: "Listen to the content of the page by clicking play or listen",
-    read_speaker_link: "app-eu.readspeaker.com",
-    text_size_title: "Text Size",
-    text_size_description: "Use the buttons below to increase or decrease the text size",
-    smTextSize: "() => console.log('Small Text')",
-    baseTextSize: "() => console.log('Base Text')",
-    lgTextSize: "() => console.log('Large Text')",
-    language_tooltip: "Language",
-    language_text: "العربية",
-    language_button_name: "language_button_name",
-    languageSwitch: "() => console.log('Language Switcher')",
-    navigatorClick: "() => console.log('Navigator')",
-    login_tooltip: "Login",
-    loginText: "Login",
-    loginLink: "/Login",
-    loginIcon: "account_circle",
-    useLoginPopup: "true",
-    loginPopupLinks: [
-        { popupItemLabel: 'About', url: 'about.html' },
-        { popupItemLabel: 'Profile', url: 'profile.html' }
+    readSpeakerLink: "app-eu.readspeaker.com",
+    quickLinks: [
+        { label: 'Home', href: '#', subMenu: [] },
+        {
+            label: 'Services',
+            menuLabel: 'Services',
+            href: '#',
+            subMenu: [
+                { title: 'Web Development', description: 'Build and maintain websites', icon: 'sentiment_satisfied', href: '#' },
+                { title: 'SEO Services', description: 'Improve your site ranking', icon: 'sentiment_satisfied', href: '#' },
+            ],
+        },
+        { label: 'About', href: '#', subMenu: [] },
+        { label: 'Contact', href: '#', subMenu: [] },
     ],
-    hamburger_menu_button_name: "Menu",
-    sideMainMenuTitle: "Main Menu",
     sideMenuItems: [
-        { label: 'Home', active: 'true', href: '#', subMenu: [] },
+        { label: 'Home', href: '#', subMenu: [] },
         {
             label: 'Initiatives',
             href: '#',
             subMenu: [
-                { headerLabel: 'Initiatives', subLinkClass: '', label: 'Submenu-1', href: '#', subMenu: [
-                        { headerLabel: 'Initiatives', subLinkClass: '', label: 'Submenu-2', href: '#', subMenu: [
-                                { headerLabel: 'Initiatives', subLinkClass: '', label: 'Submenu-4', href: '#' }
+                { headerLabel: 'Initiatives', label: 'Submenu-1', href: '#', subMenu: [
+                        { headerLabel: 'Initiatives', label: 'Submenu-2', href: '#', subMenu: [
+                                { headerLabel: 'Initiatives', label: 'Submenu-4', href: '#' }
                             ] },
-                        { headerLabel: 'Initiatives', subLinkClass: '', label: 'Submenu-3', href: '#' }
+                        { headerLabel: 'Initiatives', label: 'Submenu-3', href: '#' }
                     ] },
-                { headerLabel: 'Initiatives', subLinkClass: '', label: 'Submenu-1', href: '#', subMenu: [
-                        { headerLabel: 'Initiatives', subLinkClass: '', label: 'Submenu-2', href: '#', subMenu: [
-                                { headerLabel: 'Initiatives', subLinkClass: '', label: 'Submenu-4', href: '#' }
+                { headerLabel: 'Initiatives', label: 'Submenu-1', href: '#', subMenu: [
+                        { headerLabel: 'Initiatives', label: 'Submenu-2', href: '#', subMenu: [
+                                { headerLabel: 'Initiatives', label: 'Submenu-4', href: '#' }
                             ] },
-                        { headerLabel: 'Initiatives', subLinkClass: '', label: 'Submenu-3', href: '#' }
+                        { headerLabel: 'Initiatives', label: 'Submenu-3', href: '#' }
                     ] },
             ],
         },
         { label: 'Services', href: '#', subMenu: [
-                { headerLabel: 'Service', subLinkClass: '', label: 'Service-1', href: '#' },
-                { headerLabel: 'Service', subLinkClass: '', label: 'Service-2', href: '#' },
+                { headerLabel: 'Service', label: 'Service-1', href: '#' },
+                { headerLabel: 'Service', label: 'Service-2', href: '#' },
             ] },
         { label: 'Data', href: '#', subMenu: [] },
         { label: 'Government Services', href: '#', subMenu: [] },
@@ -374,71 +201,4 @@ Default.args = {
         { label: 'Newsroom', href: '#', subMenu: [] },
         { label: 'Contact Us', href: '#', subMenu: [] },
     ],
-    hideOtherMenu: false,
-    sideOtherMenuTitle: "Other",
-    otherMenuItems: [
-        { label: 'Menu 1', active: 'true', href: '#' },
-        { label: 'Menu 2', href: '#' },
-        { label: 'Menu 3', href: '#' },
-    ],
-    close_menu_button_name: "close_menu_button_name",
-    //Header Menu Items
-    quickLinks: [
-        { headerMenuLabel: 'Home', active: 'true', url: '#' },
-        //default dropdown menu
-        {
-            headerMenuLabel: 'About Us', url: 'javascript:void(0)',
-            type: 'dda_default_submenu',
-            children: [
-                { headerMenuLabel: 'Submenu 1', url: '#',
-                    defaultSubMenuTitle: 'Submenu 1 Title',
-                    children: [
-                        { headerMenuLabel: 'SubSubmenu 1', url: '#' },
-                        { headerMenuLabel: 'SubSubmenu 1', url: '#' },
-                    ]
-                },
-                { headerMenuLabel: 'Submenu 2', url: '#',
-                    defaultSubMenuTitle: 'Submenu 2 Title',
-                    children: [
-                        { headerMenuLabel: 'SubSubmenu 2', url: '#' },
-                        { headerMenuLabel: 'SubSubmenu 2', url: '#' },
-                    ]
-                },
-                { headerMenuLabel: 'Submenu 3', url: '#' },
-            ],
-        },
-        //mega menu
-        {
-            headerMenuLabel: 'Services', url: 'javascript:void(0)',
-            type: 'dda_main_megamenu',
-            children: [
-                {
-                    title: 'QUICK LINKS 1',
-                    items: [
-                        { headerMenuLabel: 'Service 1', url: '#', description: 'Service Description' },
-                        { headerMenuLabel: 'Service 2', url: '#' },
-                        { headerMenuLabel: 'Service 3', url: '#' },
-                    ],
-                },
-                {
-                    title: 'QUICK LINKS 2',
-                    items: [
-                        { headerMenuLabel: 'Service 1', url: '#' },
-                        { headerMenuLabel: 'Service 2', url: '#' },
-                        { headerMenuLabel: 'Service 3', url: '#' },
-                    ],
-                },
-                {
-                    title: 'QUICK LINKS 3',
-                    items: [{ headerMenuLabel: 'Service 3', url: '#' }],
-                },
-                {
-                    title: 'QUICK LINKS 4',
-                    items: [{ headerMenuLabel: 'Service 4', url: '#' }],
-                },
-            ],
-        },
-        { headerMenuLabel: 'Contact', url: '#' },
-    ],
 };
-//# sourceMappingURL=dda-header.stories.js.map