@orangesk/orange-design-system 2.0.0-beta.36 → 2.0.0-beta.37

package/src/components/Progress/tests/Progress.unit.test.jsx

@@ -1,81 +1,84 @@
-import React from 'react';
-import { render } from '@testing-library/react';
+import { render } from "@testing-library/react";
 
-import { Progress } from '../Progress';
+import { Progress } from "../Progress";
 
 // value and label props is required
-describe('rendering Progress', () => {
-  describe('initial state', () => {
-    it('has default class progress', () => {
+describe("rendering Progress", () => {
+  describe("initial state", () => {
+    it("has default class progress", () => {
       const { getByTestId } = render(
-        <Progress value="test-value" label="test-label" data-testid="test-id" />
+        <Progress
+          value="test-value"
+          label="test-label"
+          data-testid="test-id"
+        />,
       );
-      expect(getByTestId('test-id')).toHaveClass('progress');
+      expect(getByTestId("test-id")).toHaveClass("progress");
     });
-    it('has default class progress__label', () => {
+    it("has default class progress__label", () => {
       const { container } = render(
-        <Progress value="test-value" label="test-label" />
+        <Progress value="test-value" label="test-label" />,
       );
-      expect(container.getElementsByClassName('progress__label').length).toBe(
-        1
+      expect(container.getElementsByClassName("progress__label").length).toBe(
+        1,
       );
     });
-    it('has default class progress__bar', () => {
+    it("has default class progress__bar", () => {
       const { container } = render(
-        <Progress value="test-value" label="test-label" />
+        <Progress value="test-value" label="test-label" />,
       );
-      expect(container.getElementsByClassName('progress__bar').length).toBe(1);
+      expect(container.getElementsByClassName("progress__bar").length).toBe(1);
     });
-    it('has default class progress__indicator', () => {
+    it("has default class progress__indicator", () => {
       const { container } = render(
-        <Progress value="test-value" label="test-label" />
+        <Progress value="test-value" label="test-label" />,
       );
       expect(
-        container.getElementsByClassName('progress__indicator').length
+        container.getElementsByClassName("progress__indicator").length,
       ).toBe(1);
     });
-    it('has default class progress__value', () => {
+    it("has default class progress__value", () => {
       const { container } = render(
-        <Progress value="test-value" label="test-label" />
+        <Progress value="test-value" label="test-label" />,
       );
-      expect(container.getElementsByClassName('progress__value').length).toBe(
-        1
+      expect(container.getElementsByClassName("progress__value").length).toBe(
+        1,
       );
     });
   });
 
-  describe('passed props', () => {
-    it('renders value', () => {
+  describe("passed props", () => {
+    it("renders value", () => {
       const { getByText } = render(
         <Progress value="test-value" label="test-label">
           test-value
-        </Progress>
+        </Progress>,
       );
-      expect(getByText('test-value')).toBeInTheDocument();
+      expect(getByText("test-value")).toBeInTheDocument();
     });
-    it('renders label', () => {
+    it("renders label", () => {
       const { getByText } = render(
         <Progress value="test-value" label="test-label">
           test-label
-        </Progress>
+        </Progress>,
       );
-      expect(getByText('test-label')).toBeInTheDocument();
+      expect(getByText("test-label")).toBeInTheDocument();
     });
 
-    it('has additional class when className is set', () => {
+    it("has additional class when className is set", () => {
       const { getByTestId } = render(
         <Progress
           value="test-value"
           label="test-label"
           data-testid="test-id"
           className="test-class"
-        />
+        />,
       );
-      expect(getByTestId('test-id')).toHaveClass('progress');
-      expect(getByTestId('test-id')).toHaveClass('test-class');
+      expect(getByTestId("test-id")).toHaveClass("progress");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
     });
 
-    ['green', 'yellow', 'red', 'blue'].forEach(color => {
+    ["green", "yellow", "red", "blue"].forEach((color) => {
       it(`has progress__indicator--${color} class when color is ${color}`, () => {
         const { container } = render(
           <Progress
@@ -83,11 +86,11 @@ describe('rendering Progress', () => {
             color={color}
             value="test-value"
             label="test-label"
-          />
+          />,
         );
         expect(
           container.getElementsByClassName(`progress__indicator--${color}`)
-            .length
+            .length,
         ).toBe(1);
       });
     });
@@ -95,13 +98,13 @@ describe('rendering Progress', () => {
       const { container } = render(
         <Progress
           data-testid="test-id"
-          color={'orange'}
+          color={"orange"}
           value="test-value"
           label="test-label"
-        />
+        />,
       );
       expect(
-        container.getElementsByClassName('progress__indicator--orange').length
+        container.getElementsByClassName("progress__indicator--orange").length,
       ).toBe(0);
     });
   });

package/src/components/PromoBanner/PromoBanner.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 import { Grid, GridCol } from "../Grid";
 import { Image } from "../Image";
 

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

@@ -26,7 +26,7 @@
     }
 
     &--vertical {
-      .promo-banner__item.grid__col,
+      .promo-banner__item[class*="grid__col"],
       .promo-banner__image.grid__col:not(.promo-banner__image--bleed-right) {
         padding-left: 0 !important;
         padding-right: 0 !important;
@@ -35,7 +35,7 @@
 
     &--reverse {
       @include breakpoint.get("md") {
-        .promo-banner__item.grid__col {
+        .promo-banner__item[class*="grid__col"] {
           padding-left: space.get("medium") !important;
           padding-right: 0 !important;
         }

package/src/components/PromoBanner/tests/PromoBanner.conformance.test.jsx

@@ -1,7 +1,6 @@
-import React from "react";
 import { render, screen } from "@testing-library/react";
-import { axe } from 'vitest-axe';
 import userEvent from "@testing-library/user-event";
+import { axe } from "vitest-axe";
 
 import { PromoBanner } from "../";
 

package/src/components/PromoBanner/tests/PromoBanner.unit.test.jsx

@@ -2,7 +2,6 @@
  * @vitest-environment jsdom
  */
 
-import React from "react";
 import { render, screen } from "@testing-library/react";
 
 import { PromoBanner } from "../";

package/src/components/PromotionCard/PromotionCard.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 import { Card, CardColor } from "../Card";
 

package/src/components/PromotionCard/PromotionCardContent.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import cx from 'classnames';
+import cx from "classnames";
+import React from "react";
 
-import { CLASS_CONTENT } from './constants';
+import { CLASS_CONTENT } from "./constants";
 
 interface PromotionCardContentProps {
   className?: string;
@@ -9,10 +9,10 @@ interface PromotionCardContentProps {
   [key: string]: any;
 }
 
-export const PromotionCardContent: React.FC<PromotionCardContentProps> = ({ 
-  className, 
-  children, 
-  ...other 
+export const PromotionCardContent: React.FC<PromotionCardContentProps> = ({
+  className,
+  children,
+  ...other
 }) => {
   const classes = cx(CLASS_CONTENT, className);
   return (
@@ -22,4 +22,4 @@ export const PromotionCardContent: React.FC<PromotionCardContentProps> = ({
   );
 };
 
-PromotionCardContent.displayName = 'PromotionCardContent';
+PromotionCardContent.displayName = "PromotionCardContent";

package/src/components/PromotionCard/PromotionCardImageWrapper.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import cx from 'classnames';
+import cx from "classnames";
+import React from "react";
 
-import { CLASS_IMAGE_WRAPPER } from './constants';
+import { CLASS_IMAGE_WRAPPER } from "./constants";
 
 interface PromotionCardImageWrapperProps {
   className?: string;
@@ -9,11 +9,9 @@ interface PromotionCardImageWrapperProps {
   [key: string]: any;
 }
 
-export const PromotionCardImageWrapper: React.FC<PromotionCardImageWrapperProps> = ({ 
-  className, 
-  children, 
-  ...other 
-}) => {
+export const PromotionCardImageWrapper: React.FC<
+  PromotionCardImageWrapperProps
+> = ({ className, children, ...other }) => {
   const classes = cx(CLASS_IMAGE_WRAPPER, className);
   return (
     <div className={classes} {...other}>
@@ -22,4 +20,4 @@ export const PromotionCardImageWrapper: React.FC<PromotionCardImageWrapperProps>
   );
 };
 
-PromotionCardImageWrapper.displayName = 'PromotionCardImageWrapper';
+PromotionCardImageWrapper.displayName = "PromotionCardImageWrapper";

package/src/components/PromotionCard/PromotionCardSection.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 import { CardSection } from "../Card";
 

package/src/components/PromotionCard/PromotionCardTitle.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import cx from 'classnames';
+import cx from "classnames";
+import React from "react";
 
-import { CLASS_TITLE } from './constants';
+import { CLASS_TITLE } from "./constants";
 
 interface PromotionCardTitleProps {
   className?: string;
@@ -9,16 +9,16 @@ interface PromotionCardTitleProps {
   [key: string]: any;
 }
 
-export const PromotionCardTitle: React.FC<PromotionCardTitleProps> = ({ 
-  className, 
-  children, 
-  ...other 
+export const PromotionCardTitle: React.FC<PromotionCardTitleProps> = ({
+  className,
+  children,
+  ...other
 }) => {
   const classes = cx(CLASS_TITLE, className);
-  return React.cloneElement(children, { 
-    className: classes, 
-    ...other 
+  return React.cloneElement(children, {
+    className: classes,
+    ...other,
   } as React.HTMLAttributes<HTMLElement>);
 };
 
-PromotionCardTitle.displayName = 'PromotionCardTitle';
+PromotionCardTitle.displayName = "PromotionCardTitle";

package/src/components/PromotionCard/constants.ts

@@ -1,5 +1,5 @@
-export const CLASS_ROOT = 'promotion-card';
+export const CLASS_ROOT = "promotion-card";
 export const CLASS_SECTION = `${CLASS_ROOT}__section`;
 export const CLASS_CONTENT = `${CLASS_ROOT}__content`;
 export const CLASS_IMAGE_WRAPPER = `${CLASS_ROOT}__image-wrapper`;
-export const CLASS_TITLE = `${CLASS_ROOT}__title`; 
+export const CLASS_TITLE = `${CLASS_ROOT}__title`;

package/src/components/PromotionCard/tests/PromotionCard.conformance.test.jsx

@@ -1,7 +1,6 @@
-import React from "react";
 import { render, screen } from "@testing-library/react";
-import { axe } from 'vitest-axe';
 import userEvent from "@testing-library/user-event";
+import { axe } from "vitest-axe";
 
 import { PromotionCard } from "../";
 

package/src/components/PromotionCard/tests/PromotionCard.unit.test.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { render, screen } from "@testing-library/react";
 
 import { PromotionCard } from "../PromotionCard";

package/src/components/Section/Section.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 import { Container } from "../Container";
 
 export const sectionColors = [

package/src/components/Section/tests/Section.conformance.test.jsx

@@ -1,7 +1,6 @@
-import React from "react";
 import { render, screen } from "@testing-library/react";
-import { axe } from 'vitest-axe';
 import userEvent from "@testing-library/user-event";
+import { axe } from "vitest-axe";
 
 import { Section } from "../";
 

package/src/components/Section/tests/Section.unit.test.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { render, screen } from "@testing-library/react";
 
 import { Section } from "../Section";

package/src/components/Skeleton/Skeleton.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 const CLASS_ROOT = "skeleton";
 

package/src/components/Skeleton/tests/Skeleton.conformance.test.jsx

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

package/src/components/SkipLink/SkipLink.tsx

@@ -1,5 +1,5 @@
-import React, { AnchorHTMLAttributes } from "react";
 import cx from "classnames";
+import React, { AnchorHTMLAttributes } from "react";
 
 interface SkipLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   href?: string;

package/src/components/SkipLink/tests/SkipLink.unit.test.jsx

@@ -1,7 +1,3 @@
-/**
- * @vitest-environment jsdom
- */
-import React from "react";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 

package/src/components/SocialButton/SocialButton.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 import { Icon } from "../Icon";
 
 const CLASS_ROOT = "social-button";

package/src/components/SocialButton/tests/SocialButton.unit.test.jsx

@@ -2,8 +2,8 @@
  * @vitest-environment jsdom
  */
 
-import React from "react";
 import { render } from "@testing-library/react";
+import React from "react";
 
 import { SocialButton } from "../";
 

package/src/components/Stepbar/Stepbar.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 export const showTitlesFromOptions = ["md", "lg", "xl"] as const;
 export const variantOptions = ["default", "inverse"] as const;

package/src/components/Stepbar/tests/Stepbar.conformance.test.jsx

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

package/src/components/Sticker/Sticker.tsx

@@ -1,24 +1,30 @@
-import React from 'react';
-import cx from 'classnames';
+import cx from "classnames";
+import React from "react";
 
 interface StickerProps {
-  color?: 'black' | 'orange';
-  size?: 'small';
+  color?: "black" | "orange";
+  size?: "small";
   children?: React.ReactNode;
   className?: string;
   [key: string]: any;
 }
 
-const CLASS_ROOT = 'sticker';
+const CLASS_ROOT = "sticker";
 
-export const Sticker: React.FC<StickerProps> = ({ color, size, children, className, ...other }) => {
+export const Sticker: React.FC<StickerProps> = ({
+  color,
+  size,
+  children,
+  className,
+  ...other
+}) => {
   const classes = cx(
     CLASS_ROOT,
     {
       [`${CLASS_ROOT}--${color}`]: color,
       [`${CLASS_ROOT}--${size}`]: size,
     },
-    className
+    className,
   );
 
   return (
@@ -28,4 +34,4 @@ export const Sticker: React.FC<StickerProps> = ({ color, size, children, classNa
   );
 };
 
-Sticker.displayName = 'Sticker';
+Sticker.displayName = "Sticker";

package/src/components/Sticker/index.ts

@@ -1,2 +1,3 @@
 import { Sticker } from "./Sticker";
+
 export { Sticker };

package/src/components/Sticker/tests/Sticker.conformance.test.jsx

@@ -1,17 +1,16 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { axe } from 'vitest-axe';
+import { render } from "@testing-library/react";
+import { axe } from "vitest-axe";
 
-import { Sticker } from '../';
+import { Sticker } from "../";
 
 const example = <Sticker color="black">Black sticker</Sticker>;
 
-it('is valid html', () => {
+it("is valid html", () => {
   const { container } = render(example);
   expect(container).toHTMLValidate();
 });
 
-it('is accessible', async () => {
+it("is accessible", async () => {
   const { container } = render(example);
   expect(await axe(container)).toHaveNoViolations();
 });

package/src/components/Sticker/tests/Sticker.unit.test.jsx

@@ -1,42 +1,39 @@
-import React from 'react';
-import { render } from '@testing-library/react';
+import { render } from "@testing-library/react";
 
-import { Sticker } from '../Sticker';
+import { Sticker } from "../Sticker";
 
-describe('rendering Sticker', () => {
-  describe('initial state', () => {
-    it('has default class sticker', () => {
+describe("rendering Sticker", () => {
+  describe("initial state", () => {
+    it("has default class sticker", () => {
       const { getByTestId } = render(<Sticker data-testid="test-id" />);
-      expect(getByTestId('test-id')).toHaveClass('sticker');
+      expect(getByTestId("test-id")).toHaveClass("sticker");
     });
   });
 
-  describe('passed props', () => {
-    it('renders children', () => {
+  describe("passed props", () => {
+    it("renders children", () => {
       const { getByText } = render(<Sticker>test</Sticker>);
-      expect(getByText('test')).toBeInTheDocument();
+      expect(getByText("test")).toBeInTheDocument();
     });
 
-    it('has class test-class when className is set to test-class', () => {
+    it("has class test-class when className is set to test-class", () => {
       const { getByTestId } = render(
-        <Sticker data-testid="test-id" className="test-class" />
+        <Sticker data-testid="test-id" className="test-class" />,
       );
-      expect(getByTestId('test-id')).toHaveClass('test-class');
+      expect(getByTestId("test-id")).toHaveClass("test-class");
     });
-    ['black', 'orange'].map(color => {
+    ["black", "orange"].map((color) => {
       it(`has sticker--${color} class when color is ${color}`, () => {
         const { container } = render(<Sticker color={color} />);
         expect(
-          container.getElementsByClassName(`sticker--${color}`).length
+          container.getElementsByClassName(`sticker--${color}`).length,
         ).toBe(1);
       });
     });
 
-    it('has sticker--small class when size is small', () => {
+    it("has sticker--small class when size is small", () => {
       const { container } = render(<Sticker size="small" />);
-      expect(
-        container.getElementsByClassName('sticker--small').length
-      ).toBe(1);
+      expect(container.getElementsByClassName("sticker--small").length).toBe(1);
     });
   });
 });

package/src/components/Table/Header.tsx

@@ -1,9 +1,8 @@
 "use client";
 
 import React from "react";
-
-import TableContext from "./TableContext";
 import { Cell } from "./Cell";
+import TableContext from "./TableContext";
 import { TableHeader } from "./types";
 
 interface SortOptions {

package/src/components/Table/Row.tsx

@@ -4,9 +4,8 @@ import React from "react";
 
 import { Button } from "../Button/";
 import { Icon } from "../Icon/";
-
-import TableContext from "./TableContext";
 import { Cell } from "./Cell";
+import TableContext from "./TableContext";
 import { TableRow } from "./types";
 
 interface RowProps {

package/src/components/Table/Rows.tsx

@@ -1,9 +1,8 @@
 "use client";
 
 import React from "react";
-
-import TableContext from "./TableContext";
 import { Row } from "./Row";
+import TableContext from "./TableContext";
 import { TableRow } from "./types";
 
 const Rows: React.FC = () => {

package/src/components/Table/Table.tsx

@@ -1,17 +1,16 @@
 "use client";
 
-import React, { useId } from "react";
 import cx from "classnames";
+import React, { useId } from "react";
 
 import ConditionalWrapper from "../../utils/ConditionalWrapper";
 import { useStatic } from "../../utils/hooks";
-
+import { Footer } from "./Footer";
 import { Header } from "./Header";
-import TableContext from "./TableContext";
 import { Rows } from "./Rows";
-import { Footer } from "./Footer";
 import TableStatic from "./Table.static";
-import { TableHeader, TableRow, ExpandableRowsCaptions } from "./types";
+import TableContext from "./TableContext";
+import { ExpandableRowsCaptions, TableHeader, TableRow } from "./types";
 
 interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
   /** Caption helps users with screen readers to find a table and understand what it's about and decide if they want to read it. */

package/src/components/Table/index.ts

@@ -1,2 +1,2 @@
-export { Table } from "./Table";
 export { Footer } from "./Footer";
+export { Table } from "./Table";

package/src/components/Table/tests/Footer.unit.test.jsx

@@ -1,7 +1,6 @@
 import { render } from "@testing-library/react";
-
-import TableContext from "../TableContext";
 import { Footer } from "../Footer";
+import TableContext from "../TableContext";
 
 describe("rendering Footer", () => {
   const footers = [