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

package/src/components/CarouselHero/tests/CarouselHeroItem.unit.test.js

@@ -0,0 +1,143 @@
+import { render } from "@testing-library/react";
+
+import { CarouselHeroItem } from "../CarouselHeroItem";
+
+describe("rendering CarouselHeroItem", () => {
+  describe("initial state", () => {
+    it("has default class carousel-hero__slide", () => {
+      const { getByTestId } = render(
+        <CarouselHeroItem
+          data-testid="test-id"
+          image="https://placehold.co/720x560"
+        />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("carousel-hero__slide");
+    });
+
+    it("renders slide content container", () => {
+      const { container } = render(
+        <CarouselHeroItem image="https://placehold.co/720x560" />,
+      );
+      expect(
+        container.getElementsByClassName("carousel-hero__slide-content").length,
+      ).toBe(1);
+    });
+
+    it("renders Container wrapper with proper class", () => {
+      const { container } = render(
+        <CarouselHeroItem image="https://placehold.co/720x560" />,
+      );
+      expect(
+        container.getElementsByClassName("carousel-hero__slide-container")
+          .length,
+      ).toBe(1);
+    });
+
+    it("renders image with proper attributes", () => {
+      const imageUrl = "https://placehold.co/720x560";
+      const { container } = render(<CarouselHeroItem image={imageUrl} />);
+
+      const imageElement = container.querySelector(
+        ".carousel-hero__slide-image",
+      );
+      expect(imageElement).toBeInTheDocument();
+      expect(imageElement).toHaveAttribute("src", imageUrl);
+      expect(imageElement).toHaveAttribute("alt", "Obrázok");
+    });
+  });
+
+  describe("passed props", () => {
+    it("renders children content", () => {
+      const { getByText } = render(
+        <CarouselHeroItem image="https://placehold.co/720x560">
+          <p>Test content</p>
+          <button>Test button</button>
+        </CarouselHeroItem>,
+      );
+      expect(getByText("Test content")).toBeInTheDocument();
+      expect(getByText("Test button")).toBeInTheDocument();
+    });
+
+    it("has additional class when className is set", () => {
+      const { getByTestId } = render(
+        <CarouselHeroItem
+          data-testid="test-id"
+          className="test-class"
+          image="https://placehold.co/720x560"
+        />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("carousel-hero__slide");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+
+    it("passes through other HTML attributes", () => {
+      const { getByTestId } = render(
+        <CarouselHeroItem
+          data-testid="test-id"
+          id="custom-id"
+          role="tabpanel"
+          image="https://placehold.co/720x560"
+        />,
+      );
+      expect(getByTestId("test-id")).toHaveAttribute("id", "custom-id");
+      expect(getByTestId("test-id")).toHaveAttribute("role", "tabpanel");
+    });
+
+    it("renders with different image source", () => {
+      const customImage = "https://example.com/custom-image.jpg";
+      const { container } = render(<CarouselHeroItem image={customImage} />);
+
+      const imageElement = container.querySelector(
+        ".carousel-hero__slide-image",
+      );
+      expect(imageElement).toHaveAttribute("src", customImage);
+      expect(imageElement).toHaveAttribute("alt", "Obrázok");
+    });
+
+    it("renders children in proper content container", () => {
+      const { container } = render(
+        <CarouselHeroItem image="https://placehold.co/720x560">
+          <p data-testid="child-content">Child content</p>
+        </CarouselHeroItem>,
+      );
+
+      const contentContainer = container.querySelector(
+        ".carousel-hero__slide-content",
+      );
+      const childContent = container.querySelector(
+        "[data-testid='child-content']",
+      );
+
+      expect(contentContainer).toContainElement(childContent);
+    });
+
+    it("maintains proper DOM structure", () => {
+      const { container } = render(
+        <CarouselHeroItem image="https://placehold.co/720x560">
+          <h2>Title</h2>
+          <p>Content</p>
+        </CarouselHeroItem>,
+      );
+
+      const slide = container.querySelector(".carousel-hero__slide");
+      const slideContainer = container.querySelector(
+        ".carousel-hero__slide-container",
+      );
+      const slideContent = container.querySelector(
+        ".carousel-hero__slide-content",
+      );
+      const slideImage = container.querySelector(".carousel-hero__slide-image");
+
+      // Check that slide contains the Container wrapper
+      expect(slide).toContainElement(slideContainer);
+
+      // Check that Container wrapper contains both content and image
+      expect(slideContainer).toContainElement(slideContent);
+      expect(slideContainer).toContainElement(slideImage);
+
+      // Check that slide content contains children
+      expect(slideContent).toHaveTextContent("Title");
+      expect(slideContent).toHaveTextContent("Content");
+    });
+  });
+});

package/src/components/CarouselPromotions/CarouselPromotions.tsx

@@ -17,7 +17,6 @@ import { useStatic } from "@/utils/hooks";
 interface CarouselPromotionsProps {
   className?: string;
   swiperOptions?: Record<string, any>;
-  colorScheme?: "light" | "dark";
   children?: ReactNode;
   [key: string]: any;
 }
@@ -25,16 +24,12 @@ interface CarouselPromotionsProps {
 const CarouselPromotions: React.FC<CarouselPromotionsProps> = ({
   className,
   swiperOptions,
-  colorScheme,
   children,
   ...other
 }) => {
   const [carouselRef] = useStatic(CarouselPromotionsStatic);
 
-  const classes = cx(CLASS_ROOT, className, {
-    "is-light": colorScheme === "light",
-    "is-dark": colorScheme === "dark",
-  });
+  const classes = cx(CLASS_ROOT, className);
 
   const elementClasses = {
     next: cx(CLASS_NEXT, "hide-lg"),

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

@@ -17,7 +17,7 @@
 @mixin base {
   margin: 0 auto;
   position: relative;
-  margin-bottom: config.$space;
+  margin-bottom: space.get("large");
 }
 
 @mixin viewport-wrapper {
@@ -186,6 +186,8 @@
     {
       #{$property}: $value;
     }
+
+    margin-bottom: space.get();
   }
   @include breakpoint.get("lg") {
     @each $property,
@@ -193,9 +195,8 @@
     {
       #{$property}: $value;
     }
-
-    margin-bottom: space.get();
   }
+  font-weight: 700;
 }
 
 @mixin slide-content {
@@ -216,8 +217,10 @@
     padding: space.get("medium");
   }
 
-  @include breakpoint.get('md', 'down') {
-    @include generate.css-map(typography-config.$body-text, 'small');
+  @include breakpoint.get("md", "down") {
+    @include generate.responsive-css-map(
+      sass-map.get(typography-config.$body-text, "small")
+    );
   }
 }
 

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

@@ -88,23 +88,6 @@ describe("rendering CarouselPromotions", () => {
         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 };

package/src/components/CartTable/FooterPriceColumn.tsx

@@ -22,10 +22,12 @@ const FooterPriceColumn: React.FC<FooterPriceColumnProps> = ({
 
   return (
     <>
-      {discount > 0 && <del className="color-gray">{formatPrice(price)}</del>}
+      {discount > 0 && (
+        <del className="text-secondary">{formatPrice(price)}</del>
+      )}
       <div>
         <div
-          className={cx("color-orange mb-none", {
+          className={cx("text-accent mb-none", {
             h4: size !== "large",
             h2: size === "large",
           })}
@@ -33,7 +35,7 @@ const FooterPriceColumn: React.FC<FooterPriceColumnProps> = ({
           {formatPrice(price - discount)}
         </div>
         <span
-          className={cx("color-orange mb-none", {
+          className={cx("text-accent mb-none", {
             h6: size !== "large",
             h3: size === "large",
           })}

package/src/components/CartTable/Price.tsx

@@ -22,7 +22,7 @@ const Price: React.FC<PriceProps> = ({
     <>
       {discount && price && (
         <>
-          <del className="color-gray">{formatPrice(price)}</del>
+          <del className="text-secondary">{formatPrice(price)}</del>
           <br />
         </>
       )}

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

@@ -1,11 +1,12 @@
 /* Code component styles */
 .code {
-  font-feature-settings: 'calt' 1;
+  font-feature-settings: "calt" 1;
   text-rendering: optimizeLegibility;
 }
 
-.code[class*='language-'] {
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
+.code[class*="language-"] {
+  font-family:
+    "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace;
 }
 
 /* Inline code styles */
@@ -24,7 +25,7 @@
   &.inline {
     display: inline;
   }
-  
+
   &.block {
     display: block;
   }
@@ -55,4 +56,4 @@
   overflow: auto;
   margin: 0;
   margin-bottom: 1rem; /* mb-4 */
-} 
+}

package/src/components/Controls/Controls.tsx

@@ -6,7 +6,6 @@ interface IControlsProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   elemRef?: React.Ref<any>;
   icon: string;
   className?: string;
-  colorScheme?: "dark" | "light";
   isDisabled?: boolean;
 }
 
@@ -23,12 +22,8 @@ type NativeButtonProps = IControlsProps &
 export type ControlsProps = NativeButtonProps;
 
 const Controls = React.forwardRef<any, ControlsProps>((props, ref) => {
-  const { elemRef, className, icon, colorScheme, isDisabled, ...rest } = props;
-  const classes = cx(
-    CLASS_ROOT,
-    { "is-dark": colorScheme === "dark", "is-light": colorScheme === "light" },
-    className,
-  );
+  const { elemRef, className, icon, isDisabled, ...rest } = props;
+  const classes = cx(CLASS_ROOT, className);
 
   const buttonProps = rest as React.ButtonHTMLAttributes<HTMLButtonElement>;
   return (

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

@@ -22,8 +22,8 @@ $base: (
 $states: (
   default: (
     color: var(--color-text-default),
-    background-color: var(--color-fill-disabled),
-    border-color: var(--color-fill-disabled),
+    background-color: var(--color-fill-moderate),
+    border-color: var(--color-fill-moderate),
   ),
   hover: (
     color: var(--color-text-inverse),

package/src/components/Controls/tests/Controls.test.js

@@ -16,15 +16,6 @@ describe("Controls Component", () => {
       expect(button).toHaveClass("controls");
     });
 
-    it("should render with default styling classes", () => {
-      // Test that default CSS classes are applied correctly
-      render(<Controls icon="menu" />);
-
-      const button = screen.getByRole("button");
-      expect(button).toHaveClass("controls");
-      expect(button).not.toHaveClass("controls--inverse");
-    });
-
     it("should render with custom className", () => {
       // Test that custom CSS classes can be added
       render(<Controls icon="search" className="custom-class" />);
@@ -43,29 +34,6 @@ describe("Controls Component", () => {
     });
   });
 
-  // Test colorScheme prop
-  describe("ColorScheme Prop", () => {
-    it('should apply dark styling when colorScheme is "dark"', () => {
-      render(<Controls icon="close" colorScheme="dark" />);
-      const button = screen.getByRole("button");
-      expect(button).toHaveClass("controls");
-      expect(button).toHaveClass("is-dark");
-    });
-    it('should apply light styling when colorScheme is "light"', () => {
-      render(<Controls icon="menu" colorScheme="light" />);
-      const button = screen.getByRole("button");
-      expect(button).toHaveClass("controls");
-      expect(button).toHaveClass("is-light");
-    });
-    it("should not apply dark or light styling when colorScheme is undefined", () => {
-      render(<Controls icon="search" />);
-      const button = screen.getByRole("button");
-      expect(button).toHaveClass("controls");
-      expect(button).not.toHaveClass("is-dark");
-      expect(button).not.toHaveClass("is-light");
-    });
-  });
-
   // Test different icon types
   describe("Icon Types", () => {
     it("should render with close icon", () => {

package/src/components/Cover/Cover.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import cx from 'classnames';
+import React from "react";
+import cx from "classnames";
 
-import { Image } from '../Image';
+import { Image } from "../Image";
 
 interface CoverProps {
   /** Background image source. URL string or an object of breakpoint: url pairs
@@ -19,22 +19,24 @@ interface CoverProps {
 }
   * ```
   */
-  bgSrc: string | {
-    default: string;
-    xs?: string;
-    sm?: string;
-    md?: string;
-    lg?: string;
-    xl?: string;
-    xxl?: string;
-    xxxl?: string;
-  };
+  bgSrc:
+    | string
+    | {
+        default: string;
+        xs?: string;
+        sm?: string;
+        md?: string;
+        lg?: string;
+        xl?: string;
+        xxl?: string;
+        xxxl?: string;
+      };
   /** Set vertical position of image */
-  bgPosition?: 'top' | 'center' | 'bottom';
+  bgPosition?: "top" | "center" | "bottom";
   /** Applies custom classNames to overlay content */
   contentClass?: string;
   /** Cover size */
-  size?: 'small' | 'medium' | 'large';
+  size?: "small" | "medium" | "large" | "xlarge";
   /** Additional className for the cover container */
   className?: string;
   /** Children content */
@@ -43,13 +45,13 @@ interface CoverProps {
   [key: string]: any;
 }
 
-const CLASS_ROOT = 'cover';
+const CLASS_ROOT = "cover";
 
 const Cover: React.FC<CoverProps> = ({
   className,
   children,
   contentClass,
-  bgPosition = 'center',
+  bgPosition = "center",
   bgSrc,
   size,
   ...other
@@ -59,13 +61,13 @@ const Cover: React.FC<CoverProps> = ({
     {
       [`${CLASS_ROOT}--${size}`]: size,
     },
-    className
+    className,
   );
 
   const contentClasses = cx(`${CLASS_ROOT}__content`, contentClass);
 
   const bgImgClassName = cx(`${CLASS_ROOT}__image`, {
-    [`${CLASS_ROOT}__image--${bgPosition}`]: bgPosition !== 'center',
+    [`${CLASS_ROOT}__image--${bgPosition}`]: bgPosition !== "center",
   });
 
   return (
@@ -76,6 +78,6 @@ const Cover: React.FC<CoverProps> = ({
   );
 };
 
-Cover.displayName = 'Cover';
+Cover.displayName = "Cover";
 
 export { Cover };

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

@@ -1,5 +1,5 @@
-@use '../../../styles/tokens/space';
-@use '../../../styles/tools/convert';
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/convert";
 
 $sizes: (
   small: (
@@ -8,7 +8,7 @@ $sizes: (
     ),
     md: (
       min-height: convert.to-rem(255px),
-    )
+    ),
   ),
   medium: (
     default: (
@@ -19,7 +19,7 @@ $sizes: (
     ),
     lg: (
       min-height: convert.to-rem(295px),
-    )
+    ),
   ),
   large: (
     default: (
@@ -30,13 +30,24 @@ $sizes: (
     ),
     lg: (
       min-height: convert.to-rem(460px),
-    )
+    ),
+  ),
+  xlarge: (
+    default: (
+      min-height: convert.to-rem(600px),
+    ),
+    md: (
+      min-height: convert.to-rem(760px),
+    ),
+    lg: (
+      min-height: convert.to-rem(760px),
+    ),
   ),
 );
 
 $spacing: (
   default: (
-    padding-top: space.get('small'),
+    padding-top: space.get("small"),
     padding-bottom: 0.1px,
   ),
   md: (
@@ -44,12 +55,12 @@ $spacing: (
     padding-bottom: space.get(),
   ),
   lg: (
-    padding-top: space.get('large'),
-    padding-bottom: space.get('large'),
-  )
+    padding-top: space.get("large"),
+    padding-bottom: space.get("large"),
+  ),
 );
 
 $positions: (
-  'top': 50% 0,
-  'bottom': 50% 100%,
-);
+  "top": 50% 0,
+  "bottom": 50% 100%,
+);

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

@@ -1,7 +1,7 @@
 @use "sass:map";
-@use '../../../styles/tokens/color';
-@use '../../../styles/tools/generate';
-@use './config';
+@use "../../../styles/tokens/color";
+@use "../../../styles/tools/generate";
+@use "./config";
 
 @mixin base {
   position: relative;
@@ -12,6 +12,7 @@
   position: relative;
   transform: translate3d(0, 0, 0);
   z-index: 1;
+  width: 100%;
 }
 
 @mixin content-size($size, $config: config.$sizes) {
@@ -34,10 +35,10 @@
   img {
     width: 100%;
     height: 100%;
-    object-fit: cover;  
+    object-fit: cover;
   }
 }
 
 @mixin image-position($position, $config: config.$positions) {
   object-position: map.get($config, $position);
-}
+}