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

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

@@ -73,16 +73,6 @@ describe("rendering Breadcrumbs", () => {
       );
     });
 
-    it('has class osk-breadcrumbs--dark when colorScheme="dark" is passed', () => {
-      const { container } = render(
-        <Breadcrumbs items={[]} colorScheme="dark" />,
-      );
-      expect(container.getElementsByClassName("osk-breadcrumbs").length).toBe(
-        1,
-      );
-      expect(container.getElementsByClassName("is-dark").length).toBe(1);
-    });
-
     it("combines multiple CSS classes correctly", () => {
       const { getByTestId } = render(
         <Breadcrumbs
@@ -104,12 +94,16 @@ describe("rendering Breadcrumbs", () => {
 
     itemsArr.map(({ url, text }, index) => {
       it(`renders BreadcrumbItem with text ${text} ${
-        url ? "inside anchor element with url " + url : ""
+        url && index !== itemsArr.length - 1
+          ? "inside anchor element with url " + url
+          : ""
       }`, () => {
         const { container } = render(<Breadcrumbs items={itemsArr} />);
         const listElements = container.querySelectorAll("li");
         expect(listElements[index].textContent).toBe(text);
-        if (url) {
+
+        // Only non-last items with URL should have anchors
+        if (url && index !== itemsArr.length - 1) {
           expect(listElements[index].children[0].getAttribute("href")).toBe(
             url,
           );
@@ -117,18 +111,18 @@ describe("rendering Breadcrumbs", () => {
       });
     });
 
-    it("if last item renders anchor element, this element has aria-current attribute set to 'page'", () => {
+    it("last item does not render as anchor element", () => {
       const items = [
         { url: "/test1", text: "test1-text" },
         { url: "/test2", text: "test2-text" },
         { url: "/test3", text: "test3-text" },
       ];
       const { container } = render(<Breadcrumbs items={items} />);
-      const anchors = container.querySelectorAll("a");
-      expect(anchors[anchors.length - 1]).toHaveAttribute(
-        "aria-current",
-        "page",
-      );
+      const listItems = container.querySelectorAll("li");
+      const lastItem = listItems[listItems.length - 1];
+
+      expect(lastItem).toHaveAttribute("aria-current", "page");
+      expect(lastItem.querySelector("a")).not.toBeInTheDocument();
     });
 
     it("marks last item as current page even without URL", () => {
@@ -167,6 +161,7 @@ describe("rendering Breadcrumbs", () => {
       const { container } = render(<Breadcrumbs items={complexItemsArr} />);
       const anchors = container.querySelectorAll("a");
 
+      // Only non-last items should have anchors (last item is current page, plain text)
       anchors.forEach((anchor) => {
         expect(anchor).toHaveClass("osk-breadcrumbs__link");
       });
@@ -187,7 +182,7 @@ describe("rendering Breadcrumbs", () => {
       expect(nav).toContainElement(ol);
     });
 
-    it('last item has aria-current="page" when it has URL', () => {
+    it('last item has aria-current="page" and is not an anchor', () => {
       const itemsWithLastUrl = [
         { url: "/home", text: "Domov" },
         { url: "/current", text: "Aktuálna stránka" },
@@ -196,9 +191,9 @@ describe("rendering Breadcrumbs", () => {
       const { container } = render(<Breadcrumbs items={itemsWithLastUrl} />);
       const listElements = container.querySelectorAll("li");
       const lastItem = listElements[listElements.length - 1];
-      const lastAnchor = lastItem.querySelector("a");
 
-      expect(lastAnchor).toHaveAttribute("aria-current", "page");
+      expect(lastItem).toHaveAttribute("aria-current", "page");
+      expect(lastItem.querySelector("a")).not.toBeInTheDocument();
     });
 
     it("last item without URL is still marked as current", () => {
@@ -229,8 +224,9 @@ describe("rendering Breadcrumbs", () => {
       const anchor = container.querySelector("a");
 
       expect(listItems).toHaveLength(1);
-      expect(anchor).toHaveAttribute("href", "/home");
-      expect(anchor).toHaveAttribute("aria-current", "page");
+      // Single item is the last (current) item, so no anchor
+      expect(anchor).not.toBeInTheDocument();
+      expect(listItems[0]).toHaveAttribute("aria-current", "page");
     });
 
     it("handles items with special characters in text", () => {

package/src/components/Button/Button.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 export type ButtonSize = "small" | "large";
 export type ButtonType = "primary" | "fill" | "ghost";
@@ -10,12 +10,12 @@ interface CommonProps {
   isActive?: boolean;
   isDefault?: boolean;
   isDisabled?: boolean;
-  colorScheme?: "dark" | "light";
   isSquare?: boolean;
   size?: ButtonSize;
   type?: ButtonType;
   className?: string;
   children?: React.ReactNode;
+  preserveWidth?: boolean;
 }
 
 type AnchorProps = CommonProps &
@@ -45,9 +45,7 @@ const Button = React.forwardRef<any, ButtonProps>((props, ref) => {
     htmlType = "button",
     href,
     isActive,
-    isDefault,
     isDisabled,
-    colorScheme,
     size,
     isSquare,
     type,
@@ -61,9 +59,7 @@ const Button = React.forwardRef<any, ButtonProps>((props, ref) => {
       [`${CLASS_ROOT}--square`]: isSquare,
       [`${CLASS_ROOT}--${size}`]: size,
       [`${CLASS_ROOT}--${type}`]: type,
-      [`${CLASS_ROOT}--default`]: isDefault,
-      "is-dark": colorScheme === "dark",
-      "is-light": colorScheme === "light",
+      [`${CLASS_ROOT}--preserve-width`]: props.preserveWidth,
       "is-active": isActive,
     },
     className,

package/src/components/Button/IconButton.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 import { Icon } from "../Icon";
 import { Button, ButtonSize } from "./Button";
@@ -54,9 +54,13 @@ const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
 
     return (
       <Button ref={ref} size={size} {...other}>
-        {iconPosition === "left" && <IconComponent className="btn__icon-left" />}
+        {iconPosition === "left" && (
+          <IconComponent className="btn__icon-left" />
+        )}
         {children}
-        {iconPosition === "right" && <IconComponent className="btn__icon-right" />}
+        {iconPosition === "right" && (
+          <IconComponent className="btn__icon-right" />
+        )}
       </Button>
     );
   },

package/src/components/Button/index.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { Button, ButtonProps } from "./Button";
 import { IconButton } from "./IconButton";
 
@@ -18,4 +16,4 @@ export const ButtonGhost = (props: ButtonProps) => (
 );
 ButtonGhost.displayName = "ButtonGhost";
 
-export { IconButton, Button };
+export { Button, IconButton };

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

@@ -1,4 +1,5 @@
 @use "../../../styles/tokens/space";
+@use "../../../styles/tokens/color";
 @use "../../../styles/tools/convert";
 
 $base: (
@@ -6,7 +7,6 @@ $base: (
     border: 2px solid transparent,
     font-size: convert.to-rem(18px),
     font-weight: bold,
-    line-height: normal,
     border-radius: convert.to-rem(5px),
   ),
   active: (
@@ -46,7 +46,7 @@ $variants: (
       border-color: transparent,
     ),
     active: (
-      color: var(--color-text-inverse),
+      color: color.$white,
       background-color: var(--color-fill-tertiary),
       border-color: transparent,
     ),
@@ -58,7 +58,7 @@ $variants: (
   ),
   "primary": (
     default: (
-      color: var(--color-text-inverse),
+      color: color.$white,
       background-color: var(--color-fill-tertiary),
       border-color: transparent,
     ),
@@ -73,7 +73,7 @@ $variants: (
       border-color: var(--color-border-contrast),
     ),
     disabled: (
-      color: var(--color-text-inverse),
+      color: color.$white,
       background-color: var(--color-fill-disabled),
       border-color: var(--color-fill-disabled),
     ),
@@ -90,7 +90,7 @@ $variants: (
       border-color: var(--color-border-contrast),
     ),
     active: (
-      color: var(--color-text-inverse),
+      color: color.$white,
       background-color: var(--color-fill-tertiary),
       border-color: transparent,
     ),

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

@@ -17,7 +17,7 @@
   justify-content: center;
   text-align: center;
   text-decoration: none;
-  vertical-align: baseline;
+  vertical-align: super;
   cursor: pointer;
 
   @media (hover: hover) {
@@ -47,7 +47,7 @@
 
 // Layout rules. Adds space between adjacent buttons and applies vertical spacing after a button.
 @mixin layout {
-  margin-bottom: space.get();
+  margin-bottom: space.get("large");
 
   &:not(:last-of-type) {
     margin-right: space.get("small");
@@ -153,3 +153,8 @@
     cursor: not-allowed;
   }
 }
+
+@mixin preserve-width {
+  width: initial !important;
+  min-width: initial !important;
+}

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

@@ -43,4 +43,8 @@
   .btn--large .icon--large {
     @include mixins.large-button-large-icon-size-fix();
   }
+
+  .btn--preserve-width {
+    @include mixins.preserve-width;
+  }
 }

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

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

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

@@ -1,8 +1,7 @@
 /**
- * @jest-environment jsdom
+ * @vitest-environment jsdom
  */
 
-import React from "react";
 import { render } from "@testing-library/react";
 
 import { Button } from "../";
@@ -69,16 +68,6 @@ describe("rendering", () => {
       expect(getByText("Button")).toHaveClass("is-active");
     });
 
-    it("has is-dark class when colorScheme is dark", () => {
-      const { getByText } = render(<Button colorScheme="dark">Button</Button>);
-      expect(getByText("Button")).toHaveClass("is-dark");
-    });
-
-    it("has is-light class when colorScheme is light", () => {
-      const { getByText } = render(<Button colorScheme="light">Button</Button>);
-      expect(getByText("Button")).toHaveClass("is-light");
-    });
-
     it("has btn--square class when squared", () => {
       const { getByText } = render(<Button isSquare>Button</Button>);
       expect(getByText("Button")).toHaveClass("btn--square");

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

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

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

@@ -9,31 +9,26 @@
 ) {
   display: flex;
   flex-flow: row wrap;
-  max-width: calc(100% - #{$spacing});
-  margin: ($spacing * -1) ($spacing * -1) space.get() 0;
+  gap: $spacing;
+  margin: 0 0 space.get("large") 0;
 
   #{$button-selector},
-  #{$button-selector}:last-child,
   #{$link-selector},
-  #{$link-selector}:last-child,
-  button#{$link-selector},
-  button#{$link-selector}:last-child {
-    margin: $spacing $spacing 0 0;
+  button#{$link-selector} {
+    margin: 0;
   }
 }
 
 @mixin stack-on-xs($spacing: config.$spacing, $button-selector: ".btn") {
   @include breakpoint.get("xs", "down") {
     flex-flow: column;
+    gap: $spacing;
     max-width: 100%;
     margin: 0 0 $spacing 0;
 
-    #{$button-selector}:not(:last-child),
-    #{$button-selector}:last-child,
-    button.link:not(:last-child),
-    button.link:last-child {
-      margin-right: 0;
-      margin-bottom: 0;
+    #{$button-selector},
+    button.link {
+      margin: 0;
     }
   }
 }

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

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

package/src/components/Card/Card.tsx

@@ -1,36 +1,39 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 export const cardColors = [
-  "white",
-  "black",
-  "orange",
-  "gray",
-  "gray-lighter",
-  "blue",
-  "green",
-  "pink",
-  "yellow",
-  "violet",
-  "accent1-blog",
-  "accent2-blog",
-  "accent",
+  "background-primary",
+  "background-secondary",
+  "background-contrast",
+  "background-accent",
+  "background-accent1-blog",
+  "background-accent2-blog",
+  "fill-subtle",
+  "fill-accent1",
+  "fill-accent2",
+  "fill-accent3",
+  "fill-accent4",
+  "fill-accent5",
 ] as const;
 export type CardColor = (typeof cardColors)[number];
 
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Custom background color */
   color?: CardColor;
+  noBorder?: boolean;
 }
 
 export const CLASS_ROOT = "card";
 
 const Card = React.forwardRef<HTMLDivElement, CardProps>(
-  ({ className, color = "white", ...other }, ref) => {
+  ({ className, color = "background-primary", noBorder, ...other }, ref) => {
     const classes = cx(
       CLASS_ROOT,
       {
-        [`bg-${color}`]: color !== "white",
+        [color]:
+          color !== "background-primary" && color !== "background-contrast",
+        [`${color} text-inverse`]: color === "background-contrast",
+        [`${CLASS_ROOT}--no-border`]: noBorder,
       },
       className,
     );

package/src/components/Card/CardProductHeader.tsx

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

package/src/components/Card/CardSection.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 import { cardColors } from "./Card";
 
 export type CardSectionColor = (typeof cardColors)[number];
@@ -20,7 +20,11 @@ const CardSection = React.forwardRef<HTMLDivElement, CardSectionProps>(
     const classes = cx(
       CLASS_ROOT,
       {
-        [`bg-${color}`]: color,
+        [String(color)]:
+          color &&
+          color !== "background-primary" &&
+          color !== "background-contrast",
+        [`${color} text-inverse`]: color === "background-contrast",
         [`${CLASS_ROOT}--fill`]: isFilling,
         [`${CLASS_ROOT}--space-small`]: space === "small",
       },

package/src/components/Card/index.ts

@@ -1,3 +1,4 @@
+export type { CardColor } from "./Card";
 export { Card } from "./Card";
-export { CardSection } from "./CardSection";
 export { CardProductHeader } from "./CardProductHeader";
+export { CardSection } from "./CardSection";

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

@@ -4,9 +4,9 @@
 
 $card-base: (
   background-color: var(--color-surface-primary),
-  margin-bottom: space.get(),
+  margin-bottom: space.get("large"),
   border-radius: convert.to-rem(10px),
-  border: 1px solid var(--color-border-strong),
+  border: 1px solid var(--color-border-subtle),
   overflow: hidden,
 );
 

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

@@ -38,13 +38,14 @@
 @mixin card-section($spacing) {
   @include card-spacing($spacing);
 
-  .btn,
-  button {
-    display: block;
-    width: 100%;
+  > {
+    .btn,
+    button {
+      width: 100%;
 
-    &:not(:last-child) {
-      margin-bottom: space.get("small");
+      &:not(:last-child) {
+        margin-bottom: space.get("small");
+      }
     }
   }
 

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

@@ -35,5 +35,9 @@
     &__product-header--space-small &__product-content {
       @include mixins.card-product-header(space.get());
     }
+
+    &--no-border {
+      border: none;
+    }
   }
 }

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

@@ -1,7 +1,7 @@
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from "vitest-axe";
 
-import { Card, CardSection, CardProductHeader } from "../";
+import { Card, CardProductHeader, CardSection } from "../";
 
 const example = (
   <>

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

@@ -0,0 +1,81 @@
+import { render } from "@testing-library/react";
+
+import { Card } from "../Card";
+
+describe("rendering Card", () => {
+  describe("initial state", () => {
+    it("has default class card", () => {
+      const { getByTestId } = render(<Card data-testid="test-id" />);
+      expect(getByTestId("test-id")).toHaveClass("card");
+    });
+  });
+
+  describe("passed props", () => {
+    it("renders children", () => {
+      const { getByText } = render(<Card>test</Card>);
+      expect(getByText("test")).toBeInTheDocument();
+    });
+
+    it("has additional class when className is set", () => {
+      const { getByTestId } = render(
+        <Card data-testid="test-id" className="test-class" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("card");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+
+    // Test semantic color classes (excluding background-primary and background-contrast)
+    [
+      "background-secondary",
+      "background-accent",
+      "background-accent1-blog",
+      "background-accent2-blog",
+      "fill-subtle",
+      "fill-accent1",
+      "fill-accent2",
+      "fill-accent3",
+      "fill-accent4",
+      "fill-accent5",
+    ].map((color) => {
+      it(`has ${color} class when color is ${color}`, () => {
+        const { getByTestId } = render(
+          <Card data-testid="test-id" color={color} />,
+        );
+        expect(getByTestId("test-id")).toHaveClass(color);
+      });
+    });
+
+    it(`has background-contrast and text-inverse classes when color is background-contrast`, () => {
+      const { getByTestId } = render(
+        <Card data-testid="test-id" color="background-contrast" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("background-contrast");
+      expect(getByTestId("test-id")).toHaveClass("text-inverse");
+    });
+
+    it(`doesn't have background-primary class when color is background-primary (default)`, () => {
+      const { getByTestId } = render(
+        <Card data-testid="test-id" color="background-primary" />,
+      );
+      expect(getByTestId("test-id")).not.toHaveClass("background-primary");
+    });
+
+    it(`doesn't have any color class when no color is specified (defaults to background-primary)`, () => {
+      const { getByTestId } = render(<Card data-testid="test-id" />);
+      expect(getByTestId("test-id")).not.toHaveClass("background-primary");
+      expect(getByTestId("test-id")).toHaveClass("card");
+    });
+
+    it(`has card--no-border class when noBorder is true`, () => {
+      const { getByTestId } = render(<Card data-testid="test-id" noBorder />);
+      expect(getByTestId("test-id")).toHaveClass("card--no-border");
+    });
+
+    it(`doesn't have card--no-border class when noBorder is false`, () => {
+      const { getByTestId } = render(
+        <Card data-testid="test-id" noBorder={false} />,
+      );
+      expect(getByTestId("test-id")).not.toHaveClass("card--no-border");
+    });
+  });
+});

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

@@ -42,7 +42,7 @@ describe("rendering CardProductHeader", () => {
       "card__product-header--space-small",
     );
   });
-  
+
   it("does not have card__product-header--space-small class when space is not set", () => {
     const { getByTestId } = render(<CardProductHeader data-testid="test-id" />);
     expect(getByTestId("test-id")).not.toHaveClass(

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

@@ -24,15 +24,48 @@ describe("rendering CardSection", () => {
       expect(getByTestId("test-id")).toHaveClass("test-class");
     });
 
-    ["white", "black", "orange"].map((color) => {
-      it(`bg-${color} class when color is ${color}`, () => {
+    // Test semantic color classes (excluding background-primary and background-contrast)
+    [
+      "background-secondary",
+      "background-accent",
+      "background-accent1-blog",
+      "background-accent2-blog",
+      "fill-subtle",
+      "fill-accent1",
+      "fill-accent2",
+      "fill-accent3",
+      "fill-accent4",
+      "fill-accent5",
+    ].map((color) => {
+      it(`has ${color} class when color is ${color}`, () => {
         const { getByTestId } = render(
           <CardSection data-testid="test-id" color={color} />,
         );
-        expect(getByTestId("test-id")).toHaveClass(`bg-${color}`);
+        expect(getByTestId("test-id")).toHaveClass(color);
       });
     });
 
+    it(`has background-contrast and text-inverse classes when color is background-contrast`, () => {
+      const { getByTestId } = render(
+        <CardSection data-testid="test-id" color="background-contrast" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("background-contrast");
+      expect(getByTestId("test-id")).toHaveClass("text-inverse");
+    });
+
+    it(`doesn't have background-primary class when color is background-primary`, () => {
+      const { getByTestId } = render(
+        <CardSection data-testid="test-id" color="background-primary" />,
+      );
+      expect(getByTestId("test-id")).not.toHaveClass("background-primary");
+    });
+
+    it(`doesn't have any color class when no color is specified`, () => {
+      const { getByTestId } = render(<CardSection data-testid="test-id" />);
+      expect(getByTestId("test-id")).toHaveClass("card__section");
+      expect(getByTestId("test-id")).not.toHaveClass("background-primary");
+    });
+
     it(`has card__section--fill class when isFilling is passed`, () => {
       const { getByTestId } = render(
         <CardSection data-testid="test-id" isFilling />,