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

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

@@ -53,11 +53,61 @@
     padding: 24px;
     border-radius: 0 !important;
     margin-bottom: 0 !important;
-    overflow: visible;
+    overflow: visible !important;
+  }
+
+  // Card defaults to overflow hidden; ensure preview content can escape.
+  .card.preview {
+    overflow: visible !important;
   }
 
   .previewLive {
     transition: all 200ms ease-in-out;
+    overflow: visible;
+  }
+
+  .previewLiveViewportArea {
+    overflow: visible;
+    width: 100%;
+
+    &.hasFixedViewport {
+      overflow-x: auto;
+      overflow-y: visible;
+      padding: 1rem 0;
+      background: color-mix(
+        in srgb,
+        var(--color-text-default),
+        transparent 96%
+      );
+
+      .previewLiveViewport {
+        background: var(--color-background-primary);
+        border: 1px solid
+          color-mix(in srgb, var(--color-border-strong), transparent 25%);
+        box-shadow:
+          0 0 0 1px
+            color-mix(in srgb, var(--color-border-strong), transparent 60%),
+          0 12px 28px
+            color-mix(in srgb, var(--color-text-default), transparent 88%);
+      }
+    }
+  }
+
+  .previewLiveViewport {
+    margin: 0 auto;
+    overflow: visible;
+
+    &.isAuto {
+      width: 100%;
+    }
+  }
+
+  .previewViewportFrame {
+    width: 100%;
+    border: 0;
+    display: block;
+    background: transparent;
+    padding-top: 16px;
   }
 
   .selectWrapper {

package/src/components/Progress/Progress.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 export interface ProgressProps {
   /** Color of the indicator */
@@ -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/index.ts

@@ -1 +1 @@
-export { Progress } from "./Progress";
+export { Progress } from "./Progress";

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/Progress/tests/{Progress.conformance.test.js → Progress.conformance.test.jsx}

@@ -1,8 +1,7 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { axe } from 'jest-axe';
+import { render } from "@testing-library/react";
+import { axe } from "vitest-axe";
 
-import { Progress } from '../';
+import { Progress } from "../";
 
 const example = (
   <>
@@ -14,14 +13,14 @@ const example = (
   </>
 );
 
-it('is valid html', () => {
+it("is valid html", () => {
   const { container } = render(example);
   expect(container).toHTMLValidate({
-    rules: { 'no-inline-style': 'off' },
+    rules: { "no-inline-style": "off" },
   });
 });
 
-it('is accessible', async () => {
+it("is accessible", async () => {
   const { container } = render(example);
   expect(await axe(container)).toHaveNoViolations();
 });

package/src/components/Progress/tests/Progress.unit.test.jsx

@@ -0,0 +1,111 @@
+import { render } from "@testing-library/react";
+
+import { Progress } from "../Progress";
+
+// value and label props is required
+describe("rendering Progress", () => {
+  describe("initial state", () => {
+    it("has default class progress", () => {
+      const { getByTestId } = render(
+        <Progress
+          value="test-value"
+          label="test-label"
+          data-testid="test-id"
+        />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("progress");
+    });
+    it("has default class progress__label", () => {
+      const { container } = render(
+        <Progress value="test-value" label="test-label" />,
+      );
+      expect(container.getElementsByClassName("progress__label").length).toBe(
+        1,
+      );
+    });
+    it("has default class progress__bar", () => {
+      const { container } = render(
+        <Progress value="test-value" label="test-label" />,
+      );
+      expect(container.getElementsByClassName("progress__bar").length).toBe(1);
+    });
+    it("has default class progress__indicator", () => {
+      const { container } = render(
+        <Progress value="test-value" label="test-label" />,
+      );
+      expect(
+        container.getElementsByClassName("progress__indicator").length,
+      ).toBe(1);
+    });
+    it("has default class progress__value", () => {
+      const { container } = render(
+        <Progress value="test-value" label="test-label" />,
+      );
+      expect(container.getElementsByClassName("progress__value").length).toBe(
+        1,
+      );
+    });
+  });
+
+  describe("passed props", () => {
+    it("renders value", () => {
+      const { getByText } = render(
+        <Progress value="test-value" label="test-label">
+          test-value
+        </Progress>,
+      );
+      expect(getByText("test-value")).toBeInTheDocument();
+    });
+    it("renders label", () => {
+      const { getByText } = render(
+        <Progress value="test-value" label="test-label">
+          test-label
+        </Progress>,
+      );
+      expect(getByText("test-label")).toBeInTheDocument();
+    });
+
+    it("has additional class when className is set", () => {
+      const { getByTestId } = render(
+        <Progress
+          value="test-value"
+          label="test-label"
+          data-testid="test-id"
+          className="test-class"
+        />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("progress");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+
+    ["green", "yellow", "red", "blue"].forEach((color) => {
+      it(`has progress__indicator--${color} class when color is ${color}`, () => {
+        const { container } = render(
+          <Progress
+            data-testid="test-id"
+            color={color}
+            value="test-value"
+            label="test-label"
+          />,
+        );
+        expect(
+          container.getElementsByClassName(`progress__indicator--${color}`)
+            .length,
+        ).toBe(1);
+      });
+    });
+    it(`doesnt have class progress__indicator--orange class when color is orange`, () => {
+      const { container } = render(
+        <Progress
+          data-testid="test-id"
+          color={"orange"}
+          value="test-value"
+          label="test-label"
+        />,
+      );
+      expect(
+        container.getElementsByClassName("progress__indicator--orange").length,
+      ).toBe(0);
+    });
+  });
+});

package/src/components/PromoBanner/PromoBanner.tsx

@@ -1,63 +1,103 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 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";
+  /** Remove top padding from item on sm and smaller breakpoints */
+  flushTopSmDown?: boolean;
+  /** Remove bottom padding from item on sm and smaller breakpoints */
+  flushBottomSmDown?: boolean;
+  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,
+  flushTopSmDown,
+  flushBottomSmDown,
+  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, {
+    [`${CLASS_ROOT}--flush-top-sm-down`]: flushTopSmDown,
+    [`${CLASS_ROOT}--flush-bottom-sm-down`]: flushBottomSmDown,
+    [`${CLASS_ROOT}--reverse`]: variant === "reverse" && !!image,
+    [`${CLASS_ROOT}--vertical`]: variant === "vertical",
+  });
   return (
     <div className={classes}>
-      <Grid>
+      <Grid columnGapSize="large">
+        {variant === "reverse" && image && (
+          <GridCol
+            size={{ xs: 12, md: 6 }}
+            className={cx(
+              `${CLASS_ROOT}__image`,
+              "align-center align-md-left",
+              imageClassName,
+            )}
+          >
+            <Image
+              src={image}
+              alt="Obrázok"
+              className={cx("mb-none", { fullwidth: imageFullWidth })}
+            />
+          </GridCol>
+        )}
+
         <GridCol
-          size={{ xs: 12, md: image ? 6 : 8 }}
-          className={`${CLASS_ROOT}__item`}
+          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,
+          )}
         >
-          <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`}>
-            <Image src={image} alt="" className="mb-none" />
+        {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,80 @@
-@use "./../../../styles/tools/convert";
+@use "sass:map" as sassmap;
+@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("md", "down") {
+    padding-top: space.get("large");
+    padding-bottom: space.get("large");
+  }
 
-  @include breakpoint.get("lg", "down") {
-    padding: space.get("xlarge") convert.to-rem(20px);
+  &[class*="grid__col"] {
+    @include breakpoint.get("sm", "down") {
+      padding-right: 0 !important;
+    }
+
+    padding-left: 0 !important;
   }
 
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+
+  > * {
+    width: fit-content;
+  }
+}
+
+@mixin promo-banner-item-no-top-padding-sm-down() {
   @include breakpoint.get("sm", "down") {
-    padding: convert.to-rem(30px) space.get("small");
+    padding-top: 0;
+  }
+}
+
+@mixin promo-banner-item-no-bottom-padding-sm-down() {
+  @include breakpoint.get("sm", "down") {
+    padding-bottom: 0;
   }
 }
 
 @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("md", "down") {
+    text-align: center;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  &[class*="grid__col"] {
+    @include breakpoint.get("sm", "down") {
+      padding-left: 0 !important;
+    }
 
-  @include breakpoint.get("lg", "down") {
-    padding-right: convert.to-rem(10px) !important;
+    padding-right: 0 !important;
   }
 }
 
-@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
+    transform: translateX(calc(50vw - 100% + -20px));
+
+    @include breakpoint.get("sm", "down") {
+      transform: translate(10px);
+    }
+  }
 }

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

@@ -1,18 +1,59 @@
 @use "./mixins";
+@use "./../../../styles/tokens/breakpoint";
+@use "./../../../styles/tokens/space";
 
 @layer components {
   .promo-banner {
-    @include mixins.promo-banner-base;
-
-    &__image {
-      @include mixins.promo-banner-image;
+    .grid {
+      margin-left: 0 !important;
+      margin-right: 0 !important;
     }
 
     &__item {
       @include mixins.promo-banner-item;
+    }
+
+    &--flush-top-sm-down {
+      .promo-banner__item {
+        @include mixins.promo-banner-item-no-top-padding-sm-down;
+      }
+    }
+
+    &--flush-bottom-sm-down {
+      .promo-banner__item {
+        @include mixins.promo-banner-item-no-bottom-padding-sm-down;
+      }
+    }
+
+    &--vertical {
+      .promo-banner__item[class*="grid__col"],
+      .promo-banner__image[class*="grid__col"]:not(
+          .promo-banner__image--bleed-right
+        ) {
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+      }
+    }
+
+    &--reverse {
+      @include breakpoint.get("md") {
+        .promo-banner__item[class*="grid__col"] {
+          padding-left: space.get("medium") !important;
+          padding-right: 0 !important;
+        }
+
+        .promo-banner__image[class*="grid__col"] {
+          padding-left: 0 !important;
+          padding-right: space.get("medium") !important;
+        }
+      }
+    }
+
+    &__image {
+      @include mixins.promo-banner-image;
 
-      &-title {
-        @include mixins.promo-banner-item-title;
+      &--bleed-right {
+        @include mixins.promo-banner-image-bleed-right;
       }
     }
   }