@orangesk/orange-design-system 3.1.0 → 3.3.0

package/src/components/Countdown/Countdown.static.ts

@@ -0,0 +1,201 @@
+import {
+  BaseCountdownStatic,
+  CountdownConfig,
+  CountdownLabels,
+  CountdownUnit,
+  calculateState,
+  countdownUnits,
+  DayLabels,
+  getVisibleUnits,
+  normalizeDayLabels,
+} from "./Countdown.shared";
+import {
+  ATTR_COUNTDOWN_UNIT,
+  CLASS_FLIP,
+  SELECTOR_LABEL,
+  SELECTOR_UNIT,
+  SELECTOR_VALUE_LAYERS,
+} from "./constants";
+
+interface CountdownLeaf {
+  element: HTMLElement;
+  unit: CountdownUnit;
+  labels: HTMLElement[];
+  isFlipping: boolean;
+  flipTimeoutId?: number;
+}
+
+const defaultDayLabels: DayLabels = {
+  many: "dni",
+  few: "dni",
+  one: "deň",
+};
+
+const defaultLabels: Required<CountdownLabels> = {
+  days: defaultDayLabels,
+  hours: "hod",
+  minutes: "min",
+  seconds: "sek",
+};
+
+const defaultConfig: CountdownConfig = {
+  targetDate: "",
+  units: [...countdownUnits],
+  labels: defaultLabels,
+};
+
+const FLIP_DURATION_MS = 600;
+
+const pad = (value: number): string =>
+  String(Math.max(0, value)).padStart(2, "0");
+
+const getUnitLabel = (
+  unit: CountdownUnit,
+  value: number,
+  labels: Required<CountdownLabels>,
+): string => {
+  if (unit !== "days") {
+    return labels[unit];
+  }
+
+  const { many, few, one } = normalizeDayLabels(labels.days, defaultDayLabels);
+
+  if (value === 1) return one;
+  if (value >= 2 && value <= 4) return few;
+  return many;
+};
+
+export default class CountdownStatic extends BaseCountdownStatic {
+  leaves!: Map<CountdownUnit, CountdownLeaf>;
+
+  constructor(element: HTMLElement, config?: Partial<CountdownConfig>) {
+    super(element, config, {
+      defaultConfig,
+      instanceKey: "ODS_Countdown",
+    });
+    this.leaves = new Map();
+    this.init();
+  }
+
+  private getLabels(): Required<CountdownLabels> {
+    return {
+      ...defaultLabels,
+      ...(this.config.labels ?? {}),
+      days: normalizeDayLabels(this.config.labels?.days, defaultDayLabels),
+    };
+  }
+
+  protected collectElements(): void {
+    this.leaves.clear();
+
+    const visibleUnits = getVisibleUnits(this.config.units);
+
+    Array.from(
+      this.element.querySelectorAll<HTMLElement>(SELECTOR_UNIT),
+    ).forEach((leaf) => {
+      const unit = leaf.getAttribute(
+        ATTR_COUNTDOWN_UNIT,
+      ) as CountdownUnit | null;
+
+      if (!unit || !visibleUnits.includes(unit)) return;
+
+      this.leaves.set(unit, {
+        element: leaf,
+        unit,
+        labels: Array.from(leaf.querySelectorAll(SELECTOR_VALUE_LAYERS)),
+        isFlipping: false,
+      });
+    });
+  }
+
+  private setLeafValue(leaf: CountdownLeaf, value: string): void {
+    leaf.labels.forEach((label) => {
+      label.replaceChildren(document.createTextNode(value));
+    });
+  }
+
+  private flipLeaf(leaf: CountdownLeaf, value: string): void {
+    const [topLabel, frontLabel, backLabel, bottomLabel] = leaf.labels;
+
+    if (!topLabel || !frontLabel || !backLabel || !bottomLabel) {
+      return;
+    }
+
+    if (!topLabel.textContent) {
+      this.setLeafValue(leaf, value);
+      return;
+    }
+
+    if (leaf.isFlipping || topLabel.textContent === value) {
+      return;
+    }
+
+    if (leaf.flipTimeoutId) {
+      window.clearTimeout(leaf.flipTimeoutId);
+    }
+
+    leaf.isFlipping = true;
+    topLabel.replaceChildren(document.createTextNode(value));
+    backLabel.replaceChildren(document.createTextNode(value));
+    leaf.element.classList.add(CLASS_FLIP);
+
+    leaf.flipTimeoutId = window.setTimeout(() => {
+      frontLabel.replaceChildren(document.createTextNode(value));
+      bottomLabel.replaceChildren(document.createTextNode(value));
+      leaf.element.classList.remove(CLASS_FLIP);
+      leaf.isFlipping = false;
+      leaf.flipTimeoutId = undefined;
+    }, FLIP_DURATION_MS);
+  }
+
+  protected render(): void {
+    const units = getVisibleUnits(this.config.units);
+    const labels = this.getLabels();
+    const state = calculateState(this.config.targetDate, units);
+
+    units.forEach((unit) => {
+      const leaf = this.leaves.get(unit);
+
+      if (!leaf) {
+        return;
+      }
+
+      const value = state[unit];
+      const label = getUnitLabel(unit, value, labels);
+
+      this.flipLeaf(leaf, pad(value));
+      const labelElement = leaf.element.querySelector(SELECTOR_LABEL);
+      if (labelElement) {
+        labelElement.textContent = label;
+      }
+    });
+
+    if (this.liveRegion) {
+      const announcement = units
+        .map(
+          (unit) => `${state[unit]} ${getUnitLabel(unit, state[unit], labels)}`,
+        )
+        .join(", ");
+      this.liveRegion.textContent = announcement;
+    }
+  }
+
+  protected destroyElements(): void {
+    this.leaves.forEach((leaf) => {
+      if (leaf.flipTimeoutId) {
+        window.clearTimeout(leaf.flipTimeoutId);
+        leaf.flipTimeoutId = undefined;
+      }
+
+      leaf.isFlipping = false;
+      leaf.element.classList.remove(CLASS_FLIP);
+    });
+  }
+
+  static getInstance(el: HTMLElement): CountdownStatic | null {
+    return el && (el as any).ODS_Countdown ? (el as any).ODS_Countdown : null;
+  }
+}
+
+export type { CountdownConfig, CountdownLabels, CountdownUnit };
+export { countdownUnits };

package/src/components/Countdown/Countdown.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import cx from "classnames";
+import React from "react";
+
+import { useStatic } from "../../utils/hooks";
+
+import {
+  buildCountdownConfig,
+  defaultCountdownLabels,
+  getAriaLive,
+  getLabelText,
+  normalizeUnits,
+} from "./Countdown.react";
+import CountdownStatic, {
+  CountdownConfig,
+  CountdownLabels,
+  CountdownUnit,
+  countdownUnits,
+} from "./Countdown.static";
+import {
+  ATTR_COUNTDOWN,
+  ATTR_COUNTDOWN_CONFIG,
+  ATTR_COUNTDOWN_UNIT,
+  CLASS_ANNOUNCEMENT,
+  CLASS_BOTTOM,
+  CLASS_CARD,
+  CLASS_LABEL,
+  CLASS_LEAF_BACK,
+  CLASS_LEAF_FRONT,
+  CLASS_ROOT,
+  CLASS_TOP,
+  CLASS_UNIT,
+  CLASS_VALUE,
+} from "./constants";
+
+export interface CountdownProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  labels?: CountdownLabels;
+  targetDate: string;
+  units?: CountdownUnit[];
+}
+
+const Countdown: React.FC<CountdownProps> = ({
+  className,
+  labels,
+  targetDate,
+  units = [...countdownUnits],
+  ...other
+}) => {
+  const normalizedUnits = normalizeUnits(units);
+  const config: CountdownConfig = buildCountdownConfig(
+    targetDate,
+    normalizedUnits,
+    labels,
+  );
+
+  const [elementRef] = useStatic(CountdownStatic, config);
+
+  return (
+    <div
+      className={cx(CLASS_ROOT, className)}
+      {...{ [ATTR_COUNTDOWN]: "true" }}
+      {...{ [ATTR_COUNTDOWN_CONFIG]: JSON.stringify(config) }}
+      ref={elementRef}
+      role="timer"
+      aria-live={getAriaLive(normalizedUnits)}
+      aria-atomic="true"
+      {...other}
+    >
+      <span className={`sr-only ${CLASS_ANNOUNCEMENT}`} />
+      {normalizedUnits.map((unit) => (
+        <div
+          key={unit}
+          className={CLASS_UNIT}
+          {...{ [ATTR_COUNTDOWN_UNIT]: unit }}
+          aria-hidden="true"
+        >
+          <div className={CLASS_CARD}>
+            <div className={CLASS_TOP}>
+              <span className={CLASS_VALUE}>00</span>
+            </div>
+            <div className={CLASS_LEAF_FRONT}>
+              <span className={CLASS_VALUE}>00</span>
+            </div>
+            <div className={CLASS_LEAF_BACK}>
+              <span className={CLASS_VALUE}>00</span>
+            </div>
+            <div className={CLASS_BOTTOM}>
+              <span className={CLASS_VALUE}>00</span>
+            </div>
+          </div>
+          <span className={CLASS_LABEL}>
+            {getLabelText(unit, labels, defaultCountdownLabels)}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+Countdown.displayName = "Countdown";
+
+export type { CountdownLabels, CountdownUnit };
+export { Countdown, countdownUnits };

package/src/components/Countdown/CountdownTag.static.ts

@@ -0,0 +1,140 @@
+import {
+  BaseCountdownStatic,
+  CountdownConfig,
+  CountdownLabels,
+  CountdownUnit,
+  calculateState,
+  DayLabels,
+  getVisibleUnits,
+  normalizeDayLabels,
+} from "./Countdown.shared";
+import {
+  ATTR_COUNTDOWN_UNIT,
+  SELECTOR_TAG_LABEL,
+  SELECTOR_TAG_UNIT,
+  SELECTOR_TAG_VALUE,
+} from "./constants";
+
+interface CountdownTagUnit {
+  element: HTMLElement;
+  unit: CountdownUnit;
+  valueElement: HTMLElement | null;
+}
+
+const defaultDayLabels: DayLabels = {
+  many: "d",
+  few: "d",
+  one: "d",
+};
+
+const defaultLabels: Required<CountdownLabels> = {
+  days: defaultDayLabels,
+  hours: "h",
+  minutes: "m",
+  seconds: "s",
+};
+
+const defaultConfig: CountdownConfig = {
+  targetDate: "",
+  units: ["days", "hours", "minutes", "seconds"],
+  labels: defaultLabels,
+};
+
+const getUnitLabel = (
+  unit: CountdownUnit,
+  labels: Required<CountdownLabels>,
+): string => {
+  if (unit === "days") {
+    return normalizeDayLabels(labels.days, defaultDayLabels).many;
+  }
+
+  return labels[unit];
+};
+
+const formatValue = (value: number): string =>
+  value < 100
+    ? String(Math.max(0, value)).padStart(2, "0")
+    : String(Math.max(0, value));
+
+export default class CountdownTagStatic extends BaseCountdownStatic {
+  units!: Map<CountdownUnit, CountdownTagUnit>;
+
+  constructor(element: HTMLElement, config?: Partial<CountdownConfig>) {
+    super(element, config, {
+      defaultConfig,
+      instanceKey: "ODS_CountdownTag",
+    });
+    this.units = new Map();
+    this.init();
+  }
+
+  private getLabels(): Required<CountdownLabels> {
+    return {
+      ...defaultLabels,
+      ...(this.config.labels ?? {}),
+      days: normalizeDayLabels(this.config.labels?.days, defaultDayLabels),
+    };
+  }
+
+  protected collectElements(): void {
+    this.units.clear();
+
+    const visibleUnits = getVisibleUnits(this.config.units);
+
+    Array.from(
+      this.element.querySelectorAll<HTMLElement>(SELECTOR_TAG_UNIT),
+    ).forEach((unitElement) => {
+      const unit = unitElement.getAttribute(
+        ATTR_COUNTDOWN_UNIT,
+      ) as CountdownUnit | null;
+
+      if (!unit || !visibleUnits.includes(unit)) return;
+
+      this.units.set(unit, {
+        element: unitElement,
+        unit,
+        valueElement: unitElement.querySelector(SELECTOR_TAG_VALUE),
+      });
+    });
+  }
+
+  protected render(): void {
+    const visibleUnits = getVisibleUnits(this.config.units);
+    const labels = this.getLabels();
+    const state = calculateState(this.config.targetDate, visibleUnits);
+
+    visibleUnits.forEach((unit) => {
+      const currentUnit = this.units.get(unit);
+
+      if (!currentUnit) {
+        return;
+      }
+
+      const value = state[unit];
+
+      if (currentUnit.valueElement) {
+        currentUnit.valueElement.textContent = formatValue(value);
+      }
+
+      const labelElement =
+        currentUnit.element.querySelector(SELECTOR_TAG_LABEL);
+      if (labelElement) {
+        labelElement.textContent = getUnitLabel(unit, labels);
+      }
+    });
+
+    if (this.liveRegion) {
+      this.liveRegion.textContent = visibleUnits
+        .map((unit) => `${state[unit]} ${getUnitLabel(unit, labels)}`)
+        .join(", ");
+    }
+  }
+
+  protected destroyElements(): void {}
+
+  static getInstance(el: HTMLElement): CountdownTagStatic | null {
+    return el && (el as any).ODS_CountdownTag
+      ? (el as any).ODS_CountdownTag
+      : null;
+  }
+}

package/src/components/Countdown/CountdownTag.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import cx from "classnames";
+import React from "react";
+
+import { useStatic } from "../../utils/hooks";
+
+import {
+  buildCountdownConfig,
+  defaultCountdownTagLabels,
+  getAriaLive,
+  getLabelText,
+  normalizeUnits,
+} from "./Countdown.react";
+import {
+  CountdownConfig,
+  CountdownLabels,
+  CountdownUnit,
+} from "./Countdown.static";
+import CountdownTagStatic from "./CountdownTag.static";
+import {
+  ATTR_COUNTDOWN_CONFIG,
+  ATTR_COUNTDOWN_TAG,
+  ATTR_COUNTDOWN_TAG_VALUE,
+  ATTR_COUNTDOWN_UNIT,
+  CLASS_ANNOUNCEMENT,
+  CLASS_TAG_LABEL,
+  CLASS_TAG_PART,
+  CLASS_TAG_ROOT,
+  CLASS_TAG_SEPARATOR,
+  CLASS_TAG_VALUE,
+} from "./constants";
+
+export interface CountdownTagProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  labels?: CountdownLabels;
+  targetDate: string;
+  units?: CountdownUnit[];
+}
+
+const CountdownTag: React.FC<CountdownTagProps> = ({
+  className,
+  labels,
+  targetDate,
+  units = ["days", "hours", "minutes", "seconds"],
+  ...other
+}) => {
+  const normalizedUnits = normalizeUnits(units);
+  const config: CountdownConfig = buildCountdownConfig(
+    targetDate,
+    normalizedUnits,
+    labels,
+  );
+
+  const [elementRef] = useStatic(CountdownTagStatic, config);
+
+  return (
+    <div
+      className={cx(CLASS_TAG_ROOT, className)}
+      {...{ [ATTR_COUNTDOWN_TAG]: "true" }}
+      {...{ [ATTR_COUNTDOWN_CONFIG]: JSON.stringify(config) }}
+      ref={elementRef}
+      role="timer"
+      aria-live={getAriaLive(normalizedUnits)}
+      aria-atomic="true"
+      {...other}
+    >
+      <span className={`sr-only ${CLASS_ANNOUNCEMENT}`} />
+      {normalizedUnits.map((unit, index) => (
+        <React.Fragment key={unit}>
+          <span
+            className={CLASS_TAG_PART}
+            {...{ [ATTR_COUNTDOWN_UNIT]: unit }}
+            aria-hidden="true"
+          >
+            <span
+              className={CLASS_TAG_VALUE}
+              {...{ [ATTR_COUNTDOWN_TAG_VALUE]: "true" }}
+            >
+              00
+            </span>
+            <span className={CLASS_TAG_LABEL}>
+              {getLabelText(unit, labels, defaultCountdownTagLabels)}
+            </span>
+          </span>
+          {index < normalizedUnits.length - 1 && (
+            <span className={CLASS_TAG_SEPARATOR} aria-hidden="true">
+              :
+            </span>
+          )}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+};
+
+CountdownTag.displayName = "CountdownTag";
+
+export { CountdownTag };

package/src/components/Countdown/constants.ts

@@ -0,0 +1,36 @@
+export const CLASS_ROOT = "countdown";
+
+export const CLASS_ANNOUNCEMENT = `${CLASS_ROOT}__announcement`;
+export const CLASS_UNIT = `${CLASS_ROOT}__unit`;
+export const CLASS_CARD = `${CLASS_ROOT}__card`;
+export const CLASS_TOP = `${CLASS_ROOT}__top`;
+export const CLASS_LEAF_FRONT = `${CLASS_ROOT}__leaf-front`;
+export const CLASS_LEAF_BACK = `${CLASS_ROOT}__leaf-back`;
+export const CLASS_BOTTOM = `${CLASS_ROOT}__bottom`;
+export const CLASS_VALUE = `${CLASS_ROOT}__value`;
+export const CLASS_LABEL = `${CLASS_ROOT}__label`;
+export const CLASS_FLIP = "is-flipping";
+export const CLASS_TAG_ROOT = "countdown-tag";
+export const CLASS_TAG_PART = `${CLASS_TAG_ROOT}__part`;
+export const CLASS_TAG_VALUE = `${CLASS_TAG_ROOT}__value`;
+export const CLASS_TAG_LABEL = `${CLASS_TAG_ROOT}__label`;
+export const CLASS_TAG_SEPARATOR = `${CLASS_TAG_ROOT}__separator`;
+
+export const ATTR_COUNTDOWN = "data-countdown";
+export const ATTR_COUNTDOWN_CONFIG = "data-countdown-config";
+export const ATTR_COUNTDOWN_UNIT = "data-countdown-unit";
+export const ATTR_COUNTDOWN_TAG = "data-countdown-tag";
+export const ATTR_COUNTDOWN_TAG_VALUE = "data-countdown-tag-value";
+
+export const SELECTOR_ANNOUNCEMENT = `.${CLASS_ANNOUNCEMENT}`;
+export const SELECTOR_UNIT = `.${CLASS_UNIT}`;
+export const SELECTOR_LABEL = `.${CLASS_LABEL}`;
+export const SELECTOR_TAG_UNIT = `[${ATTR_COUNTDOWN_UNIT}]`;
+export const SELECTOR_TAG_LABEL = `.${CLASS_TAG_LABEL}`;
+export const SELECTOR_TAG_VALUE = `[${ATTR_COUNTDOWN_TAG_VALUE}]`;
+export const SELECTOR_VALUE_LAYERS = [
+  `.${CLASS_TOP} .${CLASS_VALUE}`,
+  `.${CLASS_LEAF_FRONT} .${CLASS_VALUE}`,
+  `.${CLASS_LEAF_BACK} .${CLASS_VALUE}`,
+  `.${CLASS_BOTTOM} .${CLASS_VALUE}`,
+].join(", ");

package/src/components/Countdown/index.ts

@@ -0,0 +1,3 @@
+export type { CountdownLabels, CountdownUnit } from "./Countdown";
+export { Countdown, countdownUnits } from "./Countdown";
+export { CountdownTag } from "./CountdownTag";

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

@@ -0,0 +1,17 @@
+@use "../../../styles/tools/convert";
+
+$unit-width: convert.to-rem(67.5px);
+$unit-height: convert.to-rem(82px);
+$unit-half-height: convert.to-rem(41px);
+$unit-radius: convert.to-rem(10px);
+$tag-gap: convert.to-rem(4px);
+$tag-min-height: convert.to-rem(40px);
+$tag-padding-y: convert.to-rem(9px);
+$tag-padding-x: convert.to-rem(15px);
+$tag-part-gap: convert.to-rem(3px);
+$tag-value-font-size: convert.to-rem(16px);
+$tag-value-line-height: convert.to-rem(18px);
+$tag-value-letter-spacing: convert.to-rem(-0.2px);
+$tag-label-font-size: convert.to-rem(12px);
+$tag-label-line-height: convert.to-rem(14px);
+$tag-separator-offset-y: convert.to-rem(-1px);