@orangesk/orange-design-system 2.0.0-beta.30 → 2.0.0-beta.32

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

@@ -30,6 +30,10 @@
 
     &-item {
       @include mixins.nav-item;
+
+      &--lead {
+        @include mixins.nav-item-lead;
+      }
     }
 
     &--vertical {
@@ -40,6 +44,10 @@
       @include mixins.nav-space-small;
     }
 
+    &--mobile-locale {
+      @include mixins.nav-mobile-locale;
+    }
+
     &-dropdown {
       @include mixins.nav-dropdown;
 
@@ -54,6 +62,14 @@
 
     &-link {
       @include mixins.nav-link;
+
+      &--locale {
+        @include mixins.nav-link-locale;
+      }
+
+      &--no-line {
+        @include mixins.nav-link-no-line;
+      }
     }
 
     &-cart-icon {
@@ -85,6 +101,10 @@
     }
   }
 
+  &__divider {
+    @include mixins.divider;
+  }
+
   &__top {
     @include mixins.top;
   }
@@ -115,6 +135,38 @@
     &-body {
       @include mixins.mobile-body;
     }
+
+    &-account {
+      @include mixins.mobile-account;
+
+      &-avatar {
+        @include mixins.mobile-account-avatar;
+      }
+
+      &-name {
+        @include mixins.mobile-account-name;
+      }
+
+      &-phone {
+        @include mixins.mobile-account-phone;
+      }
+
+      &-logout {
+        @include mixins.mobile-account-logout;
+      }
+
+      &-cta {
+        @include mixins.mobile-account-cta;
+      }
+
+      &-links {
+        @include mixins.mobile-account-links;
+      }
+
+      &-link {
+        @include mixins.mobile-account-link;
+      }
+    }
   }
 
   &__container {
@@ -133,6 +185,14 @@
     @include mixins.text-large;
   }
 
+  &__caption {
+    @include mixins.caption;
+
+    &--large {
+      @include mixins.caption-large;
+    }
+  }
+
   &-icon {
     @include mixins.icon;
   }
@@ -184,6 +244,10 @@
   &__tag {
     @include mixins.tag;
 
+    &--orange {
+      @include mixins.tag-orange;
+    }
+
     &--transparent {
       @include mixins.tag-transparent;
     }

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

@@ -53,11 +53,12 @@
     padding: 24px;
     border-radius: 0 !important;
     margin-bottom: 0 !important;
-    overflow: visible;
+    overflow: visible !important;
   }
 
   .previewLive {
     transition: all 200ms ease-in-out;
+    overflow: visible;
   }
 
   .selectWrapper {

package/src/components/PromoBanner/PromoBanner.tsx

@@ -7,6 +7,10 @@ interface PromoBannerProps {
   className?: string;
   image?: string;
   alignImage?: "bottom" | "top";
+  /** Remove top padding from item on sm and smaller breakpoints */
+  flushTopSmDown?: boolean;
+  /** Remove bottom padding from item on sm and smaller breakpoints */
+  flushBottomSmDown?: boolean;
   imageFullWidth?: boolean;
   /** Make image extend to the edge of viewport even when inside container */
   bleedImage?: boolean;
@@ -21,6 +25,8 @@ export const PromoBanner = ({
   image,
   className,
   alignImage,
+  flushTopSmDown,
+  flushBottomSmDown,
   bleedImage,
   children,
   itemClassName,
@@ -28,7 +34,12 @@ export const PromoBanner = ({
   variant,
   imageFullWidth,
 }: PromoBannerProps) => {
-  const classes = cx(CLASS_ROOT, className);
+  const classes = cx(CLASS_ROOT, className, {
+    [`${CLASS_ROOT}--flush-top-sm-down`]: flushTopSmDown,
+    [`${CLASS_ROOT}--flush-bottom-sm-down`]: flushBottomSmDown,
+    [`${CLASS_ROOT}--reverse`]: variant === "reverse" && !!image,
+    [`${CLASS_ROOT}--vertical`]: variant === "vertical",
+  });
   return (
     <div className={classes}>
       <Grid columnGapSize="large">

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

@@ -1,5 +1,4 @@
 @use "sass:map" as sassmap;
-@use "./../../../styles/tools/convert";
 @use "./../../../styles/tools/generate";
 @use "./../../../styles/tokens/breakpoint";
 @use "./../../../styles/tokens/space";
@@ -15,15 +14,36 @@
     padding-bottom: space.get("large");
   }
 
+  &.grid__col {
+    @include breakpoint.get("sm", "down") {
+      padding-right: 0 !important;
+    }
+
+    padding-left: 0 !important;
+  }
+
   display: flex;
   flex-direction: column;
   justify-content: center;
+  min-width: 0;
 
   > * {
     width: fit-content;
   }
 }
 
+@mixin promo-banner-item-no-top-padding-sm-down() {
+  @include breakpoint.get("sm", "down") {
+    padding-top: 0;
+  }
+}
+
+@mixin promo-banner-item-no-bottom-padding-sm-down() {
+  @include breakpoint.get("sm", "down") {
+    padding-bottom: 0;
+  }
+}
+
 @mixin promo-banner-image() {
   order: 2;
   text-align: end;
@@ -34,6 +54,14 @@
     padding-top: 0;
     padding-bottom: 0;
   }
+
+  &.grid__col {
+    @include breakpoint.get("sm", "down") {
+      padding-left: 0 !important;
+    }
+
+    padding-right: 0 !important;
+  }
 }
 
 @mixin promo-banner-image-bleed-right() {
@@ -43,14 +71,10 @@
 
   > * {
     // Extend image to the right edge of viewport even when inside .container
-    margin-right: calc((50vw - 100%) * -1);
-
-    @include breakpoint.get("md", "down") {
-      margin-right: calc((65vw - 100%) * -1);
-    }
+    transform: translateX(calc(50vw - 100% + -20px));
 
     @include breakpoint.get("sm", "down") {
-      margin-right: calc(60vw - 100%);
+      transform: translate(10px);
     }
   }
 }

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

@@ -1,11 +1,52 @@
 @use "./mixins";
+@use "./../../../styles/tokens/breakpoint";
+@use "./../../../styles/tokens/space";
 
 @layer components {
   .promo-banner {
+    .grid {
+      margin-left: 0 !important;
+      margin-right: 0 !important;
+    }
+
     &__item {
       @include mixins.promo-banner-item;
     }
 
+    &--flush-top-sm-down {
+      .promo-banner__item {
+        @include mixins.promo-banner-item-no-top-padding-sm-down;
+      }
+    }
+
+    &--flush-bottom-sm-down {
+      .promo-banner__item {
+        @include mixins.promo-banner-item-no-bottom-padding-sm-down;
+      }
+    }
+
+    &--vertical {
+      .promo-banner__item.grid__col,
+      .promo-banner__image.grid__col:not(.promo-banner__image--bleed-right) {
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+      }
+    }
+
+    &--reverse {
+      @include breakpoint.get("md") {
+        .promo-banner__item.grid__col {
+          padding-left: space.get("medium") !important;
+          padding-right: 0 !important;
+        }
+
+        .promo-banner__image.grid__col {
+          padding-left: 0 !important;
+          padding-right: space.get("medium") !important;
+        }
+      }
+    }
+
     &__image {
       @include mixins.promo-banner-image;
 

package/src/components/PromoBanner/tests/PromoBanner.unit.test.js

@@ -124,6 +124,34 @@ describe("PromoBanner", () => {
           expect(item).toHaveClass("promo-banner__item", "custom-item-class");
         });
       });
+
+      describe("flushTopSmDown", () => {
+        it("applies explicit top flush modifier class", () => {
+          render(<PromoBanner flushTopSmDown>Content</PromoBanner>);
+          const banner = document.querySelector(".promo-banner");
+          expect(banner).toHaveClass("promo-banner--flush-top-sm-down");
+        });
+
+        it("does not apply explicit top flush modifier class when disabled", () => {
+          render(<PromoBanner>Content</PromoBanner>);
+          const banner = document.querySelector(".promo-banner");
+          expect(banner).not.toHaveClass("promo-banner--flush-top-sm-down");
+        });
+      });
+
+      describe("flushBottomSmDown", () => {
+        it("applies explicit bottom flush modifier class", () => {
+          render(<PromoBanner flushBottomSmDown>Content</PromoBanner>);
+          const banner = document.querySelector(".promo-banner");
+          expect(banner).toHaveClass("promo-banner--flush-bottom-sm-down");
+        });
+
+        it("does not apply explicit bottom flush modifier class when disabled", () => {
+          render(<PromoBanner>Content</PromoBanner>);
+          const banner = document.querySelector(".promo-banner");
+          expect(banner).not.toHaveClass("promo-banner--flush-bottom-sm-down");
+        });
+      });
     });
 
     describe("variant", () => {
@@ -160,6 +188,12 @@ describe("PromoBanner", () => {
       });
 
       describe("vertical variant", () => {
+        it("applies vertical modifier class to root", () => {
+          render(<PromoBanner variant="vertical">Content</PromoBanner>);
+          const banner = document.querySelector(".promo-banner");
+          expect(banner).toHaveClass("promo-banner--vertical");
+        });
+
         it("applies vertical variant column layout", () => {
           render(<PromoBanner variant="vertical">Content</PromoBanner>);
           const contentCol = document
@@ -202,6 +236,16 @@ describe("PromoBanner", () => {
       });
 
       describe("reverse variant", () => {
+        it("applies reverse modifier class to root", () => {
+          render(
+            <PromoBanner variant="reverse" image="test.jpg">
+              Content
+            </PromoBanner>,
+          );
+          const banner = document.querySelector(".promo-banner");
+          expect(banner).toHaveClass("promo-banner--reverse");
+        });
+
         it("applies reverse variant column layout", () => {
           render(
             <PromoBanner variant="reverse" image="test.jpg">

package/src/components/index.ts

@@ -41,6 +41,7 @@ import { Grid, GridCol } from "./Grid";
 import { Image } from "./Image";
 import { Link } from "./Link";
 import { Loader } from "./Loader";
+import { Megamenu, MegamenuBlog } from "./Megamenu";
 import {
   Modal,
   ModalBody,
@@ -154,6 +155,8 @@ export {
   List,
   ListItem,
   Loader,
+  Megamenu,
+  MegamenuBlog,
   Message,
   Modal,
   ModalBody,

package/src/styles/utilities/horizontal-scroll.scss

@@ -7,25 +7,42 @@
 @layer utilities {
   [class*="horizontal-scroll"],
   .table-scrollable {
-    scrollbar-color: var(--color-fill-contrast) var(--color-surface-moderate);
-    scrollbar-width: thin;
     scroll-snap-type: x mandatory;
 
     > * {
       scroll-snap-align: start;
     }
 
-    &::-webkit-scrollbar {
-      height: convert.to-rem(6px);
-      appearance: none;
-      background-color: var(--color-surface-moderate);
-      border-radius: 99px;
+    @supports selector(::-webkit-scrollbar) {
+      &::-webkit-scrollbar {
+        height: convert.to-rem(6px);
+        appearance: none;
+        background-color: var(--color-surface-moderate);
+        border-radius: 99px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background-color: var(--color-surface-moderate);
+        border-radius: 99px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        opacity: 1;
+        background-color: var(--color-fill-contrast);
+        border-radius: 99px;
+      }
+
+      &:hover::-webkit-scrollbar-thumb,
+      &:active::-webkit-scrollbar-thumb,
+      &::-webkit-scrollbar-thumb:hover,
+      &::-webkit-scrollbar-thumb:active {
+        background-color: var(--color-fill-contrast) !important;
+      }
     }
 
-    &::-webkit-scrollbar-thumb {
-      opacity: 1;
-      background-color: var(--color-fill-contrast);
-      border-radius: 99px;
+    @supports not selector(::-webkit-scrollbar) {
+      scrollbar-color: var(--color-fill-contrast) var(--color-surface-moderate);
+      scrollbar-width: thin;
     }
   }