@orangesk/orange-design-system 2.0.0-beta.30 → 2.0.0-beta.32

package/src/components/Megamenu/data.ts

@@ -0,0 +1,231 @@
+export type MenuItem = {
+  label: string;
+  href?: string;
+  isLarge?: boolean;
+  tag?: string;
+};
+
+type MenuGroup = {
+  id: string;
+  heading: string;
+  items: MenuItem[];
+};
+
+export type MenuSection = {
+  id: string;
+  label: string;
+  featured: MenuGroup;
+  columns: MenuGroup[][];
+};
+
+export const menuSections: MenuSection[] = [
+  {
+    id: "volania",
+    label: "Volania",
+    featured: {
+      id: "odporucane-sluzby",
+      heading: "Odporúčané služby",
+      items: [
+        { label: "Paušály", isLarge: true },
+        { label: "Prima Voľba", isLarge: true },
+        { label: "Roaming", isLarge: true },
+      ],
+    },
+    columns: [
+      [
+        {
+          id: "pausaly",
+          heading: "Paušály",
+          items: [
+            { label: "Prehľad paušálov" },
+            { label: "Chcem nové číslo" },
+            { label: "Yoxo paušál", tag: "Novinka" },
+          ],
+        },
+        {
+          id: "s-kreditom",
+          heading: "Volania s kreditom",
+          items: [
+            { label: "Prima Voľba" },
+            { label: "Prima Kids" },
+            { label: "FunFón" },
+          ],
+        },
+        {
+          id: "zahranicie",
+          heading: "Zahraničie",
+          items: [
+            { label: "Roaming" },
+            { label: "Cestovateľské balíky" },
+            { label: "Volania do zahraničia" },
+            { label: "Regulovaný roaming" },
+          ],
+        },
+      ],
+      [
+        {
+          id: "nase-sluzby",
+          heading: "Ste náš zákazník?",
+          items: [
+            { label: "Chcem zmeniť paušál" },
+            { label: "Dobiť kredit" },
+            { label: "Predĺžiť služby" },
+            { label: "Chcem nový telefón" },
+            { label: "Navzájom zadarmo" },
+            { label: "Orange Svojim" },
+            { label: "Odporučte Orange" },
+            { label: "Ostatné služby" },
+          ],
+        },
+      ],
+    ],
+  },
+  {
+    id: "internet-tv",
+    label: "Internet, TV",
+    featured: {
+      id: "odporucane-sluzby",
+      heading: "Odporúčané služby",
+      items: [
+        { label: "Internet na doma", isLarge: true },
+        { label: "Mobilný internet", isLarge: true },
+        { label: "Televízia", isLarge: true },
+        { label: "Internet + TV", isLarge: true },
+      ],
+    },
+    columns: [
+      [
+        {
+          id: "pausaly",
+          heading: "Internet",
+          items: [
+            { label: "Prehľad internetu" },
+            { label: "Mobilný internet" },
+            { label: "Bezpečný internet so sebou" },
+            { label: "Domáca linka k internetu" },
+          ],
+        },
+        {
+          id: "televizia",
+          heading: "Televízia",
+          items: [
+            { label: "Najlepšia TV na doma" },
+            { label: "TV cez satelit" },
+            { label: "TV cez internet" },
+            { label: "Novinky na Orange TV" },
+          ],
+        },
+        {
+          id: "internet-televizia",
+          heading: "Internet + televízia",
+          items: [
+            { label: "Ponuka Love" },
+            { label: "Výhodný pár zariadení" },
+            { label: "Volania do zahraničia" },
+            { label: "Regulovaný roaming" },
+          ],
+        },
+      ],
+      [
+        {
+          id: "nase-sluzby",
+          heading: "Ste náš zákazník?",
+          items: [
+            { label: "Predĺžiť služby" },
+            { label: "Nový internet" },
+            { label: "Nová televízia" },
+            { label: "Odporučte Orange" },
+          ],
+        },
+      ],
+    ],
+  },
+  {
+    id: "telefony-zariadenia",
+    label: "Telefóny a zariadenia",
+    featured: {
+      id: "odporucane-sluzby",
+      heading: "Odporúčané služby",
+      items: [
+        { label: "iPhone 15", isLarge: true },
+        { label: "iPhone 15 Pro", isLarge: true },
+        { label: "Samsung Z Fold", isLarge: true },
+        { label: "Motorola", isLarge: true },
+        { label: "Oppo", isLarge: true },
+      ],
+    },
+    columns: [
+      [
+        {
+          id: "telefony",
+          heading: "Telefóny",
+          items: [
+            { label: "Apple" },
+            { label: "Samsung" },
+            { label: "Huawei" },
+            { label: "Honor" },
+            { label: "Motorola" },
+            { label: "Oppo" },
+          ],
+        },
+        {
+          id: "tablety-a-notebooky",
+          heading: "Tablety a notebooky",
+          items: [
+            { label: "Lenovo" },
+            { label: "Samsung" },
+            { label: "Honor" },
+            { label: "Apple" },
+            { label: "Asus" },
+          ],
+        },
+        {
+          id: "sikovne-zariadenia",
+          heading: "Šikovné zariadenia",
+          items: [
+            { label: "Smart hodinky" },
+            { label: "Smart domácnosť" },
+            { label: "Smart TV" },
+            { label: "Herné konzoly" },
+          ],
+        },
+      ],
+      [
+        {
+          id: "orange-akcie",
+          heading: "Orange akcie",
+          items: [
+            { label: "Samsung" },
+            { label: "Výhodné ponuky" },
+            { label: "Zľavy na telefóny" },
+            { label: "Dopredaj zariadení" },
+          ],
+        },
+      ],
+    ],
+  },
+];
+
+export const searchTerms = [
+  "Dobitie kreditu",
+  "Nedostupnosť služieb",
+  "Faktúry",
+  "Zdieľanie dát",
+  "Prečerpané dáta",
+  "Elektronická faktúra",
+  "Prvá pomoc internet",
+  "Nastavenie zariadení a sim kariet",
+  "Pevny internet do domacnosti",
+  "Dátový roaming",
+  "Nákup online",
+  "Telemarketing",
+];
+
+export const searchResultItems = [
+  "apple",
+  "apple hodinky",
+  "apple iphone",
+  "apple 16",
+  "apple pro",
+  "apple watch",
+];

package/src/components/Megamenu/ids.ts

@@ -0,0 +1,35 @@
+export type MegamenuVariant = "main" | "blog";
+
+export type MegamenuIds = {
+  searchDropdownId: string;
+  searchInputDesktopId: string;
+  searchInputMobileId: string;
+  mobileMainPanelId: string;
+  mobileMainTitleId: string;
+  myOrangePanelId: string;
+  myOrangeTitleId: string;
+};
+
+export const getMegamenuIds = (variant: MegamenuVariant): MegamenuIds => {
+  if (variant === "blog") {
+    return {
+      searchDropdownId: "megamenu-blog-search",
+      searchInputDesktopId: "megamenu-blog-search-input",
+      searchInputMobileId: "megamenu-blog-mobile-search-input",
+      mobileMainPanelId: "megamenu-blog-mobile-main",
+      mobileMainTitleId: "mobile-blog-menu-title",
+      myOrangePanelId: "megamenu-blog-mobile-my-orange",
+      myOrangeTitleId: "mobile-blog-my-orange-title",
+    };
+  }
+
+  return {
+    searchDropdownId: "megamenu-search",
+    searchInputDesktopId: "megamenu-search-input",
+    searchInputMobileId: "megamenu-mobile-search-input",
+    mobileMainPanelId: "megamenu-mobile-main",
+    mobileMainTitleId: "mobile-menu-title",
+    myOrangePanelId: "megamenu-mobile-my-orange",
+    myOrangeTitleId: "mobile-my-orange-title",
+  };
+};

package/src/components/Megamenu/styles/mixins.scss

@@ -1,15 +1,20 @@
+@use "sass:map";
 @use "../../../styles/tools/convert";
 @use "../../../styles/tokens/color";
+@use "../../../styles/tokens/tag-colors";
 @use "../../../styles/tokens/base";
 @use "../../../styles/tokens/breakpoint";
 @use "../../../styles/tools/generate";
+@use "../../../styles/tokens/space";
 @use "../../../styles/tools/visibility" as visibility;
+@use "../../../styles/typography/config" as typographyConfig;
 @use "../../Container/styles/mixins" as container;
 @use "../../Accordion/styles/mixins" as accordion;
 @use "../../Forms/TextInput/styles/mixins" as input;
 @use "../../Forms/TextInput/styles/config" as inputConfig;
 @use "../../Tag/styles/mixins" as tag;
 @use "../../Tag/styles/config" as tagConfig;
+@use "../../Button/styles/mixins" as button;
 @use "../../../styles/typography/mixins" as typography;
 
 @use "./config";
@@ -27,6 +32,10 @@
     display: none !important;
   }
 
+  .mt-none {
+    margin-top: 0 !important;
+  }
+
   ul {
     @include typography.list-unstyled();
     margin-bottom: convert.to-rem(30px);
@@ -43,14 +52,15 @@
   a {
     color: var(--color-text-default);
     font-weight: 700;
-    text-decoration: none;
     font-size: inherit;
+    text-decoration: underline;
+    text-underline-offset: convert.to-rem(2px);
+    text-decoration-thickness: 1px;
 
     &:hover,
     &:focus,
     &:active {
-      text-decoration: underline;
-      text-underline-offset: convert.to-rem(4px);
+      color: var(--color-text-accent);
     }
 
     &:focus-visible {
@@ -72,6 +82,19 @@
     @include base.focusring;
   }
 
+  hr {
+    margin-top: convert.to-rem(30px);
+    margin-bottom: convert.to-rem(30px);
+    border: 0;
+    border-top: 1px solid var(--color-border-subtle);
+    width: 100%;
+
+    @include breakpoint.get("xs", "down") {
+      margin-top: convert.to-rem(15px);
+      margin-bottom: convert.to-rem(15px);
+    }
+  }
+
   * {
     box-sizing: border-box;
     letter-spacing: convert.to-rem(-0.1px);
@@ -88,12 +111,22 @@
   @each $name, $value in color.$colors-light {
     --color-#{$name}: #{$value};
   }
+
+  // Megamenu ships as a standalone bundle and cannot rely on global tag token variables.
+  @each $name, $value in tag-colors.$tag-colors-light {
+    --#{$name}: #{$value};
+  }
 }
 
 @mixin dark-vars {
   @each $name, $value in color.$colors-dark {
     --color-#{$name}: #{$value};
   }
+
+  // Keep tag colors available in dark mode as well.
+  @each $name, $value in tag-colors.$tag-colors-dark {
+    --#{$name}: #{$value};
+  }
 }
 
 @mixin base {
@@ -167,6 +200,10 @@
   align-items: center;
   gap: convert.to-rem(30px);
 
+  a {
+    text-decoration: none;
+  }
+
   @include breakpoint.get("md", "down") {
     gap: convert.to-rem(20px);
   }
@@ -195,21 +232,35 @@
   gap: convert.to-rem(15px);
 }
 
+@mixin nav-mobile-locale {
+  padding: convert.to-rem(15px) 0 !important;
+  margin-bottom: 0px !important;
+}
+
 @mixin nav-item {
   display: flex;
   height: 100%;
 }
 
+@mixin nav-item-lead {
+  margin-right: convert.to-rem(10px);
+}
+
 @mixin nav-dropdown {
   position: absolute;
   top: calc(100% + 1px);
   left: 0;
   width: 100%;
   background-color: var(--color-surface-primary);
-  padding: convert.to-rem(60px) 0 convert.to-rem(60px) 0;
+  padding: convert.to-rem(20px) 0;
   display: none;
   opacity: 0;
   z-index: 15;
+
+  &.is-spaced {
+    padding-top: convert.to-rem(50px);
+    padding-bottom: convert.to-rem(50px);
+  }
 }
 
 @mixin nav-logo {
@@ -261,9 +312,45 @@
   &:focus,
   &:active,
   &.is-active {
+    color: var(--color-text-default) !important;
     box-shadow: config.$active-line;
+  }
+}
+
+@mixin nav-link-locale {
+  &:hover,
+  &:focus,
+  &:active,
+  &.is-active {
+    box-shadow: none;
     text-decoration: none !important;
   }
+
+  &.is-active {
+    color: var(--color-border-accent);
+  }
+}
+
+@mixin nav-link-no-line {
+  &:hover,
+  &:focus,
+  &:active,
+  &.is-active {
+    color: var(--color-text-accent) !important;
+    box-shadow: none;
+  }
+}
+
+@mixin divider {
+  margin-top: convert.to-rem(30px);
+  margin-bottom: convert.to-rem(30px);
+  border: 0;
+  border-top: 1px solid var(--color-border-subtle);
+
+  @include breakpoint.get("xs", "down") {
+    margin-top: convert.to-rem(15px);
+    margin-bottom: convert.to-rem(15px);
+  }
 }
 
 @mixin nav-cart-icon {
@@ -309,6 +396,22 @@
     outline: 2px solid var(--color-border-accent);
     outline-offset: 2px;
   }
+
+  &--toggle {
+    .megamenu__nav-button-icon-close {
+      display: none;
+    }
+
+    &.is-active {
+      .megamenu__nav-button-icon-open {
+        display: none;
+      }
+
+      .megamenu__nav-button-icon-close {
+        display: inline-flex;
+      }
+    }
+  }
 }
 
 @mixin nav-button-indicator {
@@ -355,10 +458,10 @@
 @mixin subnav-item {
   display: flex;
   gap: convert.to-rem(10px);
-  margin-bottom: convert.to-rem(10px) !important;
+  margin-bottom: convert.to-rem(15px) !important;
 
   &:last-child {
-    margin-bottom: 0;
+    margin-bottom: 0 !important;
   }
 }
 
@@ -431,8 +534,10 @@
   }
 
   #{config.$class-root}__container {
-    padding-left: convert.to-rem(20px);
-    padding-right: convert.to-rem(20px);
+    @include breakpoint.get("md") {
+      padding-left: convert.to-rem(20px);
+      padding-right: convert.to-rem(20px);
+    }
   }
 }
 
@@ -475,7 +580,62 @@
 }
 
 @mixin mobile-body {
-  padding-top: convert.to-rem(15px);
+  padding: convert.to-rem(15px) 0 convert.to-rem(30px);
+}
+
+@mixin mobile-account {
+  text-align: center;
+  padding-top: convert.to-rem(10px);
+}
+
+@mixin mobile-account-avatar {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: convert.to-rem(12px);
+}
+
+@mixin mobile-account-name {
+  @include generate.responsive-css-map(map.get(typographyConfig.$headings, 4));
+  margin-top: 0;
+  margin-bottom: convert.to-rem(5px);
+  font-weight: 700;
+}
+
+@mixin mobile-account-phone {
+  font-size: convert.to-rem(16px);
+  line-height: convert.to-rem(18px);
+  margin-top: 0;
+  margin-bottom: convert.to-rem(5px);
+}
+
+@mixin mobile-account-logout {
+  display: inline-block;
+  text-decoration: underline;
+  text-underline-offset: convert.to-rem(4px);
+  margin-bottom: convert.to-rem(20px);
+  font-weight: 400 !important;
+}
+
+@mixin mobile-account-cta {
+  @include button.base();
+  @include button.layout();
+  @include button.size("default");
+  @include button.color("primary");
+  color: color.$white !important;
+  width: 100%;
+  justify-content: center;
+  margin-bottom: convert.to-rem(40px);
+  text-decoration: none !important;
+}
+
+@mixin mobile-account-links {
+  margin-top: convert.to-rem(30px);
+}
+
+@mixin mobile-account-link {
+  text-decoration: underline;
+  text-underline-offset: convert.to-rem(4px);
 }
 
 @mixin container {
@@ -501,8 +661,19 @@
   border-radius: convert.to-rem(20px);
   padding: convert.to-rem(30px);
 
+  a:hover,
+  a:focus {
+    text-decoration: underline;
+    text-underline-offset: convert.to-rem(2px);
+    text-decoration-thickness: 1px;
+  }
+
   @include breakpoint.get("md", "down") {
     padding: convert.to-rem(15px);
+
+    &:not(.is-highlighted) {
+      padding: 0;
+    }
   }
 }
 
@@ -517,6 +688,16 @@
   }
 }
 
+@mixin caption {
+  @include generate.css-map(typographyConfig.$caption, "default");
+  margin-top: 0;
+}
+
+@mixin caption-large {
+  @include generate.css-map(typographyConfig.$caption, "large");
+  margin-top: 0;
+}
+
 @mixin icon {
   fill: currentColor;
   display: inline-block;
@@ -604,17 +785,13 @@
 
 @mixin accordion {
   @include accordion.base;
-  margin-bottom: convert.to-rem(20px);
+  margin-bottom: 0px !important;
 }
 
 @mixin accordion-item {
   @include accordion.item;
-  border-top: none;
-  border-bottom: 1px solid var(--color-border-subtle);
-
-  &:last-child {
-    border-bottom: none;
-  }
+  border-top: none !important;
+  border-bottom: 1px solid var(--color-border-subtle) !important;
 }
 
 @mixin accordion-button {
@@ -652,6 +829,7 @@
   @include accordion.body;
   display: none;
   margin-bottom: 0;
+  margin-top: 0;
   padding: convert.to-rem(20px) 0 convert.to-rem(30px) 0;
 
   &.is-visible {
@@ -670,8 +848,14 @@
 @mixin input {
   @include input.base();
   @include input.states();
+  max-width: unset !important;
   margin-bottom: convert.to-rem(30px);
 
+  &:focus-visible {
+    outline-width: 2px !important;
+    outline-offset: -2px !important;
+  }
+
   @include breakpoint.get("md", "down") {
     margin-bottom: convert.to-rem(15px);
   }
@@ -691,6 +875,12 @@
   &--search-icon-with-placeholder {
     @include input.search-icon-with-placeholder();
   }
+
+  &--search-responsive {
+    @include breakpoint.get("lg") {
+      width: 50%;
+    }
+  }
 }
 
 @mixin tag {
@@ -749,6 +939,23 @@
   @include tag.button-transparent-disabled();
 }
 
+@mixin tag-orange {
+  @include tag.color("orange");
+
+  &:where(button) {
+    @include tag.button();
+    z-index: 2;
+  }
+
+  &:where(a) {
+    @include tag.button();
+    z-index: 2;
+    text-decoration: none !important;
+  }
+
+  @include tag.buttton-disabled();
+}
+
 @mixin list-gap-small {
   display: flex;
   flex-direction: column;