@orangesk/orange-design-system 3.1.0 → 3.3.0

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

@@ -0,0 +1,193 @@
+@use "../../../styles/tokens/breakpoint";
+@use "../../../styles/tokens/space";
+@use "../../../styles/tokens/color";
+@use "../../../styles/tools/convert";
+@use "./config";
+
+@mixin root {
+  display: flex;
+  flex-wrap: wrap;
+  gap: space.get("small");
+  margin-bottom: space.get("large");
+}
+
+@mixin unit {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: space.get("xsmall");
+  perspective: convert.to-rem(300px);
+  perspective-origin: center center;
+  transform: translateZ(0);
+}
+
+@mixin card {
+  position: relative;
+  width: config.$unit-width;
+  height: config.$unit-height;
+  overflow: visible;
+  border-radius: config.$unit-radius;
+}
+
+@mixin layer {
+  position: relative;
+  display: block;
+  width: config.$unit-width;
+  height: config.$unit-half-height;
+  overflow: hidden;
+  background-color: var(--color-surface-secondary);
+  color: color.$white;
+  backface-visibility: hidden;
+}
+
+@mixin flipped-unit {
+  .countdown__leaf-front {
+    transform: rotateX(-90deg) translateZ(0);
+    transition:
+      transform 0.2s ease-in,
+      background-color 0.2s ease-in,
+      color 0.2s ease-in;
+    transition-delay: 0s;
+    background-color: var(--color-surface-moderate);
+  }
+
+  .countdown__leaf-back {
+    transform: rotateX(0deg) translateZ(0);
+    transition:
+      transform 0.2s ease-in,
+      background-color 0.2s ease-in,
+      color 0.2s ease-in;
+    transition-delay: 0.2s;
+  }
+
+  .countdown__bottom::before {
+    transition: height 0.2s ease-in-out;
+    transition-delay: 0.15s;
+    height: 100%;
+  }
+}
+
+@mixin top-half {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+
+  span {
+    top: 0;
+  }
+}
+
+@mixin bottom-half {
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+
+  span {
+    bottom: 0;
+  }
+}
+
+@mixin animated-half {
+  position: absolute;
+  left: 0;
+  width: calc(100% - 0.5px);
+  z-index: 10;
+  transform-style: preserve-3d;
+}
+
+@mixin leaf-front {
+  top: 0;
+  transform-origin: bottom center;
+  transform: rotateX(0deg) translateZ(0);
+  transition-delay: 0.2s;
+}
+
+@mixin leaf-back {
+  top: config.$unit-half-height;
+  transform-origin: top center;
+  transform: rotateX(90deg) translateZ(0);
+  transition-delay: 0s;
+}
+
+@mixin bottom-shadow {
+  &::before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 0;
+    background: linear-gradient(
+      180deg,
+      rgba(0, 0, 0, 0.8) 0%,
+      rgba(0, 0, 0, 0) 100%
+    );
+    filter: blur(10px);
+  }
+}
+
+@mixin value-position {
+  position: absolute;
+  left: 50%;
+  width: 100%;
+  height: config.$unit-height;
+  text-align: center;
+  transform: translateX(-50%);
+}
+
+@mixin value {
+  display: block;
+  font-size: convert.to-rem(32px);
+  font-weight: 700;
+  line-height: config.$unit-height;
+  letter-spacing: convert.to-rem(-0.6px);
+}
+
+@mixin label {
+  display: block;
+  text-align: center;
+  font-size: convert.to-rem(18px);
+  line-height: convert.to-rem(26px);
+  color: var(--color-text-default);
+}
+
+@mixin tag-root {
+  display: flex;
+  align-items: center;
+  gap: config.$tag-gap;
+  width: fit-content;
+  max-width: 100%;
+  min-height: config.$tag-min-height;
+  padding: config.$tag-padding-y config.$tag-padding-x;
+  border-radius: 9999px;
+  background-color: var(--tag-black);
+  color: var(--tag-text-light);
+  margin-bottom: space.get("large");
+}
+
+@mixin tag-part {
+  display: inline-flex;
+  align-items: baseline;
+  gap: config.$tag-part-gap;
+}
+
+@mixin tag-value {
+  font-size: config.$tag-value-font-size;
+  line-height: config.$tag-value-line-height;
+  font-weight: 700;
+  letter-spacing: config.$tag-value-letter-spacing;
+}
+
+@mixin tag-label {
+  font-size: config.$tag-label-font-size;
+  line-height: config.$tag-label-line-height;
+  font-weight: 700;
+  color: var(--color-text-disabled);
+}
+
+@mixin tag-separator {
+  font-size: config.$tag-value-font-size;
+  line-height: config.$tag-value-line-height;
+  font-weight: 700;
+  color: var(--color-text-disabled);
+  transform: translateY(config.$tag-separator-offset-y);
+}

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

@@ -0,0 +1,82 @@
+@use "./mixins";
+
+@layer components {
+  .countdown {
+    @include mixins.root;
+
+    &__unit {
+      @include mixins.unit;
+
+      &.is-flipping {
+        @include mixins.flipped-unit;
+      }
+    }
+
+    &__card {
+      @include mixins.card;
+    }
+
+    &__top,
+    &__bottom,
+    &__leaf-front,
+    &__leaf-back {
+      @include mixins.layer;
+    }
+
+    &__top,
+    &__leaf-front {
+      @include mixins.top-half;
+    }
+
+    &__bottom,
+    &__leaf-back {
+      @include mixins.bottom-half;
+    }
+
+    &__leaf-front,
+    &__leaf-back {
+      @include mixins.animated-half;
+    }
+
+    &__leaf-front {
+      @include mixins.leaf-front;
+    }
+
+    &__leaf-back {
+      @include mixins.leaf-back;
+    }
+
+    &__bottom {
+      @include mixins.bottom-shadow;
+    }
+
+    &__value {
+      @include mixins.value-position;
+      @include mixins.value;
+    }
+
+    &__label {
+      @include mixins.label;
+    }
+  }
+
+  .countdown-tag {
+    @include mixins.tag-root;
+
+    &__part {
+      @include mixins.tag-part;
+    }
+
+    &__value {
+      @include mixins.tag-value;
+    }
+
+    &__label {
+      @include mixins.tag-label;
+    }
+
+    &__separator {
+      @include mixins.tag-separator;
+    }
+  }
+}

package/src/components/{Testimonial/tests/Testimonial.conformance.test.jsx → Countdown/tests/Countdown.conformance.test.jsx}

@@ -1,9 +1,14 @@
 import { render } from "@testing-library/react";
 import { axe } from "vitest-axe";
 
-import { Testimonial } from "../";
+import { Countdown } from "../";
 
-const example = <Testimonial />;
+const example = (
+  <Countdown
+    targetDate="2027-01-01T00:00:00.000Z"
+    units={["days", "hours", "minutes"]}
+  />
+);
 
 it("is valid html", () => {
   const { container } = render(example);

package/src/components/Countdown/tests/Countdown.static.test.jsx

@@ -0,0 +1,117 @@
+import { render } from "@testing-library/react";
+import { vi } from "vitest";
+
+import { Countdown } from "../Countdown";
+import CountdownStatic from "../Countdown.static";
+
+describe("Countdown static behavior", () => {
+  it("warns when data-countdown-config JSON is invalid", () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+    const element = document.createElement("div");
+    element.className = "countdown";
+    element.setAttribute("data-countdown-config", "{invalid");
+
+    new CountdownStatic(element);
+
+    expect(warnSpy).toHaveBeenCalled();
+
+    warnSpy.mockRestore();
+  });
+
+  it("updates visible units from current time", () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-07-24T00:00:00.000Z"));
+
+    const { container } = render(
+      <Countdown
+        targetDate="2026-07-25T01:02:03.000Z"
+        units={["days", "hours", "seconds"]}
+      />,
+    );
+
+    const countdownElement = container.querySelector("[data-countdown]");
+    const countdown = CountdownStatic.getInstance(countdownElement);
+
+    countdown?.start();
+
+    const values = Array.from(
+      container.querySelectorAll(".countdown__top .countdown__value"),
+    ).map((element) => element.textContent);
+
+    expect(values).toEqual(["01", "01", "123"]);
+
+    countdown?.destroy();
+    vi.useRealTimers();
+  });
+
+  it("switches day label based on remaining value", () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-07-24T00:00:00.000Z"));
+
+    const { container } = render(
+      <Countdown targetDate="2026-07-25T00:00:00.000Z" units={["days"]} />,
+    );
+
+    const announcement = container.querySelector(".countdown__announcement");
+
+    expect(announcement).toHaveTextContent("1 deň");
+
+    vi.useRealTimers();
+  });
+
+  it("adds flipping state class when value changes", () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-07-24T00:00:00.000Z"));
+
+    const { container } = render(
+      <Countdown targetDate="2026-07-24T00:00:02.000Z" units={["seconds"]} />,
+    );
+
+    const unit = container.querySelector(".countdown__unit");
+
+    vi.advanceTimersByTime(1000);
+
+    expect(unit).toHaveClass("is-flipping");
+
+    vi.advanceTimersByTime(650);
+
+    expect(unit).not.toHaveClass("is-flipping");
+    vi.useRealTimers();
+  });
+
+  it("clears pending flip timeout before update re-init", () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-07-24T00:00:00.000Z"));
+
+    const { container } = render(
+      <Countdown targetDate="2026-07-24T00:00:02.000Z" units={["seconds"]} />,
+    );
+
+    const countdownElement = container.querySelector("[data-countdown]");
+    const countdown = CountdownStatic.getInstance(countdownElement);
+
+    vi.advanceTimersByTime(1000);
+
+    expect(container.querySelector(".countdown__unit")).toHaveClass(
+      "is-flipping",
+    );
+
+    countdown?.update({
+      targetDate: "2026-07-24T00:00:59.000Z",
+      units: ["seconds"],
+    });
+
+    vi.advanceTimersByTime(650);
+
+    expect(
+      container.querySelector(".countdown__top .countdown__value")?.textContent,
+    ).toBe("58");
+    expect(container.querySelector(".countdown__unit")).not.toHaveClass(
+      "is-flipping",
+    );
+
+    countdown?.destroy();
+    vi.useRealTimers();
+  });
+});

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

@@ -0,0 +1,101 @@
+import { render } from "@testing-library/react";
+
+import { Countdown } from "../Countdown";
+
+describe("rendering Countdown", () => {
+  it("has default class countdown", () => {
+    const { getByTestId } = render(
+      <Countdown data-testid="test-id" targetDate="2027-01-01T00:00:00.000Z" />,
+    );
+
+    expect(getByTestId("test-id")).toHaveClass("countdown");
+  });
+
+  it("has additional class when className is set", () => {
+    const { getByTestId } = render(
+      <Countdown
+        data-testid="test-id"
+        targetDate="2027-01-01T00:00:00.000Z"
+        className="test-class"
+      />,
+    );
+
+    expect(getByTestId("test-id")).toHaveClass("countdown");
+    expect(getByTestId("test-id")).toHaveClass("test-class");
+  });
+
+  it("renders selected units only", () => {
+    const { container } = render(
+      <Countdown
+        targetDate="2027-01-01T00:00:00.000Z"
+        units={["days", "hours"]}
+      />,
+    );
+
+    const labels = Array.from(
+      container.querySelectorAll(".countdown__label"),
+    ).map((element) => element.textContent);
+
+    expect(container.querySelectorAll(".countdown__unit")).toHaveLength(2);
+    expect(labels).toEqual(["dni", "hod"]);
+  });
+
+  it("renders custom labels", () => {
+    const { getByText } = render(
+      <Countdown
+        targetDate="2027-01-01T00:00:00.000Z"
+        units={["days", "hours", "seconds"]}
+        labels={{
+          days: { many: "days", few: "days", one: "day" },
+          hours: "hrs",
+          seconds: "sec",
+        }}
+      />,
+    );
+
+    expect(getByText("days")).toBeInTheDocument();
+    expect(getByText("hrs")).toBeInTheDocument();
+    expect(getByText("sec")).toBeInTheDocument();
+  });
+
+  it("renders root-level data attributes for vanilla use", () => {
+    const { getByTestId } = render(
+      <Countdown
+        data-testid="test-id"
+        targetDate="2027-01-01T00:00:00.000Z"
+        units={["days", "hours"]}
+        labels={{ days: { many: "dni", few: "dni", one: "deň" }, hours: "hod" }}
+      />,
+    );
+
+    expect(getByTestId("test-id")).toHaveAttribute("data-countdown", "true");
+    expect(
+      JSON.parse(getByTestId("test-id").getAttribute("data-countdown-config")),
+    ).toEqual({
+      targetDate: "2027-01-01T00:00:00.000Z",
+      units: ["days", "hours"],
+      labels: { days: { many: "dni", few: "dni", one: "deň" }, hours: "hod" },
+    });
+  });
+
+  it("normalizes duplicate and out-of-order units", () => {
+    const { container, getByTestId } = render(
+      <Countdown
+        data-testid="test-id"
+        targetDate="2027-01-01T00:00:00.000Z"
+        units={["seconds", "days", "seconds", "hours"]}
+      />,
+    );
+
+    const labels = Array.from(
+      container.querySelectorAll(".countdown__label"),
+    ).map((element) => element.textContent);
+
+    expect(labels).toEqual(["dni", "hod", "sek"]);
+    expect(
+      JSON.parse(getByTestId("test-id").getAttribute("data-countdown-config")),
+    ).toMatchObject({
+      units: ["days", "hours", "seconds"],
+    });
+  });
+});

package/src/components/Countdown/tests/CountdownTag.conformance.test.jsx

@@ -0,0 +1,21 @@
+import { render } from "@testing-library/react";
+import { axe } from "vitest-axe";
+
+import { CountdownTag } from "../";
+
+const example = (
+  <CountdownTag
+    targetDate="2027-01-01T00:00:00.000Z"
+    units={["days", "hours", "minutes"]}
+  />
+);
+
+it("CountdownTag is valid html", () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate();
+});
+
+it("CountdownTag is accessible", async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});

package/src/components/Countdown/tests/CountdownTag.static.test.jsx

@@ -0,0 +1,30 @@
+import { render } from "@testing-library/react";
+import { vi } from "vitest";
+import { CountdownTag } from "../CountdownTag";
+import CountdownTagStatic from "../CountdownTag.static";
+
+describe("CountdownTag static behavior", () => {
+  it("updates visible value from current time", () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-07-24T00:00:00.000Z"));
+
+    const { container } = render(
+      <CountdownTag
+        targetDate="2026-07-24T00:00:59.000Z"
+        units={["seconds"]}
+      />,
+    );
+
+    const element = container.querySelector("[data-countdown-tag]");
+    const countdownTag = CountdownTagStatic.getInstance(element);
+
+    countdownTag?.start();
+
+    expect(
+      container.querySelector("[data-countdown-tag-value]")?.textContent,
+    ).toBe("59");
+
+    countdownTag?.destroy();
+    vi.useRealTimers();
+  });
+});

package/src/components/Countdown/tests/CountdownTag.unit.test.jsx

@@ -0,0 +1,67 @@
+import { render } from "@testing-library/react";
+
+import { CountdownTag } from "../CountdownTag";
+
+describe("rendering CountdownTag", () => {
+  it("has default class countdown-tag", () => {
+    const { getByTestId } = render(
+      <CountdownTag
+        data-testid="test-id"
+        targetDate="2027-01-01T00:00:00.000Z"
+      />,
+    );
+
+    expect(getByTestId("test-id")).toHaveClass("countdown-tag");
+  });
+
+  it("renders default labels including seconds", () => {
+    const { container } = render(
+      <CountdownTag targetDate="2027-01-01T00:00:00.000Z" />,
+    );
+
+    const labels = Array.from(
+      container.querySelectorAll(".countdown-tag__label"),
+    ).map((element) => element.textContent);
+
+    expect(labels).toEqual(["d", "h", "m", "s"]);
+  });
+
+  it("renders custom labels", () => {
+    const { getByText } = render(
+      <CountdownTag
+        targetDate="2027-01-01T00:00:00.000Z"
+        units={["days", "hours", "seconds"]}
+        labels={{
+          days: "dni",
+          hours: "hod",
+          seconds: "sek",
+        }}
+      />,
+    );
+
+    expect(getByText("dni")).toBeInTheDocument();
+    expect(getByText("hod")).toBeInTheDocument();
+    expect(getByText("sek")).toBeInTheDocument();
+  });
+
+  it("normalizes duplicate and out-of-order units", () => {
+    const { container, getByTestId } = render(
+      <CountdownTag
+        data-testid="test-id"
+        targetDate="2027-01-01T00:00:00.000Z"
+        units={["seconds", "days", "seconds", "hours"]}
+      />,
+    );
+
+    const labels = Array.from(
+      container.querySelectorAll(".countdown-tag__label"),
+    ).map((element) => element.textContent);
+
+    expect(labels).toEqual(["d", "h", "s"]);
+    expect(
+      JSON.parse(getByTestId("test-id").getAttribute("data-countdown-config")),
+    ).toMatchObject({
+      units: ["days", "hours", "seconds"],
+    });
+  });
+});

package/src/components/DocumentationSidebar/DocumentationSidebar.tsx

@@ -9,11 +9,13 @@ import packageJson from "../../../package.json";
 import { TextInput } from "../Forms/TextInput";
 import { Icon } from "../Icon";
 import { Image } from "../Image";
+import { Tag } from "../Tag";
 
 export interface DocumentationSidebarItem {
   label: string;
   href?: string;
   target?: React.HTMLAttributeAnchorTarget;
+  tag?: string;
   items?: DocumentationSidebarItem[];
   content?: string; // Optional: MDX content for searching
 }
@@ -201,7 +203,18 @@ const SidebarItem: React.FC<{
             })}
             onClick={() => item.href && onSelect(item.href)}
           >
-            {item.label}
+            <span className={`${CLASS_ROOT}__link-content`}>
+              <span>{item.label}</span>
+              {item.tag ? (
+                <Tag
+                  color="warning"
+                  size="small"
+                  className={`${CLASS_ROOT}__tag`}
+                >
+                  {item.tag}
+                </Tag>
+              ) : null}
+            </span>
           </Link>
         )}
       </div>

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

@@ -178,6 +178,17 @@
     }
   }
 
+  &__link-content {
+    display: inline-flex;
+    align-items: center;
+    gap: convert.to-rem(8px);
+    flex-wrap: wrap;
+  }
+
+  &__tag {
+    vertical-align: middle;
+  }
+
   &__content {
     padding: 16px;
     background: #fff;