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

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

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

@@ -1,37 +1,54 @@
-@use "sass:map";
-@use "sass:math";
-
+@use "sass:map" as sassmap;
+@use "./../../../styles/tools/convert";
 @use "./../../../styles/tools/generate";
-@use "./../../../styles/tools/layout";
 @use "./../../../styles/tokens/breakpoint";
 @use "./../../../styles/tokens/space";
+@use "./../../Section/styles/mixins" as section;
 
-@mixin promo-banner-base() {
-  background-color: var(--color-background-primary);
-  color: var(--color-text-default);
-  padding: space.get("xlarge") 70px;
+@mixin promo-banner-item() {
+  order: 2;
+  padding-top: space.get("xlarge");
+  padding-bottom: space.get("xlarge");
 
-  @include breakpoint.get("lg", "down") {
-    padding: space.get("xlarge") 20px;
+  @include breakpoint.get("md", "down") {
+    padding-top: space.get("large");
+    padding-bottom: space.get("medium");
   }
 
-  @include breakpoint.get("sm", "down") {
-    padding: 30px space.get("small");
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  > * {
+    width: fit-content !important;
   }
 }
 
 @mixin promo-banner-image() {
-  text-align: center;
+  order: 2;
+  text-align: end;
   align-self: center;
-}
 
-@mixin promo-banner-item() {
-  padding-right: space.get("xlarge") !important;
-  @include breakpoint.get("lg", "down") {
-    padding-right: 10px !important;
+  @include breakpoint.get("md", "down") {
+    text-align: center;
   }
 }
 
-@mixin promo-banner-item-title() {
-  margin-right: space.get("small") !important;
+@mixin promo-banner-image-bleed-right() {
+  @include breakpoint.get("sm", "down") {
+    order: 1;
+  }
+
+  > * {
+    // Extend image to the right edge of viewport even when inside .container
+    margin-right: calc((50vw - 100%) * -1);
+
+    @include breakpoint.get("md", "down") {
+      margin-right: calc((65vw - 100%) * -1);
+    }
+
+    @include breakpoint.get("sm", "down") {
+      margin-right: calc(85vw - 100%);
+    }
+  }
 }

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

@@ -1,22 +1,16 @@
-@use "../../../styles/tools/layout";
-@use "../../../styles/tokens/space";
-@use "../../../styles/tokens/breakpoint";
-@use "../../../styles/tools/generate";
 @use "./mixins";
 
 @layer components {
   .promo-banner {
-    @include mixins.promo-banner-base;
+    &__item {
+      @include mixins.promo-banner-item;
+    }
 
     &__image {
       @include mixins.promo-banner-image;
-    }
-
-    &__item {
-      @include mixins.promo-banner-item;
 
-      &-title {
-        @include mixins.promo-banner-item-title;
+      &--bleed-right {
+        @include mixins.promo-banner-image-bleed-right;
       }
     }
   }