@orangesk/orange-design-system 2.0.0-beta.12 → 2.0.0-beta.14

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

@@ -30,20 +30,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 +49,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 +65,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/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/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/Modal/Modal.tsx

@@ -53,8 +53,6 @@ interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
   colorScheme?: "dark" | "light";
   /** Disables header paddings */
   disableHeaderSpacing?: boolean;
-  /** Disables body paddings */
-  disableBodySpacing?: boolean;
   /** Disables footer paddings */
   disableFooterSpacing?: boolean;
 }
@@ -85,7 +83,6 @@ const Modal: React.FC<ModalProps> = ({
   fullHeight,
   colorScheme,
   disableHeaderSpacing,
-  disableBodySpacing,
   disableFooterSpacing,
   ...other
 }) => {
@@ -149,12 +146,7 @@ const Modal: React.FC<ModalProps> = ({
         {renderBody ? (
           renderBody()
         ) : (
-          <ModalBody
-            disableSpacing={disableBodySpacing}
-            withTopPadding={!disableBodySpacing && !!renderHeader}
-          >
-            {children}
-          </ModalBody>
+          <ModalBody withTopPadding={!!renderHeader}>{children}</ModalBody>
         )}
         <div
           className={cx(`${CLASS_ROOT}__footer`, {

package/src/components/Modal/index.ts

@@ -4,4 +4,3 @@ export { ModalTitle } from "./ModalTitle";
 export { ModalCloseButton } from "./ModalCloseButton";
 export { ModalProductHeader } from "./ModalProductHeader";
 export { ModalProductFooter } from "./ModalProductFooter";
-export { ModalProductBody } from "./ModalProductBody";

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

@@ -42,7 +42,7 @@ $spacing: (
 
 $spacing-product-footer: (
   default: (
-    default: space.get("medium") space.get("small") convert.to-rem(40px),
-    md: space.get("medium") space.get("large") space.get("large") space.get("large"),
-  )
-)
+    default: space.get("medium"),
+    md: space.get("large"),
+  ),
+);

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

@@ -33,8 +33,9 @@
   z-index: config.$overlay-z-index;
   opacity: 0;
   transform: scale(1.1, 1.1);
-  transition: opacity config.$overlay-e,
-  transform config.$overlay-e;
+  transition:
+    opacity config.$overlay-e,
+    transform config.$overlay-e;
   backface-visibility: hidden;
 }
 
@@ -205,7 +206,7 @@
 
         @at-root {
           .modal__body--colorful + .modal__footer {
-            padding: $space !important;
+            padding: $space;
           }
         }
       }
@@ -214,11 +215,17 @@
 }
 
 @mixin sticky-footer() {
+  z-index: 1;
+
   @media screen and (min-height: 500px) {
     position: sticky;
     bottom: 0;
     background-color: var(--color-surface-primary);
   }
+
+  &.modal__footer--no-spacing {
+    padding: 0 !important;
+  }
 }
 
 @mixin modal-product-header($spacing) {
@@ -248,7 +255,9 @@
     flex-direction: column;
   }
 
-  @each $breakpoint, $value in map.get(config.$spacing-product-footer, "default") {
+  @each $breakpoint,
+    $value in map.get(config.$spacing-product-footer, "default")
+  {
     @include breakpoint.get($breakpoint) {
       padding: $value;
     }
@@ -284,58 +293,3 @@
   object-position: left;
   max-width: convert.to-rem(125px);
 }
-
-@mixin modal-product-body-subtitle-section() {
-  padding: convert.to-rem(15px) space.get();
-
-  @include breakpoint.get('md') {
-    padding: convert.to-rem(20px) space.get('large');
-  }
-}
-
-@mixin modal-product-body-list-section() {
-  padding: 0 space.get();
-
-  @include breakpoint.get('md') {
-    padding: space.get('small') space.get('large');
-  }
-
-  ul {
-    margin-bottom: 0;
-    padding: space.get('small') space.get() space.get('small') convert.to-rem(18px);
-    @include breakpoint.get('md') {
-      padding-right: 0;
-    }
-  }
-
-  li {
-    margin-bottom: convert.to-rem(15px);
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-}
-
-@mixin modal-product-body-accordion-section() {
-  padding: convert.to-rem(15px) space.get();
-
-  .accordion__body {
-    padding: 0 space.get() convert.to-rem(15px) space.get('small');
-    margin-bottom: 0;
-  }
-
-  @include breakpoint.get('md') {
-    padding: space.get('small') space.get('large');
-
-    .accordion__body {
-      padding: 0 space.get('large') convert.to-rem(15px) space.get('small');
-    }
-  }
-}
-
-@mixin modal-product-body-section-title() {
-  margin-bottom: 0 !important;
-
-  padding: space.get('small') 0;
-}

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

@@ -132,20 +132,4 @@
   .modal__product-footer-button {
     @include mixins.modal-product-footer-button();
   }
-
-  .modal__product-body-subtitle-section {
-    @include mixins.modal-product-body-subtitle-section();
-  }
-
-  .modal__product-body-list-section {
-    @include mixins.modal-product-body-list-section();
-  }
-
-  .modal__product-body-accordion-section {
-    @include mixins.modal-product-body-accordion-section();
-  }
-
-  .modal__product-body-section-title {
-    @include mixins.modal-product-body-section-title();
-  }
 }

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

@@ -111,41 +111,4 @@ describe("rendering Modal", () => {
       expect(child[0]).toHaveClass("modal__footer--no-spacing");
     });
   });
-  describe("disableBodySpacing prop", () => {
-    it("should have modal__body--no-spacing class when disableBodySpacing is true", () => {
-      const { getByTestId } = render(
-        <div id="root">
-          <Modal
-            id="modal-no-body-spacing"
-            data-testid="modal-no-body-spacing"
-            disableBodySpacing
-          />
-        </div>,
-      );
-      const child = getByTestId("modal-no-body-spacing").getElementsByClassName(
-        "modal__body--no-spacing",
-      );
-      expect(child.length).toBe(1);
-      expect(child[0]).toHaveClass("modal__body--no-spacing");
-    });
-
-    it("should not apply with-top-padding class on body when custom header renderer is present with disableBodySpacing prop", () => {
-      const { getByTestId } = render(
-        <div id="root">
-          <Modal
-            id="modal-no-body-spacing"
-            data-testid="modal-no-body-spacing"
-            disableBodySpacing
-            renderHeader={() => <div>Custom Header</div>}
-          />
-        </div>,
-      );
-      const child = getByTestId("modal-no-body-spacing").getElementsByClassName(
-        "modal__body",
-      );
-      expect(child.length).toBe(1);
-      expect(child[0]).not.toHaveClass("with-top-padding");
-      expect(child[0]).toHaveClass("modal__body--no-spacing");
-    });
-  });
 });