@orangesk/orange-design-system 2.0.0-beta.8 → 2.0.0

package/src/components/Link/tests/{Link.unit.test.js → Link.unit.test.jsx}

@@ -24,15 +24,15 @@ Unit tests for the Link component:
 - Component Display Name:
   - Has correct display name 'Link'.
 */
-import { render, screen, fireEvent } from "@testing-library/react";
-import "@testing-library/jest-dom";
+import { fireEvent, render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
 
 import { Link } from "../";
 
 // Mock console.warn to test warning messages
 const originalWarn = console.warn;
 beforeEach(() => {
-  console.warn = jest.fn();
+  console.warn = vi.fn();
 });
 
 afterEach(() => {
@@ -100,26 +100,6 @@ describe("Link Component", () => {
   });
 
   describe("Color Scheme", () => {
-    it("applies is-dark class for colorScheme dark", () => {
-      render(
-        <Link href="/" colorScheme="dark" data-testid="link">
-          Dark link
-        </Link>,
-      );
-      const link = screen.getByTestId("link");
-      expect(link).toHaveClass("is-dark");
-    });
-
-    it("applies is-light class for colorScheme light", () => {
-      render(
-        <Link href="/" colorScheme="light" data-testid="link">
-          Light link
-        </Link>,
-      );
-      const link = screen.getByTestId("link");
-      expect(link).toHaveClass("is-light");
-    });
-
     it("applies underline class when isUnderline is true", () => {
       render(
         <Link href="/" isUnderline data-testid="link">
@@ -162,8 +142,8 @@ describe("Link Component", () => {
     });
 
     it("forwards event handlers", () => {
-      const handleClick = jest.fn();
-      const handleMouseEnter = jest.fn();
+      const handleClick = vi.fn();
+      const handleMouseEnter = vi.fn();
 
       render(
         <Link
@@ -262,7 +242,7 @@ describe("Link Component", () => {
     });
 
     it("supports keyboard navigation", () => {
-      const handleClick = jest.fn();
+      const handleClick = vi.fn();
 
       render(
         <Link href="/" onClick={handleClick} data-testid="link">

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

@@ -1,38 +1,38 @@
-@use '../../../styles/tokens/base';
-@use '../../../styles/tokens/space';
-@use '../../../styles/tokens/color';
+@use "../../../styles/tokens/base";
+@use "../../../styles/tokens/space";
+@use "../../../styles/tokens/color";
 
 $spacing: (
-  'default': space.get(),
-  'small': space.get('small'),
+  "default": space.get(),
+  "small": space.get("small"),
 );
 
 $enclosed-spacing: space.get();
 
-$border: 2px solid;
+$border: 1px solid;
 
 $color-palette: (
   default: (
     background-color: var(--color-background-primary),
-    border-color: var(--color-border-subtle),
+    border-color: var(--color-border-strong),
   ),
 
   gray: (
     background-color: var(--color-surface-subtle),
-    border-color: var(--color-border-subtle),
+    border-color: var(--color-border-strong),
   ),
 );
 
 $control-states: (
-  'default': (
+  "default": (
     font-weight: bold,
     color: var(--color-text-primary),
   ),
-  'hover': (
+  "hover": (
     color: var(--color-surface-secondary),
     text-decoration: none,
   ),
-  'focus': (
+  "focus": (
     outline: base.$focus-outline,
-  )
+  ),
 );

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

@@ -1,13 +1,13 @@
 @use "sass:map";
-@use '../../../styles/tokens/space';
-@use '../../../styles/tools/generate';
-@use '../../../styles/typography/mixins' as typoMixins;
-@use './config';
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/generate";
+@use "../../../styles/typography/mixins" as typoMixins;
+@use "./config";
 
 @mixin list-base($border: config.$border) {
   @include typoMixins.list-unstyled;
 
-  margin-bottom: space.get();
+  margin-bottom: space.get("large");
 
   > * {
     border-top: $border;
@@ -52,6 +52,13 @@
 @mixin enclosed-item($spacing: config.$enclosed-spacing) {
   padding-left: $spacing;
   padding-right: $spacing;
+
+  &:first-child {
+    border-top-width: 0;
+  }
+  &:last-child {
+    border-bottom-width: 0;
+  }
 }
 
 @mixin control($config: config.$control-states) {
@@ -60,18 +67,18 @@
   width: 100%;
   text-align: left;
 
-  @include generate.css-map($config, 'default');
+  @include generate.css-map($config, "default");
 
   &:hover {
-    @include generate.css-map($config, 'hover');
+    @include generate.css-map($config, "hover");
   }
 
   &:focus {
-    @include generate.css-map($config, 'hover');
+    @include generate.css-map($config, "hover");
   }
 
   &::before {
-    content: '';
+    content: "";
     position: absolute;
     top: 0;
     left: 0;

package/src/components/List/tests/{ClickableControl.unit.test.js → 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.js → List.conformance.test.jsx}

@@ -1,18 +1,17 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { axe } from 'jest-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

@@ -0,0 +1,103 @@
+import { render } from "@testing-library/react";
+
+import { ListItem } from "../ListItem";
+
+const controlProps1 = {
+  className: "test-class",
+};
+const controlProps2 = {
+  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", () => {
+      const { getByTestId } = render(
+        <ListItem data-testid="test-id">test-child</ListItem>,
+      );
+      expect(getByTestId("test-id")).toHaveClass("list__item");
+    });
+  });
+  describe("passed props", () => {
+    it("renders children", () => {
+      const { getByText } = render(
+        <ListItem data-testid="test-id">test-child</ListItem>,
+      );
+      expect(getByText("test-child")).toBeInTheDocument();
+    });
+    it("has additional class when className is set", () => {
+      const { getByTestId } = render(
+        <ListItem data-testid="test-id" className="test-class">
+          test-child
+        </ListItem>,
+      );
+      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", () => {
+      const { getByRole } = render(
+        <ListItem data-testid="test-id" controlProps={controlProps1}>
+          test-child
+        </ListItem>,
+      );
+      expect(getByRole("button")).toBeInTheDocument();
+      expect(getByRole("button").getAttribute("type")).toBe("button");
+    });
+    it("renders button with class from controlProps.className when passed", () => {
+      const { getByRole } = render(
+        <ListItem data-testid="test-id" controlProps={controlProps1}>
+          test-child
+        </ListItem>,
+      );
+      expect(getByRole("button")).toBeInTheDocument();
+      expect(getByRole("button")).toHaveClass("test-class");
+    });
+    it("renders button with class from controlProps.className when passed", () => {
+      const { getByRole } = render(
+        <ListItem data-testid="test-id" controlProps={controlProps1}>
+          test-child
+        </ListItem>,
+      );
+      expect(getByRole("button")).toBeInTheDocument();
+      expect(getByRole("button")).toHaveClass("test-class");
+    });
+    it("children are rendered inside button element when button is rendered", () => {
+      const { getByRole } = render(
+        <ListItem data-testid="test-id" controlProps={controlProps1}>
+          test-child
+        </ListItem>,
+      );
+      expect(getByRole("button")).toBeInTheDocument();
+      expect(getByRole("button").textContent).toBe("test-child");
+    });
+    it("renders anchor without type when controlProps with href is passed", () => {
+      const { getByRole } = render(
+        <ListItem data-testid="test-id" controlProps={controlProps2}>
+          test-child
+        </ListItem>,
+      );
+      expect(getByRole("link")).toBeInTheDocument();
+      expect(getByRole("link").getAttribute("type")).toBeFalsy();
+    });
+    it("renders anchor with class from controlProps.className when passed", () => {
+      const { getByRole } = render(
+        <ListItem data-testid="test-id" controlProps={controlProps2}>
+          test-child
+        </ListItem>,
+      );
+      expect(getByRole("link")).toBeInTheDocument();
+      expect(getByRole("link")).toHaveClass("test-class");
+    });
+    it("children are rendered inside anchor element when anchor is rendered", () => {
+      const { getByRole } = render(
+        <ListItem data-testid="test-id" controlProps={controlProps2}>
+          test-child
+        </ListItem>,
+      );
+      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";
 
@@ -44,16 +44,8 @@ const Loader: React.FC<LoaderProps> = ({
 
   return (
     <div className={classes} {...other}>
-      <div
-        className={cx(`${CLASS_ROOT}__body`, {
-          [`${CLASS_ROOT}__body--inverse`]: colour !== "default",
-        })}
-      >
-        <div
-          className={cx(`${CLASS_ROOT}__line`, {
-            [`${CLASS_ROOT}__line--inverse`]: colour !== "default",
-          })}
-        />
+      <div className={`${CLASS_ROOT}__body`}>
+        <div className={`${CLASS_ROOT}__line`} />
       </div>
       {messages && (
         <div

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 {
@@ -30,7 +31,11 @@
 @mixin body-base {
   flex: 0 0 auto;
   overflow: hidden;
-  background-color: var(--color-icon-brand);
+  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 {
@@ -12,8 +13,8 @@
         @include mixins.size(large);
       }
 
-      &--inverse,
-      .bg-orange & {
+      .surface-secondary &,
+      .surface-tertiary & {
         @include mixins.color-inverse();
       }
     }
@@ -21,8 +22,8 @@
     &__line {
       @include mixins.line-base;
 
-      &--inverse,
-      .bg-orange & {
+      .surface-secondary &,
+      .surface-tertiary & {
         @include mixins.line-color-inverse();
       }
     }
@@ -35,4 +36,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.js → Loader.conformance.test.jsx}

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