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

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/docsData.ts

@@ -142,7 +142,6 @@ export const scrollableHeaders: TableHeader[] = [
     key: "col5",
     label:
       "Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.",
-    cellProps: { className: "text-nowrap" },
   },
 ];
 

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/styles/mixins.scss

@@ -58,6 +58,11 @@
   width: 100%;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
+
+  td,
+  th {
+    white-space: nowrap;
+  }
 }
 
 @mixin sort-button {

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 = [

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

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

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

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

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

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

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

@@ -1,21 +1,21 @@
 import { render } from "@testing-library/react";
-import { axe } from 'vitest-axe';
+import { axe } from "vitest-axe";
 
 import "../../../../__mocks__/resizeObserverMock";
 import { Table } from "../";
 import {
-  headers,
-  rows,
-  unsortedHeaders,
   ascendingHeaders,
-  descendingHeaders,
-  sortableRows,
   ascendingRowsByDate,
+  descendingHeaders,
   descendingRowsByDate,
   expandableTableRows,
   footer,
+  headers,
+  rows,
   scrollableHeaders,
   scrollableRows,
+  sortableRows,
+  unsortedHeaders,
 } from "../docsData";
 
 const defaultProps = {

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

@@ -1,4 +1,4 @@
-import { render, fireEvent } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
 
 import "../../../../__mocks__/resizeObserverMock";
 import { Table } from "../Table";

package/src/components/Tabs/Tabs.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 import { useStatic } from "../../utils/hooks";
 import { Tab } from "./Tab";
-import TabsStatic from "./Tabs.static";
 import type { TabPanelProps } from "./TabPanel";
+import TabsStatic from "./Tabs.static";
 
 export const variants = ["standard", "light"] as const;
 

package/src/components/Tabs/index.ts

@@ -1,3 +1,3 @@
-export { Tabs } from "./Tabs";
-export { TabPanel } from "./TabPanel";
 export { Tab } from "./Tab";
+export { TabPanel } from "./TabPanel";
+export { Tabs } from "./Tabs";

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

@@ -1,8 +1,7 @@
-import { render, fireEvent, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-
-import { Tabs } from "../Tabs";
 import { TabPanel } from "../TabPanel";
+import { Tabs } from "../Tabs";
 
 const arr = [1, 2, 3, 4];
 

package/src/components/Tag/Tag.tsx

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

package/src/components/Tag/TagButton.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 import { Icon } from "@/components/Icon";
 import { CLASS_ROOT } from "./Tag";

package/src/components/Tag/index.ts

@@ -1,3 +1,3 @@
+export type { TagColor, TagSize } from "./Tag";
 export { Tag } from "./Tag";
 export { TagButton } from "./TagButton";
-export type { TagColor, TagSize } from "./Tag";

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

@@ -87,4 +87,4 @@
     @include generate.css-map(config.$states-transparent-color, "disabled");
     cursor: not-allowed;
   }
-}
+}

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

@@ -1,8 +1,7 @@
 import { render } from "@testing-library/react";
-import { axe } from 'vitest-axe';
-
-import { colors } from "../Tag";
+import { axe } from "vitest-axe";
 import { Tag, TagButton } from "..";
+import { colors } from "../Tag";
 
 const sizes = ["small", "large"];
 

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

@@ -1,8 +1,6 @@
 import { render } from "@testing-library/react";
-
-import { Tag } from "../Tag";
+import { colors, Tag } from "../Tag";
 import { TagButton } from "../TagButton";
-import { colors } from "../Tag";
 
 describe("rendering", () => {
   describe("initial state", () => {

package/src/components/Tag/tests/TagButton.conformance.test.jsx

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

package/src/components/Tag/tests/TagButton.unit.test.jsx

@@ -1,5 +1,5 @@
+import { fireEvent, render } from "@testing-library/react";
 import React from "react";
-import { render, fireEvent } from "@testing-library/react";
 
 import { TagButton } from "../TagButton";
 

package/src/components/Testimonial/Testimonial.tsx

@@ -1,33 +1,33 @@
-import React from 'react';
-import cx from 'classnames';
+import cx from "classnames";
+import React from "react";
 
 interface TestimonialProps {
   className?: string;
   children?: React.ReactNode;
-  color?: 'default' | 'orange';
+  color?: "default" | "orange";
   isDiv?: boolean;
   [key: string]: any;
 }
 
-const CLASS_ROOT = 'testimonial';
+const CLASS_ROOT = "testimonial";
 
-export const Testimonial: React.FC<TestimonialProps> = ({ 
-  className, 
-  children, 
-  color = 'default', 
-  isDiv = false, 
-  ...other 
+export const Testimonial: React.FC<TestimonialProps> = ({
+  className,
+  children,
+  color = "default",
+  isDiv = false,
+  ...other
 }) => {
-  const Tag = isDiv ? 'div' : 'p';
+  const Tag = isDiv ? "div" : "p";
 
   const classes = cx(
     CLASS_ROOT,
     {
-      [`testimonial--${color}`]: color === 'orange',
+      [`testimonial--${color}`]: color === "orange",
     },
-    className
+    className,
   );
-  
+
   return (
     <Tag className={classes} {...other}>
       {children}
@@ -35,4 +35,4 @@ export const Testimonial: React.FC<TestimonialProps> = ({
   );
 };
 
-Testimonial.displayName = 'Testimonial';
+Testimonial.displayName = "Testimonial";

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

@@ -6,34 +6,37 @@ $black: var(--color-background-contrast);
 $orange: var(--color-surface-secondary);
 
 $quotation-mark-bottom: (
-    -webkit-mask-image: url('data:image/svg+xml,<svg width="20" height="18" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H7.55102V7.55102C7.55102 8.91157 7.39229 10.2041 7.07483 11.4286C6.80272 12.6077 6.34921 13.6508 5.71429 14.5578C5.12472 15.4649 4.35374 16.1905 3.40136 16.7347C2.49433 17.2789 1.38322 17.551 0.0680272 17.551V14.1497C0.839002 14.1497 1.47392 13.9683 1.97279 13.6054C2.47166 13.1973 2.87982 12.6757 3.19728 12.0408C3.51474 11.4059 3.71882 10.703 3.80952 9.93198C3.94558 9.11565 4.01361 8.322 4.01361 7.55102H0V0ZM12.449 0H20V7.55102C20 8.91157 19.8413 10.2041 19.5238 11.4286C19.2517 12.6077 18.7982 13.6508 18.1633 14.5578C17.5737 15.4649 16.8027 16.1905 15.8503 16.7347C14.9433 17.2789 13.8322 17.551 12.517 17.551V14.1497C13.288 14.1497 13.9229 13.9683 14.4218 13.6054C14.9206 13.1973 15.3288 12.6757 15.6463 12.0408C15.9637 11.4059 16.1678 10.703 16.2585 9.93198C16.3946 9.11565 16.4626 8.322 16.4626 7.55102H12.449V0Z" /></svg>'),
-    mask-image: url('data:image/svg+xml,<svg width="20" height="18" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H7.55102V7.55102C7.55102 8.91157 7.39229 10.2041 7.07483 11.4286C6.80272 12.6077 6.34921 13.6508 5.71429 14.5578C5.12472 15.4649 4.35374 16.1905 3.40136 16.7347C2.49433 17.2789 1.38322 17.551 0.0680272 17.551V14.1497C0.839002 14.1497 1.47392 13.9683 1.97279 13.6054C2.47166 13.1973 2.87982 12.6757 3.19728 12.0408C3.51474 11.4059 3.71882 10.703 3.80952 9.93198C3.94558 9.11565 4.01361 8.322 4.01361 7.55102H0V0ZM12.449 0H20V7.55102C20 8.91157 19.8413 10.2041 19.5238 11.4286C19.2517 12.6077 18.7982 13.6508 18.1633 14.5578C17.5737 15.4649 16.8027 16.1905 15.8503 16.7347C14.9433 17.2789 13.8322 17.551 12.517 17.551V14.1497C13.288 14.1497 13.9229 13.9683 14.4218 13.6054C14.9206 13.1973 15.3288 12.6757 15.6463 12.0408C15.9637 11.4059 16.1678 10.703 16.2585 9.93198C16.3946 9.11565 16.4626 8.322 16.4626 7.55102H12.449V0Z" /></svg>')
+  -webkit-mask-image:
+    url('data:image/svg+xml,<svg width="20" height="18" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H7.55102V7.55102C7.55102 8.91157 7.39229 10.2041 7.07483 11.4286C6.80272 12.6077 6.34921 13.6508 5.71429 14.5578C5.12472 15.4649 4.35374 16.1905 3.40136 16.7347C2.49433 17.2789 1.38322 17.551 0.0680272 17.551V14.1497C0.839002 14.1497 1.47392 13.9683 1.97279 13.6054C2.47166 13.1973 2.87982 12.6757 3.19728 12.0408C3.51474 11.4059 3.71882 10.703 3.80952 9.93198C3.94558 9.11565 4.01361 8.322 4.01361 7.55102H0V0ZM12.449 0H20V7.55102C20 8.91157 19.8413 10.2041 19.5238 11.4286C19.2517 12.6077 18.7982 13.6508 18.1633 14.5578C17.5737 15.4649 16.8027 16.1905 15.8503 16.7347C14.9433 17.2789 13.8322 17.551 12.517 17.551V14.1497C13.288 14.1497 13.9229 13.9683 14.4218 13.6054C14.9206 13.1973 15.3288 12.6757 15.6463 12.0408C15.9637 11.4059 16.1678 10.703 16.2585 9.93198C16.3946 9.11565 16.4626 8.322 16.4626 7.55102H12.449V0Z" /></svg>'),
+  mask-image:
+    url('data:image/svg+xml,<svg width="20" height="18" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H7.55102V7.55102C7.55102 8.91157 7.39229 10.2041 7.07483 11.4286C6.80272 12.6077 6.34921 13.6508 5.71429 14.5578C5.12472 15.4649 4.35374 16.1905 3.40136 16.7347C2.49433 17.2789 1.38322 17.551 0.0680272 17.551V14.1497C0.839002 14.1497 1.47392 13.9683 1.97279 13.6054C2.47166 13.1973 2.87982 12.6757 3.19728 12.0408C3.51474 11.4059 3.71882 10.703 3.80952 9.93198C3.94558 9.11565 4.01361 8.322 4.01361 7.55102H0V0ZM12.449 0H20V7.55102C20 8.91157 19.8413 10.2041 19.5238 11.4286C19.2517 12.6077 18.7982 13.6508 18.1633 14.5578C17.5737 15.4649 16.8027 16.1905 15.8503 16.7347C14.9433 17.2789 13.8322 17.551 12.517 17.551V14.1497C13.288 14.1497 13.9229 13.9683 14.4218 13.6054C14.9206 13.1973 15.3288 12.6757 15.6463 12.0408C15.9637 11.4059 16.1678 10.703 16.2585 9.93198C16.3946 9.11565 16.4626 8.322 16.4626 7.55102H12.449V0Z" /></svg>')
 );
 
 $quotation-mark-top: (
-    mask-image: url('data:image/svg+xml,<svg width="20" height="18" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg"><path  fill-rule="evenodd" clip-rule="evenodd" d="M7.55102 17.551H0V10C0 8.63946 0.136054 7.36962 0.408163 6.19048C0.725624 4.96599 1.17914 3.90023 1.76871 2.9932C2.40363 2.08617 3.19728 1.36055 4.14966 0.81633C5.10204 0.272111 6.21315 0 7.48299 0V3.40136C6.71202 3.40136 6.0771 3.60544 5.57823 4.01361C5.07937 4.37642 4.6712 4.87528 4.35374 5.5102C4.03628 6.14513 3.80952 6.87075 3.67347 7.68708C3.58277 8.45805 3.53742 9.22902 3.53742 10H7.55102V17.551ZM20 17.551H12.449V10C12.449 8.63946 12.585 7.36962 12.8571 6.19048C13.1746 4.96599 13.6281 3.90023 14.2177 2.9932C14.8526 2.08617 15.6463 1.36055 16.5986 0.81633C17.551 0.272111 18.6621 0 19.932 0V3.40136C19.161 3.40136 18.5261 3.60544 18.0272 4.01361C17.5283 4.37642 17.1202 4.87528 16.8027 5.5102C16.4853 6.14513 16.2585 6.87075 16.1224 7.68708C16.0317 8.45805 15.9864 9.22902 15.9864 10H20V17.551Z" /></svg>'),
-    -webkit-mask-image: url('data:image/svg+xml,<svg width="20" height="18" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg"><path  fill-rule="evenodd" clip-rule="evenodd" d="M7.55102 17.551H0V10C0 8.63946 0.136054 7.36962 0.408163 6.19048C0.725624 4.96599 1.17914 3.90023 1.76871 2.9932C2.40363 2.08617 3.19728 1.36055 4.14966 0.81633C5.10204 0.272111 6.21315 0 7.48299 0V3.40136C6.71202 3.40136 6.0771 3.60544 5.57823 4.01361C5.07937 4.37642 4.6712 4.87528 4.35374 5.5102C4.03628 6.14513 3.80952 6.87075 3.67347 7.68708C3.58277 8.45805 3.53742 9.22902 3.53742 10H7.55102V17.551ZM20 17.551H12.449V10C12.449 8.63946 12.585 7.36962 12.8571 6.19048C13.1746 4.96599 13.6281 3.90023 14.2177 2.9932C14.8526 2.08617 15.6463 1.36055 16.5986 0.81633C17.551 0.272111 18.6621 0 19.932 0V3.40136C19.161 3.40136 18.5261 3.60544 18.0272 4.01361C17.5283 4.37642 17.1202 4.87528 16.8027 5.5102C16.4853 6.14513 16.2585 6.87075 16.1224 7.68708C16.0317 8.45805 15.9864 9.22902 15.9864 10H20V17.551Z" /></svg>')
+  mask-image:
+    url('data:image/svg+xml,<svg width="20" height="18" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg"><path  fill-rule="evenodd" clip-rule="evenodd" d="M7.55102 17.551H0V10C0 8.63946 0.136054 7.36962 0.408163 6.19048C0.725624 4.96599 1.17914 3.90023 1.76871 2.9932C2.40363 2.08617 3.19728 1.36055 4.14966 0.81633C5.10204 0.272111 6.21315 0 7.48299 0V3.40136C6.71202 3.40136 6.0771 3.60544 5.57823 4.01361C5.07937 4.37642 4.6712 4.87528 4.35374 5.5102C4.03628 6.14513 3.80952 6.87075 3.67347 7.68708C3.58277 8.45805 3.53742 9.22902 3.53742 10H7.55102V17.551ZM20 17.551H12.449V10C12.449 8.63946 12.585 7.36962 12.8571 6.19048C13.1746 4.96599 13.6281 3.90023 14.2177 2.9932C14.8526 2.08617 15.6463 1.36055 16.5986 0.81633C17.551 0.272111 18.6621 0 19.932 0V3.40136C19.161 3.40136 18.5261 3.60544 18.0272 4.01361C17.5283 4.37642 17.1202 4.87528 16.8027 5.5102C16.4853 6.14513 16.2585 6.87075 16.1224 7.68708C16.0317 8.45805 15.9864 9.22902 15.9864 10H20V17.551Z" /></svg>'),
+  -webkit-mask-image:
+    url('data:image/svg+xml,<svg width="20" height="18" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg"><path  fill-rule="evenodd" clip-rule="evenodd" d="M7.55102 17.551H0V10C0 8.63946 0.136054 7.36962 0.408163 6.19048C0.725624 4.96599 1.17914 3.90023 1.76871 2.9932C2.40363 2.08617 3.19728 1.36055 4.14966 0.81633C5.10204 0.272111 6.21315 0 7.48299 0V3.40136C6.71202 3.40136 6.0771 3.60544 5.57823 4.01361C5.07937 4.37642 4.6712 4.87528 4.35374 5.5102C4.03628 6.14513 3.80952 6.87075 3.67347 7.68708C3.58277 8.45805 3.53742 9.22902 3.53742 10H7.55102V17.551ZM20 17.551H12.449V10C12.449 8.63946 12.585 7.36962 12.8571 6.19048C13.1746 4.96599 13.6281 3.90023 14.2177 2.9932C14.8526 2.08617 15.6463 1.36055 16.5986 0.81633C17.551 0.272111 18.6621 0 19.932 0V3.40136C19.161 3.40136 18.5261 3.60544 18.0272 4.01361C17.5283 4.37642 17.1202 4.87528 16.8027 5.5102C16.4853 6.14513 16.2585 6.87075 16.1224 7.68708C16.0317 8.45805 15.9864 9.22902 15.9864 10H20V17.551Z" /></svg>'),
 );
 
 $quotation-mark-top-position: (
-    default: (
-        top: 0,
-        right: 0,
-    ),
-    oneline: (
-        top: 0,
-        right: 0,
-    )
+  default: (
+    top: 0,
+    right: 0,
+  ),
+  oneline: (
+    top: 0,
+    right: 0,
+  ),
 );
 
 $quotation-mark-bottom-position: (
-    default: (
-        left: 0,
-        bottom: 0,
-    ),
-    oneline: (
-        left: 0,
-        bottom: 0,
-    )
-)
-
+  default: (
+    left: 0,
+    bottom: 0,
+  ),
+  oneline: (
+    left: 0,
+    bottom: 0,
+  ),
+);

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

@@ -1,40 +1,44 @@
-@use './config';
-@use '../../../styles/tokens/base';
-@use '../../../styles/tokens/space';
-@use '../../../styles/tools/generate';
-@use '../../../styles/tools/convert';
+@use "./config";
+@use "../../../styles/tokens/base";
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/generate";
+@use "../../../styles/tools/convert";
 
 @mixin base {
-    padding: space.get('small') space.get('large') space.get('small') convert.to-rem(40px);
-    width: fit-content;
+  padding: space.get("small") space.get("large") space.get("small")
+    convert.to-rem(40px);
+  width: fit-content;
 }
 
 @mixin quotation-mark {
-    font-size: convert.to-rem(14px);
-    position: relative;
-    &::before,
-    &::after {
-        content: "";
-        display: block;
-        position: absolute;
-        height: convert.to-rem(18px);
-        width: convert.to-rem(20px);
-        background-repeat: no-repeat;
-        background-color: config.$black;
-    }
-    &::before {
-        @include generate.css-map(config.$quotation-mark-bottom);
-        @include generate.css-map(config.$quotation-mark-bottom-position, 'default');
-    }
-    &::after {
-        @include generate.css-map(config.$quotation-mark-top);
-        @include generate.css-map(config.$quotation-mark-top-position, 'default');
-    }
+  font-size: convert.to-rem(14px);
+  position: relative;
+  &::before,
+  &::after {
+    content: "";
+    display: block;
+    position: absolute;
+    height: convert.to-rem(18px);
+    width: convert.to-rem(20px);
+    background-repeat: no-repeat;
+    background-color: config.$black;
+  }
+  &::before {
+    @include generate.css-map(config.$quotation-mark-bottom);
+    @include generate.css-map(
+      config.$quotation-mark-bottom-position,
+      "default"
+    );
+  }
+  &::after {
+    @include generate.css-map(config.$quotation-mark-top);
+    @include generate.css-map(config.$quotation-mark-top-position, "default");
+  }
 }
 
 @mixin orange {
-    &::before,
-    &::after {
-        background-color: config.$orange;
-    }
-}
+  &::before,
+  &::after {
+    background-color: config.$orange;
+  }
+}

package/src/components/Testimonial/tests/Testimonial.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 { Testimonial } from '../';
+import { Testimonial } from "../";
 
 const example = <Testimonial />;
 
-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/Testimonial/tests/Testimonial.unit.test.jsx

@@ -1,44 +1,43 @@
-import React from 'react';
-import { render } from '@testing-library/react';
+import { render } from "@testing-library/react";
 
-import { Testimonial } from '../';
+import { Testimonial } from "../";
 
-describe('rendering Testimonial', () => {
-  describe('initial state', () => {
-    it('has default class testimonial', () => {
+describe("rendering Testimonial", () => {
+  describe("initial state", () => {
+    it("has default class testimonial", () => {
       const { getByTestId } = render(<Testimonial data-testid="test-id" />);
-      expect(getByTestId('test-id')).toHaveClass('testimonial');
+      expect(getByTestId("test-id")).toHaveClass("testimonial");
     });
-    it('its rendered as paragraph', () => {
+    it("its rendered as paragraph", () => {
       const { getByTestId } = render(<Testimonial data-testid="test-id" />);
-      expect(getByTestId('test-id').tagName).toBe('P');
+      expect(getByTestId("test-id").tagName).toBe("P");
     });
   });
 
-  describe('passed props', () => {
-    it('renders children', () => {
+  describe("passed props", () => {
+    it("renders children", () => {
       const { getByText } = render(<Testimonial>test</Testimonial>);
-      expect(getByText('test')).toBeInTheDocument();
+      expect(getByText("test")).toBeInTheDocument();
     });
-    it('has additional class when className is set', () => {
+    it("has additional class when className is set", () => {
       const { getByTestId } = render(
-        <Testimonial className="test" data-testid="test-id" />
+        <Testimonial className="test" data-testid="test-id" />,
       );
-      expect(getByTestId('test-id')).toHaveClass('testimonial');
-      expect(getByTestId('test-id')).toHaveClass('test');
+      expect(getByTestId("test-id")).toHaveClass("testimonial");
+      expect(getByTestId("test-id")).toHaveClass("test");
     });
-    it('has additional className testimonial--orange prop color with value orange is passed', () => {
+    it("has additional className testimonial--orange prop color with value orange is passed", () => {
       const { getByTestId } = render(
-        <Testimonial className="test" data-testid="test-id" color="orange" />
+        <Testimonial className="test" data-testid="test-id" color="orange" />,
       );
-      expect(getByTestId('test-id')).toHaveClass('testimonial');
-      expect(getByTestId('test-id')).toHaveClass('testimonial--orange');
+      expect(getByTestId("test-id")).toHaveClass("testimonial");
+      expect(getByTestId("test-id")).toHaveClass("testimonial--orange");
     });
-    it('its rendered as div when isDiv prop is passed', () => {
+    it("its rendered as div when isDiv prop is passed", () => {
       const { getByTestId } = render(
-        <Testimonial data-testid="test-id" isDiv />
+        <Testimonial data-testid="test-id" isDiv />,
       );
-      expect(getByTestId('test-id').tagName).toBe('DIV');
+      expect(getByTestId("test-id").tagName).toBe("DIV");
     });
   });
 });

package/src/components/Tile/Tile.tsx

@@ -1,9 +1,8 @@
-import React, { ReactNode } from "react";
 import cx from "classnames";
-
-import { Image } from "../Image";
+import React, { ReactNode } from "react";
 import { Icon } from "../Icon";
 import { IconProps } from "../Icon/Icon";
+import { Image } from "../Image";
 
 export const tileColors = [
   "surface-primary",