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

package/src/components/Image/Image.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 import breakpoints from "../../styles/export/breakpoint";
 

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

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

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render, screen } from "@testing-library/react";
 
 // Mock breakpoints since SCSS modules don't work in tests

package/src/components/Link/Link.tsx

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

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

@@ -19,7 +19,7 @@ Conformance tests for the Link component:
   - Does not create unnecessary wrapper elements.
 */
 import { render, screen } from "@testing-library/react";
-import { axe } from 'vitest-axe';
+import { axe } from "vitest-axe";
 import "@testing-library/jest-dom/vitest";
 
 import { Link } from "../";

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

@@ -24,7 +24,7 @@ Unit tests for the Link component:
 - Component Display Name:
   - Has correct display name 'Link'.
 */
-import { render, screen, fireEvent } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom/vitest";
 
 import { Link } from "../";

package/src/components/List/ClickableControl.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import cx from 'classnames';
+import cx from "classnames";
+import React from "react";
 
-import { Icon } from '../Icon';
+import { Icon } from "../Icon";
 
 interface ClickableControlProps {
   href?: string;
@@ -10,16 +10,16 @@ interface ClickableControlProps {
   [key: string]: any;
 }
 
-const CLASS_ROOT = 'list__control';
+const CLASS_ROOT = "list__control";
 
-export const ClickableControl: React.FC<ClickableControlProps> = ({ 
-  href, 
-  className, 
-  children, 
-  ...other 
+export const ClickableControl: React.FC<ClickableControlProps> = ({
+  href,
+  className,
+  children,
+  ...other
 }) => {
-  const Tag = href ? 'a' : 'button';
-  const type = Tag === 'button' ? 'button' : undefined;
+  const Tag = href ? "a" : "button";
+  const type = Tag === "button" ? "button" : undefined;
   const classes = cx(CLASS_ROOT, className);
 
   return (
@@ -30,4 +30,4 @@ export const ClickableControl: React.FC<ClickableControlProps> = ({
   );
 };
 
-ClickableControl.displayName = 'ListItemClickableControl';
+ClickableControl.displayName = "ListItemClickableControl";

package/src/components/List/List.tsx

@@ -1,26 +1,26 @@
-import React from 'react';
-import cx from 'classnames';
+import cx from "classnames";
+import React from "react";
 
 interface ListProps {
   /** Size determines color of list items and color of their borders*/
-  color?: 'gray';
+  color?: "gray";
   /** Spacious lists have horizontal spacing */
   isEnclosed?: boolean;
   /** Size determines vertical spacing */
-  size?: 'small';
+  size?: "small";
   className?: string;
   children?: React.ReactNode;
 }
 
-const CLASS_ROOT = 'list';
+const CLASS_ROOT = "list";
 
-export const List: React.FC<ListProps> = ({ 
-  color, 
-  isEnclosed, 
-  size, 
-  className, 
-  children, 
-  ...other 
+export const List: React.FC<ListProps> = ({
+  color,
+  isEnclosed,
+  size,
+  className,
+  children,
+  ...other
 }) => {
   const classes = cx(
     CLASS_ROOT,
@@ -29,7 +29,7 @@ export const List: React.FC<ListProps> = ({
       [`${CLASS_ROOT}--${color}`]: color,
       [`${CLASS_ROOT}--enclosed`]: isEnclosed,
     },
-    className
+    className,
   );
 
   return (

package/src/components/List/ListItem.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import cx from 'classnames';
+import cx from "classnames";
+import React from "react";
 
-import ConditionalWrapper from '../../utils/ConditionalWrapper';
-import { ClickableControl } from './ClickableControl';
+import ConditionalWrapper from "../../utils/ConditionalWrapper";
+import { ClickableControl } from "./ClickableControl";
 
 interface ControlProps {
   href?: string;
@@ -19,13 +19,13 @@ interface ListItemProps {
   [key: string]: any;
 }
 
-const CLASS_ROOT = 'list__item';
+const CLASS_ROOT = "list__item";
 
-export const ListItem: React.FC<ListItemProps> = ({ 
-  controlProps, 
-  className, 
-  children, 
-  ...other 
+export const ListItem: React.FC<ListItemProps> = ({
+  controlProps,
+  className,
+  children,
+  ...other
 }) => {
   const classes = cx(CLASS_ROOT, className);
 
@@ -41,4 +41,4 @@ export const ListItem: React.FC<ListItemProps> = ({
   );
 };
 
-ListItem.displayName = 'ListItem';
+ListItem.displayName = "ListItem";

package/src/components/List/tests/ClickableControl.unit.test.jsx

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

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

@@ -1,18 +1,17 @@
-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 { List, ListItem } from '../';
+import { List, ListItem } from "../";
 
 const items = [
-  'Cras justo odio, dapibus ac facilisis in, egestas eget quam.',
-  'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-  'Praesent commodo cursus magna, vel scelerisque nisl consectetur et.',
+  "Cras justo odio, dapibus ac facilisis in, egestas eget quam.",
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  "Praesent commodo cursus magna, vel scelerisque nisl consectetur et.",
 ];
 
 const defaultExample = (
   <List>
-    {items.map(item => (
+    {items.map((item) => (
       <ListItem key={item}>{item}</ListItem>
     ))}
   </List>
@@ -20,8 +19,8 @@ const defaultExample = (
 
 const clickableAnchor = (
   <List>
-    {items.map(item => (
-      <ListItem key={item} controlProps={{ href: '#' }}>
+    {items.map((item) => (
+      <ListItem key={item} controlProps={{ href: "#" }}>
         {item}
       </ListItem>
     ))}
@@ -30,7 +29,7 @@ const clickableAnchor = (
 
 const clickableButton = (
   <List>
-    {items.map(item => (
+    {items.map((item) => (
       <ListItem key={item} controlProps={{}}>
         {item}
       </ListItem>
@@ -38,32 +37,32 @@ const clickableButton = (
   </List>
 );
 
-it('default is valid html', () => {
+it("default is valid html", () => {
   const { container } = render(defaultExample);
   expect(container).toHTMLValidate();
 });
 
-it('default is accessible', async () => {
+it("default is accessible", async () => {
   const { container } = render(defaultExample);
   expect(await axe(container)).toHaveNoViolations();
 });
 
-it('clickableAnchor is valid html', () => {
+it("clickableAnchor is valid html", () => {
   const { container } = render(clickableAnchor);
   expect(container).toHTMLValidate();
 });
 
-it('clickableAnchor is accessible', async () => {
+it("clickableAnchor is accessible", async () => {
   const { container } = render(clickableAnchor);
   expect(await axe(container)).toHaveNoViolations();
 });
 
-it('clickableButton is valid html', () => {
+it("clickableButton is valid html", () => {
   const { container } = render(clickableButton);
   expect(container).toHTMLValidate();
 });
 
-it('clickableButton is accessible', async () => {
+it("clickableButton is accessible", async () => {
   const { container } = render(clickableButton);
   expect(await axe(container)).toHaveNoViolations();
 });

package/src/components/List/tests/ListItem.unit.test.jsx

@@ -1,104 +1,103 @@
-import React from 'react';
-import { render } from '@testing-library/react';
+import { render } from "@testing-library/react";
 
-import { ListItem } from '../ListItem';
+import { ListItem } from "../ListItem";
 
 const controlProps1 = {
-  className: 'test-class',
+  className: "test-class",
 };
 const controlProps2 = {
-  className: 'test-class',
-  href: 'test',
+  className: "test-class",
+  href: "test",
 };
 
 //conditional wrapper component inside ListItem requires child to render
-describe('rendering ListItem', () => {
-  describe('initial state', () => {
-    it('has default class list__item', () => {
+describe("rendering ListItem", () => {
+  describe("initial state", () => {
+    it("has default class list__item", () => {
       const { getByTestId } = render(
-        <ListItem data-testid="test-id">test-child</ListItem>
+        <ListItem data-testid="test-id">test-child</ListItem>,
       );
-      expect(getByTestId('test-id')).toHaveClass('list__item');
+      expect(getByTestId("test-id")).toHaveClass("list__item");
     });
   });
-  describe('passed props', () => {
-    it('renders children', () => {
+  describe("passed props", () => {
+    it("renders children", () => {
       const { getByText } = render(
-        <ListItem data-testid="test-id">test-child</ListItem>
+        <ListItem data-testid="test-id">test-child</ListItem>,
       );
-      expect(getByText('test-child')).toBeInTheDocument();
+      expect(getByText("test-child")).toBeInTheDocument();
     });
-    it('has additional class when className is set', () => {
+    it("has additional class when className is set", () => {
       const { getByTestId } = render(
         <ListItem data-testid="test-id" className="test-class">
           test-child
-        </ListItem>
+        </ListItem>,
       );
-      expect(getByTestId('test-id')).toHaveClass('list__item');
-      expect(getByTestId('test-id')).toHaveClass('test-class');
+      expect(getByTestId("test-id")).toHaveClass("list__item");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
     });
-    it('renders button with type button when controlProps without href is passed', () => {
+    it("renders button with type button when controlProps without href is passed", () => {
       const { getByRole } = render(
         <ListItem data-testid="test-id" controlProps={controlProps1}>
           test-child
-        </ListItem>
+        </ListItem>,
       );
-      expect(getByRole('button')).toBeInTheDocument();
-      expect(getByRole('button').getAttribute('type')).toBe('button');
+      expect(getByRole("button")).toBeInTheDocument();
+      expect(getByRole("button").getAttribute("type")).toBe("button");
     });
-    it('renders button with class from controlProps.className when passed', () => {
+    it("renders button with class from controlProps.className when passed", () => {
       const { getByRole } = render(
         <ListItem data-testid="test-id" controlProps={controlProps1}>
           test-child
-        </ListItem>
+        </ListItem>,
       );
-      expect(getByRole('button')).toBeInTheDocument();
-      expect(getByRole('button')).toHaveClass('test-class');
+      expect(getByRole("button")).toBeInTheDocument();
+      expect(getByRole("button")).toHaveClass("test-class");
     });
-    it('renders button with class from controlProps.className when passed', () => {
+    it("renders button with class from controlProps.className when passed", () => {
       const { getByRole } = render(
         <ListItem data-testid="test-id" controlProps={controlProps1}>
           test-child
-        </ListItem>
+        </ListItem>,
       );
-      expect(getByRole('button')).toBeInTheDocument();
-      expect(getByRole('button')).toHaveClass('test-class');
+      expect(getByRole("button")).toBeInTheDocument();
+      expect(getByRole("button")).toHaveClass("test-class");
     });
-    it('children are rendered inside button element when button is rendered', () => {
+    it("children are rendered inside button element when button is rendered", () => {
       const { getByRole } = render(
         <ListItem data-testid="test-id" controlProps={controlProps1}>
           test-child
-        </ListItem>
+        </ListItem>,
       );
-      expect(getByRole('button')).toBeInTheDocument();
-      expect(getByRole('button').textContent).toBe('test-child');
+      expect(getByRole("button")).toBeInTheDocument();
+      expect(getByRole("button").textContent).toBe("test-child");
     });
-    it('renders anchor without type when controlProps with href is passed', () => {
+    it("renders anchor without type when controlProps with href is passed", () => {
       const { getByRole } = render(
         <ListItem data-testid="test-id" controlProps={controlProps2}>
           test-child
-        </ListItem>
+        </ListItem>,
       );
-      expect(getByRole('link')).toBeInTheDocument();
-      expect(getByRole('link').getAttribute('type')).toBeFalsy();
+      expect(getByRole("link")).toBeInTheDocument();
+      expect(getByRole("link").getAttribute("type")).toBeFalsy();
     });
-    it('renders anchor with class from controlProps.className when passed', () => {
+    it("renders anchor with class from controlProps.className when passed", () => {
       const { getByRole } = render(
         <ListItem data-testid="test-id" controlProps={controlProps2}>
           test-child
-        </ListItem>
+        </ListItem>,
       );
-      expect(getByRole('link')).toBeInTheDocument();
-      expect(getByRole('link')).toHaveClass('test-class');
+      expect(getByRole("link")).toBeInTheDocument();
+      expect(getByRole("link")).toHaveClass("test-class");
     });
-    it('children are rendered inside anchor element when anchor is rendered', () => {
+    it("children are rendered inside anchor element when anchor is rendered", () => {
       const { getByRole } = render(
         <ListItem data-testid="test-id" controlProps={controlProps2}>
           test-child
-        </ListItem>
+        </ListItem>,
       );
-      expect(getByRole('link')).toBeInTheDocument();
-      expect(getByRole('link').textContent).toBe('test-child');
+      expect(getByRole("link")).toBeInTheDocument();
+      expect(getByRole("link").textContent).toBe("test-child");
     });
   });
 });

package/src/components/Loader/Loader.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import React, { ReactNode } from "react";
 import cx from "classnames";
+import React, { ReactNode } from "react";
 
 import { useStatic } from "../../utils/hooks";
 

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

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

package/src/components/Megamenu/MegaMenuIcon.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 export interface MegaMenuIconProps extends React.SVGAttributes<SVGSVGElement> {
   /** Accessible label for the icon. */

package/src/components/Megamenu/Megamenu.static.ts

@@ -1,12 +1,12 @@
 import {
-  CLASS_NAV_BUTTON,
-  CLASS_NAV_DROPDOWN,
+  CLASS_ACCORDION_BUTTON,
+  CLASS_ACCORDION_ICON,
+  CLASS_HIDE_LG_UP,
   CLASS_MOBILE,
   CLASS_MOBILE_OVERLAY,
-  CLASS_HIDE_LG_UP,
+  CLASS_NAV_BUTTON,
+  CLASS_NAV_DROPDOWN,
   CLASS_OVERLAY,
-  CLASS_ACCORDION_BUTTON,
-  CLASS_ACCORDION_ICON,
 } from "./constants";
 
 interface MegamenuConfig {

package/src/components/Megamenu/Megamenu.tsx

@@ -1,18 +1,29 @@
 import cx from "classnames";
-
-import { MegamenuIcon } from "./MegaMenuIcon";
-import { MyOrangeMobilePanel } from "./MyOrangeMobilePanel";
-import { MegamenuSearchContent } from "./MegamenuSearchContent";
-import { getMegamenuIds } from "./ids";
+import React from "react";
 import {
+  CLASS_ACCORDION,
+  CLASS_ACCORDION_BODY,
+  CLASS_ACCORDION_BUTTON,
+  CLASS_ACCORDION_HEADER,
+  CLASS_ACCORDION_ICON,
+  CLASS_ACCORDION_ITEM,
+  CLASS_ACCORDION_TITLE,
+  CLASS_CAPTION,
+  CLASS_CARD,
   CLASS_CONTAINER,
   CLASS_GRID,
-  CLASS_HIDE_MD_DOWN,
   CLASS_HIDE_LG_UP,
+  CLASS_HIDE_MD_DOWN,
   CLASS_MAIN,
+  CLASS_MOBILE,
+  CLASS_MOBILE_BODY,
+  CLASS_MOBILE_HEADER,
+  CLASS_MOBILE_OVERLAY,
+  CLASS_MOBILE_WRAPPER,
   CLASS_NAV,
   CLASS_NAV_BUTTON,
   CLASS_NAV_BUTTON_INDICATOR,
+  CLASS_NAV_CART_ICON,
   CLASS_NAV_DROPDOWN,
   CLASS_NAV_ICON,
   CLASS_NAV_ITEM,
@@ -20,39 +31,27 @@ import {
   CLASS_NAV_ITEM_MAIN,
   CLASS_NAV_LINK,
   CLASS_NAV_LINK_LOCALE,
-  CLASS_NAV_MOBILE_LOCALE,
   CLASS_NAV_LOGO,
+  CLASS_NAV_MOBILE_LOCALE,
+  CLASS_NAV_SPACE_SMALL,
   CLASS_NAV_SPACER,
-  CLASS_ROOT,
-  CLASS_SUBNAV,
-  CLASS_SUBNAV_ITEM,
-  CLASS_TEXT_LARGE,
-  CLASS_CAPTION,
-  CLASS_TOP,
-  CLASS_MOBILE,
-  CLASS_MOBILE_OVERLAY,
-  CLASS_MOBILE_WRAPPER,
-  CLASS_MOBILE_HEADER,
-  CLASS_MOBILE_BODY,
   CLASS_NAV_VERTICAL,
   CLASS_OVERLAY,
-  CLASS_ACCORDION,
-  CLASS_ACCORDION_ITEM,
-  CLASS_ACCORDION_HEADER,
-  CLASS_ACCORDION_BUTTON,
-  CLASS_ACCORDION_TITLE,
-  CLASS_ACCORDION_ICON,
-  CLASS_ACCORDION_BODY,
-  CLASS_CARD,
-  CLASS_NAV_SPACE_SMALL,
-  CLASS_NAV_CART_ICON,
+  CLASS_ROOT,
   CLASS_SPACER,
+  CLASS_SUBNAV,
+  CLASS_SUBNAV_ITEM,
   CLASS_TAG,
   CLASS_TAG_ORANGE,
   CLASS_TAG_SMALL,
+  CLASS_TEXT_LARGE,
+  CLASS_TOP,
 } from "./constants";
-import React from "react";
 import { MenuItem, MenuSection, menuSections } from "./data";
+import { getMegamenuIds } from "./ids";
+import { MegamenuIcon } from "./MegaMenuIcon";
+import { MegamenuSearchContent } from "./MegamenuSearchContent";
+import { MyOrangeMobilePanel } from "./MyOrangeMobilePanel";
 
 export type MegamenuProps = {
   className?: string;

package/src/components/Megamenu/MegamenuBlog.tsx

@@ -1,44 +1,43 @@
 import cx from "classnames";
-
-import { MegamenuIcon } from "./MegaMenuIcon";
-import { MegamenuSearchContent } from "./MegamenuSearchContent";
-import { MyOrangeMobilePanel } from "./MyOrangeMobilePanel";
-import { getMegamenuIds } from "./ids";
 import {
+  CLASS_CAPTION,
   CLASS_CONTAINER,
-  CLASS_HIDE_MD_DOWN,
   CLASS_HIDE_LG_UP,
+  CLASS_HIDE_MD_DOWN,
+  CLASS_LIST_GAP_SMALL,
+  CLASS_LIST_INLINE,
   CLASS_MAIN,
+  CLASS_MOBILE,
+  CLASS_MOBILE_BODY,
+  CLASS_MOBILE_HEADER,
+  CLASS_MOBILE_OVERLAY,
+  CLASS_MOBILE_WRAPPER,
   CLASS_NAV,
   CLASS_NAV_BUTTON,
   CLASS_NAV_DROPDOWN,
   CLASS_NAV_ICON,
+  CLASS_NAV_ICON_NO_GAP_MD_DOWN,
   CLASS_NAV_ITEM,
-  CLASS_NAV_VERTICAL,
   CLASS_NAV_ITEM_MAIN,
   CLASS_NAV_LINK,
   CLASS_NAV_LINK_NO_LINE,
   CLASS_NAV_LOGO,
+  CLASS_NAV_SPACE_SMALL,
   CLASS_NAV_SPACER,
-  CLASS_ROOT,
-  CLASS_SUBNAV,
-  CLASS_SUBNAV_ITEM,
-  CLASS_MOBILE,
-  CLASS_MOBILE_OVERLAY,
-  CLASS_MOBILE_WRAPPER,
-  CLASS_MOBILE_HEADER,
-  CLASS_MOBILE_BODY,
+  CLASS_NAV_VERTICAL,
   CLASS_OVERLAY,
-  CLASS_NAV_SPACE_SMALL,
+  CLASS_ROOT,
   CLASS_SPACER_SMALL,
-  CLASS_LIST_INLINE,
-  CLASS_LIST_GAP_SMALL,
+  CLASS_SUBNAV,
   CLASS_TAG,
   CLASS_TAG_LARGE,
   CLASS_TAG_TRANSPARENT,
-  CLASS_CAPTION,
 } from "./constants";
+import { getMegamenuIds } from "./ids";
+import { MegamenuIcon } from "./MegaMenuIcon";
 import { MegamenuProps } from "./Megamenu";
+import { MegamenuSearchContent } from "./MegamenuSearchContent";
+import { MyOrangeMobilePanel } from "./MyOrangeMobilePanel";
 
 const blogCategories = [
   "Kategória 1",
@@ -158,7 +157,10 @@ export const MegamenuBlog = ({
                     width={24}
                     height={24}
                     name="user"
-                    className={CLASS_NAV_ICON}
+                    className={cx(
+                      CLASS_NAV_ICON,
+                      CLASS_NAV_ICON_NO_GAP_MD_DOWN,
+                    )}
                     aria-hidden="true"
                   />
                   <span className={CLASS_HIDE_MD_DOWN}>Môj Orange</span>

package/src/components/Megamenu/MegamenuSearchContent.tsx

@@ -1,15 +1,15 @@
 import cx from "classnames";
 
 import {
+  CLASS_CAPTION,
   CLASS_INPUT,
   CLASS_INPUT_WRAPPER,
-  CLASS_INPUT_WRAPPER_SEARCH_RESPONSIVE,
   CLASS_INPUT_WRAPPER_SEARCH_ICON_WITH_PLACEHOLDER,
+  CLASS_INPUT_WRAPPER_SEARCH_RESPONSIVE,
   CLASS_LIST_INLINE,
   CLASS_SUBNAV,
   CLASS_SUBNAV_ITEM,
   CLASS_TAG,
-  CLASS_CAPTION,
 } from "./constants";
 import { searchResultItems, searchTerms } from "./data";