@orangesk/orange-design-system 2.0.0-beta.8 → 2.0.0-beta.9

package/src/components/Carousel/Carousel.tsx

@@ -27,6 +27,10 @@ interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
   colorScheme?: "light" | "dark";
   /** Carousel items */
   items: ReactNode[];
+  /** Always show scrollbar and hide dots */
+  showScrollbar?: boolean;
+  /** Make carousel bleed to the right edge of screen while keeping left aligned with container */
+  bleedRight?: boolean;
   className?: string;
 }
 
@@ -35,6 +39,8 @@ const Carousel: React.FC<CarouselProps> = ({
   swiperOptions,
   items,
   colorScheme,
+  showScrollbar = false,
+  bleedRight = false,
   ...other
 }) => {
   const [carouselRef] = useStatic(CarouselStatic);
@@ -46,21 +52,33 @@ const Carousel: React.FC<CarouselProps> = ({
   const classes = cx(CLASS_ROOT, className, {
     "is-dark": colorScheme === "dark",
     "is-light": colorScheme === "light",
+    [`${CLASS_ROOT}--scrollbar`]: showScrollbar,
+    [`${CLASS_ROOT}--bleed-right`]: bleedRight,
   });
 
   const elementClasses = {
     prev: cx(CLASS_PREV),
     next: cx(CLASS_NEXT),
-    dots: cx(CLASS_DOTS, "show-md"),
+    dots: cx(CLASS_DOTS, showScrollbar ? "hide" : "show-md"),
   };
 
+  // Only override pagination when showScrollbar is true
+  const customSwiperOptions = showScrollbar
+    ? {
+        pagination: {
+          enabled: false,
+        },
+        ...swiperOptions,
+      }
+    : swiperOptions;
+
   return (
     <div
       className={classes}
       ref={carouselRef}
       data-carousel
-      {...(swiperOptions
-        ? { "data-swiper-options": JSON.stringify(swiperOptions) }
+      {...(showScrollbar || swiperOptions
+        ? { "data-swiper-options": JSON.stringify(customSwiperOptions) }
         : {})}
       {...other}
     >
@@ -68,25 +86,29 @@ const Carousel: React.FC<CarouselProps> = ({
         <div className={CLASS_VIEWPORT}>
           <div className={CLASS_TRACK}>{carouselItems}</div>
         </div>
-        <button
-          type="button"
-          aria-label="Naspäť"
-          className={elementClasses.prev}
-        >
-          <Icon size="medium" name="chevron-left" />
-        </button>
-        <button
-          type="button"
-          aria-label="Ďalej"
-          className={elementClasses.next}
-        >
-          <Icon size="medium" name="chevron-right" />
-        </button>
+        {showScrollbar ? null : (
+          <>
+            <button
+              type="button"
+              aria-label="Naspäť"
+              className={elementClasses.prev}
+            >
+              <Icon size="medium" name="chevron-left" />
+            </button>
+            <button
+              type="button"
+              aria-label="Ďalej"
+              className={elementClasses.next}
+            >
+              <Icon size="medium" name="chevron-right" />
+            </button>
+          </>
+        )}
       </div>
 
-      <div role="tablist" className={elementClasses.dots} />
+      {!showScrollbar && <div role="tablist" className={elementClasses.dots} />}
 
-      <div className={cx(CLASS_SCROLLBAR, "hide-md")}>
+      <div className={cx(CLASS_SCROLLBAR, !showScrollbar && "hide-md")}>
         <div className={CLASS_SCROLLBAR_DRAG} />
       </div>
     </div>

package/src/components/Carousel/constants.ts

@@ -14,6 +14,8 @@ export const CLASS_SCROLLBAR = `${CLASS_ROOT}__scrollbar`;
 export const CLASS_SCROLLBAR_HORIZONTAL = `${CLASS_ROOT}__scrollbar-horizontal`;
 export const CLASS_SCROLLBAR_DRAG = `${CLASS_ROOT}__scrollbar-drag`;
 export const CLASS_ACTIVE = "is-active";
+export const CLASS_SCROLLBAR_VARIANT = `${CLASS_ROOT}--scrollbar`;
+export const CLASS_BLEED_RIGHT = `${CLASS_ROOT}--bleed-right`;
 
 export const SELECTOR_VIEWPORT = `.${CLASS_VIEWPORT}`;
 export const SELECTOR_TRACK = `.${CLASS_TRACK}`;

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

@@ -25,7 +25,6 @@ $breakout-buttons-breakpoints: (
 );
 
 $viewport-horizontal-spacing: (
-  "default": -#{space.get("small")},
   // button dimension + space - slide padding,
-  "md": convert.to-rem(50px),
+  "md": convert.to-rem(50px)
 );

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

@@ -43,6 +43,11 @@
     }
   }
 
+  .carousel--scrollbar & {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
   @include breakpoint.get("sm", "down") {
     padding-bottom: math.div(config.$space, 2);
   }
@@ -88,15 +93,19 @@
       margin-right: -#{convert.to-rem(60px)};
     }
   }
+
+  &.carousel--bleed-right {
+    margin-left: 0;
+    margin-right: 0;
+  }
 }
 
 @mixin slide-base {
   display: flex;
   flex-direction: column;
   max-width: 100%;
-  // width: auto !important;
   flex: 0 0 auto;
-  padding: 0 math.div(config.$space, 2);
+  padding: 0 convert.to-rem(20px) 0 0;
   user-select: none;
 
   > * {
@@ -193,4 +202,28 @@
   opacity: 1;
   background-color: var(--color-fill-contrast);
   border-radius: 99px;
+  height: convert.to-rem(6px);
+}
+
+@mixin scrollbar-variant {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+
+@mixin bleed-right-variant {
+  .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);
+    }
+
+    // On very large screens (above 2K), stop the bleeding effect entirely
+    @media (min-width: 2560px) {
+      width: 100%;
+    }
+  }
 }

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

@@ -5,6 +5,14 @@
   .carousel {
     @include mixins.base;
 
+    &--scrollbar {
+      @include mixins.scrollbar-variant;
+    }
+
+    &--bleed-right {
+      @include mixins.bleed-right-variant;
+    }
+
     .container > & {
       @include mixins.base-breakout-buttons;
     }

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

@@ -28,6 +28,17 @@
           display: block;
         }
       }
+
+      // In light theme, explicitly show light and hide dark
+      .is-light & {
+        &--light {
+          display: block;
+        }
+
+        &--dark {
+          display: none;
+        }
+      }
     }
 
     &--with-text-end {

package/src/components/Icon/tests/Pictogram.unit.test.js

@@ -117,4 +117,42 @@ describe("Pictogram component", () => {
       expect(getByTestId("test-pictogram")).toHaveClass("custom-class");
     });
   });
+
+  describe("theme switching", () => {
+    it("shows light version by default", () => {
+      const { container } = render(<Pictogram name="pictogram-skylink" />);
+      const lightUse = container.querySelector(".icon__use--light");
+      const darkUse = container.querySelector(".icon__use--dark");
+
+      expect(lightUse).toBeInTheDocument();
+      expect(darkUse).toBeInTheDocument();
+      // Note: CSS display logic is tested via CSS rules, not inline styles
+    });
+
+    it("renders correctly within is-light context", () => {
+      const { container } = render(
+        <div className="is-light">
+          <Pictogram name="pictogram-skylink" />
+        </div>,
+      );
+      const lightUse = container.querySelector(".icon__use--light");
+      const darkUse = container.querySelector(".icon__use--dark");
+
+      expect(lightUse).toBeInTheDocument();
+      expect(darkUse).toBeInTheDocument();
+    });
+
+    it("renders correctly within is-dark context", () => {
+      const { container } = render(
+        <div className="is-dark">
+          <Pictogram name="pictogram-skylink" />
+        </div>,
+      );
+      const lightUse = container.querySelector(".icon__use--light");
+      const darkUse = container.querySelector(".icon__use--dark");
+
+      expect(lightUse).toBeInTheDocument();
+      expect(darkUse).toBeInTheDocument();
+    });
+  });
 });

package/src/components/Pill/Pill.tsx

@@ -3,7 +3,7 @@ import cx from "classnames";
 
 const CLASS_ROOT = "pill";
 
-export const pillColors = ["white", "gray", "transparent"] as const;
+export const pillColors = ["white", "gray", "transparent", "orange"] as const;
 export type PillColor = (typeof pillColors)[number];
 
 interface PillProps extends HTMLAttributes<HTMLSpanElement> {

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

@@ -31,6 +31,10 @@ $colors: (
     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/Preview/PreviewGenerator.tsx

@@ -115,29 +115,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",
-    "Accent1 Blog": "bg-accent1-blog",
-    "Accent2 Blog": "bg-accent2-blog",
+    "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,
@@ -153,6 +160,7 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
 }) => {
   const [isCodeShown, setIsCodeShown] = useState(false);
   const [isFullscreen, setIsFullscreen] = useState(false);
+  const [isDarkMode, setIsDarkMode] = useState(false);
   // Ensure unique dropdown id per Preview instance to avoid id collisions (SSR-safe)
   const backgroundDropdownId = `background-select-${useId()}`;
   const [previewBackground, setPreviewBackground] = useState<PreviewBackground>(
@@ -185,10 +193,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" };
     },
   );
 
@@ -204,7 +212,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);
@@ -220,6 +232,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
@@ -352,6 +381,4 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
   );
 };
 
-PreviewGenerator.displayName = "PreviewGenerator";
-
 export { PreviewGenerator };

package/src/components/PromoBanner/PromoBanner.tsx

@@ -2,27 +2,22 @@ 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";
+  children?: React.ReactNode;
 }
 
 const CLASS_ROOT = "promo-banner";
 export const PromoBanner = ({
-  title,
-  secondaryTitle,
-  description,
-  buttonText,
   image,
   colorScheme,
   className,
+  alignImage,
+  children,
 }: PromoBannerProps) => {
   const classes = cx(
     CLASS_ROOT,
@@ -33,30 +28,23 @@ export const PromoBanner = ({
     className,
   );
   return (
-    <div className={classes}>
+    <div className={cx(classes)}>
       <Grid>
         <GridCol
-          size={{ xs: 12, md: image ? 6 : 8 }}
+          size={{ xs: 12, md: image ? 6 : 7 }}
           className={`${CLASS_ROOT}__item`}
         >
-          <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>
+          {children}
         </GridCol>
 
         {image && (
-          <GridCol size={{ xs: 12, md: 6 }} className={`${CLASS_ROOT}__image`}>
+          <GridCol
+            size={{ xs: 12, md: 6 }}
+            className={cx(
+              `${CLASS_ROOT}__image`,
+              alignImage === "bottom" && "align-self-bottom",
+            )}
+          >
             <Image src={image} alt="" className="mb-none" />
           </GridCol>
         )}

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

@@ -1,34 +1,33 @@
+@use "sass:map" as sassmap;
 @use "./../../../styles/tools/convert";
+@use "./../../../styles/tools/generate";
 @use "./../../../styles/tokens/breakpoint";
 @use "./../../../styles/tokens/space";
-
-@mixin promo-banner-base() {
-  background-color: var(--color-background-primary);
-  color: var(--color-text-default);
-  padding: space.get("xlarge") convert.to-rem(70px);
-
-  @include breakpoint.get("lg", "down") {
-    padding: space.get("xlarge") convert.to-rem(20px);
-  }
-
-  @include breakpoint.get("sm", "down") {
-    padding: convert.to-rem(30px) space.get("small");
-  }
-}
+@use "./../../Section/styles/mixins" as section;
 
 @mixin promo-banner-image() {
-  text-align: center;
+  text-align: end;
   align-self: center;
+
+  @include breakpoint.get("md", "down") {
+    text-align: center;
+  }
 }
 
 @mixin promo-banner-item() {
-  padding-right: space.get("xlarge") !important;
+  padding-top: space.get("xlarge");
+  padding-bottom: space.get("xlarge");
 
-  @include breakpoint.get("lg", "down") {
-    padding-right: convert.to-rem(10px) !important;
+  @include breakpoint.get("md", "down") {
+    padding-top: space.get("large");
+    padding-bottom: space.get("medium");
   }
-}
 
-@mixin promo-banner-item-title() {
-  margin-right: space.get("small") !important;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  > * {
+    width: fit-content !important;
+  }
 }

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

@@ -2,18 +2,12 @@
 
 @layer components {
   .promo-banner {
-    @include mixins.promo-banner-base;
-
     &__image {
       @include mixins.promo-banner-image;
     }
 
     &__item {
       @include mixins.promo-banner-item;
-
-      &-title {
-        @include mixins.promo-banner-item-title;
-      }
     }
   }
 }

package/src/styles/base/globals.scss

@@ -48,6 +48,7 @@
 html {
   font-size: base.$font-size;
   scroll-padding-top: unset;
+  overflow-x: hidden;
 }
 
 html,