m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

info-tooltip (#12901)

Browse Source
This commit is contained in:
Etienne Dusseault 2021-12-08 01:37:39 +08:00 committed by GitHub
parent bd17160e2a
commit de4b54c230
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 98 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
ui/components/ui/info-tooltip/README.mdx Normal file
View File

@ -0,0 +1,37 @@
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import InfoTooltip from './info-tooltip';
# Info Tooltip
Text labels that appear when the user hovers over
<Canvas>
<Story id="ui-components-ui-info-tooltip-info-tooltip-stories-js--default-story" />
</Canvas>
## Component API
<ArgsTable of={InfoTooltip} />
## Usage
The following describes the props and example usage for this component.
### Bottom
<Canvas>
<Story id="ui-components-ui-info-tooltip-info-tooltip-stories-js--bottom" />
</Canvas>
### Left
<Canvas>
<Story id="ui-components-ui-info-tooltip-info-tooltip-stories-js--left" />
</Canvas>
### Right
<Canvas>
<Story id="ui-components-ui-info-tooltip-info-tooltip-stories-js--right" />
</Canvas>

18
ui/components/ui/info-tooltip/info-tooltip.js
View File

@ -41,10 +41,28 @@ export default function InfoTooltip({
}
InfoTooltip.propTypes = {
/**
* Text label that shows up after hover
*/
contentText: PropTypes.node,
/**
* Shows position of the tooltip
*/
position: PropTypes.oneOf(['top', 'left', 'bottom', 'right']),
/**
* Set if the tooltip wide
*/
wide: PropTypes.bool,
/**
* Add custom CSS class for container
*/
containerClassName: PropTypes.string,
/**
* Add custom CSS class for the wrapper
*/
wrapperClassName: PropTypes.string,
/**
* Add color for the icon
*/
iconFillColor: PropTypes.string,
};

80
ui/components/ui/info-tooltip/info-tooltip.stories.js
View File

@ -1,48 +1,54 @@
import React from 'react';
import { text } from '@storybook/addon-knobs';
import README from './README.mdx';
import InfoTooltip from './info-tooltip';
export default {
title: 'Components/UI/InfoTooltip',
id: __filename,
component: InfoTooltip,
parameters: {
docs: {
page: README,
},
},
argTypes: {
contentText: { control: 'text' },
position: {
control: 'select',
options: ['top', 'left', 'bottom', 'right'],
},
wide: { control: 'boolean' },
containerClassName: { control: 'text' },
wrapperClassName: { control: 'text' },
iconFillColor: { control: 'text' },
},
};
export const Top = () => (
<InfoTooltip
position="top"
contentText={text(
'top',
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida dictum diam et sagittis. Sed lorem arcu, consectetur consectetur et, lacinia hendrerit sapien.',
)}
/>
);
export const DefaultStory = (args) => <InfoTooltip {...args} />;
DefaultStory.storyName = 'Default';
DefaultStory.args = {
position: 'top',
contentText:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida dictum diam et sagittis. Sed lorem arcu, consectetur consectetur et, lacinia hendrerit sapien.',
};
export const Bottom = () => (
<InfoTooltip
position="bottom"
contentText={text(
'bottom',
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida dictum diam et sagittis. Sed lorem arcu, consectetur consectetur et, lacinia hendrerit sapien.',
)}
/>
);
export const Bottom = (args) => <InfoTooltip {...args} />;
Bottom.args = {
position: 'bottom',
contentText:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida dictum diam et sagittis. Sed lorem arcu, consectetur consectetur et, lacinia hendrerit sapien.',
};
export const Left = () => (
<InfoTooltip
position="left"
contentText={text(
'left',
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida dictum diam et sagittis. Sed lorem arcu, consectetur consectetur et, lacinia hendrerit sapien.',
)}
/>
);
export const Left = (args) => <InfoTooltip {...args} />;
Left.args = {
position: 'left',
contentText:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida dictum diam et sagittis. Sed lorem arcu, consectetur consectetur et, lacinia hendrerit sapien.',
};
export const Right = () => (
<InfoTooltip
position="right"
contentText={text(
'right',
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida dictum diam et sagittis. Sed lorem arcu, consectetur consectetur et, lacinia hendrerit sapien.',
)}
/>
);
export const Right = (args) => <InfoTooltip {...args} />;
Right.args = {
position: 'right',
contentText:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida dictum diam et sagittis. Sed lorem arcu, consectetur consectetur et, lacinia hendrerit sapien.',
};