@orangesk/orange-design-system 3.7.0 → 3.9.0

package/src/components/Drawer/Drawer.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import cx from "classnames";
+import React, { useEffect, useMemo } from "react";
+import { useStatic } from "../../utils/hooks";
+import DrawerStatic from "./Drawer.static";
+
+const CLASS_ROOT = "drawer";
+
+interface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {
+  id: string;
+  isActive?: boolean;
+  onHide?: () => void;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+const Drawer: React.FC<DrawerProps> = ({
+  "aria-label": ariaLabel = "Drawer",
+  "aria-labelledby": ariaLabelledBy,
+  className,
+  children,
+  id,
+  isActive,
+  onHide,
+  ...other
+}) => {
+  const isReactControlled = isActive !== undefined;
+  const drawerConfig = useMemo(
+    () => (isReactControlled ? { disablePortal: true } : {}),
+    [isReactControlled],
+  );
+  const [drawerRef, instance] = useStatic(DrawerStatic, drawerConfig);
+
+  useEffect(() => {
+    if (!instance.current || !onHide) return;
+
+    const handleHide = () => onHide();
+    instance.current.instance.on("hide", handleHide);
+
+    return () => {
+      instance.current?.instance.off("hide", handleHide);
+    };
+  }, [instance, onHide]);
+
+  useEffect(() => {
+    if (!instance.current) return;
+
+    if (isActive) {
+      instance.current.show();
+    } else if (isActive === false) {
+      instance.current.hide();
+    }
+  }, [instance, isActive]);
+
+  return (
+    <div
+      id={id}
+      {...(!isReactControlled && { "data-drawer": true })}
+      className={cx(CLASS_ROOT, className)}
+      ref={drawerRef}
+      role="dialog"
+      aria-hidden="true"
+      aria-modal="true"
+      aria-label={ariaLabelledBy ? undefined : ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+    >
+      <div
+        className={`${CLASS_ROOT}__overlay`}
+        tabIndex={-1}
+        data-a11y-dialog-hide
+      />
+      <div className={`${CLASS_ROOT}__panel`} role="document" {...other}>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+Drawer.displayName = "Drawer";
+
+export { Drawer };

package/src/components/Drawer/DrawerBody.tsx

@@ -0,0 +1,21 @@
+import cx from "classnames";
+import React from "react";
+
+interface DrawerBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+const DrawerBody: React.FC<DrawerBodyProps> = ({
+  children,
+  className,
+  ...other
+}) => (
+  <div className={cx("drawer__body", className)} {...other}>
+    {children}
+  </div>
+);
+
+DrawerBody.displayName = "DrawerBody";
+
+export { DrawerBody };

package/src/components/Drawer/DrawerFooter.tsx

@@ -0,0 +1,21 @@
+import cx from "classnames";
+import React from "react";
+
+interface DrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+const DrawerFooter: React.FC<DrawerFooterProps> = ({
+  children,
+  className,
+  ...other
+}) => (
+  <div className={cx("drawer__footer", className)} {...other}>
+    {children}
+  </div>
+);
+
+DrawerFooter.displayName = "DrawerFooter";
+
+export { DrawerFooter };

package/src/components/Drawer/DrawerHeader.tsx

@@ -0,0 +1,21 @@
+import cx from "classnames";
+import React from "react";
+
+interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+const DrawerHeader: React.FC<DrawerHeaderProps> = ({
+  children,
+  className,
+  ...other
+}) => (
+  <div className={cx("drawer__header", className)} {...other}>
+    {children}
+  </div>
+);
+
+DrawerHeader.displayName = "DrawerHeader";
+
+export { DrawerHeader };

package/src/components/Drawer/index.ts

@@ -0,0 +1,5 @@
+export { Drawer } from "./Drawer";
+export { default as DrawerStatic } from "./Drawer.static";
+export { DrawerBody } from "./DrawerBody";
+export { DrawerFooter } from "./DrawerFooter";
+export { DrawerHeader } from "./DrawerHeader";

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

@@ -0,0 +1,17 @@
+@use "../../../styles/tools/convert";
+@use "../../../styles/tokens/overlay";
+
+$overlay-bg-color: overlay.$background !default;
+$overlay-z-index: 500 !default;
+$overlay-e: overlay.$transition !default;
+
+$overlay: (
+  background-color: $overlay-bg-color,
+);
+
+$panel: (
+  max-width: convert.to-rem(700px),
+  max-height: min(80vh, convert.to-rem(520px)),
+  desktop-width: convert.to-rem(380px),
+  desktop-max-width: 90vw,
+);

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

@@ -0,0 +1,119 @@
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/convert";
+@use "../../../styles/tools/generate";
+@use "sass:map";
+@use "./config";
+
+@mixin position {
+  position: fixed;
+  inset: 0;
+}
+
+@mixin hide {
+  visibility: hidden;
+  pointer-events: none;
+  transition: visibility 0s linear 0.2s;
+}
+
+@mixin drawer {
+  @include position;
+
+  z-index: 999;
+  display: flex;
+  align-items: flex-end;
+}
+
+@mixin overlay {
+  @include position;
+  @include generate.css-map(config.$overlay);
+
+  z-index: config.$overlay-z-index;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  transform: scale(1.1);
+  transition:
+    opacity config.$overlay-e,
+    transform config.$overlay-e;
+}
+
+@mixin overlay-active {
+  width: 100%;
+  height: 100%;
+  opacity: 1;
+  transform: scale(1);
+}
+
+@mixin panel {
+  position: relative;
+  z-index: config.$overlay-z-index + 1;
+  display: flex;
+  flex-flow: column;
+  width: 100%;
+  max-height: map.get(config.$panel, max-height);
+  margin: 0 auto;
+  overflow: hidden;
+  background: var(--color-surface-primary);
+  border-radius: 0;
+  transform: translateY(100%);
+  transition: transform config.$overlay-e;
+  -webkit-overflow-scrolling: touch;
+}
+
+@mixin panel-active {
+  transform: translateY(0);
+}
+
+@mixin desktop {
+  justify-content: flex-end;
+}
+
+@mixin panel-desktop {
+  width: map.get(config.$panel, desktop-width);
+  max-width: map.get(config.$panel, desktop-max-width);
+  max-height: 100%;
+  height: 100%;
+  margin: 0;
+  transform: translateX(100%);
+}
+
+@mixin panel-active-desktop {
+  transform: translateX(0);
+}
+
+@mixin header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  flex: 0 0 auto;
+  padding: space.get("medium") space.get("small");
+  background: var(--color-surface-primary);
+
+  *:last-child {
+    margin-bottom: 0px;
+  }
+}
+
+@mixin body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0 space.get("small");
+
+  *:last-child {
+    margin-bottom: 0px;
+  }
+}
+
+@mixin footer {
+  flex: 0 0 auto;
+  padding: space.get("medium") space.get("small");
+
+  *:last-child {
+    margin-bottom: 0px;
+  }
+}
+
+@mixin reduced-motion {
+  transition-duration: 0.01ms;
+}

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

@@ -0,0 +1,71 @@
+@use "../../../styles/tokens/breakpoint";
+@use "../../../styles/tokens/space";
+@use "./mixins";
+
+@layer components {
+  .drawer {
+    @include mixins.drawer;
+
+    &[aria-hidden="true"] {
+      @include mixins.hide;
+    }
+  }
+
+  .drawer__overlay {
+    @include mixins.overlay;
+
+    .drawer.is-active & {
+      @include mixins.overlay-active;
+    }
+  }
+
+  .drawer__panel {
+    @include mixins.panel;
+
+    // Keep a form wrapper equivalent to the panel's original flex layout.
+    > form {
+      display: flex;
+      flex: 1 1 auto;
+      flex-flow: column;
+      min-height: 0;
+    }
+
+    .drawer.is-active & {
+      @include mixins.panel-active;
+    }
+  }
+
+  .drawer__header {
+    @include mixins.header;
+  }
+
+  .drawer__body {
+    @include mixins.body;
+  }
+
+  .drawer__footer {
+    @include mixins.footer;
+  }
+
+  @include breakpoint.get("lg") {
+    .drawer {
+      @include mixins.desktop;
+    }
+
+    .drawer__panel {
+      @include mixins.panel-desktop;
+    }
+
+    .drawer.is-active .drawer__panel {
+      @include mixins.panel-active-desktop;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .drawer,
+    .drawer__overlay,
+    .drawer__panel {
+      @include mixins.reduced-motion;
+    }
+  }
+}

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

@@ -0,0 +1,149 @@
+import { fireEvent } from "@testing-library/dom";
+import { axe } from "vitest-axe";
+
+import Drawer from "../Drawer.static";
+
+const instances = [];
+
+const renderDrawer = () => {
+  document.body.innerHTML = `
+    <div id="root">
+      <button id="open-drawer" data-a11y-dialog-show="drawer">Open</button>
+    </div>
+    <div id="root-drawers">
+      <div id="drawer" class="drawer" data-drawer role="dialog" aria-modal="true"
+        aria-hidden="true" aria-labelledby="drawer-title">
+        <div class="drawer__overlay" tabindex="-1" data-a11y-dialog-hide></div>
+        <div class="drawer__panel" role="document">
+          <header class="drawer__header">
+            <h2 id="drawer-title" data-a11y-dialog-initial-focus>Drawer title</h2>
+            <button class="drawer__close" data-a11y-dialog-hide>Close</button>
+          </header>
+          <div class="drawer__body"><p>Drawer content</p></div>
+        </div>
+      </div>
+    </div>
+  `;
+
+  const drawer = document.querySelector("#drawer");
+  const instance = new Drawer(drawer);
+  instances.push(instance);
+
+  return { drawer, instance, opener: document.querySelector("#open-drawer") };
+};
+
+afterEach(() => {
+  instances.forEach((instance) => instance.destroy());
+  instances.length = 0;
+  document.body.innerHTML = "";
+  document.body.removeAttribute("data-lock-scrolltop");
+  document.body.className = "";
+  document.body.style.cssText = "";
+});
+
+it("moves the drawer into root-drawers and starts hidden", () => {
+  const { drawer } = renderDrawer();
+
+  expect(drawer.parentElement.id).toBe("root-drawers");
+  expect(drawer).toHaveAttribute("aria-hidden", "true");
+});
+
+it("warns when the drawer root is missing", () => {
+  const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+  document.body.innerHTML = `
+    <div id="drawer" class="drawer" data-drawer role="dialog" aria-modal="true">
+      <div class="drawer__overlay" tabindex="-1" data-a11y-dialog-hide></div>
+      <div class="drawer__panel" role="document"></div>
+    </div>
+  `;
+
+  new Drawer(document.querySelector("#drawer"));
+
+  expect(warn).toHaveBeenCalledWith(expect.stringContaining("#root-drawers"));
+  warn.mockRestore();
+});
+
+it("opens, locks body scroll, and closes when the overlay is clicked", () => {
+  const { drawer, opener } = renderDrawer();
+
+  fireEvent.click(opener);
+  expect(drawer).toHaveClass("is-active");
+  expect(drawer).not.toHaveAttribute("aria-hidden");
+  expect(document.body).toHaveClass("has-modal");
+
+  fireEvent.click(drawer.querySelector(".drawer__overlay"));
+  expect(drawer).not.toHaveClass("is-active");
+  expect(drawer).toHaveAttribute("aria-hidden", "true");
+  expect(document.body).not.toHaveClass("has-modal");
+});
+
+it("closes after a downward mobile swipe", () => {
+  Object.defineProperty(window, "innerWidth", {
+    configurable: true,
+    value: 375,
+  });
+  const { drawer, opener } = renderDrawer();
+  fireEvent.click(opener);
+
+  fireEvent.pointerDown(drawer.querySelector(".drawer__panel"), {
+    pointerId: 1,
+    isPrimary: true,
+    pointerType: "mouse",
+    clientX: 100,
+    clientY: 100,
+  });
+  fireEvent.pointerMove(drawer.querySelector(".drawer__panel"), {
+    pointerId: 1,
+    isPrimary: true,
+    pointerType: "mouse",
+    clientX: 100,
+    clientY: 200,
+  });
+  fireEvent.pointerUp(drawer.querySelector(".drawer__panel"), {
+    pointerId: 1,
+    isPrimary: true,
+    pointerType: "mouse",
+    clientX: 100,
+    clientY: 200,
+  });
+
+  expect(drawer).toHaveAttribute("aria-hidden", "true");
+});
+
+it("closes after a rightward desktop swipe", () => {
+  Object.defineProperty(window, "innerWidth", {
+    configurable: true,
+    value: 1280,
+  });
+  const { drawer, opener } = renderDrawer();
+  fireEvent.click(opener);
+
+  fireEvent.pointerDown(drawer.querySelector(".drawer__panel"), {
+    pointerId: 1,
+    isPrimary: true,
+    pointerType: "mouse",
+    clientX: 100,
+    clientY: 100,
+  });
+  fireEvent.pointerMove(drawer.querySelector(".drawer__panel"), {
+    pointerId: 1,
+    pointerType: "mouse",
+    clientX: 220,
+    clientY: 100,
+  });
+  fireEvent.pointerUp(drawer.querySelector(".drawer__panel"), {
+    pointerId: 1,
+    pointerType: "mouse",
+    clientX: 220,
+    clientY: 100,
+  });
+
+  expect(drawer).toHaveAttribute("aria-hidden", "true");
+});
+
+it("is accessible while open", async () => {
+  const { drawer, opener } = renderDrawer();
+
+  fireEvent.click(opener);
+  expect(await axe(drawer)).toHaveNoViolations();
+});

package/src/components/Footer/Footer.tsx

@@ -140,10 +140,7 @@ const Footer: React.FC<FooterProps> = ({ className, data = footerData }) => {
                 id={`${accordionIdPrefix}-footer-section-panel-${index}`}
               >
                 {column.links.map((link, linkIndex) => (
-                  <li
-                    className="mb-small"
-                    key={`footer-link-${index}-${linkIndex}`}
-                  >
+                  <li key={`footer-link-${index}-${linkIndex}`}>
                     <a href={link.url}>{link.label}</a>
                   </li>
                 ))}

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

@@ -48,7 +48,9 @@
     @include base.focusring;
   }
 
-  * {
+  *,
+  *::before,
+  *::after {
     box-sizing: border-box;
   }
 

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

@@ -3,6 +3,9 @@
 @use "../../../styles/tools/convert";
 @use "../../../styles/tokens/breakpoint";
 @use "../../Megamenu/styles/mixins" as megamenuMixins;
+@use "../../SocialButton/styles/config" as socialButtonConfig;
+@use "../../SocialButton/styles/mixins" as socialButtonMixins;
+@use "../../Icon/styles/mixins" as iconMixins;
 
 #{config.$class-root} {
   @include mixins.globals;
@@ -112,4 +115,32 @@
       margin-bottom: convert.to-rem(30px);
     }
   }
+
+  // Keep shared component styles local so the standalone bundle works on legacy pages.
+  .social-button {
+    @include socialButtonMixins.base;
+    @include socialButtonMixins.size;
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: none;
+    }
+  }
+
+  @each $name, $props in socialButtonConfig.$social-colors {
+    .social-button--#{$name} {
+      @include socialButtonMixins.color($name);
+    }
+  }
+
+  .icon {
+    @include iconMixins.base;
+    @include iconMixins.sizes;
+    @include iconMixins.colors;
+
+    use {
+      pointer-events: none;
+    }
+  }
 }

package/src/components/Footer/tests/Footer.styles.unit.test.jsx

@@ -0,0 +1,62 @@
+import * as sass from "sass";
+
+describe("Footer standalone styles", () => {
+  let stylesheet;
+  let rules;
+
+  beforeAll(() => {
+    stylesheet = document.createElement("style");
+    stylesheet.textContent = sass.compile(
+      "src/components/Footer/styles/style.scss",
+    ).css;
+    document.head.append(stylesheet);
+
+    const flattenRules = (cssRules) =>
+      Array.from(cssRules).flatMap((rule) =>
+        rule.selectorText ? [rule] : flattenRules(rule.cssRules || []),
+      );
+    rules = flattenRules(stylesheet.sheet.cssRules);
+  });
+
+  afterAll(() => stylesheet.remove());
+
+  const styleFor = (selector) =>
+    rules.find((rule) => rule.selectorText === selector)?.style;
+
+  it("sizes social buttons and icons without global ODS styles", () => {
+    expect(styleFor(".footer .social-button")?.display).toBe("inline-flex");
+    expect(styleFor(".footer .social-button")?.width).toBe("2.5rem");
+    expect(styleFor(".footer .icon")?.getPropertyValue("fill")).toBe(
+      "currentcolor",
+    );
+    expect(styleFor(".footer .icon")?.width).toBe("var(--icon-size)");
+    expect(styleFor(".footer .icon")?.height).toBe("var(--icon-size)");
+    expect(
+      styleFor(".footer .icon--medium")?.getPropertyValue("--icon-size"),
+    ).toBe("1.5rem");
+  });
+
+  it.each(["facebook-2", "x", "linkedin-2", "youtube", "instagram"])(
+    "includes theme and interaction colors for %s",
+    (name) => {
+      const selector = `.footer .social-button--${name}`;
+      expect(styleFor(selector)?.color).toBe("var(--color-text-default)");
+      expect(styleFor(`${selector}:hover`)?.color).toBe("rgb(255, 255, 255)");
+      expect(styleFor(`${selector}:active, ${selector}.is-active`)?.color).toBe(
+        "var(--color-text-inverse)",
+      );
+    },
+  );
+
+  it("keeps reused component styles inside the footer", () => {
+    const componentRules = rules.filter((rule) =>
+      /\.(social-button|icon)\b/.test(rule.selectorText),
+    );
+    expect(componentRules.length).toBeGreaterThan(0);
+    for (const rule of componentRules) {
+      for (const selector of rule.selectorText.split(",")) {
+        expect(selector.trim()).toMatch(/^\.footer /);
+      }
+    }
+  });
+});