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

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/LoaderFullscreen.tsx

@@ -0,0 +1,32 @@
+import cx from "classnames";
+import React, { ReactNode } from "react";
+import { Container } from "../Container";
+import { Loader } from "./Loader";
+
+const CLASS_ROOT = "loader-fullscreen";
+
+interface LoaderFullscreenProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const LoaderFullscreen: React.FC<LoaderFullscreenProps> = ({
+  className,
+  children,
+  ...other
+}) => {
+  const classes = cx(CLASS_ROOT, className);
+
+  return (
+    <div className={classes} role="status" aria-live="polite" {...other}>
+      <Container>
+        {children}
+        <Loader size="large" />
+      </Container>
+    </div>
+  );
+};
+
+LoaderFullscreen.displayName = "LoaderFullscreen";
+
+export { LoaderFullscreen };

package/src/components/Loader/index.ts

@@ -1 +1,2 @@
 export { Loader } from "./Loader";
+export { LoaderFullscreen } from "./LoaderFullscreen";

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

@@ -1,16 +1,16 @@
-@use '../../../styles/tokens/color';
-@use '../../../styles/tokens/space';
-@use '../../../styles/tools/convert';
+@use "../../../styles/tokens/color";
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/convert";
 
 $sizes: (
   default: (
     width: convert.to-rem(40px),
     height: convert.to-rem(40px),
-    margin-right: space.get('small'),
+    margin-right: space.get("small"),
   ),
   large: (
     width: convert.to-rem(50px),
     height: convert.to-rem(50px),
     margin-right: space.get(),
-  )
+  ),
 );

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

@@ -2,6 +2,7 @@
 @use "../../../styles/tools/generate";
 @use "../../../styles/tools/convert";
 @use "../../../styles/tokens/color";
+@use "../../../styles/tokens/space";
 @use "./config";
 
 @keyframes logo-line {
@@ -31,6 +32,10 @@
   flex: 0 0 auto;
   overflow: hidden;
   background-color: var(--color-surface-secondary);
+
+  &:only-child {
+    margin-right: 0 !important;
+  }
 }
 
 @mixin size($size: default) {
@@ -64,3 +69,22 @@
 @mixin messages-large {
   font-size: convert.to-rem(18px);
 }
+
+@mixin fullscreen-base {
+  position: fixed;
+  display: flex;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 500;
+  background-color: #eeeeeef2; // color.$surface-subtle opacity 95%
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+}

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

@@ -1,4 +1,5 @@
 @use "./mixins";
+@use "../../../styles/tokens/color";
 
 @layer components {
   .loader {
@@ -37,4 +38,12 @@
       }
     }
   }
+
+  .loader-fullscreen {
+    @include mixins.fullscreen-base;
+  }
+
+  .is-dark .loader-fullscreen {
+    background-color: #333333f2; // color.$surface-subtle opacity 95%
+  }
 }

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/Loader/tests/LoaderFullscreen.conformance.test.jsx

@@ -0,0 +1,21 @@
+import { render } from "@testing-library/react";
+import { axe } from "vitest-axe";
+
+import { LoaderFullscreen } from "../";
+
+const example = (
+  <>
+    <LoaderFullscreen />
+    <LoaderFullscreen>Loading...</LoaderFullscreen>
+  </>
+);
+
+it("is valid html", () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate();
+});
+
+it("is accessible", async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});

package/src/components/Loader/tests/LoaderFullscreen.unit.test.jsx

@@ -0,0 +1,41 @@
+import { render } from "@testing-library/react";
+
+import { LoaderFullscreen } from "../";
+
+describe("LoaderFullscreen", () => {
+  describe("initial state", () => {
+    it("has default class loader-fullscreen", () => {
+      const { getByTestId } = render(
+        <LoaderFullscreen data-testid="test-id" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("loader-fullscreen");
+    });
+
+    it("renders a Loader inside", () => {
+      const { container } = render(<LoaderFullscreen />);
+      expect(container.getElementsByClassName("loader").length).toBe(1);
+    });
+
+    it("renders a large Loader by default", () => {
+      const { container } = render(<LoaderFullscreen />);
+      expect(container.getElementsByClassName("loader--large").length).toBe(1);
+    });
+
+    it("has role status", () => {
+      const { getByTestId } = render(
+        <LoaderFullscreen data-testid="test-id" />,
+      );
+      expect(getByTestId("test-id")).toHaveAttribute("role", "status");
+    });
+  });
+
+  describe("passed props", () => {
+    it("has additional class when className is set", () => {
+      const { getByTestId } = render(
+        <LoaderFullscreen data-testid="test-id" className="test-class" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("loader-fullscreen");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+  });
+});

package/src/components/Loader/tests/test.scss

@@ -2,4 +2,4 @@ div[style*="border:2px solid red;"] {
   .loader__line {
     animation: none !important;
   }
-}
+}

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,45 +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",

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