@orangesk/orange-design-system 2.0.0-beta.7 → 2.0.0-beta.9

package/src/components/Megamenu/MegamenuBlog.tsx

@@ -32,143 +32,145 @@ import {
   CLASS_ACCORDION_HEADER,
   CLASS_ACCORDION_ITEM,
   CLASS_ACCORDION_TITLE,
+  CLASS_SPACER_SMALL,
 } from "./constants";
 
 export const MegamenuBlog = ({ className }: any) => {
   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}>
+            <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"
                 >
-                  <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>
+                  <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_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"
+              <li
+                className={cx(
+                  CLASS_NAV_ITEM,
+                  CLASS_NAV_ITEM_MAIN,
+                  CLASS_HIDE_MD_DOWN,
+                )}
               >
-                <MegamenuIcon
-                  width={24}
-                  height={24}
-                  name="search"
-                  aria-hidden="true"
-                />
-              </button>
+                <a href="#" className={cx(CLASS_NAV_LINK)}>
+                  Naspať na Orange
+                </a>
+              </li>
+
+              <li className={CLASS_NAV_SPACER} aria-hidden="true"></li>
 
-              <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"
+              <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"
                   />
-                  <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>
+                </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>
-              </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 +237,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`;

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;
+      }
     }
   }
 }
@@ -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;
@@ -571,6 +584,22 @@
   }
 }
 
+@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);

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

@@ -139,6 +139,14 @@
     @include mixins.overlay;
   }
 
+  &-spacer {
+    @include mixins.spacer;
+
+    &--small {
+      @include mixins.spacer-small;
+    }
+  }
+
   &__accordion {
     @include mixins.accordion;
   }

package/src/components/Pill/Pill.tsx

@@ -3,7 +3,7 @@ import cx from "classnames";
 
 const CLASS_ROOT = "pill";
 
-export const pillColors = ["white", "gray", "transparent"] as const;
+export const pillColors = ["white", "gray", "transparent", "orange"] as const;
 export type PillColor = (typeof pillColors)[number];
 
 interface PillProps extends HTMLAttributes<HTMLSpanElement> {

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

@@ -31,6 +31,10 @@ $colors: (
     background-color: var(--color-surface-subtle),
     color: var(--color-text-default),
   ),
+  "orange": (
+    background-color: var(--color-icon-brand),
+    color: var(--color-text-inverse),
+  ),
   "transparent": (
     background-color: rgba(#ffffff, 0.5),
     color: var(--color-text-default),

package/src/components/Preview/PreviewGenerator.tsx

@@ -115,29 +115,36 @@ const getBackgroundsAsArray = (
     return acc;
   }, []);
 
-// Map human-friendly color names to bg-* utility classes
+// Map names to only the 6 allowed background classes
 const getBgClassFromName = (name: string): string => {
   const normalized = name.toLowerCase().replace(/\s+/g, "-");
-  const n = normalized === "grey" ? "gray" : normalized;
-  if (n === "none") return "bg-none";
-  return `bg-${n}`; // e.g. white -> bg-white, orange-dark -> bg-orange-dark
-};
 
-// Determine contrast helper class for nested component styling
-const getThemeClassFromName = (name: string): string => {
-  const n = name.toLowerCase();
-  // Only black switches global dark tokens; other colors keep light tokens
-  return n === "black" ? "is-dark" : "is-light";
+  // Only allow these background classes
+  const allowedBackgrounds = [
+    "background-primary",
+    "background-secondary",
+    "background-contrast",
+    "background-accent",
+    "background-accent1-blog",
+    "background-accent2-blog",
+    "background-none",
+  ];
+
+  // Return the class if it's in the allowed list, otherwise default to background-primary
+  return allowedBackgrounds.includes(normalized)
+    ? normalized
+    : "background-primary";
 };
 
 const PreviewGenerator: FunctionComponent<PreviewProps> = ({
-  bgTheme = "white",
+  bgTheme = "background-primary",
   bgThemeColors = {
-    White: "bg-white",
-    Gray: "bg-gray",
-    Black: "bg-black",
-    "Accent1 Blog": "bg-accent1-blog",
-    "Accent2 Blog": "bg-accent2-blog",
+    "Background Primary": "background-primary",
+    "Background Secondary": "background-secondary",
+    "Background Contrast": "background-contrast",
+    "Background Accent": "background-accent",
+    "Background Accent1 Blog": "background-accent1-blog",
+    "Background Accent2 Blog": "background-accent2-blog",
   },
   bgThemeExcludedColors = [],
   children,
@@ -153,6 +160,7 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
 }) => {
   const [isCodeShown, setIsCodeShown] = useState(false);
   const [isFullscreen, setIsFullscreen] = useState(false);
+  const [isDarkMode, setIsDarkMode] = useState(false);
   // Ensure unique dropdown id per Preview instance to avoid id collisions (SSR-safe)
   const backgroundDropdownId = `background-select-${useId()}`;
   const [previewBackground, setPreviewBackground] = useState<PreviewBackground>(
@@ -185,10 +193,10 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
 
         return {
           label: bgTheme,
-          value: bgThemeColors[bgTheme] || "bg-white",
+          value: bgThemeColors[bgTheme] || "background-primary",
         };
       }
-      return { label: "white", value: "bg-white" };
+      return { label: "Background Primary", value: "background-primary" };
     },
   );
 
@@ -204,7 +212,11 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
     setIsFullscreen(!isFullscreen);
   }
 
-  const themeClass = getThemeClassFromName(previewBackground.label);
+  function handleToggleDarkMode() {
+    setIsDarkMode(!isDarkMode);
+  }
+
+  const themeClass = isDarkMode ? "is-dark" : "is-light";
   const bgClass = getBgClassFromName(previewBackground.label);
 
   const classes = cx(CLASS_ROOT, themeClass, bgClass, className);
@@ -220,6 +232,23 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
       bgThemeExcludedColors,
     );
 
+    // Add theme toggle button
+    actions.push(
+      <Button key="theme-toggle" onClick={handleToggleDarkMode} type="ghost">
+        <Icon
+          name={isDarkMode ? "sleep" : "flashlight"}
+          size="medium"
+          fill={"currentColor"}
+          style={{ marginRight: "0.5rem" }}
+        />
+        {isDarkMode ? (
+          <code className="small bold">{".is-dark"}</code>
+        ) : (
+          <code className="small bold">{".is-light"}</code>
+        )}
+      </Button>,
+    );
+
     if (bgColorsOptions.length) {
       actions.push(
         <Dropdown
@@ -352,6 +381,4 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
   );
 };
 
-PreviewGenerator.displayName = "PreviewGenerator";
-
 export { PreviewGenerator };