@orangesk/orange-design-system 2.0.0-alpha.1 → 2.0.0-alpha.3

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

@@ -0,0 +1,65 @@
+@use "sass:math";
+@use "../../../styles/tokens/breakpoint";
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/convert";
+
+$space: space.get();
+
+$button-size: $space;
+
+$dot-dimension: 8px;
+
+$dot-layout: (
+  width: $dot-dimension,
+  height: $dot-dimension,
+  margin: 8px,
+);
+
+$outline-width-default: 2px;
+$outline-width-focus: 3px;
+$outline-offset-focus: 2px;
+
+$dot: (
+  default: (
+    background-color: var(--color-surface-contrast),
+  ),
+  focus: (
+    background-color: var(--color-surface-contrast),
+    outline-offset: $outline-offset-focus,
+    outline-width: $outline-width-focus "!important",
+    outline-color: var(--color-border-contrast) "!important",
+  ),
+  hover: (
+    background-color: var(--color-surface-contrast),
+    outline: $outline-width-default solid var(--color-border-contrast),
+  ),
+  active: (
+    background-color: transparent,
+    outline: $outline-width-default solid var(--color-border-contrast),
+  ),
+);
+
+$breakout-buttons-breakpoints: (
+  (864px, 991px),
+  (1088px, 1239px),
+  (1340px, 1379px),
+  (1460px)
+);
+
+$viewport-horizontal-spacing: (
+  "default": space.get("medium"),
+);
+
+$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/CarouselPromotions/styles/mixins.scss

@@ -0,0 +1,286 @@
+@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/tools/map";
+@use "../../../styles/tokens/breakpoint";
+@use "../../Button/styles/config" as button-config;
+@use "../../Button/styles/mixins" as button-mixins;
+@use "../../Grid/styles/mixins" as grid-mixins;
+@use "../../../styles/typography/config" as typography-config;
+@use "./config";
+
+/* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */
+
+@mixin base {
+  margin: 0 auto;
+  position: relative;
+  margin-bottom: config.$space;
+}
+
+@mixin viewport-wrapper {
+  // wraps viewport and arrows to center them vertically
+  position: relative;
+}
+
+@mixin viewport {
+  margin: 0 auto;
+  position: relative;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: none;
+  transform: translateZ(0);
+  scrollbar-width: none; // hides scrollbar on FF
+
+  @include breakpoint.get("sm", "down") {
+    padding-bottom: math.div(config.$space, 2);
+  }
+
+  @include breakpoint.get("md") {
+    margin-bottom: config.$space;
+  }
+
+  &::-webkit-scrollbar {
+    opacity: 0;
+    height: 0;
+
+    @include breakpoint.get("sm", "down") {
+      height: convert.to-rem(6px);
+      appearance: none;
+      background-color: var(--color-surface-moderate);
+      border-radius: 99px;
+    }
+  }
+
+  &::-webkit-scrollbar-thumb {
+    @include breakpoint.get("sm", "down") {
+      opacity: 1;
+      border-radius: 99px;
+      background-color: var(--color-fill-contrast);
+    }
+  }
+
+  &.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;
+}
+
+@function get-breakout-media-query($min, $max) {
+  @return if(
+    $max,
+    "(min-width: #{$min}) and (max-width: #{$max})",
+    "(min-width: #{$min})"
+  );
+}
+
+@mixin slide-base {
+  display: flex;
+  gap: space.get("small");
+  max-width: 100%;
+  flex: 0 0 auto;
+  padding: space.get("small");
+  user-select: none;
+  background-color: var(--color-surface-primary);
+
+  &--black {
+    background-color: var(--color-surface-contrast);
+    color: var(--color-text-inverse) !important;
+  }
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+
+  @include breakpoint.get("md") {
+    padding: space.get("medium") convert.to-rem(50px) space.get("medium")
+      space.get("medium");
+    flex-direction: row-reverse;
+    justify-content: space-between;
+  }
+
+  @include breakpoint.get("lg") {
+    padding-right: convert.to-rem(100px);
+  }
+
+  &:is(a) {
+    cursor: pointer;
+    &,
+    &:visited,
+    &:hover,
+    &:active {
+      color: inherit;
+    }
+  }
+}
+
+@mixin slide-image {
+  width: convert.to-rem(100px);
+  height: convert.to-rem(100px);
+  display: flex;
+  flex-shrink: 0;
+
+  picture,
+  img {
+    margin-bottom: 0;
+  }
+
+  img {
+    user-select: none;
+    pointer-events: none;
+    width: 100%;
+    height: 100%;
+  }
+
+  @include breakpoint.get("md") {
+    width: convert.to-rem(176px);
+    height: convert.to-rem(176px);
+    flex-grow: 1;
+    border-radius: 0;
+    background-color: unset;
+    justify-content: end;
+    position: relative;
+
+    img,
+    picture {
+      width: 100%;
+      max-width: convert.to-rem(176px);
+      object-fit: cover;
+    }
+  }
+
+  @include breakpoint.get("lg") {
+    width: convert.to-rem(200px);
+    height: convert.to-rem(200px);
+
+    img,
+    picture {
+      max-width: convert.to-rem(200px);
+    }
+  }
+}
+
+@mixin slide-title {
+  margin-bottom: 0;
+  @each $property,
+    $value in map.map-deep-get(typography-config.$headings, 5, "default")
+  {
+    #{$property}: $value;
+  }
+  @include breakpoint.get("md") {
+    @each $property,
+      $value in map.map-deep-get(typography-config.$headings, 3, md)
+    {
+      #{$property}: $value;
+    }
+  }
+  @include breakpoint.get("lg") {
+    @each $property,
+      $value in map.map-deep-get(typography-config.$headings, 1, md)
+    {
+      #{$property}: $value;
+    }
+  }
+}
+
+@mixin slide-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+
+  @include breakpoint.get("md") {
+    height: 100%;
+    max-width: convert.to-rem(545px);
+    justify-content: space-between;
+  }
+}
+
+@mixin pagination {
+  user-select: none;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin: 0 auto;
+  padding: 0;
+}
+
+@mixin pagination-item {
+  background: none;
+  border: 0;
+  padding: 0;
+  user-select: none;
+  display: block;
+  cursor: pointer;
+  border-radius: 100%;
+
+  @include generate.css-map(config.$dot-layout);
+
+  @include generate.css-map(sass-map.get(config.$dot, "default"));
+
+  &:hover {
+    @include generate.css-map(sass-map.get(config.$dot, "hover"));
+  }
+
+  &.is-active:not(:hover) {
+    @include generate.css-map(sass-map.get(config.$dot, "active"));
+  }
+
+  .is-autoplay &.is-active:not(:focus) {
+    outline: none;
+  }
+
+  &:active {
+    @include generate.css-map(sass-map.get(config.$dot, "default"));
+  }
+
+  &:focus:not(:active) {
+    @include generate.css-map(sass-map.get(config.$dot, "focus"));
+  }
+}
+
+@mixin pagination-svg() {
+  position: relative;
+  display: none;
+  left: -#{config.$outline-width-default};
+  top: -#{config.$outline-width-default};
+  // 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-autoplay .is-active > & {
+    display: block;
+  }
+}
+
+@mixin pagination-circle() {
+  stroke-width: config.$outline-width-default;
+  stroke: var(--color-border-contrast);
+  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;
+}

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

@@ -0,0 +1,51 @@
+@use "./mixins";
+
+@layer components {
+  .carousel-promotions {
+    @include mixins.base;
+
+    &__viewport-wrapper {
+      @include mixins.viewport-wrapper;
+    }
+
+    &__viewport {
+      @include mixins.viewport;
+    }
+
+    &__track {
+      @include mixins.track;
+    }
+
+    &__slide {
+      @include mixins.slide-base;
+    }
+
+    &__image {
+      @include mixins.slide-image;
+    }
+
+    &__title {
+      @include mixins.slide-title;
+    }
+
+    &__content {
+      @include mixins.slide-content;
+    }
+
+    &__pagination {
+      @include mixins.pagination;
+    }
+
+    &__pagination-item {
+      @include mixins.pagination-item;
+    }
+
+    &__pagination-svg {
+      @include mixins.pagination-svg;
+    }
+
+    &__pagination-circle {
+      @include mixins.pagination-circle;
+    }
+  }
+}

package/src/components/CarouselPromotions/tests/CarouselPromotions.conformance.test.js

@@ -0,0 +1,30 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+import { CarouselPromotions } from "..";
+import { CarouselPromotionsItem } from "..";
+import { Image } from "../../Image";
+
+const example = (
+  <>
+    <CarouselPromotions>
+      <CarouselPromotionsItem
+        image={
+          <Image src={`https://placehold.co/800x150/?text=slide`} alt="Image" />
+        }
+        title="Akcia za vernosť."
+        subtitle="Predĺž si svoj paušál a vyhraj telefón v súťaži."
+      />
+    </CarouselPromotions>
+  </>
+);
+
+it("is valid html", () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate({ rules: { "no-inline-style": "off" } });
+});
+
+it("is accessible", async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});

package/src/components/CarouselPromotions/tests/CarouselPromotions.unit.test.js

@@ -0,0 +1,244 @@
+import { render } from "@testing-library/react";
+
+import { CarouselPromotions } from "../CarouselPromotions";
+import { CarouselPromotionsItem } from "../CarouselPromotionsItem";
+import { Image } from "../../Image";
+
+describe("rendering CarouselPromotions", () => {
+  describe("initial state", () => {
+    it("has default class carousel", () => {
+      const { getByTestId } = render(
+        <CarouselPromotions data-testid="test-id" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("carousel-promotions");
+    });
+    it("has default class carousel-promotions__viewport-wrapper", () => {
+      const { container } = render(<CarouselPromotions />);
+      expect(
+        container.getElementsByClassName(
+          "carousel-promotions__viewport-wrapper",
+        ).length,
+      ).toBe(1);
+    });
+    it("has default class carousel-promotions__viewport", () => {
+      const { container } = render(<CarouselPromotions />);
+      expect(
+        container.getElementsByClassName("carousel-promotions__viewport")
+          .length,
+      ).toBe(1);
+    });
+    it("has default class carousel-promotions__track", () => {
+      const { container } = render(<CarouselPromotions />);
+      expect(
+        container.getElementsByClassName("carousel-promotions__track").length,
+      ).toBe(1);
+    });
+    it("has default class carousel-promotions__pagination", () => {
+      const { container } = render(<CarouselPromotions />);
+      expect(
+        container.getElementsByClassName("carousel-promotions__pagination")
+          .length,
+      ).toBe(1);
+    });
+  });
+
+  describe("passed props", () => {
+    const items = (
+      <>
+        <CarouselPromotionsItem
+          image={
+            <Image
+              src={`https://placehold.co/800x150?text=slide`}
+              alt="Image"
+            />
+          }
+          title="Akcia za vernosť."
+          subtitle="Predĺž si svoj paušál a vyhraj telefón v súťaži."
+        />
+        <CarouselPromotionsItem
+          image={
+            <Image
+              src={`https://placehold.co/800x150?text=slide`}
+              alt="Image"
+            />
+          }
+          title="Akcia za vernosť."
+          subtitle="Predĺž si svoj paušál a vyhraj telefón v súťaži."
+        />
+        <CarouselPromotionsItem
+          image={
+            <Image
+              src={`https://placehold.co/800x150?text=slide`}
+              alt="Image"
+            />
+          }
+          title="Akcia za vernosť."
+          subtitle="Predĺž si svoj paušál a vyhraj telefón v súťaži."
+        />
+      </>
+    );
+
+    it("has pagination container (buttons are rendered by Swiper after initialization)", () => {
+      const { container } = render(
+        <CarouselPromotions>{items}</CarouselPromotions>,
+      );
+      // Pagination buttons are dynamically created by Swiper.js after initialization
+      // so we just verify the pagination container exists
+      expect(
+        container.querySelector(".carousel-promotions__pagination"),
+      ).toBeInTheDocument();
+    });
+    it("has class is-dark when colorScheme='dark' is passed", () => {
+      const { getByTestId } = render(
+        <CarouselPromotions data-testid="test-id" colorScheme="dark">
+          {items}
+        </CarouselPromotions>,
+      );
+      expect(getByTestId("test-id")).toHaveClass("is-dark");
+    });
+
+    it("has class is-light when colorScheme='light' is passed", () => {
+      const { getByTestId } = render(
+        <CarouselPromotions data-testid="test-id" colorScheme="light">
+          {items}
+        </CarouselPromotions>,
+      );
+      expect(getByTestId("test-id")).toHaveClass("is-light");
+    });
+
+    it("passes swiperOptions as data-swiper-options attribute", () => {
+      const swiperOptions = { slidesPerView: 2 };
+      const { getByTestId } = render(
+        <CarouselPromotions data-testid="test-id" swiperOptions={swiperOptions}>
+          {items}
+        </CarouselPromotions>,
+      );
+      expect(getByTestId("test-id")).toHaveAttribute(
+        "data-swiper-options",
+        JSON.stringify(swiperOptions),
+      );
+    });
+
+    it("does not set data-swiper-options attribute when swiperOptions prop is not provided", () => {
+      const { getByTestId } = render(
+        <CarouselPromotions data-testid="test-id">{items}</CarouselPromotions>,
+      );
+      expect(getByTestId("test-id").hasAttribute("data-swiper-options")).toBe(
+        false,
+      );
+    });
+  });
+
+  describe("Swiper integration", () => {
+    const items = (
+      <>
+        <CarouselPromotionsItem
+          image={
+            <Image
+              src={`https://placehold.co/800x150?text=slide`}
+              alt="Image"
+            />
+          }
+          title="Akcia za vernosť."
+          subtitle="Predĺž si svoj paušál a vyhraj telefón v súťaži."
+        />
+        <CarouselPromotionsItem
+          image={
+            <Image
+              src={`https://placehold.co/800x150?text=slide`}
+              alt="Image"
+            />
+          }
+          title="Akcia za vernosť."
+          subtitle="Predĺž si svoj paušál a vyhraj telefón v súťaži."
+        />
+      </>
+    );
+
+    it("track element uses carousel-promotions__track class which maps to swiper-wrapper", () => {
+      const { container } = render(
+        <CarouselPromotions>{items}</CarouselPromotions>,
+      );
+      expect(
+        container.querySelector(".carousel-promotions__track"),
+      ).toBeInTheDocument();
+    });
+
+    it("slide elements use carousel-promotions__slide class which maps to swiper-slide", () => {
+      const { container } = render(
+        <CarouselPromotions>{items}</CarouselPromotions>,
+      );
+      const slides = container.getElementsByClassName(
+        "carousel-promotions__slide",
+      );
+      for (let i = 0; i < slides.length; i++) {
+        expect(slides[i]).toHaveClass("carousel-promotions__slide");
+      }
+    });
+
+    it("viewport element is used as Swiper container", () => {
+      const { container } = render(
+        <CarouselPromotions>{items}</CarouselPromotions>,
+      );
+      expect(
+        container.querySelector(".carousel-promotions__viewport"),
+      ).toBeInTheDocument();
+    });
+
+    it("pagination container has proper accessibility attributes", () => {
+      const { container } = render(
+        <CarouselPromotions>{items}</CarouselPromotions>,
+      );
+      const pagination = container.querySelector(
+        ".carousel-promotions__pagination",
+      );
+      expect(pagination).toHaveAttribute("role", "tablist");
+    });
+
+    it("pagination container is empty initially (buttons are rendered by Swiper after initialization)", () => {
+      const { container } = render(
+        <CarouselPromotions>{items}</CarouselPromotions>,
+      );
+      // Pagination buttons are dynamically created by Swiper.js after initialization
+      const pagination = container.querySelector(
+        ".carousel-promotions__pagination",
+      );
+      expect(pagination.children.length).toBe(0);
+    });
+  });
+
+  describe("autoplay functionality", () => {
+    const items = (
+      <>
+        <CarouselPromotionsItem
+          image={
+            <Image
+              src={`https://placehold.co/800x150?text=slide`}
+              alt="Image"
+            />
+          }
+          title="Akcia za vernosť."
+          subtitle="Predĺž si svoj paušál a vyhraj telefón v súťaži."
+        />
+      </>
+    );
+
+    it("adds data-interval attribute when provided", () => {
+      const { getByTestId } = render(
+        <CarouselPromotions data-testid="test-id" data-interval={5000}>
+          {items}
+        </CarouselPromotions>,
+      );
+      expect(getByTestId("test-id")).toHaveAttribute("data-interval", "5000");
+    });
+
+    it("adds data-carousel-promotions attribute for component identification", () => {
+      const { getByTestId } = render(
+        <CarouselPromotions data-testid="test-id">{items}</CarouselPromotions>,
+      );
+      expect(getByTestId("test-id")).toHaveAttribute(
+        "data-carousel-promotions",
+      );
+    });
+  });
+});

package/src/components/CarouselPromotions/tests/CarouselPromotionsItem.unit.test.js

@@ -0,0 +1,33 @@
+import { render } from "@testing-library/react";
+
+import { CarouselPromotionsItem } from "../CarouselPromotionsItem";
+
+describe("rendering CarouselPromotionsItem", () => {
+  describe("initial state", () => {
+    it("has default class carousel-promotions__slide", () => {
+      const { getByTestId } = render(
+        <CarouselPromotionsItem data-testid="test-id" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("carousel-promotions__slide");
+    });
+  });
+  describe("passed props", () => {
+    it("renders children", () => {
+      const { getByText } = render(
+        <CarouselPromotionsItem
+          data-testid="test-id"
+          title="Akcia za vernosť."
+          subtitle="Predĺž si svoj paušál a vyhraj telefón v súťaži."
+        />,
+      );
+      expect(getByText("Akcia za vernosť.")).toBeInTheDocument();
+    });
+    it("has additional class when className is set", () => {
+      const { getByTestId } = render(
+        <CarouselPromotionsItem data-testid="test-id" className="test-class" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("carousel-promotions__slide");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+  });
+});