@orangesk/orange-design-system 2.0.0-beta.3 → 2.0.0-beta.5

package/src/components/CarouselHero/constants.ts

@@ -0,0 +1,37 @@
+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_CONTENT = `${CLASS_ROOT}__slide-content`;
+export const CLASS_SLIDE_TITLE = `${CLASS_ROOT}__slide-title`;
+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_CONTROLS = `${CLASS_ROOT}__controls`;
+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,289 @@
+@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: config.$space;
+}
+
+@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 controls-base {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0 convert.to-rem(40px);
+  background: var(--color-surface-primary);
+  border-bottom: 1px solid var(--color-border-subtle);
+
+  @include breakpoint.get("sm", "down") {
+    padding: 0 convert.to-rem(15px);
+  }
+}
+
+@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;
+    }
+  }
+
+  @include breakpoint.get("md", "down") {
+    flex-direction: column;
+  }
+}
+
+@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 slide-title {
+  color: var(--color-text-default);
+  margin-top: 0;
+  margin-bottom: space.get("medium");
+}
+
+@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,67 @@
+@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-content {
+      @include mixins.slide-content;
+    }
+
+    &__slide-title {
+      @include mixins.slide-title;
+    }
+
+    &__slide-image {
+      @include mixins.slide-image;
+    }
+
+    &__controls {
+      @include mixins.controls-base;
+    }
+
+    &__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;
+    }
+  }
+}

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

@@ -0,0 +1,148 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+import { CarouselHero, CarouselHeroItem } from "../";
+
+const basicExample = (
+  <CarouselHero>
+    <CarouselHeroItem
+      title="Slide 1"
+      image="https://placehold.co/720x560?text=Slide+1"
+    >
+      <p>First slide content</p>
+    </CarouselHeroItem>
+    <CarouselHeroItem
+      title="Slide 2"
+      image="https://placehold.co/720x560?text=Slide+2"
+    >
+      <p>Second slide content</p>
+    </CarouselHeroItem>
+  </CarouselHero>
+);
+
+const exampleWithTabs = (
+  <CarouselHero
+    tabs={[
+      { label: "First Tab" },
+      { label: "Second Tab" },
+      { label: "Third Tab" },
+    ]}
+  >
+    <CarouselHeroItem
+      title="Slide 1"
+      image="https://placehold.co/720x560?text=Slide+1"
+    >
+      <p>First slide with tabs</p>
+    </CarouselHeroItem>
+    <CarouselHeroItem
+      title="Slide 2"
+      image="https://placehold.co/720x560?text=Slide+2"
+    >
+      <p>Second slide with tabs</p>
+    </CarouselHeroItem>
+    <CarouselHeroItem
+      title="Slide 3"
+      image="https://placehold.co/720x560?text=Slide+3"
+    >
+      <p>Third slide with tabs</p>
+    </CarouselHeroItem>
+  </CarouselHero>
+);
+
+const exampleWithAutoplay = (
+  <CarouselHero
+    interval={3000}
+    tabs={[{ label: "Auto Tab 1" }, { label: "Auto Tab 2" }]}
+  >
+    <CarouselHeroItem
+      title="Auto Slide 1"
+      image="https://placehold.co/720x560?text=Auto+Slide+1"
+    >
+      <p>Autoplay slide 1</p>
+    </CarouselHeroItem>
+    <CarouselHeroItem
+      title="Auto Slide 2"
+      image="https://placehold.co/720x560?text=Auto+Slide+2"
+    >
+      <p>Autoplay slide 2</p>
+    </CarouselHeroItem>
+  </CarouselHero>
+);
+
+const exampleWithComplexContent = (
+  <CarouselHero
+    colorScheme="light"
+    tabs={[{ label: "Product 1" }, { label: "Product 2" }]}
+    interval={5000}
+    swiperOptions={{ speed: 300 }}
+  >
+    <CarouselHeroItem
+      title="Premium Product"
+      image="https://placehold.co/720x560?text=Product+1"
+    >
+      <p>Discover our premium product line with advanced features.</p>
+      <button type="button">Learn More</button>
+      <button type="button">Buy Now</button>
+    </CarouselHeroItem>
+    <CarouselHeroItem
+      title="Special Offer"
+      image="https://placehold.co/720x560?text=Product+2"
+    >
+      <p>Limited time offer - get 50% off on selected items.</p>
+      <ul>
+        <li>Free shipping</li>
+        <li>30-day return policy</li>
+        <li>Extended warranty</li>
+      </ul>
+      <button type="button">View Details</button>
+    </CarouselHeroItem>
+  </CarouselHero>
+);
+
+describe("CarouselHero conformance", () => {
+  it("is valid html", () => {
+    const { container } = render(basicExample);
+    expect(container).toHTMLValidate();
+  });
+
+  it("is accessible", async () => {
+    const { container } = render(basicExample);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("CarouselHero with tabs conformance", () => {
+  it("is valid html", () => {
+    const { container } = render(exampleWithTabs);
+    expect(container).toHTMLValidate();
+  });
+
+  it("is accessible", async () => {
+    const { container } = render(exampleWithTabs);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("CarouselHero with autoplay conformance", () => {
+  it("is valid html", () => {
+    const { container } = render(exampleWithAutoplay);
+    expect(container).toHTMLValidate();
+  });
+
+  it("is accessible", async () => {
+    const { container } = render(exampleWithAutoplay);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("CarouselHero with complex content conformance", () => {
+  it("is valid html", () => {
+    const { container } = render(exampleWithComplexContent);
+    expect(container).toHTMLValidate();
+  });
+
+  it("is accessible", async () => {
+    const { container } = render(exampleWithComplexContent);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});