@orangesk/orange-design-system 2.0.0-beta.19 → 2.0.0-beta.20

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

@@ -69,16 +69,6 @@ describe("rendering", () => {
       expect(getByText("Button")).toHaveClass("is-active");
     });
 
-    it("has is-dark class when colorScheme is dark", () => {
-      const { getByText } = render(<Button colorScheme="dark">Button</Button>);
-      expect(getByText("Button")).toHaveClass("is-dark");
-    });
-
-    it("has is-light class when colorScheme is light", () => {
-      const { getByText } = render(<Button colorScheme="light">Button</Button>);
-      expect(getByText("Button")).toHaveClass("is-light");
-    });
-
     it("has btn--square class when squared", () => {
       const { getByText } = render(<Button isSquare>Button</Button>);
       expect(getByText("Button")).toHaveClass("btn--square");

package/src/components/Card/index.ts

@@ -1,3 +1,4 @@
 export { Card } from "./Card";
+export type { CardColor } from "./Card";
 export { CardSection } from "./CardSection";
 export { CardProductHeader } from "./CardProductHeader";

package/src/components/Carousel/Carousel.static.ts

@@ -309,6 +309,11 @@ export default class Carousel {
     viewportWrapper: HTMLElement,
     bleedAmount: number,
   ): void {
+    // Safety check: ensure instance and params are initialized
+    if (!this.instance || !this.instance.params) {
+      return;
+    }
+
     const visibleWidth = viewportWrapper.clientWidth;
     const totalWidth = this.track.scrollWidth;
     const contentFitsWithoutScroll = totalWidth <= visibleWidth + 5;

package/src/components/Carousel/Carousel.tsx

@@ -23,8 +23,6 @@ import { useStatic } from "@/utils/hooks";
 interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
   /** Swiper.js (https://swiperjs.com/) options object */
   swiperOptions?: Record<string, any>;
-  /** Inverse colors */
-  colorScheme?: "light" | "dark";
   /** Carousel items */
   items: ReactNode[];
   /** Always show scrollbar and hide dots */
@@ -38,7 +36,6 @@ const Carousel: React.FC<CarouselProps> = ({
   className,
   swiperOptions,
   items,
-  colorScheme,
   showScrollbar = false,
   bleedRight = false,
   ...other
@@ -50,8 +47,6 @@ const Carousel: React.FC<CarouselProps> = ({
   ));
 
   const classes = cx(CLASS_ROOT, className, {
-    "is-dark": colorScheme === "dark",
-    "is-light": colorScheme === "light",
     [`${CLASS_ROOT}--scrollbar`]: showScrollbar,
     [`${CLASS_ROOT}--bleed-right`]: bleedRight,
   });

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

@@ -183,27 +183,6 @@ describe("rendering Carousel", () => {
       ).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");
-    });
-  });
 
   describe("external controls integration", () => {
     const items = [

package/src/components/CarouselHero/CarouselHero.tsx

@@ -30,7 +30,6 @@ interface TabItem {
 interface CarouselHeroProps {
   className?: string;
   swiperOptions?: Record<string, any>;
-  colorScheme?: "light" | "dark";
   children?: ReactNode;
   tabs?: TabItem[];
   interval?: number;
@@ -40,7 +39,6 @@ interface CarouselHeroProps {
 const CarouselHero: React.FC<CarouselHeroProps> = ({
   className,
   swiperOptions,
-  colorScheme,
   children,
   tabs = [],
   interval,
@@ -48,10 +46,7 @@ const CarouselHero: React.FC<CarouselHeroProps> = ({
 }) => {
   const [carouselRef] = useStatic(CarouselHeroStatic);
 
-  const classes = cx(CLASS_ROOT, className, {
-    "is-light": colorScheme === "light",
-    "is-dark": colorScheme === "dark",
-  });
+  const classes = cx(CLASS_ROOT, className);
 
   const elementClasses = {
     prev: CLASS_PREV,
@@ -115,14 +110,12 @@ const CarouselHero: React.FC<CarouselHeroProps> = ({
           <Controls
             className={elementClasses.prev}
             icon="chevron-left"
-            colorScheme={colorScheme}
             aria-label="Predchádzajúci snímok"
           />
 
           <Controls
             className={elementClasses.next}
             icon="chevron-right"
-            colorScheme={colorScheme}
             aria-label="Nasledujúci snímok"
           />
 
@@ -131,7 +124,6 @@ const CarouselHero: React.FC<CarouselHeroProps> = ({
             <Controls
               className={elementClasses.playPause}
               icon={playPauseIcon}
-              colorScheme={colorScheme}
               aria-label="Pozastaviť/Spustiť automatické prehrávanie"
             />
           )}

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

@@ -57,7 +57,6 @@ const exampleWithAutoplay = (
 
 const exampleWithComplexContent = (
   <CarouselHero
-    colorScheme="light"
     tabs={[{ label: "Product 1" }, { label: "Product 2" }]}
     interval={5000}
     swiperOptions={{ speed: 300 }}

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

@@ -123,20 +123,6 @@ describe("rendering CarouselHero", () => {
       expect(getByTestId("test-id")).toHaveClass("test-class");
     });
 
-    it("has is-light class when colorScheme is light", () => {
-      const { getByTestId } = render(
-        <CarouselHero data-testid="test-id" colorScheme="light" />,
-      );
-      expect(getByTestId("test-id")).toHaveClass("is-light");
-    });
-
-    it("has is-dark class when colorScheme is dark", () => {
-      const { getByTestId } = render(
-        <CarouselHero data-testid="test-id" colorScheme="dark" />,
-      );
-      expect(getByTestId("test-id")).toHaveClass("is-dark");
-    });
-
     it("does not have is-light or is-dark class by default", () => {
       const { getByTestId } = render(<CarouselHero data-testid="test-id" />);
       expect(getByTestId("test-id")).not.toHaveClass("is-light");

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

@@ -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 {
@@ -217,7 +218,9 @@
   }
 
   @include breakpoint.get("md", "down") {
-    @include generate.css-map(typography-config.$body-text, "small");
+    @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/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/tests/Controls.test.js

@@ -34,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/Expander/Expander.tsx

@@ -11,9 +11,6 @@ import ExpanderStatic from "./Expander.static";
 const CLASS_ROOT = "expander";
 
 interface ExpanderProps {
-  /** Inverse buttons for dark backgrounds */
-  /** Dark theme */
-  colorScheme?: "light" | "dark";
   /** Custom summary text renderer. Passes props as function parameter. */
   renderSummary?: (props: ExpanderProps) => React.ReactNode;
   /** Custom summary text renderer when details are opened. Passes props as function parameter. */
@@ -38,7 +35,6 @@ export const Expander: React.FC<ExpanderProps> = (props) => {
     summaryOpened,
     renderSummary,
     renderSummaryOpened,
-    colorScheme,
     isFullWidth,
     ...other
   } = props;
@@ -48,8 +44,6 @@ export const Expander: React.FC<ExpanderProps> = (props) => {
     CLASS_ROOT,
     {
       [`${CLASS_ROOT}--fullwidth`]: isFullWidth,
-      "is-dark": colorScheme === "dark",
-      "is-light": colorScheme === "light",
     },
     className,
   );

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

@@ -1,9 +1,9 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { axe } from 'jest-axe';
+import React from "react";
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
 
-import { Expander } from '../Expander';
-import { Icon } from '../../Icon';
+import { Expander } from "../Expander";
+import { Icon } from "../../Icon";
 
 const example = (
   <>
@@ -13,10 +13,6 @@ const example = (
       Content
     </Expander>
 
-    <Expander summary="Show details" colorScheme="dark">
-      Content
-    </Expander>
-
     <Expander
       summary="Custom summary"
       renderSummary={({ summary }) => (
@@ -44,16 +40,16 @@ const example = (
   </>
 );
 
-it('is valid html', () => {
+it("is valid html", () => {
   const { container } = render(example);
   expect(container).toHTMLValidate({
     rules: {
-      'element-permitted-content': 'off',
+      "element-permitted-content": "off",
     },
   });
 });
 
-it('is accessible', async () => {
+it("is accessible", async () => {
   const { container } = render(example);
   expect(await axe(container)).toHaveNoViolations();
 });

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

@@ -1,42 +1,32 @@
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
 
-import { Expander } from '../Expander';
-import { Icon } from '../../Icon';
+import { Expander } from "../Expander";
+import { Icon } from "../../Icon";
 
-describe('Expander', () => {
-  it('renders basic expander with summary text', () => {
+describe("Expander", () => {
+  it("renders basic expander with summary text", () => {
     render(<Expander summary="Show details">Content</Expander>);
-    expect(screen.getByText('Show details')).toBeInTheDocument();
-    expect(screen.getByText('Content')).toBeInTheDocument();
+    expect(screen.getByText("Show details")).toBeInTheDocument();
+    expect(screen.getByText("Content")).toBeInTheDocument();
   });
 
-  it('changes summary text when opened', () => {
+  it("changes summary text when opened", () => {
     render(
       <Expander summary="Show details" summaryOpened="Hide details">
         Content
-      </Expander>
+      </Expander>,
     );
 
-    expect(screen.getByText('Show details')).toBeInTheDocument();
+    expect(screen.getByText("Show details")).toBeInTheDocument();
 
     // Click to open the expander
-    fireEvent.click(screen.getByText('Show details'));
+    fireEvent.click(screen.getByText("Show details"));
 
-    expect(screen.getByText('Hide details')).toBeInTheDocument();
+    expect(screen.getByText("Hide details")).toBeInTheDocument();
   });
 
-  it('supports inverse mode', () => {
-    const { container } = render(
-      <Expander summary="Show details" colorScheme="dark">
-        Content
-      </Expander>
-    );
-
-    expect(container.querySelector('.expander.is-dark')).toBeInTheDocument();
-  });
-
-  it('renders custom summary with renderSummary prop', () => {
+  it("renders custom summary with renderSummary prop", () => {
     render(
       <Expander
         summary="Custom summary"
@@ -48,15 +38,15 @@ describe('Expander', () => {
         )}
       >
         Content
-      </Expander>
+      </Expander>,
     );
 
-    expect(screen.getByTestId('custom-summary')).toHaveTextContent(
-      'Custom summary'
+    expect(screen.getByTestId("custom-summary")).toHaveTextContent(
+      "Custom summary",
     );
   });
 
-  it('renders custom summary when opened with renderSummaryOpened prop', () => {
+  it("renders custom summary when opened with renderSummaryOpened prop", () => {
     render(
       <Expander
         summary="Show details"
@@ -69,46 +59,46 @@ describe('Expander', () => {
         )}
       >
         Content
-      </Expander>
+      </Expander>,
     );
 
     // Click to open the expander
-    fireEvent.click(screen.getByText('Show details'));
+    fireEvent.click(screen.getByText("Show details"));
 
-    expect(screen.getByTestId('custom-summary-opened')).toHaveTextContent(
-      'Hide details'
+    expect(screen.getByTestId("custom-summary-opened")).toHaveTextContent(
+      "Hide details",
     );
   });
 
-  it('toggles content visibility when clicked', () => {
+  it("toggles content visibility when clicked", () => {
     const { container } = render(
       <Expander summary="Show details">
         <p data-testid="content">Hidden content</p>
-      </Expander>
+      </Expander>,
     );
 
-    const details = container.querySelector('details');
-    expect(details).not.toHaveAttribute('open');
+    const details = container.querySelector("details");
+    expect(details).not.toHaveAttribute("open");
 
     // Click to open
-    fireEvent.click(screen.getByText('Show details'));
-    expect(details).toHaveAttribute('open');
+    fireEvent.click(screen.getByText("Show details"));
+    expect(details).toHaveAttribute("open");
 
     // Click to close
-    fireEvent.click(screen.getByText('Show details'));
-    expect(details).not.toHaveAttribute('open');
+    fireEvent.click(screen.getByText("Show details"));
+    expect(details).not.toHaveAttribute("open");
   });
 
-  it('has default class expander', () => {
+  it("has default class expander", () => {
     const { getByTestId } = render(
       <Expander data-testid="test-id" summary="Show details">
         Content
-      </Expander>
+      </Expander>,
     );
-    expect(getByTestId('test-id')).toHaveClass('expander');
+    expect(getByTestId("test-id")).toHaveClass("expander");
   });
 
-  it('has additional class when className is set', () => {
+  it("has additional class when className is set", () => {
     const { getByTestId } = render(
       <Expander
         data-testid="test-id"
@@ -116,9 +106,9 @@ describe('Expander', () => {
         summary="Show details"
       >
         Content
-      </Expander>
+      </Expander>,
     );
-    expect(getByTestId('test-id')).toHaveClass('expander');
-    expect(getByTestId('test-id')).toHaveClass('test-class');
+    expect(getByTestId("test-id")).toHaveClass("expander");
+    expect(getByTestId("test-id")).toHaveClass("test-class");
   });
 });

package/src/components/FeatureAccordion/FeatureAccordion.tsx

@@ -12,8 +12,6 @@ import FeatureAccordionStatic from "./FeatureAccordion.static";
 const CLASS_ROOT = "feature-accordion";
 
 interface AccordionProps {
-  /** Color scheme for whole FeatureAccordion */
-  colorScheme?: "light" | "dark" | "white";
   /** Additional CSS classes */
   className?: string;
 }
@@ -21,18 +19,10 @@ interface AccordionProps {
 const FeatureAccordion = (
   props: AccordionProps & { children: React.ReactNode },
 ) => {
-  const { className, children, colorScheme, ...other } = props;
+  const { className, children, ...other } = props;
   const [featureAccordionRef] = useStatic(FeatureAccordionStatic);
 
-  const classes = cx(
-    CLASS_ROOT,
-    {
-      "is-dark": colorScheme === "dark",
-      "is-light": colorScheme === "light",
-      "is-white": colorScheme === "white",
-    },
-    className,
-  );
+  const classes = cx(CLASS_ROOT, className);
 
   const childrenArray = useMemo(
     () => React.Children.toArray(children) as React.ReactElement<any>[],

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

@@ -4,18 +4,14 @@
 @use "../../../styles/tokens/space";
 @use "../../../styles/tokens/breakpoint";
 
-@mixin accordion {
-  @include breakpoint.get("md") {
-    color: var(--color-text-default);
-    background-color: var(--color-fill-subtle);
-    border-color: var(--color-fill-disabled);
-  }
+@mixin base {
+  color: var(--color-text-default);
+  background-color: var(--color-fill-subtle);
+  border-color: var(--color-fill-disabled);
+}
 
+@mixin accordion {
   .accordion {
-    color: var(--color-text-default);
-    background-color: var(--color-fill-subtle);
-    border-color: var(--color-fill-disabled);
-
     margin: convert.to-rem(87px) space.get("xlarge");
 
     @include breakpoint.get("md", "down") {
@@ -32,10 +28,6 @@
   display: flex;
   padding: 0px !important;
 
-  color: var(--color-text-default);
-  background-color: var(--color-fill-subtle);
-  border-color: var(--color-fill-disabled);
-
   img {
     width: 100%;
     height: auto;

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

@@ -2,6 +2,8 @@
 
 @layer components {
   .feature-accordion {
+    @include mixins.base();
+
     &__accordion {
       @include mixins.accordion();
     }
@@ -13,9 +15,5 @@
     &__item {
       @include mixins.item();
     }
-
-    &.is-white {
-      --color-fill-subtle: #fff;
-    }
   }
 }

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

@@ -93,9 +93,4 @@ describe("FeatureAccordion", () => {
     const { container } = renderAccordion({ "data-testid": "fa" });
     expect(container.firstChild).toHaveAttribute("data-testid", "fa");
   });
-
-  it("applies is-white class when colorScheme='white'", () => {
-    const { container } = renderAccordion({ colorScheme: "white" });
-    expect(container.firstChild).toHaveClass("is-white");
-  });
 });

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

@@ -127,6 +127,7 @@
   margin-top: 0;
   margin-bottom: convert.to-rem(30px);
   color: var(--color-text-default);
+  font-weight: 700;
 
   @include breakpoint.get("md", "down") {
     margin-bottom: convert.to-rem(25px);

package/src/components/Forms/InputStepper/InputStepper.tsx

@@ -22,7 +22,6 @@ export interface InputStepperProps {
   id: string;
   inputClassName?: string;
   isDisabled?: boolean;
-  colorScheme?: "light" | "dark";
   name?: string;
   nonEditableInput?: boolean;
   className?: string;
@@ -35,7 +34,6 @@ const InputStepper: React.FC<InputStepperProps> = ({
   id,
   config,
   isDisabled,
-  colorScheme,
   nonEditableInput = false,
   ...other
 }) => {
@@ -50,8 +48,6 @@ const InputStepper: React.FC<InputStepperProps> = ({
   return (
     <div
       className={cx(CLASS_ROOT, className, {
-        "is-dark": colorScheme === "dark",
-        "is-light": colorScheme === "light",
         [`${CLASS_ROOT}--disabled`]: isDisabled,
       })}
       ref={elementRef}