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

package/src/components/Dropdown/Dropdown.mdx

@@ -1,260 +0,0 @@
-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.js

@@ -1,182 +0,0 @@
-import { createPopper } from '@popperjs/core';
-import { transitionHiddenElement } from '@cloudfour/transition-hidden-element';
-
-import { keys } from '../../utils';
-
-const defaultConfig = {
-  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 {
-  constructor(element, config) {
-    this.element = element;
-    this.config = { ...defaultConfig, ...config };
-    this.config.popperOptions = {
-      ...defaultConfig.popperOptions,
-      ...(config?.popperOptions || []),
-    };
-    this.config.popperOptions.modifiers = [
-      ...defaultConfig.popperOptions.modifiers,
-      ...(config?.popperOptions?.modifiers || []),
-    ];
-
-    this.handleVisibility = this.handleVisibility.bind(this);
-    this.handleKeyPress = this.handleKeyPress.bind(this);
-    this.handleClick = this.handleClick.bind(this);
-    this.element.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) {
-    return el && el.ODS_Tooltip ? el.ODS_Tooltip : null;
-  }
-
-  init() {
-    this.trigger = document.getElementById(
-      this.element.id.replace('dropdown', 'btn')
-    );
-
-    const customPlacement = this.element.getAttribute(
-      'data-dropdown-placement'
-    );
-    if (customPlacement) {
-      this.config.popperOptions.placement = customPlacement;
-    }
-
-    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) {
-    if (this.trigger !== e.target && !this.trigger.contains(e.target)) {
-      if (
-        !this.element.hasAttribute(this.config.dataInteractive) ||
-        e.target.id.includes(this.element.id.replace('dropdown', 'btn')) ||
-        !this.element.contains(e.target)
-      ) {
-        this.handleVisibility();
-      }
-    }
-  }
-
-  handleKeyPress(e) {
-    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.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.ODS_Dropdown = null;
-    window.onresize = null;
-
-    if (this.config.removeDialogOnDestroy) {
-      this.element.remove();
-    }
-  }
-}

package/src/components/Dropdown/DropdownDivider.js

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

package/src/components/Dropdown/DropdownItem.js

@@ -1,37 +0,0 @@
-import React from 'react';
-import { string, bool } from 'prop-types';
-import cx from 'classnames';
-
-const propTypes = {
-  disabled: bool,
-  href: string,
-};
-
-const CLASS_ROOT = 'dropdown__item';
-
-const DropdownItem = ({ className, children, disabled, href, ...other }) => {
-  const classes = cx(
-    CLASS_ROOT,
-    {
-      disabled,
-    },
-    className
-  );
-
-  return (
-    <a
-      tabIndex={disabled ? '-1' : '0'}
-      href={href}
-      className={classes}
-      disabled={disabled}
-      {...other}
-    >
-      {children}
-    </a>
-  );
-};
-
-DropdownItem.displayName = 'DropdownItem';
-DropdownItem.propTypes = propTypes;
-
-export default DropdownItem;

package/src/components/Dropdown/DropdownToggleButton.js

@@ -1,33 +0,0 @@
-import React from 'react';
-import { string } from 'prop-types';
-import cx from 'classnames';
-
-import ToggleButton from '../../docs/utils/ToggleButton';
-
-import { CLASS_ROOT } from './Dropdown';
-
-const propTypes = {
-  id: string.isRequired,
-};
-
-const DropdownToggleButton = ({ 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';
-DropdownToggleButton.propTypes = propTypes;
-
-export default DropdownToggleButton;

package/src/components/Dropdown/index.js

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

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

@@ -1,41 +0,0 @@
-// ---------------------------------------------
-// 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: color.$white,
-    border-radius: 0 0 2px,
-    border: 2px solid color.$black,
-  )
-);
-
-$dropdown-menu-item: (
-  default: (
-    padding: $space,
-    color: color.$black,
-    transition: #{color 0.2s ease-out 0s, background 0.2s ease-out 0s},
-  ),
-  active: (
-    color: color.$white,
-    background-color: color.$black,
-  ),
-  highlighted: (
-    background-color: color.$black,
-    color: color.$white,
-  )
-);
-
-$divider: (
-  height: 0,
-  margin: space.get('small') 0,
-  overflow: hidden,
-  border-top: 1px solid color.$gray-300,
-)

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

@@ -1,82 +0,0 @@
-@use "sass:map" as sass-map;
-// ---------------------------------------------
-// DROPDOWN - MIXINS
-// ---------------------------------------------
-
-@use '../../../styles/tokens/base';
-@use '../../../styles/tokens/space';
-@use '../../../styles/tools/convert';
-@use '../../../styles/tools/generate';
-@use '../../../styles/tokens/color';
-@use '../../../styles/tools/map';
-@use './config';
-
-@mixin dropdown-menu (
-  $dropdown-menu: config.$dropdown-menu
-) {
-
-  @include generate.css-map($dropdown-menu, 'default');
-  
-  z-index: -1;
-  position: absolute;
-  display: none;
-  opacity: 0;
-  transform: translate3d(0, 0, 0);
-}
-
-@mixin visible {
-  display: block;
-  opacity: 1;
-  z-index: 1000;
-}
-
-@mixin close {
-  position: relative;
-  margin: 0 !important;
-  &::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-}
-
-@mixin button {
-  position: relative;
-  margin-right: 0 !important;
-}
-
-@mixin dropdown-spacing {
-  padding: config.$space;
-}
-
-@mixin dropdown-item (
-  $dropdown-menu-item: config.$dropdown-menu-item
-) {
-  display: block;
-  cursor: default;
-
-  &:hover,
-  &:focus,
-  &.is-active {
-    @each $prop, $value in sass-map.get($dropdown-menu-item, 'active') {
-      #{$prop}: #{$value};
-    }
-  }
-
-  @include base.focusring-flush;
-
-  &[disabled]{
-    pointer-events: none;
-    color: color.$gray-600;
-  }
-
-  @each $prop, $value in sass-map.get($dropdown-menu-item, 'default') {
-    #{$prop}: #{$value};
-  }
-}
-
-@mixin divider {
-  @include generate.css-map(config.$divider);
-}

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

@@ -1,31 +0,0 @@
-@use '../../../styles/tools/generate';
-@use './mixins';
-@use './config';
-
-.dropdown {
-  @include mixins.dropdown-menu();
-
-  &__item {
-    @include mixins.dropdown-item();
-  }
-
-  &--visible {
-    @include mixins.visible;
-  }
-
-  &__button {
-    @include mixins.button;
-  }
-
-  &__close {
-    @include mixins.close;
-  }
-  
-  &__divider {
-    @include mixins.divider;
-  }
-
-  &-spacing {
-    @include mixins.dropdown-spacing();
-  }
-}