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

package/src/components/PromotionCard/PromotionCardImageWrapper.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import cx from 'classnames';
+
+import { CLASS_IMAGE_WRAPPER } from './constants';
+
+interface PromotionCardImageWrapperProps {
+  className?: string;
+  children?: React.ReactNode;
+  [key: string]: any;
+}
+
+export const PromotionCardImageWrapper: React.FC<PromotionCardImageWrapperProps> = ({ 
+  className, 
+  children, 
+  ...other 
+}) => {
+  const classes = cx(CLASS_IMAGE_WRAPPER, className);
+  return (
+    <div className={classes} {...other}>
+      {children}
+    </div>
+  );
+};
+
+PromotionCardImageWrapper.displayName = 'PromotionCardImageWrapper';

package/src/components/PromotionCard/PromotionCardSection.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import cx from "classnames";
+
+import { CardSection } from "../Card";
+
+import { CLASS_SECTION } from "./constants";
+
+export interface PromotionCardSectionProps {
+  /** Inverse colors */
+  isInverse?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+  [key: string]: any;
+}
+
+export const PromotionCardSection: React.FC<PromotionCardSectionProps> = ({
+  className,
+  children,
+  ...other
+}) => {
+  const classes = cx(CLASS_SECTION, className);
+  return (
+    <CardSection className={classes} {...other}>
+      {children}
+    </CardSection>
+  );
+};
+
+PromotionCardSection.displayName = "PromotionCardSection";

package/src/components/PromotionCard/PromotionCardTitle.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import cx from 'classnames';
+
+import { CLASS_TITLE } from './constants';
+
+interface PromotionCardTitleProps {
+  className?: string;
+  children: React.ReactElement;
+  [key: string]: any;
+}
+
+export const PromotionCardTitle: React.FC<PromotionCardTitleProps> = ({ 
+  className, 
+  children, 
+  ...other 
+}) => {
+  const classes = cx(CLASS_TITLE, className);
+  return React.cloneElement(children, { 
+    className: classes, 
+    ...other 
+  } as React.HTMLAttributes<HTMLElement>);
+};
+
+PromotionCardTitle.displayName = 'PromotionCardTitle';

package/src/components/PromotionCard/constants.ts

@@ -0,0 +1,5 @@
+export const CLASS_ROOT = 'promotion-card';
+export const CLASS_SECTION = `${CLASS_ROOT}__section`;
+export const CLASS_CONTENT = `${CLASS_ROOT}__content`;
+export const CLASS_IMAGE_WRAPPER = `${CLASS_ROOT}__image-wrapper`;
+export const CLASS_TITLE = `${CLASS_ROOT}__title`; 

package/src/components/PromotionCard/index.ts

@@ -0,0 +1,7 @@
+import "./styles/style.scss";
+
+export { PromotionCard } from "./PromotionCard";
+export { PromotionCardContent } from "./PromotionCardContent";
+export { PromotionCardImageWrapper } from "./PromotionCardImageWrapper";
+export { PromotionCardSection } from "./PromotionCardSection";
+export { PromotionCardTitle } from "./PromotionCardTitle";

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

@@ -0,0 +1,4 @@
+@use '../../../styles/tokens/color';
+@use '../../../styles/tokens/space';
+
+

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

@@ -0,0 +1,89 @@
+@use "sass:math";
+@use "../../../styles/tokens/space";
+@use "../../../styles/tokens/color";
+@use "../../../styles/tools/generate";
+@use "../../../styles/tokens/breakpoint";
+@use "../../../styles/tools/convert";
+@use "./../../../styles/typography/config" as typography;
+@use "./config";
+
+@mixin base {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--color-border-subtle);
+
+  &.bg-black {
+    border: 1px solid var(--color-icon-default);
+  }
+
+  @include breakpoint.get("md") {
+    flex-direction: row !important;
+    margin: space.get("medium") 0;
+    justify-content: space-between;
+  }
+}
+
+@mixin section {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: space.get("medium");
+
+  .btn,
+  button {
+    display: block;
+    width: initial !important;
+  }
+
+  @include breakpoint.get("md") {
+    flex: 0 60%;
+    max-width: 500px;
+    min-width: 0;
+  }
+}
+
+@mixin content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+@mixin image-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  picture {
+    display: inline;
+  }
+
+  img {
+    width: convert.to-rem(260px);
+    height: convert.to-rem(260px);
+    object-fit: cover;
+    object-position: center;
+    margin-bottom: 0;
+  }
+
+  @include breakpoint.get("md") {
+    justify-content: left;
+    padding-right: convert.to-rem(50px);
+
+    img {
+      width: convert.to-rem(176px);
+      height: convert.to-rem(176px);
+    }
+  }
+}
+
+@mixin title {
+  margin-bottom: 0;
+  font-size: convert.to-rem(24px);
+  line-height: convert.to-rem(math.round(24px * 1.1));
+  max-width: convert.to-rem(580px);
+
+  @include breakpoint.get("md") {
+    display: inline-block;
+  }
+}

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

@@ -0,0 +1,25 @@
+@use "../../../styles/tools/generate";
+@use "./config";
+@use "./mixins";
+
+@layer components {
+  .promotion-card {
+    @include mixins.base;
+
+    &__section {
+      @include mixins.section;
+    }
+
+    &__content {
+      @include mixins.content;
+    }
+
+    &__image-wrapper {
+      @include mixins.image-wrapper;
+    }
+
+    &__title {
+      @include mixins.title;
+    }
+  }
+}

package/src/components/SkipLink/SkipLink.mdx

@@ -0,0 +1,23 @@
+import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
+import { Preview, Code } from '../../styleguide/';
+import SkipLink from './';
+
+# Skip link
+
+Provides keyboard users to skip parts of a webpage. Usually a skip link is used as a first element of a page and points to main content. This allows users to skip main navigation and dive into subject matter of the requested page.
+
+The link is visually hidden until it's focused by keyboard.
+
+## Example
+
+<Preview>
+  <SkipLink href="#example-skip-link-target" />
+
+  <div id="example-skip-link-target">
+    Skip link target element
+  </div>
+</Preview>
+
+## Props
+
+<ComponentDocs component={SkipLink} />

package/src/components/SkipLink/SkipLink.tsx

@@ -0,0 +1,25 @@
+import React, { AnchorHTMLAttributes } from "react";
+import cx from "classnames";
+
+interface SkipLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  href?: string;
+}
+
+const CLASS_ROOT = "skip-link";
+
+const SkipLink: React.FC<SkipLinkProps> = ({
+  href = "#maincontent",
+  className,
+  ...props
+}) => {
+  const classes = cx(CLASS_ROOT, className);
+  return (
+    <a href={href} className={classes} {...props}>
+      Preskočiť na hlavný obsah
+    </a>
+  );
+};
+
+SkipLink.displayName = "SkipLink";
+
+export { SkipLink };

package/src/components/SkipLink/index.ts

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

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

@@ -0,0 +1,20 @@
+@use "../../../styles/tokens/color";
+@use "../../../styles/tokens/space";
+
+@layer components {
+  .skip-link {
+    padding: space.get("xsmall") space.get("small");
+    background: var(--color-surface-secondary);
+    color: var(--text-default);
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 12;
+    transform: translateY(-100%);
+    transition: transform 0.2s ease-out;
+  }
+
+  .skip-link:focus {
+    transform: none;
+  }
+}

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

@@ -0,0 +1,88 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { SkipLink } from "../SkipLink";
+
+const TestBase = ({ skipProps }) => (
+  <html>
+    <head>
+      <meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
+      <meta httpEquiv="X-UA-Compatible" content="IE=edge, chrome=1" />
+      <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1.0, user-scalable=yes"
+      />
+    </head>
+    <body>
+      <div id="root">
+        <SkipLink data-testid="skip-link" {...skipProps} />
+        <nav>
+          <a href="/">Home</a>
+        </nav>
+        <main tabIndex={-1} id="maincontent" data-testid="maincontent">
+          <h1>Heading</h1>
+          <a href="/" data-testid="mainlink">
+            Link
+          </a>
+        </main>
+      </div>
+      <div id="root-modals" />
+      <div id="root-dropdowns" />
+      <div id="root-tooltips" />
+    </body>
+  </html>
+);
+
+//children were required plus they helped to check defaultTabIndex
+describe("rendering", () => {
+  describe("initial state", () => {
+    it("rendered", () => {
+      const { getByTestId } = render(<TestBase />);
+      expect(getByTestId("skip-link")).toBeInTheDocument();
+    });
+    it("has class skip-link", () => {
+      const { getByTestId } = render(<TestBase />);
+      expect(getByTestId("skip-link")).toHaveClass("skip-link");
+    });
+    it("has href #maincontent", () => {
+      const { getByTestId } = render(<TestBase />);
+      expect(getByTestId("skip-link").getAttribute("href")).toBe(
+        "#maincontent",
+      );
+    });
+  });
+  describe("passed props", () => {
+    it("has additional class when className is set", () => {
+      const { getByTestId } = render(
+        <TestBase skipProps={{ className: "test-class" }} />,
+      );
+      expect(getByTestId("skip-link")).toHaveClass("skip-link");
+      expect(getByTestId("skip-link")).toHaveClass("test-class");
+    });
+  });
+});
+
+describe("keyboard navigation", () => {
+  it("focuses on first tab", async () => {
+    render(<TestBase />);
+
+    const { tab } = userEvent.setup();
+    await tab();
+
+    expect(screen.getByTestId("skip-link")).toHaveFocus();
+  });
+
+  it.failing("focuses main on click", async () => {
+    render(<TestBase />);
+
+    const { tab, keyboard } = userEvent.setup();
+    await tab();
+    await keyboard("{Enter}");
+
+    expect(screen.getByTestId("maincontent")).toHaveFocus();
+  });
+});

package/src/components/Stepbar/Stepbar.mdx

@@ -0,0 +1,137 @@
+import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
+import { Preview } from '../../styleguide/';
+
+import Stepbar from './index';
+
+# Stepbar
+
+Stepped navigation for multi step processes.
+
+<Preview>
+  <Stepbar
+    steps={[
+      {
+        title: 'Paušál',
+        href: '#',
+      },
+      {
+        title: 'Internet',
+        href: '#',
+        isCurrent: true,
+      },
+      {
+        title: 'TV (nepovinné)',
+        href: '#',
+      },
+    ]}
+  />
+</Preview>
+
+## Dark variant
+
+<Preview>
+  <div className="section bg-black mb-small">
+    <Stepbar
+      variant="dark"
+      steps={[
+        {
+          title: 'Paušál',
+          href: '#',
+        },
+        {
+          title: 'default behaviour on black background',
+          href: '#',
+          isCurrent: true,
+        },
+        {
+          title: 'TV (nepovinné)',
+          href: '#',
+        },
+      ]}
+    />
+  </div>
+  <Stepbar
+    variant="inverse"
+    steps={[
+      {
+        title: 'Paušál',
+        href: '#',
+      },
+      {
+        title: 'with class .stepbar--inverse',
+        href: '#',
+        isCurrent: true,
+      },
+      {
+        title: 'TV (nepovinné)',
+        href: '#',
+      },
+    ]}
+  />
+</Preview>
+
+## Step links
+
+Previous step links must point to a related part of the stepped process, ideally the first interactive element.
+
+<Preview>
+  <Stepbar
+    steps={[
+      {
+        title: 'Paušál',
+        href: '/components/stepbar#form-element',
+      },
+      {
+        title: 'Internet',
+        href: '#form-element',
+        isCurrent: true,
+      },
+      {
+        title: 'TV (nepovinné)',
+        href: '#',
+      },
+    ]}
+  />
+  <input type="text" id="form-element" placeholder="stepped form input" />
+</Preview>
+
+## Responsive behaviour
+
+On small viewports, steps are displayed as rectangles without titles. As the width of screen increases, the title of the active element is shown, and arrows are added. Finnaly titles of non-active steps can be shown using the responsive `--wide-[md/lg/xl]` modifier.
+
+- xs: item titles are hidden, only numbers are visible.
+- sm: current item title is visible
+- md and larger: optionally show all step titles
+
+<Preview>
+  <Stepbar
+    showTitlesFrom="lg"
+    steps={[
+      {
+        title: 'Paušál',
+        href: '#',
+      },
+      {
+        title: 'Internet',
+        href: '#',
+        isCurrent: true,
+      },
+      {
+        title: 'Televízia',
+        href: '#',
+      },
+      {
+        title: 'Doručenie',
+        href: '#',
+      },
+      {
+        title: 'Platba',
+        href: '#',
+      },
+    ]}
+  />
+</Preview>
+
+## Props
+
+<ComponentDocs title="<Stepbar />" component={Stepbar} />

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";