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

package/src/components/Carousel/Carousel.tsx

@@ -11,17 +11,18 @@ import {
   CLASS_ROOT,
   CLASS_VIEWPORT_WRAPPER,
   CLASS_VIEWPORT,
-  CLASS_BLINDS,
   CLASS_NEXT,
   CLASS_PREV,
   CLASS_DOTS,
   CLASS_TRACK,
+  CLASS_SCROLLBAR_DRAG,
+  CLASS_SCROLLBAR,
 } from "./constants";
 import { useStatic } from "@/utils/hooks";
 
 interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
-  /** Glider.js (https://nickpiscitelli.github.io/Glider.js/) options object */
-  gliderOptions?: Record<string, any>;
+  /** Swiper.js (https://swiperjs.com/) options object */
+  swiperOptions?: Record<string, any>;
   /** Inverse colors */
   colorScheme?: "light" | "dark";
   /** Carousel items */
@@ -31,7 +32,7 @@ interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
 
 const Carousel: React.FC<CarouselProps> = ({
   className,
-  gliderOptions,
+  swiperOptions,
   items,
   colorScheme,
   ...other
@@ -58,8 +59,8 @@ const Carousel: React.FC<CarouselProps> = ({
       className={classes}
       ref={carouselRef}
       data-carousel
-      {...(gliderOptions
-        ? { "data-glider-options": JSON.stringify(gliderOptions) }
+      {...(swiperOptions
+        ? { "data-swiper-options": JSON.stringify(swiperOptions) }
         : {})}
       {...other}
     >
@@ -67,7 +68,6 @@ const Carousel: React.FC<CarouselProps> = ({
         <div className={CLASS_VIEWPORT}>
           <div className={CLASS_TRACK}>{carouselItems}</div>
         </div>
-        <div className={CLASS_BLINDS}></div>
         <button
           type="button"
           aria-label="Naspäť"
@@ -83,7 +83,12 @@ const Carousel: React.FC<CarouselProps> = ({
           <Icon size="medium" name="chevron-right" />
         </button>
       </div>
+
       <div role="tablist" className={elementClasses.dots} />
+
+      <div className={cx(CLASS_SCROLLBAR, "hide-md")}>
+        <div className={CLASS_SCROLLBAR_DRAG} />
+      </div>
     </div>
   );
 };

package/src/components/Carousel/constants.ts

@@ -1,18 +1,24 @@
-export const CLASS_ROOT = 'carousel';
+export const CLASS_ROOT = "carousel";
 
-export const CLASS_WRAPPER = `${CLASS_ROOT}`;
 export const CLASS_VIEWPORT_WRAPPER = `${CLASS_ROOT}__viewport-wrapper`;
 export const CLASS_VIEWPORT = `${CLASS_ROOT}__viewport`;
-export const CLASS_BLINDS = `${CLASS_ROOT}__blinds`;
 export const CLASS_TRACK = `${CLASS_ROOT}__track`;
 export const CLASS_SLIDE = `${CLASS_ROOT}__slide`;
+export const CLASS_SLIDE_NEXT = `${CLASS_ROOT}__slide-next`;
+export const CLASS_SLIDE_PREV = `${CLASS_ROOT}__slide-prev`;
 export const CLASS_PREV = `${CLASS_ROOT}__prev`;
 export const CLASS_NEXT = `${CLASS_ROOT}__next`;
 export const CLASS_DOTS = `${CLASS_ROOT}__pagination`;
+export const CLASS_DOT = `${CLASS_ROOT}__pagination-item`;
+export const CLASS_SCROLLBAR = `${CLASS_ROOT}__scrollbar`;
+export const CLASS_SCROLLBAR_HORIZONTAL = `${CLASS_ROOT}__scrollbar-horizontal`;
+export const CLASS_SCROLLBAR_DRAG = `${CLASS_ROOT}__scrollbar-drag`;
+export const CLASS_ACTIVE = "is-active";
 
-export const SELECTOR_WRAPPER = `.${CLASS_WRAPPER}`;
 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_DOTS = `.${CLASS_DOTS}`;
+export const SELECTOR_SCROLLBAR = `.${CLASS_SCROLLBAR}`;
+export const SELECTOR_ACTIVE = `.${CLASS_ACTIVE}`;

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

@@ -5,19 +5,6 @@
 
 $space: space.get();
 
-$button: (
-  default: (
-    color: var(--color-text-inverse),
-    background-color: var(--color-surface-contrast),
-  ),
-  hover: (
-    background-color: var(--color-surface-tertiary),
-  ),
-  active: (
-    background-color: var(--color-surface-contrast),
-  ),
-);
-
 $dot-layout: (
   width: space.get("medium"),
   height: space.get("medium"),

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

@@ -9,7 +9,6 @@
 @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 "./config";
 
 /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */
@@ -31,6 +30,7 @@
   margin: 0 auto;
   position: relative;
   overflow-y: hidden;
+  overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: none;
   transform: translateZ(0);
@@ -45,31 +45,11 @@
 
   @include breakpoint.get("sm", "down") {
     padding-bottom: math.div(config.$space, 2);
-    scrollbar-width: auto; // hides scrollbar on FF
   }
 
   @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);
-    }
+    overflow-x: hidden; // hide scrollbar on larger screens
   }
 
   &.is-draggable {
@@ -84,39 +64,6 @@
   }
 }
 
-@mixin viewport-blinds() {
-  $spacing: sass-map.get(config.$viewport-horizontal-spacing, "md") * 2;
-
-  pointer-events: none;
-
-  @include breakpoint.get("md") {
-    position: absolute;
-    top: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    height: 100%;
-    box-shadow:
-      11px 0 0 0 color.$white inset,
-      -11px 0 0 0 color.$white inset;
-    width: calc(100% - #{$spacing} + 2px);
-  }
-}
-
-@mixin viewport-blinds-color($color) {
-  @if ($color == "black") {
-    box-shadow:
-    // TODO : replace with new token when available
-      10px 0 0 0 #141414 inset,
-      -10px 0 0 0 #141414 inset;
-  }
-
-  @if ($color == "gray") {
-    box-shadow:
-      10px 0 0 0 color.$gray-300 inset,
-      -10px 0 0 0 color.$gray-300 inset;
-  }
-}
-
 @mixin track {
   transform: translateZ(0);
   width: 100%;
@@ -147,6 +94,7 @@
   display: flex;
   flex-direction: column;
   max-width: 100%;
+  // width: auto !important;
   flex: 0 0 auto;
   padding: 0 math.div(config.$space, 2);
   user-select: none;
@@ -168,7 +116,6 @@
 
 @mixin button-base {
   @include button-mixins.base(button-config.$base);
-  // @include button-mixins.style(config.$button);
   @include button-mixins.square-base();
   @include button-mixins.square-size("default");
   @include base.focusring-round();
@@ -229,3 +176,21 @@
     background-color: sass-map.get(config.$dot, "active");
   }
 }
+
+@mixin scrollbar-base {
+  position: relative;
+  margin-top: config.$space;
+}
+
+@mixin scrollbar-horizontal {
+  height: convert.to-rem(6px);
+  appearance: none;
+  background-color: var(--color-surface-moderate);
+  border-radius: 99px;
+}
+
+@mixin scrollbar-drag {
+  opacity: 1;
+  background-color: var(--color-fill-contrast);
+  border-radius: 99px;
+}

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

@@ -1,4 +1,5 @@
 @use "./mixins";
+@use "../../../styles/tools/convert";
 
 @layer components {
   .carousel {
@@ -16,18 +17,6 @@
       @include mixins.viewport;
     }
 
-    &__blinds {
-      @include mixins.viewport-blinds;
-
-      .bg-black & {
-        @include mixins.viewport-blinds-color("black");
-      }
-
-      .bg-gray & {
-        @include mixins.viewport-blinds-color("gray");
-      }
-    }
-
     &__track {
       @include mixins.track;
     }
@@ -60,5 +49,17 @@
     &__pagination-item {
       @include mixins.pagination-item;
     }
+
+    &__scrollbar {
+      @include mixins.scrollbar-base;
+    }
+
+    &__scrollbar-horizontal {
+      @include mixins.scrollbar-horizontal;
+    }
+
+    &__scrollbar-drag {
+      @include mixins.scrollbar-drag;
+    }
   }
 }

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

@@ -11,6 +11,12 @@ describe("rendering Carousel", () => {
       );
       expect(getByTestId("test-id")).toHaveClass("carousel");
     });
+    it("has data-carousel attribute", () => {
+      const { container } = render(<Carousel items={[]} />);
+      expect(container.querySelector(".carousel")).toHaveAttribute(
+        "data-carousel",
+      );
+    });
     it("has default class carousel__viewport-wrapper", () => {
       const { container } = render(<Carousel items={[]} />);
       expect(
@@ -29,11 +35,11 @@ describe("rendering Carousel", () => {
         1,
       );
     });
-    it("has default class carousel__blinds", () => {
+    it("has default class carousel__scrollbar", () => {
       const { container } = render(<Carousel items={[]} />);
-      expect(container.getElementsByClassName("carousel__blinds").length).toBe(
-        1,
-      );
+      expect(
+        container.getElementsByClassName("carousel__scrollbar").length,
+      ).toBe(1);
     });
     it("has default class carousel__pagination", () => {
       const { container } = render(<Carousel items={[]} />);
@@ -90,36 +96,31 @@ describe("rendering Carousel", () => {
       <p key="item2">item2</p>,
       <p key="item3">item3</p>,
     ];
-    it("buttons have class is-disabled when items prop array is empty", () => {
+    it("has scrollbar element", () => {
       const { container } = render(<Carousel items={[]} />);
-      expect(container.querySelector(`button[aria-label="Ďalej"]`)).toHaveClass(
-        "is-disabled",
-      );
       expect(
-        container.querySelector(`button[aria-label="Naspäť"]`),
-      ).toHaveClass("is-disabled");
+        container.getElementsByClassName("carousel__scrollbar").length,
+      ).toBe(1);
     });
-    it("has number of pagination buttons with role tab equal to length of items array", () => {
-      const { container } = render(<Carousel items={items} />);
-      expect(container.querySelectorAll(`button[role="tab"]`).length).toBe(3);
+    it("has scrollbar drag element", () => {
+      const { container } = render(<Carousel items={[]} />);
+      expect(
+        container.getElementsByClassName("carousel__scrollbar-drag").length,
+      ).toBe(1);
     });
-    it(`pagination buttons have aria-label set to "Page [index of item in items + 1]"`, () => {
+    it("pagination container has role tablist", () => {
       const { container } = render(<Carousel items={items} />);
-      for (let i in items) {
-        expect(
-          container.querySelector(
-            `button[aria-label="Page ${parseInt(i) + 1}"]`,
-          ),
-        ).toBeInTheDocument();
-      }
+      expect(
+        container.querySelector('.carousel__pagination[role="tablist"]'),
+      ).toBeInTheDocument();
     });
-    it(`pagination buttons have data-index set to "[index of item in items]"`, () => {
+    it("pagination container is empty initially (buttons are rendered by Swiper after initialization)", () => {
       const { container } = render(<Carousel items={items} />);
-      for (let i in items) {
-        expect(
-          container.querySelector(`button[data-index="${i}"]`),
-        ).toBeInTheDocument();
-      }
+      // Pagination buttons are dynamically created by Swiper.js after initialization
+      // In a test environment without DOM manipulation, they won't be present
+      expect(
+        container.querySelector(".carousel__pagination").children.length,
+      ).toBe(0);
     });
     it("has number of CarouselItems with div with class carousel__slide equal to length of items array", () => {
       const { container } = render(<Carousel items={items} />);
@@ -129,22 +130,78 @@ describe("rendering Carousel", () => {
       }
       expect(divs.length).toBe(3);
     });
-    it("CarouselItems div has data-gslide set to [index of item in items]", () => {
+    it("CarouselItems div has rendered item inside of itself", () => {
       const { container } = render(<Carousel items={items} />);
-      for (let i in items) {
-        expect(
-          container.querySelector(`div[data-gslide="${i}"]`),
-        ).toBeInTheDocument();
+      const slides = container.getElementsByClassName("carousel__slide");
+      for (let i = 0; i < items.length; i++) {
+        expect(slides[i].querySelector("p").textContent).toBe(`item${i + 1}`);
       }
     });
-    it("CarouselItems div has rendered item inside of itself", () => {
+  });
+  describe("swiperOptions prop", () => {
+    const items = [
+      <p key="item1">item1</p>,
+      <p key="item2">item2</p>,
+      <p key="item3">item3</p>,
+    ];
+    it("sets data-swiper-options attribute when swiperOptions prop is provided", () => {
+      const swiperOptions = { slidesPerView: 2, loop: true };
+      const { container } = render(
+        <Carousel items={items} swiperOptions={swiperOptions} />,
+      );
+      const carousel = container.querySelector(".carousel");
+      expect(carousel.getAttribute("data-swiper-options")).toBe(
+        JSON.stringify(swiperOptions),
+      );
+    });
+    it("does not set data-swiper-options attribute when swiperOptions prop is not provided", () => {
       const { container } = render(<Carousel items={items} />);
-      for (let i in items) {
-        expect(
-          container.querySelector(`div[data-gslide="${i}"]`).querySelector("p")
-            .textContent,
-        ).toBe(`item${parseInt(i) + 1}`);
+      const carousel = container.querySelector(".carousel");
+      expect(carousel.hasAttribute("data-swiper-options")).toBe(false);
+    });
+  });
+  describe("Swiper integration", () => {
+    const items = [<p key="item1">item1</p>, <p key="item2">item2</p>];
+
+    it("track element uses carousel__track class which maps to swiper-wrapper", () => {
+      const { container } = render(<Carousel items={items} />);
+      expect(container.querySelector(".carousel__track")).toBeInTheDocument();
+    });
+
+    it("slide elements use carousel__slide class which maps to swiper-slide", () => {
+      const { container } = render(<Carousel items={items} />);
+      const slides = container.getElementsByClassName("carousel__slide");
+      for (let i = 0; i < slides.length; i++) {
+        expect(slides[i]).toHaveClass("carousel__slide");
       }
     });
+
+    it("viewport element is used as Swiper container", () => {
+      const { container } = render(<Carousel items={items} />);
+      expect(
+        container.querySelector(".carousel__viewport"),
+      ).toBeInTheDocument();
+    });
+  });
+  describe("colorScheme prop", () => {
+    const items = [<p key="item1">item1</p>];
+    it("adds is-dark class when colorScheme is dark", () => {
+      const { container } = render(
+        <Carousel items={items} colorScheme="dark" />,
+      );
+      expect(container.querySelector(".carousel")).toHaveClass("is-dark");
+    });
+    it("adds is-light class when colorScheme is light", () => {
+      const { container } = render(
+        <Carousel items={items} colorScheme="light" />,
+      );
+      expect(container.querySelector(".carousel")).toHaveClass("is-light");
+    });
+    it("does not add color scheme classes when colorScheme is not provided", () => {
+      const { container } = render(<Carousel items={items} />);
+      const carousel = container.querySelector(".carousel");
+      expect(carousel).not.toHaveClass("is-dark");
+      expect(carousel).not.toHaveClass("is-light");
+    });
   });
 });

package/src/components/Carousel/tests/CarouselItem.unit.test.js

@@ -8,6 +8,10 @@ describe("rendering CarouselItem", () => {
       const { getByTestId } = render(<CarouselItem data-testid="test-id" />);
       expect(getByTestId("test-id")).toHaveClass("carousel__slide");
     });
+    it("has carousel__slide class", () => {
+      const { getByTestId } = render(<CarouselItem data-testid="test-id" />);
+      expect(getByTestId("test-id")).toHaveClass("carousel__slide");
+    });
   });
   describe("passed props", () => {
     it("renders children", () => {