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

package/src/components/Dropdown/Dropdown.mdx

@@ -0,0 +1,260 @@
+import Dropdown, {
+  DropdownToggleButton,
+  DropdownItem,
+  DropdownDivider,
+} from './index';
+import Grid, { GridCol } from '../Grid';
+import {
+  ComponentDocs,
+  Code,
+  CodeBlock,
+  Note,
+} from '@lighting-beetle/lighter-styleguide';
+import { Preview } from '../../styleguide/';
+import Bar, { BarItem } from './../Bar';
+import Button from './../Button';
+import Icon from './../Icon';
+import Table from './../Table';
+import Tooltip, { InfoTooltip } from './';
+import Select from '../Forms/Select/index';
+
+# Dropdown
+
+It's required to use `id` on dropdown a toogle button for it to work. `id` of dropdown should follow pattern `dropdown-<name>`
+and for toggle buttons `id` pattern `btn-<name>` should be used.
+
+<Preview>
+  <Dropdown
+    id="1"
+    hasSpacing={false}
+    button={{
+      iconName: 'menu-arrow',
+      children: 'Dropdown',
+      iconPosition: 'right',
+    }}
+  >
+    <DropdownItem href="#">Laborum laboris amet minim.</DropdownItem>
+    <DropdownItem disabled href="#">
+      Quis adipisicing eu consectetur.
+    </DropdownItem>
+    <DropdownDivider />
+    <DropdownItem href="#">Deserunt id consectetur esse in.</DropdownItem>
+  </Dropdown>
+</Preview>
+
+## Dropdown Interactive
+
+Dropdown menu with Interactive functionality eg. forms, buttons etc. should not close after click inside of dropdown component. This can be achieved with attribute `[data-dropdown-interactive]`.
+
+<Preview>
+  <Dropdown
+    id="2"
+    hasSpacing={false}
+    isInteractive
+    button={{
+      iconName: 'menu-arrow',
+      children: 'Dropdown',
+      iconPosition: 'right',
+    }}
+  >
+    <DropdownItem href="#">Laborum laboris amet minim.</DropdownItem>
+    <DropdownItem disabled href="#">
+      Quis adipisicing eu consectetur.
+    </DropdownItem>
+    <DropdownDivider />
+    <DropdownItem href="#">Deserunt id consectetur esse in.</DropdownItem>
+  </Dropdown>
+</Preview>
+
+## Focus Trap
+
+Prevents user from leaving the Dropdown using keyboard without closing the Dropdown. Can be achieved with attribute `[data-dropdown-focus-trap]`. In this case Dropdown can be
+close by using `Escape` key, but it's also recommended to use close button. Close buttons `id` needs to follow pattern `close-btn-<name>` for it to work.
+
+<Preview>
+  <Dropdown
+    id="3"
+    hasFocusTrap
+    isInteractive
+    button={{
+      iconName: 'menu-arrow',
+      children: 'With focus trap',
+      iconPosition: 'right',
+    }}
+  >
+    <Select id="select-in-dropdown" style={{ width: '100px' }}>
+      <option>Item 1</option>
+      <option>Item 2</option>
+    </Select>
+  </Dropdown>
+</Preview>
+
+## Position
+
+Dropdown can be aligned to left, right or center side of toggle button.
+
+<Preview>
+  <Grid>
+    <GridCol size={{ md: 4 }}>
+      <Dropdown
+        isInteractive
+        id="4"
+        button={{
+          children: 'Aligned to left',
+        }}
+      >
+        <p>Told ya I'm aligned to left...</p>
+      </Dropdown>
+    </GridCol>
+    <GridCol size={{ md: 4 }}>
+      <Dropdown
+        isInteractive
+        id="5"
+        placement="center"
+        button={{
+          children: 'Aligned to center',
+        }}
+      >
+        <p>Told ya I'm aligned to center...</p>
+      </Dropdown>
+    </GridCol>
+    <GridCol size={{ md: 4 }}>
+      <Dropdown
+        isInteractive
+        id="6"
+        placement="right"
+        button={{
+          children: 'Aligned to right',
+        }}
+      >
+        <p>Told ya I'm aligned to right...</p>
+      </Dropdown>
+    </GridCol>
+  </Grid>
+</Preview>
+
+<ComponentDocs title="<Dropdown />" component={Dropdown} />
+<ComponentDocs title="<DropdownItem />" component={DropdownItem} />
+<ComponentDocs
+  title="<DropdownToggleButton />"
+  component={DropdownToggleButton}
+/>
+<ComponentDocs title="<DropdownDivider />" component={DropdownDivider} />
+
+## JS module reference
+
+All elements with `[data-dropdown]` attribute will be initialised automatically.
+
+### Custom initialisation
+
+```js
+const instance = new window.ODS.modules.Dropdown(
+  document.getElementByUd('my-dropdown'),
+  config
+);
+```
+
+#### Config
+
+<Table
+  className="text-small"
+  headers={[
+    {
+      key: 'col1',
+      label: 'Name',
+    },
+    {
+      key: 'col2',
+      label: 'Description.',
+    },
+  ]}
+  rows={[
+    {
+      col1: 'popperOptions - object',
+      col2: (
+        <React.Fragment>
+          <p className="text-small">
+            <a href="https://popper.js.org/popper-documentation.html#defaults">
+              Popper.js
+            </a>{' '}
+            options object.
+          </p>
+          Default:
+          <CodeBlock>
+            {`{
+  placement: 'bottom-start',
+  strategy: 'absolute',
+  modifiers: [
+    {
+      name: 'eventListeners',
+      options: {
+        scroll: false,
+        resize: false,
+      },
+    },
+    {
+      name: 'flip',
+      options: {
+        fallbackPlacements: ['bottom-end', 'bottom-start', 'bottom'],
+      },
+    },
+    {
+      name: 'offset',
+      options: {
+        offset: [0, -1],
+      },
+    },
+  ],
+  }`}
+          </CodeBlock>
+        </React.Fragment>
+      ),
+    },
+  ]}
+/>
+
+### Methods
+
+<Table
+  className="text-small"
+  headers={[
+    {
+      key: 'col1',
+      label: 'Name',
+    },
+    {
+      key: 'col2',
+      label: 'Description.',
+    },
+  ]}
+  rows={[
+    {
+      col1: 'init',
+      col2: 'Creates a new instance',
+    },
+    {
+      col1: 'destroy',
+      col2: 'Destroy the instance - removes all listeners, destroys Popper.js instance and removes the dialog element',
+    },
+    {
+      col1: 'update',
+      col2: 'Updates Popper.js instance',
+    },
+    {
+      col1: 'handleVisibility',
+      col2: 'Shows / hide the Dropdown dialog',
+    },
+    {
+      col1: 'handleKeyPress',
+      col2: 'Handle key press events',
+    },
+    {
+      col1: 'handleClick',
+      col2: 'Handle click events',
+    },
+    {
+      col1: 'static getInstance(el: element)',
+      col2: 'Get instance of `Dropdown` attached to specific DOM element (usually `[data-dropdown]`).',
+    },
+  ]}
+/>

package/src/components/Dropdown/Dropdown.static.ts

@@ -0,0 +1,198 @@
+import { createPopper, Instance, Options } from "@popperjs/core";
+import { transitionHiddenElement } from "@cloudfour/transition-hidden-element";
+
+import { keys } from "../../utils";
+
+interface DropdownConfig {
+  dataInteractive?: string;
+  focusTrap?: string;
+  removeDialogOnDestroy?: boolean;
+  popperOptions?: Partial<Options> & { modifiers?: any[] };
+}
+
+const defaultConfig: Required<DropdownConfig> = {
+  dataInteractive: "data-dropdown-interactive",
+  focusTrap: "data-dropdown-focus-trap",
+  removeDialogOnDestroy: false,
+  popperOptions: {
+    placement: "bottom-start",
+    strategy: "absolute",
+    modifiers: [
+      {
+        name: "eventListeners",
+        options: {
+          scroll: false,
+          resize: false,
+        },
+      },
+      {
+        name: "flip",
+        options: {
+          fallbackPlacements: ["bottom-end", "bottom-start", "bottom"],
+        },
+      },
+      {
+        name: "offset",
+        options: {
+          offset: [0, -1],
+        },
+      },
+    ],
+  },
+};
+
+export default class Dropdown {
+  element!: HTMLElement;
+  config!: Required<DropdownConfig>;
+  trigger!: HTMLElement;
+  instance!: Instance;
+  transitioner: any;
+  focusableElements!: NodeListOf<HTMLElement>;
+
+  constructor(element: HTMLElement, config: DropdownConfig = {}) {
+    if ((element as any).ODS_Dropdown) {
+      return (element as any).ODS_Dropdown;
+    }
+    this.element = element;
+    this.config = { ...defaultConfig, ...config };
+    this.config.popperOptions = {
+      ...defaultConfig.popperOptions,
+      ...(config?.popperOptions || {}),
+    };
+    this.config.popperOptions.modifiers = [
+      ...((defaultConfig.popperOptions.modifiers as any[]) || []),
+      ...((config?.popperOptions?.modifiers as any[]) || []),
+    ];
+
+    this.handleVisibility = this.handleVisibility.bind(this);
+    this.handleKeyPress = this.handleKeyPress.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+    (this.element as any).ODS_Dropdown = this;
+
+    this.focusableElements = this.element.querySelectorAll(
+      `a[href]:not([disabled]), button:not([disabled]),
+        textarea:not([disabled]), input[type="text"]:not([disabled]),
+        input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]),
+        select:not([disabled])`,
+    );
+
+    this.init();
+    return this;
+  }
+
+  static getInstance(el: HTMLElement): Dropdown | null {
+    return el && (el as any).ODS_Dropdown ? (el as any).ODS_Dropdown : null;
+  }
+
+  init() {
+    this.trigger = document.getElementById(
+      this.element.id.replace("dropdown", "btn"),
+    ) as HTMLElement;
+
+    const customPlacement = this.element.getAttribute(
+      "data-dropdown-placement",
+    );
+    if (customPlacement) {
+      this.config.popperOptions.placement = customPlacement as any;
+    }
+
+    this.instance = createPopper(
+      this.trigger,
+      this.element,
+      this.config.popperOptions,
+    );
+
+    this.transitioner = transitionHiddenElement({
+      element: this.element,
+      visibleClass: "dropdown--visible",
+    });
+    this.trigger.addEventListener("click", this.handleVisibility, true);
+  }
+
+  handleVisibility() {
+    if (this.element.classList.contains("dropdown--visible")) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+
+  handleClick(e: MouseEvent) {
+    if (this.trigger !== e.target && !this.trigger.contains(e.target as Node)) {
+      if (
+        !this.element.hasAttribute(this.config.dataInteractive) ||
+        (e.target as HTMLElement).id.includes(
+          this.element.id.replace("dropdown", "btn"),
+        ) ||
+        !this.element.contains(e.target as Node)
+      ) {
+        this.handleVisibility();
+      }
+    }
+  }
+
+  handleKeyPress(e: KeyboardEvent) {
+    if (keys.ESC.includes(e.key)) {
+      this.handleVisibility();
+      if (this.element.contains(document.activeElement)) {
+        this.trigger.focus();
+      }
+      this.hide();
+    }
+    if (this.element.hasAttribute(this.config.focusTrap)) {
+      const firstFocusableEl = this.focusableElements[0];
+      const lastFocusableEl =
+        this.focusableElements[this.focusableElements.length - 1];
+      if (
+        document.activeElement === (this as any).button &&
+        (e.key === "Tab" || e.keyCode === 9)
+      ) {
+        if (e.shiftKey) {
+          this.focusableElements[this.focusableElements.length - 1].focus();
+          e.preventDefault();
+        }
+      } else if (e.key === "Tab" || e.keyCode === 9) {
+        if (e.shiftKey) {
+          if (document.activeElement === firstFocusableEl) {
+            lastFocusableEl.focus();
+            e.preventDefault();
+          }
+        } else {
+          if (document.activeElement === lastFocusableEl) {
+            firstFocusableEl.focus();
+            e.preventDefault();
+          }
+        }
+      }
+    }
+  }
+
+  show() {
+    this.transitioner.show();
+    this.instance.forceUpdate();
+    document.addEventListener("keydown", this.handleKeyPress);
+    document.addEventListener("click", this.handleClick);
+    window.onresize = () => this.update();
+  }
+
+  hide() {
+    this.transitioner.hide();
+    document.removeEventListener("keydown", this.handleKeyPress);
+    document.removeEventListener("click", this.handleClick);
+    window.onresize = null;
+  }
+
+  update() {
+    this.instance.forceUpdate();
+  }
+
+  destroy() {
+    this.trigger.removeEventListener("click", this.handleVisibility);
+    this.instance.destroy();
+    (this.element as any).ODS_Dropdown = null;
+    window.onresize = null;
+    if (this.config.removeDialogOnDestroy) {
+      this.element.remove();
+    }
+  }
+}

package/src/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import React, { ReactNode } from "react";
+import cx from "classnames";
+
+import { Bar, BarItem } from "../Bar";
+import { IconButton } from "../Button";
+
+import DropdownButtonStatic from "./Dropdown.static";
+import { DropdownToggleButton } from "./DropdownToggleButton";
+import { useStatic } from "@/utils/hooks";
+
+export const CLASS_ROOT = "dropdown";
+
+export type DropdownButtonProps = {
+  className?: string;
+  children?: ReactNode;
+  iconName?: string;
+};
+
+export type DropdownProps = {
+  button: DropdownButtonProps;
+  children: ReactNode;
+  hasFocusTrap?: boolean;
+  hasSpacing?: boolean;
+  id: string;
+  isInteractive?: boolean;
+  placement?: "left" | "center" | "right";
+  className?: string;
+  [key: string]: any;
+};
+
+const placements: Record<"left" | "center" | "right", string> = {
+  left: "bottom-start",
+  center: "bottom",
+  right: "bottom-end",
+};
+
+const Dropdown: React.FC<DropdownProps> = ({
+  button,
+  className,
+  hasFocusTrap = false,
+  hasSpacing = true,
+  children,
+  id,
+  isInteractive = false,
+  placement = "left",
+  ...other
+}) => {
+  const [dropdownRef] = useStatic(DropdownButtonStatic);
+
+  const classes = cx(
+    "dropdown",
+    {
+      [`${CLASS_ROOT}-spacing`]: hasSpacing,
+    },
+    className,
+  );
+
+  return (
+    <>
+      {button && (
+        <DropdownToggleButton
+          {...button}
+          id={id}
+          className={button.className || ""}
+        />
+      )}
+      <div
+        ref={dropdownRef}
+        id={`dropdown-${id}`}
+        className={classes}
+        data-dropdown=""
+        data-dropdown-placement={placements[placement]}
+        data-dropdown-interactive={isInteractive}
+        data-dropdown-focus-trap={hasFocusTrap}
+        {...other}
+      >
+        {hasFocusTrap && (
+          <Bar className={"mb-small justify-content-end"}>
+            <BarItem>
+              <IconButton
+                iconName="delete"
+                isSquare
+                size="small"
+                className={`${CLASS_ROOT}__close`}
+                aria-label="Zatvoriť"
+                id={`close-btn-${id}`}
+                data-toggle={JSON.stringify([
+                  {
+                    target: `#btn-${id}`,
+                    action: "click",
+                  },
+                ])}
+              />
+            </BarItem>
+          </Bar>
+        )}
+        {children}
+      </div>
+    </>
+  );
+};
+
+Dropdown.displayName = "Dropdown";
+
+export { Dropdown };

package/src/components/Dropdown/DropdownDivider.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import cx from "classnames";
+
+const CLASS_ROOT = "dropdown__divider";
+
+const DropdownDivider: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  className,
+  ...other
+}) => {
+  const classes = cx(CLASS_ROOT, className);
+
+  return <div className={classes} {...other} />;
+};
+
+DropdownDivider.displayName = "DropdownDivider";
+
+export { DropdownDivider };

package/src/components/Dropdown/DropdownItem.tsx

@@ -0,0 +1,43 @@
+import React, { AnchorHTMLAttributes, ReactNode } from "react";
+import cx from "classnames";
+
+const CLASS_ROOT = "dropdown__item";
+
+interface DropdownItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  className?: string;
+  children?: ReactNode;
+  disabled?: boolean;
+  href?: string;
+}
+
+const DropdownItem: React.FC<DropdownItemProps> = ({
+  className,
+  children,
+  disabled,
+  href,
+  ...other
+}) => {
+  const classes = cx(
+    CLASS_ROOT,
+    {
+      disabled,
+    },
+    className,
+  );
+
+  return (
+    <a
+      tabIndex={disabled ? -1 : 0}
+      href={href}
+      className={classes}
+      aria-disabled={disabled}
+      {...other}
+    >
+      {children}
+    </a>
+  );
+};
+
+DropdownItem.displayName = "DropdownItem";
+
+export { DropdownItem };

package/src/components/Dropdown/DropdownToggleButton.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import cx from "classnames";
+
+import ToggleButton from "../../docs/utils/ToggleButton";
+
+import { CLASS_ROOT } from "./Dropdown";
+
+interface DropdownToggleButtonProps
+  extends React.HTMLAttributes<HTMLButtonElement> {
+  id: string;
+  className?: string;
+}
+
+const DropdownToggleButton: React.FC<DropdownToggleButtonProps> = ({
+  className,
+  id,
+  ...other
+}) => {
+  return (
+    <ToggleButton
+      aria-expanded={false}
+      id={`btn-${id}`}
+      data-toggle={JSON.stringify([
+        {
+          target: "self",
+          attribute: "aria-expanded",
+        },
+      ])}
+      {...other}
+      className={cx(`${CLASS_ROOT}__button mb-none`, className)}
+    />
+  );
+};
+
+DropdownToggleButton.displayName = "DropdownToggleButton";
+
+export { DropdownToggleButton };

package/src/components/Dropdown/index.ts

@@ -0,0 +1,6 @@
+import "./styles/style.scss";
+
+export { Dropdown } from "./Dropdown";
+export { DropdownItem } from "./DropdownItem";
+export { DropdownDivider } from "./DropdownDivider";
+export { DropdownToggleButton } from "./DropdownToggleButton";

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

@@ -0,0 +1,43 @@
+// ---------------------------------------------
+// DROPDOWN - CONFIGURATION
+// ---------------------------------------------
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/convert";
+@use "../../../styles/tokens/color";
+
+$space: space.get("small");
+
+$dropdown-menu: (
+  default: (
+    min-width: 80px,
+    background-color: var(--color-surface-primary),
+    border-radius: convert.to-rem(5px),
+    border: 2px solid var(--color-border-contrast),
+    overflow: "hidden",
+  ),
+);
+
+$dropdown-menu-item: (
+  default: (
+    padding: $space,
+    color: var(--color-text-default),
+    transition: #{color 0.2s ease-out 0s,
+    background 0.2s ease-out 0s},
+    cursor: pointer,
+  ),
+  active: (
+    color: var(--color-text-inverse),
+    background-color: var(--color-surface-contrast),
+  ),
+  highlighted: (
+    background-color: var(--color-surface-contrast),
+    color: var(--color-text-inverse),
+  ),
+);
+
+$divider: (
+  height: 0,
+  margin: space.get("small") 0,
+  overflow: hidden,
+  border-top: 1px solid var(--color-surface-subtle),
+);