@orangesk/orange-design-system 2.0.0-beta.42 → 2.0.0-beta.44

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

@@ -51,6 +51,18 @@
       }
     }
 
+    &--placement-top {
+      &[open] {
+        display: flex;
+        flex-direction: column-reverse;
+
+        summary {
+          margin-top: space.get("large");
+          margin-bottom: 0;
+        }
+      }
+    }
+
     &[open] {
       svg[data-summary-icon] {
         transform: rotate(180deg) !important;

package/src/components/Expander/tests/Expander.conformance.test.jsx

@@ -47,6 +47,10 @@ const example = (
     >
       Content
     </Expander>
+
+    <Expander summary="Open above trigger" placement="top">
+      Content
+    </Expander>
   </>
 );
 

package/src/components/Expander/tests/Expander.unit.test.jsx

@@ -184,4 +184,13 @@ describe("Expander", () => {
     );
     expect(getByTestId("test-id")).toHaveClass("expander--fullwidth");
   });
+
+  it("applies placement-top class when placement prop is top", () => {
+    const { getByTestId } = render(
+      <Expander data-testid="test-id" summary="Show details" placement="top">
+        Content
+      </Expander>,
+    );
+    expect(getByTestId("test-id")).toHaveClass("expander--placement-top");
+  });
 });

package/src/components/Grid/Grid.tsx

@@ -5,17 +5,20 @@ import { genResponsiveClasses } from "../../utils";
 export type GridVAlign = "stretch" | "start" | "end" | "center";
 export type GridHAlign = "end" | "center" | "space-around" | "space-between";
 export type GridRowGapSize =
+  | "none"
+  | "xsmall"
   | "small"
   | "medium"
   | "large"
   | "xlarge"
-  | Record<string, "small" | "medium" | "large" | "xlarge">;
+  | Record<string, "none" | "xsmall" | "small" | "medium" | "large" | "xlarge">;
 export type GridColumnGapSize =
   | "none"
   | "small"
   | "default"
   | "large"
-  | Record<string, "none" | "small" | "default" | "large">;
+  | "xlarge"
+  | Record<string, "none" | "small" | "default" | "large" | "xlarge">;
 
 export interface GridProps extends React.HTMLAttributes<HTMLElement> {
   vAlign?: GridVAlign;

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

@@ -2,12 +2,13 @@
 
 $grid-base: 12 !default;
 
-$grid-row-gap-sizes: ("small", "medium", "large", "xlarge");
-$grid-column-gap-sizes: ("none", "small", "default", "large");
+$grid-row-gap-sizes: ("none", "xsmall", "small", "medium", "large", "xlarge");
+$grid-column-gap-sizes: ("none", "small", "default", "large", "xlarge");
 
 $column-gap: (
   none: 0,
   small: space.get("xsmall"),
   default: space.get("small"),
   large: space.get("medium"),
+  xlarge: space.get("large"),
 );

package/src/components/Grid/tests/Grid.unit.test.jsx

@@ -52,16 +52,20 @@ describe("Grid", () => {
     expect(getByTestId("test-id")).toHaveClass("grid--justify-height");
   });
 
-  ["medium", "large", "xlarge"].forEach((rowGapSize) => {
-    it(`applies grid-row-gap--${rowGapSize} class when rowGapSize is ${rowGapSize}`, () => {
-      const { getByTestId } = render(
-        <Grid data-testid="test-id" rowGapSize={rowGapSize} />,
-      );
-      expect(getByTestId("test-id")).toHaveClass(`grid-row-gap--${rowGapSize}`);
-    });
-  });
-
-  ["small", "large", "none"].forEach((columnGapSize) => {
+  ["none", "xsmall", "small", "medium", "large", "xlarge"].forEach(
+    (rowGapSize) => {
+      it(`applies grid-row-gap--${rowGapSize} class when rowGapSize is ${rowGapSize}`, () => {
+        const { getByTestId } = render(
+          <Grid data-testid="test-id" rowGapSize={rowGapSize} />,
+        );
+        expect(getByTestId("test-id")).toHaveClass(
+          `grid-row-gap--${rowGapSize}`,
+        );
+      });
+    },
+  );
+
+  ["small", "large", "xlarge", "none"].forEach((columnGapSize) => {
     it(`applies grid-column-gap--${columnGapSize} class when columnGapSize is ${columnGapSize}`, () => {
       const { getByTestId } = render(
         <Grid data-testid="test-id" columnGapSize={columnGapSize} />,
@@ -72,6 +76,32 @@ describe("Grid", () => {
     });
   });
 
+  it("applies responsive row gap classes when rowGapSize is object", () => {
+    const { getByTestId } = render(
+      <Grid
+        data-testid="test-id"
+        rowGapSize={{ xs: "medium", md: "xlarge" }}
+      />,
+    );
+    expect(getByTestId("test-id")).toHaveClass(
+      "grid-row-gap--medium",
+      "grid-row-gap--md-xlarge",
+    );
+  });
+
+  it("applies responsive column gap classes when columnGapSize is object", () => {
+    const { getByTestId } = render(
+      <Grid
+        data-testid="test-id"
+        columnGapSize={{ xs: "small", lg: "xlarge" }}
+      />,
+    );
+    expect(getByTestId("test-id")).toHaveClass(
+      "grid-column-gap--small",
+      "grid-column-gap--lg-xlarge",
+    );
+  });
+
   it("merges additional className", () => {
     const { getByTestId } = render(
       <Grid data-testid="test-id" className="test-class" />,

package/src/components/Megamenu/Megamenu.static.ts

@@ -15,6 +15,9 @@ interface MegamenuConfig {
   removeOnDestroy?: boolean;
 }
 
+const MODAL_OPEN_CLASS = "has-modal";
+const LOCKED_SCROLL_TOP_ATTR = "data-lock-scrolltop";
+
 const defaultConfig: Required<MegamenuConfig> = {
   dataToggle: "data-toggle",
   activeClass: "is-active",
@@ -44,6 +47,27 @@ export default class Megamenu {
   touchstartHandler!: () => void;
   instanceName!: string;
 
+  private isModalOpen(): boolean {
+    return document.body.classList.contains(MODAL_OPEN_CLASS);
+  }
+
+  private getLockedScrollTop(): number | null {
+    const lockedScrollTopRaw = document.body.getAttribute(
+      LOCKED_SCROLL_TOP_ATTR,
+    );
+    const lockedScrollTop = Number.parseInt(lockedScrollTopRaw || "", 10);
+
+    return Number.isFinite(lockedScrollTop) ? lockedScrollTop : null;
+  }
+
+  private getEffectiveScrollY(): number {
+    if (!this.isModalOpen()) {
+      return window.scrollY;
+    }
+
+    return this.getLockedScrollTop() ?? window.scrollY;
+  }
+
   constructor(element: HTMLElement, config: MegamenuConfig = {}) {
     if ((element as any).ODS_Megamenu) {
       return (element as any).ODS_Megamenu;
@@ -179,6 +203,7 @@ export default class Megamenu {
 
     // Set initial tab indices for accessibility
     this.updateTabIndices();
+    this.handleScroll();
   }
 
   shouldUseMobileTrigger(button: HTMLButtonElement) {
@@ -407,9 +432,10 @@ export default class Megamenu {
     const topElement = this.element.querySelector(
       '[data-hide-when-sticky="true"]',
     ) as HTMLElement;
+    const effectiveScrollY = this.getEffectiveScrollY();
 
     if (topElement) {
-      if (window.scrollY > 15) {
+      if (effectiveScrollY > 15) {
         topElement.classList.add("is-hidden");
         this.element.classList.add("top-hidden");
       } else {

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

@@ -148,6 +148,10 @@
   &.is-sticky {
     position: fixed;
 
+    body.has-modal & {
+      padding-right: var(--ods-modal-scrollbar-width, 0px);
+    }
+
     #{config.$class-root}__main {
       position: sticky;
       top: 0;

package/src/components/Modal/Modal.static.ts

@@ -25,6 +25,9 @@ const defaultConfig = (): ModalConfig => ({
   modalsRoot: "#root-modals",
 });
 
+const MODAL_SCROLLBAR_WIDTH_VAR = "--ods-modal-scrollbar-width";
+const BODY_LOCK_SCROLL_TOP_ATTR = "data-lock-scrolltop";
+
 interface HTMLElementWithModal extends HTMLElement {
   ODS_Modal?: Modal;
 }
@@ -172,15 +175,27 @@ export default class Modal {
   // Track if body is locked
   private static isLocked = false;
 
+  private static resolveBodyLockClassName(
+    className?: string,
+    context?: unknown,
+  ): string {
+    const modalContext = context as Modal | undefined;
+
+    return (
+      className ||
+      modalContext?.config?.classModalIsOpenBody ||
+      defaultConfig().classModalIsOpenBody
+    );
+  }
+
   static lockBody(className?: string, root?: string): void {
     if (Modal.isLocked) return;
 
-    const actualClassName =
-      className || (this as unknown as Modal).config?.classModalIsOpenBody;
+    const actualClassName = Modal.resolveBodyLockClassName(className, this);
 
     // Store scroll position
     const scrollY = window.scrollY;
-    document.body.setAttribute("data-lock-scrolltop", scrollY.toString());
+    document.body.setAttribute(BODY_LOCK_SCROLL_TOP_ATTR, scrollY.toString());
 
     const scrollbarWidth =
       window.innerWidth - document.documentElement.clientWidth;
@@ -191,6 +206,10 @@ export default class Modal {
     document.body.style.left = "0";
     document.body.style.right = "0";
     document.body.style.paddingRight = `${scrollbarWidth}px`;
+    document.body.style.setProperty(
+      MODAL_SCROLLBAR_WIDTH_VAR,
+      `${scrollbarWidth}px`,
+    );
 
     // add modal class
     document.body.classList.add(actualClassName);
@@ -200,9 +219,11 @@ export default class Modal {
   static unlockBody(className?: string, root?: string): void {
     if (!Modal.isLocked) return;
 
-    const actualClassName =
-      className || (this as unknown as Modal).config?.classModalIsOpenBody;
-    const scrollTop = document.body.getAttribute("data-lock-scrolltop") || "0";
+    const actualClassName = Modal.resolveBodyLockClassName(className, this);
+    const scrollTop = Number.parseInt(
+      document.body.getAttribute(BODY_LOCK_SCROLL_TOP_ATTR) || "0",
+      10,
+    );
 
     // Remove lock styles
     document.body.style.position = "";
@@ -210,13 +231,14 @@ export default class Modal {
     document.body.style.left = "";
     document.body.style.right = "";
     document.body.style.paddingRight = "";
+    document.body.style.removeProperty(MODAL_SCROLLBAR_WIDTH_VAR);
 
     // remove modal class
     document.body.classList.remove(actualClassName);
 
     // Restore scroll position instantly (ignore scroll-behavior: smooth)
     window.scrollTo({
-      top: parseInt(scrollTop, 10),
+      top: Number.isFinite(scrollTop) ? scrollTop : 0,
       left: 0,
       behavior: "instant",
     });

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

@@ -15,18 +15,21 @@ $sizes: (
     font-size: convert.to-rem(14px) "!important",
     line-height: 1rem "!important",
     font-weight: 700,
+    border-width: 1px,
   ),
   small: (
     padding: convert.to-rem(2px) convert.to-rem(8px),
     font-size: convert.to-rem(12px) "!important",
     line-height: convert.to-rem(14px) "!important",
     font-weight: 400,
+    border-width: 2px,
   ),
   large: (
     padding: convert.to-rem(11px) convert.to-rem(15px),
     font-size: convert.to-rem(16px) "!important",
     line-height: convert.to-rem(18px) "!important",
     font-weight: 700,
+    border-width: 2px,
   ),
 );
 
@@ -83,7 +86,8 @@ $colors: (
   "transparent": (
     background-color: transparent,
     color: var(--color-text-default),
-    border: 1px solid var(--color-border-strong),
+    border-color: var(--color-border-strong),
+    border-style: solid,
   ),
 );
 

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

@@ -19,7 +19,8 @@
 }
 
 @mixin color-transparent() {
-  border: 1px solid var(--color-border-strong);
+  border-color: var(--color-border-strong);
+  border-style: solid;
 }
 
 @mixin buttton-disabled($is-icon: false) {

package/src/styles/base/globals.scss

@@ -31,6 +31,7 @@ html,
 body {
   padding: 0;
   margin: 0;
+  -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
 }
 

package/src/styles/export/base.js

@@ -2,7 +2,7 @@
 // Do not edit this file directly - edit the SCSS source instead
 
 export const exports = {
-  "font-family": "OrangeSK Neue, Arial, Helvetica Neue, sans-serif",
+  "font-family": "OrangeSK Neue, Helvetica Neue, Helvetica, Arial, sans-serif",
   "font-size": "16px",
   "line-height": "1.25",
   "background": "var(--color-background-primary)",

package/src/styles/tokens/base.scss

@@ -1,7 +1,7 @@
 @use "sass:color" as sasscolor;
 @use "./color";
 
-$font-family: "OrangeSK Neue", Arial, "Helvetica Neue", sans-serif;
+$font-family: "OrangeSK Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;
 $font-size: 16px;
 $line-height: 1.25;