@orangesk/orange-design-system 2.0.0-alpha.1 → 2.0.0-alpha.3

package/src/components/Stepbar/Stepbar.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import cx from "classnames";
+
+export const showTitlesFromOptions = ["md", "lg", "xl"] as const;
+export const variantOptions = ["default", "inverse"] as const;
+
+export type ShowTitlesFrom = (typeof showTitlesFromOptions)[number];
+
+export interface StepbarStep {
+  href?: string;
+  isCurrent?: boolean;
+  title: React.ReactNode;
+}
+
+export interface StepbarProps extends React.HTMLAttributes<HTMLElement> {
+  /** Arial label of nav element */
+  label?: string;
+  /** Titles of non-current steps are visible from this breakpoint */
+  showTitlesFrom?: ShowTitlesFrom;
+  /** Array of step objects */
+  steps: StepbarStep[];
+  /** Visual variant of the stepbar */
+  colorScheme?: "dark" | "light";
+}
+
+const CLASS_ROOT = "stepbar";
+
+const Stepbar: React.FC<StepbarProps> = ({
+  showTitlesFrom,
+  steps,
+  label = "krok",
+  colorScheme,
+  className,
+  ...other
+}) => {
+  const currentItemIndex = steps.findIndex((step) => {
+    return step.isCurrent;
+  });
+
+  const GetStepContent = (
+    step: StepbarStep,
+    index: number,
+  ): React.ReactElement => {
+    const fullTitle = `${index + 1}. ${step.title}`;
+    return index < currentItemIndex ? (
+      <a
+        {...{
+          href: step.href,
+          className: cx(`${CLASS_ROOT}__link`, {
+            [`${CLASS_ROOT}__title-${showTitlesFrom}`]: showTitlesFrom,
+          }),
+        }}
+      >
+        {fullTitle}
+      </a>
+    ) : (
+      <span
+        aria-current={index === currentItemIndex ? "step" : undefined}
+        className={showTitlesFrom ? `stepbar__title-${showTitlesFrom}` : ""}
+      >
+        {fullTitle}
+      </span>
+    );
+  };
+
+  return (
+    <nav
+      className={cx(
+        CLASS_ROOT,
+        {
+          "is-dark": colorScheme === "dark",
+          "is-light": colorScheme === "light",
+          [`${CLASS_ROOT}--wide-${showTitlesFrom}`]: showTitlesFrom,
+        },
+        className,
+      )}
+      aria-label={label}
+      {...other}
+    >
+      <ol className={`${CLASS_ROOT}__list`}>
+        {steps.map((step, index) => {
+          return (
+            <li
+              key={index.toString()}
+              className={cx(`${CLASS_ROOT}__item`, {
+                [`${CLASS_ROOT}__item--current`]: index === currentItemIndex,
+              })}
+            >
+              {GetStepContent(step, index)}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+};
+
+Stepbar.displayName = "Stepbar";
+
+export { Stepbar };

package/src/components/Stepbar/index.ts

@@ -0,0 +1,3 @@
+import "./styles/style.scss";
+
+export { Stepbar } from "./Stepbar";

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

@@ -0,0 +1,91 @@
+@use "../../../styles/tokens/color";
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/convert";
+
+$item-base: (
+  display: inline-flex,
+  align-items: center,
+  padding-top: space.get("small"),
+  padding-bottom: space.get("small"),
+  margin: 0 0 0 space.get("xsmall"),
+  color: var(--color-text-default),
+);
+
+$arrow-spacing-small: (
+  default: (
+    padding-left: convert.to-rem(30px),
+    padding-right: convert.to-rem(14px),
+  ),
+  first: (
+    padding-left: convert.to-rem(30px),
+  ),
+  last: (
+    padding-right: convert.to-rem(30px),
+  ),
+);
+
+$arrow-spacing: (
+  default: (
+    padding-left: convert.to-rem(40px),
+    padding-right: convert.to-rem(19px),
+  ),
+  first: (
+    padding-left: convert.to-rem(35px),
+  ),
+  last: (
+    padding-right: convert.to-rem(35px),
+  ),
+);
+
+$arrows: (
+  default: (
+    done:
+      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 0H0V40H5L21 20L5 0Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0L16 20L0 40V0Z' fill='black'/%3E%3C/svg%3E"),
+    current:
+      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 0H0V40H5L21 20L5 0Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0L16 20L0 40V0Z' fill='%23F16E00'/%3E%3C/svg%3E"),
+    next:
+      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 0H0V40H5L21 20L5 0Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0L16 20L0 40V0Z' fill='%23eee'/%3E%3C/svg%3E"),
+  ),
+  inverse: (
+    done:
+      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 0H0V40H5L21 20L5 0Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0L16 20L0 40V0Z' fill='white'/%3E%3C/svg%3E"),
+    current:
+      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 0H0V40H5L21 20L5 0Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0L16 20L0 40V0Z' fill='%23F16E00'/%3E%3C/svg%3E"),
+    next:
+      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 0H0V40H5L21 20L5 0Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0L16 20L0 40V0Z' fill='%23eee'/%3E%3C/svg%3E"),
+  ),
+);
+
+$item-done-colors: (
+  default: (
+    background: var(--color-surface-contrast),
+  ),
+);
+
+$item-colors: (
+  current: (
+    background: var(--color-surface-tertiary),
+    color: var(--color-text-default),
+  ),
+  next: (
+    background: var(--color-surface-subtle),
+    color: var(--color-surface-contrast),
+  ),
+);
+
+$link-colors: (
+  default: (
+    base: (
+      color: var(--color-text-inverse),
+    ),
+    interaction: (
+      color: var(--color-text-accent),
+    ),
+  ),
+);
+
+$link-underline: (
+  text-decoration: underline,
+  text-underline-position: under,
+  box-shadow: none,
+);

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

@@ -0,0 +1,132 @@
+@use "sass:map" as sass-map;
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/convert";
+@use "../../../styles/tools/generate";
+@use "../../../styles/tools/map";
+@use "../../../styles/tokens/breakpoint";
+@use "../../../styles/typography/mixins" as typoMixins;
+@use "./config";
+
+@mixin list-base {
+  display: flex;
+  flex-wrap: nowrap;
+  list-style-type: none;
+  padding-left: 0;
+  margin: 0 0 space.get() 0;
+  max-width: none;
+  font-weight: bold;
+}
+
+@mixin item-base($config: config.$item-base) {
+  position: relative;
+  justify-content: center;
+  flex: 0 1 0;
+
+  @include arrow();
+
+  @include generate.css-map($config);
+
+  @include breakpoint.get("xs", "down") {
+    @include generate.css-map(config.$arrow-spacing-small, "default");
+    &:first-of-type {
+      margin-left: 0;
+      @include generate.css-map(config.$arrow-spacing-small, "first");
+    }
+    &:last-of-type {
+      @include generate.css-map(config.$arrow-spacing-small, "last");
+    }
+
+    flex-grow: 1;
+  }
+}
+
+@mixin item-wide {
+  flex-grow: 1;
+}
+
+@mixin arrow($config: config.$arrow-spacing) {
+  margin: 0;
+
+  @include breakpoint.get("sm") {
+    @include generate.css-map($config, "default");
+
+    &:first-of-type {
+      margin-left: 0;
+      @include generate.css-map($config, "first");
+    }
+
+    &:last-of-type {
+      @include generate.css-map($config, "last");
+    }
+  }
+
+  &:not(:last-of-type)::after {
+    content: "";
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    right: -21px;
+    width: 21px;
+    height: 100%;
+    background-size: 100% 100%;
+  }
+}
+
+@mixin item-color($variant, $color, $arrows: config.$arrows) {
+  @if $color == done {
+    @include generate.css-map(config.$item-done-colors, $variant);
+  } @else {
+    @include generate.css-map(config.$item-colors, $color);
+  }
+  // current item shows title from sm up
+  @if $color == current {
+    @include breakpoint.get("sm") {
+      flex-grow: 1;
+    }
+  }
+
+  &::after {
+    background-image: sass-map.get($arrows, $variant, $color);
+  }
+}
+
+@mixin link-overlay {
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@mixin link-color($variant, $config: config.$link-colors) {
+  @include generate.css-map($config, $variant, "base");
+
+  &:hover,
+  &:focus,
+  &:active {
+    @include generate.css-map($config, $variant, "interaction");
+  }
+}
+
+@mixin link-underline {
+  &:hover,
+  &:focus,
+  &:active {
+    @include generate.css-map(config.$link-underline);
+  }
+}
+
+@mixin first-letter-only {
+  max-width: convert.to-rem(9px);
+  overflow: hidden;
+  max-height: convert.to-rem(20px);
+}
+
+@mixin full-title {
+  max-width: none;
+  overflow: visible;
+  max-height: none;
+}

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

@@ -0,0 +1,77 @@
+@use "./mixins";
+@use "../../../styles/tokens/breakpoint";
+
+@layer components {
+  .stepbar {
+    $this: &;
+
+    &__label {
+      display: none;
+    }
+
+    &__list {
+      @include mixins.list-base();
+    }
+
+    &__item {
+      @include mixins.item-base();
+      @include mixins.item-color("default", "done");
+
+      * {
+        @include mixins.first-letter-only();
+      }
+
+      &--current {
+        @include mixins.item-color("default", "current");
+
+        @include breakpoint.get("sm") {
+          @include mixins.item-wide();
+
+          * {
+            @include mixins.full-title();
+          }
+        }
+      }
+
+      &--current ~ & {
+        @include mixins.item-color("default", "next");
+      }
+
+      .bg-black &,
+      .is-dark & {
+        @include mixins.item-color("inverse", "done");
+
+        &--current {
+          @include mixins.item-color("inverse", "current");
+        }
+
+        &--current ~ .stepbar__item {
+          @include mixins.item-color("inverse", "next");
+        }
+      }
+
+      @each $breakpoint in ("md", "lg", "xl") {
+        @include breakpoint.get($breakpoint) {
+          #{$this}--wide-#{$breakpoint} &:not(&--current) {
+            @include mixins.item-wide();
+
+            * {
+              @include mixins.full-title();
+            }
+          }
+        }
+      }
+    }
+
+    &__link {
+      @include mixins.link-color("default");
+      @include mixins.link-overlay();
+      @include mixins.link-underline();
+
+      .bg-black &,
+      .is-dark & {
+        @include mixins.link-color("inverse");
+      }
+    }
+  }
+}

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

@@ -0,0 +1,34 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+import { Stepbar } from "../";
+
+const example = (
+  <Stepbar
+    steps={[
+      {
+        title: "1. Paušál",
+        href: "#",
+      },
+      {
+        title: "2. Internet",
+        href: "#",
+        isCurrent: true,
+      },
+      {
+        title: "3. TV (nepovinné)",
+        href: "#",
+      },
+    ]}
+  />
+);
+
+it("is valid html", () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate();
+});
+
+it("is accessible", async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});

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

@@ -0,0 +1,92 @@
+import { render } from "@testing-library/react";
+
+import { Stepbar } from "../Stepbar";
+
+const steps1 = [{ href: "/test1", isCurrent: false, title: "test1-title" }];
+const steps2 = [
+  { href: "/test1", isCurrent: false, title: "test1-title" },
+  { href: "/test2", isCurrent: true, title: "test2-title" },
+  { href: "/test3", isCurrent: true, title: "test3-title" },
+];
+
+//steps prop is required
+describe("rendering Stepbar", () => {
+  describe("initial state", () => {
+    it("has default class stepbar", () => {
+      const { getByTestId } = render(
+        <Stepbar data-testid="test-id" steps={[]} />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("stepbar");
+    });
+    it("ordered list element has default class stepbar__list", () => {
+      const { container } = render(<Stepbar steps={[]} />);
+      expect(container.querySelector("ol")).toHaveClass("stepbar__list");
+    });
+  });
+  describe("passed props", () => {
+    it("has additional class when className is set", () => {
+      const { getByTestId } = render(
+        <Stepbar data-testid="test-id" steps={[]} className="test-class" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("stepbar");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+    it("renders list element/elements with class stepbar__item when steps prop isnt empty array", () => {
+      const { container } = render(
+        <Stepbar steps={steps1} className="test-class" />,
+      );
+      expect(container.querySelector("li")).toBeTruthy();
+      expect(container.querySelector("li")).toHaveClass("stepbar__item");
+    });
+    it(`previous step titles are rendered inside an anchor tag`, () => {
+      const { container } = render(
+        <Stepbar steps={steps2} className="test-class" />,
+      );
+      const currentItemIndex = steps2.findIndex((step) => {
+        return step.isCurrent;
+      });
+      const listArr = container.querySelectorAll("li");
+      for (let el in steps2) {
+        if (el < currentItemIndex) {
+          expect(listArr[el].querySelector("a")).toBeTruthy();
+          expect(listArr[el].querySelector("a").textContent).toBe(
+            `${parseInt(el) + 1}. test${parseInt(el) + 1}-title`,
+          );
+        } else {
+          expect(listArr[el].querySelector("a")).toBeFalsy();
+          expect(listArr[el].textContent).toBe(
+            `${parseInt(el) + 1}. test${parseInt(el) + 1}-title`,
+          );
+        }
+      }
+    });
+    it(`previous step titles have class stepbar__link`, () => {
+      const { container } = render(
+        <Stepbar steps={steps2} className="test-class" />,
+      );
+      const currentItemIndex = steps2.findIndex((step) => {
+        return step.isCurrent;
+      });
+      const listArr = container.querySelectorAll("li");
+      for (let el in steps2) {
+        if (el < currentItemIndex) {
+          expect(listArr[el].querySelector("a")).toBeTruthy();
+          expect(listArr[el].querySelector("a")).toHaveClass("stepbar__link");
+        } else {
+          expect(listArr[el].querySelector("a")).toBeFalsy();
+        }
+      }
+    });
+    it(`first steps element with attribute isCurrent=true renders list el. with class stepbar__item--current`, () => {
+      const { container } = render(
+        <Stepbar steps={steps2} className="test-class" />,
+      );
+      const currentItemIndex = steps2.findIndex((step) => {
+        return step.isCurrent;
+      });
+      const item = container.querySelectorAll("li")[currentItemIndex];
+      expect(item).toBeTruthy();
+      expect(item).toHaveClass("stepbar__item--current");
+    });
+  });
+});

package/src/components/Sticker/Sticker.mdx

@@ -0,0 +1,50 @@
+import { ComponentDocs, md } from '@lighting-beetle/lighter-styleguide';
+import { Preview } from '../../styleguide/';
+
+import Sticker from './index';
+import { Bar, BarItem } from '../';
+
+# Sticker
+
+<Preview bgTheme="black">
+  <Sticker>Some content inside</Sticker>
+</Preview>
+
+## Variants
+
+### Colors
+
+<Preview bgTheme="black">
+  <Bar>
+    <BarItem>
+      <Sticker>Default sticker</Sticker>
+    </BarItem>
+    <BarItem>
+      <Sticker color="black">Black sticker</Sticker>
+    </BarItem>
+    <BarItem>
+      <Sticker color="orange">Orange sticker</Sticker>
+    </BarItem>
+  </Bar>
+</Preview>
+
+### Sizes
+
+<Preview bgTheme="black">
+  <Bar>
+    <BarItem>
+      <Sticker>Default sticker</Sticker>
+    </BarItem>
+    <BarItem>
+      <Sticker size="small">Small sticker</Sticker>
+    </BarItem>
+  </Bar>
+</Preview>
+
+## Props
+
+<ComponentDocs title="<Sticker />" component={Sticker} />
+
+## Accessibility
+
+Make sure the information in the sticker is presented in logical order with other conent (e.g. if it shows price, make sure it's before the buy button).

package/src/components/Sticker/Sticker.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import cx from 'classnames';
+
+interface StickerProps {
+  color?: 'black' | 'orange';
+  size?: 'small';
+  children?: React.ReactNode;
+  className?: string;
+  [key: string]: any;
+}
+
+const CLASS_ROOT = 'sticker';
+
+export const Sticker: React.FC<StickerProps> = ({ color, size, children, className, ...other }) => {
+  const classes = cx(
+    CLASS_ROOT,
+    {
+      [`${CLASS_ROOT}--${color}`]: color,
+      [`${CLASS_ROOT}--${size}`]: size,
+    },
+    className
+  );
+
+  return (
+    <div className={classes} {...other}>
+      {children}
+    </div>
+  );
+};
+
+Sticker.displayName = 'Sticker';

package/src/components/Sticker/index.ts

@@ -0,0 +1,4 @@
+import "./styles/style.scss";
+import { Sticker } from "./Sticker";
+
+export { Sticker };

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

@@ -0,0 +1,31 @@
+@use "../../../styles/tokens/color";
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/convert";
+
+$sizes: (
+  default: (
+    width: convert.to-rem(150px),
+    height: convert.to-rem(150px),
+    padding: space.get("small"),
+  ),
+  small: (
+    width: convert.to-rem(104px),
+    height: convert.to-rem(104px),
+    padding: space.get(),
+  ),
+);
+
+$color-palette: (
+  default: (
+    background-color: var(--color-background-contrast),
+    color: var(--color-text-accent),
+  ),
+  black: (
+    background-color: var(--color-background-contrast),
+    color: var(--color-text-inverse),
+  ),
+  orange: (
+    background-color: var(--color-surface-secondary),
+    color: var(--color-text-default),
+  ),
+);

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

@@ -0,0 +1,25 @@
+@use '../../../styles/tools/generate';
+@use './config';
+
+@mixin base() {
+  position: relative;
+  border-radius: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  text-align: center;
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+@mixin size($size, $sizes: config.$sizes) {
+  @include generate.css-map($sizes, $size);
+}
+
+@mixin color($color, $palette: config.$color-palette) {
+  @include generate.css-map($palette, $color);
+}