@orangesk/orange-design-system 2.0.0-beta.2 → 2.0.0-beta.21

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

@@ -1,12 +1,12 @@
-@use './../../../styles/tokens/space';
-@use './../../../styles/tokens/breakpoint';
-@use './../../../styles/tools/generate';
-@use './../../../styles/tools/layout';
-@use './config';
+@use "./../../../styles/tokens/space";
+@use "./../../../styles/tokens/breakpoint";
+@use "./../../../styles/tools/generate";
+@use "./../../../styles/tools/layout";
+@use "./config";
 
 @mixin bar-base {
   display: flex;
-  margin-bottom: space.get();
+  margin-bottom: space.get("large");
 }
 
 @mixin bar-horizontal() {
@@ -40,19 +40,19 @@
   }
 }
 
-@mixin bar-spacing($direction: 'horizontal', $space) {
-  @if ($direction == 'horizontal') {
+@mixin bar-spacing($direction: "horizontal", $space) {
+  @if ($direction == "horizontal") {
     margin-top: -($space);
   }
 }
 
-@mixin bar-item-spacing($direction: 'horizontal', $space) {
-  @if ($direction == 'horizontal') {
+@mixin bar-item-spacing($direction: "horizontal", $space) {
+  @if ($direction == "horizontal") {
     margin-top: $space;
     margin-right: $space;
   }
 
-  @if ($direction == 'vertical') {
+  @if ($direction == "vertical") {
     margin-bottom: $space;
   }
 }

package/src/components/BlockAction/BlockAction.tsx

@@ -1,4 +1,5 @@
 import React, { ReactElement } from "react";
+import cx from "classnames";
 
 import { CloneElementWithClassName } from "./CloneElementWithClassName";
 import { Provider } from "./Context";
@@ -7,15 +8,21 @@ export interface BlockActionProps {
   /** 1 and only one single element */
   children: ReactElement;
   className?: string;
+  /** Add border on hover */
+  hasBorderOnHover?: boolean;
   [key: string]: any;
 }
 
 const BlockAction: React.FC<BlockActionProps> = (props) => {
+  const { hasBorderOnHover, className, ...restProps } = props;
+
   return (
-    <Provider>
+    <Provider hasBorderOnHover={hasBorderOnHover}>
       <CloneElementWithClassName
-        {...props}
-        className="block-action"
+        {...restProps}
+        className={cx("block-action", className, {
+          "block-action--border-on-hover": hasBorderOnHover,
+        })}
         data-block-action
       />
     </Provider>

package/src/components/BlockAction/Context.tsx

@@ -7,6 +7,7 @@ interface ContextType {
   isActive: boolean;
   setIsActive: Dispatch<SetStateAction<boolean>>;
   setIsIndicating: Dispatch<SetStateAction<boolean>>;
+  hasBorderOnHover?: boolean;
 }
 
 export const Context = React.createContext<ContextType>({
@@ -14,10 +15,12 @@ export const Context = React.createContext<ContextType>({
   isActive: false,
   setIsActive: () => {},
   setIsIndicating: () => {},
+  hasBorderOnHover: undefined,
 });
 
 interface ProviderProps {
   children: ReactNode;
+  hasBorderOnHover?: boolean;
 }
 
 export const Provider: React.FC<ProviderProps> = (props) => {
@@ -31,6 +34,7 @@ export const Provider: React.FC<ProviderProps> = (props) => {
         setIsIndicating,
         isActive,
         setIsActive,
+        hasBorderOnHover: props.hasBorderOnHover,
       }}
     >
       {props.children}

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 {
@@ -31,3 +25,9 @@
 @mixin indicator($bg-color: "default", $config: config.$indicator-colors) {
   color: map.get($config, $bg-color);
 }
+
+@mixin border {
+  &::after {
+    border: 2px solid var(--color-border-accent);
+  }
+}

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

@@ -31,5 +31,10 @@
         @include mixins.indicator("orange-dark");
       }
     }
+
+    &--border-on-hover:has(.block-action__control:hover),
+    &--border-on-hover:has(.block-action__control:focus) {
+      @include mixins.border;
+    }
   }
 }

package/src/components/BodyBanner/BodyBanner.tsx

@@ -4,99 +4,78 @@ import { Grid } from "@/components/Grid/Grid";
 import { GridCol } from "../Grid/GridCol";
 import { Button } from "../Button/Button";
 import { Image } from "../Image/Image";
-import { Container } from "../Container/Container";
 
 const CLASS_ROOT = "body-banner";
 
+export const bodyBannerColors = [
+  "background-primary",
+  "background-accent",
+  "surface-subtle",
+] as const;
+export type BodyBannerColor = (typeof bodyBannerColors)[number];
+
 interface BodyBannerProps {
-  size: "small" | "large";
-  /** Color scheme for whole BodyBanner */
-  colorScheme: "light" | "dark";
-  /** Color scheme for whole BodyBanner */
-  color?: "gray" | "orange";
+  size?: "large";
+  /** Background color using design tokens */
+  color?: BodyBannerColor;
   /** Additional CSS classes */
   className?: string;
   /** Image URL */
   imageUrl?: string;
-  /** Title */
-  title?: string;
-  /** Subtitle */
-  description?: string;
+  /** Content area - typically heading and description */
+  children?: React.ReactNode;
   /** Button text */
   buttonText?: string;
+  /** Additional CSS classes for button */
+  buttonClassName?: string;
 }
-export const BodyBanner = (props: BodyBannerProps) => {
-  const {
-    className,
-    colorScheme,
-    size,
-    color,
-    imageUrl,
-    title,
-    description,
-    buttonText,
-  } = props;
+export const BodyBanner = ({
+  className,
+  size,
+  color = "background-primary",
+  imageUrl,
+  children,
+  buttonText,
+  buttonClassName,
+  ...other
+}: BodyBannerProps) => {
   const classes = cx(
     CLASS_ROOT,
     {
-      "is-dark": colorScheme === "dark",
-      "is-light": colorScheme === "light",
-      "is-small": size === "small",
-      "is-large": size === "large",
-      "is-gray": color === "gray",
-      "is-orange": color === "orange",
+      [`${CLASS_ROOT}--${size}`]: size,
+      [color]: color !== "background-primary",
     },
     className,
   );
   return (
-    <Container>
-      <Grid className={classes}>
-        <GridCol
-          size={{ xs: 12, md: size === "small" ? 12 : 6 }}
-          className={`${CLASS_ROOT}__content`}
-        >
-          {size === "small" && imageUrl && (
-            <div className={`${CLASS_ROOT}__image`}>
-              <Image src={imageUrl || ""} alt="Body Banner" />
-            </div>
-          )}
-          <div
-            className={`${CLASS_ROOT}__content-inner ${size === "large" ? "is-large" : ""}`}
-          >
-            <div>
-              <h3 className="mb-small">{title}</h3>
-              <p className="h6 mb-none fullwidth">{description}</p>
-            </div>
-            <div
-              className={`${CLASS_ROOT}__button ${size === "large" ? "is-large" : ""}`}
+    <Grid className={classes} {...other}>
+      <GridCol
+        size={{ xs: 12, md: size === "large" ? 6 : 12 }}
+        className={`${CLASS_ROOT}__content`}
+      >
+        {size !== "large" && imageUrl && (
+          <div className={`${CLASS_ROOT}__image`}>
+            <Image src={imageUrl || ""} alt="Body Banner" />
+          </div>
+        )}
+        <div className={`${CLASS_ROOT}__content-inner`}>
+          <div>{children}</div>
+          <div className={`${CLASS_ROOT}__button`}>
+            <Button
+              size="large"
+              type="fill"
+              className={cx("mb-none", buttonClassName)}
             >
-              <Button
-                size="large"
-                type="fill"
-                colorScheme={
-                  colorScheme === "light"
-                    ? "light"
-                    : color !== "gray" && color !== "orange"
-                      ? "dark"
-                      : "light"
-                }
-                className="mb-none"
-              >
-                {buttonText}
-              </Button>
-            </div>
+              {buttonText}
+            </Button>
           </div>
+        </div>
+      </GridCol>
+      {size === "large" && imageUrl && (
+        <GridCol size={{ xs: 12, md: 6 }} className={`${CLASS_ROOT}__image`}>
+          <Image src={imageUrl || ""} alt="Body Banner" />
         </GridCol>
-        {size === "large" && imageUrl && (
-          <GridCol size={{ xs: 12, md: 6 }} className={`${CLASS_ROOT}__image`}>
-            <Image
-              src={imageUrl || ""}
-              alt="Body Banner"
-              className="is-large"
-            />
-          </GridCol>
-        )}
-      </Grid>
-    </Container>
+      )}
+    </Grid>
   );
 };

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

@@ -3,13 +3,17 @@
 @use "../../../styles/tools/generate";
 @use "../../../styles/tokens/space";
 @use "../../../styles/tokens/breakpoint";
-// @use "./config";
 
 @mixin body-banner {
   display: flex;
   color: var(--color-text-default);
   background-color: var(--color-background-primary);
   border: 1px solid var(--color-border-subtle);
+
+  &.grid {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
 }
 
 @mixin content {
@@ -30,20 +34,9 @@
   > div:not(.body-banner__button) {
     flex: 1;
     min-width: 0;
-  }
-
-  &.is-large {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    padding: space.get("xlarge");
-
-    @include breakpoint.get("lg", "down") {
-      padding: space.get("xlarge") space.get("large");
-    }
 
-    @include breakpoint.get("sm", "down") {
-      padding: space.get("large") 10px;
+    > *:last-child {
+      margin-bottom: 0;
     }
   }
 
@@ -60,28 +53,13 @@
 
 @mixin image {
   padding: 0 !important;
+
   img {
     width: 80px;
     height: 80px;
     object-fit: cover;
     margin: 0 space.get("large") !important;
 
-    &.is-large {
-      width: 100%;
-      height: auto;
-      object-fit: cover;
-      object-position: left center;
-      margin: 0px !important;
-
-      @include breakpoint.get("xl", "down") {
-        height: 100%;
-      }
-
-      @include breakpoint.get("sm", "down") {
-        height: auto;
-      }
-    }
-
     @include breakpoint.get("sm", "down") {
       margin: 15px !important;
     }
@@ -91,15 +69,43 @@
 @mixin button {
   display: flex;
   align-items: center;
-  padding: 0 space.get("xlarge");
+  padding: 0 0 0 space.get("xlarge");
   margin: 0 !important;
 
-  &.is-large {
+  @include breakpoint.get("lg", "down") {
     padding: 0;
     margin-top: space.get("small") !important;
   }
+}
 
-  @include breakpoint.get("lg", "down") {
+@mixin large {
+  .body-banner__content-inner {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: space.get("xlarge");
+
+    @include breakpoint.get("lg", "down") {
+      padding: space.get("xlarge") space.get("large");
+    }
+
+    @include breakpoint.get("sm", "down") {
+      padding: space.get("large") 10px;
+    }
+  }
+
+  .body-banner__image {
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: center;
+      margin: 0 !important;
+      display: block;
+    }
+  }
+
+  .body-banner__button {
     padding: 0;
     margin-top: space.get("small") !important;
   }

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

@@ -4,24 +4,6 @@
   .body-banner {
     @include mixins.body-banner();
 
-    &.is-gray {
-      --color-background-primary: var(--color-fill-subtle);
-      border: none !important;
-    }
-
-    &.is-orange {
-      // TODO: change to color token
-      --color-background-primary: #fff0e0;
-      border: none !important;
-    }
-
-    &.is-dark {
-      &.is-orange {
-      // TODO: change to color token
-        color: #000000 !important;
-      }
-    }
-
     &__content {
       @include mixins.content();
 
@@ -37,5 +19,9 @@
     &__button {
       @include mixins.button();
     }
+
+    &--large {
+      @include mixins.large();
+    }
   }
 }