@orangesk/orange-design-system 3.3.1 → 3.5.0

package/src/components/Megamenu/data.ts

@@ -5,6 +5,29 @@ export type MenuItem = {
   tag?: string;
 };
 
+export type MegamenuTile = {
+  label: string;
+  href?: string;
+  icon: string;
+  tag?: string;
+  isActive?: boolean;
+};
+
+export const megamenuTiles: MegamenuTile[] = [
+  {
+    label: "Chcem nové číslo",
+    icon: "sim",
+    tag: "1 mesiac zadarmo",
+    isActive: true,
+  },
+  {
+    label: "Chcem preniesť číslo",
+    icon: "showroom-mobile-pro",
+    tag: "1 mesiac zadarmo",
+  },
+  { label: "Chcem zmeniť paušál", icon: "showroom-mobile-pro" },
+];
+
 type MenuGroup = {
   id: string;
   heading: string;
@@ -26,9 +49,10 @@ export const menuSections: MenuSection[] = [
       id: "odporucane-sluzby",
       heading: "Odporúčané služby",
       items: [
-        { label: "Paušály", isLarge: true },
-        { label: "Prima Voľba", isLarge: true },
+        { label: "Super paušály", isLarge: true },
+        { label: "Predplatené karty", isLarge: true },
         { label: "Roaming", isLarge: true },
+        { label: "Love", isLarge: true },
       ],
     },
     columns: [
@@ -38,8 +62,9 @@ export const menuSections: MenuSection[] = [
           heading: "Paušály",
           items: [
             { label: "Prehľad paušálov" },
-            { label: "Chcem nové číslo" },
-            { label: "Yoxo paušál", tag: "Novinka" },
+            { label: "Super paušály", tag: "Novinka" },
+            { label: "Yoxo paušál" },
+            { label: "Paušalík" },
           ],
         },
         {
@@ -51,14 +76,26 @@ export const menuSections: MenuSection[] = [
             { label: "FunFón" },
           ],
         },
+      ],
+      [
         {
           id: "zahranicie",
           heading: "Zahraničie",
           items: [
             { label: "Roaming" },
-            { label: "Cestovateľské balíky" },
+            { label: "Roamingové balíky" },
             { label: "Volania do zahraničia" },
-            { label: "Regulovaný roaming" },
+            { label: "Regulovaný roaming v EÚ" },
+            { label: "Cestovné poistenie" },
+          ],
+        },
+        {
+          id: "doplnkove-sluzby",
+          heading: "Doplnkové služby",
+          items: [
+            { label: "eWatch", tag: "Novinka" },
+            { label: "eSIM" },
+            { label: "Poistenie zariadení" },
           ],
         },
       ],
@@ -68,13 +105,10 @@ export const menuSections: MenuSection[] = [
           heading: "Ste náš zákazník?",
           items: [
             { label: "Chcem zmeniť paušál" },
+            { label: "Chcem predĺžiť služby" },
             { 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" },
+            { label: "Navzájom zadarmo" },
           ],
         },
       ],
@@ -105,6 +139,8 @@ export const menuSections: MenuSection[] = [
             { label: "Domáca linka k internetu" },
           ],
         },
+      ],
+      [
         {
           id: "televizia",
           heading: "Televízia",
@@ -115,6 +151,8 @@ export const menuSections: MenuSection[] = [
             { label: "Novinky na Orange TV" },
           ],
         },
+      ],
+      [
         {
           id: "internet-televizia",
           heading: "Internet + televízia",
@@ -125,8 +163,6 @@ export const menuSections: MenuSection[] = [
             { label: "Regulovaný roaming" },
           ],
         },
-      ],
-      [
         {
           id: "nase-sluzby",
           heading: "Ste náš zákazník?",
@@ -168,6 +204,8 @@ export const menuSections: MenuSection[] = [
             { label: "Oppo" },
           ],
         },
+      ],
+      [
         {
           id: "tablety-a-notebooky",
           heading: "Tablety a notebooky",
@@ -179,6 +217,8 @@ export const menuSections: MenuSection[] = [
             { label: "Asus" },
           ],
         },
+      ],
+      [
         {
           id: "sikovne-zariadenia",
           heading: "Šikovné zariadenia",
@@ -189,8 +229,6 @@ export const menuSections: MenuSection[] = [
             { label: "Herné konzoly" },
           ],
         },
-      ],
-      [
         {
           id: "orange-akcie",
           heading: "Orange akcie",

package/src/components/Megamenu/shared.tsx

@@ -0,0 +1,154 @@
+import cx from "classnames";
+import React from "react";
+import { BrandMark } from "./BrandMark";
+import {
+  CLASS_CONTAINER,
+  CLASS_MOBILE,
+  CLASS_MOBILE_OVERLAY,
+  CLASS_MOBILE_WRAPPER,
+  CLASS_NAV_BUTTON,
+  CLASS_NAV_DROPDOWN,
+  CLASS_NAV_LOGO,
+} from "./constants";
+import { Logo } from "./Logo";
+import { MegamenuIcon } from "./MegaMenuIcon";
+import { MegamenuSearchContent } from "./MegamenuSearchContent";
+
+export type MegamenuSearchState = {
+  hasSearchEmpty: boolean;
+  hasSearchFilled: boolean;
+  showSearchState: boolean;
+  searchValue: string;
+};
+
+type MegamenuLogoLinkProps = {
+  compactLogoOnly?: boolean;
+  href?: string;
+  title: string;
+  children?: React.ReactNode;
+};
+
+type MegamenuSearchDropdownProps = {
+  dropdownId: string;
+  inputId: string;
+  inputLabel: string;
+  searchValue: string;
+  hasSearchEmpty: boolean;
+  hasSearchFilled: boolean;
+  emptyStateLinkHref?: string;
+};
+
+type MegamenuCloseButtonProps = {
+  ariaLabel: string;
+  target: string;
+};
+
+type MegamenuMobilePanelProps = {
+  titleId: string;
+  panelId?: string;
+  target: string;
+  title: React.ReactNode;
+  overlayAriaLabel: string;
+  children: React.ReactNode;
+};
+
+export const getMegamenuSearchState = (
+  searchEmpty?: boolean,
+  searchFilled?: boolean,
+): MegamenuSearchState => {
+  const hasSearchEmpty = Boolean(searchEmpty);
+  const hasSearchFilled = Boolean(searchFilled);
+
+  return {
+    hasSearchEmpty,
+    hasSearchFilled,
+    showSearchState: hasSearchEmpty || hasSearchFilled,
+    searchValue: hasSearchEmpty ? "" : hasSearchFilled ? "apple" : "",
+  };
+};
+
+export const MegamenuLogoLink = ({
+  compactLogoOnly = false,
+  href = "/",
+  title,
+  children,
+}: MegamenuLogoLinkProps) => (
+  <a
+    href={href}
+    className={CLASS_NAV_LOGO}
+    aria-label={`${title} - Domovská stránka`}
+  >
+    {compactLogoOnly ? <Logo /> : <BrandMark />}
+    {children}
+  </a>
+);
+
+export const MegamenuSearchDropdown = ({
+  dropdownId,
+  inputId,
+  inputLabel,
+  searchValue,
+  hasSearchEmpty,
+  hasSearchFilled,
+  emptyStateLinkHref,
+}: MegamenuSearchDropdownProps) => (
+  <div className={cx(CLASS_NAV_DROPDOWN, "is-spaced")} id={dropdownId}>
+    <div className={CLASS_CONTAINER}>
+      <MegamenuSearchContent
+        inputId={inputId}
+        inputLabel={inputLabel}
+        searchValue={searchValue}
+        hasSearchEmpty={hasSearchEmpty}
+        hasSearchFilled={hasSearchFilled}
+        emptyStateLinkHref={emptyStateLinkHref}
+      />
+    </div>
+  </div>
+);
+
+export const MegamenuCloseButton = ({
+  ariaLabel,
+  target,
+}: MegamenuCloseButtonProps) => (
+  <button
+    type="button"
+    data-megamenu-close-button
+    data-megamenu-mobile-target={target}
+    className={CLASS_NAV_BUTTON}
+    aria-label={ariaLabel}
+  >
+    <MegamenuIcon name="close" width={20} height={20} aria-hidden="true" />
+  </button>
+);
+
+export const MegamenuMobilePanel = ({
+  titleId,
+  panelId,
+  target,
+  title,
+  overlayAriaLabel,
+  children,
+}: MegamenuMobilePanelProps) => (
+  <div
+    className={CLASS_MOBILE}
+    data-megamenu-mobile-panel={target}
+    id={panelId}
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby={titleId}
+    aria-hidden="true"
+  >
+    <span id={titleId} className="sr-only">
+      {title}
+    </span>
+    <button
+      aria-label={overlayAriaLabel}
+      className={CLASS_MOBILE_OVERLAY}
+      type="button"
+      data-megamenu-close-button
+      data-megamenu-mobile-target={target}
+    />
+
+    <div className={CLASS_MOBILE_WRAPPER}>{children}</div>
+  </div>
+);