@orangesk/orange-design-system 2.0.0-beta.2 → 2.0.0-beta.21

package/src/components/CarouselHero/CarouselHero.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import React, { ReactNode } from "react";
+import cx from "classnames";
+
+import { Controls } from "../Controls";
+import { Container } from "../Container";
+import { CarouselHeroItem } from "./CarouselHeroItem";
+import CarouselHeroStatic from "./CarouselHero.static";
+import {
+  CLASS_ROOT,
+  CLASS_VIEWPORT_WRAPPER,
+  CLASS_VIEWPORT,
+  CLASS_PREV,
+  CLASS_NEXT,
+  CLASS_PLAY_PAUSE,
+  CLASS_TABS,
+  CLASS_TAB,
+  CLASS_PAGINATION,
+  CLASS_TRACK,
+  CLASS_NAVIGATION,
+} from "./constants";
+import { useStatic } from "@/utils/hooks";
+
+interface TabItem {
+  label: string;
+  [key: string]: any;
+}
+
+interface CarouselHeroProps {
+  className?: string;
+  swiperOptions?: Record<string, any>;
+  children?: ReactNode;
+  tabs?: TabItem[];
+  interval?: number;
+  [key: string]: any;
+}
+
+const CarouselHero: React.FC<CarouselHeroProps> = ({
+  className,
+  swiperOptions,
+  children,
+  tabs = [],
+  interval,
+  ...other
+}) => {
+  const [carouselRef] = useStatic(CarouselHeroStatic);
+
+  const classes = cx(CLASS_ROOT, className);
+
+  const elementClasses = {
+    prev: CLASS_PREV,
+    next: CLASS_NEXT,
+    playPause: CLASS_PLAY_PAUSE,
+    tabs: CLASS_TABS,
+    tab: CLASS_TAB,
+    pagination: CLASS_PAGINATION,
+  };
+
+  const hasAutoplay =
+    (swiperOptions?.autoplay &&
+      typeof swiperOptions.autoplay === "object" &&
+      (swiperOptions.autoplay as any).delay >= 1000) ||
+    (interval && interval >= 1000);
+
+  const playPauseIcon = "pause";
+
+  return (
+    <div
+      className={classes}
+      ref={carouselRef}
+      data-carousel-hero
+      {...(interval && interval >= 1000 ? { "data-interval": interval } : {})}
+      {...(swiperOptions
+        ? { "data-swiper-options": JSON.stringify(swiperOptions) }
+        : {})}
+      {...other}
+    >
+      <div className={CLASS_VIEWPORT_WRAPPER}>
+        <div className={CLASS_VIEWPORT}>
+          <div className={CLASS_TRACK}>{children}</div>
+        </div>
+      </div>
+
+      {/* Controls container */}
+      <Container className="d-flex">
+        {/* Tab navigation */}
+        {tabs.length > 0 && (
+          <div className={elementClasses.tabs} role="tablist">
+            {tabs.map((tab, index) => (
+              <button
+                key={index}
+                type="button"
+                className={elementClasses.tab}
+                role="tab"
+                aria-selected={index === 0 ? "true" : "false"}
+                tabIndex={index === 0 ? 0 : -1}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+        )}
+
+        {/* Pagination dots for mobile */}
+        <div role="tablist" className={elementClasses.pagination} />
+
+        {/* Navigation controls */}
+        <div className={CLASS_NAVIGATION}>
+          <Controls
+            className={elementClasses.prev}
+            icon="chevron-left"
+            aria-label="Predchádzajúci snímok"
+          />
+
+          <Controls
+            className={elementClasses.next}
+            icon="chevron-right"
+            aria-label="Nasledujúci snímok"
+          />
+
+          {/* Only show play/pause button if autoplay is configured */}
+          {hasAutoplay && (
+            <Controls
+              className={elementClasses.playPause}
+              icon={playPauseIcon}
+              aria-label="Pozastaviť/Spustiť automatické prehrávanie"
+            />
+          )}
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+CarouselHero.displayName = "CarouselHero";
+
+export { CarouselHero, CarouselHeroItem };
+export type { CarouselHeroProps, TabItem };

package/src/components/CarouselHero/CarouselHeroItem.tsx

@@ -0,0 +1,40 @@
+import React, { ReactNode, HTMLAttributes } from "react";
+import cx from "classnames";
+import { Image } from "@/components/Image";
+import {
+  CLASS_SLIDE,
+  CLASS_SLIDE_CONTAINER,
+  CLASS_SLIDE_CONTENT,
+  CLASS_SLIDE_IMAGE,
+} from "./constants";
+import { Container } from "../Container";
+
+const CLASS_ROOT = CLASS_SLIDE;
+
+interface CarouselHeroItemProps extends HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  children?: ReactNode;
+  image: string;
+}
+
+const CarouselHeroItem: React.FC<CarouselHeroItemProps> = ({
+  className,
+  children,
+  image,
+  ...other
+}) => {
+  const classes = cx(CLASS_ROOT, className);
+
+  return (
+    <div className={classes} {...other}>
+      <Container className={CLASS_SLIDE_CONTAINER}>
+        <div className={CLASS_SLIDE_CONTENT}>{children}</div>
+        <Image className={CLASS_SLIDE_IMAGE} src={image} alt="Obrázok" />
+      </Container>
+    </div>
+  );
+};
+
+CarouselHeroItem.displayName = "CarouselHeroItem";
+
+export { CarouselHeroItem };

package/src/components/CarouselHero/constants.ts

@@ -0,0 +1,36 @@
+export const CLASS_ROOT = "carousel-hero";
+
+export const CLASS_VIEWPORT_WRAPPER = `${CLASS_ROOT}__viewport-wrapper`;
+export const CLASS_VIEWPORT = `${CLASS_ROOT}__viewport`;
+export const CLASS_TRACK = `${CLASS_ROOT}__track`;
+export const CLASS_SLIDE = `${CLASS_ROOT}__slide`;
+export const CLASS_SLIDE_CONTAINER = `${CLASS_ROOT}__slide-container`;
+export const CLASS_SLIDE_CONTENT = `${CLASS_ROOT}__slide-content`;
+export const CLASS_SLIDE_SUBTITLE = `${CLASS_ROOT}__slide-subtitle`;
+export const CLASS_SLIDE_IMAGE_WRAPPER = `${CLASS_ROOT}__slide-image-wrapper`;
+export const CLASS_SLIDE_IMAGE = `${CLASS_ROOT}__slide-image`;
+export const CLASS_SLIDE_BUTTON = `${CLASS_ROOT}__slide-button`;
+export const CLASS_PREV = `${CLASS_ROOT}__prev`;
+export const CLASS_NEXT = `${CLASS_ROOT}__next`;
+export const CLASS_PLAY_PAUSE = `${CLASS_ROOT}__play-pause`;
+export const CLASS_TABS = `${CLASS_ROOT}__tabs`;
+export const CLASS_TAB = `${CLASS_ROOT}__tab`;
+export const CLASS_PAGINATION = `${CLASS_ROOT}__pagination`;
+export const CLASS_PAGINATION_ITEM = `${CLASS_ROOT}__pagination-item`;
+export const CLASS_PAGINATION_SVG = `${CLASS_ROOT}__pagination-svg`;
+export const CLASS_PAGINATION_CIRCLE = `${CLASS_ROOT}__pagination-circle`;
+export const CLASS_NAVIGATION = `${CLASS_ROOT}__navigation`;
+
+export const CLASS_ACTIVE = "is-active";
+export const CLASS_PLAYING = "is-playing";
+export const CLASS_PAUSED = "is-paused";
+
+export const SELECTOR_VIEWPORT = `.${CLASS_VIEWPORT}`;
+export const SELECTOR_TRACK = `.${CLASS_TRACK}`;
+export const SELECTOR_PREV = `.${CLASS_PREV}`;
+export const SELECTOR_NEXT = `.${CLASS_NEXT}`;
+export const SELECTOR_PLAY_PAUSE = `.${CLASS_PLAY_PAUSE}`;
+export const SELECTOR_TABS = `.${CLASS_TABS}`;
+export const SELECTOR_TAB = `.${CLASS_TAB}`;
+export const SELECTOR_PAGINATION = `.${CLASS_PAGINATION}`;
+export const SELECTOR_ACTIVE = `.${CLASS_ACTIVE}`;

package/src/components/CarouselHero/index.ts

@@ -0,0 +1,2 @@
+export { CarouselHero, CarouselHeroItem } from "./CarouselHero";
+export type { CarouselHeroProps, TabItem } from "./CarouselHero";

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

@@ -0,0 +1,54 @@
+@use "../../../styles/tokens/space";
+@use "../../../styles/tokens/color";
+@use "../../../styles/tools/convert";
+@use "sass:math";
+
+$space: space.get("large");
+
+$viewport-horizontal-spacing: (
+  default: convert.to-rem(20px),
+  md: 0,
+);
+
+$controls-spacing: space.get("medium");
+
+$tabs-spacing: space.get("small");
+
+$tab-colors: (
+  default: (
+    color: var(--color-text-moderate),
+    border-color: transparent,
+    background-color: transparent,
+  ),
+  active: (
+    color: var(--color-text-brand),
+    border-color: var(--color-border-brand),
+    background-color: transparent,
+  ),
+  hover: (
+    color: var(--color-text-brand),
+    border-color: var(--color-border-brand),
+    background-color: var(--color-surface-subtle),
+  ),
+);
+
+$navigation-spacing: space.get("small");
+
+$slide-min-height: (
+  default: convert.to-rem(560px),
+);
+
+// SVG countdown animation constants
+$animated-dot-radius: 5;
+$pi: math.div(math.round(math.$pi * 10000), 10000);
+$animated-dot-circumference: 2 * $pi * $animated-dot-radius;
+
+@keyframes countdown {
+  from {
+    // stroke-dashoffset can't be negative number due to Safari issues.
+    stroke-dashoffset: $animated-dot-circumference;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}

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

@@ -0,0 +1,278 @@
+@use "sass:map" as sass-map;
+@use "sass:math";
+@use "../../../styles/tokens/base";
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/convert";
+@use "../../../styles/tools/generate";
+@use "../../../styles/tokens/breakpoint";
+@use "../../Button/styles/mixins" as button-mixins;
+@use "../../../styles/typography/config" as typography-config;
+@use "../../../styles/typography/mixins" as typography-mixins;
+@use "./config";
+
+@mixin base {
+  margin: 0 auto;
+  position: relative;
+  margin-bottom: space.get("large");
+  background: var(--color-surface-primary);
+  border-bottom: 1px solid var(--color-border-subtle);
+}
+
+@mixin viewport-wrapper {
+  position: relative;
+}
+
+@mixin viewport {
+  margin: 0 auto;
+  position: relative;
+  overflow: hidden;
+  transform: translateZ(0);
+
+  &.is-draggable {
+    user-select: none;
+    cursor: -webkit-grab;
+    cursor: grab;
+  }
+
+  &.is-dragging {
+    cursor: -webkit-grabbing;
+    cursor: grabbing;
+  }
+}
+
+@mixin track {
+  transform: translateZ(0);
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  z-index: 1;
+}
+
+@mixin tabs-base {
+  display: flex;
+  flex: 1;
+  gap: 0;
+  overflow-x: auto;
+  overflow-y: inherit;
+  scrollbar-width: none; // Hide scrollbar for Firefox
+  -ms-overflow-style: none; // Hide scrollbar for IE/Edge
+  position: relative;
+
+  // Hide tabs on mobile (md and down), show pagination instead
+  @include breakpoint.get("md", "down") {
+    display: none;
+  }
+
+  // Hide scrollbar for WebKit browsers
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &::after {
+    content: "";
+    position: sticky;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: convert.to-rem(56px);
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      color-mix(in srgb, var(--color-surface-primary), transparent 50%) 20%,
+      var(--color-surface-primary) 100%
+    );
+    pointer-events: none;
+    z-index: 1;
+    flex-shrink: 0;
+    margin-left: auto;
+  }
+}
+
+@mixin tab-base($colors: config.$tab-colors) {
+  position: relative;
+  padding: convert.to-rem(25px) convert.to-rem(15px);
+  border: none;
+  border-top: 4px solid transparent;
+  background: none;
+  cursor: pointer;
+  color: var(--color-text-default);
+  text-align: center;
+  flex: 0;
+  white-space: nowrap;
+  font-weight: 700;
+
+  &.is-active,
+  &[aria-selected="true"] {
+    border-top-color: var(--color-border-accent);
+  }
+
+  &:hover:not(.is-active):not([aria-selected="true"]) {
+    color: var(--color-text-accent);
+  }
+}
+
+@mixin navigation-base {
+  display: flex;
+  align-items: center;
+  gap: convert.to-rem(10px);
+}
+
+@mixin slide-base {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  flex: 0 0 100%;
+  user-select: none;
+  position: relative;
+  overflow: hidden;
+
+  @each $breakpoint, $height in config.$slide-min-height {
+    @include breakpoint.get($breakpoint) {
+      min-height: $height;
+    }
+  }
+}
+
+@mixin slide-container {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+
+  @include breakpoint.get("md", "down") {
+    flex-direction: column;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+}
+
+@mixin slide-content {
+  flex: 0 0 50%;
+  display: flex;
+  z-index: 2;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: convert.to-rem(60px) convert.to-rem(120px) convert.to-rem(60px)
+    convert.to-rem(70px);
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+
+  @include breakpoint.get("xl", "down") {
+    padding-left: convert.to-rem(40px);
+  }
+
+  @include breakpoint.get("md", "down") {
+    flex: initial;
+  }
+
+  @include breakpoint.get("sm", "down") {
+    padding: convert.to-rem(30px) convert.to-rem(10px);
+  }
+}
+
+@mixin slide-image {
+  flex: 0 0 50%;
+  display: flex;
+  margin-bottom: 0 !important;
+  object-fit: cover;
+  object-position: center;
+  width: 50%;
+
+  @include breakpoint.get("md", "down") {
+    flex: 1;
+    width: 100%;
+  }
+}
+
+@mixin pagination-base {
+  user-select: none;
+  display: none; // Hidden by default on desktop
+  flex-wrap: wrap;
+  justify-content: center;
+  padding: convert.to-rem(20px) 0;
+
+  // Show pagination on mobile (md and down)
+  @include breakpoint.get("md", "down") {
+    display: flex;
+  }
+
+  @include breakpoint.get("sm", "down") {
+    justify-content: flex-start;
+  }
+}
+
+@mixin pagination-item-base {
+  background: none;
+  user-select: none;
+  display: block;
+  cursor: pointer;
+  border-radius: 100%;
+  width: convert.to-rem(10px);
+  height: convert.to-rem(10px);
+  margin: convert.to-rem(8px);
+  background-color: var(--color-surface-contrast);
+
+  &:hover {
+    background-color: var(--color-icon-brand);
+  }
+
+  &.is-active {
+    background-color: transparent;
+  }
+}
+
+@mixin pagination-svg() {
+  position: relative;
+  display: none;
+  left: -1px;
+  top: -1px;
+  // This transform is a workaround due to Safari not supporting negative values for stroke-dashoffset.
+  // We're rotating the SVG so that the line starts to animate from the top (12o'clock).
+  // The vertical flip is to make the line animate clockwise.
+  transform: rotate(-90deg) scale(1, -1);
+
+  .is-playing .is-active > & {
+    display: block;
+  }
+
+  .is-paused .is-active > & {
+    display: block;
+
+    circle {
+      stroke: var(--color-border-accent);
+      stroke-width: 2px;
+      stroke-dasharray: config.$animated-dot-circumference;
+      stroke-dashoffset: 0;
+      fill: none;
+      animation: none;
+    }
+  }
+
+  // Show SVG ring for active state when no autoplay
+  .carousel-hero:not(.is-playing):not(.is-paused) .is-active > & {
+    display: block;
+
+    circle {
+      stroke: var(--color-border-accent);
+      stroke-width: 2px;
+      stroke-dasharray: config.$animated-dot-circumference;
+      stroke-dashoffset: 0;
+      fill: none;
+      animation: none;
+    }
+  }
+}
+
+@mixin pagination-circle() {
+  stroke-width: 2px;
+  stroke: var(--color-border-accent);
+  stroke-dasharray: config.$animated-dot-circumference;
+  stroke-dashoffset: config.$animated-dot-circumference;
+  animation-name: countdown;
+  animation-iteration-count: 1;
+  animation-timing-function: linear;
+  animation-direction: reverse;
+  fill: none;
+}

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

@@ -0,0 +1,63 @@
+@use "./mixins";
+
+@layer components {
+  .carousel-hero {
+    @include mixins.base;
+
+    &__viewport-wrapper {
+      @include mixins.viewport-wrapper;
+    }
+
+    &__viewport {
+      @include mixins.viewport;
+    }
+
+    &__track {
+      @include mixins.track;
+    }
+
+    &__slide {
+      @include mixins.slide-base;
+    }
+
+    &__slide-container {
+      @include mixins.slide-container;
+    }
+
+    &__slide-content {
+      @include mixins.slide-content;
+    }
+
+    &__slide-image {
+      @include mixins.slide-image;
+    }
+
+    &__tabs {
+      @include mixins.tabs-base;
+    }
+
+    &__tab {
+      @include mixins.tab-base;
+    }
+
+    &__navigation {
+      @include mixins.navigation-base;
+    }
+
+    &__pagination {
+      @include mixins.pagination-base;
+    }
+
+    &__pagination-item {
+      @include mixins.pagination-item-base;
+    }
+
+    &__pagination-svg {
+      @include mixins.pagination-svg;
+    }
+
+    &__pagination-circle {
+      @include mixins.pagination-circle;
+    }
+  }
+}