@orangesk/orange-design-system 2.0.0-beta.8 → 2.0.0

package/src/components/CarouselPromotions/tests/{CarouselPromotions.unit.test.js → CarouselPromotions.unit.test.jsx}

@@ -1,8 +1,7 @@
 import { render } from "@testing-library/react";
-
+import { Image } from "../../Image";
 import { CarouselPromotions } from "../CarouselPromotions";
 import { CarouselPromotionsItem } from "../CarouselPromotionsItem";
-import { Image } from "../../Image";
 
 describe("rendering CarouselPromotions", () => {
   describe("initial state", () => {
@@ -88,23 +87,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 };
@@ -195,15 +177,14 @@ describe("rendering CarouselPromotions", () => {
       expect(pagination).toHaveAttribute("role", "tablist");
     });
 
-    it("pagination container is empty initially (buttons are rendered by Swiper after initialization)", () => {
+    it("pagination container includes rendered buttons", () => {
       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);
+      expect(pagination.children.length).toBeGreaterThan(0);
     });
   });
 

package/src/components/CartTable/CartTable.tsx

@@ -1,15 +1,14 @@
 "use client";
 
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 import { capitalize } from "../../utils";
 import { Table } from "../Table";
-
-import generateRow from "./generateRow";
+import type { Footer, Labels } from "./generateFooter";
 import generateFooter from "./generateFooter";
+import generateRow from "./generateRow";
 import type { Item } from "./generateTotal";
-import type { Footer, Labels } from "./generateFooter";
 
 const CLASS_ROOT = "cart-table";
 

package/src/components/CartTable/FooterPriceColumn.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 import { formatPrice } from "../../utils/helpers";
 
@@ -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

@@ -1,6 +1,6 @@
 import React from "react";
-import { Bar, BarItem } from "../Bar";
 import { formatPrice } from "../../utils/helpers";
+import { Bar, BarItem } from "../Bar";
 
 export interface PriceProps {
   price?: number;
@@ -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/CartTable/data.ts

@@ -144,4 +144,4 @@ export const generateTotal: Item[] = [
 ];
 
 export default items;
-export { optionalItem, deviceItem, internetItems, router, largeItems };
+export { deviceItem, internetItems, largeItems, optionalItem, router };

package/src/components/CartTable/generateFooter.tsx

@@ -4,8 +4,8 @@ import React from "react";
 
 import NameColumn from "./FooterNameColumn";
 import PriceColumn from "./FooterPriceColumn";
+import type { FormattedPeriod, Item } from "./generateTotal";
 import generateTotal from "./generateTotal";
-import type { Item, FormattedPeriod } from "./generateTotal";
 
 export interface Footer {
   name?: string;

package/src/components/CartTable/generateRow.tsx

@@ -1,16 +1,14 @@
-import React from "react";
 import cx from "classnames";
-
-import { Bar, BarItem } from "../Bar";
-import { Image } from "../Image";
-import { InfoTooltip } from "../Tooltip/InfoTooltip";
+import React from "react";
 import ConditionalWrapper from "../../utils/ConditionalWrapper";
-import { Icon } from "../Icon";
+import { Bar, BarItem } from "../Bar";
 import { IconButton } from "../Button";
+import { Icon } from "../Icon";
+import { Image } from "../Image";
 import { Tag } from "../Tag";
-
-import Price from "./Price";
+import { InfoTooltip } from "../Tooltip/InfoTooltip";
 import type { Item } from "./generateTotal";
+import Price from "./Price";
 
 export interface Labels {
   [key: string]: string;

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

@@ -1,19 +1,18 @@
-@use '../../../styles/tokens/breakpoint';
-@use './config';
+@use "../../../styles/tokens/breakpoint";
+@use "./config";
 
 @mixin base {
-    height: 100%;
+  height: 100%;
 
-    thead tr {
-      border-bottom: config.$table-header-border;
+  thead tr {
+    border-bottom: config.$table-header-border;
 
-      th {
-        border-bottom: 0;
-      }
+    th {
+      border-bottom: 0;
     }
+  }
 
-  @include breakpoint.get('xs', 'down') {
-
+  @include breakpoint.get("xs", "down") {
     tr {
       display: flex;
       flex-wrap: wrap;
@@ -31,7 +30,7 @@
     }
   }
 
-  @include breakpoint.get('md') {
+  @include breakpoint.get("md") {
     td,
     th {
       padding-right: config.$default-spacing !important;
@@ -55,11 +54,11 @@
   td:empty,
   th:empty {
     padding: 0 !important;
-  }  
+  }
 }
 
 @mixin product {
-  @include breakpoint.get('xs', 'down') {
+  @include breakpoint.get("xs", "down") {
     flex-basis: config.$product-size;
     flex-grow: 1;
 
@@ -71,71 +70,69 @@
       flex-basis: auto;
       max-width: none;
     }
-  } 
+  }
 }
 
 @mixin discount-position--top {
-    margin-top: config.$default-spacing;
+  margin-top: config.$default-spacing;
 }
 
 @mixin discount-position--left {
-    padding-left: config.$subitem-discount-spacing;
+  padding-left: config.$subitem-discount-spacing;
 }
 
 @mixin subitem-position {
-    margin-left: config.$mobile-spacing;
-    @include breakpoint.get('md') {
-      margin-left: config.$default-spacing;
-    } 
+  margin-left: config.$mobile-spacing;
+  @include breakpoint.get("md") {
+    margin-left: config.$default-spacing;
+  }
 }
 
 @mixin button {
-    font-size: config.$button-font-size !important;
+  font-size: config.$button-font-size !important;
+
+  svg {
+    margin-right: -#{config.$button-margin};
+    margin-left: -#{config.$button-margin};
+  }
 
+  @include breakpoint.get("md") {
     svg {
-      margin-right: -#{config.$button-margin};
-      margin-left: -#{config.$button-margin};
-    }
-    
-    @include breakpoint.get('md') { 
-      svg {
-        margin-right: config.$button-margin !important;
-      }
+      margin-right: config.$button-margin !important;
     }
+  }
 }
 
 @mixin price {
-    @include breakpoint.get('xs', 'down'){
-      padding-top: 0 !important;
-      order: 1;
-      flex-basis: 100%;
-
-      thead & {
-        display: none;
-        border-bottom: 0;
-      }
-
-      tfoot & {
-        flex-basis: auto;
-        padding-top: config.$default-spacing !important;
-        padding-bottom: config.$default-spacing !important;
-      }
+  @include breakpoint.get("xs", "down") {
+    padding-top: 0 !important;
+    order: 1;
+    flex-basis: 100%;
+
+    thead & {
+      display: none;
+      border-bottom: 0;
     }
+
+    tfoot & {
+      flex-basis: auto;
+      padding-top: config.$default-spacing !important;
+      padding-bottom: config.$default-spacing !important;
+    }
+  }
 }
 
 @mixin large {
   th,
   td {
-    
-    @include breakpoint.get('md') {
+    @include breakpoint.get("md") {
       padding: config.$default-spacing !important;
-
     }
   }
 
   font-size: config.$large-font-size--mobile;
 
-  @include breakpoint.get('md') {
+  @include breakpoint.get("md") {
     font-size: config.$large-font-size--desktop;
   }
-}
+}

package/src/components/CartTable/tests/{CartTable.conformance.test.js → CartTable.conformance.test.jsx}

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from "vitest-axe";
 
 import { CartTable } from "../";
 

package/src/components/Code/Code.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import { Highlight, Language, PrismTheme, themes } from "prism-react-renderer";
+import React from "react";
 
 import "./styles/style.scss";
 

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/Container/Container.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from "react";
 import cx from "classnames";
+import React, { forwardRef } from "react";
 
 const CLASS_ROOT = "container";
 

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

@@ -1,4 +1,4 @@
-@use '../../../styles/tokens/space';
+@use "../../../styles/tokens/space";
 
 $container-widths: (
   // containers on xs and md breakpoints are fluid
@@ -8,4 +8,4 @@ $container-widths: (
   xxl: 1320px
 );
 
-$container-padding: space.get('small');
+$container-padding: space.get("small");

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

@@ -1,6 +1,6 @@
-@use './../../../styles/tools/generate';
-@use './../../../styles/tokens/breakpoint';
-@use './config';
+@use "./../../../styles/tools/generate";
+@use "./../../../styles/tokens/breakpoint";
+@use "./config";
 
 @mixin base {
   width: 100%;
@@ -16,7 +16,7 @@
     }
   }
 
-  > *:last-child{
+  > *:last-child {
     margin-bottom: 0;
   }
 }

package/src/components/Container/tests/{Container.conformance.test.js → Container.conformance.test.jsx}

@@ -24,14 +24,10 @@
  *    - Verifies all standard HTML div props are properly forwarded
  */
 import { render } from "@testing-library/react";
-import { axe, toHaveNoViolations } from "jest-axe";
-import "jest-axe/extend-expect";
+import { axe } from "vitest-axe";
 
 import { Container } from "../";
 
-// Extension of expect for axe
-expect.extend(toHaveNoViolations);
-
 describe("Container Conformance Tests", () => {
   describe("HTML Validity", () => {
     it("should render valid HTML structure", () => {
@@ -203,7 +199,7 @@ describe("Container Conformance Tests", () => {
     });
 
     it("should handle event handlers correctly", () => {
-      const handleClick = jest.fn();
+      const handleClick = vi.fn();
       const { container } = render(<Container onClick={handleClick} />);
       const containerElement = container.firstChild;
 

package/src/components/Container/tests/{Container.unit.test.js → Container.unit.test.jsx}

@@ -24,9 +24,10 @@
  *    - Handles array of children
  *    - Handles React elements as children
  */
-import React from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
+
+import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import React from "react";
 
 import { Container } from "../";
 
@@ -151,8 +152,8 @@ describe("Container Component", () => {
 
     it("should forward event handlers", async () => {
       const user = userEvent.setup();
-      const handleClick = jest.fn();
-      const handleMouseEnter = jest.fn();
+      const handleClick = vi.fn();
+      const handleMouseEnter = vi.fn();
 
       render(
         <Container

package/src/components/Controls/Controls.tsx

@@ -1,12 +1,11 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 import { Icon } from "../Icon";
 
 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 → Controls.test.jsx}

@@ -1,7 +1,7 @@
-import React from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import "@testing-library/jest-dom";
+import React from "react";
+import "@testing-library/jest-dom/vitest";
 import { Controls } from "../Controls";
 
 describe("Controls Component", () => {
@@ -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", () => {
@@ -129,7 +97,7 @@ describe("Controls Component", () => {
   describe("Button Functionality", () => {
     it("should be clickable and trigger onClick handler", () => {
       // Test that the button can be clicked and triggers the onClick handler
-      const handleClick = jest.fn();
+      const handleClick = vi.fn();
       render(<Controls icon="close" onClick={handleClick} />);
 
       const button = screen.getByRole("button");
@@ -151,7 +119,7 @@ describe("Controls Component", () => {
     it("should be keyboard accessible", async () => {
       // Test that the button responds to keyboard events
       const user = userEvent.setup();
-      const handleClick = jest.fn();
+      const handleClick = vi.fn();
       render(<Controls icon="search" onClick={handleClick} />);
 
       const button = screen.getByRole("button");
@@ -163,7 +131,7 @@ describe("Controls Component", () => {
     it("should support Enter key press", async () => {
       // Test that Enter key triggers the onClick handler
       const user = userEvent.setup();
-      const handleClick = jest.fn();
+      const handleClick = vi.fn();
       render(<Controls icon="close" onClick={handleClick} />);
 
       const button = screen.getByRole("button");
@@ -176,7 +144,7 @@ describe("Controls Component", () => {
     it("should support Space key press", async () => {
       // Test that Space key triggers the onClick handler
       const user = userEvent.setup();
-      const handleClick = jest.fn();
+      const handleClick = vi.fn();
       render(<Controls icon="menu" onClick={handleClick} />);
 
       const button = screen.getByRole("button");
@@ -207,7 +175,7 @@ describe("Controls Component", () => {
 
     it("should not trigger onClick when disabled", () => {
       // Test that onClick is not triggered when button is disabled
-      const handleClick = jest.fn();
+      const handleClick = vi.fn();
       render(<Controls icon="search" isDisabled onClick={handleClick} />);
 
       const button = screen.getByRole("button");
@@ -331,7 +299,7 @@ describe("Controls Component", () => {
   describe("Form Integration", () => {
     it("should work within a form context", () => {
       // Test that the button works properly within a form
-      const handleSubmit = jest.fn((e) => e.preventDefault());
+      const handleSubmit = vi.fn((e) => e.preventDefault());
 
       render(
         <form onSubmit={handleSubmit}>
@@ -358,7 +326,7 @@ describe("Controls Component", () => {
   describe("Event Handling", () => {
     it("should handle onFocus event", () => {
       // Test that the button handles onFocus event
-      const handleFocus = jest.fn();
+      const handleFocus = vi.fn();
       render(<Controls icon="close" onFocus={handleFocus} />);
 
       const button = screen.getByRole("button");
@@ -369,7 +337,7 @@ describe("Controls Component", () => {
 
     it("should handle onBlur event", () => {
       // Test that the button handles onBlur event
-      const handleBlur = jest.fn();
+      const handleBlur = vi.fn();
       render(<Controls icon="menu" onBlur={handleBlur} />);
 
       const button = screen.getByRole("button");
@@ -380,7 +348,7 @@ describe("Controls Component", () => {
 
     it("should handle onMouseEnter event", () => {
       // Test that the button handles onMouseEnter event
-      const handleMouseEnter = jest.fn();
+      const handleMouseEnter = vi.fn();
       render(<Controls icon="search" onMouseEnter={handleMouseEnter} />);
 
       const button = screen.getByRole("button");
@@ -391,7 +359,7 @@ describe("Controls Component", () => {
 
     it("should handle onMouseLeave event", () => {
       // Test that the button handles onMouseLeave event
-      const handleMouseLeave = jest.fn();
+      const handleMouseLeave = vi.fn();
       render(<Controls icon="close" onMouseLeave={handleMouseLeave} />);
 
       const button = screen.getByRole("button");
@@ -402,7 +370,7 @@ describe("Controls Component", () => {
 
     it("should handle onKeyDown event", () => {
       // Test that the button handles onKeyDown event
-      const handleKeyDown = jest.fn();
+      const handleKeyDown = vi.fn();
       render(<Controls icon="menu" onKeyDown={handleKeyDown} />);
 
       const button = screen.getByRole("button");