@orangesk/orange-design-system 2.0.0-beta.17 → 2.0.0-beta.19

package/src/components/Megamenu/Megamenu.tsx

@@ -42,9 +42,33 @@ import {
   CLASS_NAV_SPACE_SMALL,
   CLASS_NAV_CART_ICON,
   CLASS_SPACER,
+  CLASS_TAG,
+  CLASS_TAG_ORANGE,
+  CLASS_TAG_SMALL,
+  CLASS_LIST_INLINE,
 } from "./constants";
 
-export const Megamenu = ({ className }: any) => {
+export const list = [
+  "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 type MegamenuProps = {
+  className?: string;
+  searchEmpty?: boolean;
+};
+
+export const Megamenu = ({ className, searchEmpty }: MegamenuProps) => {
   return (
     <header>
       <nav
@@ -57,12 +81,9 @@ export const Megamenu = ({ className }: any) => {
           data-hide-when-sticky="true"
         >
           <div className={CLASS_CONTAINER}>
-            <h2 id="top-menu-title" className="sr-only">
-              Top menu
-            </h2>
             <ul
               className={cx(CLASS_NAV, CLASS_NAV_SPACE_SMALL)}
-              aria-labelledby="top-menu-title"
+              aria-label="Top menu"
             >
               <li className={CLASS_NAV_ITEM}>
                 <a
@@ -99,10 +120,7 @@ export const Megamenu = ({ className }: any) => {
 
         <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">
+            <ul className={CLASS_NAV} aria-label="Hlavné menu">
               <li className={cx(CLASS_NAV_ITEM, CLASS_NAV_ITEM_MAIN)}>
                 <a
                   href="#"
@@ -175,53 +193,75 @@ export const Megamenu = ({ className }: any) => {
                       </div>
 
                       <div className={CLASS_CARD}>
-                        <h3 id="pausaly-heading">Paušály</h3>
+                        <p id="pausaly-heading" className={CLASS_TEXT_LARGE}>
+                          Internet
+                        </p>
                         <ul
                           className={CLASS_SUBNAV}
                           role="group"
                           aria-labelledby="pausaly-heading"
                         >
                           <li className={CLASS_SUBNAV_ITEM}>
-                            <a href="#">Prehľad paušálov</a>
+                            <a href="#">Prehľad internetu</a>
                           </li>
                           <li className={CLASS_SUBNAV_ITEM}>
-                            <a href="#">Chcem nové číslo</a>
+                            <a href="#">Mobilný internet</a>
                           </li>
                           <li className={CLASS_SUBNAV_ITEM}>
-                            <a href="#">Yoxo paušál</a>
+                            <a href="#">Bezpečný internet so sebou</a>
+                          </li>
+                          <li className={CLASS_SUBNAV_ITEM}>
+                            <a href="#">Domáca linka k internetu</a>
                           </li>
                         </ul>
 
-                        <h3 id="volania-s-kreditom-heading">
-                          Volania s kreditom
-                        </h3>
+                        <p
+                          id="volania-s-kreditom-heading"
+                          className={CLASS_TEXT_LARGE}
+                        >
+                          Televízia
+                        </p>
                         <ul
                           className={CLASS_SUBNAV}
                           role="group"
                           aria-labelledby="volania-s-kreditom-heading"
                         >
                           <li className={CLASS_SUBNAV_ITEM}>
-                            <a href="#">Prima Voľba</a>
+                            <a href="#">Najlepšia TV na doma</a>
                           </li>
                           <li className={CLASS_SUBNAV_ITEM}>
-                            <a href="#">Prima Kids</a>
+                            <a href="#">TV cez satelit</a>
                           </li>
                           <li className={CLASS_SUBNAV_ITEM}>
-                            <a href="#">FunFón</a>
+                            <a href="#">TV cez internet</a>
+                          </li>
+                          <li className={CLASS_SUBNAV_ITEM}>
+                            <a href="#">Novinky na Orange TV</a>
                           </li>
                         </ul>
 
-                        <h3 id="zahranicie-heading">Zahraničie</h3>
+                        <p id="zahranicie-heading" className={CLASS_TEXT_LARGE}>
+                          Internet + televízia
+                        </p>
                         <ul
                           className={CLASS_SUBNAV}
                           role="group"
                           aria-labelledby="zahranicie-heading"
                         >
                           <li className={CLASS_SUBNAV_ITEM}>
-                            <a href="#">Roaming</a>
+                            <a href="#">Ponuka Love</a>{" "}
+                            <span
+                              className={cx(
+                                CLASS_TAG,
+                                CLASS_TAG_ORANGE,
+                                CLASS_TAG_SMALL,
+                              )}
+                            >
+                              Novinka
+                            </span>
                           </li>
                           <li className={CLASS_SUBNAV_ITEM}>
-                            <a href="#">Cestovateľské balíky</a>
+                            <a href="#">Výhodný pár zariadení</a>
                           </li>
                           <li className={CLASS_SUBNAV_ITEM}>
                             <a href="#">Volania do zahraničia</a>
@@ -233,36 +273,29 @@ export const Megamenu = ({ className }: any) => {
                       </div>
 
                       <div className={CLASS_CARD}>
-                        <h3 id="nase-sluzby-heading">Ste náš zákazník?</h3>
+                        <p
+                          id="nase-sluzby-heading"
+                          className={CLASS_TEXT_LARGE}
+                        >
+                          Ste náš zákazník?
+                        </p>
                         <ul
                           className={CLASS_SUBNAV}
                           role="group"
                           aria-labelledby="nase-sluzby-heading"
                         >
-                          <li className={CLASS_SUBNAV_ITEM}>
-                            <a href="#">Chcem zmeniť paušál</a>
-                          </li>
-                          <li className={CLASS_SUBNAV_ITEM}>
-                            <a href="#">Dobiť kredit</a>
-                          </li>
                           <li className={CLASS_SUBNAV_ITEM}>
                             <a href="#">Predĺžiť služby</a>
                           </li>
                           <li className={CLASS_SUBNAV_ITEM}>
-                            <a href="#">Chcem nový telefón</a>
+                            <a href="#">Nový internet</a>
                           </li>
                           <li className={CLASS_SUBNAV_ITEM}>
-                            <a href="#">Navzájom zadarmo</a>
-                          </li>
-                          <li className={CLASS_SUBNAV_ITEM}>
-                            <a href="#">Orange Svojim</a>
+                            <a href="#">Nová televízia</a>
                           </li>
                           <li className={CLASS_SUBNAV_ITEM}>
                             <a href="#">Odporučte Orange</a>
                           </li>
-                          <li className={CLASS_SUBNAV_ITEM}>
-                            <a href="#">Ostatné služby</a>
-                          </li>
                         </ul>
                       </div>
                     </div>
@@ -361,31 +394,47 @@ export const Megamenu = ({ className }: any) => {
                         CLASS_INPUT,
                         CLASS_INPUT_SEARCH_ICON_WITH_PLACEHOLDER,
                       )}
-                      id="search-1"
+                      id="megamenu-search-input"
                       type="text"
                       placeholder="Search"
-                      name="search-1"
+                      name="search"
+                      defaultValue={searchEmpty ? "" : "apple"}
                     />
-                    <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>
+                    {searchEmpty ? (
+                      <>
+                        <p>Najhľadanejši výrazy</p>
+                        <ul className={CLASS_LIST_INLINE}>
+                          {list.map((item) => (
+                            <li key={item}>
+                              <a href="/" className={cx(CLASS_TAG)}>
+                                {item}
+                              </a>
+                            </li>
+                          ))}
+                        </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>
+                    )}
                   </div>
                 </div>
               </li>
@@ -509,10 +558,10 @@ export const Megamenu = ({ className }: any) => {
                     CLASS_INPUT,
                     CLASS_INPUT_SEARCH_ICON_WITH_PLACEHOLDER,
                   )}
-                  id="search-1"
+                  id="megamenu-mobile-search-input"
                   type="text"
                   placeholder="Search"
-                  name="search-1"
+                  name="search"
                 />
                 <ul className={cx(CLASS_SUBNAV, "hide")}>
                   <li className={CLASS_SUBNAV_ITEM}>
@@ -598,7 +647,12 @@ export const Megamenu = ({ className }: any) => {
                           </ul>
                         </div>
                         <div>
-                          <h3 id="mobile-internet-heading">Internet</h3>
+                          <p
+                            id="mobile-internet-heading"
+                            className={CLASS_TEXT_LARGE}
+                          >
+                            Internet
+                          </p>
                           <ul
                             className={CLASS_SUBNAV}
                             role="group"
@@ -618,7 +672,12 @@ export const Megamenu = ({ className }: any) => {
                             </li>
                           </ul>
 
-                          <h3 id="mobile-tv-heading">Televízia</h3>
+                          <p
+                            id="mobile-tv-heading"
+                            className={CLASS_TEXT_LARGE}
+                          >
+                            Televízia
+                          </p>
                           <ul
                             className={CLASS_SUBNAV}
                             role="group"
@@ -638,16 +697,28 @@ export const Megamenu = ({ className }: any) => {
                             </li>
                           </ul>
 
-                          <h3 id="mobile-internet-tv-heading">
+                          <p
+                            id="mobile-internet-tv-heading"
+                            className={CLASS_TEXT_LARGE}
+                          >
                             Internet + televízia
-                          </h3>
+                          </p>
                           <ul
                             className={CLASS_SUBNAV}
                             role="group"
                             aria-labelledby="mobile-internet-tv-heading"
                           >
                             <li className={CLASS_SUBNAV_ITEM}>
-                              <a href="#">Ponuka Love</a>
+                              <a href="#">Ponuka Love</a>{" "}
+                              <span
+                                className={cx(
+                                  CLASS_TAG,
+                                  CLASS_TAG_ORANGE,
+                                  CLASS_TAG_SMALL,
+                                )}
+                              >
+                                Novinka
+                              </span>
                             </li>
                             <li className={CLASS_SUBNAV_ITEM}>
                               <a href="#">Výhodný pár zariadení</a>
@@ -660,9 +731,12 @@ export const Megamenu = ({ className }: any) => {
                             </li>
                           </ul>
 
-                          <h3 id="mobile-customer-heading">
+                          <p
+                            id="mobile-customer-heading"
+                            className={CLASS_TEXT_LARGE}
+                          >
                             Ste náš zákazník?
-                          </h3>
+                          </p>
                           <ul
                             className={CLASS_SUBNAV}
                             role="group"

package/src/components/Megamenu/MegamenuBlog.tsx

@@ -33,9 +33,12 @@ import {
   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 (
     <header>
       <nav
@@ -45,10 +48,7 @@ export const MegamenuBlog = ({ className }: any) => {
       >
         <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">
+            <ul className={CLASS_NAV} aria-label="Hlavné menu">
               <li className={cx(CLASS_NAV_ITEM, CLASS_NAV_ITEM_MAIN)}>
                 <a
                   href="#"
@@ -109,31 +109,45 @@ export const MegamenuBlog = ({ className }: any) => {
                         CLASS_INPUT,
                         CLASS_INPUT_SEARCH_ICON_WITH_PLACEHOLDER,
                       )}
-                      id="search-1"
+                      id="megamenu-blog-search-input"
                       type="text"
                       placeholder="Search"
-                      name="search-1"
+                      name="search"
+                      defaultValue={searchEmpty ? "" : "apple"}
                     />
-                    <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>
+                    {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>
+                    )}
                   </div>
                 </div>
               </li>

package/src/components/Megamenu/constants.ts

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

@@ -33,17 +33,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

@@ -206,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;
@@ -353,6 +353,8 @@
 }
 
 @mixin subnav-item {
+  display: flex;
+  gap: convert.to-rem(10px);
   margin-bottom: convert.to-rem(10px) !important;
 
   &:last-child {
@@ -579,7 +581,7 @@
     height: 100vh;
   }
 
-  @include breakpoint.get("lg", "down") {
+  @include breakpoint.get("md", "down") {
     display: none;
   }
 }
@@ -705,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;
 }

package/src/components/Modal/ModalProductHeader.tsx

@@ -5,6 +5,8 @@ interface ModalProductHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   image?: React.ReactNode;
   /** Use small spacing */
   space?: "small";
+  /** Optional id for accessibility (e.g., for aria-labelledby) */
+  titleId?: string;
 }
 
 export const CLASS_ROOT = "modal__product";
@@ -12,7 +14,7 @@ export const CLASS_ROOT = "modal__product";
 const ModalProductHeader = React.forwardRef<
   HTMLDivElement,
   ModalProductHeaderProps
->(({ className, children, image, space, ...other }, ref) => {
+>(({ className, children, image, space, titleId, ...other }, ref) => {
   const classes = cx(
     `${CLASS_ROOT}-header`,
     {
@@ -25,7 +27,9 @@ const ModalProductHeader = React.forwardRef<
 
   return (
     <div className={classes} ref={ref} {...other}>
-      <div className={contentClasses}>{children}</div>
+      <div className={contentClasses} id={titleId}>
+        {children}
+      </div>
       {image}
     </div>
   );

package/src/components/Modal/tests/ModalProductHeader.unit.test.js

@@ -70,4 +70,16 @@ describe("rendering ModalProductHeader", () => {
       container.querySelector(".modal__product-content"),
     ).toHaveTextContent("Product Header");
   });
+
+  it("has titleId attribute when titleId prop is provided", () => {
+    const { container } = render(
+      <ModalProductHeader titleId="test-title-id">
+        Product Header
+      </ModalProductHeader>,
+    );
+    expect(container.querySelector(".modal__product-content")).toHaveAttribute(
+      "id",
+      "test-title-id",
+    );
+  });
 });

package/src/components/PromoBanner/PromoBanner.tsx

@@ -39,7 +39,7 @@ export const PromoBanner = ({
     className,
   );
   return (
-    <Grid className={classes}>
+    <Grid columnGapSize="large" className={classes}>
       {variant === "reverse" && image && (
         <GridCol
           size={{ xs: 12, md: 6 }}
@@ -83,6 +83,8 @@ export const PromoBanner = ({
             {
               [`${CLASS_ROOT}__image--bleed-right`]: bleedImage,
               [`align-self-${alignImage}`]: alignImage,
+              "pt-none": alignImage === "top",
+              "pb-none": alignImage === "bottom",
               "align-center": variant === "vertical",
             },
             imageClassName,

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

@@ -29,8 +29,13 @@
   text-align: end;
   align-self: center;
 
+  padding-top: space.get("xlarge");
+  padding-bottom: space.get("xlarge");
+
   @include breakpoint.get("md", "down") {
     text-align: center;
+    padding-top: 0;
+    padding-bottom: 0;
   }
 }
 

package/src/styles/typography/mixins.scss

@@ -166,13 +166,12 @@
 
 @mixin list-inline() {
   @include list-unstyled();
+  gap: space.get("small");
+  display: flex;
+  flex-wrap: wrap;
 
   > li {
-    display: inline-block;
-
-    &:not(:last-child) {
-      margin-right: space.get("small");
-    }
+    display: inline-flex;
   }
 }