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

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[];
@@ -115,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,10 +157,12 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
   hasCodePreview = true,
   html,
   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>(
@@ -193,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" };
     },
   );
 
@@ -212,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);
@@ -228,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
@@ -360,6 +383,4 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
   );
 };
 
-PreviewGenerator.displayName = "PreviewGenerator";
-
 export { PreviewGenerator };

package/src/components/Progress/Progress.tsx

@@ -12,7 +12,6 @@ export interface ProgressProps {
   width?: number;
   className?: string;
   children?: React.ReactNode;
-  colorMode?: "light" | "dark";
 }
 
 const defaultProps = {
@@ -27,21 +26,10 @@ export const Progress: React.FC<ProgressProps> = ({
   value,
   width,
   className,
-  colorMode,
   ...other
 }) => {
   return (
-    <div
-      className={cx(
-        CLASS_ROOT,
-        {
-          "is-dark": colorMode === "dark",
-          "is-light": colorMode === "light",
-        },
-        className,
-      )}
-      {...other}
-    >
+    <div className={cx(CLASS_ROOT, className)} {...other}>
       <div className={`${CLASS_ROOT}__label`}>{label}</div>
       <div className={`${CLASS_ROOT}__bar`}>
         <div

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

@@ -1,12 +1,12 @@
-@use '../../../styles/tokens/color';
-@use '../../../styles/tokens/space';
+@use "../../../styles/tokens/color";
+@use "../../../styles/tokens/space";
 
 $layout: (
-  margin-bottom: space.get(),
+  margin-bottom: space.get("large"),
 );
 
 $bar: (
-  height: space.get('small'),
+  height: space.get("small"),
   background-color: var(--color-fill-moderate),
 );
 

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

@@ -1,8 +1,8 @@
 @use "sass:map";
-@use '../../../styles/tokens/space';
-@use '../../../styles/tools/generate';
-@use '../../../styles/typography/config' as typography;
-@use './config';
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/generate";
+@use "../../../styles/typography/config" as typography;
+@use "./config";
 
 @mixin base {
   @include generate.css-map(config.$layout);
@@ -10,20 +10,22 @@
 
 @mixin bar {
   position: relative;
-  margin-bottom: space.get('xsmall');
+  margin-bottom: space.get("xsmall");
 
   @include generate.css-map(config.$bar);
 }
 
 @mixin label {
-  margin-bottom: space.get('xsmall');
+  margin-bottom: space.get("xsmall");
   font-weight: bold;
 }
 
 @mixin value {
   font-weight: bold;
 
-  @include generate.css-map(typography.$body-text, 'small');
+  @include generate.css-map(
+    map.get(map.get(typography.$body-text, "small"), "default")
+  );
 }
 
 @mixin indicator {

package/src/components/PromoBanner/PromoBanner.tsx

@@ -2,65 +2,92 @@ 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" | "reverse";
 }
 
 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,
-    {
-      "is-light": colorScheme === "light",
-      "is-dark": colorScheme === "dark",
-    },
-    className,
-  );
+  const classes = cx(CLASS_ROOT, className);
   return (
-    <div className={classes}>
-      <Grid>
+    <Grid columnGapSize="large" className={classes}>
+      {variant === "reverse" && image && (
         <GridCol
-          size={{ xs: 12, md: image ? 6 : 8 }}
-          className={`${CLASS_ROOT}__item`}
+          size={{ xs: 12, md: 6 }}
+          className={cx(
+            `${CLASS_ROOT}__image`,
+            "align-center align-md-left",
+            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">{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>
+      <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,
         )}
-      </Grid>
-    </div>
+      >
+        {children}
+      </GridCol>
+
+      {image && variant !== "reverse" && (
+        <GridCol
+          size={variant === "vertical" ? { xs: 12 } : { xs: 12, md: 6 }}
+          className={cx(
+            `${CLASS_ROOT}__image`,
+            {
+              [`${CLASS_ROOT}__image--bleed-right`]: bleedImage,
+              [`align-self-${alignImage}`]: alignImage,
+              "pt-none": alignImage === "top",
+              "pb-none": alignImage === "bottom",
+              "align-center": variant === "vertical",
+            },
+            imageClassName,
+          )}
+        >
+          <Image
+            src={image}
+            alt="Obrázok"
+            className={cx("mb-none", { fullwidth: imageFullWidth })}
+          />
+        </GridCol>
+      )}
+    </Grid>
   );
 };

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

@@ -1,34 +1,56 @@
+@use "sass:map" as sassmap;
 @use "./../../../styles/tools/convert";
+@use "./../../../styles/tools/generate";
 @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") convert.to-rem(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") convert.to-rem(20px);
+  @include breakpoint.get("md", "down") {
+    padding-top: space.get("large");
+    padding-bottom: space.get("large");
   }
 
-  @include breakpoint.get("sm", "down") {
-    padding: convert.to-rem(30px) space.get("small");
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  > * {
+    width: fit-content;
   }
 }
 
 @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: convert.to-rem(10px) !important;
+  @include breakpoint.get("md", "down") {
+    text-align: center;
+    padding-top: 0;
+    padding-bottom: 0;
   }
 }
 
-@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

@@ -2,17 +2,15 @@
 
 @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;
       }
     }
   }