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

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

@@ -1,6 +1,6 @@
-@use '../../../styles/tokens/space';
-@use '../../../styles/tokens/color';
-@use '../../../styles/tools/convert';
+@use "../../../styles/tokens/space";
+@use "../../../styles/tokens/color";
+@use "../../../styles/tools/convert";
 
 $overlay-bg-color: rgba(0, 0, 0, 0.4) !default;
 $overlay-z-index: 500 !default;
@@ -14,12 +14,12 @@ $dialog-offset: space.get() * 2;
 
 $dialog: (
   height: auto,
-  background-color: color.$white,
+  background-color: var(--color-surface-primary),
   z-index: $overlay-z-index + 1,
 );
 
 $dialog-offset: (
-  default: space.get('small'),
+  default: space.get("small"),
   sm: space.get(),
 );
 
@@ -35,8 +35,7 @@ $spacing: (
   ),
   default: (
     default: space.get(),
-    md: space.get('large'),
+    md: space.get("large"),
   ),
-  large: (),
-  // same as default,
+  large: (), // same as default,
 );

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

@@ -88,7 +88,7 @@
   position: sticky;
   top: 0;
   padding-bottom: convert.to-rem(3px); // body starts 10px from close icon edge
-  background: #fff;
+  background: var(--color-surface-primary);
 
   > *:last-child {
     margin-bottom: 0;
@@ -195,6 +195,6 @@
   @media screen and (min-height: 500px) {
     position: sticky;
     bottom: 0;
-    background-color: color.$white;
+    background-color: var(--color-surface-primary);
   }
 }

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

@@ -1,96 +1,98 @@
 @use "sass:map";
-@use '../../../styles/tools/generate';
-@use '../../../styles/tokens/breakpoint';
-@use './config';
-@use './mixins';
-
-.modal {
-  @include mixins.position;
-  @include mixins.modal;
-
-  &[aria-hidden='true'] {
-    @include mixins.hide;
+@use "../../../styles/tools/generate";
+@use "../../../styles/tokens/breakpoint";
+@use "./config";
+@use "./mixins";
+
+@layer components {
+  .modal {
+    @include mixins.position;
+    @include mixins.modal;
+
+    &[aria-hidden="true"] {
+      @include mixins.hide;
+    }
   }
-}
 
-.modal__overlay {
-  @include mixins.position;
-  @include mixins.overlay;
+  .modal__overlay {
+    @include mixins.position;
+    @include mixins.overlay;
 
-  .modal.is-active & {
-    @include mixins.overlay-active;
+    .modal.is-active & {
+      @include mixins.overlay-active;
+    }
   }
-}
 
-.modal__dialog {
-  @include mixins.dialog;
+  .modal__dialog {
+    @include mixins.dialog;
 
-  @each $size, $props in config.$dialog-sizes {
-    &#{generate.variant-name($size)} {
-      @include mixins.dialog-width($size);
+    @each $size, $props in config.$dialog-sizes {
+      &#{generate.variant-name($size)} {
+        @include mixins.dialog-width($size);
+      }
     }
   }
-}
 
-.modal__header {
-  @include mixins.header;
+  .modal__header {
+    @include mixins.header;
 
-  @each $size, $props in config.$spacing {
-    .modal__dialog#{generate.variant-name($size)} & {
-      @include mixins.header-spacing($size);
+    @each $size, $props in config.$spacing {
+      .modal__dialog#{generate.variant-name($size)} & {
+        @include mixins.header-spacing($size);
+      }
     }
   }
-}
-
-.modal__close {
-  @include mixins.close;
-}
-
-.modal__body {
-  @include mixins.body();
 
-  @each $size, $props in config.$spacing {
-    .modal__dialog#{generate.variant-name($size)} & {
-      @include mixins.body-spacing($size);
-    }
+  .modal__close {
+    @include mixins.close;
   }
 
-  &--colorful {
+  .modal__body {
+    @include mixins.body();
+
     @each $size, $props in config.$spacing {
       .modal__dialog#{generate.variant-name($size)} & {
-        @include mixins.colorful-body($size);
+        @include mixins.body-spacing($size);
+      }
+    }
+
+    &--colorful {
+      @each $size, $props in config.$spacing {
+        .modal__dialog#{generate.variant-name($size)} & {
+          @include mixins.colorful-body($size);
+        }
       }
     }
   }
-}
 
-.modal__dialog--full-height .modal__body {
-  flex: 1;
-}
+  .modal__dialog--full-height .modal__body {
+    flex: 1;
+  }
 
-@include breakpoint.get('xs', 'down') {
-  .modal__dialog--full-height {
-    height: calc(100% - 2.5rem);
+  @include breakpoint.get("xs", "down") {
+    .modal__dialog--full-height {
+      height: calc(100% - 2.5rem);
+    }
   }
-}
 
-.modal__footer {
-  @include mixins.footer-base();
+  .modal__footer {
+    @include mixins.footer-base();
 
-  @each $size, $props in config.$spacing {
-    .modal__dialog#{generate.variant-name($size)} & {
-      @include mixins.footer-spacing($size);
+    @each $size, $props in config.$spacing {
+      .modal__dialog#{generate.variant-name($size)} & {
+        @include mixins.footer-spacing($size);
+      }
     }
-  }
 
-  &--sticky {
-    @include mixins.sticky-footer();
+    &--sticky {
+      @include mixins.sticky-footer();
 
-    $spacing: map.get(config.$spacing, 'default');
+      $spacing: map.get(config.$spacing, "default");
 
-    @each $breakpoint, $space in $spacing {
-      @include breakpoint.get($breakpoint) {
-        padding: $space !important;
+      @each $breakpoint, $space in $spacing {
+        @include breakpoint.get($breakpoint) {
+          padding: $space !important;
+        }
       }
     }
   }

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

@@ -53,4 +53,26 @@ describe("rendering Modal", () => {
       expect(child[0]).toHaveClass("modal__header");
     });
   });
+  describe("colorScheme prop", () => {
+    it("should have is-dark class when colorScheme is 'dark'", () => {
+      const { getByTestId } = render(
+        <div id="root">
+          <Modal id="modal-dark" data-testid="modal-dark" colorScheme="dark" />
+        </div>,
+      );
+      expect(getByTestId("modal-dark")).toHaveClass("is-dark");
+    });
+    it("should have is-light class when colorScheme is 'light'", () => {
+      const { getByTestId } = render(
+        <div id="root">
+          <Modal
+            id="modal-light"
+            data-testid="modal-light"
+            colorScheme="light"
+          />
+        </div>,
+      );
+      expect(getByTestId("modal-light")).toHaveClass("is-light");
+    });
+  });
 });

package/src/components/Pagination/Pagination.mdx

@@ -0,0 +1,45 @@
+import {ComponentDocs,  Preview, Note, md } from '@lighting-beetle/lighter-styleguide';
+import Pagination from './index';
+
+# Pagination
+
+export const getItems = (count = 10, current = Math.ceil(count / 2)) => [...Array(count).fill('').map((_, i) => i+1)].map(n => ({
+  label: `${n}`,
+  ariaLabel: `Strana ${n}`,
+  href: `/?page=${n}`,
+  ...(current === n ? {isActive: true } : {}),
+}));
+
+export const label = "Výber stránok";
+
+Pagination is used to separate long lists or pages into more readable chunks and reduce server load by rendering a limited amount of items.
+
+The maximum of visible items is 5. 
+
+<Preview>
+  <Pagination label={label} items={getItems(10)} />
+</Preview>
+
+## Separators
+
+Separators are used when there is more than 5 items and the active page is not near the first or last item.
+
+<Preview>
+  <Pagination label={label} items={getItems(10, 3)} />
+  <Pagination label={label} items={getItems(10)} />
+  <Pagination label={label} items={getItems(10, 9)} />
+</Preview>
+
+## Compact
+
+Compact pagination is used in confined spaces, such as cards. First and last elements are replaced with an icon and separators are removed.
+
+<Preview>
+  <Pagination label={label} items={getItems(10, 1)} isCompact />
+  <Pagination label={label} items={getItems(10, 2)} isCompact />
+  <Pagination label={label} items={getItems(10)} isCompact />
+  <Pagination label={label} items={getItems(10, 9)} isCompact />
+  <Pagination label={label} items={getItems(10, 10)} isCompact />
+</Preview>
+
+<ComponentDocs title="<Pagination />" component={Pagination} />

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,86 @@
+import React, { useMemo } from 'react';
+import cx from 'classnames';
+
+import { PaginationItem } from './PaginationItem';
+import Separator from './Separator';
+import { getItemState } from './helpers';
+
+interface PaginationItem {
+  /** Page link href */
+  href: string;
+  /** Text label inside page item */
+  label: string;
+  /** Active state. */
+  isActive?: boolean;
+  /** aria-label of page item */
+  ariaLabel?: string;
+}
+
+interface PaginationProps {
+  /** Collapsed version */
+  isCompact?: boolean;
+  /** Dark theme */
+  colorScheme?: "light" | "dark";
+  /** All pagination items - buttons & numbers */
+  items: PaginationItem[];
+  /** Accessibility label */
+  label?: string;
+  /** Additional CSS class name */
+  className?: string;
+  /** Additional props */
+  [key: string]: any;
+}
+
+const CLASS_ROOT = 'pagination';
+
+export const Pagination: React.FC<PaginationProps> = ({ 
+  className, 
+  label, 
+  isCompact, 
+  colorScheme = "light",
+  items, 
+  ...other 
+}) => {
+  const classes = cx(CLASS_ROOT, {
+    "is-dark": colorScheme === "dark",
+    "is-light": colorScheme === "light",
+  }, className);
+
+  const activeIndex = useMemo(() => items.findIndex(({ isActive }) => isActive), [items]);
+
+  return (
+    <nav aria-label={label}>
+      <ul className={classes} {...other}>
+        {items.map((item, index) => {
+          const {
+            isFirst,
+            isHidden,
+            isLast,
+            isSecond,
+            isSecondFromEnd,
+            hasIcon,
+            showSeparator,
+          } = getItemState({ activeIndex, items, isCompact: isCompact || false, index });
+
+          return (
+            <React.Fragment key={index.toString()}>
+              {!isCompact && showSeparator && isSecond && <Separator />}
+              <PaginationItem
+                {...item}
+                ariaLabel={item.ariaLabel || item.label}
+                isActive={item.isActive || false}
+                isFirst={isFirst}
+                isLast={isLast}
+                className={cx({ hide: isHidden })}
+                hasIcon={hasIcon}
+              />
+              {!isCompact && showSeparator && isSecondFromEnd && <Separator />}
+            </React.Fragment>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+};
+
+Pagination.displayName = "Pagination";

package/src/components/Pagination/PaginationItem.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import cx from "classnames";
+
+import { Icon } from "../Icon/index";
+
+interface PaginationItemProps {
+  /** aria-label of page item */
+  ariaLabel?: string;
+  /** Text label inside page item */
+  label?: string;
+  /** Show icon as label */
+  hasIcon?: boolean;
+  /** Link href */
+  href?: string;
+  /** Active state */
+  isActive?: boolean;
+  /** Is first item */
+  isFirst?: boolean;
+  /** Is last item */
+  isLast?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const ITEM_CLASS_ROOT = "pagination__item";
+const ANCHOR_CLASS_ROOT = "pagination__link";
+
+export const PaginationItem: React.FC<PaginationItemProps> = ({
+  ariaLabel,
+  className,
+  hasIcon,
+  href,
+  isActive,
+  isFirst,
+  isLast,
+  label,
+  ...other
+}) => {
+  const itemClasses = cx(ITEM_CLASS_ROOT, className);
+
+  const anchorClasses = cx(ANCHOR_CLASS_ROOT, "btn btn--square", {
+    [`${ANCHOR_CLASS_ROOT}--active`]: isActive,
+  });
+
+  return (
+    <li className={itemClasses} {...other}>
+      <a
+        href={href}
+        className={anchorClasses}
+        aria-current={isActive ? "page" : undefined}
+        aria-label={ariaLabel}
+      >
+        {hasIcon && isFirst && <Icon name="chevron-start" />}
+        {!hasIcon && label}
+        {hasIcon && isLast && <Icon name="chevron-end" />}
+      </a>
+    </li>
+  );
+};
+
+PaginationItem.displayName = "PaginationItem";

package/src/components/Pagination/Separator.tsx

@@ -0,0 +1,19 @@
+import React, { HTMLAttributes } from "react";
+import cx from "classnames";
+
+const CLASS_ROOT = "pagination__separator";
+
+const Separator = (props: HTMLAttributes<HTMLLIElement>) => {
+  const { className, ...other } = props;
+  const itemClasses = cx(CLASS_ROOT, className);
+
+  return (
+    <li className={itemClasses} {...other}>
+      …
+    </li>
+  );
+};
+
+Separator.displayName = "PaginationSeparator";
+
+export default Separator;

package/src/components/Pagination/helpers.ts

@@ -0,0 +1,71 @@
+interface PaginationItem {
+  href: string;
+  label: string;
+  isActive?: boolean;
+  ariaLabel?: string;
+}
+
+interface GetItemStateParams {
+  activeIndex: number;
+  items: PaginationItem[];
+  isCompact: boolean;
+  index: number;
+}
+
+interface ItemState {
+  isFirst: boolean;
+  isHidden: boolean;
+  isLast: boolean;
+  isSecond: boolean;
+  isSecondFromEnd: boolean;
+  hasIcon: boolean;
+  showSeparator: boolean;
+}
+
+export function getItemState({ activeIndex, items, isCompact, index }: GetItemStateParams): ItemState {
+  const isFirst = index === 0;
+  const isSecond = index === 1;
+  const isCurrent = index === activeIndex;
+  const isSecondFromEnd = index === items.length - 2;
+  const isLast = index === items.length - 1;
+  const isSiblingActive =
+    activeIndex === index - 1 || activeIndex === index + 1;
+
+  const maxVisible = 5; // must be odd number to work properly
+  const isCloseToCurrent =
+    (index < activeIndex + Math.floor(maxVisible / 2) && index > activeIndex) ||
+    (index > activeIndex - Math.floor(maxVisible / 2) && index < activeIndex);
+
+  const isCloseToFirst = index < maxVisible - 1 && activeIndex < maxVisible - 2;
+  const isCloseToLast =
+    index > items.length - maxVisible &&
+    activeIndex > items.length - (maxVisible - 1);
+
+  const isHidden = !(
+    isCloseToCurrent ||
+    isCloseToFirst ||
+    isCloseToLast ||
+    isFirst ||
+    isCurrent ||
+    isLast
+  );
+
+  const showSeparator = (isSecond && isHidden) || (isSecondFromEnd && isHidden);
+
+  const hasIcon =
+    isCompact &&
+    !isCurrent &&
+    (isFirst || isLast) &&
+    !isSiblingActive &&
+    !(items.length <= maxVisible);
+
+  return {
+    isFirst,
+    isHidden,
+    isLast,
+    isSecond,
+    isSecondFromEnd,
+    hasIcon,
+    showSeparator,
+  };
+}

package/src/components/Pagination/index.ts

@@ -0,0 +1,5 @@
+import "./styles/style.scss";
+
+export { Pagination } from "./Pagination";
+export { PaginationItem } from "./PaginationItem";
+export { default as Separator } from "./Separator";

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

@@ -0,0 +1,43 @@
+@use "../../Button/styles/style";
+@use "../../../styles/tokens/space";
+@use "../../../styles/tokens/color";
+@use "../../../styles/tokens/breakpoint";
+@use "../../../styles/tools/convert";
+@use "../../../styles/typography/mixins" as typoMixins;
+
+@mixin base() {
+  @include typoMixins.list-unstyled();
+
+  display: flex;
+  max-width: none;
+  margin-bottom: space.get();
+}
+
+@mixin separator() {
+  font-weight: bold;
+  height: 50%;
+  align-self: center;
+}
+
+@mixin item() {
+  margin-right: space.get("small");
+  margin-bottom: 0;
+}
+
+@mixin last-item() {
+  margin-right: 0;
+}
+
+@mixin link() {
+  margin-bottom: 0;
+  background-color: var(--color-background-primary);
+  &:hover {
+    background-color: var(--color-background-contrast);
+  }
+}
+
+@mixin link-active() {
+  color: var(--color-text-inverse);
+  background-color: var(--color-surface-tertiary);
+  border-color: var(--color-border-accent);
+}

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

@@ -0,0 +1,28 @@
+@use "./mixins";
+
+@layer components {
+  .pagination {
+    @include mixins.base;
+
+    &__separator {
+      @include mixins.separator;
+    }
+
+    &__item,
+    &__separator {
+      @include mixins.item;
+    }
+
+    &__item:last-child {
+      @include mixins.last-item;
+    }
+
+    &__link {
+      @include mixins.link;
+
+      &--active {
+        @include mixins.link-active;
+      }
+    }
+  }
+}