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

package/src/components/Loader/Loader.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import React, { ReactNode } from "react";
+import cx from "classnames";
+
+import { useStatic } from "../../utils/hooks";
+
+import LoaderStatic from "./Loader.static";
+
+const CLASS_ROOT = "loader";
+
+interface LoaderProps {
+  colour?: "default" | "inverse";
+  isDelayed?: boolean;
+  /** Messages that the loader will cycle until done */
+  messages?: string[];
+  /** Size variants */
+  size?: "default" | "large";
+  className?: string;
+  children?: ReactNode;
+  [key: string]: any;
+}
+
+const Loader: React.FC<LoaderProps> = ({
+  messages,
+  size = "default",
+  className,
+  colour = "default",
+  isDelayed,
+  children,
+  ...other
+}) => {
+  const [loaderRef] = useStatic(LoaderStatic, { messages, isDelayed });
+
+  const classes = cx(
+    CLASS_ROOT,
+    {
+      [`${CLASS_ROOT}--${size}`]: size !== "default",
+      [`${CLASS_ROOT}--${colour}`]: colour !== "default",
+      hide: isDelayed,
+    },
+    className,
+  );
+
+  return (
+    <div className={classes} {...other}>
+      <div
+        className={cx(`${CLASS_ROOT}__body`, {
+          [`${CLASS_ROOT}__body--inverse`]: colour !== "default",
+        })}
+      >
+        <div
+          className={cx(`${CLASS_ROOT}__line`, {
+            [`${CLASS_ROOT}__line--inverse`]: colour !== "default",
+          })}
+        />
+      </div>
+      {messages && (
+        <div
+          data-loader
+          data-loader-delayed={isDelayed}
+          data-loader-messages={JSON.stringify(messages)}
+          className={`${CLASS_ROOT}__messages`}
+          ref={loaderRef}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+Loader.displayName = "Loader";
+
+export { Loader };

package/src/components/Loader/index.ts

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

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

@@ -0,0 +1,16 @@
+@use '../../../styles/tokens/color';
+@use '../../../styles/tokens/space';
+@use '../../../styles/tools/convert';
+
+$sizes: (
+  default: (
+    width: convert.to-rem(40px),
+    height: convert.to-rem(40px),
+    margin-right: space.get('small'),
+  ),
+  large: (
+    width: convert.to-rem(50px),
+    height: convert.to-rem(50px),
+    margin-right: space.get(),
+  )
+);

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

@@ -0,0 +1,66 @@
+@use "sass:map";
+@use "../../../styles/tools/generate";
+@use "../../../styles/tools/convert";
+@use "../../../styles/tokens/color";
+@use "./config";
+
+@keyframes logo-line {
+  0% {
+    transform: translateX(-150%);
+  }
+
+  30% {
+    transform: translateX(0);
+  }
+
+  70% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(150%);
+  }
+}
+
+@mixin base {
+  display: flex;
+  align-items: flex-end;
+}
+
+@mixin body-base {
+  flex: 0 0 auto;
+  overflow: hidden;
+  background-color: var(--color-icon-brand);
+}
+
+@mixin size($size: default) {
+  @include generate.css-map(map.get(config.$sizes, $size));
+}
+
+@mixin line-base {
+  height: 15%;
+  margin-left: 15%;
+  margin-right: 15%;
+  margin-top: 70%;
+  background-color: color.$white;
+  will-change: transform;
+  animation: logo-line 1200ms infinite;
+}
+
+@mixin color-inverse {
+  background-color: color.$white;
+}
+
+@mixin line-color-inverse {
+  background-color: color.$orange;
+}
+
+@mixin messages-base {
+  max-width: 100%;
+  flex: 0 1 convert.to-rem(250px);
+  font-weight: bold;
+}
+
+@mixin messages-large {
+  font-size: convert.to-rem(18px);
+}

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

@@ -0,0 +1,38 @@
+@use "./mixins";
+
+@layer components {
+  .loader {
+    @include mixins.base;
+
+    &__body {
+      @include mixins.body-base;
+      @include mixins.size;
+
+      .loader--large & {
+        @include mixins.size(large);
+      }
+
+      &--inverse,
+      .bg-orange & {
+        @include mixins.color-inverse();
+      }
+    }
+
+    &__line {
+      @include mixins.line-base;
+
+      &--inverse,
+      .bg-orange & {
+        @include mixins.line-color-inverse();
+      }
+    }
+
+    &__messages {
+      @include mixins.messages-base;
+
+      .loader--large & {
+        @include mixins.messages-large;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,22 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+import { Loader } from "../";
+
+const example = (
+  <>
+    <Loader />
+    <Loader>Loading</Loader>
+    <Loader messages={["message 1", "message 2"]}>Loading...</Loader>
+  </>
+);
+
+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/Loader/tests/Loader.unit.test.js

@@ -0,0 +1,59 @@
+import { render } from "@testing-library/react";
+
+import { Loader } from "../";
+
+describe("rendering Item", () => {
+  describe("initial state", () => {
+    it("has additional class when className is set ", () => {
+      const { getByTestId } = render(<Loader data-testid="test-id" />);
+      expect(getByTestId("test-id")).toHaveClass("loader");
+    });
+
+    it("has default class loader__body", () => {
+      const { container } = render(<Loader />);
+      expect(container.getElementsByClassName("loader__body").length).toBe(1);
+    });
+    it("has default class loader__line", () => {
+      const { container } = render(<Loader />);
+      expect(container.getElementsByClassName("loader__line").length).toBe(1);
+    });
+  });
+
+  describe("passed props", () => {
+    it("has additional class when className is set ", () => {
+      const { getByTestId } = render(
+        <Loader data-testid="test-id" className="test-class" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("loader");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+    it("has loader--large when size is set to large", () => {
+      const { container } = render(<Loader size="large" />);
+      expect(container.getElementsByClassName("loader--large").length).toBe(1);
+    });
+    it("has loader__messages class when messages is set ", () => {
+      const { container } = render(<Loader messages={["test1", "test2"]} />);
+      expect(container.getElementsByClassName("loader__messages").length).toBe(
+        1,
+      );
+    });
+    it("renders children when messages is set", () => {
+      const { queryByText } = render(
+        <Loader messages={["test1", "test2"]}>test-child</Loader>,
+      );
+      expect(queryByText("test-child")).toBeTruthy();
+    });
+    it("renders children when messages is set", () => {
+      const { queryByText } = render(<Loader>test-child</Loader>);
+      expect(queryByText("test-child")).toBeFalsy();
+    });
+    it("renders children when messages is set", () => {
+      const { getByText } = render(
+        <Loader messages={["test1", "test2"]}>test-child</Loader>,
+      );
+      expect(getByText("test-child").getAttribute("data-loader-messages")).toBe(
+        '["test1","test2"]',
+      );
+    });
+  });
+});

package/src/components/Loader/tests/test.scss

@@ -0,0 +1,5 @@
+div[style*="border:2px solid red;"] {
+  .loader__line {
+    animation: none !important;
+  }
+}

package/src/components/Modal/Modal.mdx

@@ -1,5 +1,5 @@
-import { loremIpsum } from 'lorem-ipsum';
-import parse from 'html-react-parser';
+import { loremIpsum } from "lorem-ipsum";
+import parse from "html-react-parser";
 import {
   Note,
   ComponentDocs,
@@ -7,15 +7,15 @@ import {
   DocsTable,
   Code,
   Link,
-} from '@lighting-beetle/lighter-styleguide';
+} from "@lighting-beetle/lighter-styleguide";
 
-import Button, { ButtonSecondary } from '../Button';
-import Buttons from '../Buttons';
-import Grid, { GridCol } from '../Grid';
-import Icon from '../Icon';
-import IconList from '../IconList';
-import Image from '../Image';
-import Modal, { ModalHeader, ModalBody, ModalFooter } from '.';
+import Button, { ButtonSecondary } from "../Button";
+import Buttons from "../Buttons";
+import Grid, { GridCol } from "../Grid";
+import Icon from "../Icon";
+import IconList from "../IconList";
+import { Image } from "../Image";
+import Modal, { ModalHeader, ModalBody, ModalFooter } from ".";
 
 export const actionButtons = [
   <Button type="primary" data-a11y-dialog-hide key="1">
@@ -41,20 +41,20 @@ export const PopulatedIconList = () => (
   <IconList
     items={[
       {
-        icon: 'money-box',
-        content: loremIpsum({ count: 1, units: 'sentence' }),
+        icon: "money-box",
+        content: loremIpsum({ count: 1, units: "sentence" }),
       },
       {
-        icon: 'antenna',
-        content: loremIpsum({ count: 1, units: 'sentence' }),
+        icon: "antenna",
+        content: loremIpsum({ count: 1, units: "sentence" }),
       },
       {
-        icon: 'buy',
-        content: loremIpsum({ count: 1, units: 'sentence' }),
+        icon: "buy",
+        content: loremIpsum({ count: 1, units: "sentence" }),
       },
       {
-        icon: 'cinema-ticket-2-for-1',
-        content: loremIpsum({ count: 1, units: 'sentence' }),
+        icon: "cinema-ticket-2-for-1",
+        content: loremIpsum({ count: 1, units: "sentence" }),
       },
     ]}
   />
@@ -68,7 +68,7 @@ Requires user interaction before they can proceed.
 <Preview>
   <Button data-a11y-dialog-show="modal">Open Modal</Button>
   <Modal id="modal" title="Example modal">
-    {parse(loremIpsum({ count: 10, units: 'paragraph', format: 'html' }))}
+    {parse(loremIpsum({ count: 10, units: "paragraph", format: "html" }))}
   </Modal>
 </Preview>
 
@@ -87,7 +87,7 @@ be customized when required.
     title="Small modal"
     actions={actionButtons}
   >
-    {parse(loremIpsum({ count: 1, units: 'paragraph', format: 'html' }))}
+    {parse(loremIpsum({ count: 1, units: "paragraph", format: "html" }))}
   </Modal>
 </Preview>
 
@@ -100,7 +100,7 @@ be customized when required.
       count={3}
       icon="checked"
       content={parse(
-        loremIpsum({ count: 1, units: 'sentence', format: 'html' })
+        loremIpsum({ count: 1, units: "sentence", format: "html" }),
       )}
     />
     <PopulatedIconList />
@@ -117,12 +117,12 @@ be customized when required.
     actions={actionButtons}
     size="large"
   >
-    <p className="mb-xlarge">{loremIpsum({ count: 1, units: 'paragraph' })}</p>
+    <p className="mb-xlarge">{loremIpsum({ count: 1, units: "paragraph" })}</p>
     <Checkmarks
       count={5}
       icon="checked"
       content={parse(
-        loremIpsum({ count: 1, units: 'sentence', format: 'html' })
+        loremIpsum({ count: 1, units: "sentence", format: "html" }),
       )}
     />
     <PopulatedIconList />
@@ -147,11 +147,11 @@ Customize the title and other content inside header.
           Return to previous step
         </a>
         <h2>Modal with custom title and content.</h2>
-        <p className="mb-none">{loremIpsum({ count: 1, units: 'sentence' })}</p>
+        <p className="mb-none">{loremIpsum({ count: 1, units: "sentence" })}</p>
       </>
     )}
   >
-    {parse(loremIpsum({ count: 10, units: 'paragraph', format: 'html' }))}
+    {parse(loremIpsum({ count: 10, units: "paragraph", format: "html" }))}
   </Modal>
 </Preview>
 
@@ -177,7 +177,7 @@ Customize the footer. Should be primary used for specific action button cases.
       </>
     )}
   >
-    {parse(loremIpsum({ count: 1, units: 'paragraph', format: 'html' }))}
+    {parse(loremIpsum({ count: 1, units: "paragraph", format: "html" }))}
   </Modal>
 </Preview>
 
@@ -195,7 +195,7 @@ On XS screens (mobile devices), the modal will take the full height of the viewp
     fullHeight
     actions={actionButtons}
   >
-    {parse(loremIpsum({ count: 1, units: 'paragraph', format: 'html' }))}
+    {parse(loremIpsum({ count: 1, units: "paragraph", format: "html" }))}
   </Modal>
 </Preview>
 
@@ -214,42 +214,42 @@ Sticky footers do not stick in IE, as it [does not support `position: sticky`](h
     hasStickyFooter
     actions={actionButtons}
   >
-    <p className="mb-xlarge">{loremIpsum({ count: 1, units: 'paragraph' })}</p>
+    <p className="mb-xlarge">{loremIpsum({ count: 1, units: "paragraph" })}</p>
     <Grid className="mb-xlarge">
       <GridCol size="auto">
         <Image alt="" src="https://placehold.co/300x300" />
       </GridCol>
       <GridCol size="fill">
         <h3 className="h2" hasMdxLink={false}>
-          {loremIpsum({ count: 4, units: 'word' })}
+          {loremIpsum({ count: 4, units: "word" })}
         </h3>
         <IconList
-          items={[...Array(4)].map(i => ({
-            icon: 'tick',
-            content: loremIpsum({ count: 5, units: 'word' }),
+          items={[...Array(4)].map((i) => ({
+            icon: "tick",
+            content: loremIpsum({ count: 5, units: "word" }),
           }))}
         />
       </GridCol>
     </Grid>
-    <h3>{loremIpsum({ count: 3, units: 'word' })}</h3>
+    <h3>{loremIpsum({ count: 3, units: "word" })}</h3>
     <Checkmarks
       count={5}
       icon="checked"
       content={parse(
-        loremIpsum({ count: 1, units: 'sentence', format: 'html' })
+        loremIpsum({ count: 1, units: "sentence", format: "html" }),
       )}
     />
-    <h3>{loremIpsum({ count: 3, units: 'word' })}</h3>
+    <h3>{loremIpsum({ count: 3, units: "word" })}</h3>
     <Checkmarks
       count={3}
       icon="battery-charging"
       content={
         <React.Fragment>
-          <h4 hasMdxLink={false}>{loremIpsum({ count: 3, units: 'word' })}</h4>
+          <h4 hasMdxLink={false}>{loremIpsum({ count: 3, units: "word" })}</h4>
           <ul>
             {[...Array(3)].map((_, i) => (
               <li key={i.toString()}>
-                {loremIpsum({ count: 1, units: 'sentence' })}
+                {loremIpsum({ count: 1, units: "sentence" })}
               </li>
             ))}
           </ul>
@@ -278,12 +278,12 @@ when the first/last body element is using default color (white).
     id="modal-colorful"
     title="Colorful modal"
     size="large"
-    renderBody={title => (
+    renderBody={(title) => (
       <>
         <ModalBody color="white" className="pt-none">
           {title}
           <p className="mb-xlarge">
-            {loremIpsum({ count: 1, units: 'paragraph' })}
+            {loremIpsum({ count: 1, units: "paragraph" })}
           </p>
           <Grid className="mb-large">
             <GridCol size="auto">
@@ -291,12 +291,12 @@ when the first/last body element is using default color (white).
             </GridCol>
             <GridCol size="fill">
               <h3 className="h2" hasMdxLink={false}>
-                {loremIpsum({ count: 4, units: 'word' })}
+                {loremIpsum({ count: 4, units: "word" })}
               </h3>
               <IconList
-                items={[...Array(4)].map(i => ({
-                  icon: 'tick',
-                  content: loremIpsum({ count: 5, units: 'word' }),
+                items={[...Array(4)].map((i) => ({
+                  icon: "tick",
+                  content: loremIpsum({ count: 5, units: "word" }),
                 }))}
               />
             </GridCol>
@@ -310,12 +310,12 @@ when the first/last body element is using default color (white).
             content={
               <React.Fragment>
                 <h4 hasMdxLink={false}>
-                  {loremIpsum({ count: 3, units: 'word' })}
+                  {loremIpsum({ count: 3, units: "word" })}
                 </h4>
                 <ul>
                   {[...Array(3)].map((_, i) => (
                     <li key={i.toString()}>
-                      {loremIpsum({ count: 1, units: 'sentence' })}
+                      {loremIpsum({ count: 1, units: "sentence" })}
                     </li>
                   ))}
                 </ul>
@@ -342,8 +342,8 @@ access to instance and you can handle modals programatically.
 
 ```js
 const instance = new window.ODS.modules.Modal(
-  document.getElementById('my-modal'),
-  config
+  document.getElementById("my-modal"),
+  config,
 );
 ```
 
@@ -352,28 +352,28 @@ const instance = new window.ODS.modules.Modal(
 <DocsTable
   data={[
     {
-      prop: 'classModalIsOpen',
-      type: 'string',
-      default: 'is-active',
-      description: 'Class which indicates that modal is open.',
+      prop: "classModalIsOpen",
+      type: "string",
+      default: "is-active",
+      description: "Class which indicates that modal is open.",
     },
     {
-      prop: 'classModalIsOpenBody',
-      type: 'string',
-      default: 'has-modal',
-      description: 'Class on body which indicates that modal is open.',
+      prop: "classModalIsOpenBody",
+      type: "string",
+      default: "has-modal",
+      description: "Class on body which indicates that modal is open.",
     },
     {
-      prop: 'root',
-      type: 'string',
-      default: '#root',
+      prop: "root",
+      type: "string",
+      default: "#root",
       description:
-        'Root of page content which should be hidden when modal is open.',
+        "Root of page content which should be hidden when modal is open.",
     },
     {
-      prop: 'modalsRoot',
-      type: 'string',
-      default: '#root-modals',
+      prop: "modalsRoot",
+      type: "string",
+      default: "#root-modals",
       description:
         "Element on page where modal is to be placed. This elements should placed outside main content (`'root'` option) and usually at the and of body tag.",
     },
@@ -390,42 +390,42 @@ instance.method();
 <DocsTable
   data={[
     {
-      prop: 'init',
-      type: 'func',
-      default: '() => {}',
+      prop: "init",
+      type: "func",
+      default: "() => {}",
       description:
-        'Initialize instance. This is called automatically on `new Plugin(el, config)`',
+        "Initialize instance. This is called automatically on `new Plugin(el, config)`",
     },
     {
-      prop: 'destroy',
-      type: 'func',
-      default: '() => {}',
-      description: 'Destroy the instance - removes all listeners',
+      prop: "destroy",
+      type: "func",
+      default: "() => {}",
+      description: "Destroy the instance - removes all listeners",
     },
     {
-      prop: 'update',
-      type: 'func',
-      default: '() => {}',
-      description: 'Updates an instance.',
+      prop: "update",
+      type: "func",
+      default: "() => {}",
+      description: "Updates an instance.",
     },
     {
-      prop: 'show',
-      type: 'func',
-      default: '() => {}',
-      description: 'Shows modal programmatically.',
+      prop: "show",
+      type: "func",
+      default: "() => {}",
+      description: "Shows modal programmatically.",
     },
     {
-      prop: 'hide',
-      type: 'func',
-      default: '() => {}',
-      description: 'Hides modal programmatically.',
+      prop: "hide",
+      type: "func",
+      default: "() => {}",
+      description: "Hides modal programmatically.",
     },
     {
-      prop: 'static getInstance',
-      type: 'func',
-      default: 'element => {}',
+      prop: "static getInstance",
+      type: "func",
+      default: "element => {}",
       description:
-        'Get instance of `Modal` attached to specific DOM element (usually `[data-modal]`).',
+        "Get instance of `Modal` attached to specific DOM element (usually `[data-modal]`).",
     },
   ]}
 />

package/src/components/Modal/Modal.tsx

@@ -47,6 +47,8 @@ interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
   /** Additional CSS classes */
   className?: string;
+  /** Color scheme for the modal */
+  colorScheme?: "dark" | "light";
 }
 
 const defaultProps = {
@@ -72,6 +74,7 @@ const Modal: React.FC<ModalProps> = ({
   renderTitle,
   renderFooter,
   fullHeight,
+  colorScheme,
   ...other
 }) => {
   const [modalRef, instance] = useStatic(ModalStatic);
@@ -87,6 +90,8 @@ const Modal: React.FC<ModalProps> = ({
     {
       [`${CLASS_ROOT}__dialog--${size}`]: size,
       [`${CLASS_ROOT}__dialog--full-height`]: fullHeight,
+      "is-dark": colorScheme === "dark",
+      "is-light": colorScheme === "light",
     },
     className,
   );