@orangesk/orange-design-system 2.0.0-beta.0 → 2.0.0-beta.10

package/src/components/Megamenu/MegamenuBlog.tsx

@@ -0,0 +1,309 @@
+import cx from "classnames";
+
+import { MegamenuIcon } from "./MegaMenuIcon";
+import {
+  CLASS_CONTAINER,
+  CLASS_HIDE_MD_DOWN,
+  CLASS_HIDE_LG_UP,
+  CLASS_MAIN,
+  CLASS_NAV,
+  CLASS_NAV_BUTTON,
+  CLASS_NAV_DROPDOWN,
+  CLASS_NAV_ICON,
+  CLASS_NAV_ITEM,
+  CLASS_NAV_ITEM_MAIN,
+  CLASS_NAV_LINK,
+  CLASS_NAV_LOGO,
+  CLASS_NAV_SPACER,
+  CLASS_ROOT,
+  CLASS_SUBNAV,
+  CLASS_SUBNAV_ITEM,
+  CLASS_MOBILE,
+  CLASS_MOBILE_OVERLAY,
+  CLASS_MOBILE_WRAPPER,
+  CLASS_MOBILE_HEADER,
+  CLASS_MOBILE_BODY,
+  CLASS_OVERLAY,
+  CLASS_INPUT,
+  CLASS_INPUT_SEARCH_ICON_WITH_PLACEHOLDER,
+  CLASS_NAV_SPACE_SMALL,
+  CLASS_ACCORDION,
+  CLASS_ACCORDION_BUTTON,
+  CLASS_ACCORDION_HEADER,
+  CLASS_ACCORDION_ITEM,
+  CLASS_ACCORDION_TITLE,
+  CLASS_SPACER_SMALL,
+} from "./constants";
+
+export const MegamenuBlog = ({ className }: any) => {
+  return (
+    <header>
+      <nav
+        className={cx(CLASS_ROOT, className)}
+        data-megamenu
+        aria-label="Main navigation"
+      >
+        <div className={CLASS_MAIN}>
+          <div className={CLASS_CONTAINER}>
+            <h2 id="menu-title" className="sr-only">
+              Hlavné menu
+            </h2>
+            <ul className={CLASS_NAV} aria-labelledby="menu-title">
+              <li className={cx(CLASS_NAV_ITEM, CLASS_NAV_ITEM_MAIN)}>
+                <a
+                  href="#"
+                  className={CLASS_NAV_LOGO}
+                  aria-label="Domovská stránka"
+                >
+                  <svg
+                    viewBox="0 0 40 40"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    aria-hidden="true"
+                  >
+                    <path d="M40 0H0V40H40V0Z" fill="#FF7900" />
+                    <path
+                      d="M34.2897 28.57H5.71973V34.28H34.2897V28.57Z"
+                      fill="white"
+                    />
+                  </svg>
+                  <span>Človek</span>
+                </a>
+              </li>
+
+              <li
+                className={cx(
+                  CLASS_NAV_ITEM,
+                  CLASS_NAV_ITEM_MAIN,
+                  CLASS_HIDE_MD_DOWN,
+                )}
+              >
+                <a href="#" className={cx(CLASS_NAV_LINK)}>
+                  Naspať na Orange
+                </a>
+              </li>
+
+              <li className={CLASS_NAV_SPACER} aria-hidden="true"></li>
+
+              <li className={cx(CLASS_NAV_ITEM, CLASS_HIDE_MD_DOWN)}>
+                <button
+                  type="button"
+                  className={CLASS_NAV_BUTTON}
+                  aria-label="Vyhľadávanie"
+                  aria-controls="megamenu-search"
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                >
+                  <MegamenuIcon
+                    width={24}
+                    height={24}
+                    name="search"
+                    aria-hidden="true"
+                  />
+                </button>
+
+                <div className={CLASS_NAV_DROPDOWN} id="megamenu-search">
+                  <div className={CLASS_CONTAINER}>
+                    <input
+                      className={cx(
+                        CLASS_INPUT,
+                        CLASS_INPUT_SEARCH_ICON_WITH_PLACEHOLDER,
+                      )}
+                      id="search-1"
+                      type="text"
+                      placeholder="Search"
+                      name="search-1"
+                    />
+                    <ul className={CLASS_SUBNAV}>
+                      <li className={CLASS_SUBNAV_ITEM}>
+                        <a href="#">apple</a>
+                      </li>
+                      <li className={CLASS_SUBNAV_ITEM}>
+                        <a href="#">apple hodinky</a>
+                      </li>
+                      <li className={CLASS_SUBNAV_ITEM}>
+                        <a href="#">apple iphone</a>
+                      </li>
+                      <li className={CLASS_SUBNAV_ITEM}>
+                        <a href="#">apple 16</a>
+                      </li>
+                      <li className={CLASS_SUBNAV_ITEM}>
+                        <a href="#">apple pro</a>
+                      </li>
+                      <li className={CLASS_SUBNAV_ITEM}>
+                        <a href="#">apple watch</a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </li>
+              <li className={CLASS_NAV_ITEM}>
+                <a href="#" className={CLASS_NAV_LINK}>
+                  <MegamenuIcon
+                    width={24}
+                    height={24}
+                    name="user"
+                    className={CLASS_NAV_ICON}
+                    aria-hidden="true"
+                  />
+                  Môj Orange
+                </a>
+              </li>
+              <li className={cx(CLASS_NAV_ITEM, CLASS_HIDE_LG_UP)}>
+                <button
+                  type="button"
+                  className={CLASS_NAV_BUTTON}
+                  aria-label="Otvoriť menu"
+                  aria-haspopup="true"
+                  aria-expanded="false"
+                >
+                  <MegamenuIcon
+                    width={24}
+                    height={24}
+                    name="menu"
+                    aria-hidden="true"
+                  />
+                </button>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        {/* This is not needed, but I'll keep it here if anyone changes his mind to has it as part of megamenu */}
+        {/* <div className={cx(CLASS_SUBMAIN, CLASS_HIDE_MD_DOWN)}>
+        <div className={CLASS_CONTAINER}>
+          <ul className={cx(CLASS_LIST_INLINE, CLASS_ALIGN_CENTER)}>
+            <li>
+              <a
+                href="#"
+                className={cx(
+                  CLASS_TAG,
+                  CLASS_TAG_TRANSPARENT,
+                  CLASS_TAG_LARGE,
+                )}
+              >
+                Všetky novinky
+              </a>
+            </li>
+            <li>
+              <a
+                href="#"
+                className={cx(
+                  CLASS_TAG,
+                  CLASS_TAG_TRANSPARENT,
+                  CLASS_TAG_LARGE,
+                )}
+              >
+                Konektivita
+              </a>
+            </li>
+            <li>
+              <a
+                href="#"
+                className={cx(
+                  CLASS_TAG,
+                  CLASS_TAG_TRANSPARENT,
+                  CLASS_TAG_LARGE,
+                )}
+              >
+                Technológie SMART
+              </a>
+            </li>
+            <li>
+              <a
+                href="#"
+                className={cx(
+                  CLASS_TAG,
+                  CLASS_TAG_TRANSPARENT,
+                  CLASS_TAG_LARGE,
+                )}
+              >
+                Bezpečnosť
+              </a>
+            </li>
+            <li>
+              <a
+                href="#"
+                className={cx(
+                  CLASS_TAG,
+                  CLASS_TAG_TRANSPARENT,
+                  CLASS_TAG_LARGE,
+                )}
+              >
+                Iné
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div> */}
+
+        {/* MOBILE MENU */}
+
+        <div
+          // className={cx(CLASS_MOBILE, "is-active")}
+          className={cx(CLASS_MOBILE)}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="mobile-menu-title"
+        >
+          <h2 id="mobile-menu-title" className="sr-only">
+            Hlavné menu
+          </h2>
+          <button
+            aria-label="Zatvoriť menu"
+            className={CLASS_MOBILE_OVERLAY}
+            type="button"
+          />
+
+          <div className={CLASS_MOBILE_WRAPPER}>
+            <div className={CLASS_MOBILE_HEADER}>
+              <div className={CLASS_CONTAINER}>
+                <ul className={cx(CLASS_NAV, CLASS_NAV_SPACE_SMALL)}>
+                  <li className={CLASS_NAV_SPACER} aria-hidden="true"></li>
+
+                  <li className={CLASS_NAV_ITEM}>
+                    <button
+                      type="button"
+                      data-megamenu-close-button
+                      className={CLASS_NAV_BUTTON}
+                      aria-label="Zatvoriť menu"
+                    >
+                      <MegamenuIcon
+                        name="close"
+                        width={20}
+                        height={20}
+                        aria-hidden="true"
+                      />
+                    </button>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div className={CLASS_MOBILE_BODY}>
+              <div className={CLASS_CONTAINER}>
+                <ul className={CLASS_ACCORDION}>
+                  <li className={CLASS_ACCORDION_ITEM}>
+                    <div className={CLASS_ACCORDION_HEADER}>
+                      <a href="#" className={CLASS_ACCORDION_BUTTON}>
+                        <span className={CLASS_ACCORDION_TITLE}>
+                          Naspať na Orange
+                        </span>
+                      </a>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <button
+          aria-label="Zatvoriť dropdown menu"
+          className={CLASS_OVERLAY}
+          type="button"
+        />
+      </nav>
+      <div className={CLASS_SPACER_SMALL} aria-hidden="true" />
+    </header>
+  );
+};

package/src/components/Megamenu/constants.ts

@@ -0,0 +1,56 @@
+export const CLASS_ROOT = "megamenu";
+
+export const CLASS_TOP = `${CLASS_ROOT}__top`;
+export const CLASS_MAIN = `${CLASS_ROOT}__main`;
+export const CLASS_SUBMAIN = `${CLASS_ROOT}__submain`;
+export const CLASS_CONTAINER = `${CLASS_ROOT}__container`;
+export const CLASS_GRID = `${CLASS_ROOT}__grid`;
+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_ITEM = `${CLASS_ROOT}__nav-item`;
+export const CLASS_NAV_ITEM_MAIN = `${CLASS_ROOT}__nav-item--main`;
+export const CLASS_NAV_LINK = `${CLASS_ROOT}__nav-link`;
+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_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`;
+export const CLASS_NAV_DROPDOWN = `${CLASS_ROOT}__nav-dropdown`;
+export const CLASS_SUBNAV = `${CLASS_ROOT}__subnav`;
+export const CLASS_SUBNAV_ITEM = `${CLASS_ROOT}__subnav-item`;
+export const CLASS_OVERLAY = `${CLASS_ROOT}__overlay`;
+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_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`;
+
+export const CLASS_MOBILE = `${CLASS_ROOT}__mobile`;
+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`;
+
+// Accordion classes for mobile menu
+export const CLASS_ACCORDION = `${CLASS_ROOT}__accordion`;
+export const CLASS_ACCORDION_ITEM = `${CLASS_ROOT}__accordion-item`;
+export const CLASS_ACCORDION_HEADER = `${CLASS_ROOT}__accordion-header`;
+export const CLASS_ACCORDION_BUTTON = `${CLASS_ROOT}__accordion-button`;
+export const CLASS_ACCORDION_TITLE = `${CLASS_ROOT}__accordion-title`;
+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_SEARCH_ICON_WITH_PLACEHOLDER = `${CLASS_ROOT}__input--search-icon-with-placeholder`;
+
+export const CLASS_TAG = `${CLASS_ROOT}__tag`;
+export const CLASS_TAG_TRANSPARENT = `${CLASS_ROOT}__tag--transparent`;
+export const CLASS_TAG_LARGE = `${CLASS_ROOT}__tag--large`;
+
+export const CLASS_LIST_INLINE = `${CLASS_ROOT}__list--inline`;
+export const CLASS_LIST_GAP_SMALL = `${CLASS_ROOT}__list--gap-small`;

package/src/components/Megamenu/index.ts

@@ -1,6 +1,3 @@
-import "./styles/style.scss";
-
-import MegamenuDropdown from "./MegamenuDropdown";
-
 export { Megamenu } from "./Megamenu";
-export { MegamenuDropdown };
+export { MegamenuBlog } from "./MegamenuBlog";
+export { MegamenuIcon } from "./MegaMenuIcon";

package/src/components/Megamenu/static.ts

@@ -0,0 +1,73 @@
+import Megamenu from "./Megamenu.static";
+import moduleFactory, {
+  initModulesWithin,
+  destroyModulesWithin,
+} from "../../scripts/lib/moduleFactory";
+import "./styles/style.scss";
+
+// Module configuration for Megamenu
+export const customMegamenuModuleSelectorPairs = [
+  {
+    Module: Megamenu,
+    name: "Megamenu",
+    selector: "[data-megamenu]",
+  },
+];
+
+// Global interface for standalone Megamenu
+declare global {
+  interface Window {
+    ODSMegamenu: {
+      Megamenu: typeof Megamenu;
+      instances: Megamenu[];
+      init: () => void;
+      destroy: () => void;
+      initModulesWithin: typeof initModulesWithin;
+      destroyModulesWithin: typeof destroyModulesWithin;
+    };
+  }
+}
+
+// Initialize the global ODSMegamenu object
+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
+    window.ODSMegamenu.instances.forEach((instance) => {
+      if (instance && typeof instance.destroy === "function") {
+        instance.destroy();
+      }
+    });
+    window.ODSMegamenu.instances = [];
+  },
+  initModulesWithin,
+  destroyModulesWithin,
+};
+
+// Auto-initialize when DOM is ready
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", () => {
+    window.ODSMegamenu.init();
+  });
+} else {
+  // DOM is already ready
+  window.ODSMegamenu.init();
+}
+
+// Export for potential manual usage
+export { Megamenu };
+export default Megamenu;

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

@@ -1,13 +1,2 @@
-@use "../../../styles/tokens/space";
-@use "../../../styles/tokens/color";
-@use "../../../styles/tools/convert";
-
-// Megamenu configuration variables
-$megamenu: (
-  sidebar-width: convert.to-rem(380px),
-  sidebar-width-mobile: 100%,
-  transition-duration: 0.3s,
-  overlay-background: rgba(0, 0, 0, 0.5),
-  z-index-overlay: 1000,
-  z-index-sidebar: 1001,
-);
+$class-root: ".megamenu";
+$active-line: 0 -4px 0 var(--color-border-accent) inset;