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

package/src/components/Forms/Checkbox/Checkbox.mdx

@@ -0,0 +1,139 @@
+import { Code, ComponentDocs } from '@lighting-beetle/lighter-styleguide';
+
+import { Preview } from '../../../styleguide/';
+
+import Link from '../../Link';
+import Fieldset from '../Fieldset';
+import Field from '../Field';
+import Checkbox from './';
+
+# Checkbox
+
+A checkbox is an interface for making one or more selections from multiple options, or providing a boolean answer.
+
+Based on context, checkbox can be used as a [standalone field](#anatomy-of-a-standalone-checkbox-field) or a [multi-choice fieldset](#anatomy-of-a-checkbox-fieldset).
+
+## Anatomy of a standalone Checkbox Field
+
+A Checkobx Field is usually used for consents (terms and conditions, competition rules, etc.) and consists of:
+
+- **Control**
+  - **Checkbox** control itself
+- **Description**
+  - [**Label**](/components/forms/captions/label) (mandatory)
+  - [**Tooltip**](/components/forms/captions/tooltip) (optional)
+  - [**Hint**](/components/forms/captions/hint) (optional)
+  - [**Messages**](/components/forms/captions/message) (optional)
+
+<Preview>
+  <Field
+    control={{ type: 'checkbox' }}
+    tooltip="Helpful tooltip"
+    label="I agree with Terms and Conditions"
+    labelAfter="(mandatory)"
+    hint={
+      <>
+        <Link href="#">read the Terms and conditions document</Link>
+      </>
+    }
+    messages={[
+      { type: 'error', text: 'This is mandatory, no way around that.' },
+    ]}
+  />
+</Preview>
+
+## Anatomy of a Checkbox Fieldset
+
+A Checkbox Fieldset is usually used in flows with various number of options (checkout settings, multi-choice consents, etc.) and consists of:
+
+- **Legend** (mandatory)
+- **Description** (optional)
+- **Checkbox Fields** (mandatory)
+  - **Control**
+    - **Checkbox** control itself
+  - **Description**
+    - [**Label**](/components/forms/captions/label) (mandatory)
+    - [**Tooltip**](/components/fomrs/captions/tooltip) (optional)
+    - [**Hint**](/components/forms/captions/hing) (optional)
+    - [**Messages**](/components/fomrs/captions/messge) (optional)
+
+<Preview>
+  <Fieldset legend="Pick your favorites">
+    <Field
+      control={{ type: 'checkbox' }}
+      tooltip="Helpful tooltip"
+      label="Option 1"
+      hint="Helpful hint"
+      messages={[
+        {
+          type: 'warning',
+          text: 'Delivery of this option might take some time.',
+        },
+      ]}
+    />
+    <Field
+      control={{ type: 'checkbox' }}
+      tooltip="Helpful tooltip"
+      label="Option 2"
+      hint="Helpful hint"
+    />
+  </Fieldset>
+</Preview>
+
+## Control sizes
+
+### Large
+
+<Preview>
+  <Checkbox id="size-large" size="large" />
+</Preview>
+
+## Control states
+
+### Default
+
+<Preview>
+  <Checkbox id="checkbox-example" />
+</Preview>
+
+### Checked
+
+<Preview>
+  <Checkbox id="checked" isChecked />
+</Preview>
+
+### Disabled
+
+Cannot be focused, does not receive `click` events and is not submitted with the form.
+
+<Preview>
+  <Checkbox id="disabled" isDisabled />
+  <br />
+  <Checkbox id="disabled-checked" isChecked isDisabled />
+</Preview>
+
+### Invalid
+
+Field did no pass validation. Must be accompanied by a meaningfull [Error message](/components/forms/captions/message#error).
+
+<Preview>
+  <Checkbox id="invalid" isInvalid />
+  <br />
+  <Checkbox id="invalid-checked" isChecked isInvalid />
+</Preview>
+
+## Toggle
+
+Displays Checkbox as toogle switch.
+
+<Preview>
+  <Checkbox id="toggle" isToggle={true} />
+  <br />
+  <Checkbox id="checked-toggle" isToggle={true} isChecked={true} />
+  <br />
+  <Checkbox id="disablead-toggle" isToggle={true} isDisabled={true} />
+  <br />
+  <Checkbox id="invalid-toggle" isToggle={true} isInvalid={true} />
+</Preview>
+
+<ComponentDocs title="Checkbox" component={Checkbox} />

package/src/components/Forms/Checkbox/Checkbox.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import cx from "classnames";
+
+const CLASS_ROOT = "checkbox";
+
+export type CheckboxSize = "default" | "large";
+
+export interface CheckboxProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+  /** Html id attribute */
+  id: string;
+  /** Checked state. */
+  isChecked?: boolean;
+  /** Disabled state. */
+  isDisabled?: boolean;
+  /** Invalid state */
+  isInvalid?: boolean;
+  /** Checkbox is displayed as Toggle */
+  isToggle?: boolean;
+  /** Html name attribute. Id is used when not set.*/
+  name?: string;
+  /** Size of element. */
+  size?: CheckboxSize;
+  className?: string;
+}
+
+const defaultProps = {
+  size: "default" as CheckboxSize,
+};
+
+const Checkbox: React.FC<CheckboxProps> = ({
+  id,
+  isChecked,
+  isDisabled,
+  isInvalid,
+  isToggle,
+  name,
+  size = defaultProps.size,
+  className,
+  ...other
+}) => {
+  const classes = cx(CLASS_ROOT, className, {
+    [`${CLASS_ROOT}--${size}`]: size !== defaultProps.size,
+    "is-invalid": isInvalid,
+  });
+
+  const inputName = name || id;
+
+  const CheckboxInput = () => (
+    <>
+      <input
+        className={classes}
+        type="checkbox"
+        id={id}
+        name={inputName}
+        defaultChecked={isChecked}
+        disabled={isDisabled}
+        {...other}
+      />
+      <div className={`${CLASS_ROOT}-display`} />
+    </>
+  );
+
+  return isToggle ? (
+    <div className={isToggle ? "checkbox--toggle" : ""}>
+      <CheckboxInput />
+    </div>
+  ) : (
+    <CheckboxInput />
+  );
+};
+
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox };

package/src/components/Forms/Checkbox/index.ts

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

package/src/components/Forms/Checkbox/styles/config.scss

@@ -0,0 +1,25 @@
+@use "../../../../styles/tokens/color";
+@use "../../styles/config" as commonConfig;
+
+$checked-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3 7L1 9l5 5L16 4l-2-2-8 8-3-3z' fill='%23fff'/%3E%3C/svg%3E");
+$invalid-checked-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3 7L1 9l5 5L16 4l-2-2-8 8-3-3z' fill='%23cd3c14'/%3E%3C/svg%3E");
+
+$states: (
+  default: commonConfig.$default,
+  focus: commonConfig.$focus,
+  checked: (
+    border-color: var(--color-surface-tertiary),
+    background-color: var(--color-surface-tertiary),
+    background-image: $checked-bg,
+    background-size: cover,
+  ),
+  disabled: commonConfig.$disabled,
+  disabled-checked: commonConfig.$disabled-checked,
+  invalid: commonConfig.$invalid,
+  invalid-checked: (
+    background-color: var(--color-surface-primary),
+    background-image: $invalid-checked-bg,
+  ),
+);
+
+$sizes: commonConfig.$radiocheck-sizes;

package/src/components/Forms/Checkbox/styles/mixins.scss

@@ -0,0 +1,2 @@
+@use '../../../../styles/tools/generate';
+@use './config';

package/src/components/Forms/Checkbox/styles/style.scss

@@ -0,0 +1,89 @@
+@use "../../../../styles/tools/generate";
+@use "../../../../styles/tools/convert";
+@use "../../styles/mixins" as commonMixins;
+@use "./config";
+@use "./mixins";
+@use "../../../../styles/tokens/color";
+
+@layer components {
+  .checkbox {
+    @include commonMixins.radiocheck-input();
+    @include commonMixins.radiocheck-states(
+      $config: config.$states,
+      $display-selector: ".checkbox-display"
+    );
+
+    @each $size, $values in config.$sizes {
+      &#{generate.variant-name($size)},
+      &#{generate.variant-name($size)} + .checkbox-display {
+        @include commonMixins.radiocheck-size($size, config.$sizes);
+      }
+    }
+  }
+
+  .checkbox-display {
+    border-radius: convert.to-rem(5px);
+  }
+
+  .checkbox--toggle .checkbox,
+  .checkbox--toggle .checkbox + .checkbox-display {
+    width: convert.to-rem(60px);
+    height: convert.to-rem(30px);
+  }
+
+  .checkbox--toggle .checkbox {
+    z-index: 1;
+  }
+
+  .checkbox--toggle .checkbox + .checkbox-display {
+    position: relative;
+    background: color.$black;
+    border-color: color.$black;
+    background-image:
+      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3 7L1 9l5 5L16 4l-2-2-8 8-3-3z' fill='%23000'/%3E%3C/svg%3E"),
+      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M12 2L10 0L6 4L2 0L0 2L4 6L0 10L2 12L6 8L10 12L12 10L8 6L12 2Z' fill='%23fff'/%3E%3C/svg%3E");
+    background-position:
+      5px center,
+      right 7px center;
+    background-repeat: no-repeat;
+
+    &::after {
+      content: "";
+      pointer-events: none;
+      position: absolute;
+      background: color.$white;
+      top: 0;
+      left: 0;
+      width: 50%;
+      height: 100%;
+      transform: translateX(0);
+      transition: transform 200ms ease-out;
+    }
+  }
+
+  .checkbox--toggle .checkbox:checked + .checkbox-display {
+    background-color: var(--color-surface-secondary);
+    border-color: var(--color-surface-secondary);
+
+    &::after {
+      transform: translateX(100%);
+    }
+  }
+
+  .checkbox--toggle .checkbox:disabled + .checkbox-display {
+    background-color: var(--color-surface-moderate);
+    border-color: var(--color-surface-moderate);
+  }
+
+  .checkbox--toggle .checkbox.is-invalid + .checkbox-display {
+    border-color: var(--color-icon-negative);
+    background-color: var(--color-icon-negative);
+  }
+
+  .checkbox--toggle .checkbox:disabled + .checkbox-display,
+  .checkbox--toggle .checkbox.is-invalid + .checkbox-display {
+    background-image:
+      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3 7L1 9l5 5L16 4l-2-2-8 8-3-3z' fill='%23fff'/%3E%3C/svg%3E"),
+      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M12 2L10 0L6 4L2 0L0 2L4 6L0 10L2 12L6 8L10 12L12 10L8 6L12 2Z' fill='%23fff'/%3E%3C/svg%3E");
+  }
+}

package/src/components/Forms/Checkbox/tests/Checkbox.unit.test.js

@@ -0,0 +1,95 @@
+import { render } from "@testing-library/react";
+
+import { Checkbox } from "../Checkbox";
+
+// id is required
+describe("rendering Checkbox", () => {
+  describe("initial state", () => {
+    it("has default class checkbox", () => {
+      const { getByTestId } = render(
+        <Checkbox data-testid="test-id" id="id" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("checkbox");
+    });
+    it("has type checkbox", () => {
+      const { getByTestId } = render(
+        <Checkbox data-testid="test-id" id="id" />,
+      );
+      expect(getByTestId("test-id").getAttribute("type")).toBe("checkbox");
+    });
+    it("has div with class checkbox-display", () => {
+      const { container } = render(<Checkbox id="id" />);
+      expect(container.querySelector("div")).toBeInTheDocument();
+      expect(container.querySelector("div")).toHaveClass("checkbox-display");
+    });
+  });
+  describe("passed props", () => {
+    it("has is-invalid class when isInvalid prop is passed", () => {
+      const { getByTestId } = render(
+        <Checkbox data-testid="test-id" id="id" isInvalid />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("is-invalid");
+    });
+    it("has checkbox--large class when size prop is set to large", () => {
+      const { getByTestId } = render(
+        <Checkbox data-testid="test-id" id="id" size="large" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("checkbox--large");
+    });
+    it("has additional class when className is set", () => {
+      const { getByTestId } = render(
+        <Checkbox data-testid="test-id" className="test-class" id="id" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("checkbox");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+    it("id attribute is set to id prop", () => {
+      const { getByTestId } = render(
+        <Checkbox data-testid="test-id" id="id" />,
+      );
+      expect(getByTestId("test-id").getAttribute("id")).toBe("id");
+    });
+
+    it("name attribute is set to name prop", () => {
+      const { getByTestId } = render(
+        <Checkbox data-testid="test-id" id="id" name="test" />,
+      );
+      expect(getByTestId("test-id").getAttribute("name")).toBe("test");
+    });
+    it("name attribute is to id when name prop is not passed", () => {
+      const { getByTestId } = render(
+        <Checkbox data-testid="test-id" id="id" />,
+      );
+      expect(getByTestId("test-id").getAttribute("name")).toBe("id");
+    });
+    it("disabled attribute is set to true when isDisabled prop is passed", () => {
+      const { getByTestId } = render(
+        <Checkbox data-testid="test-id" id="id" isDisabled />,
+      );
+      expect(getByTestId("test-id").disabled).toBe(true);
+    });
+
+    it("checked attribute set to true when isChecked prop is passed", () => {
+      const { getByTestId } = render(
+        <Checkbox data-testid="test-id" id="id" name="test" isChecked />,
+      );
+      expect(getByTestId("test-id").checked).toBe(true);
+    });
+    it("checkbox element is checked after click", () => {
+      const { getByTestId } = render(
+        <Checkbox data-testid="test-id" id="id" />,
+      );
+      expect(getByTestId("test-id").checked).toBe(false);
+      getByTestId("test-id").click();
+      expect(getByTestId("test-id").checked).toBe(true);
+    });
+    it("checkbox element stays unchecked after click when isDisabled is passed", () => {
+      const { getByTestId } = render(
+        <Checkbox data-testid="test-id" id="id" isDisabled />,
+      );
+      expect(getByTestId("test-id").checked).toBe(false);
+      getByTestId("test-id").click();
+      expect(getByTestId("test-id").checked).toBe(false);
+    });
+  });
+});

package/src/components/Forms/DatePicker/DatePicker.mdx

@@ -0,0 +1,149 @@
+import { ComponentDocs, CodeBlock } from '@lighting-beetle/lighter-styleguide';
+import { Preview } from '../../../styleguide';
+import { objectToString } from '../../../utils/helpers';
+import Alert from '../../Alert';
+import Link from '../../Link';
+
+import Field from '../Field';
+import DatePicker from './';
+import { defaultConfig as defaultConfigDatePicker } from './DatePicker.static';
+
+# DatePicker
+
+<Alert
+  title="You might not need a date picker"
+  description={
+    <>
+      Entering known dates, such as birthday, ID expiration date and other date
+      that a user already knows or can look up wihtout using a calendar should
+      be done using a{' '}
+      <Link href="/components/forms/fieldset#known-date-with-description">
+        date input
+      </Link>
+    </>
+  }
+/>
+
+## Datepicker Field
+
+1. [**Label**](/components/forms/captions/label) (mandatory)
+2. [**Tooltip**](/components/forms/captions/tooltip) (optional)
+3. [**Hint**](/components/forms/captions/hint) (optional)
+4. **DatePicker** control group
+
+- Input field (for user interaction)
+- Hidden input (for storing and sending a YYYY-MM-DD value)
+- Calendar texts
+- Calendar widget toggle button
+- Calendar widget
+  - Year select
+  - Month select
+  - Pagination
+  - Calendar
+
+5. [**Messages**](/components/forms/captions/message) (optional)
+
+<Preview>
+  <Field
+    tooltip="Example tooltip"
+    label="Example datepicker"
+    hint="Hint message"
+    control={{
+      type: 'datepicker',
+      name: 'datepicker-name',
+      id: 'datepicker-id',
+    }}
+    messages={[
+      {
+        text: 'Error message',
+        type: 'error',
+      },
+    ]}
+  />
+</Preview>
+
+## Datepicker Component
+
+<Preview>
+  <DatePicker name="datepicker-name" id="datepicker-id" />
+</Preview>
+
+## Disable dates
+
+You can disable dates using `disabledDayFn` function in DayPicker config object. But in some cases it can be more effective to use
+`data-enabled-days` and pass string of dates with format YYYY-MM-DD separated by commas. In this case all dates except the ones
+you passed will be disabled. `data-enabled-days` will override `disabledDayFn` if both are set.
+
+<Preview>
+  <DatePicker
+    name="datepicker-name"
+    id="datepicker-id"
+    enabledDays={[
+      new Date().toISOString().slice(0, 10),
+      new Date(new Date().getTime() + 2 * 24 * 3600000)
+        .toISOString()
+        .slice(0, 10),
+      new Date(new Date().getTime() + 5 * 24 * 3600000)
+        .toISOString()
+        .slice(0, 10),
+    ]}
+    dayPickrConfig={{
+      firstDayOfWeek: 0,
+    }}
+  />
+</Preview>
+
+## User input and output data
+
+Datepicker supports manual input and selecting a date from a calendar. Selecting/entering a date populates the hidden field with a YYYY-MM-DD value.
+
+Manual input parses the input string, and if it succeeds, it selects the corresponding date. The parser can be customized, but does not handle errors - error handling must be done by your app. The default parser enables slovak locale (D. M. YYYY).
+
+## Config
+
+DatePicker is backed with [daypickr](https://www.npmjs.com/package/daypickr) package.
+This package contains it's own default configuration that is partially overriden by configuration in this project (see [Default config](/components/forms/datepicker#default-config) bellow).
+To see all configuration options visit previously mentioned [daypickr](https://www.npmjs.com/package/daypickr) package.
+
+### Default config
+
+<CodeBlock language="js">{objectToString(defaultConfigDatePicker)}</CodeBlock>
+
+## Initialization
+
+### Automatic initialization
+
+The datepicker in rendered inside an empty div, which specifies the Input field id and Hidden input name.
+
+<CodeBlock language="js">
+  {`<div
+  data-datepicker
+  class="datepicker control-group"
+  data-datepicker-id="input-id"
+  data-datepicker-name="hidden-input-name"
+></div>`}
+</CodeBlock>
+
+### Custom initialization
+
+In case you need custom configuration (e.g. disabling ceratain dates or chainging the range), remove the `data-datepicker` atrribute and initialize the module manually.
+
+Ideally, you should do this after everything else was succesfuly initialized, e.g. on `ODSLoaded` event.
+
+<CodeBlock language="js">
+  {`window.addEventListener('ODSLoaded', () => {
+    // DatePicker initialization
+    const myDatePicker = new window.ODS.modules.DatePicker(
+    document.getElementById('my-datepicker'), 
+    customConfigObject)
+})`}
+</CodeBlock>
+
+### Methods
+
+- **init()** - handles initialization
+- **destroy()** - destroys the instance
+
+## Props
+
+<ComponentDocs title="<DatePicker />" component={DatePicker} />