Commit b2cd3ee1 authored by Gabriel Henriques's avatar Gabriel Henriques
Browse files

Added Tooltip Component

parent 5a9aa820
import PropTypes from 'prop-types';
import React from 'react';
import { Box } from '../Box';
const Container = Box.extend('rcx-tooltip', 'div');
export function Tooltip({
left,
right,
center,
pointUp,
pointDown,
pointLeft,
pointRight,
...props
}) {
return <Container
mod-dir-right={ !!pointRight }
mod-dir-left={ !!pointLeft }
mod-dir-up={ !!pointUp }
mod-dir-down={ !!pointDown }
mod-pos-left={ !!left }
mod-pos-right={ !!right }
mod-pos-center={ !left && !right && !pointLeft && !pointRight }
{...props} />;
}
Tooltip.propTypes = {
left: PropTypes.bool,
right: PropTypes.bool,
};
import React from 'react';
import ReactDOM from 'react-dom';
import { Tooltip } from '../..';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<Tooltip />, div);
ReactDOM.unmountComponentAtNode(div);
});
import { action } from '@storybook/addon-actions';
import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
import { PropsVariationSection } from '../../../.storybook/helpers';
import { Tooltip } from '../..';
<Meta title='Tooltip|Tooltips' parameters={{ jest: ['Tooltip/spec'] }} />
# Tooltip
Describes component/button details.
### Pointing Up
<Preview>
<Story name='Pointing Up'>
<PropsVariationSection
component={Tooltip}
common={{ pointUp:true, onClick: action('click') }}
xAxis={{
'arrow to left': { left: true, children: "Description" },
'arrow to middle': { children: "Description" },
'arrow to right': { right:true, children: "Description" },
}}
yAxis={{
default: {},
}}
/>
</Story>
</Preview>
### Pointing Down
<Preview>
<Story name='Pointing Down'>
<PropsVariationSection
component={Tooltip}
common={{ pointDown:true, onClick: action('click') }}
xAxis={{
'arrow to left': { left: true, children: "Description" },
'arrow to middle': { children: "Description" },
'arrow to right': { right:true, children: "Description" },
}}
yAxis={{
default: {},
}}
/>
</Story>
</Preview>
### Pointing left
<Preview>
<Story name='Tooltip arrow left'>
<Tooltip pointLeft>Description</Tooltip>
</Story>
</Preview>
### Pointing right
<Preview>
<Story name='Tooltip arrow right'>
<Tooltip pointRight>Description</Tooltip>
</Story>
</Preview>
\ No newline at end of file
@mixin trianglePosition ($direction) {
&::after {
@include triangle($direction);
}
}
@mixin triangle ($direction) {
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;
padding-block: $spaces-x8;
padding-inline: $spaces-x12;
color: $tooltip-text-color;
border-radius: $borders-radius-x4;
background-color: $tooltip-background-color;
@include use-text-style(p2);
&--pos-left {
&::after {
left: $tooltip-arrow-margin;
}
}
&--pos-right {
&::after {
right: $tooltip-arrow-margin;
}
}
&--pos-center {
&::after {
left: 50%;
margin-inline-start: calc(-1 * #{ $spaces-x4 });
}
}
&--dir-up {
@include trianglePosition('up');
}
&--dir-down {
@include trianglePosition('down');
}
&--dir-left {
@include trianglePosition('left');
}
&--dir-right {
@include trianglePosition('right');
}
}
......@@ -36,3 +36,4 @@ export * from './Chip';
export * from './AutoComplete';
export * from './Options';
export * from './Select';
export * from './Tooltip';
......@@ -28,3 +28,4 @@
@import './AutoComplete/styles.scss';
@import './Options/styles.scss';
@import './Select/styles.scss';
@import './Tooltip/styles.scss';
......@@ -7,3 +7,4 @@
@import './text-colors.scss';
@import './text-styles.scss';
@import './transitions.scss';
@import './tooltip.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: (
......
$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);
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment