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

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

@@ -33,8 +33,9 @@
   z-index: config.$overlay-z-index;
   opacity: 0;
   transform: scale(1.1, 1.1);
-  transition: opacity config.$overlay-e,
-  transform config.$overlay-e;
+  transition:
+    opacity config.$overlay-e,
+    transform config.$overlay-e;
   backface-visibility: hidden;
 }
 
@@ -96,6 +97,10 @@
   .divider {
     padding: 0;
   }
+
+  &:has(.divider) {
+    padding-bottom: 0;
+  }
 }
 
 @mixin close {
@@ -205,7 +210,7 @@
 
         @at-root {
           .modal__body--colorful + .modal__footer {
-            padding: $space !important;
+            padding: $space;
           }
         }
       }
@@ -214,11 +219,17 @@
 }
 
 @mixin sticky-footer() {
+  z-index: 1;
+
   @media screen and (min-height: 500px) {
     position: sticky;
     bottom: 0;
     background-color: var(--color-surface-primary);
   }
+
+  &.modal__footer--no-spacing {
+    padding: 0 !important;
+  }
 }
 
 @mixin modal-product-header($spacing) {
@@ -248,7 +259,9 @@
     flex-direction: column;
   }
 
-  @each $breakpoint, $value in map.get(config.$spacing-product-footer, "default") {
+  @each $breakpoint,
+    $value in map.get(config.$spacing-product-footer, "default")
+  {
     @include breakpoint.get($breakpoint) {
       padding: $value;
     }
@@ -283,59 +296,11 @@
   object-fit: cover;
   object-position: left;
   max-width: convert.to-rem(125px);
-}
+  width: auto;
+  height: auto;
+  aspect-ratio: auto;
 
-@mixin modal-product-body-subtitle-section() {
-  padding: convert.to-rem(15px) space.get();
-
-  @include breakpoint.get('md') {
-    padding: convert.to-rem(20px) space.get('large');
+  @include breakpoint.get("sm", "down") {
+    max-width: convert.to-rem(62.5px);
   }
 }
-
-@mixin modal-product-body-list-section() {
-  padding: 0 space.get();
-
-  @include breakpoint.get('md') {
-    padding: space.get('small') space.get('large');
-  }
-
-  ul {
-    margin-bottom: 0;
-    padding: space.get('small') space.get() space.get('small') convert.to-rem(18px);
-    @include breakpoint.get('md') {
-      padding-right: 0;
-    }
-  }
-
-  li {
-    margin-bottom: convert.to-rem(15px);
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-}
-
-@mixin modal-product-body-accordion-section() {
-  padding: convert.to-rem(15px) space.get();
-
-  .accordion__body {
-    padding: 0 space.get() convert.to-rem(15px) space.get('small');
-    margin-bottom: 0;
-  }
-
-  @include breakpoint.get('md') {
-    padding: space.get('small') space.get('large');
-
-    .accordion__body {
-      padding: 0 space.get('large') convert.to-rem(15px) space.get('small');
-    }
-  }
-}
-
-@mixin modal-product-body-section-title() {
-  margin-bottom: 0 !important;
-
-  padding: space.get('small') 0;
-}

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

@@ -106,6 +106,7 @@
     &-header {
       display: flex;
       justify-content: space-between;
+      align-items: flex-start;
 
       > img {
         @include mixins.modal-product-image;
@@ -132,20 +133,4 @@
   .modal__product-footer-button {
     @include mixins.modal-product-footer-button();
   }
-
-  .modal__product-body-subtitle-section {
-    @include mixins.modal-product-body-subtitle-section();
-  }
-
-  .modal__product-body-list-section {
-    @include mixins.modal-product-body-list-section();
-  }
-
-  .modal__product-body-accordion-section {
-    @include mixins.modal-product-body-accordion-section();
-  }
-
-  .modal__product-body-section-title {
-    @include mixins.modal-product-body-section-title();
-  }
 }

package/src/components/Modal/tests/{Modal.conformance.test.js → Modal.conformance.test.jsx}

@@ -1,6 +1,5 @@
-import React from "react";
-import { render, fireEvent } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { fireEvent, render } from "@testing-library/react";
+import { axe } from "vitest-axe";
 
 import { Button } from "../../Button";
 import { Modal, ModalProductHeader } from "../";
@@ -40,7 +39,7 @@ it("is valid html", () => {
 });
 
 it("is accessible", async () => {
-  window.scrollTo = jest.fn();
+  window.scrollTo = vi.fn();
   const { container } = render(example);
 
   fireEvent.click(container.querySelector('[data-test-id="open-button"]'));

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@testing-library/react";
 
 import { Modal } from "../Modal";
@@ -53,28 +52,6 @@ describe("rendering Modal", () => {
       expect(child[0]).toHaveClass("modal__header");
     });
   });
-  describe("colorScheme prop", () => {
-    it("should have is-dark class when colorScheme is 'dark'", () => {
-      const { getByTestId } = render(
-        <div id="root">
-          <Modal id="modal-dark" data-testid="modal-dark" colorScheme="dark" />
-        </div>,
-      );
-      expect(getByTestId("modal-dark")).toHaveClass("is-dark");
-    });
-    it("should have is-light class when colorScheme is 'light'", () => {
-      const { getByTestId } = render(
-        <div id="root">
-          <Modal
-            id="modal-light"
-            data-testid="modal-light"
-            colorScheme="light"
-          />
-        </div>,
-      );
-      expect(getByTestId("modal-light")).toHaveClass("is-light");
-    });
-  });
   describe("disableHeaderSpacing prop", () => {
     it("should have modal__header--no-spacing class when disableHeaderSpacing is true", () => {
       const { getByTestId } = render(
@@ -111,41 +88,4 @@ describe("rendering Modal", () => {
       expect(child[0]).toHaveClass("modal__footer--no-spacing");
     });
   });
-  describe("disableBodySpacing prop", () => {
-    it("should have modal__body--no-spacing class when disableBodySpacing is true", () => {
-      const { getByTestId } = render(
-        <div id="root">
-          <Modal
-            id="modal-no-body-spacing"
-            data-testid="modal-no-body-spacing"
-            disableBodySpacing
-          />
-        </div>,
-      );
-      const child = getByTestId("modal-no-body-spacing").getElementsByClassName(
-        "modal__body--no-spacing",
-      );
-      expect(child.length).toBe(1);
-      expect(child[0]).toHaveClass("modal__body--no-spacing");
-    });
-
-    it("should not apply with-top-padding class on body when custom header renderer is present with disableBodySpacing prop", () => {
-      const { getByTestId } = render(
-        <div id="root">
-          <Modal
-            id="modal-no-body-spacing"
-            data-testid="modal-no-body-spacing"
-            disableBodySpacing
-            renderHeader={() => <div>Custom Header</div>}
-          />
-        </div>,
-      );
-      const child = getByTestId("modal-no-body-spacing").getElementsByClassName(
-        "modal__body",
-      );
-      expect(child.length).toBe(1);
-      expect(child[0]).not.toHaveClass("with-top-padding");
-      expect(child[0]).toHaveClass("modal__body--no-spacing");
-    });
-  });
 });

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

@@ -15,27 +15,36 @@ describe("rendering ModalBody", () => {
       const { getByText } = render(<ModalBody>test</ModalBody>);
       expect(getByText("test")).toBeInTheDocument();
     });
+
     [
-      "white",
-      "gray",
-      "orange",
-      "orange-dark",
-      "black",
-      "blue",
-      "green",
-      "pink",
-      "violet",
-      "yellow",
+      "background-primary",
+      "background-secondary",
+      "background-accent",
+      "surface-primary",
+      "surface-secondary",
+      "surface-tertiary",
+      "surface-subtle",
+      "fill-accent1",
+      "fill-accent2",
     ].map((color) => {
-      it(`has classes bg-${color} and modal__body--colorful when color is set to ${color}`, () => {
+      it(`has class ${color} and modal__body--colorful when color is set to ${color}`, () => {
         const { getByTestId } = render(
           <ModalBody color={color} data-testid="test-id" />,
         );
-        expect(getByTestId("test-id")).toHaveClass(`bg-${color}`);
+        expect(getByTestId("test-id")).toHaveClass(color);
         expect(getByTestId("test-id")).toHaveClass("modal__body--colorful");
       });
     });
 
+    it("has classes background-contrast and text-inverse when color is set to background-contrast", () => {
+      const { getByTestId } = render(
+        <ModalBody color="background-contrast" data-testid="test-id" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("background-contrast");
+      expect(getByTestId("test-id")).toHaveClass("text-inverse");
+      expect(getByTestId("test-id")).toHaveClass("modal__body--colorful");
+    });
+
     it("applies disableSpacing prop", () => {
       const { getByTestId } = render(
         <ModalBody disableSpacing data-testid="test-id" />,

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@testing-library/react";
 
 import { ModalProductHeader } from "../ModalProductHeader";
@@ -70,4 +69,16 @@ describe("rendering ModalProductHeader", () => {
       container.querySelector(".modal__product-content"),
     ).toHaveTextContent("Product Header");
   });
+
+  it("has titleId attribute when titleId prop is provided", () => {
+    const { container } = render(
+      <ModalProductHeader titleId="test-title-id">
+        Product Header
+      </ModalProductHeader>,
+    );
+    expect(container.querySelector(".modal__product-content")).toHaveAttribute(
+      "id",
+      "test-title-id",
+    );
+  });
 });

package/src/components/Modal/tests/{ModalTitle.unit.test.js → 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 */
@@ -19,8 +18,6 @@ interface PaginationItemProps {
 interface PaginationProps {
   /** Collapsed version */
   isCompact?: boolean;
-  /** Dark theme */
-  colorScheme?: "light" | "dark";
   /** All pagination items - buttons & numbers */
   items: PaginationItemProps[];
   /** Accessibility label */
@@ -37,18 +34,10 @@ export const Pagination: React.FC<PaginationProps> = ({
   className,
   label,
   isCompact,
-  colorScheme,
   items,
   ...other
 }) => {
-  const classes = cx(
-    CLASS_ROOT,
-    {
-      "is-dark": colorScheme === "dark",
-      "is-light": colorScheme === "light",
-    },
-    className,
-  );
+  const classes = cx(CLASS_ROOT, className);
 
   const activeIndex = useMemo(
     () => items.findIndex(({ isActive }) => isActive),

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

@@ -8,33 +8,35 @@
 @mixin base() {
   @include typoMixins.list-unstyled();
 
+  gap: convert.to-rem(7px);
   display: flex;
   max-width: none;
-  margin-bottom: space.get();
+  margin-bottom: space.get("large");
 }
 
 @mixin separator() {
   font-weight: bold;
   height: 50%;
   align-self: center;
+  margin: 0 convert.to-rem(10px);
 }
 
 @mixin item() {
-  margin-right: space.get("small");
   margin-bottom: 0;
 }
 
-@mixin last-item() {
-  margin-right: 0;
-}
-
 @mixin link() {
-  border-radius: 100% !important;
+  border-radius: convert.to-rem(5px);
   margin-bottom: 0;
   background-color: var(--color-background-primary);
+
   &:hover {
     background-color: var(--color-background-contrast);
   }
+
+  &:active {
+    background-color: var(--color-surface-tertiary);
+  }
 }
 
 @mixin link-active() {

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

@@ -13,10 +13,6 @@
       @include mixins.item;
     }
 
-    &__item:last-child {
-      @include mixins.last-item;
-    }
-
     &__link {
       @include mixins.link;
 

package/src/components/Pagination/tests/Item.unit.test.jsx

@@ -0,0 +1,95 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { render } from "@testing-library/react";
+
+import { PaginationItem as Item } from "../PaginationItem.tsx";
+
+describe("rendering Item", () => {
+  describe("initial state", () => {
+    it("has default class pagination__item", () => {
+      const { container } = render(<Item />);
+      expect(container.querySelector("li")).toHaveClass("pagination__item");
+    });
+
+    it("has default class pagination__link", () => {
+      const { container } = render(<Item />);
+      expect(container.querySelector("a")).toHaveClass("pagination__link");
+    });
+
+    it("has default class btn", () => {
+      const { container } = render(<Item />);
+      expect(container.querySelector("a")).toHaveClass("btn");
+    });
+
+    it("has default class btn--square", () => {
+      const { container } = render(<Item />);
+      expect(container.querySelector("a")).toHaveClass("btn--square");
+    });
+  });
+
+  describe("passed props", () => {
+    it("passes other props", () => {
+      const { getByTestId } = render(<Item data-testid="test" />);
+      expect(getByTestId("test")).toBeInTheDocument();
+    });
+
+    it("has link role when href is set", () => {
+      const { getByRole } = render(<Item href="/" />);
+      expect(getByRole("link")).toBeInTheDocument();
+    });
+
+    it("list item has additional class when className is set", () => {
+      const { container } = render(<Item className="test-class" />);
+      expect(container.querySelector("li")).toHaveClass("test-class");
+    });
+
+    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",
+      );
+    });
+
+    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",
+      );
+    });
+
+    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();
+    });
+
+    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",
+      );
+    });
+
+    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",
+      );
+    });
+
+    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",
+      );
+    });
+
+    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",
+      );
+    });
+  });
+});

package/src/components/Pagination/tests/{Pagination.conformance.test.js → Pagination.conformance.test.jsx}

@@ -1,15 +1,14 @@
-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 { 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();
 });