@orangesk/orange-design-system 2.0.0-beta.0 → 2.0.0-beta.10

package/src/components/AnchorNavigation/tests/AnchorNavigation.conformance.test.js

@@ -0,0 +1,67 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+import { AnchorNavigation } from "../";
+
+const basicItems = [
+  { label: "Key Features", href: "#features", isActive: true },
+  { label: "Pricing", href: "#pricing" },
+  { label: "Getting Started", href: "#getting-started" },
+  { label: "Contact", href: "#contact" },
+];
+
+const example = (
+  <div id="root">
+    {/* Basic usage */}
+    <AnchorNavigation items={basicItems} aria-label="Basic navigation" />
+
+    {/* With color scheme */}
+    <AnchorNavigation
+      items={basicItems}
+      colorScheme="light"
+      aria-label="Light navigation"
+    />
+
+    {/* With additional content */}
+    <AnchorNavigation
+      items={basicItems}
+      colorScheme="dark"
+      aria-label="Dark navigation with content"
+    >
+      <div className="bold">
+        <div className="align-sm-right">2 €</div>
+        <div className="reset-font-weight">No commitment</div>
+      </div>
+      <button type="button">Get Started</button>
+    </AnchorNavigation>
+
+    {/* Multiple items */}
+    <AnchorNavigation
+      items={[
+        { label: "Overview", href: "#overview", isActive: true },
+        { label: "Features", href: "#features" },
+        { label: "Documentation", href: "#docs" },
+        { label: "API Reference", href: "#api" },
+        { label: "Examples", href: "#examples" },
+        { label: "Support", href: "#support" },
+      ]}
+      colorScheme="light"
+      aria-label="Extended navigation"
+    />
+  </div>
+);
+
+it("is valid html", () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate({
+    rules: {
+      "no-inline-style": "off",
+      "attribute-boolean-style": "off",
+    },
+  });
+});
+
+it("is accessible", async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});

package/src/components/AnchorNavigation/tests/AnchorNavigation.unit.test.js

@@ -0,0 +1,163 @@
+import { render } from "@testing-library/react";
+
+import { AnchorNavigation } from "../AnchorNavigation";
+
+const basicItems = [
+  { label: "Key Features", href: "#features", isActive: true },
+  { label: "Pricing", href: "#pricing" },
+  { label: "Getting Started", href: "#getting-started" },
+  { label: "Contact", href: "#contact" },
+];
+
+const moreItems = [
+  { label: "Overview", href: "#overview", isActive: true },
+  { label: "Features", href: "#features" },
+  { label: "Documentation", href: "#docs" },
+  { label: "API Reference", href: "#api" },
+  { label: "Examples", href: "#examples" },
+  { label: "Support", href: "#support" },
+];
+
+describe("rendering AnchorNavigation", () => {
+  describe("initial state", () => {
+    it("has default class anchor-navigation", () => {
+      const { getByTestId } = render(
+        <AnchorNavigation data-testid="test-id" items={basicItems} />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("anchor-navigation");
+    });
+
+    it("has data-anchor-navigation attribute", () => {
+      const { getByTestId } = render(
+        <AnchorNavigation data-testid="test-id" items={basicItems} />,
+      );
+      expect(getByTestId("test-id")).toHaveAttribute("data-anchor-navigation");
+    });
+
+    it("renders container with anchor-navigation__content class", () => {
+      const { container } = render(<AnchorNavigation items={basicItems} />);
+      expect(
+        container.querySelector(".anchor-navigation__content"),
+      ).toBeInTheDocument();
+    });
+
+    it("renders grid with correct classes", () => {
+      const { container } = render(<AnchorNavigation items={basicItems} />);
+      const grid = container.querySelector(".anchor-navigation__content-left");
+      expect(grid).toBeInTheDocument();
+      expect(grid).toHaveClass("list-inline");
+      expect(grid).toHaveClass("horizontal-scroll");
+      expect(grid).toHaveClass("mb-none");
+    });
+  });
+
+  describe("passed props", () => {
+    it("renders all navigation items", () => {
+      const { getByText } = render(<AnchorNavigation items={basicItems} />);
+
+      expect(getByText("Key Features")).toBeInTheDocument();
+      expect(getByText("Pricing")).toBeInTheDocument();
+      expect(getByText("Getting Started")).toBeInTheDocument();
+      expect(getByText("Contact")).toBeInTheDocument();
+    });
+
+    it("renders navigation items as links with correct href", () => {
+      const { container } = render(<AnchorNavigation items={basicItems} />);
+
+      const featuresLink = container.querySelector('a[href="#features"]');
+      const pricingLink = container.querySelector('a[href="#pricing"]');
+
+      expect(featuresLink).toBeInTheDocument();
+      expect(featuresLink).toHaveTextContent("Key Features");
+      expect(pricingLink).toBeInTheDocument();
+      expect(pricingLink).toHaveTextContent("Pricing");
+    });
+
+    it("applies active class to items with isActive prop", () => {
+      const { container } = render(<AnchorNavigation items={basicItems} />);
+
+      const activeLink = container.querySelector('a[href="#features"]');
+      const inactiveLink = container.querySelector('a[href="#pricing"]');
+
+      expect(activeLink).toHaveClass("is-active");
+      expect(inactiveLink).not.toHaveClass("is-active");
+    });
+
+    it("applies anchor-navigation__item class to all links", () => {
+      const { container } = render(<AnchorNavigation items={basicItems} />);
+
+      const links = container.querySelectorAll(".anchor-navigation__item");
+      expect(links).toHaveLength(basicItems.length);
+    });
+
+    it("renders multiple items correctly", () => {
+      const { getByText } = render(<AnchorNavigation items={moreItems} />);
+
+      expect(getByText("Overview")).toBeInTheDocument();
+      expect(getByText("Features")).toBeInTheDocument();
+      expect(getByText("Documentation")).toBeInTheDocument();
+      expect(getByText("API Reference")).toBeInTheDocument();
+      expect(getByText("Examples")).toBeInTheDocument();
+      expect(getByText("Support")).toBeInTheDocument();
+    });
+
+    it("applies custom className", () => {
+      const { getByTestId } = render(
+        <AnchorNavigation
+          data-testid="test-id"
+          items={basicItems}
+          className="custom-class"
+        />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("anchor-navigation");
+      expect(getByTestId("test-id")).toHaveClass("custom-class");
+    });
+  });
+
+  describe("children content", () => {
+    it("renders children in content-right section when provided", () => {
+      const { container, getByText } = render(
+        <AnchorNavigation items={basicItems}>
+          <div>Additional Content</div>
+        </AnchorNavigation>,
+      );
+
+      const contentRight = container.querySelector(
+        ".anchor-navigation__content-right",
+      );
+      expect(contentRight).toBeInTheDocument();
+      expect(getByText("Additional Content")).toBeInTheDocument();
+    });
+
+    it("does not render content-right section when no children", () => {
+      const { container } = render(<AnchorNavigation items={basicItems} />);
+
+      const contentRight = container.querySelector(
+        ".anchor-navigation__content-right",
+      );
+      expect(contentRight).not.toBeInTheDocument();
+    });
+
+    it("renders complex children content", () => {
+      const { getByText, getByRole } = render(
+        <AnchorNavigation items={basicItems}>
+          <div className="pricing">
+            <div className="bold">2 €</div>
+            <div>No commitment</div>
+          </div>
+          <button>Get Started</button>
+        </AnchorNavigation>,
+      );
+
+      expect(getByText("2 €")).toBeInTheDocument();
+      expect(getByText("No commitment")).toBeInTheDocument();
+      expect(getByRole("button", { name: "Get Started" })).toBeInTheDocument();
+    });
+  });
+
+  describe("displayName", () => {
+    it("has correct displayName", () => {
+      expect(AnchorNavigation.displayName).toBe("AnchorNavigation");
+    });
+  });
+});

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

@@ -1,10 +1,9 @@
-@use '../../../styles/tokens/space';
-@use '../../../styles/tokens/color';
+@use "../../../styles/tokens/space";
 
 $spacing: (
   default: space.get(),
-  small: space.get('small'),
-  large: space.get('large'),
+  small: space.get("small"),
+  large: space.get("large"),
 );
 
-$border: 2px solid color.$black;
+$border: 2px solid var(--color-text-default);

package/src/components/BlockAction/index.tsx

@@ -5,8 +5,6 @@ import { BlockAction } from "./BlockAction";
 import { BlockActionControl } from "./BlockActionControl";
 import { BlockActionIndicator } from "./BlockActionIndicator";
 
-import "./styles/style.scss";
-
 export interface BlockActionOverrideProps {
   /** 1 and only one single element */
   children: ReactElement;

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

@@ -3,12 +3,6 @@
 
 @mixin layout-base {
   position: relative;
-
-  &:focus-within,
-  &:hover {
-    outline: 2px solid var(--color-border-accent);
-    outline-offset: 1px;
-  }
 }
 
 @mixin control {

package/src/components/BodyBanner/index.tsx

@@ -1,3 +1 @@
-import "./styles/style.scss";
-
 export { BodyBanner } from "./BodyBanner";

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

@@ -43,7 +43,7 @@
 
 @mixin item {
   display: inline-block;
-  color: color.$gray-700;
+  color: var(--color-text-secondary);
   margin-bottom: 0;
 
   &::before {
@@ -70,8 +70,6 @@
 }
 
 @mixin item-dark {
-  color: color.$gray-600;
-
   &::before {
     @include separator-white();
   }
@@ -89,5 +87,5 @@
 }
 
 @mixin link-current {
-  color: color.$gray-700;
+  color: var(--color-text-secondary);
 }

package/src/components/Button/Button.tsx

@@ -16,6 +16,7 @@ interface CommonProps {
   type?: ButtonType;
   className?: string;
   children?: React.ReactNode;
+  preserveWidth?: boolean;
 }
 
 type AnchorProps = CommonProps &
@@ -45,7 +46,6 @@ const Button = React.forwardRef<any, ButtonProps>((props, ref) => {
     htmlType = "button",
     href,
     isActive,
-    isDefault,
     isDisabled,
     colorScheme,
     size,
@@ -61,7 +61,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,
+      [`${CLASS_ROOT}--preserve-width`]: props.preserveWidth,
       "is-dark": colorScheme === "dark",
       "is-light": colorScheme === "light",
       "is-active": isActive,

package/src/components/Button/index.tsx

@@ -3,8 +3,6 @@ import React from "react";
 import { Button, ButtonProps } from "./Button";
 import { IconButton } from "./IconButton";
 
-import "./styles/style.scss";
-
 export const ButtonPrimary = (props: ButtonProps) => (
   <Button type="primary" {...props} />
 );

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

@@ -6,7 +6,7 @@ $base: (
     border: 2px solid transparent,
     font-size: convert.to-rem(18px),
     font-weight: bold,
-    line-height: 1.111111,
+    line-height: normal,
     border-radius: convert.to-rem(5px),
   ),
   active: (

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

@@ -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/Card/Card.tsx

@@ -1,27 +1,39 @@
 import React from "react";
 import cx from "classnames";
 
-export const cardColors = ["white", "black", "orange"] as const;
+export const cardColors = [
+  "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;
-  /** Add border */
-  hasBorder?: boolean;
-  hasShadow?: boolean;
+  noBorder?: boolean;
 }
 
 export const CLASS_ROOT = "card";
 
 const Card = React.forwardRef<HTMLDivElement, CardProps>(
-  ({ className, color = "white", hasBorder, hasShadow, ...other }, ref) => {
+  ({ className, color = "background-primary", noBorder, ...other }, ref) => {
     const classes = cx(
       CLASS_ROOT,
       {
-        [`bg-${color}`]: color !== "white",
-        [`${CLASS_ROOT}--bordered`]: hasBorder,
-        [`${CLASS_ROOT}--shadow`]: hasShadow,
+        [color]:
+          color !== "background-primary" && color !== "background-contrast",
+        [`${color} text-inverse`]: color === "background-contrast",
+        [`${CLASS_ROOT}--no-border`]: noBorder,
       },
       className,
     );

package/src/components/Card/CardSection.tsx

@@ -1,16 +1,8 @@
 import React from "react";
 import cx from "classnames";
+import { cardColors } from "./Card";
 
-export const cardSectionColors = [
-  "orange",
-  "gray",
-  "blue",
-  "green",
-  "pink",
-  "yellow",
-  "violet",
-] as const;
-export type CardSectionColor = (typeof cardSectionColors)[number];
+export type CardSectionColor = (typeof cardColors)[number];
 
 interface CardSectionProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Custom background color */
@@ -28,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/styles/config.scss

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

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

@@ -38,13 +38,15 @@
 @mixin card-section($spacing) {
   @include card-spacing($spacing);
 
-  .btn,
-  button {
-    display: block;
-    width: 100%;
+  > {
+    .btn,
+    button {
+      display: block;
+      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.unit.test.js

@@ -24,24 +24,58 @@ describe("rendering Card", () => {
       expect(getByTestId("test-id")).toHaveClass("test-class");
     });
 
-    it("has class card--bordered when hasBorder is passed", () => {
-      const { getByTestId } = render(<Card data-testid="test-id" hasBorder />);
-      expect(getByTestId("test-id")).toHaveClass("card--bordered");
-    });
-
-    ["black", "orange"].map((color) => {
-      it(`has 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(
           <Card data-testid="test-id" color={color} />,
         );
-        expect(getByTestId("test-id")).toHaveClass(`bg-${color}`);
+        expect(getByTestId("test-id")).toHaveClass(color);
       });
     });
-    it(`doesnt have class bg-white class when color is white`, () => {
+
+    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" color={"white"} />,
+        <Card data-testid="test-id" noBorder={false} />,
       );
-      expect(getByTestId("test-id")).not.toHaveClass("bg-white");
+      expect(getByTestId("test-id")).not.toHaveClass("card--no-border");
     });
   });
 });

package/src/components/Card/tests/CardSection.unit.test.js

@@ -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 />,