@orangesk/orange-design-system 2.0.0-beta.13 → 2.0.0-beta.15

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();
+    }
   }
 }

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

@@ -0,0 +1,67 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+import { BodyBanner } from "../";
+
+const example = (
+  <>
+    <BodyBanner size="small" buttonText="Learn More">
+      <h3>Small Banner Example</h3>
+      <p>This is a small banner with image and call-to-action button.</p>
+    </BodyBanner>
+
+    <BodyBanner
+      size="large"
+      buttonText="Get Started"
+      imageUrl="https://picsum.photos/seed/test/640/380"
+    >
+      <h3>Large Banner Example</h3>
+      <p>This is a large banner with two-column layout.</p>
+    </BodyBanner>
+
+    <BodyBanner
+      size="small"
+      color="background-accent"
+      buttonText="Discover"
+      imageUrl="https://picsum.photos/seed/test2/640/380"
+    >
+      <h3>Accent Background</h3>
+      <p>Brand accent background banner.</p>
+    </BodyBanner>
+
+    <BodyBanner
+      size="small"
+      color="surface-subtle"
+      buttonText="Explore"
+      imageUrl="https://picsum.photos/seed/test3/640/380"
+    >
+      <h3>Subtle Surface</h3>
+      <p>Gentle background color banner.</p>
+    </BodyBanner>
+
+    <BodyBanner size="small" buttonText="Learn More">
+      <h3>Text-Only Banner</h3>
+      <p>Banner without image focusing on text content.</p>
+    </BodyBanner>
+
+    <BodyBanner
+      size="large"
+      color="background-primary"
+      buttonText="Start Now"
+      imageUrl="https://picsum.photos/seed/test4/640/380"
+    >
+      <h3>Primary Background</h3>
+      <p>Clean white background banner.</p>
+    </BodyBanner>
+  </>
+);
+
+it("is valid html", () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate();
+});
+
+it("is accessible", async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});

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

@@ -0,0 +1,194 @@
+import { render } from "@testing-library/react";
+
+import { BodyBanner } from "../";
+
+describe("rendering BodyBanner", () => {
+  describe("initial state", () => {
+    it("has default className body-banner", () => {
+      const { container } = render(<BodyBanner />);
+      expect(container.querySelector(".body-banner")).toBeInTheDocument();
+      expect(container.querySelector(".body-banner")).toHaveClass(
+        "body-banner",
+      );
+    });
+  });
+
+  describe("sizes", () => {
+    it("doesn't have body-banner--small class when size is small (default)", () => {
+      const { container } = render(<BodyBanner />);
+      expect(container.querySelector(".body-banner")).not.toHaveClass(
+        "body-banner--small",
+      );
+    });
+
+    it("has body-banner--large class when size is large", () => {
+      const { container } = render(<BodyBanner size="large" />);
+      expect(container.querySelector(".body-banner")).toHaveClass(
+        "body-banner--large",
+      );
+    });
+  });
+
+  describe("colors", () => {
+    it("doesn't have color class when color is background-primary (default)", () => {
+      const { container } = render(<BodyBanner color="background-primary" />);
+      expect(container.querySelector(".body-banner")).not.toHaveClass(
+        "background-primary",
+      );
+    });
+
+    it("has background-primary class by default (when no color specified)", () => {
+      const { container } = render(<BodyBanner />);
+      expect(container.querySelector(".body-banner")).toHaveClass(
+        "body-banner",
+      );
+    });
+
+    it("has background-accent class when color is background-accent", () => {
+      const { container } = render(<BodyBanner color="background-accent" />);
+      expect(container.querySelector(".body-banner")).toHaveClass(
+        "background-accent",
+      );
+    });
+
+    it("has surface-subtle class when color is surface-subtle", () => {
+      const { container } = render(<BodyBanner color="surface-subtle" />);
+      expect(container.querySelector(".body-banner")).toHaveClass(
+        "surface-subtle",
+      );
+    });
+
+    it("supports all available colors", () => {
+      const colors = [
+        "background-primary",
+        "background-accent",
+        "surface-subtle",
+      ];
+
+      colors.forEach((color) => {
+        const { container } = render(<BodyBanner color={color} />);
+
+        if (color !== "background-primary") {
+          expect(container.querySelector(".body-banner")).toHaveClass(color);
+        }
+      });
+    });
+  });
+
+  describe("children and button", () => {
+    it("renders children content", () => {
+      const { getByText } = render(
+        <BodyBanner>
+          <h3>Test Title</h3>
+          <p>Test Description</p>
+        </BodyBanner>,
+      );
+      expect(getByText("Test Title")).toBeInTheDocument();
+      expect(getByText("Test Description")).toBeInTheDocument();
+    });
+
+    it("renders button text", () => {
+      const { getByText } = render(<BodyBanner buttonText="Learn More" />);
+      expect(getByText("Learn More")).toBeInTheDocument();
+    });
+
+    it("renders both children and button", () => {
+      const { getByText } = render(
+        <BodyBanner buttonText="Click Me">
+          <h3>Content</h3>
+        </BodyBanner>,
+      );
+      expect(getByText("Content")).toBeInTheDocument();
+      expect(getByText("Click Me")).toBeInTheDocument();
+    });
+  });
+
+  describe("image", () => {
+    it("renders image when imageUrl is provided", () => {
+      const { getByRole } = render(
+        <BodyBanner imageUrl="https://example.com/image.jpg" />,
+      );
+      const image = getByRole("img");
+      expect(image).toBeInTheDocument();
+      expect(image).toHaveAttribute("src", "https://example.com/image.jpg");
+    });
+
+    it("doesn't render image when imageUrl is not provided", () => {
+      const { queryByRole } = render(<BodyBanner />);
+      const image = queryByRole("img");
+      expect(image).not.toBeInTheDocument();
+    });
+
+    it("renders image in separate column when size is large", () => {
+      const { container, getAllByRole } = render(
+        <BodyBanner size="large" imageUrl="https://example.com/image.jpg" />,
+      );
+      const images = getAllByRole("img");
+      expect(images.length).toBe(1);
+      const imageContainer = container.querySelector(".body-banner__image");
+      expect(imageContainer).toBeInTheDocument();
+    });
+
+    it("renders image in content when size is small", () => {
+      const { container, getByRole } = render(
+        <BodyBanner size="small" imageUrl="https://example.com/image.jpg" />,
+      );
+      const imageContainer = container.querySelector(".body-banner__image");
+      expect(imageContainer).toBeInTheDocument();
+      const image = getByRole("img");
+      expect(image).toBeInTheDocument();
+    });
+  });
+
+  describe("className prop", () => {
+    it("has additional class when className is set", () => {
+      const { container } = render(<BodyBanner className="custom-class" />);
+      expect(container.querySelector(".body-banner")).toHaveClass(
+        "body-banner",
+      );
+      expect(container.querySelector(".body-banner")).toHaveClass(
+        "custom-class",
+      );
+    });
+  });
+
+  describe("button className prop", () => {
+    it("applies buttonClassName to the button", () => {
+      const { getByRole } = render(
+        <BodyBanner buttonText="Click" buttonClassName="custom-button-class" />,
+      );
+      const button = getByRole("button");
+      expect(button).toHaveClass("custom-button-class");
+    });
+  });
+
+  describe("responsive layout", () => {
+    it("renders grid structure with proper content column", () => {
+      const { container } = render(
+        <BodyBanner size="small">
+          <h3>Test</h3>
+        </BodyBanner>,
+      );
+      const gridCol = container.querySelector(".body-banner__content");
+      expect(gridCol).toBeInTheDocument();
+    });
+
+    it("has button container", () => {
+      const { container } = render(<BodyBanner buttonText="Click" />);
+      const buttonContainer = container.querySelector(".body-banner__button");
+      expect(buttonContainer).toBeInTheDocument();
+    });
+
+    it("has content-inner container", () => {
+      const { container } = render(
+        <BodyBanner>
+          <h3>Test</h3>
+        </BodyBanner>,
+      );
+      const contentInner = container.querySelector(
+        ".body-banner__content-inner",
+      );
+      expect(contentInner).toBeInTheDocument();
+    });
+  });
+});

package/src/components/Carousel/Carousel.static.ts

@@ -210,6 +210,7 @@ export default class Carousel {
       // Only add offset if there's actual bleeding (positive value)
       if (bleedAmount > 0) {
         // Update the Swiper configuration
+        // Add offset only on the right side for right bleed effect
         this.instance.params.slidesOffsetAfter = bleedAmount;
         this.instance.update();
       } else {

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

@@ -211,15 +211,21 @@
 }
 
 @mixin bleed-right-variant {
+  // Allow overflow on the left side at the carousel container level
+  overflow: visible;
+
+  .carousel__viewport-wrapper {
+    // Allow overflow from viewport
+    overflow: visible;
+  }
+
   .carousel__viewport {
     // Extend the viewport to the right edge of the screen
     width: calc(100% + 50vw - 50%);
     margin-right: 0;
-
-    // Keep left margin for container alignment
-    @include breakpoint.get("md") {
-      margin-left: convert.to-rem(50px);
-    }
+    margin-left: 0 !important; // Don't add left margin - let content flow naturally
+    overflow: visible !important; // Allow content to overflow on left side
+    overflow-y: hidden; // Still hide vertical overflow
 
     // On very large screens (above 2K), stop the bleeding effect entirely
     @media (min-width: 2560px) {

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

@@ -161,10 +161,10 @@
 
     &:hover {
       color: var(--color-text-default);
+    }
 
-      &--active {
-        color: var(--color-text-inverse);
-      }
+    &:hover &--active {
+      color: var(--color-text-inverse);
     }
 
     &--active {

package/src/components/FeatureAccordion/FeatureAccordion.tsx

@@ -88,7 +88,7 @@ const FeatureAccordion = (
           xs: 12,
           md: 6,
         }}
-        className={cx(`${CLASS_ROOT}__preview`, "hide", "show-md")}
+        className={cx(`${CLASS_ROOT}__preview`, "show-md")}
       >
         {childrenArray.map((child) => {
           const id = child.props.id;

package/src/components/Link/Link.tsx

@@ -18,6 +18,8 @@ export interface LinkProps {
   isUnderline?: boolean;
   /** whether the link should have normal font weight */
   isNormal?: boolean;
+  /** when true, adds the .link--no-accent modifier to disable orange accent color on hover (useful for dark backgrounds) */
+  noAccent?: boolean;
 }
 
 export const Link: React.FC<LinkProps & React.HTMLAttributes<HTMLElement>> = ({
@@ -26,6 +28,7 @@ export const Link: React.FC<LinkProps & React.HTMLAttributes<HTMLElement>> = ({
   colorScheme,
   isUnderline,
   isNormal,
+  noAccent,
   tag = "a",
   href,
   ...other
@@ -37,6 +40,7 @@ export const Link: React.FC<LinkProps & React.HTMLAttributes<HTMLElement>> = ({
       "is-light": colorScheme === "light",
       underline: isUnderline,
       normal: isNormal,
+      "link--no-accent": noAccent,
     },
     className,
   );

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

@@ -4,7 +4,7 @@
 @mixin base {
   font-weight: bold;
   text-decoration: underline;
-  color: var(--color-text-default);
+  color: inherit;
   background: none;
   text-decoration: none;
   cursor: pointer;
@@ -14,7 +14,13 @@
   p &,
   li &,
   dt &,
-  dd & {
+  dd &,
+  h1 &,
+  h2 &,
+  h3 &,
+  h4 &,
+  h5 &,
+  h6 & {
     font-weight: inherit;
   }
 }

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

@@ -24,7 +24,7 @@
     @include mixins.base-inherit();
 
     &:hover {
-      color: var(--color-text-accent) !important;
+      color: var(--color-text-accent);
       text-decoration: underline;
     }
     &:focus {
@@ -44,3 +44,10 @@
     @include mixins.icon-right;
   }
 }
+
+@layer utilities {
+  .link--no-accent:hover {
+    color: inherit !important;
+    text-decoration: underline;
+  }
+}

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

@@ -20,7 +20,7 @@
   justify-content: center;
 
   > * {
-    width: fit-content !important;
+    width: fit-content;
   }
 }
 

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

@@ -1,5 +1,4 @@
 @use "../../../styles/tokens/space";
-@use "../../../styles/tokens/color";
 @use "../../../styles/tools/convert";
 @use "sass:map";
 
@@ -46,43 +45,40 @@ $colors: (
     color: var(--color-text-default),
   ),
   "orange": (
-    background-color: map.get(color.$colors-light, icon-accent),
-    color: color.$black,
+    background-color: var(--tag-orange),
+    color: var(--tag-text-dark),
   ),
   "black": (
-    background-color: map.get(color.$colors-dark, border-subtle),
-    color: color.$white,
+    background-color: var(--tag-black),
+    color: var(--tag-text-light),
   ),
   "yellow": (
-    // TODO add to config
-    background-color: #fff6b6,
-    color: color.$black,
+    background-color: var(--tag-yellow),
+    color: var(--tag-text-dark),
   ),
   "green": (
-    // TODO add to config
-    background-color: #b8ebd6,
-    color: color.$black,
+    background-color: var(--tag-green),
+    color: var(--tag-text-dark),
   ),
   "blue": (
-    // TODO add to config
-    background-color: #b5e8f7,
-    color: color.$black,
+    background-color: var(--tag-blue),
+    color: var(--tag-text-dark),
   ),
   "success": (
-    background-color: map.get(color.$colors-light, icon-positive),
-    color: color.$white,
+    background-color: var(--tag-success),
+    color: var(--tag-text-light),
   ),
   "danger": (
-    background-color: map.get(color.$colors-light, icon-negative),
-    color: color.$white,
+    background-color: var(--tag-danger),
+    color: var(--tag-text-light),
   ),
   "info": (
-    background-color: map.get(color.$colors-light, icon-information),
-    color: color.$white,
+    background-color: var(--tag-info),
+    color: var(--tag-text-light),
   ),
   "warning": (
-    background-color: map.get(color.$colors-light, icon-warning),
-    color: color.$black,
+    background-color: var(--tag-warning),
+    color: var(--tag-text-dark),
   ),
   "transparent": (
     background-color: transparent,

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

@@ -40,7 +40,7 @@
 
           &:focus-visible,
           &:hover {
-            background-color: color.$gray-600;
+            background-color: var(--color-fill-moderate);
           }
 
           &:active,

package/src/styles/base/globals.scss

@@ -1,6 +1,7 @@
 @use "../tokens/base";
 @use "../tokens/space";
 @use "../tokens/color";
+@use "../tokens/tag-colors";
 
 // Consider to add more conditions for light and dark themes
 :root,
@@ -15,6 +16,9 @@
   @each $name, $value in color.$colors-light {
     --color-#{$name}: #{$value};
   }
+  @each $name, $value in tag-colors.$tag-colors-light {
+    --#{$name}: #{$value};
+  }
   color: var(--color-text-default);
 }
 
@@ -28,6 +32,9 @@
   @each $name, $value in color.$colors-dark {
     --color-#{$name}: #{$value};
   }
+  @each $name, $value in tag-colors.$tag-colors-dark {
+    --#{$name}: #{$value};
+  }
   color: var(--color-text-default);
 }
 

package/src/styles/tokens/tag-colors.scss

@@ -0,0 +1,20 @@
+// Tag-specific color palette for variants that exist outside the main semantic system.
+// Tags intentionally keep the same colors in both light and dark themes, so we expose
+// a shared palette that is applied regardless of theme context.
+
+$tag-shared-tag-colors: (
+  tag-orange: #ffc48f,
+  tag-black: #333333,
+  tag-yellow: #fff6b6,
+  tag-green: #b8ebd6,
+  tag-blue: #b5e8f7,
+  tag-success: #228722,
+  tag-danger: #cd3c14,
+  tag-info: #4170d8,
+  tag-warning: #ffcc00,
+  tag-text-dark: #000000,
+  tag-text-light: #ffffff,
+);
+
+$tag-colors-light: $tag-shared-tag-colors;
+$tag-colors-dark: $tag-shared-tag-colors;