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

package/src/components/Modal/ModalBody.tsx

@@ -1,23 +1,32 @@
 import React from "react";
 import cx from "classnames";
 
-export const colors = [
-  "white",
-  "gray",
-  "orange",
-  "orange-dark",
-  "black",
-  "blue",
-  "green",
-  "pink",
-  "violet",
-  "yellow",
+export const modalBodyColors = [
+  "background-primary",
+  "background-secondary",
+  "background-contrast",
+  "background-accent",
+  "background-accent1-blog",
+  "background-accent2-blog",
+  "surface-primary",
+  "surface-secondary",
+  "surface-tertiary",
+  "surface-subtle",
+  "surface-moderate",
+  "surface-contrast",
+  "surface-accent",
+  "fill-subtle",
+  "fill-accent1",
+  "fill-accent2",
+  "fill-accent3",
+  "fill-accent4",
+  "fill-accent5",
 ] as const;
 
-export type BodyColor = (typeof colors)[number];
+export type ModalBodyColor = (typeof modalBodyColors)[number];
 
 interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {
-  color?: BodyColor;
+  color?: ModalBodyColor;
   className?: string;
   children?: React.ReactNode;
   withTopPadding?: boolean;
@@ -36,7 +45,10 @@ const ModalBody: React.FC<ModalBodyProps> = ({
 }) => (
   <div
     className={cx(CLASS_ROOT, className, {
-      [`bg-${color}`]: color,
+      ...(color && color !== "background-contrast" ? { [color]: true } : {}),
+      ...(color === "background-contrast"
+        ? { [`${color} text-inverse`]: true }
+        : {}),
       [`${CLASS_ROOT}--colorful`]: color,
       [`${CLASS_ROOT}--with-top-padding`]: withTopPadding,
       [`${CLASS_ROOT}--no-spacing`]: disableSpacing,

package/src/components/Modal/ModalProductHeader.tsx

@@ -5,6 +5,8 @@ interface ModalProductHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   image?: React.ReactNode;
   /** Use small spacing */
   space?: "small";
+  /** Optional id for accessibility (e.g., for aria-labelledby) */
+  titleId?: string;
 }
 
 export const CLASS_ROOT = "modal__product";
@@ -12,7 +14,7 @@ export const CLASS_ROOT = "modal__product";
 const ModalProductHeader = React.forwardRef<
   HTMLDivElement,
   ModalProductHeaderProps
->(({ className, children, image, space, ...other }, ref) => {
+>(({ className, children, image, space, titleId, ...other }, ref) => {
   const classes = cx(
     `${CLASS_ROOT}-header`,
     {
@@ -25,7 +27,9 @@ const ModalProductHeader = React.forwardRef<
 
   return (
     <div className={classes} ref={ref} {...other}>
-      <div className={contentClasses}>{children}</div>
+      <div className={contentClasses} id={titleId}>
+        {children}
+      </div>
       {image}
     </div>
   );

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;
     }
@@ -283,59 +292,11 @@
   object-fit: cover;
   object-position: left;
   max-width: convert.to-rem(125px);
-}
+  width: auto;
+  height: auto;
+  aspect-ratio: auto;
 
-@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');
+  @include breakpoint.get("sm", "down") {
+    max-width: convert.to-rem(62.5px);
   }
 }
-
-@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

@@ -106,6 +106,7 @@
     &-header {
       display: flex;
       justify-content: space-between;
+      align-items: flex-start;
 
       > img {
         @include mixins.modal-product-image;
@@ -132,20 +133,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

@@ -53,28 +53,6 @@ describe("rendering Modal", () => {
       expect(child[0]).toHaveClass("modal__header");
     });
   });
-  describe("colorScheme prop", () => {
-    it("should have is-dark class when colorScheme is 'dark'", () => {
-      const { getByTestId } = render(
-        <div id="root">
-          <Modal id="modal-dark" data-testid="modal-dark" colorScheme="dark" />
-        </div>,
-      );
-      expect(getByTestId("modal-dark")).toHaveClass("is-dark");
-    });
-    it("should have is-light class when colorScheme is 'light'", () => {
-      const { getByTestId } = render(
-        <div id="root">
-          <Modal
-            id="modal-light"
-            data-testid="modal-light"
-            colorScheme="light"
-          />
-        </div>,
-      );
-      expect(getByTestId("modal-light")).toHaveClass("is-light");
-    });
-  });
   describe("disableHeaderSpacing prop", () => {
     it("should have modal__header--no-spacing class when disableHeaderSpacing is true", () => {
       const { getByTestId } = render(
@@ -111,41 +89,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");
-    });
-  });
 });

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

@@ -15,27 +15,36 @@ describe("rendering ModalBody", () => {
       const { getByText } = render(<ModalBody>test</ModalBody>);
       expect(getByText("test")).toBeInTheDocument();
     });
+
     [
-      "white",
-      "gray",
-      "orange",
-      "orange-dark",
-      "black",
-      "blue",
-      "green",
-      "pink",
-      "violet",
-      "yellow",
+      "background-primary",
+      "background-secondary",
+      "background-accent",
+      "surface-primary",
+      "surface-secondary",
+      "surface-tertiary",
+      "surface-subtle",
+      "fill-accent1",
+      "fill-accent2",
     ].map((color) => {
-      it(`has classes bg-${color} and modal__body--colorful when color is set to ${color}`, () => {
+      it(`has class ${color} and modal__body--colorful when color is set to ${color}`, () => {
         const { getByTestId } = render(
           <ModalBody color={color} data-testid="test-id" />,
         );
-        expect(getByTestId("test-id")).toHaveClass(`bg-${color}`);
+        expect(getByTestId("test-id")).toHaveClass(color);
         expect(getByTestId("test-id")).toHaveClass("modal__body--colorful");
       });
     });
 
+    it("has classes background-contrast and text-inverse when color is set to background-contrast", () => {
+      const { getByTestId } = render(
+        <ModalBody color="background-contrast" data-testid="test-id" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("background-contrast");
+      expect(getByTestId("test-id")).toHaveClass("text-inverse");
+      expect(getByTestId("test-id")).toHaveClass("modal__body--colorful");
+    });
+
     it("applies disableSpacing prop", () => {
       const { getByTestId } = render(
         <ModalBody disableSpacing data-testid="test-id" />,

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

@@ -70,4 +70,16 @@ describe("rendering ModalProductHeader", () => {
       container.querySelector(".modal__product-content"),
     ).toHaveTextContent("Product Header");
   });
+
+  it("has titleId attribute when titleId prop is provided", () => {
+    const { container } = render(
+      <ModalProductHeader titleId="test-title-id">
+        Product Header
+      </ModalProductHeader>,
+    );
+    expect(container.querySelector(".modal__product-content")).toHaveAttribute(
+      "id",
+      "test-title-id",
+    );
+  });
 });

package/src/components/Pagination/Pagination.tsx

@@ -5,7 +5,7 @@ import { PaginationItem } from "./PaginationItem";
 import Separator from "./Separator";
 import { getItemState } from "./helpers";
 
-interface PaginationItem {
+interface PaginationItemProps {
   /** Page link href */
   href: string;
   /** Text label inside page item */
@@ -19,10 +19,8 @@ interface PaginationItem {
 interface PaginationProps {
   /** Collapsed version */
   isCompact?: boolean;
-  /** Dark theme */
-  colorScheme?: "light" | "dark";
   /** All pagination items - buttons & numbers */
-  items: PaginationItem[];
+  items: PaginationItemProps[];
   /** Accessibility label */
   label?: string;
   /** Additional CSS class name */
@@ -37,18 +35,10 @@ export const Pagination: React.FC<PaginationProps> = ({
   className,
   label,
   isCompact,
-  colorScheme,
   items,
   ...other
 }) => {
-  const classes = cx(
-    CLASS_ROOT,
-    {
-      "is-dark": colorScheme === "dark",
-      "is-light": colorScheme === "light",
-    },
-    className,
-  );
+  const classes = cx(CLASS_ROOT, className);
 
   const activeIndex = useMemo(
     () => items.findIndex(({ isActive }) => isActive),

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

@@ -10,7 +10,7 @@
 
   display: flex;
   max-width: none;
-  margin-bottom: space.get();
+  margin-bottom: space.get("large");
 }
 
 @mixin separator() {

package/src/components/Pill/Pill.tsx

@@ -3,10 +3,24 @@ import cx from "classnames";
 
 const CLASS_ROOT = "pill";
 
+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> {
   className?: string;
   children?: ReactNode;
-  colorScheme?: "dark" | "light" | "transparent";
+  color?: PillColor;
   size?: "small" | "medium" | "large" | "xlarge" | "xxlarge";
 }
 
@@ -14,18 +28,16 @@ const Pill: React.FC<PillProps> = ({
   className,
   children,
   size,
-  colorScheme,
+  color,
   ...other
 }) => (
   <span
     className={cx(
       CLASS_ROOT,
       {
-        "is-dark": colorScheme === "dark",
-        "is-light": colorScheme === "light",
-        "is-transparent": colorScheme === "transparent",
         [CLASS_ROOT + "--" + size]: size,
       },
+      color,
       className,
     )}
     {...other}

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

@@ -1,10 +1,11 @@
 @use "../../../styles/tokens/color";
 @use "../../../styles/tools/convert";
+@use "sass:map";
 
 $base: (
+  font-weight: bold,
   background-color: var(--color-surface-contrast),
   color: var(--color-text-inverse),
-  font-weight: bold,
 );
 
 $sizes: (

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

@@ -1,15 +1,31 @@
+@use "../../../styles/tokens/color";
 @use "../../../styles/tools/generate";
 @use "./config";
 @use "./mixins";
+@use "sass:map";
 
 @layer components {
   .pill {
     @include mixins.base();
     @include mixins.sizes();
 
-    &.is-transparent {
+    &.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

@@ -18,14 +18,20 @@ const example = (
       Max 3 digits please. <Pill>123</Pill>
     </p>
     <p>
-      <Pill colorScheme="transparent">T</Pill>
-      <Pill colorScheme="dark">D</Pill>
-      <Pill colorScheme="light">L</Pill>
+      <Pill color="transparent">T</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>
+      <Pill size="xlarge">XL</Pill>
+      <Pill size="xxlarge">XXL</Pill>
     </p>
   </>
 );

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

@@ -35,31 +35,109 @@ describe("rendering Pill", () => {
       expect(getByTestId("test-id")).toHaveClass("pill--large");
     });
 
-    it("has colorScheme class when colorScheme prop is set", () => {
+    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 colorScheme="transparent" data-testid="test-id">
+        <Pill color="surface-tertiary" data-testid="test-id">
           pill
         </Pill>,
       );
-      expect(getByTestId("test-id")).toHaveClass("is-transparent");
+      expect(getByTestId("test-id")).toHaveClass("surface-tertiary");
     });
 
-    it("has dark colorScheme class when colorScheme is dark", () => {
+    it("has surface-subtle class when color is surface-subtle", () => {
       const { getByTestId } = render(
-        <Pill colorScheme="dark" data-testid="test-id">
+        <Pill color="surface-subtle" data-testid="test-id">
           pill
         </Pill>,
       );
-      expect(getByTestId("test-id")).toHaveClass("is-dark");
+      expect(getByTestId("test-id")).toHaveClass("surface-subtle");
     });
 
-    it("has light colorScheme class when colorScheme is light", () => {
+    it("has surface-moderate class when color is surface-moderate", () => {
       const { getByTestId } = render(
-        <Pill colorScheme="light" data-testid="test-id">
+        <Pill color="surface-moderate" data-testid="test-id">
           pill
         </Pill>,
       );
-      expect(getByTestId("test-id")).toHaveClass("is-light");
+      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", () => {