@orangesk/orange-design-system 2.2.0 → 3.1.0

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

@@ -1,5 +1,6 @@
 @use "sass:map" as sassmap;
 @use "./../../../styles/tools/generate";
+@use "./../../../styles/tools/layout";
 @use "./../../../styles/tokens/breakpoint";
 @use "./../../../styles/tokens/space";
 @use "./../../Section/styles/mixins" as section;
@@ -26,6 +27,7 @@
   flex-direction: column;
   justify-content: center;
   min-width: 0;
+  @include layout.reset-last-child-margin-bottom;
 
   > * {
     width: fit-content;
@@ -78,3 +80,9 @@
     }
   }
 }
+
+@mixin promo-banner-vertical() {
+  .promo-banner__item {
+    padding-top: 0 !important;
+  }
+}

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

@@ -26,6 +26,7 @@
     }
 
     &--vertical {
+      @include mixins.promo-banner-vertical;
       .promo-banner__item[class*="grid__col"],
       .promo-banner__image[class*="grid__col"]:not(
           .promo-banner__image--bleed-right

package/src/components/Timeline/Timeline.tsx

@@ -0,0 +1,60 @@
+import cx from "classnames";
+import React from "react";
+
+type HeadingTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+
+export interface TimelineItem {
+  description: React.ReactNode;
+  label?: React.ReactNode;
+  title: React.ReactNode;
+}
+
+export interface TimelineProps
+  extends React.OlHTMLAttributes<HTMLOListElement> {
+  items: TimelineItem[];
+  titleTag?: HeadingTag;
+}
+
+const CLASS_ROOT = "timeline";
+
+const Timeline: React.FC<TimelineProps> = ({
+  items,
+  className,
+  start = 1,
+  titleTag: TitleTag = "h3",
+  ...other
+}) => {
+  return (
+    <ol className={cx(CLASS_ROOT, className)} start={start} {...other}>
+      {items.map((item, index) => {
+        const itemNumber = start + index;
+        const label = item.label ?? null;
+
+        return (
+          <li
+            key={`${CLASS_ROOT}-item-${itemNumber}`}
+            className={`${CLASS_ROOT}__item`}
+          >
+            <div className={`${CLASS_ROOT}__number-column`} aria-hidden="true">
+              <span className={`${CLASS_ROOT}__number`}>{itemNumber}</span>
+              {index !== items.length - 1 && (
+                <div className={`${CLASS_ROOT}__line`} />
+              )}
+            </div>
+            <span className={`${CLASS_ROOT}__label`}>{label}</span>
+            <TitleTag className={`${CLASS_ROOT}__headline`}>
+              {item.title}
+            </TitleTag>
+            <div className={`${CLASS_ROOT}__description`}>
+              {item.description}
+            </div>
+          </li>
+        );
+      })}
+    </ol>
+  );
+};
+
+Timeline.displayName = "Timeline";
+
+export { Timeline };

package/src/components/Timeline/index.ts

@@ -0,0 +1,2 @@
+export type { TimelineItem, TimelineProps } from "./Timeline";
+export { Timeline } from "./Timeline";

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

@@ -0,0 +1,25 @@
+@use "sass:map";
+@use "../../../styles/tools/convert";
+@use "../../../styles/typography/config" as typography;
+
+$number-column-width: convert.to-rem(64px);
+$column-gap: convert.to-rem(20px);
+$content-max-width: convert.to-rem(420px);
+$line-width: convert.to-rem(2px);
+$label-slot-height: convert.to-rem(20px);
+$label-gap: convert.to-rem(5px);
+$label-space: $label-slot-height + $label-gap;
+$line-indent: convert.to-rem(30px);
+$item-spacing-bottom: convert.to-rem(25px);
+
+$headline: map.get(typography.$headings, 3);
+$body: map.get(typography.$body-text, default);
+$caption: (
+  default: map.merge(
+      map.get(typography.$caption, small),
+      (
+        font-weight: 700,
+        letter-spacing: convert.to-rem(0px),
+      )
+    ),
+);

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

@@ -0,0 +1,102 @@
+@use "./config";
+@use "../../../styles/tools/generate";
+@use "../../../styles/tools/convert";
+@use "../../../styles/tokens/breakpoint";
+@use "../../../styles/tokens/space";
+
+@mixin timeline() {
+  list-style: none;
+  margin: 0 0 space.get("large") 0;
+  padding: 0;
+}
+
+@mixin item() {
+  display: grid;
+  grid-template-columns: config.$number-column-width minmax(0, 1fr);
+  column-gap: convert.to-rem(10px);
+  align-items: stretch;
+  padding-bottom: config.$item-spacing-bottom;
+
+  @include breakpoint.get("md") {
+    column-gap: convert.to-rem(20px);
+  }
+}
+
+@mixin item-last-child() {
+  padding-bottom: 0;
+}
+
+@mixin number-column() {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: config.$number-column-width;
+  grid-column: 1;
+  grid-row: 1 / span 3;
+}
+
+@mixin number() {
+  @include generate.responsive-css-map(config.$headline);
+  color: var(--color-text-accent);
+  display: block;
+  text-align: center;
+  margin: 0;
+  margin-top: config.$label-space;
+}
+
+@mixin number-first-item() {
+  margin-top: 0;
+}
+
+@mixin line() {
+  flex: 1 1 auto;
+  width: config.$line-width;
+  background-color: var(--color-border-strong);
+  margin-bottom: convert.to-rem(-30px);
+  margin-top: config.$line-indent;
+}
+
+@mixin label() {
+  @include generate.responsive-css-map(config.$caption);
+  color: var(--color-text-default);
+  height: config.$label-slot-height;
+  min-height: config.$label-slot-height;
+  display: flex;
+  align-items: center;
+  margin: 0;
+  grid-column: 2;
+}
+
+@mixin label-spaced() {
+  margin-bottom: config.$label-gap;
+}
+
+@mixin empty-label() {
+  height: 0;
+  min-height: 0;
+}
+
+@mixin headline() {
+  @include generate.responsive-css-map(config.$headline);
+  color: var(--color-text-default);
+  margin: 0 0 space.get("small");
+  grid-column: 2;
+  max-width: config.$content-max-width;
+  min-width: 0;
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+@mixin description() {
+  @include generate.responsive-css-map(config.$body);
+  color: var(--color-text-default);
+  grid-column: 2;
+  max-width: config.$content-max-width;
+  min-width: 0;
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}

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

@@ -0,0 +1,60 @@
+@use "./config";
+@use "./mixins";
+
+@layer components {
+  .timeline {
+    @include mixins.timeline();
+
+    &__item {
+      @include mixins.item();
+    }
+
+    &__item:last-child {
+      @include mixins.item-last-child();
+    }
+
+    &__number-column {
+      @include mixins.number-column();
+    }
+
+    &__number {
+      @include mixins.number();
+    }
+
+    &__line {
+      @include mixins.line();
+    }
+
+    &__label {
+      @include mixins.label();
+    }
+
+    &__item:not(:first-child) &__label {
+      @include mixins.label-spaced();
+    }
+
+    &__item:first-child &__number {
+      @include mixins.number-first-item();
+    }
+
+    &__item:first-child:has(.timeline__label:not(:empty)) &__number {
+      margin-top: config.$label-space;
+    }
+
+    &__item:first-child:has(.timeline__label:not(:empty)) &__label {
+      @include mixins.label-spaced();
+    }
+
+    &__item:first-child &__label:empty {
+      @include mixins.empty-label();
+    }
+
+    &__headline {
+      @include mixins.headline();
+    }
+
+    &__description {
+      @include mixins.description();
+    }
+  }
+}

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

@@ -0,0 +1,29 @@
+import { render } from "@testing-library/react";
+import { axe } from "vitest-axe";
+
+import { Timeline } from "../";
+
+const example = (
+  <Timeline
+    items={[
+      {
+        title: "Lorem ipsum dolor",
+        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+      },
+      {
+        title: "Dolor sit amet",
+        description: "Sed do eiusmod tempor incididunt ut labore.",
+      },
+    ]}
+  />
+);
+
+it("is valid html", () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate();
+});
+
+it("is accessible", async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});

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

@@ -0,0 +1,89 @@
+import { render } from "@testing-library/react";
+
+import { Timeline } from "../Timeline";
+
+const items = [
+  {
+    title: "First item",
+    description: "First description",
+  },
+  {
+    title: "Second item",
+    description: "Second description",
+    label: "June 2026",
+  },
+];
+
+describe("rendering Timeline", () => {
+  it("has default class timeline", () => {
+    const { getByTestId } = render(
+      <Timeline data-testid="test-id" items={items} />,
+    );
+
+    expect(getByTestId("test-id")).toHaveClass("timeline");
+  });
+
+  it("renders item for each timeline entry", () => {
+    const { container } = render(<Timeline items={items} />);
+
+    expect(container.getElementsByClassName("timeline__item")).toHaveLength(2);
+  });
+
+  it("renders connector only for non-last items", () => {
+    const { container } = render(<Timeline items={items} />);
+    const renderedItems = container.getElementsByClassName("timeline__item");
+
+    expect(
+      renderedItems[0].getElementsByClassName("timeline__line"),
+    ).toHaveLength(1);
+    expect(
+      renderedItems[1].getElementsByClassName("timeline__line"),
+    ).toHaveLength(0);
+  });
+
+  it("has additional class when className is set", () => {
+    const { getByTestId } = render(
+      <Timeline data-testid="test-id" items={items} className="test-class" />,
+    );
+
+    expect(getByTestId("test-id")).toHaveClass("timeline");
+    expect(getByTestId("test-id")).toHaveClass("test-class");
+  });
+
+  it("renders label slots for all items and visible text only for labeled items", () => {
+    const { container, getByText } = render(<Timeline items={items} />);
+    const renderedLabels = container.getElementsByClassName("timeline__label");
+
+    expect(renderedLabels).toHaveLength(2);
+    expect(getByText("June 2026")).toBeInTheDocument();
+    expect(renderedLabels[0].textContent).toBe("");
+    expect(renderedLabels[1].textContent).toBe("June 2026");
+  });
+
+  it("uses start prop for visible numbering", () => {
+    const { container } = render(<Timeline items={items} start={4} />);
+    const renderedNumbers =
+      container.getElementsByClassName("timeline__number");
+
+    expect(renderedNumbers[0].textContent).toBe("4");
+    expect(renderedNumbers[1].textContent).toBe("5");
+  });
+
+  it("renders `h3` headlines by default", () => {
+    const { container } = render(<Timeline items={items} />);
+    const renderedHeadlines = container.querySelectorAll(
+      "h3.timeline__headline",
+    );
+
+    expect(renderedHeadlines).toHaveLength(2);
+  });
+
+  it("renders custom headline tag when titleTag is set", () => {
+    const { container } = render(<Timeline items={items} titleTag="h4" />);
+    const renderedHeadlines = container.querySelectorAll(
+      "h4.timeline__headline",
+    );
+
+    expect(renderedHeadlines).toHaveLength(2);
+  });
+});

package/src/components/index.ts

@@ -92,6 +92,7 @@ import { Tab, TabPanel, Tabs } from "./Tabs";
 import { Tag, TagButton } from "./Tag";
 import { Testimonial } from "./Testimonial";
 import { Tile } from "./Tile";
+import { Timeline } from "./Timeline";
 import { InfoTooltip, Tooltip } from "./Tooltip";
 
 export {
@@ -196,5 +197,6 @@ export {
   TextArea,
   TextInput,
   Tile,
+  Timeline,
   Tooltip,
 };

package/src/styles/typography/mixins.scss

@@ -129,9 +129,11 @@
 }
 
 @mixin list-spacing($space, $config: config.$list-spacing) {
-  > *:where(li) {
+  > *:where(li):not(:last-child) {
     margin-bottom: map.get($config, $space);
+  }
 
+  > *:where(li) {
     > *:where(ul, ol) {
       margin-top: map.get($config, $space);
     }