@orangesk/orange-design-system 2.0.0-beta.31 → 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,
@@ -29,7 +35,9 @@ export const PromoBanner = ({
   imageFullWidth,
 }: PromoBannerProps) => {
   const classes = cx(CLASS_ROOT, className, {
-    [`${CLASS_ROOT}--reverse`]: variant === "reverse",
+    [`${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 (

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,22 +14,31 @@
     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-trim-top-mobile() {
+@mixin promo-banner-item-no-top-padding-sm-down() {
   @include breakpoint.get("sm", "down") {
     padding-top: 0;
   }
 }
 
-@mixin promo-banner-item-trim-bottom-mobile() {
+@mixin promo-banner-item-no-bottom-padding-sm-down() {
   @include breakpoint.get("sm", "down") {
     padding-bottom: 0;
   }
@@ -46,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() {
@@ -55,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,21 +1,50 @@
 @use "./mixins";
+@use "./../../../styles/tokens/breakpoint";
+@use "./../../../styles/tokens/space";
 
 @layer components {
   .promo-banner {
-    &:not(.promo-banner--reverse):not(.promo-banner--vertical) {
+    .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-trim-top-mobile;
+        @include mixins.promo-banner-item-no-top-padding-sm-down;
       }
     }
 
-    &.promo-banner--reverse:not(.promo-banner--vertical) {
+    &--flush-bottom-sm-down {
       .promo-banner__item {
-        @include mixins.promo-banner-item-trim-bottom-mobile;
+        @include mixins.promo-banner-item-no-bottom-padding-sm-down;
       }
     }
 
-    &__item {
-      @include mixins.promo-banner-item;
+    &--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 {

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

@@ -355,21 +355,10 @@ describe("PromoBanner Component Conformance Tests", () => {
       const horizontalItem = horizontalContainer.querySelector(
         ".promo-banner__item",
       );
-      const horizontalBanner =
-        horizontalContainer.querySelector(".promo-banner");
       const verticalItem = verticalContainer.querySelector(
         ".promo-banner__item",
       );
-      const verticalBanner = verticalContainer.querySelector(".promo-banner");
       const reverseItem = reverseContainer.querySelector(".promo-banner__item");
-      const reverseBanner = reverseContainer.querySelector(".promo-banner");
-
-      expect(horizontalBanner).not.toHaveClass("promo-banner--vertical");
-      expect(horizontalBanner).not.toHaveClass("promo-banner--reverse");
-      expect(verticalBanner).toHaveClass("promo-banner--vertical");
-      expect(verticalBanner).not.toHaveClass("promo-banner--reverse");
-      expect(reverseBanner).toHaveClass("promo-banner--reverse");
-      expect(reverseBanner).not.toHaveClass("promo-banner--vertical");
 
       expect(horizontalItem).not.toHaveClass(
         "align-items-center",

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

@@ -124,17 +124,38 @@ describe("PromoBanner", () => {
           expect(item).toHaveClass("promo-banner__item", "custom-item-class");
         });
       });
-    });
 
-    describe("variant", () => {
-      describe("default (horizontal) variant", () => {
-        it("does not apply variant modifier classes on root", () => {
+      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--reverse");
-          expect(banner).not.toHaveClass("promo-banner--vertical");
+          expect(banner).not.toHaveClass("promo-banner--flush-bottom-sm-down");
         });
+      });
+    });
 
+    describe("variant", () => {
+      describe("default (horizontal) variant", () => {
         it("uses correct column sizes without image", () => {
           render(<PromoBanner>Content</PromoBanner>);
           const contentCol = document
@@ -167,11 +188,10 @@ describe("PromoBanner", () => {
       });
 
       describe("vertical variant", () => {
-        it("applies vertical modifier class on root", () => {
+        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");
-          expect(banner).not.toHaveClass("promo-banner--reverse");
         });
 
         it("applies vertical variant column layout", () => {
@@ -216,7 +236,7 @@ describe("PromoBanner", () => {
       });
 
       describe("reverse variant", () => {
-        it("applies reverse modifier class on root", () => {
+        it("applies reverse modifier class to root", () => {
           render(
             <PromoBanner variant="reverse" image="test.jpg">
               Content
@@ -224,7 +244,6 @@ describe("PromoBanner", () => {
           );
           const banner = document.querySelector(".promo-banner");
           expect(banner).toHaveClass("promo-banner--reverse");
-          expect(banner).not.toHaveClass("promo-banner--vertical");
         });
 
         it("applies reverse variant column layout", () => {

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,