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

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/styles/base/globals.scss

@@ -28,8 +28,26 @@
   color: var(--color-text-default);
 }
 
+:root {
+  --extra-scroll-margin: 0;
+  --header-height: 80px;
+}
+
+@media screen and (min-width: 992px) {
+  :root {
+    --header-height: 120px;
+  }
+}
+
+:target {
+  scroll-margin-top: calc(
+    var(--header-height) + var(--extra-scroll-margin) - 1px
+  );
+}
+
 html {
   font-size: base.$font-size;
+  scroll-padding-top: unset;
 }
 
 html,

package/src/styles/utilities/color.scss

@@ -75,6 +75,10 @@
     background-color: var(--color-surface-subtle) !important;
   }
 
+  .bg-gray-lighter {
+    background-color: var(--color-background-secondary) !important;
+  }
+
   .bg-blue {
     background-color: var(--color-fill-accent1) !important;
     // TODO: replace with new token when available