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

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

@@ -1,6 +1,7 @@
 @use "../../../styles/tokens/space";
 @use "../../../styles/tokens/color";
 @use "../../../styles/tools/convert";
+@use "sass:map";
 
 $badge: (
   padding: convert.to-rem(1.7px) space.get(small),
@@ -16,37 +17,72 @@ $round: (
   border-radius: convert.to-rem(16px),
 );
 
-$colors: (
+$colors-light: (
   "default": (
-    background-color: color.$gray-400,
-    color: color.$black,
+    background-color: map.get(color.$colors-light, fill-moderate),
+    color: map.get(color.$colors-light, text-default),
   ),
   "orange": (
-    background-color: color.$orange,
-    color: color.$black,
+    background-color: map.get(color.$colors-light, fill-secondary),
+    color: map.get(color.$colors-light, text-default),
   ),
   "white": (
-    background-color: color.$white,
-    color: color.$black,
+    background-color: map.get(color.$colors-light, background-primary),
+    color: map.get(color.$colors-light, text-default),
   ),
   "black": (
-    background-color: color.$black,
-    color: color.$white,
+    background-color: map.get(color.$colors-light, fill-contrast),
+    color: map.get(color.$colors-light, text-inverse),
   ),
   "success": (
-    background-color: color.$success,
-    color: color.$black,
+    background-color: map.get(color.$colors-light, fill-positive),
+    color: map.get(color.$colors-light, text-default),
   ),
   "danger": (
-    background-color: color.$danger,
-    color: color.$white,
+    background-color: map.get(color.$colors-light, fill-negative),
+    color: map.get(color.$colors-light, text-inverse),
   ),
   "info": (
-    background-color: color.$info,
-    color: color.$black,
+    background-color: map.get(color.$colors-light, fill-information),
+    color: map.get(color.$colors-light, text-default),
   ),
   "warning": (
-    background-color: color.$warning,
-    color: color.$black,
+    background-color: map.get(color.$colors-light, fill-warning),
+    color: map.get(color.$colors-light, text-default),
+  ),
+);
+
+$colors-dark: (
+  "default": (
+    background-color: map.get(color.$colors-dark, fill-moderate),
+    color: map.get(color.$colors-dark, text-default),
+  ),
+  "orange": (
+    background-color: map.get(color.$colors-dark, fill-secondary),
+    color: map.get(color.$colors-dark, text-inverse),
+  ),
+  "white": (
+    background-color: map.get(color.$colors-dark, background-primary),
+    color: map.get(color.$colors-dark, text-inverse),
+  ),
+  "black": (
+    background-color: map.get(color.$colors-dark, background-contrast),
+    color: map.get(color.$colors-dark, text-inverse),
+  ),
+  "success": (
+    background-color: map.get(color.$colors-dark, fill-positive),
+    color: map.get(color.$colors-dark, text-inverse),
+  ),
+  "danger": (
+    background-color: map.get(color.$colors-dark, fill-negative),
+    color: map.get(color.$colors-dark, text-default),
+  ),
+  "info": (
+    background-color: map.get(color.$colors-dark, fill-information),
+    color: map.get(color.$colors-dark, text-inverse),
+  ),
+  "warning": (
+    background-color: map.get(color.$colors-dark, fill-warning),
+    color: map.get(color.$colors-dark, text-inverse),
   ),
 );

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

@@ -11,8 +11,14 @@
   @include generate.css-map($config);
 }
 
-@mixin color($color) {
-  @include generate.css-map(map.get(config.$colors, $color));
+@mixin color($color, $dark: false) {
+  $color-config: if(
+    $dark,
+    map.get(config.$colors-dark, $color),
+    map.get(config.$colors-light, $color)
+  );
+  color: map.get($color-config, color);
+  background-color: map.get($color-config, background-color);
 }
 
 @mixin round($config: config.$round) {

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

@@ -1,4 +1,5 @@
 @use "../../../styles/tools/generate";
+@use "../../../styles/tokens/color";
 @use "./config";
 @use "./mixins";
 
@@ -9,9 +10,12 @@
     @include mixins.round();
   }
 
-  @each $color, $value in config.$colors {
-    &#{generate.variant-name($color)} {
-      @include mixins.color($color);
+  @each $variant, $props in config.$colors-light {
+    &#{generate.variant-name($variant)} {
+      @include mixins.color($variant, false);
+    }
+    &#{generate.variant-name($variant)}.badge--dark {
+      @include mixins.color($variant, true);
     }
   }
 }

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

@@ -1,13 +1,13 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { axe } from 'jest-axe';
+import React from "react";
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
 
-import { colors } from '../Badge';
-import Badge from '../';
+import { colors } from "../Badge";
+import { Badge } from "../";
 
 const example = (
   <>
-    {colors.map(color => (
+    {colors.map((color) => (
       <Badge key={color} color={color}>
         {color}
       </Badge>
@@ -15,12 +15,12 @@ const example = (
   </>
 );
 
-it('is valid html', () => {
+it("is valid html", () => {
   const { container } = render(example);
   expect(container).toHTMLValidate();
 });
 
-it('is accessible', async () => {
+it("is accessible", async () => {
   const { container } = render(example);
   expect(await axe(container)).toHaveNoViolations();
 });

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { render } from "@testing-library/react";
 
-import Badge from "../Badge";
+import { Badge } from "../Badge";
 
 describe("rendering", () => {
   describe("initial state", () => {
@@ -21,7 +21,7 @@ describe("rendering", () => {
       const { getByTestId } = render(
         <Badge>
           <span data-testid="child">Children</span>
-        </Badge>
+        </Badge>,
       );
       expect(getByTestId("child")).toBeInTheDocument();
     });
@@ -31,7 +31,7 @@ describe("rendering", () => {
         const { getByText } = render(
           <Badge color={color} key={color}>
             Badge
-          </Badge>
+          </Badge>,
         );
         expect(getByText("Badge")).toHaveClass(`badge--${color}`);
       });

package/src/components/Breadcrumbs/BreadcrumbItem.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import cx from 'classnames';
+
+interface BreadcrumbItemProps {
+  /** Additional CSS classes */
+  className?: string;
+  /** Current page item */
+  isCurrent?: boolean;
+  /** Item text */
+  text: string;
+  /** Item URL. Omit the URL for current item. */
+  url?: string;
+  /** Additional props */
+  [key: string]: any;
+}
+
+const ITEM_CLASS_ROOT = 'osk-breadcrumbs__item';
+const LINK_CLASS_ROOT = 'osk-breadcrumbs__link';
+
+const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ 
+  className, 
+  isCurrent, 
+  text, 
+  url, 
+  ...other 
+}) => {
+  const itemClasses = cx(ITEM_CLASS_ROOT, className);
+
+  // Ak je URL, všetky props idú na <a>, inak na <li>
+  if (url) {
+    return (
+      <li className={itemClasses}>
+        <a
+          href={url}
+          className={LINK_CLASS_ROOT}
+          {...(isCurrent ? { 'aria-current': 'page' } : {})}
+          {...other}
+        >
+          {text}
+        </a>
+      </li>
+    );
+  }
+
+  return (
+    <li className={itemClasses} {...other}>
+      {text}
+    </li>
+  );
+};
+
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+
+export default BreadcrumbItem;

package/src/components/Breadcrumbs/Breadcrumbs.mdx

@@ -0,0 +1,84 @@
+import { ComponentDocs, md, Dos, Donts } from '@lighting-beetle/lighter-styleguide';
+import { Preview } from '../../styleguide/';
+
+import Breadcrumbs from './index';
+import Grid, { GridCol } from '../Grid';
+
+export const breadcrumbsItems = [
+  {
+    text: 'Home',
+    url: '/styleguide',
+  },
+  {
+    text: 'Components',
+    url: '/components',
+  },
+  {
+    text: 'Breadcrumbs',
+    url: '#main',
+  },
+];
+
+# Breadcrumbs
+
+Help users understand where they are within a website’s structure and move between levels. 
+
+<Preview>
+  <Breadcrumbs label="Breadcrumbs" items={breadcrumbsItems} />
+</Preview>
+
+<Grid>
+  <GridCol size={{ md: 6 }}>
+    <Dos>
+      <p>
+        Use the breadcrumbs component on every page, where you need to help
+        users understand and move between the multiple levels of a website.
+        That means virtually every page except the homepage and checkout.
+      </p>
+      <p>Include the current page to indicate current location.</p>
+    </Dos>
+  </GridCol>
+  <GridCol size={{ md: 6 }}>
+    <Donts>
+      <p>
+        Don’t use the breadcrumbs to show progress through a linear journey or
+        transaction.
+      </p>
+    </Donts>
+  </GridCol>
+</Grid>
+
+## Higlighting current page to screen readers
+
+If your application implements HTML5 landmarks (it should if possible), breadcrumbs should not be a part of the main region, current page hyperlink should point to the main region and be identified with `aria-current="page"` attribute. Otherwise, current page should not be a hyperlink and the `aria-current="page"` is applied to its wrapping `<li />`.
+
+### Current page item as hyperlink
+
+<Preview>
+  <Breadcrumbs label="Breadcrumbs" items={breadcrumbsItems} />
+</Preview>
+
+### Current page item without hyperlink
+
+<Preview>
+  <Breadcrumbs label="Breadcrumbs" items={[ breadcrumbsItems[0], breadcrumbsItems[1], { text: 'Breadcrumbs'} ]} />
+</Preview>
+
+## Dark mode
+
+<Preview>
+  <Breadcrumbs darkMode label="Breadcrumbs" items={breadcrumbsItems} />
+</Preview>
+
+## Props
+
+<ComponentDocs title="<Breadcrumbs />" component={Breadcrumbs} />
+
+## Accessibility
+
+The breadcrumb component is built according to [WAI-ARIA authoring practices 1.1](https://www.w3.org/TR/wai-aria-practices-1.1/#breadcrumb).
+
+## Notes
+
+* On small screens, breadcrumbs collapse and show only the parent page of the current location to provide a simple back button. 
+* This component can be used as a separate package. The only asset required for proper use is a stylesheet, located in `lib/breadcrumbs.css`.

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import cx from 'classnames';
+
+import BreadcrumbItem from './BreadcrumbItem';
+
+interface BreadcrumbItemData {
+  /** Item text */
+  text: string;
+  /** Item URL. Omit the URL for current item. */
+  url?: string;
+}
+
+interface BreadcrumbsProps {
+  /** Additional CSS classes */
+  className?: string;
+  /** Use white breadcrumbs on dark background */
+  darkMode?: boolean;
+  /** Breadcrumb items */
+  items: BreadcrumbItemData[];
+  /** Navigation label */
+  label?: string;
+  /** Additional props */
+  [key: string]: any;
+}
+
+const CLASS_ROOT = 'osk-breadcrumbs';
+
+const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ 
+  className, 
+  label, 
+  items, 
+  darkMode, 
+  ...other 
+}) => {
+  const classes = cx(CLASS_ROOT, className, {
+    'osk-breadcrumbs--dark': darkMode,
+  });
+
+  // Nájdeme index posledného prvku s URL
+  const lastUrlIndex = [...items].reverse().findIndex(item => !!item.url);
+  const lastAnchorIndex = lastUrlIndex === -1 ? -1 : items.length - 1 - lastUrlIndex;
+
+  return (
+    <nav aria-label={label} className={classes} {...other}>
+      <ol className={`${CLASS_ROOT}__container`}>
+        {items.map((item, index) => (
+          <BreadcrumbItem
+            {...item}
+            key={item.text}
+            isCurrent={!!item.url && index === lastAnchorIndex}
+          />
+        ))}
+      </ol>
+    </nav>
+  );
+};
+
+Breadcrumbs.displayName = 'Breadcrumbs';
+
+export default Breadcrumbs;

package/src/components/Breadcrumbs/index.ts

@@ -0,0 +1,5 @@
+import Breadcrumbs from './Breadcrumbs';
+
+import './styles/style.scss';
+
+export default Breadcrumbs;

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

@@ -0,0 +1,2 @@
+$separator: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10'%3E%3Cpath d='M0 1l1-1 5 5-5 5-1-1 4-4z' fill-rule='evenodd'/%3E%3C/svg%3E%0A");
+$separator-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' %3E%3Cpath d='M0 1l1-1 5 5-5 5-1-1 4-4z' fill-rule='evenodd' fill='%23fff' /%3E%3C/svg%3E%0A");

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

@@ -0,0 +1,105 @@
+@use '../../../styles/tokens/base';
+@use '../../../styles/tokens/breakpoint';
+@use '../../../styles/tokens/color';
+@use '../../../styles/tokens/space';
+@use '../../../styles/tools/convert';
+@use '../../Container/styles/mixins' as container;
+@use '../../../styles/typography/mixins' as typoMixins;
+@use './config';
+
+@mixin base {
+  @include typoMixins.list-unstyled;
+
+  padding: space.get('small') 0;
+  background-color: color.$white;
+  font-weight: bold;
+  font-family: base.$font-family;
+  font-size: base.$font-size;
+  line-height: base.$line-height;
+}
+
+@mixin base-dark {
+  background-color: color.$black;
+}
+
+@mixin container {
+  @include container.base;
+
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+@mixin separator {
+  content: '';
+  display: inline-block;
+  font-family: inherit;
+  width: convert.to-rem(20px);
+  height: convert.to-rem(11px);
+  background-image: config.$separator;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: convert.to-rem(6px) convert.to-rem(10px);
+}
+
+@mixin separator-white {
+  background-image: config.$separator-white;
+}
+
+@mixin item {
+  display: inline-block;
+  color: color.$gray-700;
+  margin-bottom: 0;
+
+  &::before {
+    @include separator();
+  }
+
+  &:first-child::before {
+    @include breakpoint.get('sm') {
+      display: none;
+    }
+  }
+
+  &:nth-last-child(2)::before {
+    @include breakpoint.get('xs', 'down') {
+      transform: rotate(180deg);
+    }
+  }
+
+  &:not(:nth-last-child(2)) {
+    @include breakpoint.get('xs', 'down') {
+      display: none;
+    }
+  }
+}
+
+@mixin item-dark {
+  color: color.$gray-600;
+
+  &::before {
+    @include separator-white();
+  }
+}
+
+@mixin link {
+  color: color.$black;
+  text-decoration: none;
+  display: inline-block;
+
+  &:hover {
+    color: color.$black;
+    text-decoration: underline;
+  }
+}
+
+@mixin link-dark {
+  color: color.$white;
+}
+
+@mixin link-current {
+  color: color.$gray-700;
+}
+
+@mixin link-current-dark {
+  color: color.$gray-600;
+}

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

@@ -0,0 +1,37 @@
+@use './mixins';
+
+.osk-breadcrumbs {
+  @include mixins.base;
+
+  &--dark {
+    @include mixins.base-dark;
+  }
+
+  &__container {
+    @include mixins.container;
+  }
+}
+
+.osk-breadcrumbs__item {
+  @include mixins.item;
+
+  .osk-breadcrumbs--dark & {
+    @include mixins.item-dark;
+  }
+}
+
+.osk-breadcrumbs__link {
+  @include mixins.link;
+
+  &[aria-current='page'] {
+    @include mixins.link-current;
+  }
+
+  .osk-breadcrumbs--dark & {
+    @include mixins.link-dark;
+
+    &[aria-current='page'] {
+      @include mixins.link-current-dark;
+    }
+  }
+}