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

package/src/components/Tooltip/Tooltip.mdx

@@ -1,227 +0,0 @@
-import {
-  CodeBlock,
-  ComponentDocs,
-  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 './';
-
-# Tooltip
-
-Tooltip describes an interactive (trigger) element with rich text. A tooltip is displayed when a user hovers/taps/focuses the trigger element. A tooltip is closed when user moves their mouse outside the trigger and tooltip dialog elements, taps elsewhere or focuses another element.
-
-<Preview>
-  <Tooltip id="tooltip-example" dialog="But I do provide further explanation">
-    This is not clear enough
-  </Tooltip>
-</Preview>
-
-## Variants
-
-### Placement
-
-<Preview>
-  <Tooltip id="placement-example" placement="right" dialog="Hello there!">
-    I will show you on the right
-  </Tooltip>
-</Preview>
-
-### Rich content in tooltip dialog
-
-Tooltip content can be formatted using HTML, but cannot contain interactive elements (hyperlinks, buttons, ...). Interactive elements are not allowed because the tooltip dialog never receives focus and therefore would not be operable by keyboard users.
-
-<Preview>
-  <Tooltip
-    tag="div"
-    dialog={
-      <Bar>
-        <BarItem>
-          <Icon name="checked" />
-        </BarItem>
-        <BarItem>
-          <p>This is already done.</p>
-        </BarItem>
-      </Bar>
-    }
-  >
-    This is not clear enough
-  </Tooltip>
-</Preview>
-
-### Trigger element
-
-In order to make triggers operable by keyboard, the trigger element must be focusable. It's OK to place tooltips on hyperlinks, buttons and other interactvie elements. Non-interactive elements must receive `tabindex="0"` to make them focusable. Always test your custom triggers with screenreaders.
-
-<Preview>
-  <Tooltip
-    dialog="This explains a lot"
-    renderTrigger={props => <Button {...props} />}
-  >
-    You might not know what does this button do
-  </Tooltip>
-</Preview>
-
-### Info Tooltip
-
-<Preview>
-  <InfoTooltip>Look here for more information</InfoTooltip>
-</Preview>
-
-### Tooltip No wrap
-
-`data-tooltip-keep-with-text` is for `InfoTooltip` component to be auto wrapped with last word in the text.
-
-Iterates through previous sibling of trigger element with attribute `data-tooltip-trigger`. Next, it finds all text and slice last word.
-Then puts previous sibling and tirgger button into span wrapper with classname `text-nowrap`.
-
-It will not work if sibling text is wrapped in another element. E.g. `<b />`.
-
-<Preview>
-  <h2>How it works?</h2>
-  <p className="h5">
-    <Icon name="camera" size="medium" /> + 1 tematický balík v&nbsp;cene + 1
-    tematický balík v&nbsp;cene
-    <InfoTooltip data-tooltip-keep-with-text>
-      Z ponuky 3 tematických balíkov si vyberte 1 kus, ktorý máte v cene paušálu
-      TV Veľká.
-    </InfoTooltip>
-  </p>
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Tooltip />" component={Tooltip} />
-<ComponentDocs title="<InfoTooltip />" component={InfoTooltip} />
-
-## JS module reference
-
-All elements with `[data-tooltip]` attribute will be initialised automatically. Each tooltip requires a trigger element with `[aria-describedby=tooltip-id]`.
-
-### Custom initialisation
-
-<CodeBlock language="jsx">
-  {`
-const myTooltip = new window.ODS.modules.Tooltip(document.getElementById('my-tooltip'), config );
-  `}
-</CodeBlock>
-
-#### Config
-
-<Table
-  className="text-small"
-  headers={[
-    {
-      key: 'col1',
-      label: 'Name',
-    },
-    {
-      key: 'col2',
-      label: 'Description.',
-    },
-  ]}
-  rows={[
-    {
-      col1: 'rootContainerSelector - string',
-      col2: 'Selector for tooltip container. All tooltip dialogs are moved here on init.',
-    },
-    {
-      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: 'top',
-strategy: 'absolute',
-modifiers: [
-  {
-    name: 'offset',
-    options: {
-      offset: [0, 10],
-    },
-  },
-  {
-    name: 'arrow',
-    options: {
-      element: '.tooltip__arrow',
-    },
-  },
-  {
-    name: 'eventListeners',
-    options: {
-      scroll: false,
-      resize: false,
-    },
-  },
-],
-}`}
-          </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: 'show',
-      col2: 'Shows the tooltip dialog',
-    },
-    {
-      col1: 'hide',
-      col2: 'Hides the tooltip dialog',
-    },
-    {
-      col1: 'static getInstance(el: element)',
-      col2: 'Get instance of `Tooltip` attached to specific DOM element (usually `[data-tooltip]`).',
-    },
-  ]}
-/>
-
-## Accessibility
-
-The tooltip component is implemented by the incomplete [WAI-ARIA authoring practice](https://www.w3.org/TR/wai-aria-practices/#tooltip) and [Heydon Pickering](https://inclusive-components.design/tooltips-toggletips/)'s [tooltip component](https://inclusive-components.design/tooltips-toggletips/).
-
-Notes:
-
-- The tooltip trigger element uses `aria-owns` attribute to help NVDA speak the description text.
-- Tooltips with triggers of presentaion role do not announce dialog content in some screenreaders.

package/src/components/Tooltip/Tooltip.static.js

@@ -1,252 +0,0 @@
-import { createPopper } from '@popperjs/core';
-import { transitionHiddenElement } from '@cloudfour/transition-hidden-element';
-
-import { keys } from '../../utils';
-
-const defaultConfig = {
-  rootContainerSelector: '#root-tooltips',
-  removeDialogOnDestroy: false,
-  popperOptions: {
-    placement: 'bottom',
-    strategy: 'absolute',
-    modifiers: [
-      {
-        name: 'arrow',
-        options: {
-          element: '.tooltip__arrow',
-          padding: 10,
-        },
-      },
-      {
-        name: 'eventListeners',
-        options: {
-          scroll: false,
-          resize: false,
-        },
-      },
-      {
-        name: 'flip',
-        options: {
-          fallbackPlacements: ['right', 'top', 'auto'],
-        },
-      },
-      {
-        name: 'offset',
-        options: {
-          offset: ({ placement }) => {
-            if (placement.includes('start')) {
-              return [-10, 0];
-            } else if (placement.includes('end')) {
-              return [10, 0];
-            }
-
-            return [0, 0];
-          },
-        },
-      },
-    ],
-  },
-};
-
-export default class Tooltip {
-  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.onKeydown = this.onKeydown.bind(this);
-
-    this.element.ODS_Tooltip = this;
-
-    this.init();
-
-    return this;
-  }
-
-  static getInstance(el) {
-    return el && el.ODS_Tooltip ? el.ODS_Tooltip : null;
-  }
-
-  wrapLastWordAndButton() {
-    // Check if the element has the 'data-tooltip-keep-with-text' attribute
-    if (!this.element.hasAttribute('data-tooltip-keep-with-text')) {
-      return;
-    }
-
-    // Get the previous sibling of the trigger
-    const previousSibling = this.trigger.previousSibling;
-
-    if (!previousSibling || previousSibling.nodeType !== Node.TEXT_NODE) {
-      console.warn('Previous sibling is not a text node.');
-      return;
-    }
-
-    // Get the text content of the previous sibling
-    const textContent = previousSibling.textContent.trim();
-
-    // Split the text content into words
-    const words = textContent.split(' ');
-
-    // Get the last word
-    const lastWord = words.pop();
-
-    // Update the text content without the last word
-    const updatedTextContent = words.join(' ');
-
-    // Update the text content of the previous sibling with a trailing space
-    previousSibling.textContent = updatedTextContent + ' ';
-
-    // Create a new span element to wrap the last word and button
-    const span = document.createElement('span');
-    span.className = 'text-nowrap';
-
-    // Set the innerHTML of the span to include the last word and the button
-    span.innerHTML = `${lastWord} ${this.trigger.outerHTML}`;
-
-    // Replace the original button with the span
-    this.trigger.parentNode.replaceChild(span, this.trigger);
-
-    // Update the trigger reference to the new button inside the span
-    this.trigger = span.querySelector('[data-tooltip-trigger]');
-  }
-
-  init() {
-    this.trigger = document.querySelector(
-      `[data-tooltip-trigger][aria-describedby=${this.element.getAttribute(
-        'id'
-      )}]`
-    );
-
-    if (!this.trigger) {
-      // eslint-disable-next-line no-console
-      console.warn(
-        `\`tooltip trigger\` element is not defined and the tooltip cannot be attached. Please provide an element with [aria-describedby=${this.element.getAttribute(
-          'id'
-        )}]`
-      );
-    }
-
-    if (this.element.hasAttribute('data-tooltip-keep-with-text')) {
-      this.wrapLastWordAndButton();
-    }
-
-    this.rootContainer = document.querySelector(
-      this.config.rootContainerSelector
-    );
-
-    if (this.rootContainer) {
-      this.rootContainer.appendChild(this.element);
-    } else {
-      // eslint-disable-next-line no-console
-      console.warn(
-        `\`rootContainer\` element is not defined. Tooltips will be placed inside content which can affect positioning. Please provide \`rootContainer\` element (should be placed outside of main contant, usualy in end of <body /> tag)`
-      );
-    }
-
-    const customPlacement = this.element.getAttribute('data-tooltip-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: 'is-visible',
-    });
-
-    this.trigger.addEventListener('mouseenter', this.handleVisibility);
-    this.trigger.addEventListener('mouseleave', this.handleVisibility);
-    this.trigger.addEventListener('focus', this.handleVisibility);
-    this.trigger.addEventListener('blur', this.handleVisibility);
-  }
-
-  handleVisibility(e) {
-    if (e.type === 'mouseenter' || e.type === 'focus') {
-      this.show();
-    }
-
-    if (e.type === 'blur') {
-      this.hide();
-    }
-
-    if (e.type === 'mouseleave') {
-      const shouldClose = this.shouldClose(e);
-
-      if (shouldClose) {
-        this.hide();
-      }
-    }
-  }
-
-  shouldClose(e) {
-    const mouseLeftTo = e.relatedreference || e.toElement || e.relatedTarget;
-
-    const callback = e2 => {
-      const mouseLeftTo2 =
-        e2.relatedreference || e2.toElement || e2.relatedTarget;
-
-      this.element.removeEventListener('mouseleave', callback);
-
-      if (!this.trigger.contains(mouseLeftTo2)) {
-        this.hide();
-      }
-    };
-
-    if (this.element.contains(mouseLeftTo)) {
-      this.element.addEventListener('mouseleave', callback);
-      return false;
-    }
-
-    return true;
-  }
-
-  onKeydown(e) {
-    if (keys.ESC.includes(e.key)) {
-      this.hide();
-    }
-  }
-
-  show() {
-    this.transitioner.show();
-    this.trigger.classList.add('is-active');
-    this.instance.forceUpdate();
-    document.addEventListener('keydown', this.onKeydown);
-  }
-
-  hide() {
-    this.transitioner.hide();
-    this.trigger.classList.remove('is-active');
-    document.removeEventListener('keydown', this.onKeydown);
-  }
-
-  update() {
-    this.instance.forceUpdate();
-  }
-
-  destroy() {
-    this.trigger.removeEventListener('mouseenter', this.handleVisibility);
-    this.trigger.removeEventListener('mouseleave', this.handleVisibility);
-    this.trigger.removeEventListener('focus', this.handleVisibility);
-    this.trigger.removeEventListener('blur', this.handleVisibility);
-
-    this.instance.destroy();
-    this.element.ODS_Tooltip = null;
-
-    if (this.config.removeDialogOnDestroy) {
-      this.element.remove();
-    }
-  }
-}

package/src/components/Tooltip/index.js

@@ -1,4 +0,0 @@
-import './styles/style.scss';
-
-export { default } from './Tooltip';
-export { default as InfoTooltip } from './InfoTooltip';

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

@@ -1,47 +0,0 @@
-@use '../../../styles/tokens/space';
-@use '../../../styles/tokens/color';
-@use '../../../styles/tools/convert';
-
-$layout: (
-  z-index: 1000,
-  display: block,
-);
-
-$border: 2px solid color.$black;
-$icon-active-color: color.$orange;
-
-$dialog: (
-  display: inline-block,
-  max-width: convert.to-rem(300px),
-  padding: space.get('medium'),
-  background-color: color.$white,
-  border: $border,
-);
-
-/*
- * Add space between trigger and tooltip.
-*/
-$offset: space.get('medium');
-
-$arrow-color: color.$white;
-
-/*
- * Arrow size MUST be a rem-based value. It's used in Pythagoras theorem
- * to find the hypotenuse size and sass math exponential functions do not handle units.
- * Therefore, the rem unit is added manually at the end of the calculation.
-*/
-$arrow-size: convert.to-rem(14px);
-
-$direction-opposites: (
-  'top': 'bottom',
-  'right': 'left',
-  'bottom': 'top',
-  'left': 'right',
-);
-
-$direction-border-color-reset: (
-  'top': ('top', 'left'),
-  'bottom': ('bottom', 'right'),
-  'left': ('bottom', 'left'),
-  'right': ('top', 'right'),
-);

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

@@ -1,94 +0,0 @@
-@use 'sass:math' as math;
-@use '../../../styles/tokens/base';
-@use '../../../styles/tools/generate';
-@use '../../../styles/tools/convert';
-@use '../../../styles/tools/layout';
-@use './config';
-
-@mixin tooltip($config: config.$layout, $offset: config.$offset) {
-  position: absolute;
-  opacity: 0;
-  transition: opacity 200ms ease-out;
-  transform: translate3d(0, 0, 0);
-
-  @include generate.css-map($config);
-
-  > *:last-child {
-    margin-bottom: 0;
-  }
-
-  @each $direction, $opposite in config.$direction-opposites {
-    &[data-popper-placement^='#{$direction}'] {
-      padding-#{$opposite}: $offset;
-    }
-  }
-}
-
-@mixin tooltip-visible {
-  opacity: 1;
-}
-
-@mixin dialog($config: config.$dialog) {
-  @include generate.css-map($config);
-  @include layout.reset-last-child-margin-bottom;
-}
-
-@mixin arrow(
-  $size: config.$arrow-size,
-  $color: config.$arrow-color,
-  $border: config.$border,
-  $offset: config.$offset
-) {
-  $size-unitless: convert.strip-units($size);
-  $hypotenuse: math.sqrt(
-      math.pow($size-unitless, 2) + math.pow($size-unitless, 2)
-    ) * 1rem;
-  $arrow-position: $offset - math.div($hypotenuse, 4);
-
-  display: block;
-
-  &::before {
-    content: '';
-    display: block;
-    width: $size;
-    height: $size;
-    background-color: $color;
-    background-clip: padding-box;
-    border: $border;
-    transform: rotate(45deg);
-  }
-
-  @each $direction, $opposite in config.$direction-opposites {
-    [data-popper-placement^='#{$direction}'] & {
-      #{$opposite}: $arrow-position;
-    }
-  }
-
-  @each $direction, $reset-directions in config.$direction-border-color-reset {
-    [data-popper-placement^='#{$direction}'] &:before {
-      @each $reset-direction in $reset-directions {
-        border-#{$reset-direction}-color: transparent;
-      }
-    }
-  }
-}
-
-@mixin info-tooltip {
-  position: relative;
-  display: inline-flex;
-  vertical-align: -0.1em;
-  @include base.focusring-round;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: convert.to-rem(-10px);
-    left: convert.to-rem(-10px);
-    width: calc(100% + #{convert.to-rem(20px)});
-    height: calc(100% + #{convert.to-rem(20px)});
-  }
-}
-
-@mixin info-tooltip-active-icon {
-  color: config.$icon-active-color;
-}

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

@@ -1,28 +0,0 @@
-@use '../../../styles/tools/generate';
-@use './config';
-@use './mixins';
-
-.tooltip {
-  @include mixins.tooltip;
-
-  &.is-visible {
-    @include mixins.tooltip-visible;
-  }
-
-  &__dialog {
-    @include mixins.dialog;
-  }
-
-  &__arrow {
-    @include mixins.arrow;
-  }
-}
-
-.info-tooltip {
-  @include mixins.info-tooltip;
-
-  &.is-active &__icon,
-  &:focus &__icon {
-    @include mixins.info-tooltip-active-icon;
-  }
-}

package/src/components/Tooltip/tests/BaseWrapper.js

@@ -1,10 +0,0 @@
-import React from 'react';
-
-const Base = props => (
-  <>
-    <div id="root" {...props} />
-    <div id="root-tooltips" />
-  </>
-);
-
-export default Base;