@dubai-design-system/components-js 3.12.9 → 3.12.11

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

@@ -4,8 +4,8 @@ import accessibility_icon from "../../../public_images/icn-complaints.svg";
 import happy_icon from "../../../public_images/icn-happy.svg";
 import chat_icn from "../../../public_images/icn-chat_bubble_outline.svg";
 import grid_view from "../../../public_images/icn-grid-view.svg";
-import dubai_ae from "../../../public_images/DubaiAE.svg";
-import dubai_ae_icon from "../../../public_images/DdiabiAE-icon.svg";
+import location_pin from "../../../public_images/icn-location-pin.svg";
+import news_pin from "../../../public_images/icn-news.svg";
 export default {
     title: 'Components/Sticky Footer',
     tags: ['autodocs'],
@@ -13,11 +13,7 @@ export default {
         hideMiddleSection: {
             control: { type: 'boolean' },
             description: 'Hides the middle section of the footer',
-        },
-        onclick: {
-            control: { type: 'text' },
-            description: 'event handler for button',
-        },
+        }
     },
     component: 'dda-sticky-footer',
     parameters: {
@@ -28,116 +24,104 @@ export default {
         },
     },
 };
-const Template = args => `
-  <dda-sticky-footer
-    happiness-icon-href="${args.happinessIconHref}"
-    happiness-icon-id="${args.happinessIconId}"
-    happiness-icon-src="${args.happinessIconSrc}"
-    happiness-icon-alt="${args.happinessIconAlt}"
-    happiness-icon-tooltip="${args.happinessIconTooltip}"
-    happiness-icon-click="${args.happinessIconClick}"
-
-    accessibility-icon-href="${args.accessibilityIconHref}"
-    accessibility-icon-Id="${args.accessibilityIconId}"
-    accessibility-icon-src="${args.accessibilityIconSrc}"
-    accessibility-icon-alt="${args.accessibilityIconAlt}"
-    accessibility-icon-tooltip="${args.accessibilityIconTooltip}"
-    accessibility-icon-click="${args.accessibilityIconClick}"
-
-    services-icon-href="${args.servicesIconHref}"
-    services-icon-Id="${args.servicesIconId}"
-    services-icon-src="${args.servicesIconSrc}"
-    services-icon-alt="${args.servicesIconAlt}"
-    services-icon-tooltip="${args.servicesIconTooltip}"
-    services-icon-text="${args.servicesIconText}"
-    services-icon-click="${args.servicesIconClick}"
-
-    hide-middle-section="${args.hideMiddleSection}"
-    middle-link='${JSON.stringify(args.middleLink)}'
-
-    right-link='${JSON.stringify(args.rightLink)}'
-
-    dubaiae-icon-href="${args.dubaiaeIconHref}"
-    dubaiae-icon-Id="${args.dubaiaeIconId}"
-    dubaiae-icon-src="${args.dubaiaeIconSrc}"
-    dubaiae-icon-small-src="${args.dubaiaeIconSmallSrc}"
-    dubaiae-icon-alt="${args.dubaiaeIconAlt}"
-    dubaiae-icon-tooltip="${args.dubaiaeIconTooltip}"
-    dubaiae-icon-on-click="${args.dubaiaeIconOnClick}"
-
-    ai-icon-href="${args.aiIconHref}"
-    ai-icon-Id="${args.aiIconId}"
-    ai-icon-src="${args.aiIconSrc}"
-    ai-icon-alt="${args.aiIconAlt}"
-    ai-icon-tooltip="${args.aiIconTooltip}"
-    ai-icon-on-click="${args.aiIconOnClick}"
-
-    chat-icon-href="${args.chatIconHref}"
-    chat-icon-Id="${args.chatIconId}"
-    chat-icon-src="${args.chatIconSrc}"
-    chat-icon-alt="${args.chatIconAlt}"
-    chat-icon-tooltip="${args.chatIconTooltip}"
-    chat-icon-on-click="${args.chatIconClick}"
-
-    more-icon-family="${args.moreIconFamily}"
-    more-icon="${args.moreIcon}"
-    
-  ></dda-sticky-footer>
+const Template = args => `
+  <dda-sticky-footer
+    happiness-icon-href="${args.happinessIconHref}"
+    happiness-icon-src="${args.happinessIconSrc}"
+    happiness-icon-alt="${args.happinessIconAlt}"
+    happiness-icon-tooltip="${args.happinessIconTooltip}"
+
+    accessibility-icon-href="${args.accessibilityIconHref}"
+    accessibility-icon-src="${args.accessibilityIconSrc}"
+    accessibility-icon-alt="${args.accessibilityIconAlt}"
+    accessibility-icon-tooltip="${args.accessibilityIconTooltip}"
+
+    services-icon-href="${args.servicesIconHref}"
+    services-icon-src="${args.servicesIconSrc}"
+    services-icon-alt="${args.servicesIconAlt}"
+    services-icon-tooltip="${args.servicesIconTooltip}"
+    services-icon-text="${args.servicesIconText}"
+
+    first-logo-href="${args.firstLogoHref}"
+    first-logo-src="${args.firstLogoSrc}"
+    first-logo-alt="${args.firstLogoAlt}"
+    first-logo-tooltip="${args.firstLogoTooltip}"
+
+    second-logo-href="${args.secondLogoHref}"
+    second-logo-src="${args.secondLogoSrc}"
+    second-logo-alt="${args.secondLogoAlt}"
+    second-logo-tooltip="${args.secondLogoTooltip}"
+
+    third-logo-href="${args.thirdLogoHref}"
+    third-logo-src="${args.thirdLogoSrc}"
+    third-logo-alt="${args.thirdLogoAlt}"
+    third-logo-tooltip="${args.thirdLogoTooltip}"
+
+    location-button-href="${args.locationButtonHref}"
+    location-button-text="${args.locationButtonText}"
+    location-button-icon="${args.locationButtonIcon}"
+    location-logo-src="${args.locationButtonSrc}"
+
+    news-button-href="${args.newsButtonHref}"
+    news-button-text="${args.newsButtonText}"
+    news-button-icon="${args.newsButtonIcon}"
+    news-logo-src="${args.newsButtonSrc}"
+
+    ai-icon-href="${args.aiIconHref}"
+    ai-icon-src="${args.aiIconSrc}"
+    ai-icon-alt="${args.aiIconAlt}"
+    ai-icon-tooltip="${args.aiIconTooltip}"
+
+    chat-icon-href="${args.chatIconHref}"
+    chat-icon-src="${args.chatIconSrc}"
+    chat-icon-alt="${args.chatIconAlt}"
+    chat-icon-tooltip="${args.chatIconTooltip}"
+
+    hide-middle-section="${args.hideMiddleSection}"
+  ></dda-sticky-footer>
 `;
 export const Default = Template.bind({});
 Default.args = {
-    happinessIconHref: 'javascript:void(0)',
-    happinessIconId: 'Happiness',
+    happinessIconHref: '#',
     happinessIconSrc: happy_icon,
     happinessIconAlt: 'Happiness',
     happinessIconTooltip: 'Happiness',
-    happinessIconClick: "console.log('Happiness icon clicked')",
-    accessibilityIconHref: 'javascript:void(0)',
-    accessibilityIconId: 'uggestionsComplaints',
+    accessibilityIconHref: '#',
     accessibilityIconSrc: accessibility_icon,
     accessibilityIconAlt: 'Suggestions and complaints',
     accessibilityIconTooltip: 'Suggestions & complaints',
-    accessibilityIconClick: "console.log('Suggestion AE icon clicked')",
-    servicesIconHref: 'javascript:void(0)',
-    servicesIconId: 'footerServices',
+    servicesIconHref: '#',
     servicesIconSrc: grid_view,
     servicesIconAlt: 'Services',
     servicesIconTooltip: 'Services',
     servicesIconText: 'Services',
-    servicesIconClick: "console.log('Services icon clicked')",
-    hideMiddleSection: false,
-    middleLink: [
-        { LogoTooltip: "Middlelink", href: "javascript:void(0)", src: digital_logo, alt: "DDA" },
-        { LogoTooltip: "Middlelink", href: "javascript:void(0)", src: digital_logo, alt: "DDA" },
-        { LogoTooltip: "Middlelink", href: "javascript:void(0)", src: digital_logo, alt: "DDA" },
-    ],
-    rightLink: [
-        { RightLinkTooltip: "Survey", href: "javascript:void(0)", title: "Survey", itemId: "itemID", ariaLabel: "Survey", LinkText: "Survey", IconFamily: "material-icons", IconName: "poll" },
-        { RightLinkTooltip: "Locations", href: "javascript:void(0)", title: "Locations", itemId: "itemID", ariaLabel: "Locations", LinkText: "Locations", IconFamily: "material-icons", IconName: "location_on" },
-        { RightLinkTooltip: "News Room", href: "javascript:void(0)", title: "News Room", itemId: "itemID", ariaLabel: "News Room", LinkText: "News Room", IconFamily: "material-icons", IconName: "feed" },
-        { RightLinkTooltip: "Contact Us", href: "javascript:void(0)", title: "Contact Us", itemId: "itemID", ariaLabel: "Contact Us", LinkText: "Contact Us", IconFamily: "material-icons", IconName: "mail" },
-    ],
-    dubaiaeIconHref: 'javascript:void(0)',
-    dubaiaeIconId: 'dubaiAEID',
-    dubaiaeIconSrc: dubai_ae,
-    dubaiaeIconSmallSrc: dubai_ae_icon,
-    dubaiaeIconAlt: 'dubai-ae',
-    dubaiaeIconTooltip: 'dubai.ae',
-    dubaiaeIconOnClick: "console.log('Dubai AE icon clicked')",
-    aiIconHref: 'javascript:void(0)',
-    aiIconId: 'aiIconID',
+    firstLogoHref: '#',
+    firstLogoSrc: digital_logo,
+    firstLogoAlt: 'Logo 1',
+    firstLogoTooltip: 'Logo 1',
+    secondLogoHref: '#',
+    secondLogoSrc: digital_logo,
+    secondLogoAlt: 'Logo 1',
+    secondLogoTooltip: 'Logo 1',
+    thirdLogoHref: '#',
+    thirdLogoSrc: digital_logo,
+    thirdLogoAlt: 'Logo 3',
+    thirdLogoTooltip: 'Logo 3',
+    locationButtonHref: '#',
+    locationButtonText: 'Location',
+    locationButtonSrc: location_pin,
+    locationButtonIcon: 'location_on',
+    newsButtonHref: '#',
+    newsButtonText: 'News',
+    newsButtonSrc: news_pin,
+    newsButtonIcon: 'news_on',
+    aiIconHref: '#',
     aiIconSrc: digital_ai,
     aiIconAlt: 'Digital AI',
     aiIconTooltip: 'Digital AI',
-    aiIconOnClick: "console.log('AI icon clicked')",
-    chatIconHref: 'javascript:void(0)',
-    chatIconId: 'chatID',
+    chatIconHref: '#',
     chatIconSrc: chat_icn,
     chatIconAlt: 'Online Chat',
     chatIconTooltip: 'Online Chat',
-    chatIconOnClick: "console.log('Chat icon clicked')",
-    moreIconFamily: 'material-icons',
-    moreIcon: 'more_horiz',
-    chatIconClick: "console.log('Chat Icon clicked')",
+    hideMiddleSection: false,
 };
-//# sourceMappingURL=dda-sticky-footer.stories.js.map

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

@@ -1,165 +1,120 @@
-.dda-tabs-container {
-  display: inline-flex;
-  gap:1px;
-}
-
-.dda-tab-item {
-  min-height: 48px;
-  background: transparent;
-  display: inline-flex;
-  font-size: var(--font-body);
-  color: var(--dda-on-surface-0);
-  font-weight: var(--font-weight-regular);
-  gap: 8px;
-  align-items: center;
-  border: 0;
-  border-radius: 8px;
-  padding: 5px 16px;
-  cursor: pointer;
-  position: relative;
-  /* transition: all 0.25s ease-in-out; */
-}
-
-.light-mode .dda-tab-item{
-  color: var(--dda-neutral-0);
-}
-
-.dda-tab-item i {
-  font-size: 22px;
-  color: var(--dda-neutral-variant-30);
-}
-
-/* .dda-tab-item.active span,
-.dda-tab-item:hover span {
-  font-weight: var(--dda-fw-500);
-} */
-
-.dda-tab-default .dda-tab-item.active,
-.dda-tab-default .dda-tab-item:hover {
-  background: var(--dda-neutral-variant-94);
-  color: var(--dda-color-primary-40);
-}
-
-.light-mode.dda-tab-default .dda-tab-item.active,
-.light-mode.dda-tab-default .dda-tab-item:hover {
-  color: var(--dda-primary-40);
-}
-
-.dda-tab-default .dda-tab-item.active i,
-.dda-tab-default .dda-tab-item:hover i {
-  color: var(--dda-color-primary-40);
-}
-
-.dda-tab-filed .dda-tab-item.active,
-.dda-tab-filed .dda-tab-item:hover {
-  background: var(--dda-color-primary-40);
-  color: var(--dda-neutral-100);
-}
-
-.light-mode.dda-tab-filed .dda-tab-item.active,
-.light-mode.dda-tab-filed .dda-tab-item:hover {
-  background: var(--dda-primary-40);
-}
-
-.dda-tab-filed .dda-tab-item.active i,
-.dda-tab-filed .dda-tab-item:hover i {
-  color: var(--dda-neutral-100);
-}
-
-.dda-tab-underline .dda-tab-item {
-  border-bottom: solid 1px var(--dda-neutral-90);
-  border-radius: 0px;
-}
-
-
-.dda-tab-underline .dda-tab-item::after,
-.dda-tab-underline-filled .dda-tab-item::after {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  width: 0;
-  height: 4px;
-  background-color: var(--dda-color-primary-40);
-  border-radius: 8px 8px 0px 0px;
-  transform: translateX(-50%);
-  /* transition: all 0.25s ease-in-out; */
-}
-.light-mode.dda-tab-underline .dda-tab-item::after,
-.light-mode.dda-tab-underline-filled .dda-tab-item::after{
-  background-color: var(--dda-primary-40);
-}
-.dda-tab-underline .dda-tab-item:hover::after,
-.dda-tab-underline .dda-tab-item.active::after,
-.dda-tab-underline-filled .dda-tab-item:hover::after,
-.dda-tab-underline-filled .dda-tab-item.active::after{
-  width: calc(100% - 32px);
-}
-
-.dda-tab-underline .dda-tab-item.active,
-.dda-tab-underline .dda-tab-item.active i,
-.dda-tab-underline-filled .dda-tab-item.active,
-.dda-tab-underline-filled .dda-tab-item.active i,
-.dda-tab-underline .dda-tab-item:hover,
-.dda-tab-underline .dda-tab-item:hover i,
-.dda-tab-underline-filled .dda-tab-item:hover,
-.dda-tab-underline-filled .dda-tab-item:hover i {
-  color: var(--dda-color-primary-40);
-}
-
-.light-mode.dda-tab-underline .dda-tab-item.active,
-.light-mode.dda-tab-underline .dda-tab-item.active i,
-.light-mode.dda-tab-underline-filled .dda-tab-item.active,
-.light-mode.dda-tab-underline-filled .dda-tab-item.active i,
-.light-mode.dda-tab-underline .dda-tab-item:hover,
-.light-mode.dda-tab-underline .dda-tab-item:hover i,
-.light-mode.dda-tab-underline-filled .dda-tab-item:hover,
-.light-mode.dda-tab-underline-filled .dda-tab-item:hover i {
-  color: var(--dda-primary-40);
-}
-
-.dda-tab-underline-filled .dda-tab-item.active,
-.dda-tab-underline-filled .dda-tab-item:hover {
-  background: var(--dda-neutral-variant-94);
-}
-
-.dda-tabs-container.dda-vertical-tab{
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-.dda-tabs-container.dda-vertical-tab button{
-  width: 100%;
-  text-align: start;
-}
-
-
-.dda-tab-underline.dda-vertical-tab .dda-tab-item::after,
-.dda-tab-underline-filled.dda-vertical-tab .dda-tab-item::after {
-  top: 50%;
-  inset-inline-start: 0;
-  width: 4px;
-  height: 0;
-  border-radius: 0px 8px 8px 0px;
-  transform: translateY(-50%);
-}
-:root[dir='rtl'] .dda-tab-underline.dda-vertical-tab .dda-tab-item::after,
-:root[dir='rtl'] .dda-tab-underline-filled.dda-vertical-tab .dda-tab-item::after{
-  border-radius: 8px 0px 0px 8px;
-}
-.dda-tab-underline.dda-vertical-tab .dda-tab-item:hover::after,
-.dda-tab-underline.dda-vertical-tab .dda-tab-item.active::after,
-.dda-tab-underline-filled.dda-vertical-tab .dda-tab-item:hover::after,
-.dda-tab-underline-filled.dda-vertical-tab .dda-tab-item.active::after {
-  height: calc(100% - 14px);
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .dda-tab-item {
-    transition: all 0.25s ease-in-out;
-  }
-  .dda-tab-underline .dda-tab-item::after,
-  .dda-tab-underline-filled .dda-tab-item::after {
-    transition: all 0.25s ease-in-out;
-  }
+.dda-tabs-container {
+  display: inline-flex;
+}
+
+.dda-tab-item {
+  background: transparent;
+  display: inline-flex;
+  font-size: 16px;
+  color: var(--dda-on-surface-0);
+  gap: 6px;
+  align-items: center;
+  border: 0;
+  border-radius: 8px;
+  padding: 10px 16px;
+  cursor: pointer;
+  position: relative;
+  transition: all 0.25s ease-in-out;
+}
+
+.light-mode .dda-tab-item{
+  color: var(--dda-neutral-0);
+}
+
+.dda-tab-item i {
+  font-size: 22px;
+  color: var(--dda-neutral-variant-30);
+}
+
+.dda-tab-item.active span,
+.dda-tab-item:hover span {
+  font-weight: var(--dda-fw-500);
+}
+
+.dda-tab-default .dda-tab-item.active,
+.dda-tab-default .dda-tab-item:hover {
+  background: var(--dda-neutral-variant-94);
+  color: var(--dda-color-primary-40);
+}
+
+.light-mode.dda-tab-default .dda-tab-item.active,
+.light-mode.dda-tab-default .dda-tab-item:hover {
+  color: var(--dda-primary-40);
+}
+
+.dda-tab-default .dda-tab-item.active i,
+.dda-tab-default .dda-tab-item:hover i {
+  color: var(--dda-color-primary-40);
+}
+
+.dda-tab-filed .dda-tab-item.active,
+.dda-tab-filed .dda-tab-item:hover {
+  background: var(--dda-color-primary-40);
+  color: var(--dda-neutral-100);
+}
+
+.light-mode.dda-tab-filed .dda-tab-item.active,
+.light-mode.dda-tab-filed .dda-tab-item:hover {
+  background: var(--dda-primary-40);
+}
+
+.dda-tab-filed .dda-tab-item.active i,
+.dda-tab-filed .dda-tab-item:hover i {
+  color: var(--dda-neutral-100);
+}
+
+.dda-tab-underline {
+  border-bottom: solid 1px var(--dda-neutral-90);
+}
+
+
+.dda-tab-underline .dda-tab-item::after,
+.dda-tab-underline-filled .dda-tab-item::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 0;
+  height: 4px;
+  background-color: var(--dda-color-primary-40);
+  border-radius: 8px 8px 0px 0px;
+  transform: translateX(-50%);
+  transition: all 0.25s ease-in-out;
+}
+.light-mode.dda-tab-underline .dda-tab-item::after,
+.light-mode.dda-tab-underline-filled .dda-tab-item::after{
+  background-color: var(--dda-primary-40);
+}
+.dda-tab-underline .dda-tab-item:hover::after,
+.dda-tab-underline .dda-tab-item.active::after,
+.dda-tab-underline-filled .dda-tab-item:hover::after,
+.dda-tab-underline-filled .dda-tab-item.active::after{
+  width: calc(100% - 32px);
+}
+
+.dda-tab-underline .dda-tab-item.active,
+.dda-tab-underline .dda-tab-item.active i,
+.dda-tab-underline-filled .dda-tab-item.active,
+.dda-tab-underline-filled .dda-tab-item.active i,
+.dda-tab-underline .dda-tab-item:hover,
+.dda-tab-underline .dda-tab-item:hover i,
+.dda-tab-underline-filled .dda-tab-item:hover,
+.dda-tab-underline-filled .dda-tab-item:hover i {
+  color: var(--dda-color-primary-40);
+}
+
+.light-mode.dda-tab-underline .dda-tab-item.active,
+.light-mode.dda-tab-underline .dda-tab-item.active i,
+.light-mode.dda-tab-underline-filled .dda-tab-item.active,
+.light-mode.dda-tab-underline-filled .dda-tab-item.active i,
+.light-mode.dda-tab-underline .dda-tab-item:hover,
+.light-mode.dda-tab-underline .dda-tab-item:hover i,
+.light-mode.dda-tab-underline-filled .dda-tab-item:hover,
+.light-mode.dda-tab-underline-filled .dda-tab-item:hover i {
+  color: var(--dda-primary-40);
+}
+
+.dda-tab-underline-filled .dda-tab-item.active,
+.dda-tab-underline-filled .dda-tab-item:hover {
+  background: var(--dda-neutral-variant-94);
 }