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

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
@@ -188,7 +212,16 @@ export const Megamenu = ({ className }: any) => {
                             <a href="#">Chcem nové číslo</a>
                           </li>
                           <li className={CLASS_SUBNAV_ITEM}>
-                            <a href="#">Yoxo paušál</a>
+                            <a href="#">Yoxo paušál</a>{" "}
+                            <span
+                              className={cx(
+                                CLASS_TAG,
+                                CLASS_TAG_ORANGE,
+                                CLASS_TAG_SMALL,
+                              )}
+                            >
+                              Novinka
+                            </span>
                           </li>
                         </ul>
 
@@ -365,27 +398,43 @@ export const Megamenu = ({ className }: any) => {
                       type="text"
                       placeholder="Search"
                       name="search-1"
+                      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>
@@ -647,7 +696,16 @@ export const Megamenu = ({ className }: any) => {
                             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>

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
@@ -113,27 +116,41 @@ export const MegamenuBlog = ({ className }: any) => {
                       type="text"
                       placeholder="Search"
                       name="search-1"
+                      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/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 {
@@ -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 }}

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;
   }
 }