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

package/src/components/Megamenu/MyOrangeMobilePanel.tsx

@@ -1,29 +1,28 @@
 import cx from "classnames";
-
-import { MegamenuIcon } from "./MegaMenuIcon";
 import {
   CLASS_CONTAINER,
   CLASS_MOBILE,
-  CLASS_MOBILE_OVERLAY,
-  CLASS_MOBILE_WRAPPER,
-  CLASS_MOBILE_HEADER,
-  CLASS_MOBILE_BODY,
   CLASS_MOBILE_ACCOUNT,
   CLASS_MOBILE_ACCOUNT_AVATAR,
-  CLASS_MOBILE_ACCOUNT_NAME,
-  CLASS_MOBILE_ACCOUNT_PHONE,
-  CLASS_MOBILE_ACCOUNT_LOGOUT,
   CLASS_MOBILE_ACCOUNT_CTA,
-  CLASS_MOBILE_ACCOUNT_LINKS,
   CLASS_MOBILE_ACCOUNT_LINK,
+  CLASS_MOBILE_ACCOUNT_LINKS,
+  CLASS_MOBILE_ACCOUNT_LOGOUT,
+  CLASS_MOBILE_ACCOUNT_NAME,
+  CLASS_MOBILE_ACCOUNT_PHONE,
+  CLASS_MOBILE_BODY,
+  CLASS_MOBILE_HEADER,
+  CLASS_MOBILE_OVERLAY,
+  CLASS_MOBILE_WRAPPER,
   CLASS_NAV,
+  CLASS_NAV_BUTTON,
+  CLASS_NAV_ITEM,
   CLASS_NAV_SPACE_SMALL,
   CLASS_NAV_SPACER,
-  CLASS_NAV_ITEM,
-  CLASS_NAV_BUTTON,
   CLASS_SUBNAV,
   CLASS_SUBNAV_ITEM,
 } from "./constants";
+import { MegamenuIcon } from "./MegaMenuIcon";
 
 type MyOrangeMobilePanelProps = {
   titleId: string;

package/src/components/Megamenu/constants.ts

@@ -19,6 +19,7 @@ export const CLASS_NAV_LINK_NO_LINE = `${CLASS_ROOT}__nav-link--no-line`;
 export const CLASS_NAV_CART_ICON = `${CLASS_ROOT}__nav-cart-icon`;
 export const CLASS_NAV_SPACER = `${CLASS_ROOT}__nav-spacer`;
 export const CLASS_NAV_ICON = `${CLASS_ROOT}__nav-icon`;
+export const CLASS_NAV_ICON_NO_GAP_MD_DOWN = `${CLASS_NAV_ICON}--no-gap-md-down`;
 export const CLASS_NAV_LOGO = `${CLASS_ROOT}__nav-logo`;
 export const CLASS_NAV_BUTTON = `${CLASS_ROOT}__nav-button`;
 export const CLASS_NAV_BUTTON_INDICATOR = `${CLASS_ROOT}__nav-button--indicator`;

package/src/components/Megamenu/index.ts

@@ -1,3 +1,3 @@
+export { MegamenuIcon } from "./MegaMenuIcon";
 export { Megamenu } from "./Megamenu";
 export { MegamenuBlog } from "./MegamenuBlog";
-export { MegamenuIcon } from "./MegaMenuIcon";

package/src/components/Megamenu/static.ts

@@ -1,8 +1,8 @@
-import Megamenu from "./Megamenu.static";
 import moduleFactory, {
-  initModulesWithin,
   destroyModulesWithin,
+  initModulesWithin,
 } from "../../scripts/lib/moduleFactory";
+import Megamenu from "./Megamenu.static";
 import "./styles/style.scss";
 
 // Module configuration for Megamenu

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

@@ -445,6 +445,12 @@
   margin-right: convert.to-rem(5px);
 }
 
+@mixin nav-icon-no-gap-md-down {
+  @include breakpoint.get("md", "down") {
+    margin-right: 0;
+  }
+}
+
 @mixin nav-spacer {
   display: flex;
   flex: 1 0 1px;
@@ -637,8 +643,16 @@
   margin-bottom: convert.to-rem(40px);
   text-decoration: none !important;
 
+  &:hover {
+    color: var(--color-text-inverse) !important;
+    background-color: var(--color-fill-contrast) !important;
+    border-color: transparent !important;
+  }
+
   &:active {
-    color: color.$black !important;
+    color: var(--color-fill-contrast) !important;
+    background-color: transparent !important;
+    border-color: var(--color-border-contrast) !important;
   }
 }
 

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

@@ -86,6 +86,10 @@
 
     &-icon {
       @include mixins.nav-icon;
+
+      &--no-gap-md-down {
+        @include mixins.nav-icon-no-gap-md-down;
+      }
     }
 
     &-spacer {

package/src/components/Modal/Modal.tsx

@@ -1,16 +1,15 @@
 "use client";
 
-import React, { useEffect, useMemo } from "react";
 import cx from "classnames";
-
-import { useStatic } from "../../utils/hooks";
+import React, { useEffect, useMemo } from "react";
 import ConditionalWrapper from "../../utils/ConditionalWrapper";
+import { useStatic } from "../../utils/hooks";
 import { Button } from "../Button";
 import { Buttons } from "../Buttons";
 import ModalStatic from "./Modal.static";
+import { ModalBody } from "./ModalBody";
 import { ModalCloseButton } from "./ModalCloseButton";
 import { ModalTitle } from "./ModalTitle";
-import { ModalBody } from "./ModalBody";
 
 const CLASS_ROOT = "modal";
 

package/src/components/Modal/ModalBody.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 export const modalBodyColors = [
   "background-primary",

package/src/components/Modal/ModalCloseButton.tsx

@@ -1,6 +1,6 @@
 import { IconButton } from "../Button";
-import { IconButtonProps } from "../Button/IconButton";
 import { ButtonType } from "../Button/Button";
+import { IconButtonProps } from "../Button/IconButton";
 
 interface ExtendedIconButtonProps extends IconButtonProps {
   type?: ButtonType;

package/src/components/Modal/ModalProductFooter.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 interface ModalProductFooterProps extends React.HTMLAttributes<HTMLDivElement> {
   image?: React.ReactNode;

package/src/components/Modal/ModalProductHeader.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 interface ModalProductHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   image?: React.ReactNode;

package/src/components/Modal/index.ts

@@ -1,6 +1,6 @@
 export { Modal } from "./Modal";
 export { ModalBody } from "./ModalBody";
-export { ModalTitle } from "./ModalTitle";
 export { ModalCloseButton } from "./ModalCloseButton";
-export { ModalProductHeader } from "./ModalProductHeader";
 export { ModalProductFooter } from "./ModalProductFooter";
+export { ModalProductHeader } from "./ModalProductHeader";
+export { ModalTitle } from "./ModalTitle";

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

@@ -1,6 +1,5 @@
-import React from "react";
-import { render, fireEvent } from "@testing-library/react";
-import { axe } from 'vitest-axe';
+import { fireEvent, render } from "@testing-library/react";
+import { axe } from "vitest-axe";
 
 import { Button } from "../../Button";
 import { Modal, ModalProductHeader } from "../";

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

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

package/src/components/Modal/tests/ModalProductHeader.unit.test.jsx

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

package/src/components/Modal/tests/ModalTitle.unit.test.jsx

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

package/src/components/Pagination/Pagination.tsx

@@ -1,9 +1,8 @@
-import React, { useMemo } from "react";
 import cx from "classnames";
-
+import React, { useMemo } from "react";
+import { getItemState } from "./helpers";
 import { PaginationItem } from "./PaginationItem";
 import Separator from "./Separator";
-import { getItemState } from "./helpers";
 
 interface PaginationItemProps {
   /** Page link href */

package/src/components/Pagination/PaginationItem.tsx

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

package/src/components/Pagination/Separator.tsx

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

package/src/components/Pagination/helpers.ts

@@ -22,7 +22,12 @@ interface ItemState {
   showSeparator: boolean;
 }
 
-export function getItemState({ activeIndex, items, isCompact, index }: GetItemStateParams): ItemState {
+export function getItemState({
+  activeIndex,
+  items,
+  isCompact,
+  index,
+}: GetItemStateParams): ItemState {
   const isFirst = index === 0;
   const isSecond = index === 1;
   const isCurrent = index === activeIndex;

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>;