@orangesk/orange-design-system 2.2.0 → 3.0.0

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