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

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/Section/Section.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import cx from "classnames";
-import Container from "../Container";
+import { Container } from "../Container";
 
 export type SectionColor = "white" | "gray" | "black" | "orange";
 export type SectionSpacing = "default" | "small" | "xsmall";

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

@@ -1,35 +1,37 @@
-@use '../../../styles/tokens/breakpoint';
-@use '../../../styles/tools/generate';
-@use './mixins';
-@use './config';
-@use 'sass:map' as sassmap;
-@use 'sass:string';
-@use '../../../styles/tools/map';
-@use '../../../styles/tools/layout';
+@use "../../../styles/tokens/breakpoint";
+@use "../../../styles/tools/generate";
+@use "./mixins";
+@use "./config";
+@use "sass:map" as sassmap;
+@use "sass:string";
+@use "../../../styles/tools/map";
+@use "../../../styles/tools/layout";
 
-.section {
-  $this: &;
+@layer components {
+  .section {
+    $this: &;
 
-  @include mixins.spacing('default');
-  @include mixins.spacing-rules();
+    @include mixins.spacing("default");
+    @include mixins.spacing-rules();
 
-  &--default {
-    @include mixins.spacing('default');
-  }
+    &--default {
+      @include mixins.spacing("default");
+    }
 
-  &--small {
-    @include mixins.spacing('small');
-  }
+    &--small {
+      @include mixins.spacing("small");
+    }
 
-  &--xsmall {
-    @include mixins.spacing('xsmall');
-  }
+    &--xsmall {
+      @include mixins.spacing("xsmall");
+    }
 
-  .container > & {
-    @include layout.reset-last-child-margin-bottom;
-  }
+    .container > & {
+      @include layout.reset-last-child-margin-bottom;
+    }
 
-  &__image-stuck-to-bottom {
-    @include mixins.image-stuck-to-bottom;
+    &__image-stuck-to-bottom {
+      @include mixins.image-stuck-to-bottom;
+    }
   }
 }

package/src/components/Skeleton/Skeleton.mdx

@@ -0,0 +1,90 @@
+
+import { ComponentDocs, md } from '@lighting-beetle/lighter-styleguide';
+import { Preview } from '../../styleguide/';
+
+import Skeleton from './index';
+import Card, { CardSection } from '../Card';
+import Grid, { GridCol } from '../Grid';
+
+# Skeleton
+
+Basic loading indicator used as placeholder of the loaded component
+
+<Preview>
+  <Skeleton />
+</Preview>
+
+## Usage
+
+Feel free to adjust the size of the skeleton with [Grid component](/components/grid).
+
+<Preview>
+  <Grid>
+    <GridCol size={6}>
+      <Skeleton className="h2" />
+    </GridCol>
+  </Grid>
+  <h2>
+    <Skeleton />
+  </h2>
+</Preview>
+
+To simulate the structure of the component being loaded, mix up some skeletons
+
+<Preview>
+  <Card>
+    <CardSection>
+      <Grid>
+        <GridCol size={8}>
+          <Skeleton className="h2" />
+        </GridCol>
+      </Grid>
+      <Grid>
+        <GridCol><Skeleton /></GridCol>
+        <GridCol><Skeleton /></GridCol>
+        <GridCol><Skeleton /></GridCol>
+        <GridCol><Skeleton /></GridCol>
+        <GridCol size={6}><Skeleton /></GridCol>
+      </Grid>
+    </CardSection>
+  </Card>
+</Preview>
+
+<Preview>
+  <Grid>
+    {[1,2,3].map(item => (
+      <GridCol key={item.toString()} size={{ md: 6, lg: 4}}>
+        <Card>
+          <CardSection>
+            <Grid justifyHeight>
+              <GridCol size={6}>
+                <Skeleton />
+              </GridCol>
+              <GridCol size="auto">
+                <Grid>
+                  <GridCol>
+                    <Skeleton className="h2" />
+                  </GridCol>
+                </Grid>
+                <Grid>
+                  {[1,2,3,4,5,6,7].map(item => (
+                    <GridCol key={item.toString()}><Skeleton /></GridCol>
+                  ))}
+                  <GridCol size={6}><Skeleton /></GridCol>
+                </Grid>
+              </GridCol>
+            </Grid>
+          </CardSection>
+        </Card>
+      </GridCol>
+    ))}
+  </Grid>
+</Preview>
+
+## Props
+
+<ComponentDocs title="<Skeleton />" component={Skeleton} />
+
+## Accessibility
+
+You should announce the loading state using aria-busy in the appropriate live region

package/src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import cx from "classnames";
+
+const CLASS_ROOT = "skeleton";
+
+const Skeleton: React.FC<React.HTMLAttributes<HTMLSpanElement>> = ({
+  className,
+  ...other
+}) => {
+  const classes = cx(CLASS_ROOT, className);
+
+  return (
+    <span className={classes} {...other}>
+      &zwnj;
+    </span>
+  );
+};
+
+Skeleton.displayName = "Skeleton";
+
+export { Skeleton };

package/src/components/Skeleton/index.ts

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

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

@@ -0,0 +1,31 @@
+@use "../../../styles/tokens/color";
+@use "../../../styles/tools/convert";
+
+@keyframes skeletonKeyframes {
+  0% {
+    opacity: 0;
+  }
+
+  30% {
+    opacity: 0.8;
+  }
+
+  70% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+$skeleton-base: (
+  background-color: var(--color-surface-subtle),
+  border-radius: convert.to-rem(5px),
+);
+
+$skeleton-overlay: (
+  border-radius: convert.to-rem(5px),
+  background-color: var(--color-surface-moderate),
+  animation: 1.5s skeletonKeyframes linear infinite,
+);

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

@@ -0,0 +1,22 @@
+@use '../../../styles/tools/generate';
+@use './config';
+
+@mixin base {
+  @include generate.css-map(config.$skeleton-base);
+
+  position: relative;
+  display: inline-block;
+  line-height: 1;
+  width: 100%;
+
+  &::after {
+    @include generate.css-map(config.$skeleton-overlay);
+
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}

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

@@ -0,0 +1,7 @@
+@use "./mixins";
+
+@layer components {
+  .skeleton {
+    @include mixins.base;
+  }
+}

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

@@ -0,0 +1,16 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+import { Skeleton } from "../";
+
+const example = <Skeleton />;
+
+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/Skeleton/tests/Skeleton.unit.test.js

@@ -0,0 +1,22 @@
+import { render } from "@testing-library/react";
+
+import { Skeleton } from "../Skeleton";
+
+describe("rendering Skeleton", () => {
+  describe("initial state", () => {
+    it("has default className skeleton", () => {
+      const { getByTestId } = render(<Skeleton data-testid="test-id" />);
+      expect(getByTestId("test-id")).toHaveClass("skeleton");
+    });
+  });
+
+  describe("passed props", () => {
+    it("has additional class when className is set ", () => {
+      const { getByTestId } = render(
+        <Skeleton data-testid="test-id" className="test-class" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("skeleton");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+  });
+});

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} />