@orangesk/orange-design-system 2.0.0-beta.8 → 2.0.0

package/src/components/Megamenu/constants.ts

@@ -9,12 +9,17 @@ export const CLASS_CARD = `${CLASS_ROOT}__card`;
 export const CLASS_NAV = `${CLASS_ROOT}__nav`;
 export const CLASS_NAV_VERTICAL = `${CLASS_ROOT}__nav--vertical`;
 export const CLASS_NAV_SPACE_SMALL = `${CLASS_ROOT}__nav--space-small`;
+export const CLASS_NAV_MOBILE_LOCALE = `${CLASS_ROOT}__nav--mobile-locale`;
 export const CLASS_NAV_ITEM = `${CLASS_ROOT}__nav-item`;
+export const CLASS_NAV_ITEM_LEAD = `${CLASS_ROOT}__nav-item--lead`;
 export const CLASS_NAV_ITEM_MAIN = `${CLASS_ROOT}__nav-item--main`;
 export const CLASS_NAV_LINK = `${CLASS_ROOT}__nav-link`;
+export const CLASS_NAV_LINK_LOCALE = `${CLASS_ROOT}__nav-link--locale`;
+export const CLASS_NAV_LINK_NO_LINE = `${CLASS_ROOT}__nav-link--no-line`;
 export const CLASS_NAV_CART_ICON = `${CLASS_ROOT}__nav-cart-icon`;
 export const CLASS_NAV_SPACER = `${CLASS_ROOT}__nav-spacer`;
 export const CLASS_NAV_ICON = `${CLASS_ROOT}__nav-icon`;
+export const CLASS_NAV_ICON_NO_GAP_MD_DOWN = `${CLASS_NAV_ICON}--no-gap-md-down`;
 export const CLASS_NAV_LOGO = `${CLASS_ROOT}__nav-logo`;
 export const CLASS_NAV_BUTTON = `${CLASS_ROOT}__nav-button`;
 export const CLASS_NAV_BUTTON_INDICATOR = `${CLASS_ROOT}__nav-button--indicator`;
@@ -26,6 +31,8 @@ export const CLASS_SPACER = `${CLASS_ROOT}-spacer`;
 export const CLASS_SPACER_SMALL = `${CLASS_ROOT}-spacer--small`;
 
 export const CLASS_TEXT_LARGE = `${CLASS_ROOT}__text--large`;
+export const CLASS_CAPTION = `${CLASS_ROOT}__caption`;
+export const CLASS_CAPTION_LARGE = `${CLASS_ROOT}__caption--large`;
 export const CLASS_HIDE_MD_DOWN = `${CLASS_ROOT}--hide-md-down`;
 export const CLASS_HIDE_LG_UP = `${CLASS_ROOT}--hide-lg-up`;
 export const CLASS_ALIGN_CENTER = `${CLASS_ROOT}--align-center`;
@@ -35,6 +42,14 @@ export const CLASS_MOBILE_OVERLAY = `${CLASS_ROOT}__mobile-overlay`;
 export const CLASS_MOBILE_WRAPPER = `${CLASS_ROOT}__mobile-wrapper`;
 export const CLASS_MOBILE_HEADER = `${CLASS_ROOT}__mobile-header`;
 export const CLASS_MOBILE_BODY = `${CLASS_ROOT}__mobile-body`;
+export const CLASS_MOBILE_ACCOUNT = `${CLASS_ROOT}__mobile-account`;
+export const CLASS_MOBILE_ACCOUNT_AVATAR = `${CLASS_ROOT}__mobile-account-avatar`;
+export const CLASS_MOBILE_ACCOUNT_NAME = `${CLASS_ROOT}__mobile-account-name`;
+export const CLASS_MOBILE_ACCOUNT_PHONE = `${CLASS_ROOT}__mobile-account-phone`;
+export const CLASS_MOBILE_ACCOUNT_LOGOUT = `${CLASS_ROOT}__mobile-account-logout`;
+export const CLASS_MOBILE_ACCOUNT_CTA = `${CLASS_ROOT}__mobile-account-cta`;
+export const CLASS_MOBILE_ACCOUNT_LINKS = `${CLASS_ROOT}__mobile-account-links`;
+export const CLASS_MOBILE_ACCOUNT_LINK = `${CLASS_ROOT}__mobile-account-link`;
 
 // Accordion classes for mobile menu
 export const CLASS_ACCORDION = `${CLASS_ROOT}__accordion`;
@@ -46,9 +61,15 @@ export const CLASS_ACCORDION_ICON = `${CLASS_ROOT}__accordion-icon`;
 export const CLASS_ACCORDION_BODY = `${CLASS_ROOT}__accordion-body`;
 
 export const CLASS_INPUT = `${CLASS_ROOT}__input`;
+export const CLASS_INPUT_WRAPPER = `${CLASS_ROOT}__input-wrapper`;
+export const CLASS_INPUT_WRAPPER_SEARCH_ICON_WITH_PLACEHOLDER = `${CLASS_ROOT}__input-wrapper--search-icon-with-placeholder`;
+export const CLASS_INPUT_WRAPPER_SEARCH_RESPONSIVE = `${CLASS_ROOT}__input-wrapper--search-responsive`;
 export const CLASS_INPUT_SEARCH_ICON_WITH_PLACEHOLDER = `${CLASS_ROOT}__input--search-icon-with-placeholder`;
+export const CLASS_INPUT_SEARCH_RESPONSIVE = `${CLASS_ROOT}__input--search-responsive`;
 
 export const CLASS_TAG = `${CLASS_ROOT}__tag`;
+export const CLASS_TAG_ORANGE = `${CLASS_ROOT}__tag--orange`;
+export const CLASS_TAG_SMALL = `${CLASS_ROOT}__tag--small`;
 export const CLASS_TAG_TRANSPARENT = `${CLASS_ROOT}__tag--transparent`;
 export const CLASS_TAG_LARGE = `${CLASS_ROOT}__tag--large`;
 

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/index.ts

@@ -1,3 +1,3 @@
+export { MegamenuIcon } from "./MegaMenuIcon";
 export { Megamenu } from "./Megamenu";
 export { MegamenuBlog } from "./MegamenuBlog";
-export { MegamenuIcon } from "./MegaMenuIcon";

package/src/components/Megamenu/static.ts

@@ -1,8 +1,8 @@
-import Megamenu from "./Megamenu.static";
 import moduleFactory, {
-  initModulesWithin,
   destroyModulesWithin,
+  initModulesWithin,
 } from "../../scripts/lib/moduleFactory";
+import Megamenu from "./Megamenu.static";
 import "./styles/style.scss";
 
 // Module configuration for Megamenu
@@ -22,8 +22,11 @@ declare global {
       instances: Megamenu[];
       init: () => void;
       destroy: () => void;
-      initModulesWithin: typeof initModulesWithin;
-      destroyModulesWithin: typeof destroyModulesWithin;
+      initModulesWithin: (container: any) => {};
+      destroyModulesWithin: (
+        container: any,
+        removeOrphanedNodes?: boolean | undefined,
+      ) => {};
     };
   }
 }
@@ -33,17 +36,8 @@ window.ODSMegamenu = window.ODSMegamenu || {
   Megamenu,
   instances: [],
   init: () => {
-    // Debug logging
-    const elements = document.querySelectorAll("[data-megamenu]");
-    console.log("Found elements with data-megamenu:", elements.length);
-
     // Initialize all Megamenu instances on the page
     window.ODSMegamenu.instances = moduleFactory(Megamenu, "[data-megamenu]");
-    console.log(
-      "ODSMegamenu instances created:",
-      window.ODSMegamenu.instances.length,
-    );
-    console.log("ODSMegamenu loaded and initialized");
   },
   destroy: () => {
     // Destroy all instances