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

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

@@ -25,13 +25,14 @@ import { Section } from "../";
  * - Screen reader compatibility
  *
  * 🎨 FUNCTIONAL BEHAVIOR
- * - Correct application of CSS classes (section, bg-*, section--*)
- * - All colors: white (default), gray, black, orange
+ * - Correct application of CSS classes (section, section--*)
+ * - All colors: background-primary (default), background-secondary, background-contrast, background-accent, etc.
  * - All spacing variants: default, small, xsmall
  * - Multiple props combinations
  * - Custom tag rendering (section, article, main, aside, header, footer)
  * - Passing through additional props (id, role, aria-*)
  * - Container integration and structure
+ * - Text inverse functionality for background-contrast
  *
  * 📝 CONTENT RENDERING
  * - Text children rendering through Container
@@ -72,7 +73,7 @@ describe("Section Conformance Tests", () => {
     it("is valid HTML with all props", () => {
       const { container } = render(
         <Section
-          color="gray"
+          color="background-secondary"
           spacing="small"
           tag="section"
           className="test-class"
@@ -121,7 +122,7 @@ describe("Section Conformance Tests", () => {
 
     it("is accessible with complex content", async () => {
       const { container } = render(
-        <Section color="gray" spacing="small">
+        <Section color="background-secondary" spacing="small">
           <header>
             <h1>Page Title</h1>
             <nav aria-label="Main navigation">
@@ -194,14 +195,15 @@ describe("Section Conformance Tests", () => {
       const { container } = render(<Section data-testid="test-section" />);
       const section = container.querySelector('[data-testid="test-section"]');
       expect(section).toHaveClass("section");
-      expect(section).not.toHaveClass("bg-white");
+      expect(section).not.toHaveClass("background-primary");
     });
 
     it("applies color classes correctly", () => {
       const colors = [
-        "gray",
-        "black",
-        "orange",
+        "background-secondary",
+        "background-accent",
+        "background-accent1-blog",
+        "background-accent2-blog",
         "accent1-blog",
         "accent2-blog",
       ];
@@ -210,10 +212,19 @@ describe("Section Conformance Tests", () => {
           <Section color={color} data-testid="test-section" />,
         );
         const section = container.querySelector('[data-testid="test-section"]');
-        expect(section).toHaveClass(`bg-${color}`);
+        expect(section).toHaveClass(color);
       });
     });
 
+    it("applies background-contrast with text-inverse correctly", () => {
+      const { container } = render(
+        <Section color="background-contrast" data-testid="test-section" />,
+      );
+      const section = container.querySelector('[data-testid="test-section"]');
+      expect(section).toHaveClass("background-contrast");
+      expect(section).toHaveClass("text-inverse");
+    });
+
     it("applies spacing classes correctly", () => {
       const spacings = ["default", "small", "xsmall"];
       spacings.forEach((spacing) => {
@@ -228,7 +239,7 @@ describe("Section Conformance Tests", () => {
     it("combines multiple props correctly", () => {
       const { container } = render(
         <Section
-          color="gray"
+          color="background-secondary"
           spacing="small"
           className="custom-class"
           data-testid="test-section"
@@ -236,7 +247,7 @@ describe("Section Conformance Tests", () => {
       );
       const section = container.querySelector('[data-testid="test-section"]');
       expect(section).toHaveClass("section");
-      expect(section).toHaveClass("bg-gray");
+      expect(section).toHaveClass("background-secondary");
       expect(section).toHaveClass("section--small");
       expect(section).toHaveClass("custom-class");
     });
@@ -400,7 +411,7 @@ describe("Section Conformance Tests", () => {
       );
       const section = container.querySelector('[data-testid="test-section"]');
       expect(section).toHaveClass("section");
-      expect(section).toHaveClass("bg-invalid-color");
+      expect(section).toHaveClass("invalid-color");
     });
 
     it("handles invalid spacing prop gracefully", () => {

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

@@ -38,12 +38,13 @@ import { Section } from "../Section";
  * - Multiple children
  *
  * 🎯 SPECIFIC FUNCTIONALITY
- * - Color prop behavior (white, gray, black, orange)
+ * - Color prop behavior (background-secondary, background-contrast, background-accent, etc.)
  * - Spacing prop behavior (default, small, xsmall)
  * - Tag prop behavior (div, section, article, etc.)
  * - ClassName prop merging
  * - Additional props spreading
  * - Container integration
+ * - Text inverse functionality for background-contrast
  *
  * ⚡ PERFORMANCE & OPTIMIZATION
  * - Component re-rendering
@@ -102,7 +103,7 @@ describe("Section Component Unit Tests", () => {
       const { getByTestId } = render(
         <Section
           data-testid="test-section"
-          color="gray"
+          color="background-secondary"
           spacing="small"
           className="custom-class"
         />,
@@ -156,72 +157,86 @@ describe("Section Component Unit Tests", () => {
   });
 
   describe("Color Prop Behavior", () => {
-    it("applies no background class for white color (default)", () => {
+    it("applies correct color class for background-secondary color", () => {
       const { getByTestId } = render(
-        <Section data-testid="test-section" color="white" />,
+        <Section data-testid="test-section" color="background-secondary" />,
       );
       const section = getByTestId("test-section");
 
       expect(section).toHaveClass("section");
-      expect(section).not.toHaveClass("bg-white");
+      expect(section).toHaveClass("background-secondary");
     });
 
-    it("applies correct background class for gray color", () => {
+    it("applies correct color class and text-inverse for background-contrast color", () => {
       const { getByTestId } = render(
-        <Section data-testid="test-section" color="gray" />,
+        <Section data-testid="test-section" color="background-contrast" />,
       );
       const section = getByTestId("test-section");
 
       expect(section).toHaveClass("section");
-      expect(section).toHaveClass("bg-gray");
+      expect(section).toHaveClass("background-contrast");
+      expect(section).toHaveClass("text-inverse");
     });
 
-    it("applies correct background class for black color", () => {
+    it("applies correct color class for background-accent color", () => {
       const { getByTestId } = render(
-        <Section data-testid="test-section" color="black" />,
+        <Section data-testid="test-section" color="background-accent" />,
       );
       const section = getByTestId("test-section");
 
       expect(section).toHaveClass("section");
-      expect(section).toHaveClass("bg-black");
+      expect(section).toHaveClass("background-accent");
     });
 
-    it("applies correct background class for orange color", () => {
+    it("applies correct color class for background-accent1-blog color", () => {
       const { getByTestId } = render(
-        <Section data-testid="test-section" color="orange" />,
+        <Section data-testid="test-section" color="background-accent1-blog" />,
       );
       const section = getByTestId("test-section");
 
       expect(section).toHaveClass("section");
-      expect(section).toHaveClass("bg-orange");
+      expect(section).toHaveClass("background-accent1-blog");
     });
 
-    it("applies correct background class for accent1-blog color", () => {
+    it("applies correct color class for background-accent2-blog color", () => {
+      const { getByTestId } = render(
+        <Section data-testid="test-section" color="background-accent2-blog" />,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section).toHaveClass("section");
+      expect(section).toHaveClass("background-accent2-blog");
+    });
+
+    it("applies correct color class for accent1-blog color", () => {
       const { getByTestId } = render(
         <Section data-testid="test-section" color="accent1-blog" />,
       );
       const section = getByTestId("test-section");
 
       expect(section).toHaveClass("section");
-      expect(section).toHaveClass("bg-accent1-blog");
+      expect(section).toHaveClass("accent1-blog");
     });
 
-    it("applies correct background class for accent2-blog color", () => {
+    it("applies correct color class for accent2-blog color", () => {
       const { getByTestId } = render(
         <Section data-testid="test-section" color="accent2-blog" />,
       );
       const section = getByTestId("test-section");
 
       expect(section).toHaveClass("section");
-      expect(section).toHaveClass("bg-accent2-blog");
+      expect(section).toHaveClass("accent2-blog");
     });
 
     it("handles all color variants correctly", () => {
       const colors = [
-        "white",
-        "gray",
-        "black",
-        "orange",
+        "background-secondary",
+        "background-contrast",
+        "background-accent",
+        "background-accent1-blog",
+        "background-accent2-blog",
+        "background-none",
+        "surface-subtle",
         "accent1-blog",
         "accent2-blog",
       ];
@@ -234,10 +249,11 @@ describe("Section Component Unit Tests", () => {
 
         expect(section).toHaveClass("section");
 
-        if (color === "white") {
-          expect(section).not.toHaveClass("bg-white");
+        if (color === "background-contrast") {
+          expect(section).toHaveClass("background-contrast");
+          expect(section).toHaveClass("text-inverse");
         } else {
-          expect(section).toHaveClass(`bg-${color}`);
+          expect(section).toHaveClass(color);
         }
       });
     });
@@ -500,12 +516,16 @@ describe("Section Component Unit Tests", () => {
   describe("Props Combinations", () => {
     it("combines color and spacing props correctly", () => {
       const { getByTestId } = render(
-        <Section data-testid="test-section" color="gray" spacing="small" />,
+        <Section
+          data-testid="test-section"
+          color="background-secondary"
+          spacing="small"
+        />,
       );
       const section = getByTestId("test-section");
 
       expect(section).toHaveClass("section");
-      expect(section).toHaveClass("bg-gray");
+      expect(section).toHaveClass("background-secondary");
       expect(section).toHaveClass("section--small");
     });
 
@@ -513,7 +533,7 @@ describe("Section Component Unit Tests", () => {
       const { getByTestId } = render(
         <Section
           data-testid="test-section"
-          color="black"
+          color="background-contrast"
           spacing="xsmall"
           tag="article"
         />,
@@ -522,7 +542,8 @@ describe("Section Component Unit Tests", () => {
 
       expect(section.tagName.toLowerCase()).toBe("article");
       expect(section).toHaveClass("section");
-      expect(section).toHaveClass("bg-black");
+      expect(section).toHaveClass("background-contrast");
+      expect(section).toHaveClass("text-inverse");
       expect(section).toHaveClass("section--xsmall");
     });
 
@@ -530,7 +551,7 @@ describe("Section Component Unit Tests", () => {
       const { getByTestId } = render(
         <Section
           data-testid="test-section"
-          color="orange"
+          color="background-accent"
           spacing="default"
           tag="main"
           className="custom-class"
@@ -542,7 +563,7 @@ describe("Section Component Unit Tests", () => {
 
       expect(section.tagName.toLowerCase()).toBe("main");
       expect(section).toHaveClass("section");
-      expect(section).toHaveClass("bg-orange");
+      expect(section).toHaveClass("background-accent");
       expect(section).toHaveClass("section--default");
       expect(section).toHaveClass("custom-class");
       expect(screen.getByText("Content")).toBeInTheDocument();
@@ -616,7 +637,7 @@ describe("Section Component Unit Tests", () => {
       const section = getByTestId("test-section");
 
       expect(section).toHaveClass("section");
-      expect(section).toHaveClass("bg-invalid-color");
+      expect(section).toHaveClass("invalid-color");
     });
 
     it("handles invalid spacing prop gracefully", () => {

package/src/components/Tag/Tag.tsx

@@ -12,6 +12,7 @@ export const colors = [
   "info",
   "warning",
   "danger",
+  "transparent",
 ] as const;
 
 export type TagColor = (typeof colors)[number];
@@ -20,6 +21,7 @@ export type TagSize = "small" | "large";
 interface CommonProps {
   color?: TagColor;
   size?: TagSize;
+  /** @deprecated */
   isInverse?: boolean;
   isDisabled?: boolean;
   className?: string;
@@ -30,14 +32,22 @@ interface CommonProps {
 type SpanProps = CommonProps &
   Omit<React.HTMLAttributes<HTMLSpanElement>, keyof CommonProps> & {
     onClick?: undefined;
+    href?: undefined;
   };
 
 type ButtonProps = CommonProps &
   Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof CommonProps> & {
     onClick: React.MouseEventHandler<HTMLButtonElement>;
+    href?: undefined;
   };
 
-type TagProps = SpanProps | ButtonProps;
+type AnchorProps = CommonProps &
+  Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof CommonProps> & {
+    href: string;
+    onClick?: undefined;
+  };
+
+type TagProps = SpanProps | ButtonProps | AnchorProps;
 
 export const CLASS_ROOT = "tag";
 
@@ -45,7 +55,6 @@ const Tag = React.forwardRef<HTMLElement, TagProps>((props, ref) => {
   const {
     color,
     size,
-    isInverse,
     isDisabled,
     className,
     children,
@@ -54,7 +63,6 @@ const Tag = React.forwardRef<HTMLElement, TagProps>((props, ref) => {
   } = props;
 
   const classes = cx(CLASS_ROOT, className, {
-    "tag--inverse": isInverse,
     [`tag--${color}`]: color,
     [`tag--${size}`]: size,
   });
@@ -77,6 +85,22 @@ const Tag = React.forwardRef<HTMLElement, TagProps>((props, ref) => {
     );
   }
 
+  if ("href" in props && props.href) {
+    const { href, ...anchorProps } =
+      other as React.AnchorHTMLAttributes<HTMLAnchorElement>;
+    return (
+      <a
+        className={classes}
+        href={href}
+        aria-disabled={isDisabled ? "true" : undefined}
+        ref={ref as React.Ref<HTMLAnchorElement>}
+        {...anchorProps}
+      >
+        {children}
+      </a>
+    );
+  }
+
   if ("actionButton" in props && actionButton) {
     const spanProps = other as Omit<
       React.HTMLAttributes<HTMLDivElement>,

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

@@ -84,6 +84,11 @@ $colors: (
     background-color: map.get(color.$colors-light, icon-warning),
     color: color.$black,
   ),
+  "transparent": (
+    background-color: transparent,
+    color: var(--color-text-default),
+    border: 1px solid var(--color-border-strong),
+  ),
 );
 
 $states: (
@@ -107,6 +112,32 @@ $states: (
   ),
 );
 
+$states-transparent-color: (
+  default: (
+    background-color: transparent,
+    color: var(--color-text-default),
+  ),
+  hover: (
+    border-color: var(--color-fill-secondary),
+  ),
+  active: (
+    color: var(--color-text-inverse),
+    background-color: var(--color-fill-secondary),
+    border-color: var(--color-fill-secondary),
+  ),
+  focus: (
+    background-color: transparent,
+    color: var(--color-text-default),
+    outline: 2px solid var(--color-background-contrast) "!important",
+    border-color: transparent,
+  ),
+  disabled: (
+    color: var(--color-text-disabled),
+    background-color: transparent,
+    border-color: var(--color-border-strong),
+  ),
+);
+
 $icon-states: (
   default: (
     color: var(--color-text-default),

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

@@ -18,6 +18,10 @@
   background-color: map.get($props, background-color);
 }
 
+@mixin color-transparent() {
+  border: 1px solid var(--color-border-strong);
+}
+
 @mixin buttton-disabled($is-icon: false) {
   $config: if($is-icon, config.$icon-states, config.$states);
 
@@ -28,13 +32,16 @@
   }
 }
 
+@mixin button-base {
+  cursor: pointer;
+  outline-offset: 2px;
+}
+
 @mixin button($is-icon: false) {
   $config: if($is-icon, config.$icon-states, config.$states);
 
   @include generate.css-map($config, "default");
-
-  cursor: pointer;
-  outline-offset: 2px;
+  @include button-base;
 
   @media (hover: hover) {
     &:hover {
@@ -52,3 +59,32 @@
     z-index: 2;
   }
 }
+
+@mixin button-transparent() {
+  @include generate.css-map(config.$states-transparent-color, "default");
+  @include button-base;
+
+  @media (hover: hover) {
+    &:hover {
+      @include generate.css-map(config.$states-transparent-color, "hover");
+    }
+  }
+
+  &:focus-visible {
+    @include generate.css-map(config.$states-transparent-color, "focus");
+  }
+
+  &:active,
+  &.is-active {
+    @include generate.css-map(config.$states-transparent-color, "active");
+    z-index: 2;
+  }
+}
+
+@mixin button-transparent-disabled() {
+  &[aria-disabled="true"],
+  &[disabled] {
+    @include generate.css-map(config.$states-transparent-color, "disabled");
+    cursor: not-allowed;
+  }
+}

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

@@ -20,12 +20,38 @@
       }
     }
 
-    &:where(button) {
+    // Transparent class is a special variant of color, it's not possible to make transparent variant for each color at the moment.
+    &--transparent {
+      @include mixins.color-transparent();
+
+      &:where(button) {
+        @include mixins.button-transparent();
+        z-index: 2;
+      }
+
+      &:where(a) {
+        @include mixins.button-transparent();
+        z-index: 2;
+        text-decoration: none;
+      }
+
+      @include mixins.button-transparent-disabled();
+    }
+
+    &:not(&--transparent):where(button) {
+      @include mixins.button();
+      z-index: 2;
+    }
+
+    &:not(&--transparent):where(a) {
       @include mixins.button();
       z-index: 2;
+      text-decoration: none;
     }
 
-    @include mixins.buttton-disabled();
+    &:not(&--transparent) {
+      @include mixins.buttton-disabled();
+    }
 
     &__wrapper {
       position: relative;

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

@@ -30,12 +30,30 @@ const example = (
     >
       Large with action button
     </Tag>
+
+    <Tag onClick={() => {}}>Clickable tag</Tag>
+
+    <Tag onClick={() => {}} isDisabled>
+      Disabled clickable tag
+    </Tag>
+
+    <Tag href="/test">Link tag</Tag>
+
+    <Tag href="https://example.com" target="_blank" rel="noopener">
+      External link tag
+    </Tag>
+
+    <Tag href="/test" isDisabled>
+      Disabled link tag
+    </Tag>
   </>
 );
 
 it("is valid html", () => {
   const { container } = render(example);
-  expect(container).toHTMLValidate();
+  expect(container).toHTMLValidate({
+    rules: { "attribute-boolean-style": "off" },
+  });
 });
 
 it("is accessible", async () => {

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

@@ -55,6 +55,99 @@ describe("rendering", () => {
       });
     });
 
+    describe("interactive functionality", () => {
+      describe("onClick prop", () => {
+        it("renders as button when onClick is provided", () => {
+          const handleClick = jest.fn();
+          const { getByRole } = render(
+            <Tag onClick={handleClick}>Clickable Tag</Tag>,
+          );
+          expect(getByRole("button")).toBeInTheDocument();
+          expect(getByRole("button")).toHaveClass("tag");
+        });
+
+        it("calls onClick when clicked", () => {
+          const handleClick = jest.fn();
+          const { getByRole } = render(
+            <Tag onClick={handleClick}>Clickable Tag</Tag>,
+          );
+          getByRole("button").click();
+          expect(handleClick).toHaveBeenCalledTimes(1);
+        });
+
+        it("does not call onClick when disabled", () => {
+          const handleClick = jest.fn();
+          const { getByRole } = render(
+            <Tag onClick={handleClick} isDisabled>
+              Disabled Clickable Tag
+            </Tag>,
+          );
+          expect(getByRole("button")).toBeDisabled();
+          expect(getByRole("button")).toHaveAttribute("aria-disabled", "true");
+        });
+
+        it("has button type set to 'button'", () => {
+          const handleClick = jest.fn();
+          const { getByRole } = render(
+            <Tag onClick={handleClick}>Clickable Tag</Tag>,
+          );
+          expect(getByRole("button")).toHaveAttribute("type", "button");
+        });
+      });
+
+      describe("href prop", () => {
+        it("renders as anchor when href is provided", () => {
+          const { getByRole } = render(<Tag href="/test">Link Tag</Tag>);
+          expect(getByRole("link")).toBeInTheDocument();
+          expect(getByRole("link")).toHaveClass("tag");
+        });
+
+        it("sets href attribute correctly", () => {
+          const { getByRole } = render(<Tag href="/test-url">Link Tag</Tag>);
+          expect(getByRole("link")).toHaveAttribute("href", "/test-url");
+        });
+
+        it("supports external links with target attribute", () => {
+          const { getByRole } = render(
+            <Tag href="https://example.com" target="_blank">
+              External Link
+            </Tag>,
+          );
+          expect(getByRole("link")).toHaveAttribute(
+            "href",
+            "https://example.com",
+          );
+          expect(getByRole("link")).toHaveAttribute("target", "_blank");
+        });
+
+        it("sets aria-disabled when isDisabled is true", () => {
+          const { getByRole } = render(
+            <Tag href="/test" isDisabled>
+              Disabled Link Tag
+            </Tag>,
+          );
+          expect(getByRole("link")).toHaveAttribute("aria-disabled", "true");
+        });
+
+        it("supports other anchor attributes", () => {
+          const { getByRole } = render(
+            <Tag href="/test" rel="noopener" title="Test link">
+              Link with attributes
+            </Tag>,
+          );
+          expect(getByRole("link")).toHaveAttribute("rel", "noopener");
+          expect(getByRole("link")).toHaveAttribute("title", "Test link");
+        });
+      });
+
+      describe("default rendering", () => {
+        it("renders as span when neither onClick nor href is provided", () => {
+          const { getByText } = render(<Tag>Default Tag</Tag>);
+          expect(getByText("Default Tag").tagName).toBe("SPAN");
+        });
+      });
+    });
+
     describe("action button", () => {
       it("renders with action button", () => {
         const { getByRole } = render(

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

@@ -19,7 +19,7 @@
       left: 0;
       right: 0;
       bottom: 0;
-      border: 1px solid var(--color-border-subtle);
+      border: 1px solid var(--color-border-strong);
       border-radius: inherit;
       pointer-events: none;
     }