feat: Tooltip component (#121)

* Added Tooltip Component

* Revert "Added Tooltip Component"

This reverts commit b2cd3ee.

* Added tooltip

* Update Loki

* Loki

* Changed proptype

* Removed useless mixin

* Reworked props, added arrowless variation

* Memoize some internal values

* Move Tooltip stories to Misc

Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat>

packages/fuselage/src/components/Tooltip/index.js

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+import React, { useMemo } from 'react';
+
+import { Box } from '../Box';
+
+export function Tooltip({
+  arrowPosition,
+  ...props
+}) {
+  const [direction, position] = useMemo(() => {
+    const [dir, pos] = arrowPosition ? arrowPosition.split('-') : [false, false];
+
+    if (!dir || dir === 'left' || dir === 'right') {
+      return [String(dir), false];
+    }
+
+    return [String(dir), pos ? String(pos) : 'center'];
+  }, [arrowPosition]);
+
+  return <Box
+    is='div'
+    componentClassName='rcx-tooltip'
+    mod-dir={direction}
+    mod-pos={position}
+    {...props}
+  />;
+}
+
+Tooltip.propTypes = {
+  position: PropTypes.oneOf(['up', 'up-left', 'up-right', 'down', 'down-left', 'down-right', 'left', 'right']),
+};

packages/fuselage/src/components/Tooltip/stories.mdx

@@ -0,0 +1,49 @@
+import { action } from '@storybook/addon-actions';
+import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
+
+import { Box, Margins, Tooltip } from '../..';
+
+<Meta title='Misc|Tooltips' parameters={{ jest: ['Misc/spec'] }} />
+
+# Tooltip
+
+A message which appears when a cursor is positioned over an icon, image, hyperlink, or other element in a graphical user
+interface.
+
+<Preview>
+  <Story name='Default'>
+    <Tooltip>A example tooltip</Tooltip>
+  </Story>
+</Preview>
+
+<Props of={Tooltip} />
+
+## Arrow positioning
+
+<Preview>
+  <Story name='Arrow positioning'>
+    <Margins inline='neg-x8'>
+      <Box>
+        <Margins all='x8'>
+          <Tooltip children='Tooltip' arrowPosition='up-left' />
+          <Tooltip children='Tooltip' arrowPosition='up' />
+          <Tooltip children='Tooltip' arrowPosition='up-right' />
+        </Margins>
+      </Box>
+      <Box>
+        <Margins all='x8'>
+          <Tooltip children='Tooltip' arrowPosition='left' />
+          <Tooltip children='Tooltip' arrowPosition={null} />
+          <Tooltip children='Tooltip' arrowPosition='right' />
+        </Margins>
+      </Box>
+      <Box>
+        <Margins all='x8'>
+          <Tooltip children='Tooltip' arrowPosition='down-left' />
+          <Tooltip children='Tooltip' arrowPosition='down' />
+          <Tooltip children='Tooltip' arrowPosition='down-right' />
+        </Margins>
+      </Box>
+    </Margins>
+  </Story>
+</Preview>

packages/fuselage/src/components/Tooltip/styles.scss

@@ -0,0 +1,104 @@
+@mixin triangle-direction ($direction) {
+  &::after {
+    position: absolute;
+
+    box-sizing: border-box;
+
+    content: ' ';
+
+    border-width: calc(#{ $borders-width-x4 } + #{ $borders-width-x1 });
+    border-color: transparent transparent $tooltip-background-color $tooltip-background-color;
+    border-radius: 0 0 0 calc(#{ $borders-radius-x2 } + #{ $borders-radius-x2} / 2);
+
+    @if $direction == 'up' {
+      top: calc(-1 * (#{$spaces-x4} ));
+
+      transform: rotate(135deg);
+    }
+    @if $direction == 'down' {
+      bottom: calc(-1 * (#{$spaces-x4} ));
+
+      transform: rotate(-45deg);
+    }
+    @if $direction == 'left' {
+      top: $tooltip-arrow-position-center;
+      left: calc(-1 * (#{$spaces-x4} ));
+
+      margin-block-start: calc(-1 * #{ $spaces-x4 });
+
+      transform: rotate(45deg);
+    }
+    @if $direction == 'right' {
+      top: $tooltip-arrow-position-center;
+      right: calc(-1 * (#{$spaces-x4} ));
+
+      margin-block-start: calc(-1 * #{ $spaces-x4 });
+
+      transform: rotate(-135deg);
+    }
+  }
+}
+
+.rcx-tooltip {
+  position: relative;
+
+  display: inline-block;
+
+  max-width: $spaces-x240;
+
+  padding-block: $spaces-x8;
+  padding-inline: $spaces-x12;
+
+  word-break: break-all;
+
+  color: $tooltip-text-color;
+
+  border-radius: $borders-radius-x4;
+
+  background-color: $tooltip-background-color;
+
+  @include use-text-style(p2);
+
+  &--dir-up {
+    @include triangle-direction('up');
+  }
+
+  &--dir-down {
+    @include triangle-direction('down');
+  }
+
+  &--dir-left {
+    @include triangle-direction('left');
+  }
+
+  &--dir-right {
+    @include triangle-direction('right');
+  }
+
+  &--pos {
+    &-center {
+      &::after {
+        left: 50%;
+
+        margin-inline-start: calc(-1 * #{ $spaces-x4 });
+      }
+    }
+
+    &-left {
+      &::after {
+        left: $tooltip-arrow-margin;
+
+        margin: 0;
+      }
+    }
+
+    &-right {
+      &::after {
+        right: $tooltip-arrow-margin;
+        left: initial;
+
+        margin: 0;
+      }
+    }
+  }
+}

packages/fuselage/src/components/index.js

@@ -36,5 +36,6 @@ export * from './Chip';
 export * from './AutoComplete';
 export * from './Options';
 export * from './Select';
+export * from './Tooltip';
 export * from './Modal';
 export * from './Throbber';

packages/fuselage/src/components/index.scss

@@ -28,5 +28,6 @@
 @import './AutoComplete/styles.scss';
 @import './Options/styles.scss';
 @import './Select/styles.scss';
+@import './Tooltip/styles.scss';
 @import './Modal/styles.scss';
 @import './Throbber/styles.scss';

packages/fuselage/src/styles/variables/all.scss

@@ -7,4 +7,5 @@
 @import './text-colors.scss';
 @import './text-styles.scss';
 @import './transitions.scss';
+@import './tooltip.scss';
 @import './tabs-colors.scss';

packages/fuselage/src/styles/variables/borders.scss

@@ -5,6 +5,7 @@ $borders-width-x4: theme('borders-width-x4', to-rem(4));
 
 $borders-radius-none: 0;
 $borders-radius-x2: theme('borders-radius-x2', to-rem(2));
+$borders-radius-x4: theme('borders-radius-x4', to-rem(4));
 $borders-radius-full: 9999px;
 
 $borders: (

packages/fuselage/src/styles/variables/tooltip.scss

@@ -0,0 +1,5 @@
+$tooltip-arrow-margin: $spaces-x8;
+$tooltip-arrow-position-center: 50%;
+
+$tooltip-background-color: theme('tooltip-background-color', $colors-n900);
+$tooltip-text-color: theme('tooltip-text-color', $colors-white);