mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
Creating story for icon-border
(#19467)
* Creating story for icon-border * Adding deprecation message --------- Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
This commit is contained in:
parent
29e6c2d34e
commit
58f6cf96cf
@ -2,6 +2,14 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
|
||||
/**
|
||||
* @deprecated The `<IconBorder />` component has been deprecated in favor of the `<AvatarBase />` component from the component-library.
|
||||
* Please update your code to use the new `<AvatarBase>` component instead, which can be found at ./ui/components/component-library/avatar-base/avatar-base.js.
|
||||
* You can find documentation for the new AvatarBase component in the MetaMask Storybook:
|
||||
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-avatarbase--docs}
|
||||
* If you would like to help with the replacement of the old IconBorder component, please submit a pull request
|
||||
*/
|
||||
|
||||
export default function IconBorder({ children, size, className }) {
|
||||
const borderStyle = { height: `${size}px`, width: `${size}px` };
|
||||
return (
|
||||
|
40
ui/components/ui/icon-border/icon-border.stories.js
Normal file
40
ui/components/ui/icon-border/icon-border.stories.js
Normal file
@ -0,0 +1,40 @@
|
||||
import React from 'react';
|
||||
import { Severity } from '../../../helpers/constants/design-system';
|
||||
import { BannerAlert } from '../../component-library';
|
||||
|
||||
import IconBorder from './icon-border';
|
||||
|
||||
export default {
|
||||
title: 'Components/UI/IconBorder',
|
||||
component: IconBorder,
|
||||
argTypes: {
|
||||
className: {
|
||||
control: 'text',
|
||||
},
|
||||
children: {
|
||||
control: 'text',
|
||||
},
|
||||
size: {
|
||||
control: 'number',
|
||||
},
|
||||
},
|
||||
args: {
|
||||
className: '',
|
||||
children: 'D',
|
||||
size: 32,
|
||||
},
|
||||
};
|
||||
|
||||
export const DefaultStory = (args) => (
|
||||
<>
|
||||
<BannerAlert
|
||||
severity={Severity.Warning}
|
||||
title="Deprecated"
|
||||
description="<IconBorder/> has been deprecated in favour of the <AvatarBase /> component"
|
||||
marginBottom={4}
|
||||
/>
|
||||
<IconBorder {...args} />
|
||||
</>
|
||||
);
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
Loading…
Reference in New Issue
Block a user