@orangesk/orange-design-system 3.2.0 → 3.3.0

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

@@ -11,8 +11,6 @@
 @use "../../Button/styles/mixins" as button-mixins;
 @use "./config";
 
-/* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */
-
 @mixin base {
   display: flex;
   flex-direction: column;
@@ -21,8 +19,8 @@
 }
 
 @mixin viewport-wrapper {
-  // wraps viewport and arrows to center them vertically
-  position: relative;
+  width: 100%;
+  max-width: 100%;
 }
 
 @mixin viewport {
@@ -34,26 +32,15 @@
   -ms-overflow-style: none;
   transform: translateZ(0);
   scrollbar-width: none; // hides scrollbar on FF
-
-  @each $breakpoint, $size in config.$viewport-horizontal-spacing {
-    @include breakpoint.get($breakpoint) {
-      margin-left: $size;
-      margin-right: $size;
-    }
-  }
+  min-width: 0;
+  width: 100%;
+  max-width: 100%;
+  margin-bottom: convert.to-rem(30px);
 
   .carousel--scrollbar & {
-    margin-left: 0;
-    margin-right: 0;
-  }
-
-  @include breakpoint.get("sm", "down") {
-    padding-bottom: math.div(config.$space, 2);
-  }
-
-  @include breakpoint.get("md") {
-    margin-bottom: config.$space;
-    overflow-x: hidden; // hide scrollbar on larger screens
+    @include breakpoint.get("md", "down") {
+      margin-bottom: convert.to-rem(20px);
+    }
   }
 
   &.is-draggable {
@@ -68,6 +55,21 @@
   }
 }
 
+@mixin navigation {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  column-gap: config.$navigation-gap;
+  row-gap: convert.to-rem(12px);
+}
+
+@mixin controls {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: convert.to-rem(8px);
+}
+
 @mixin track {
   transform: translateZ(0);
   width: 100%;
@@ -77,28 +79,6 @@
   z-index: 1;
 }
 
-@function get-breakout-media-query($min, $max) {
-  @return if(
-    $max,
-    "(min-width: #{$min}) and (max-width: #{$max})",
-    "(min-width: #{$min})"
-  );
-}
-
-@mixin base-breakout-buttons {
-  @each $min, $max in config.$breakout-buttons-breakpoints {
-    @media only screen and #{get-breakout-media-query($min, $max)} {
-      margin-left: -#{convert.to-rem(60px)};
-      margin-right: -#{convert.to-rem(60px)};
-    }
-  }
-
-  &.carousel--bleed-right {
-    margin-left: 0;
-    margin-right: 0;
-  }
-}
-
 @mixin slide-base {
   display: flex;
   flex-direction: column;
@@ -122,33 +102,6 @@
   }
 }
 
-@mixin button-base {
-  @include button-mixins.base(button-config.$base);
-  @include button-mixins.square-base();
-  @include button-mixins.square-size("default");
-  @include base.focusring-round();
-
-  position: absolute;
-  top: 50%;
-  z-index: 10;
-  margin: 0;
-  border-radius: 100%;
-
-  @include breakpoint.get("sm", "down") {
-    display: none;
-  }
-}
-
-@mixin button-prev {
-  left: 0;
-  transform: translateY(-50%);
-}
-
-@mixin button-next {
-  right: 0;
-  transform: translateY(-50%);
-}
-
 @mixin button-disabled {
   @include generate.css-map(sass-map.get(button-config.$base, "disabled"));
 }
@@ -156,32 +109,49 @@
 @mixin pagination {
   user-select: none;
   display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  margin: 0 auto;
+  margin: 0;
   padding: 0;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
 }
 
 @mixin pagination-item {
+  appearance: none;
   background: none;
-  border: 0;
-  padding: 0;
   user-select: none;
   display: block;
   cursor: pointer;
   border-radius: 100%;
+  border: 0;
+  box-shadow: none;
+  padding: 0;
+  -webkit-tap-highlight-color: transparent;
 
   @include generate.css-map(config.$dot-layout);
   @include base.focusring-round();
-
   background-color: sass-map.get(config.$dot, "default");
 
   &:hover {
     background-color: sass-map.get(config.$dot, "hover");
   }
 
+  &:active {
+    background-color: sass-map.get(config.$dot, "hover");
+  }
+
   &.is-active {
-    background-color: sass-map.get(config.$dot, "active");
+    background-color: transparent;
+    box-shadow: 0 0 0 2px var(--color-border-accent);
+  }
+
+  &.is-active:hover,
+  &.is-active:active,
+  &.is-active:focus,
+  &.is-active:focus-visible {
+    background-color: transparent;
+    box-shadow: 0 0 0 2px var(--color-border-accent);
   }
 }
 

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

@@ -13,10 +13,6 @@
       @include mixins.bleed-right-variant;
     }
 
-    .container > & {
-      @include mixins.base-breakout-buttons;
-    }
-
     &__viewport-wrapper {
       @include mixins.viewport-wrapper;
     }
@@ -25,29 +21,20 @@
       @include mixins.viewport;
     }
 
-    &__track {
-      @include mixins.track;
+    &__navigation {
+      @include mixins.navigation;
     }
 
-    &__slide {
-      @include mixins.slide-base;
+    &__controls {
+      @include mixins.controls;
     }
 
-    &__prev,
-    &__next {
-      @include mixins.button-base;
-
-      &.is-disabled {
-        @include mixins.button-disabled;
-      }
-    }
-
-    &__prev {
-      @include mixins.button-prev;
+    &__track {
+      @include mixins.track;
     }
 
-    &__next {
-      @include mixins.button-next;
+    &__slide {
+      @include mixins.slide-base;
     }
 
     &__pagination {

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

@@ -36,11 +36,11 @@ describe("rendering Carousel", () => {
         1,
       );
     });
-    it("has default class carousel__scrollbar", () => {
+    it("does not render scrollbar by default", () => {
       const { container } = render(<Carousel items={[]} />);
       expect(
         container.getElementsByClassName("carousel__scrollbar").length,
-      ).toBe(1);
+      ).toBe(0);
     });
     it("has default class carousel__pagination", () => {
       const { container } = render(<Carousel items={[]} />);
@@ -48,6 +48,18 @@ describe("rendering Carousel", () => {
         container.getElementsByClassName("carousel__pagination").length,
       ).toBe(1);
     });
+    it("has default class carousel__navigation", () => {
+      const { container } = render(<Carousel items={[]} />);
+      expect(
+        container.getElementsByClassName("carousel__navigation").length,
+      ).toBe(1);
+    });
+    it("has default class carousel__controls", () => {
+      const { container } = render(<Carousel items={[]} />);
+      expect(
+        container.getElementsByClassName("carousel__controls").length,
+      ).toBe(1);
+    });
     it("has button with aria-label Naspäť", () => {
       const { container } = render(<Carousel items={[]} />);
       expect(
@@ -97,18 +109,36 @@ describe("rendering Carousel", () => {
       <p key="item2">item2</p>,
       <p key="item3">item3</p>,
     ];
-    it("has scrollbar element", () => {
+    it("does not render scrollbar element without showScrollbar", () => {
       const { container } = render(<Carousel items={[]} />);
       expect(
         container.getElementsByClassName("carousel__scrollbar").length,
-      ).toBe(1);
+      ).toBe(0);
     });
-    it("has scrollbar drag element", () => {
+    it("does not render scrollbar drag element without showScrollbar", () => {
       const { container } = render(<Carousel items={[]} />);
+      expect(
+        container.getElementsByClassName("carousel__scrollbar-drag").length,
+      ).toBe(0);
+    });
+    it("renders scrollbar when showScrollbar is true", () => {
+      const { container } = render(<Carousel items={items} showScrollbar />);
+      expect(
+        container.getElementsByClassName("carousel__scrollbar").length,
+      ).toBe(1);
       expect(
         container.getElementsByClassName("carousel__scrollbar-drag").length,
       ).toBe(1);
     });
+    it("does not render controls row when showScrollbar is true", () => {
+      const { container } = render(<Carousel items={items} showScrollbar />);
+      expect(
+        container.getElementsByClassName("carousel__navigation").length,
+      ).toBe(0);
+      expect(
+        container.getElementsByClassName("carousel__controls").length,
+      ).toBe(0);
+    });
     it("pagination container has role tablist", () => {
       const { container } = render(<Carousel items={items} />);
       expect(
@@ -166,6 +196,19 @@ describe("rendering Carousel", () => {
       );
       expect(getByTestId("slide-1").textContent).toBe("item1");
     });
+
+    it("uses Controls component defaults for built-in navigation", () => {
+      const { container } = render(<Carousel items={items} />);
+
+      expect(
+        container.querySelector(
+          `.carousel__prev.controls[aria-label="Naspäť"]`,
+        ),
+      ).toBeInTheDocument();
+      expect(
+        container.querySelector(`.carousel__next.controls[aria-label="Ďalej"]`),
+      ).toBeInTheDocument();
+    });
   });
   describe("swiperOptions prop", () => {
     const items = [

package/src/components/Countdown/Countdown.react.ts

@@ -0,0 +1,67 @@
+import {
+  CountdownConfig,
+  CountdownLabels,
+  CountdownUnit,
+  countdownUnits,
+} from "./Countdown.static";
+
+const defaultCountdownLabels: Required<CountdownLabels> = {
+  days: {
+    many: "dni",
+    few: "dni",
+    one: "deň",
+  },
+  hours: "hod",
+  minutes: "min",
+  seconds: "sek",
+};
+
+const defaultCountdownTagLabels: Required<CountdownLabels> = {
+  days: "d",
+  hours: "h",
+  minutes: "m",
+  seconds: "s",
+};
+
+const normalizeUnits = (units?: CountdownUnit[]): CountdownUnit[] => {
+  if (!units?.length) {
+    return [...countdownUnits];
+  }
+
+  return countdownUnits.filter((unit) => units.includes(unit));
+};
+
+const getLabelText = (
+  unit: CountdownUnit,
+  labels: CountdownLabels | undefined,
+  fallback: Required<CountdownLabels>,
+): string => {
+  if (unit === "days") {
+    const value = labels?.days ?? fallback.days;
+    return typeof value === "string" ? value : value.many;
+  }
+
+  return labels?.[unit] ?? fallback[unit];
+};
+
+const buildCountdownConfig = (
+  targetDate: string,
+  units: CountdownUnit[],
+  labels?: CountdownLabels,
+): CountdownConfig => ({
+  labels,
+  targetDate,
+  units: normalizeUnits(units),
+});
+
+const getAriaLive = (units: CountdownUnit[]): "off" | "polite" =>
+  units.includes("seconds") ? "off" : "polite";
+
+export {
+  buildCountdownConfig,
+  defaultCountdownLabels,
+  defaultCountdownTagLabels,
+  getAriaLive,
+  getLabelText,
+  normalizeUnits,
+};

package/src/components/Countdown/Countdown.shared.ts

@@ -0,0 +1,228 @@
+import { ATTR_COUNTDOWN_CONFIG, SELECTOR_ANNOUNCEMENT } from "./constants";
+
+export const countdownUnits = ["days", "hours", "minutes", "seconds"] as const;
+
+export type CountdownUnit = (typeof countdownUnits)[number];
+
+export type DayLabels = {
+  many: string;
+  few: string;
+  one: string;
+};
+
+export interface CountdownLabels {
+  days?: string | DayLabels;
+  hours?: string;
+  minutes?: string;
+  seconds?: string;
+}
+
+export interface CountdownConfig {
+  targetDate: string;
+  units?: CountdownUnit[];
+  labels?: CountdownLabels;
+}
+
+export interface CountdownState {
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+}
+
+const unitMs: Record<CountdownUnit, number> = {
+  days: 24 * 60 * 60 * 1000,
+  hours: 60 * 60 * 1000,
+  minutes: 60 * 1000,
+  seconds: 1000,
+};
+
+export const getVisibleUnits = (units?: CountdownUnit[]): CountdownUnit[] => {
+  if (!units?.length) {
+    return [...countdownUnits];
+  }
+
+  return countdownUnits.filter((unit) => units.includes(unit));
+};
+
+export const normalizeDayLabels = (
+  value: string | DayLabels | undefined,
+  fallback: DayLabels,
+): DayLabels => {
+  if (typeof value === "string" && value.trim()) {
+    return {
+      many: value,
+      few: value,
+      one: value,
+    };
+  }
+
+  if (
+    value &&
+    typeof value === "object" &&
+    typeof value.many === "string" &&
+    typeof value.few === "string" &&
+    typeof value.one === "string"
+  ) {
+    return value;
+  }
+
+  return fallback;
+};
+
+export const getTargetDate = (value: string): number => {
+  const timestamp = new Date(value).getTime();
+  return Number.isNaN(timestamp) ? 0 : timestamp;
+};
+
+export const calculateState = (
+  targetDate: string,
+  units: CountdownUnit[],
+): CountdownState => {
+  const target = getTargetDate(targetDate);
+  let remaining = Math.max(0, target - Date.now());
+
+  const values: CountdownState = {
+    days: 0,
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+  };
+
+  units.forEach((unit) => {
+    const currentValue = Math.floor(remaining / unitMs[unit]);
+    values[unit] = currentValue;
+    remaining -= currentValue * unitMs[unit];
+  });
+
+  return values;
+};
+
+export abstract class BaseCountdownStatic {
+  element: HTMLElement;
+  config: CountdownConfig;
+  liveRegion: HTMLElement | null;
+  timerId?: number;
+  observer?: IntersectionObserver;
+  private instanceKey: string;
+  private defaultConfig: CountdownConfig;
+
+  constructor(
+    element: HTMLElement,
+    config: Partial<CountdownConfig> | undefined,
+    options: {
+      defaultConfig: CountdownConfig;
+      instanceKey: string;
+    },
+  ) {
+    this.element = element;
+    this.defaultConfig = options.defaultConfig;
+    this.instanceKey = options.instanceKey;
+    this.config = { ...options.defaultConfig, ...(config ?? {}) };
+    this.liveRegion = null;
+
+    this.tick = this.tick.bind(this);
+    this.start = this.start.bind(this);
+    this.stop = this.stop.bind(this);
+
+    (this.element as any)[this.instanceKey] = this;
+  }
+
+  protected readDataConfig(): Partial<CountdownConfig> {
+    const attr = this.element.getAttribute(ATTR_COUNTDOWN_CONFIG);
+
+    if (!attr) {
+      return {};
+    }
+
+    try {
+      return JSON.parse(attr);
+    } catch (error) {
+      console.warn("Invalid JSON in data-countdown-config attribute", error);
+      return {};
+    }
+  }
+
+  protected getLiveRegion(): HTMLElement | null {
+    return this.element.querySelector(SELECTOR_ANNOUNCEMENT);
+  }
+
+  protected scheduleNextTick(): void {
+    this.stop();
+    const nextDelay = 1000 - (Date.now() % 1000) || 1000;
+    this.timerId = window.setTimeout(this.tick, nextDelay);
+  }
+
+  private tick(): void {
+    this.render();
+    this.scheduleNextTick();
+  }
+
+  private setupObserver(): void {
+    if (typeof IntersectionObserver === "undefined") {
+      this.start();
+      return;
+    }
+
+    this.observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          this.start();
+        } else {
+          this.stop();
+        }
+      });
+    });
+
+    this.observer.observe(this.element);
+  }
+
+  init(): void {
+    const elementConfig = this.readDataConfig();
+
+    this.config = {
+      ...this.defaultConfig,
+      ...elementConfig,
+      ...this.config,
+    };
+
+    this.liveRegion = this.getLiveRegion();
+    this.collectElements();
+    this.render();
+    this.setupObserver();
+  }
+
+  start(): void {
+    this.render();
+    this.scheduleNextTick();
+  }
+
+  stop(): void {
+    if (this.timerId) {
+      window.clearTimeout(this.timerId);
+      this.timerId = undefined;
+    }
+  }
+
+  update(config?: Partial<CountdownConfig>): void {
+    this.stop();
+    this.observer?.disconnect();
+    this.destroyElements();
+    this.config = {
+      ...this.config,
+      ...(config ?? {}),
+    };
+    this.init();
+  }
+
+  destroy(): void {
+    this.stop();
+    this.observer?.disconnect();
+    this.destroyElements();
+    (this.element as any)[this.instanceKey] = null;
+  }
+
+  protected abstract collectElements(): void;
+  protected abstract render(): void;
+  protected abstract destroyElements(): void;
+}