@orangesk/orange-design-system 2.1.0 → 3.0.0

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

@@ -1,48 +1,92 @@
-@use "sass:map" as sass-map;
 @use "../../../styles/tools/convert";
-@use "../../../styles/tools/generate";
 @use "../../../styles/tokens/space";
 @use "../../../styles/tokens/breakpoint";
 
+$preview-width: convert.to-rem(640px);
+$preview-height: convert.to-rem(480px);
+
+@mixin desktop-layout {
+  @include breakpoint.get("xl") {
+    display: flex;
+    align-items: flex-start;
+    min-height: $preview-height;
+  }
+}
+
 @mixin base {
   color: var(--color-text-default);
   background-color: var(--color-background-secondary);
-  margin-left: 0 !important;
-  margin-right: 0 !important;
+  width: 100%;
+  @include desktop-layout();
 }
 
 @mixin accordion {
-  padding-left: 0 !important;
-  padding-right: 0 !important;
+  width: 100%;
+
+  @include breakpoint.get("xl") {
+    flex: 1 1 0;
+    min-width: 0;
+    min-height: $preview-height;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: convert.to-rem(40px) convert.to-rem(60px);
+  }
 
   .accordion {
-    margin: convert.to-rem(87px) space.get("xlarge");
-
-    @include breakpoint.get("md", "down") {
-      margin: space.get("xlarge") space.get("large");
-    }
-
-    @include breakpoint.get("sm", "down") {
-      margin: 0;
-    }
+    width: 100%;
+    margin: 0;
   }
 }
 
 @mixin preview {
-  display: flex;
-  padding: 0px !important;
+  display: block;
+  justify-content: center;
+  overflow: hidden;
+  width: 100%;
+
+  @include breakpoint.get("xl") {
+    display: flex;
+    flex: 0 0 $preview-width;
+    width: $preview-width;
+    align-self: flex-start;
+  }
+
+  @include breakpoint.get("xl") {
+    align-items: stretch;
+  }
+
+  @include breakpoint.get("xl", "down") {
+    display: block;
+    height: auto;
+  }
 
   .img {
-    margin-bottom: 0px;
+    margin-bottom: 0;
     width: 100%;
+
+    @include breakpoint.get("xl") {
+      width: 100%;
+      height: auto;
+    }
   }
 
   img {
+    display: block;
+    max-width: 100%;
     width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: left center;
-    margin: 0px !important;
+    object-fit: contain;
+    object-position: right center;
+    margin: 0 !important;
+
+    @include breakpoint.get("xl") {
+      height: auto;
+    }
+
+    @include breakpoint.get("xl", "down") {
+      height: auto;
+      width: 100%;
+    }
   }
 }
 
@@ -74,7 +118,7 @@
     margin-bottom: 0;
   }
 
-  @include breakpoint.get("sm", "down") {
+  @include breakpoint.get("lg", "down") {
     .accordion__header,
     .feature-accordion__content {
       padding-left: convert.to-rem(15px);

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

@@ -92,4 +92,13 @@ describe("FeatureAccordion", () => {
     const { container } = renderAccordion({ "data-testid": "fa" });
     expect(container.firstChild).toHaveAttribute("data-testid", "fa");
   });
+
+  it("applies previewClassName to preview area", () => {
+    const { container } = renderAccordion({
+      previewClassName: "align-self-middle--xl",
+    });
+    expect(container.querySelector(".feature-accordion__preview")).toHaveClass(
+      "align-self-middle--xl",
+    );
+  });
 });

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

@@ -35,7 +35,7 @@
       }
     }
 
-    &__control:focus + &__button {
+    &__control:focus-visible + &__button {
       @include mixins.control-focused;
     }
 

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

@@ -23,7 +23,7 @@
     @include generate.css-map($config, "invalid");
   }
 
-  &:focus + #{$display-selector} {
+  &:focus-visible + #{$display-selector} {
     @include generate.css-map($config, "focus");
   }
 

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

@@ -3,9 +3,10 @@
 @use "../../../styles/tools/generate";
 
 @mixin base() {
+  --icon-size: 1em;
   fill: currentColor;
-  width: 1em;
-  height: 1em;
+  width: var(--icon-size);
+  height: var(--icon-size);
   vertical-align: text-bottom;
 }
 
@@ -14,8 +15,7 @@
     @include breakpoint.get($breakpoint) {
       @each $variant, $size in $props {
         &#{generate.variant-name($variant)} {
-          width: $size;
-          height: $size;
+          --icon-size: #{$size};
         }
       }
     }

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

@@ -1,11 +1,13 @@
 @use "../../../styles/tokens/space";
 @use "../../../styles/tools/convert";
 @use "../../../styles/typography/mixins" as typoMixins;
+@use "../../../styles/tools/layout";
 @use "./config";
 
 @mixin base() {
   @include typoMixins.list-unstyled;
   @include typoMixins.text-readable;
+  @include layout.reset-last-child-margin-bottom;
 
   margin: 0 0 space.get("large") 0;
   padding: 0;
@@ -25,7 +27,6 @@
 
 @mixin content() {
   flex: 1 0 1px;
-  margin-top: convert.to-rem(2px);
 }
 
 @mixin content-text() {

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

@@ -27,7 +27,10 @@
       color: var(--color-text-accent);
       text-decoration: underline;
     }
-    &:focus {
+    &.text-accent:hover {
+      color: var(--color-text-default) !important;
+    }
+    &:focus-visible {
       outline: 2px solid var(--color-border-contrast);
       outline-offset: 2px;
     }

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;

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

@@ -1,6 +1,21 @@
+@use "sass:map";
 @use "../../../styles/tokens/space";
 @use "../../../styles/tokens/breakpoint";
 @use "../../../styles/tools/convert";
+@use "../../Icon/styles/config" as icon-config;
+
+@function build-unsized-icon-selector($selector) {
+  $result: $selector;
+
+  @each $size-name in map.keys(map.get(icon-config.$sizes, default)) {
+    $result: "#{$result}:not(.icon--#{$size-name})";
+  }
+
+  @return $result;
+}
+
+$tile-unsized-icon-selector: build-unsized-icon-selector(">.icon") + ", " +
+  build-unsized-icon-selector(">svg");
 
 @mixin tile-base {
   display: flex;
@@ -19,6 +34,7 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  justify-content: space-between;
   gap: space.get("medium");
   padding: space.get("medium");
   z-index: 1;
@@ -27,18 +43,20 @@
     margin-bottom: 0;
   }
 
-  > .icon,
-  > svg {
+  @include breakpoint.get("md") {
+    flex-direction: column;
+    padding: space.get("large");
+  }
+}
+
+@mixin tile-body-icon-ratio {
+  #{$tile-unsized-icon-selector} {
     width: convert.to-rem(24px);
     height: convert.to-rem(24px);
   }
 
   @include breakpoint.get("md") {
-    flex-direction: column;
-    padding: space.get("large");
-
-    > .icon,
-    > svg {
+    #{$tile-unsized-icon-selector} {
       width: convert.to-rem(32px);
       height: convert.to-rem(32px);
     }

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

@@ -8,6 +8,10 @@
       @include mixins.tile-body;
     }
 
+    &:not(.tile--action) .tile__body {
+      @include mixins.tile-body-icon-ratio;
+    }
+
     &--compact .tile__body {
       @include mixins.tile-body-compact;
     }
@@ -19,7 +23,7 @@
         @include mixins.tile-action;
       }
 
-      .icon {
+      .tile__body > .icon:last-child {
         @include mixins.tile-action-icon;
       }
     }

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