@orangesk/orange-design-system 3.7.0 → 3.8.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/Forms/SegmentedControl/SegmentedControl.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import cx from "classnames";
+import React, { createContext, type ReactNode, useContext } from "react";
+
+import { Label } from "../Label";
+import { Radio } from "../Radio";
+import type { RadioProps } from "../Radio/Radio";
+
+const CLASS_ROOT = "segmented-control";
+interface SegmentedControlContextValue {
+  name: string;
+  isInvalid: boolean;
+  describedBy?: string;
+}
+
+const SegmentedControlContext =
+  createContext<SegmentedControlContextValue | null>(null);
+
+export interface SegmentedControlProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  name: string;
+  isInvalid?: boolean;
+  children?: ReactNode;
+}
+
+type SegmentedControlInputProps = Omit<
+  RadioProps,
+  | "id"
+  | "name"
+  | "value"
+  | "type"
+  | "checked"
+  | "defaultChecked"
+  | "disabled"
+  | "isChecked"
+  | "isDisabled"
+  | "isInvalid"
+  | "children"
+>;
+
+export interface SegmentedControlItemProps
+  extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "htmlFor"> {
+  id: string;
+  value: string;
+  isChecked?: boolean;
+  isDisabled?: boolean;
+  inputProps?: SegmentedControlInputProps;
+  children: ReactNode;
+}
+
+const SegmentedControl: React.FC<SegmentedControlProps> = ({
+  name,
+  isInvalid = false,
+  "aria-describedby": describedBy,
+  className,
+  children,
+  ...other
+}) => (
+  <div
+    className={cx(
+      CLASS_ROOT,
+      { [`${CLASS_ROOT}--invalid`]: isInvalid },
+      className,
+    )}
+    {...other}
+  >
+    <SegmentedControlContext.Provider value={{ name, isInvalid, describedBy }}>
+      {children}
+    </SegmentedControlContext.Provider>
+  </div>
+);
+
+const SegmentedControlItem: React.FC<SegmentedControlItemProps> = ({
+  id,
+  value,
+  isChecked,
+  isDisabled,
+  inputProps,
+  className,
+  children,
+  ...other
+}) => {
+  const context = useContext(SegmentedControlContext);
+
+  if (context === null) {
+    throw new Error(
+      "SegmentedControlItem must be rendered inside SegmentedControl.",
+    );
+  }
+
+  const { name, isInvalid, describedBy: groupDescribedBy } = context;
+  const describedBy = [groupDescribedBy, inputProps?.["aria-describedby"]]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <Label
+      htmlFor={id}
+      className={cx(`${CLASS_ROOT}__item`, className)}
+      {...other}
+    >
+      <Radio
+        {...inputProps}
+        id={id}
+        name={name}
+        value={value}
+        isChecked={isChecked}
+        isDisabled={isDisabled}
+        isInvalid={isInvalid}
+        aria-invalid={isInvalid || undefined}
+        aria-describedby={describedBy || undefined}
+      />
+      <span className={`${CLASS_ROOT}__label`}>{children}</span>
+    </Label>
+  );
+};
+
+SegmentedControl.displayName = "SegmentedControl";
+SegmentedControlItem.displayName = "SegmentedControlItem";
+
+export { SegmentedControl, SegmentedControlItem };

package/src/components/Forms/SegmentedControl/index.ts

@@ -0,0 +1,5 @@
+export type {
+  SegmentedControlItemProps,
+  SegmentedControlProps,
+} from "./SegmentedControl";
+export { SegmentedControl, SegmentedControlItem } from "./SegmentedControl";

package/src/components/Forms/SegmentedControl/styles/mixins.scss

@@ -0,0 +1,52 @@
+@use "../../../../styles/tokens/space";
+@use "../../../../styles/tools/convert";
+
+@mixin base {
+  display: inline-flex;
+  width: fit-content;
+  max-width: 100%;
+  background: var(--color-fill-primary);
+}
+
+@mixin item {
+  position: relative;
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: space.get("small");
+  min-height: convert.to-rem(50px);
+  min-width: 0;
+  padding: convert.to-rem(13px) convert.to-rem(15px);
+  font-weight: 700;
+  border: 2px solid var(--color-border-strong);
+  border-radius: 0;
+}
+
+@mixin first-item {
+  border-start-start-radius: space.get("small");
+  border-end-start-radius: space.get("small");
+}
+
+@mixin adjacent-item {
+  margin-inline-start: -2px;
+}
+
+@mixin last-item {
+  border-start-end-radius: space.get("small");
+  border-end-end-radius: space.get("small");
+}
+
+@mixin selected {
+  z-index: 1;
+  border-color: var(--color-border-accent);
+}
+
+@mixin disabled {
+  cursor: not-allowed;
+  color: var(--color-text-secondary);
+  background: var(--color-surface-subtle);
+}
+
+@mixin invalid {
+  border-color: var(--color-border-negative);
+}