@orangesk/orange-design-system 3.7.0 → 3.9.0

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);
+}

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

@@ -0,0 +1,35 @@
+@use "./mixins";
+
+@layer components {
+  .segmented-control {
+    @include mixins.base;
+
+    &__item {
+      @include mixins.item;
+
+      &:first-child {
+        @include mixins.first-item;
+      }
+
+      & + & {
+        @include mixins.adjacent-item;
+      }
+
+      &:last-child {
+        @include mixins.last-item;
+      }
+
+      &:has(:checked) {
+        @include mixins.selected;
+      }
+
+      &:has(:disabled) {
+        @include mixins.disabled;
+      }
+
+      .segmented-control--invalid &:has(input) {
+        @include mixins.invalid;
+      }
+    }
+  }
+}

package/src/components/Forms/SegmentedControl/tests/SegmentedControl.conformance.test.jsx

@@ -0,0 +1,36 @@
+import { render } from "@testing-library/react";
+import { axe } from "vitest-axe";
+
+import { Fieldset } from "../../Fieldset";
+import { Message } from "../../Message";
+import { SegmentedControl, SegmentedControlItem } from "..";
+
+it("is accessible as a labelled radio group with feedback", async () => {
+  const { container } = render(
+    <Fieldset legend="Payment method">
+      <SegmentedControl
+        name="payment-method"
+        isInvalid
+        aria-describedby="payment-method-error"
+      >
+        <SegmentedControlItem id="payment-card" value="card">
+          Card
+        </SegmentedControlItem>
+        <SegmentedControlItem id="payment-cash" value="cash">
+          Cash
+        </SegmentedControlItem>
+      </SegmentedControl>
+      <Message id="payment-method-error" type="error">
+        Choose a payment method.
+      </Message>
+    </Fieldset>,
+  );
+
+  expect(container).toHTMLValidate({
+    rules: {
+      "element-permitted-content": "off",
+      "no-redundant-for": "off",
+    },
+  });
+  expect(await axe(container)).toHaveNoViolations();
+});

package/src/components/Forms/SegmentedControl/tests/SegmentedControl.unit.test.jsx

@@ -0,0 +1,125 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import { Fieldset } from "../../Fieldset";
+import { SegmentedControl, SegmentedControlItem } from "..";
+
+describe("SegmentedControl", () => {
+  it("renders any number of choices as one native radio group", () => {
+    render(
+      <Fieldset legend="Number type">
+        <SegmentedControl name="numberType">
+          <SegmentedControlItem id="number-new" value="new">
+            New number
+          </SegmentedControlItem>
+          <SegmentedControlItem id="number-existing" value="existing">
+            Existing number
+          </SegmentedControlItem>
+          <SegmentedControlItem id="number-transfer" value="transfer">
+            Transfer number
+          </SegmentedControlItem>
+        </SegmentedControl>
+      </Fieldset>,
+    );
+
+    const choices = screen.getAllByRole("radio");
+
+    expect(screen.getByRole("group", { name: "Number type" })).toContainElement(
+      choices[0],
+    );
+    expect(choices).toHaveLength(3);
+    expect(choices.map((choice) => choice.name)).toEqual([
+      "numberType",
+      "numberType",
+      "numberType",
+    ]);
+  });
+
+  it("selects an option through its label and preserves radio exclusivity", () => {
+    render(
+      <SegmentedControl name="delivery">
+        <SegmentedControlItem id="delivery-email" value="email">
+          Email
+        </SegmentedControlItem>
+        <SegmentedControlItem id="delivery-sms" value="sms">
+          SMS
+        </SegmentedControlItem>
+      </SegmentedControl>,
+    );
+
+    const email = screen.getByRole("radio", { name: "Email" });
+    const sms = screen.getByRole("radio", { name: "SMS" });
+
+    fireEvent.click(screen.getByText("Email"));
+    expect(email).toBeChecked();
+
+    fireEvent.click(screen.getByText("SMS"));
+    expect(email).not.toBeChecked();
+    expect(sms).toBeChecked();
+  });
+
+  it("forwards native radio states and attributes", () => {
+    render(
+      <SegmentedControl name="plan" className="custom-control">
+        <SegmentedControlItem
+          id="plan-standard"
+          value="standard"
+          isChecked
+          isDisabled
+          inputProps={{ "aria-describedby": "plan-hint" }}
+          className="custom-item"
+        >
+          Standard
+        </SegmentedControlItem>
+      </SegmentedControl>,
+    );
+
+    const choice = screen.getByRole("radio", { name: "Standard" });
+
+    expect(choice).toBeChecked();
+    expect(choice).toBeDisabled();
+    expect(choice).toHaveAttribute("value", "standard");
+    expect(choice).toHaveAttribute("aria-describedby", "plan-hint");
+    expect(choice.closest(".segmented-control")).toHaveClass("custom-control");
+    expect(choice.closest(".segmented-control__item")).toHaveClass(
+      "custom-item",
+    );
+  });
+
+  it("marks the whole radio group as invalid", () => {
+    render(
+      <SegmentedControl name="payment" isInvalid data-testid="payment-method">
+        <SegmentedControlItem id="payment-card" value="card" isChecked>
+          Card
+        </SegmentedControlItem>
+        <SegmentedControlItem id="payment-cash" value="cash">
+          Cash
+        </SegmentedControlItem>
+      </SegmentedControl>,
+    );
+
+    expect(screen.getByTestId("payment-method")).toHaveClass(
+      "segmented-control--invalid",
+    );
+    for (const choice of screen.getAllByRole("radio")) {
+      expect(choice).toHaveAttribute("aria-invalid", "true");
+      expect(choice).toHaveClass("is-invalid");
+    }
+  });
+
+  it("associates group feedback with every radio", () => {
+    render(
+      <SegmentedControl name="contact" aria-describedby="contact-error">
+        <SegmentedControlItem id="contact-email" value="email">
+          Email
+        </SegmentedControlItem>
+        <SegmentedControlItem id="contact-phone" value="phone">
+          Phone
+        </SegmentedControlItem>
+      </SegmentedControl>,
+    );
+
+    for (const choice of screen.getAllByRole("radio")) {
+      expect(choice).toHaveAttribute("aria-describedby", "contact-error");
+    }
+  });
+});

package/src/components/Forms/index.ts

@@ -11,6 +11,7 @@ export { Label } from "./Label";
 export { Message } from "./Message";
 export { Radio } from "./Radio";
 export { RangeSlider } from "./RangeSlider";
+export { SegmentedControl, SegmentedControlItem } from "./SegmentedControl";
 export { Select } from "./Select";
 export { SelectionTile } from "./SelectionTile";
 export { TextArea } from "./TextArea";

package/src/components/Icon/index.ts

@@ -1,3 +1,4 @@
+export type { IconColor } from "./Icon";
 export { Icon } from "./Icon";
 export { Pictogram } from "./Pictogram";
 export { SpritePathContext, SpritePathProvider } from "./SpritePathContext";

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

@@ -17,6 +17,7 @@
 @use "../../Button/styles/mixins" as button;
 @use "../../Card/styles/mixins" as card;
 @use "../../../styles/typography/mixins" as typography;
+@use "../../../styles/tokens/overlay";
 
 @use "./config";
 
@@ -101,11 +102,16 @@
   }
 
   * {
-    box-sizing: border-box;
     letter-spacing: convert.to-rem(-0.1px);
     line-height: convert.to-rem(18px);
   }
 
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
   ::selection {
     background-color: base.$selection-background;
     color: base.$text-color;
@@ -262,7 +268,7 @@
 }
 
 @mixin nav-item-lead {
-  margin-right: convert.to-rem(10px);
+  margin-right: 0;
 }
 
 @mixin nav-item-push {
@@ -417,7 +423,7 @@
   }
 
   &.is-active {
-    color: var(--color-border-accent);
+    color: var(--color-border-accent) !important;
   }
 }
 
@@ -636,7 +642,7 @@
     min-width: 0;
   }
 
-  > #{config.$class-root}__nav:last-child {
+  > #{config.$class-root}__nav:last-child:not(:first-child) {
     flex: 0 0 auto;
     width: auto;
   }
@@ -652,10 +658,16 @@
 
 @mixin subnav-item {
   display: flex;
-  gap: convert.to-rem(10px);
+  column-gap: convert.to-rem(10px);
   margin-bottom: convert.to-rem(10px) !important;
 
+  > #{config.$class-root}__tag {
+    align-self: flex-start;
+  }
+
   a {
+    min-width: 0;
+
     &:hover,
     &:focus,
     &:focus-visible,
@@ -715,13 +727,9 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: color-mix(
-      in srgb,
-      var(--color-surface-contrast) 75%,
-      transparent
-    );
+    background-color: overlay.$background;
     opacity: 0;
-    transition: opacity 0.2s ease-out;
+    transition: opacity overlay.$transition;
   }
 
   &.is-active {
@@ -1135,11 +1143,7 @@
   left: 0;
   width: 100%;
   height: 0;
-  background-color: color-mix(
-    in srgb,
-    var(--color-surface-contrast) 75%,
-    transparent
-  );
+  background-color: overlay.$background;
   border: none;
   appearance: none;
   -webkit-appearance: none;
@@ -1148,8 +1152,8 @@
   opacity: 0;
   visibility: hidden;
   transition:
-    opacity 0.15s ease-out,
-    visibility 0.15s ease-out;
+    opacity overlay.$transition,
+    visibility overlay.$transition;
   outline: none;
 
   &.is-active {
@@ -1327,6 +1331,8 @@
 
 @mixin tag {
   @include tag.base;
+  flex: 0 0 auto;
+  white-space: nowrap;
   text-decoration: none !important;
 
   @each $name, $props in tagConfig.$sizes {

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

@@ -1,10 +1,11 @@
 @use "../../../styles/tokens/space";
 @use "../../../styles/tokens/color";
+@use "../../../styles/tokens/overlay";
 @use "../../../styles/tools/convert";
 
-$overlay-bg-color: rgba(0, 0, 0, 0.4) !default;
+$overlay-bg-color: overlay.$background !default;
 $overlay-z-index: 500 !default;
-$overlay-e: 0.4s ease 0s !default;
+$overlay-e: overlay.$transition !default;
 
 $overlay: (
   background-color: $overlay-bg-color,

package/src/components/StatusIndicator/StatusIndicator.tsx

@@ -0,0 +1,29 @@
+import cx from "classnames";
+import type { HTMLAttributes, ReactNode } from "react";
+import React from "react";
+
+export interface StatusIndicatorProps extends HTMLAttributes<HTMLSpanElement> {
+  children: ReactNode;
+  type: "success" | "warning" | "danger";
+}
+
+const CLASS_ROOT = "status-indicator";
+
+const StatusIndicator: React.FC<StatusIndicatorProps> = ({
+  children,
+  className,
+  type,
+  ...other
+}) => (
+  <span
+    className={cx(CLASS_ROOT, `${CLASS_ROOT}--${type}`, className)}
+    {...other}
+  >
+    <span className={`${CLASS_ROOT}__marker`} aria-hidden="true" />
+    <span className={`${CLASS_ROOT}__content`}>{children}</span>
+  </span>
+);
+
+StatusIndicator.displayName = "StatusIndicator";
+
+export { StatusIndicator };

package/src/components/StatusIndicator/index.ts

@@ -0,0 +1,2 @@
+export type { StatusIndicatorProps } from "./StatusIndicator";
+export { StatusIndicator } from "./StatusIndicator";

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

@@ -0,0 +1,12 @@
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/convert";
+
+$base: (
+  column-gap: space.get("xsmall"),
+);
+
+$marker: (
+  width: convert.to-rem(12px),
+  height: convert.to-rem(12px),
+  margin-top: convert.to-rem(3px),
+);

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

@@ -0,0 +1,36 @@
+@use "../../../styles/tools/generate";
+@use "../../../styles/typography/config" as typography;
+@use "./config";
+
+@mixin base($config: config.$base) {
+  display: inline-flex;
+  align-items: flex-start;
+
+  @include generate.css-map($config);
+  @include generate.css-map(typography.$caption, "default");
+}
+
+@mixin marker($config: config.$marker) {
+  flex: 0 0 auto;
+  border-radius: 50%;
+
+  @include generate.css-map($config);
+}
+
+@mixin content() {
+  min-width: 0;
+}
+
+@mixin marker-types() {
+  .status-indicator--success & {
+    background-color: var(--color-icon-positive);
+  }
+
+  .status-indicator--warning & {
+    background-color: var(--color-icon-warning);
+  }
+
+  .status-indicator--danger & {
+    background-color: var(--color-icon-negative);
+  }
+}

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

@@ -0,0 +1,16 @@
+@use "./mixins";
+
+@layer components {
+  .status-indicator {
+    @include mixins.base();
+
+    &__marker {
+      @include mixins.marker();
+      @include mixins.marker-types();
+    }
+
+    &__content {
+      @include mixins.content();
+    }
+  }
+}

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

@@ -0,0 +1,22 @@
+import { render } from "@testing-library/react";
+import { axe } from "vitest-axe";
+
+import { StatusIndicator } from "../";
+
+const example = (
+  <>
+    <StatusIndicator type="success">Available</StatusIndicator>
+    <StatusIndicator type="warning">Limited availability</StatusIndicator>
+    <StatusIndicator type="danger">Unavailable</StatusIndicator>
+  </>
+);
+
+it("is valid html", () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate();
+});
+
+it("is accessible", async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});