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

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

@@ -75,4 +75,77 @@ describe("rendering Modal", () => {
       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(
+        <div id="root">
+          <Modal
+            id="modal-no-header-spacing"
+            data-testid="modal-no-header-spacing"
+            disableHeaderSpacing
+          />
+        </div>,
+      );
+      const child = getByTestId(
+        "modal-no-header-spacing",
+      ).getElementsByClassName("modal__header--no-spacing");
+      expect(child.length).toBe(1);
+      expect(child[0]).toHaveClass("modal__header--no-spacing");
+    });
+  });
+  describe("disableFooterSpacing prop", () => {
+    it("should have modal__footer--no-spacing class when disableFooterSpacing is true", () => {
+      const { getByTestId } = render(
+        <div id="root">
+          <Modal
+            id="modal-no-footer-spacing"
+            data-testid="modal-no-footer-spacing"
+            disableFooterSpacing
+          />
+        </div>,
+      );
+      const child = getByTestId(
+        "modal-no-footer-spacing",
+      ).getElementsByClassName("modal__footer--no-spacing");
+      expect(child.length).toBe(1);
+      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,25 +15,41 @@ 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" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("modal__body--no-spacing");
+    });
   });
 });

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 */
@@ -22,7 +22,7 @@ interface PaginationProps {
   /** Dark theme */
   colorScheme?: "light" | "dark";
   /** All pagination items - buttons & numbers */
-  items: PaginationItem[];
+  items: PaginationItemProps[];
   /** Accessibility label */
   label?: string;
   /** Additional CSS class name */

package/src/components/Pill/Pill.tsx

@@ -3,17 +3,22 @@ import cx from "classnames";
 
 const CLASS_ROOT = "pill";
 
+export const pillColors = ["white", "gray", "transparent", "orange"] 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";
+  colorScheme?: "light" | "dark";
 }
 
 const Pill: React.FC<PillProps> = ({
   className,
   children,
   size,
+  color,
   colorScheme,
   ...other
 }) => (
@@ -21,9 +26,9 @@ const Pill: React.FC<PillProps> = ({
     className={cx(
       CLASS_ROOT,
       {
-        "is-dark": colorScheme === "dark",
+        [`${CLASS_ROOT}--${color}`]: color, // Only apply modifier if color is specified
         "is-light": colorScheme === "light",
-        "is-transparent": colorScheme === "transparent",
+        "is-dark": colorScheme === "dark",
         [CLASS_ROOT + "--" + size]: size,
       },
       className,

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

@@ -1,10 +1,11 @@
 @use "../../../styles/tokens/color";
 @use "../../../styles/tools/convert";
+@use "sass:map";
 
 $base: (
-  background-color: var(--color-surface-contrast),
-  color: var(--color-text-inverse),
   font-weight: bold,
+  background-color: map.get(color.$colors-dark, border-subtle),
+  color: color.$white,
 );
 
 $sizes: (
@@ -20,3 +21,22 @@ $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),
+  ),
+  "orange": (
+    background-color: var(--color-icon-brand),
+    color: var(--color-text-inverse),
+  ),
+  "transparent": (
+    background-color: rgba(#ffffff, 0.5),
+    color: var(--color-text-default),
+  ),
+);

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

@@ -1,15 +1,19 @@
 @use "../../../styles/tools/generate";
 @use "./config";
 @use "./mixins";
+@use "sass:map";
 
 @layer components {
   .pill {
     @include mixins.base();
     @include mixins.sizes();
 
-    &.is-transparent {
-      color: var(--color-text-default);
-      background-color: rgba(#ffffff, 0.5);
+    @each $colorName, $colorProps in config.$colors {
+      &--#{$colorName} {
+        @each $property, $value in $colorProps {
+          #{$property}: $value;
+        }
+      }
     }
   }
 }

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

@@ -18,15 +18,19 @@ 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="black">D</Pill>
+      <Pill color="white">L</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>
+    </p>
   </>
 );
 

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

@@ -35,25 +35,54 @@ describe("rendering Pill", () => {
       expect(getByTestId("test-id")).toHaveClass("pill--large");
     });
 
-    it("has colorScheme class when colorScheme prop is set", () => {
+    it("has default black styling without modifier", () => {
+      const { getByTestId } = render(<Pill data-testid="test-id">pill</Pill>);
+      expect(getByTestId("test-id")).toHaveClass("pill");
+      expect(getByTestId("test-id")).not.toHaveClass("pill--black");
+    });
+
+    it("has white class when color is white", () => {
       const { getByTestId } = render(
-        <Pill colorScheme="transparent" data-testid="test-id">
+        <Pill color="white" data-testid="test-id">
           pill
         </Pill>,
       );
-      expect(getByTestId("test-id")).toHaveClass("is-transparent");
+      expect(getByTestId("test-id")).toHaveClass("pill--white");
     });
 
-    it("has dark colorScheme class when colorScheme is dark", () => {
+    it("has gray class when color is gray", () => {
       const { getByTestId } = render(
-        <Pill colorScheme="dark" data-testid="test-id">
+        <Pill color="gray" data-testid="test-id">
           pill
         </Pill>,
       );
-      expect(getByTestId("test-id")).toHaveClass("is-dark");
+      expect(getByTestId("test-id")).toHaveClass("pill--gray");
     });
 
-    it("has light colorScheme class when colorScheme is light", () => {
+    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("pill--transparent");
+    });
+
+    it("supports all available colors", () => {
+      const colors = ["white", "gray", "transparent"];
+
+      colors.forEach((color) => {
+        const { getByTestId } = render(
+          <Pill color={color} data-testid={`test-${color}`}>
+            {color}
+          </Pill>,
+        );
+
+        expect(getByTestId(`test-${color}`)).toHaveClass(`pill--${color}`);
+      });
+    });
+
+    it("has is-light class when colorScheme is light", () => {
       const { getByTestId } = render(
         <Pill colorScheme="light" data-testid="test-id">
           pill
@@ -62,6 +91,15 @@ describe("rendering Pill", () => {
       expect(getByTestId("test-id")).toHaveClass("is-light");
     });
 
+    it("has is-dark class when colorScheme is dark", () => {
+      const { getByTestId } = render(
+        <Pill colorScheme="dark" data-testid="test-id">
+          pill
+        </Pill>,
+      );
+      expect(getByTestId("test-id")).toHaveClass("is-dark");
+    });
+
     it("passes other props", () => {
       const { getByTestId } = render(<Pill data-testid="test">Pill</Pill>);
       expect(getByTestId("test")).toBeInTheDocument();

package/src/components/Preview/PreviewGenerator.tsx

@@ -81,6 +81,7 @@ interface PreviewBackground {
 }
 
 interface PreviewProps {
+  isDark?: boolean;
   bgTheme?: string | boolean;
   bgThemeColors?: Record<string, string>;
   bgThemeExcludedColors?: string[];
@@ -97,7 +98,6 @@ interface PreviewProps {
   enableFullscreen?: boolean;
   hasCodePreview?: boolean;
   html?: string;
-  interactiveProps?: Record<string, any>;
   jsxCode?: string; // Pre-generated JSX string (from server component)
   [key: string]: any;
 }
@@ -116,37 +116,36 @@ const getBackgroundsAsArray = (
     return acc;
   }, []);
 
-// Map human-friendly color names to bg-* utility classes
+// Map names to only the 6 allowed background classes
 const getBgClassFromName = (name: string): string => {
   const normalized = name.toLowerCase().replace(/\s+/g, "-");
-  const n = normalized === "grey" ? "gray" : normalized;
-  if (n === "none") return "bg-none";
-  return `bg-${n}`; // e.g. white -> bg-white, orange-dark -> bg-orange-dark
-};
 
-// Determine contrast helper class for nested component styling
-const getThemeClassFromName = (name: string): string => {
-  const n = name.toLowerCase();
-  // Only black switches global dark tokens; other colors keep light tokens
-  return n === "black" ? "is-dark" : "is-light";
+  // Only allow these background classes
+  const allowedBackgrounds = [
+    "background-primary",
+    "background-secondary",
+    "background-contrast",
+    "background-accent",
+    "background-accent1-blog",
+    "background-accent2-blog",
+    "background-none",
+  ];
+
+  // Return the class if it's in the allowed list, otherwise default to background-primary
+  return allowedBackgrounds.includes(normalized)
+    ? normalized
+    : "background-primary";
 };
 
 const PreviewGenerator: FunctionComponent<PreviewProps> = ({
-  bgTheme = "white",
+  bgTheme = "background-primary",
   bgThemeColors = {
-    White: "bg-white",
-    Gray: "bg-gray",
-    Black: "bg-black",
-    Orange: "bg-orange",
-    "Orange Dark": "bg-orange-dark",
-    Blue: "bg-blue",
-    Green: "bg-green",
-    Pink: "bg-pink",
-    Violet: "bg-violet",
-    Yellow: "bg-yellow",
-    "Yellow Lighter": "bg-yellow-lighter",
-    Red: "bg-red",
-    None: "bg-none",
+    "Background Primary": "background-primary",
+    "Background Secondary": "background-secondary",
+    "Background Contrast": "background-contrast",
+    "Background Accent": "background-accent",
+    "Background Accent1 Blog": "background-accent1-blog",
+    "Background Accent2 Blog": "background-accent2-blog",
   },
   bgThemeExcludedColors = [],
   children,
@@ -157,12 +156,13 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
   enableFullscreen = true,
   hasCodePreview = true,
   html,
-  interactiveProps = {},
   jsxCode,
+  isDark = false,
   ...other
 }) => {
   const [isCodeShown, setIsCodeShown] = useState(false);
   const [isFullscreen, setIsFullscreen] = useState(false);
+  const [isDarkMode, setIsDarkMode] = useState(isDark);
   // Ensure unique dropdown id per Preview instance to avoid id collisions (SSR-safe)
   const backgroundDropdownId = `background-select-${useId()}`;
   const [previewBackground, setPreviewBackground] = useState<PreviewBackground>(
@@ -195,10 +195,10 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
 
         return {
           label: bgTheme,
-          value: bgThemeColors[bgTheme] || "bg-white",
+          value: bgThemeColors[bgTheme] || "background-primary",
         };
       }
-      return { label: "white", value: "bg-white" };
+      return { label: "Background Primary", value: "background-primary" };
     },
   );
 
@@ -214,7 +214,11 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
     setIsFullscreen(!isFullscreen);
   }
 
-  const themeClass = getThemeClassFromName(previewBackground.label);
+  function handleToggleDarkMode() {
+    setIsDarkMode(!isDarkMode);
+  }
+
+  const themeClass = isDarkMode ? "is-dark" : "is-light";
   const bgClass = getBgClassFromName(previewBackground.label);
 
   const classes = cx(CLASS_ROOT, themeClass, bgClass, className);
@@ -230,6 +234,23 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
       bgThemeExcludedColors,
     );
 
+    // Add theme toggle button
+    actions.push(
+      <Button key="theme-toggle" onClick={handleToggleDarkMode} type="ghost">
+        <Icon
+          name={isDarkMode ? "sleep" : "flashlight"}
+          size="medium"
+          fill={"currentColor"}
+          style={{ marginRight: "0.5rem" }}
+        />
+        {isDarkMode ? (
+          <code className="small bold">{".is-dark"}</code>
+        ) : (
+          <code className="small bold">{".is-light"}</code>
+        )}
+      </Button>,
+    );
+
     if (bgColorsOptions.length) {
       actions.push(
         <Dropdown
@@ -289,9 +310,34 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
       ? children(renderAsFunctionContext)
       : children;
 
-  const toRender = childrenToRender || (
-    <div dangerouslySetInnerHTML={{ __html: html || "" }} />
-  );
+  // Wrap the component to ensure theme classes are applied to the root element
+  const wrapComponentWithTheme = (component: ReactNode) => {
+    if (!component) return component;
+
+    // If it's a single React element, clone it with additional classes
+    if (React.isValidElement(component)) {
+      const props = component.props as any;
+      const existingClassName = props.className || "";
+      const newClassName = cx(existingClassName, themeClass);
+
+      return React.cloneElement(component, {
+        ...props,
+        className: newClassName,
+      } as any);
+    }
+
+    // For multiple elements or other cases, wrap in a div with theme classes
+    return <div className={cx(themeClass)}>{component}</div>;
+  };
+
+  const toRender = childrenToRender ? (
+    wrapComponentWithTheme(childrenToRender)
+  ) : html ? (
+    <div
+      className={cx(themeClass)}
+      dangerouslySetInnerHTML={{ __html: html || "" }}
+    />
+  ) : null;
 
   const toCode =
     (code && typeof code === "function"
@@ -337,6 +383,4 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
   );
 };
 
-PreviewGenerator.displayName = "PreviewGenerator";
-
 export { PreviewGenerator };

package/src/components/PromoBanner/PromoBanner.tsx

@@ -2,27 +2,33 @@ import React from "react";
 import cx from "classnames";
 import { Grid, GridCol } from "../Grid";
 import { Image } from "../Image";
-import { Button } from "../Button";
 
 interface PromoBannerProps {
   colorScheme?: "light" | "dark";
   className?: string;
-  title: string;
-  secondaryTitle?: string;
-  description: string;
-  buttonText: string;
   image?: string;
+  alignImage?: "bottom" | "top";
+  imageFullWidth?: boolean;
+  /** Make image extend to the edge of viewport even when inside container */
+  bleedImage?: boolean;
+  children?: React.ReactNode;
+  itemClassName?: string;
+  imageClassName?: string;
+  variant?: "vertical";
 }
 
 const CLASS_ROOT = "promo-banner";
 export const PromoBanner = ({
-  title,
-  secondaryTitle,
-  description,
-  buttonText,
   image,
   colorScheme,
   className,
+  alignImage,
+  bleedImage,
+  children,
+  itemClassName,
+  imageClassName,
+  variant,
+  imageFullWidth,
 }: PromoBannerProps) => {
   const classes = cx(
     CLASS_ROOT,
@@ -33,33 +39,45 @@ export const PromoBanner = ({
     className,
   );
   return (
-    <div className={classes}>
-      <Grid>
+    <Grid className={classes}>
+      <GridCol
+        size={
+          variant === "vertical"
+            ? { xs: 12, sm: 10, md: 8, lg: 6 }
+            : { xs: 12, md: image ? 6 : 7 }
+        }
+        className={cx(
+          `${CLASS_ROOT}__item`,
+          {
+            "align-items-center align-center align-self-center":
+              variant === "vertical",
+          },
+          itemClassName,
+        )}
+      >
+        {children}
+      </GridCol>
+
+      {image && (
         <GridCol
-          size={{ xs: 12, md: image ? 6 : 8 }}
-          className={`${CLASS_ROOT}__item`}
+          size={variant === "vertical" ? { xs: 12 } : { xs: 12, md: 6 }}
+          className={cx(
+            `${CLASS_ROOT}__image`,
+            {
+              [`${CLASS_ROOT}__image--bleed-right`]: bleedImage,
+              [`align-self-${alignImage}`]: alignImage,
+              "align-center": variant === "vertical",
+            },
+            imageClassName,
+          )}
         >
-          <h2 className="display-3 thin mb-medium">
-            <span
-              className={`${secondaryTitle ? `${CLASS_ROOT}__item-title` : ""}`}
-            >
-              {title}
-            </span>
-            {secondaryTitle && (
-              <span className={`color-orange ml-small`}>{secondaryTitle}</span>
-            )}
-          </h2>
-          <p className={`mb-large ${image ? "show-lg" : ""}`}>{description}</p>
-          <Button type="fill" size="large">
-            {buttonText}
-          </Button>
+          <Image
+            src={image}
+            alt="Obrázok"
+            className={cx("mb-none", { fullwidth: imageFullWidth })}
+          />
         </GridCol>
-        {image && (
-          <GridCol size={{ xs: 12, md: 6 }} className={`${CLASS_ROOT}__image`}>
-            <Image src={image} alt="" className="mb-none" />
-          </GridCol>
-        )}
-      </Grid>
-    </div>
+      )}
+    </Grid>
   );
 };