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

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

@@ -0,0 +1,107 @@
+import { render } from "@testing-library/react";
+
+import { Pagination } from "../Pagination.tsx";
+
+//items array is required
+describe("rendering Pagination", () => {
+  describe("initial state", () => {
+    it("has default class pagination", () => {
+      const { getByTestId } = render(
+        <Pagination items={[]} data-testid="test-id" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("pagination");
+    });
+  });
+
+  describe("passed props", () => {
+    const createArray = (length, activeItemNum = 1) => {
+      return Array(length)
+        .fill()
+        .map((_, i) => ({
+          href: `/test${i + 1}`,
+          label: `item${i + 1}`,
+          isActive: activeItemNum === i + 1,
+        }));
+    };
+
+    it("has label when set", () => {
+      const { getByLabelText } = render(
+        <Pagination items={[]} label="test-label" />,
+      );
+      expect(getByLabelText("test-label")).toBeInTheDocument();
+    });
+    it("has additional class when className is set", () => {
+      const { getByTestId } = render(
+        <Pagination items={[]} data-testid="test-id" className="test-class" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("pagination");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+    it("renders items when items array is set", () => {
+      const itemsArr = createArray(3);
+      const { container } = render(<Pagination items={itemsArr} />);
+      expect(container.querySelectorAll("li").length).toBe(3);
+    });
+    it("pagination items have correct href attribute", () => {
+      const itemsArr = createArray(3);
+      const { container } = render(<Pagination items={itemsArr} />);
+      const items = container.querySelectorAll("li");
+      for (let i in itemsArr) {
+        expect(items[i].querySelector("a").getAttribute("href")).toBe(
+          `/test${parseInt(i) + 1}`,
+        );
+      }
+    });
+    it("pagination items have correct label", () => {
+      const itemsArr = createArray(3);
+      const { container } = render(<Pagination items={itemsArr} />);
+      const items = container.querySelectorAll("li");
+      for (let i in itemsArr) {
+        expect(items[i]).toHaveTextContent(`item${parseInt(i) + 1}`);
+      }
+    });
+
+    for (let i = 1; i <= 10; i++) {
+      it("first and last item has icon/label based on current position when isCompact is set", () => {
+        const itemsArr = createArray(10, i);
+        const { container } = render(<Pagination items={itemsArr} isCompact />);
+        const queryItems = container.querySelectorAll("li");
+        if (i < 3) {
+          expect(queryItems[0]).toHaveTextContent("item1");
+          expect(
+            queryItems[9].querySelector("use").getAttribute("xlink:href"),
+          ).toBe("/sprite.svg#chevron-end");
+        } else if (i <= 8) {
+          expect(
+            queryItems[0].querySelector("use").getAttribute("xlink:href"),
+          ).toBe("/sprite.svg#chevron-start");
+          expect(
+            queryItems[9].querySelector("use").getAttribute("xlink:href"),
+          ).toBe("/sprite.svg#chevron-end");
+        } else {
+          expect(queryItems[9]).toHaveTextContent("item10");
+          expect(
+            queryItems[0].querySelector("use").getAttribute("xlink:href"),
+          ).toBe("/sprite.svg#chevron-start");
+        }
+      });
+    }
+    for (let i = 1; i <= 8; i++) {
+      it("renders separator/separators when isCompact is not set", () => {
+        const itemsArr = createArray(10, i);
+        const { container } = render(<Pagination items={itemsArr} />);
+        const sepNum = i <= 3 || i >= 8 ? 1 : 2;
+        expect(
+          container.getElementsByClassName("pagination__separator").length,
+        ).toBe(sepNum);
+      });
+    }
+    it("separator in not rendered when isCompact is set", () => {
+      const itemsArr = createArray(10, 5);
+      const { container } = render(<Pagination items={itemsArr} isCompact />);
+      expect(
+        container.getElementsByClassName("pagination__separator").length,
+      ).toBe(0);
+    });
+  });
+});

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

@@ -0,0 +1,24 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { render } from "@testing-library/react";
+
+import Separator from "../Separator";
+
+describe("rendering Separator", () => {
+  describe("initial state", () => {
+    it("has default class pagination__separator", () => {
+      const { getByTestId } = render(<Separator data-testid="separator" />);
+      expect(getByTestId("separator")).toHaveClass("pagination__separator");
+    });
+  });
+  describe("rendering Item", () => {
+    it("has additional class when className is set", () => {
+      const { getByTestId } = render(
+        <Separator data-testid="separator" className="test-class" />,
+      );
+      expect(getByTestId("separator")).toHaveClass("test-class");
+    });
+  });
+});

package/src/components/Pill/Pill.tsx

@@ -1,9 +1,20 @@
-import React, { ReactNode, HTMLAttributes } from "react";
 import cx from "classnames";
+import React, { HTMLAttributes, ReactNode } from "react";
 
 const CLASS_ROOT = "pill";
 
-export const pillColors = ["white", "gray", "transparent"] as const;
+export const pillColors = [
+  "surface-primary",
+  "surface-secondary",
+  "surface-tertiary",
+  "surface-subtle",
+  "surface-moderate",
+  "surface-contrast",
+  "surface-accent",
+  "fill-moderate",
+  "fill-disabled",
+  "transparent",
+] as const;
 export type PillColor = (typeof pillColors)[number];
 
 interface PillProps extends HTMLAttributes<HTMLSpanElement> {
@@ -11,7 +22,6 @@ interface PillProps extends HTMLAttributes<HTMLSpanElement> {
   children?: ReactNode;
   color?: PillColor;
   size?: "small" | "medium" | "large" | "xlarge" | "xxlarge";
-  colorScheme?: "light" | "dark";
 }
 
 const Pill: React.FC<PillProps> = ({
@@ -19,18 +29,15 @@ const Pill: React.FC<PillProps> = ({
   children,
   size,
   color,
-  colorScheme,
   ...other
 }) => (
   <span
     className={cx(
       CLASS_ROOT,
       {
-        [`${CLASS_ROOT}--${color}`]: color, // Only apply modifier if color is specified
-        "is-light": colorScheme === "light",
-        "is-dark": colorScheme === "dark",
         [CLASS_ROOT + "--" + size]: size,
       },
+      color,
       className,
     )}
     {...other}

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

@@ -4,8 +4,8 @@
 
 $base: (
   font-weight: bold,
-  background-color: map.get(color.$colors-dark, border-subtle),
-  color: color.$white,
+  background-color: var(--color-surface-contrast),
+  color: var(--color-text-inverse),
 );
 
 $sizes: (
@@ -21,18 +21,3 @@ $sizes: (
     xxlarge: convert.to-rem(64px),
   ),
 );
-
-$colors: (
-  "white": (
-    background-color: color.$white,
-    color: color.$black,
-  ),
-  "gray": (
-    background-color: var(--color-surface-subtle),
-    color: var(--color-text-default),
-  ),
-  "transparent": (
-    background-color: rgba(#ffffff, 0.5),
-    color: var(--color-text-default),
-  ),
-);

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

@@ -1,3 +1,4 @@
+@use "../../../styles/tokens/color";
 @use "../../../styles/tools/generate";
 @use "./config";
 @use "./mixins";
@@ -8,12 +9,23 @@
     @include mixins.base();
     @include mixins.sizes();
 
-    @each $colorName, $colorProps in config.$colors {
-      &--#{$colorName} {
-        @each $property, $value in $colorProps {
-          #{$property}: $value;
-        }
-      }
+    &.surface-primary,
+    &.surface-subtle,
+    &.surface-moderate,
+    &.surface-accent {
+      color: var(--color-text-default);
+    }
+
+    &.surface-secondary,
+    &.surface-tertiary,
+    &.fill-moderate,
+    &.fill-disabled {
+      color: color.$white;
+    }
+
+    &.transparent {
+      background-color: rgba(#ffffff, 0.5);
+      color: var(--color-text-default);
     }
   }
 }

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

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from "vitest-axe";
 
 import { Pill } from "../";
 
@@ -19,17 +19,19 @@ const example = (
     </p>
     <p>
       <Pill color="transparent">T</Pill>
-      <Pill color="black">D</Pill>
-      <Pill color="white">L</Pill>
+      <Pill color="surface-secondary">S</Pill>
+      <Pill color="surface-tertiary">T</Pill>
+      <Pill color="surface-subtle">Su</Pill>
+      <Pill color="surface-moderate">M</Pill>
+      <Pill color="surface-contrast">C</Pill>
+      <Pill color="surface-accent">A</Pill>
     </p>
     <p>
       <Pill size="small">S</Pill>
       <Pill size="medium">M</Pill>
       <Pill size="large">L</Pill>
-    </p>
-    <p>
-      <Pill colorScheme="light">Light</Pill>
-      <Pill colorScheme="dark">Dark</Pill>
+      <Pill size="xlarge">XL</Pill>
+      <Pill size="xxlarge">XXL</Pill>
     </p>
   </>
 );

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

@@ -0,0 +1,148 @@
+import { render } from "@testing-library/react";
+
+import { Pill } from "../";
+
+describe("rendering Pill", () => {
+  describe("initial state", () => {
+    it("has default className pill", () => {
+      const { getByTestId } = render(<Pill data-testid="test-id" />);
+      expect(getByTestId("test-id")).toHaveClass("pill");
+    });
+  });
+
+  describe("passed props", () => {
+    it("renders children", () => {
+      const { getByText } = render(<Pill>pill</Pill>);
+      expect(getByText("pill")).toBeInTheDocument();
+    });
+
+    it("has additional class when className is set", () => {
+      const { getByTestId } = render(
+        <Pill className="test-class" data-testid="test-id">
+          pill
+        </Pill>,
+      );
+      expect(getByTestId("test-id")).toHaveClass("pill");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+
+    it("has size class when size prop is set", () => {
+      const { getByTestId } = render(
+        <Pill size="large" data-testid="test-id">
+          pill
+        </Pill>,
+      );
+      expect(getByTestId("test-id")).toHaveClass("pill--large");
+    });
+
+    it("supports all available sizes", () => {
+      const sizes = ["small", "medium", "large", "xlarge", "xxlarge"];
+
+      sizes.forEach((size) => {
+        const { getByTestId } = render(
+          <Pill size={size} data-testid={`test-${size}`}>
+            {size}
+          </Pill>,
+        );
+
+        expect(getByTestId(`test-${size}`)).toHaveClass(`pill--${size}`);
+      });
+    });
+
+    it("has default styling without color modifier", () => {
+      const { getByTestId } = render(<Pill data-testid="test-id">pill</Pill>);
+      expect(getByTestId("test-id")).toHaveClass("pill");
+      expect(getByTestId("test-id")).not.toHaveClass("surface-secondary");
+    });
+
+    it("has surface-secondary class when color is surface-secondary", () => {
+      const { getByTestId } = render(
+        <Pill color="surface-secondary" data-testid="test-id">
+          pill
+        </Pill>,
+      );
+      expect(getByTestId("test-id")).toHaveClass("surface-secondary");
+    });
+
+    it("has surface-tertiary class when color is surface-tertiary", () => {
+      const { getByTestId } = render(
+        <Pill color="surface-tertiary" data-testid="test-id">
+          pill
+        </Pill>,
+      );
+      expect(getByTestId("test-id")).toHaveClass("surface-tertiary");
+    });
+
+    it("has surface-subtle class when color is surface-subtle", () => {
+      const { getByTestId } = render(
+        <Pill color="surface-subtle" data-testid="test-id">
+          pill
+        </Pill>,
+      );
+      expect(getByTestId("test-id")).toHaveClass("surface-subtle");
+    });
+
+    it("has surface-moderate class when color is surface-moderate", () => {
+      const { getByTestId } = render(
+        <Pill color="surface-moderate" data-testid="test-id">
+          pill
+        </Pill>,
+      );
+      expect(getByTestId("test-id")).toHaveClass("surface-moderate");
+    });
+
+    it("has surface-contrast class when color is surface-contrast", () => {
+      const { getByTestId } = render(
+        <Pill color="surface-contrast" data-testid="test-id">
+          pill
+        </Pill>,
+      );
+      expect(getByTestId("test-id")).toHaveClass("surface-contrast");
+    });
+
+    it("has surface-accent class when color is surface-accent", () => {
+      const { getByTestId } = render(
+        <Pill color="surface-accent" data-testid="test-id">
+          pill
+        </Pill>,
+      );
+      expect(getByTestId("test-id")).toHaveClass("surface-accent");
+    });
+
+    it("has transparent class when color is transparent", () => {
+      const { getByTestId } = render(
+        <Pill color="transparent" data-testid="test-id">
+          pill
+        </Pill>,
+      );
+      expect(getByTestId("test-id")).toHaveClass("transparent");
+    });
+
+    it("supports all available colors", () => {
+      const colors = [
+        "surface-secondary",
+        "surface-tertiary",
+        "surface-subtle",
+        "surface-moderate",
+        "surface-contrast",
+        "surface-accent",
+        "transparent",
+      ];
+
+      colors.forEach((color) => {
+        const { getByTestId } = render(
+          <Pill color={color} data-testid={`test-${color}`}>
+            {color}
+          </Pill>,
+        );
+
+        expect(getByTestId(`test-${color}`)).toHaveClass(color);
+      });
+    });
+
+    it("passes other props", () => {
+      const { getByTestId } = render(<Pill data-testid="test">Pill</Pill>);
+      expect(getByTestId("test")).toBeInTheDocument();
+    });
+  });
+});

package/src/components/Preview/CodeExample.tsx

@@ -1,24 +1,83 @@
-import React, { useState, useRef, ReactNode } from "react";
-
-import unescape from "unescape-html";
-import reactElementToJSXString from "react-element-to-jsx-string";
+import cx from "classnames";
+import React, { ReactNode, useRef, useState } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
-import pretty from "pretty";
-
-import Code from "../Code/";
+import reactElementToJSXString from "react-element-to-jsx-string";
+import unescape from "unescape-html";
+import { formatHTML } from "../../utils/formatCode";
 import { Button } from "../Button";
-
-import cx from "classnames";
+import Code from "../Code/";
+import { getElementDisplayName } from "./getElementDisplayName";
 
 interface CodeExampleProps {
   codeJSXOptions?: Record<string, any>;
   codeTypes?: string[];
   children?: ReactNode;
+  htmlThemeClass?: string;
   jsxCode?: string; // Pre-generated JSX string (from server-side PreviewAuto)
   htmlCode?: ReactNode; // Code for HTML rendering
   [key: string]: any;
 }
 
+const addClassToOpeningTag = (tag: string, className: string): string => {
+  if (tag.includes(' class="')) {
+    return tag.replace(/ class="([^"]*)"/, (_, existingClassName) => {
+      const mergedClassName = [existingClassName, className]
+        .filter(Boolean)
+        .join(" ");
+      return ` class="${mergedClassName}"`;
+    });
+  }
+
+  return tag.replace(/^<([\w-]+)/, `<$1 class="${className}"`);
+};
+
+const applyThemeClassToMarkup = (
+  markup: string,
+  themeClass?: string,
+  wrapMultipleRoots = false,
+): string => {
+  if (!themeClass || !markup.trim()) {
+    return markup;
+  }
+
+  if (wrapMultipleRoots) {
+    return `<div class="${themeClass}">${markup}</div>`;
+  }
+
+  return markup.replace(/^<[^>]+>/, (openingTag) =>
+    addClassToOpeningTag(openingTag, themeClass),
+  );
+};
+
+const renderMarkupToHtml = (markup: ReactNode, themeClass?: string): string => {
+  if (!markup) {
+    return "";
+  }
+
+  if (typeof markup === "string") {
+    return markup;
+  }
+
+  if (Array.isArray(markup)) {
+    const renderedMarkup = markup
+      .map((markupItem) =>
+        renderToStaticMarkup(markupItem as React.ReactElement),
+      )
+      .join("");
+
+    return applyThemeClassToMarkup(
+      renderedMarkup,
+      themeClass,
+      markup.length > 1,
+    );
+  }
+
+  return applyThemeClassToMarkup(
+    renderToStaticMarkup(markup as React.ReactElement),
+    themeClass,
+  );
+};
+
 /**
  * Remove props that are undefined or null
  * Don't show React.Fragment in code example
@@ -71,25 +130,7 @@ const getJSXAsStringFromMarkup = (
     showDefaultProps: false,
     showFunctions: true,
     functionValue: (fn: any) => fn.name,
-    displayName: (ReactElement: any) => {
-      // Try to get display name from various sources
-      if (ReactElement.props && ReactElement.props.mdxType) {
-        return ReactElement.props.mdxType;
-      }
-      if (ReactElement.type && ReactElement.type.displayName) {
-        return ReactElement.type.displayName;
-      }
-      if (ReactElement.type && ReactElement.type.name) {
-        return ReactElement.type.name;
-      }
-      if (typeof ReactElement.type === "string") {
-        return ReactElement.type;
-      }
-      // Fallback to type name or 'Component'
-      return (
-        ReactElement.type?.displayName || ReactElement.type?.name || "Component"
-      );
-    },
+    displayName: getElementDisplayName,
     filterProps: ["mdxType", "originalType", ...filterProps],
     ...otherOptions,
   };
@@ -127,6 +168,7 @@ const CodeExample: React.FC<CodeExampleProps> = ({
   children,
   codeJSXOptions,
   codeTypes = ["html", "jsx"],
+  htmlThemeClass,
   jsxCode,
   htmlCode,
   ...other
@@ -187,18 +229,14 @@ const CodeExample: React.FC<CodeExampleProps> = ({
           typeof htmlCode === "string"
             ? unescape(htmlCode)
             : unescape(
-                pretty(renderToStaticMarkup(htmlCode as React.ReactElement), {
-                  ocd: true,
-                }),
+                formatHTML(renderMarkupToHtml(htmlCode, htmlThemeClass)),
               );
       } else {
         codeToShow =
           typeof children === "string"
             ? unescape(children)
             : unescape(
-                pretty(renderToStaticMarkup(children as React.ReactElement), {
-                  ocd: true,
-                }),
+                formatHTML(renderMarkupToHtml(children, htmlThemeClass)),
               );
       }
       break;

package/src/components/Preview/Preview.tsx

@@ -1,7 +1,9 @@
 // Preview component (SERVER component - runs on server)
+
+import type { ReactNode } from "react";
 import React from "react";
 import reactElementToJSXString from "react-element-to-jsx-string";
-import type { ReactNode } from "react";
+import { getElementDisplayName } from "./getElementDisplayName";
 import { PreviewGenerator } from "./PreviewGenerator";
 
 type PreviewProps = React.ComponentProps<typeof PreviewGenerator> & {
@@ -50,21 +52,27 @@ export function Preview({
   codeTypes = ["html", "jsx"],
   ...rest
 }: PreviewProps) {
+  const normalizedChildren = React.Children.toArray(children);
+  const normalizedCode =
+    rest.code == null
+      ? undefined
+      : typeof rest.code === "string" || typeof rest.code === "function"
+        ? rest.code
+        : React.Children.toArray(rest.code);
+  const jsxSource =
+    normalizedCode &&
+    typeof normalizedCode !== "string" &&
+    typeof normalizedCode !== "function"
+      ? normalizedCode
+      : normalizedChildren;
+  const hasMultipleCodeRoots = React.Children.count(jsxSource) > 1;
+
   // Generate JSX string on server
-  const jsxCode = generateJSXString(children, {
+  const jsxCode = generateJSXString(jsxSource, {
     showDefaultProps: false,
     showFunctions: true,
     functionValue: (fn: any) => fn.name || "Function",
-    displayName: (el: any) => {
-      // More robust display name handling
-      if (!el) return "Unknown";
-      return (
-        el?.props?.mdxType ||
-        el?.type?.displayName ||
-        el?.type?.name ||
-        (typeof el?.type === "string" ? el.type : "Component")
-      );
-    },
+    displayName: getElementDisplayName,
     filterProps: ["mdxType", "originalType"],
     useBooleanShorthandSyntax: false,
     sortProps: false,
@@ -73,8 +81,14 @@ export function Preview({
 
   // Pass the pre-generated JSX code to PreviewGenerator
   return (
-    <PreviewGenerator {...rest} jsxCode={jsxCode} codeTypes={codeTypes}>
-      {children}
+    <PreviewGenerator
+      {...rest}
+      code={normalizedCode}
+      hasMultipleCodeRoots={hasMultipleCodeRoots}
+      jsxCode={jsxCode}
+      codeTypes={codeTypes}
+    >
+      {normalizedChildren}
     </PreviewGenerator>
   );
 }