@orangesk/orange-design-system 2.0.0-beta.2 → 2.0.0-beta.21

package/src/components/Megamenu/MegamenuBlog.tsx

@@ -32,143 +32,159 @@ import {
   CLASS_ACCORDION_HEADER,
   CLASS_ACCORDION_ITEM,
   CLASS_ACCORDION_TITLE,
+  CLASS_SPACER_SMALL,
+  CLASS_LIST_INLINE,
+  CLASS_TAG,
 } from "./constants";
+import { list, MegamenuProps } from "./Megamenu";
 
-export const MegamenuBlog = ({ className }: any) => {
+export const MegamenuBlog = ({ className, searchEmpty }: MegamenuProps) => {
   return (
-    <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"
+    <header>
+      <nav
+        className={cx(CLASS_ROOT, className)}
+        data-megamenu
+        aria-label="Main navigation"
+      >
+        <div className={CLASS_MAIN}>
+          <div className={CLASS_CONTAINER}>
+            <ul className={CLASS_NAV} aria-label="Hlavné menu">
+              <li className={cx(CLASS_NAV_ITEM, CLASS_NAV_ITEM_MAIN)}>
+                <a
+                  href="#"
+                  className={CLASS_NAV_LOGO}
+                  aria-label="Domovská stránka"
                 >
-                  <path d="M40 0H0V40H40V0Z" fill="#FF7900" />
-                  <path
-                    d="M34.2897 28.57H5.71973V34.28H34.2897V28.57Z"
-                    fill="white"
-                  />
-                </svg>
-                <span>Človek</span>
-              </a>
-            </li>
+                  <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={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={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>
+              <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,
+                <div className={CLASS_NAV_DROPDOWN} id="megamenu-search">
+                  <div className={CLASS_CONTAINER}>
+                    <input
+                      className={cx(
+                        CLASS_INPUT,
+                        CLASS_INPUT_SEARCH_ICON_WITH_PLACEHOLDER,
+                      )}
+                      id="megamenu-blog-search-input"
+                      type="text"
+                      placeholder="Search"
+                      name="search"
+                      defaultValue={searchEmpty ? "" : "apple"}
+                    />
+                    {searchEmpty ? (
+                      <>
+                        <p>Najhľadanejši výrazy</p>
+                        <ul className={CLASS_LIST_INLINE}>
+                          {list.map((item) => (
+                            <a key={item}>
+                              <span className={cx(CLASS_TAG)}>{item}</span>
+                            </a>
+                          ))}
+                        </ul>
+                      </>
+                    ) : (
+                      <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>
                     )}
-                    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>
-              </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>
+              </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>
-      </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)}>
+        {/* 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>
@@ -235,71 +251,73 @@ export const MegamenuBlog = ({ className }: any) => {
         </div>
       </div> */}
 
-      {/* MOBILE MENU */}
+        {/* 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={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>
+          <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>
+                  <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>
-          <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 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>
-      </div>
 
-      <button
-        aria-label="Zatvoriť dropdown menu"
-        className={CLASS_OVERLAY}
-        type="button"
-      />
-    </nav>
+        <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

@@ -22,6 +22,8 @@ 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`;
@@ -47,6 +49,8 @@ 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_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/static.ts

@@ -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

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

@@ -140,6 +140,19 @@
         ~ #{config.$class-root}__main {
         transform: translateY(-#{convert.to-rem(40px)});
       }
+
+      // When top is hidden, reduce the overall container height by the top bar height
+      #{config.$class-root}__top[data-hide-when-sticky="true"].is-hidden {
+        height: #{convert.to-rem(40px)};
+        overflow: hidden;
+      }
+    }
+
+    // Adjust container height when top is hidden
+    &.top-hidden {
+      @include breakpoint.get("lg") {
+        height: #{convert.to-rem(80px)} !important;
+      }
     }
   }
 }
@@ -193,7 +206,7 @@
   left: 0;
   width: 100%;
   background-color: var(--color-surface-primary);
-  padding: convert.to-rem(20px) 0;
+  padding: convert.to-rem(60px) 0 convert.to-rem(60px) 0;
   display: none;
   opacity: 0;
   z-index: 15;
@@ -239,7 +252,7 @@
 @mixin nav-link {
   display: flex;
   font-weight: 700;
-  font-size: convert.to-rem(16px);
+  font-size: convert.to-rem(16px) !important;
   align-items: center;
   color: var(--color-text-default);
   text-decoration: none;
@@ -340,6 +353,8 @@
 }
 
 @mixin subnav-item {
+  display: flex;
+  gap: convert.to-rem(10px);
   margin-bottom: convert.to-rem(10px) !important;
 
   &:last-child {
@@ -566,11 +581,27 @@
     height: 100vh;
   }
 
-  @include breakpoint.get("lg", "down") {
+  @include breakpoint.get("md", "down") {
     display: none;
   }
 }
 
+@mixin spacer {
+  height: convert.to-rem(118px);
+
+  @include breakpoint.get("md", "down") {
+    height: convert.to-rem(58px);
+  }
+}
+
+@mixin spacer-small {
+  height: convert.to-rem(78px);
+
+  @include breakpoint.get("md", "down") {
+    height: convert.to-rem(58px);
+  }
+}
+
 @mixin accordion {
   @include accordion.base;
   margin-bottom: convert.to-rem(20px);
@@ -676,6 +707,22 @@
       @include tag.color($variant);
     }
   }
+
+  // Interactive styles for button and anchor tags
+  &:not(&--transparent):where(button) {
+    @include tag.button();
+    z-index: 2;
+  }
+
+  &:not(&--transparent):where(a) {
+    @include tag.button();
+    z-index: 2;
+    text-decoration: none !important;
+  }
+
+  &:not(&--transparent) {
+    @include tag.buttton-disabled();
+  }
 }
 
 @mixin tag-transparent {

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

@@ -11,10 +11,12 @@
 }
 
 #{config.$class-root},
+.is-light #{config.$class-root},
 #{config.$class-root}.is-light {
   @include mixins.light-vars;
 }
 
+.is-dark #{config.$class-root},
 #{config.$class-root}.is-dark {
   @include mixins.dark-vars;
 }
@@ -139,6 +141,14 @@
     @include mixins.overlay;
   }
 
+  &-spacer {
+    @include mixins.spacer;
+
+    &--small {
+      @include mixins.spacer-small;
+    }
+  }
+
   &__accordion {
     @include mixins.accordion;
   }

package/src/components/Modal/Modal.tsx

@@ -49,12 +49,8 @@ interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
   /** Additional CSS classes */
   className?: string;
-  /** Color scheme for the modal */
-  colorScheme?: "dark" | "light";
   /** Disables header paddings */
   disableHeaderSpacing?: boolean;
-  /** Disables body paddings */
-  disableBodySpacing?: boolean;
   /** Disables footer paddings */
   disableFooterSpacing?: boolean;
 }
@@ -83,9 +79,7 @@ const Modal: React.FC<ModalProps> = ({
   renderTitle,
   renderFooter,
   fullHeight,
-  colorScheme,
   disableHeaderSpacing,
-  disableBodySpacing,
   disableFooterSpacing,
   ...other
 }) => {
@@ -102,8 +96,6 @@ const Modal: React.FC<ModalProps> = ({
     {
       [`${CLASS_ROOT}__dialog--${size}`]: size,
       [`${CLASS_ROOT}__dialog--full-height`]: fullHeight,
-      "is-dark": colorScheme === "dark",
-      "is-light": colorScheme === "light",
     },
     className,
   );
@@ -149,12 +141,7 @@ const Modal: React.FC<ModalProps> = ({
         {renderBody ? (
           renderBody()
         ) : (
-          <ModalBody
-            disableSpacing={disableBodySpacing}
-            withTopPadding={!disableBodySpacing && !!renderHeader}
-          >
-            {children}
-          </ModalBody>
+          <ModalBody withTopPadding={!!renderHeader}>{children}</ModalBody>
         )}
         <div
           className={cx(`${CLASS_ROOT}__footer`, {