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

package/src/components/Pagination/tests/Item.unit.test.jsx

@@ -2,94 +2,93 @@
  * @vitest-environment jsdom
  */
 
-import React from 'react';
-import { render } from '@testing-library/react';
+import { render } from "@testing-library/react";
 
-import { PaginationItem as Item } from '../PaginationItem.tsx';
+import { PaginationItem as Item } from "../PaginationItem.tsx";
 
-describe('rendering Item', () => {
-  describe('initial state', () => {
-    it('has default class pagination__item', () => {
+describe("rendering Item", () => {
+  describe("initial state", () => {
+    it("has default class pagination__item", () => {
       const { container } = render(<Item />);
-      expect(container.querySelector('li')).toHaveClass('pagination__item');
+      expect(container.querySelector("li")).toHaveClass("pagination__item");
     });
 
-    it('has default class pagination__link', () => {
+    it("has default class pagination__link", () => {
       const { container } = render(<Item />);
-      expect(container.querySelector('a')).toHaveClass('pagination__link');
+      expect(container.querySelector("a")).toHaveClass("pagination__link");
     });
 
-    it('has default class btn', () => {
+    it("has default class btn", () => {
       const { container } = render(<Item />);
-      expect(container.querySelector('a')).toHaveClass('btn');
+      expect(container.querySelector("a")).toHaveClass("btn");
     });
 
-    it('has default class btn--square', () => {
+    it("has default class btn--square", () => {
       const { container } = render(<Item />);
-      expect(container.querySelector('a')).toHaveClass('btn--square');
+      expect(container.querySelector("a")).toHaveClass("btn--square");
     });
   });
 
-  describe('passed props', () => {
-    it('passes other props', () => {
+  describe("passed props", () => {
+    it("passes other props", () => {
       const { getByTestId } = render(<Item data-testid="test" />);
-      expect(getByTestId('test')).toBeInTheDocument();
+      expect(getByTestId("test")).toBeInTheDocument();
     });
 
-    it('has link role when href is set', () => {
+    it("has link role when href is set", () => {
       const { getByRole } = render(<Item href="/" />);
-      expect(getByRole('link')).toBeInTheDocument();
+      expect(getByRole("link")).toBeInTheDocument();
     });
 
-    it('list item has additional class when className is set', () => {
+    it("list item has additional class when className is set", () => {
       const { container } = render(<Item className="test-class" />);
-      expect(container.querySelector('li')).toHaveClass('test-class');
+      expect(container.querySelector("li")).toHaveClass("test-class");
     });
 
-    it('anchor has pagination__link--active class when isActive is set to true', () => {
+    it("anchor has pagination__link--active class when isActive is set to true", () => {
       const { container } = render(<Item isActive={true} />);
-      expect(container.querySelector('a')).toHaveClass(
-        'pagination__link--active'
+      expect(container.querySelector("a")).toHaveClass(
+        "pagination__link--active",
       );
     });
 
-    it('anchor attribute has pagination__link--active class when isActive is set to true', () => {
+    it("anchor attribute has pagination__link--active class when isActive is set to true", () => {
       const { container } = render(<Item isActive={true} />);
-      expect(container.querySelector('a')).toHaveClass(
-        'pagination__link--active'
+      expect(container.querySelector("a")).toHaveClass(
+        "pagination__link--active",
       );
     });
 
-    it('anchor shows label when hasIcon is falsy and label is truthy string', () => {
+    it("anchor shows label when hasIcon is falsy and label is truthy string", () => {
       const { getByText } = render(<Item label="test-label" />);
-      expect(getByText('test-label')).toBeInTheDocument();
+      expect(getByText("test-label")).toBeInTheDocument();
     });
 
     it('anchors aria-current attribute is set to "page" when isActive is true', () => {
       const { container } = render(<Item isActive={true} />);
-      expect(container.querySelector('a').getAttribute('aria-current')).toBe(
-        'page'
+      expect(container.querySelector("a").getAttribute("aria-current")).toBe(
+        "page",
       );
     });
 
-    it('anchors aria-label attribute is set to ariaLabel value', () => {
+    it("anchors aria-label attribute is set to ariaLabel value", () => {
       const { container } = render(<Item ariaLabel="test-label" />);
-      expect(container.querySelector('a').getAttribute('aria-label')).toBe(
-        'test-label'
+      expect(container.querySelector("a").getAttribute("aria-label")).toBe(
+        "test-label",
       );
     });
 
-    it('first item with icon has a chevron-start icon', () => {
+    it("first item with icon has a chevron-start icon", () => {
       const { container } = render(<Item hasIcon={true} isFirst={true} />);
-      expect(container.querySelector('use').getAttribute('xlink:href')).toBe(
-        '/sprite.svg#chevron-start'
+      expect(container.querySelector("use").getAttribute("xlink:href")).toBe(
+        "/sprite.svg#chevron-start",
       );
     });
 
-    it('last item with icon has a chevron-end icon', () => {
+    it("last item with icon has a chevron-end icon", () => {
       const { container } = render(<Item hasIcon={true} isLast={true} />);
-      expect(container.querySelector('use').getAttribute('xlink:href')).toBe(
-        '/sprite.svg#chevron-end'
+      expect(container.querySelector("use").getAttribute("xlink:href")).toBe(
+        "/sprite.svg#chevron-end",
       );
     });
   });

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

@@ -1,15 +1,14 @@
-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 { Pagination } from '../Pagination.tsx';
+import { Pagination } from "../Pagination.tsx";
 
 const getItems = (count = 10, current = Math.ceil(count / 2)) =>
   [
     ...Array(count)
-      .fill('')
+      .fill("")
       .map((_, i) => i + 1),
-  ].map(n => ({
+  ].map((n) => ({
     label: `${n}`,
     ariaLabel: `Strana ${n}`,
     href: `/?page=${n}`,
@@ -30,12 +29,12 @@ const example = (
   </>
 );
 
-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/Pagination/tests/Pagination.unit.test.jsx

@@ -1,20 +1,19 @@
-import React from 'react';
-import { render } from '@testing-library/react';
+import { render } from "@testing-library/react";
 
-import { Pagination } from '../Pagination.tsx';
+import { Pagination } from "../Pagination.tsx";
 
 //items array is required
-describe('rendering Pagination', () => {
-  describe('initial state', () => {
-    it('has default class pagination', () => {
+describe("rendering Pagination", () => {
+  describe("initial state", () => {
+    it("has default class pagination", () => {
       const { getByTestId } = render(
-        <Pagination items={[]} data-testid="test-id" />
+        <Pagination items={[]} data-testid="test-id" />,
       );
-      expect(getByTestId('test-id')).toHaveClass('pagination');
+      expect(getByTestId("test-id")).toHaveClass("pagination");
     });
   });
 
-  describe('passed props', () => {
+  describe("passed props", () => {
     const createArray = (length, activeItemNum = 1) => {
       return Array(length)
         .fill()
@@ -25,83 +24,83 @@ describe('rendering Pagination', () => {
         }));
     };
 
-    it('has label when set', () => {
+    it("has label when set", () => {
       const { getByLabelText } = render(
-        <Pagination items={[]} label="test-label" />
+        <Pagination items={[]} label="test-label" />,
       );
-      expect(getByLabelText('test-label')).toBeInTheDocument();
+      expect(getByLabelText("test-label")).toBeInTheDocument();
     });
-    it('has additional class when className is set', () => {
+    it("has additional class when className is set", () => {
       const { getByTestId } = render(
-        <Pagination items={[]} data-testid="test-id" className="test-class" />
+        <Pagination items={[]} data-testid="test-id" className="test-class" />,
       );
-      expect(getByTestId('test-id')).toHaveClass('pagination');
-      expect(getByTestId('test-id')).toHaveClass('test-class');
+      expect(getByTestId("test-id")).toHaveClass("pagination");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
     });
-    it('renders items when items array is set', () => {
+    it("renders items when items array is set", () => {
       const itemsArr = createArray(3);
       const { container } = render(<Pagination items={itemsArr} />);
-      expect(container.querySelectorAll('li').length).toBe(3);
+      expect(container.querySelectorAll("li").length).toBe(3);
     });
-    it('pagination items have correct href attribute', () => {
+    it("pagination items have correct href attribute", () => {
       const itemsArr = createArray(3);
       const { container } = render(<Pagination items={itemsArr} />);
-      const items = container.querySelectorAll('li');
+      const items = container.querySelectorAll("li");
       for (let i in itemsArr) {
-        expect(items[i].querySelector('a').getAttribute('href')).toBe(
-          `/test${parseInt(i) + 1}`
+        expect(items[i].querySelector("a").getAttribute("href")).toBe(
+          `/test${parseInt(i) + 1}`,
         );
       }
     });
-    it('pagination items have correct label', () => {
+    it("pagination items have correct label", () => {
       const itemsArr = createArray(3);
       const { container } = render(<Pagination items={itemsArr} />);
-      const items = container.querySelectorAll('li');
+      const items = container.querySelectorAll("li");
       for (let i in itemsArr) {
         expect(items[i]).toHaveTextContent(`item${parseInt(i) + 1}`);
       }
     });
 
     for (let i = 1; i <= 10; i++) {
-      it('first and last item has icon/label based on current position when isCompact is set', () => {
+      it("first and last item has icon/label based on current position when isCompact is set", () => {
         const itemsArr = createArray(10, i);
         const { container } = render(<Pagination items={itemsArr} isCompact />);
-        const queryItems = container.querySelectorAll('li');
+        const queryItems = container.querySelectorAll("li");
         if (i < 3) {
-          expect(queryItems[0]).toHaveTextContent('item1');
+          expect(queryItems[0]).toHaveTextContent("item1");
           expect(
-            queryItems[9].querySelector('use').getAttribute('xlink:href')
-          ).toBe('/sprite.svg#chevron-end');
+            queryItems[9].querySelector("use").getAttribute("xlink:href"),
+          ).toBe("/sprite.svg#chevron-end");
         } else if (i <= 8) {
           expect(
-            queryItems[0].querySelector('use').getAttribute('xlink:href')
-          ).toBe('/sprite.svg#chevron-start');
+            queryItems[0].querySelector("use").getAttribute("xlink:href"),
+          ).toBe("/sprite.svg#chevron-start");
           expect(
-            queryItems[9].querySelector('use').getAttribute('xlink:href')
-          ).toBe('/sprite.svg#chevron-end');
+            queryItems[9].querySelector("use").getAttribute("xlink:href"),
+          ).toBe("/sprite.svg#chevron-end");
         } else {
-          expect(queryItems[9]).toHaveTextContent('item10');
+          expect(queryItems[9]).toHaveTextContent("item10");
           expect(
-            queryItems[0].querySelector('use').getAttribute('xlink:href')
-          ).toBe('/sprite.svg#chevron-start');
+            queryItems[0].querySelector("use").getAttribute("xlink:href"),
+          ).toBe("/sprite.svg#chevron-start");
         }
       });
     }
     for (let i = 1; i <= 8; i++) {
-      it('renders separator/separators when isCompact is not set', () => {
+      it("renders separator/separators when isCompact is not set", () => {
         const itemsArr = createArray(10, i);
         const { container } = render(<Pagination items={itemsArr} />);
         const sepNum = i <= 3 || i >= 8 ? 1 : 2;
         expect(
-          container.getElementsByClassName('pagination__separator').length
+          container.getElementsByClassName("pagination__separator").length,
         ).toBe(sepNum);
       });
     }
-    it('separator in not rendered when isCompact is set', () => {
+    it("separator in not rendered when isCompact is set", () => {
       const itemsArr = createArray(10, 5);
       const { container } = render(<Pagination items={itemsArr} isCompact />);
       expect(
-        container.getElementsByClassName('pagination__separator').length
+        container.getElementsByClassName("pagination__separator").length,
       ).toBe(0);
     });
   });

package/src/components/Pagination/tests/Separator.unit.test.jsx

@@ -2,24 +2,23 @@
  * @vitest-environment jsdom
  */
 
-import React from 'react';
-import { render } from '@testing-library/react';
+import { render } from "@testing-library/react";
 
-import Separator from '../Separator';
+import Separator from "../Separator";
 
-describe('rendering Separator', () => {
-  describe('initial state', () => {
-    it('has default class pagination__separator', () => {
+describe("rendering Separator", () => {
+  describe("initial state", () => {
+    it("has default class pagination__separator", () => {
       const { getByTestId } = render(<Separator data-testid="separator" />);
-      expect(getByTestId('separator')).toHaveClass('pagination__separator');
+      expect(getByTestId("separator")).toHaveClass("pagination__separator");
     });
   });
-  describe('rendering Item', () => {
-    it('has additional class when className is set', () => {
+  describe("rendering Item", () => {
+    it("has additional class when className is set", () => {
       const { getByTestId } = render(
-        <Separator data-testid="separator" className="test-class" />
+        <Separator data-testid="separator" className="test-class" />,
       );
-      expect(getByTestId('separator')).toHaveClass('test-class');
+      expect(getByTestId("separator")).toHaveClass("test-class");
     });
   });
 });

package/src/components/Pill/Pill.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode, HTMLAttributes } from "react";
 import cx from "classnames";
+import React, { HTMLAttributes, ReactNode } from "react";
 
 const CLASS_ROOT = "pill";
 

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

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

package/src/components/Preview/CodeExample.tsx

@@ -1,14 +1,11 @@
-import React, { useState, useRef, ReactNode } from "react";
-
-import unescape from "unescape-html";
-import reactElementToJSXString from "react-element-to-jsx-string";
+import cx from "classnames";
+import React, { ReactNode, useRef, useState } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
-
-import Code from "../Code/";
-import { Button } from "../Button";
+import reactElementToJSXString from "react-element-to-jsx-string";
+import unescape from "unescape-html";
 import { formatHTML } from "../../utils/formatCode";
-
-import cx from "classnames";
+import { Button } from "../Button";
+import Code from "../Code/";
 
 interface CodeExampleProps {
   codeJSXOptions?: Record<string, any>;

package/src/components/Preview/Preview.tsx

@@ -1,7 +1,8 @@
 // Preview component (SERVER component - runs on server)
+
+import type { ReactNode } from "react";
 import React from "react";
 import reactElementToJSXString from "react-element-to-jsx-string";
-import type { ReactNode } from "react";
 import { PreviewGenerator } from "./PreviewGenerator";
 
 type PreviewProps = React.ComponentProps<typeof PreviewGenerator> & {

package/src/components/Preview/PreviewGenerator.tsx

@@ -1,16 +1,14 @@
 "use client";
 
-import React, { useState, useId, ReactNode, FunctionComponent } from "react";
 import cx from "classnames";
+import React, { FunctionComponent, ReactNode, useId, useState } from "react";
 import reactElementToJSXString from "react-element-to-jsx-string";
-
-import PreviewTitleBar from "./PreviewTitleBar";
-import CodeExample from "./CodeExample";
-
-import { Card } from "../Card";
-import { Icon } from "../Icon";
 import { Button } from "../Button";
+import { Card } from "../Card";
 import { Dropdown, DropdownItem } from "../Dropdown";
+import { Icon } from "../Icon";
+import CodeExample from "./CodeExample";
+import PreviewTitleBar from "./PreviewTitleBar";
 
 import "./styles/style.scss";
 
@@ -354,7 +352,9 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
     html;
 
   // Apply the exact same wrapping logic for code display
-  const toCode = codeContent ? wrapComponentWithTheme(codeContent) : codeContent;
+  const toCode = codeContent
+    ? wrapComponentWithTheme(codeContent)
+    : codeContent;
 
   // Generate JSX string for the JSX tab
   // Use pre-generated JSX if provided (from server), otherwise generate client-side

package/src/components/Preview/PreviewTitleBar.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode } from "react";
 import cx from "classnames";
+import React, { ReactNode } from "react";
 
 interface PreviewTitleBarProps {
   title?: string;

package/src/components/Preview/index.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import "./styles/style.scss";
 
-import { Preview } from "./Preview";
 import SpacePreview from "@/docs/utils/SpacePreview";
+import { Preview } from "./Preview";
 
 interface ThemedPreviewProps {
   children: React.ReactNode;

package/src/components/Progress/Progress.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 export interface ProgressProps {
   /** Color of the indicator */

package/src/components/Progress/index.ts

@@ -1 +1 @@
-export { Progress } from "./Progress";
+export { Progress } from "./Progress";

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

@@ -1,8 +1,7 @@
-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 { Progress } from '../';
+import { Progress } from "../";
 
 const example = (
   <>
@@ -14,14 +13,14 @@ const example = (
   </>
 );
 
-it('is valid html', () => {
+it("is valid html", () => {
   const { container } = render(example);
   expect(container).toHTMLValidate({
-    rules: { 'no-inline-style': 'off' },
+    rules: { "no-inline-style": "off" },
   });
 });
 
-it('is accessible', async () => {
+it("is accessible", async () => {
   const { container } = render(example);
   expect(await axe(container)).toHaveNoViolations();
 });