mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
added storybook files to alert and breadcrumbs component (#15156)
* added storyblok files to alert and breadcrumbs component * formatted the files * added confusable, i18n, export, hextToDecimal stories * replaced alert class component to functional component * removed i18n story files * added storyblok files to alert and breadcrumbs component * formatted the files * added confusable, i18n, export, hextToDecimal stories * replaced alert class component to functional component * removed i18n story files * added README files to storybook elements and fixed lint issues * added readme files * updated README file for confusable * fixed linting errors in test * removed unwanted tests
This commit is contained in:
parent
12da4303be
commit
fe76317eef
15
ui/components/ui/alert/README.mdx
Normal file
15
ui/components/ui/alert/README.mdx
Normal file
@ -0,0 +1,15 @@
|
||||
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
|
||||
|
||||
import Alert from '.';
|
||||
|
||||
# Alert
|
||||
|
||||
Alert element used to notify the user about some information or warning.
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-ui-alert-alert-stories-js--default-alert" />
|
||||
</Canvas>
|
||||
|
||||
## Component API
|
||||
|
||||
<ArgsTable of={Alert} />
|
32
ui/components/ui/alert/alert.stories.js
Normal file
32
ui/components/ui/alert/alert.stories.js
Normal file
@ -0,0 +1,32 @@
|
||||
import React from 'react';
|
||||
import README from './README.mdx';
|
||||
import Alert from '.';
|
||||
|
||||
export default {
|
||||
title: 'Components/UI/Alert',
|
||||
id: __filename,
|
||||
component: Alert,
|
||||
parameters: {
|
||||
docs: {
|
||||
page: README,
|
||||
},
|
||||
},
|
||||
argsTypes: {
|
||||
visible: {
|
||||
control: 'boolean',
|
||||
},
|
||||
msg: {
|
||||
control: 'text',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const DefaultAlert = (args) => {
|
||||
return <Alert {...args} />;
|
||||
};
|
||||
|
||||
DefaultAlert.storyName = 'Default';
|
||||
DefaultAlert.args = {
|
||||
visible: true,
|
||||
msg: 'Alert',
|
||||
};
|
@ -1,56 +1,49 @@
|
||||
import classnames from 'classnames';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { usePrevious } from '../../../hooks/usePrevious';
|
||||
import { MILLISECOND } from '../../../../shared/constants/time';
|
||||
|
||||
class Alert extends Component {
|
||||
state = {
|
||||
visible: false,
|
||||
msg: false,
|
||||
className: '',
|
||||
};
|
||||
function Alert(props) {
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [className, setClassName] = useState('');
|
||||
const lastVisible = usePrevious(props.visible);
|
||||
|
||||
UNSAFE_componentWillReceiveProps(nextProps) {
|
||||
if (!this.props.visible && nextProps.visible) {
|
||||
this.animateIn(nextProps.msg);
|
||||
} else if (this.props.visible && !nextProps.visible) {
|
||||
this.animateOut();
|
||||
useEffect(() => {
|
||||
const animateIn = () => {
|
||||
setClassName('visible');
|
||||
setVisible(true);
|
||||
};
|
||||
|
||||
const animateOut = () => {
|
||||
setClassName('hidden');
|
||||
|
||||
setTimeout((_) => {
|
||||
setVisible(false);
|
||||
}, MILLISECOND * 500);
|
||||
};
|
||||
|
||||
if (!lastVisible && props.visible) {
|
||||
animateIn(props.msg);
|
||||
} else if (lastVisible && !props.visible) {
|
||||
animateOut();
|
||||
}
|
||||
}
|
||||
}, [lastVisible, props.msg, props.visible]);
|
||||
|
||||
animateIn(msg) {
|
||||
this.setState({
|
||||
msg,
|
||||
visible: true,
|
||||
className: 'visible',
|
||||
});
|
||||
}
|
||||
|
||||
animateOut() {
|
||||
this.setState({
|
||||
msg: null,
|
||||
className: 'hidden',
|
||||
});
|
||||
|
||||
setTimeout((_) => {
|
||||
this.setState({ visible: false });
|
||||
}, MILLISECOND * 500);
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.visible) {
|
||||
return (
|
||||
<div className={classnames('global-alert', this.state.className)}>
|
||||
<a className="msg">{this.state.msg}</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (!visible) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classnames('global-alert', className)}>
|
||||
<a className="msg">{props.msg}</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Alert.propTypes = {
|
||||
visible: PropTypes.bool.isRequired,
|
||||
msg: PropTypes.string /* eslint-disable-line react/no-unused-prop-types */,
|
||||
msg: PropTypes.string,
|
||||
};
|
||||
|
||||
export default Alert;
|
||||
|
@ -1,5 +1,4 @@
|
||||
import React from 'react';
|
||||
import sinon from 'sinon';
|
||||
import { shallow } from 'enzyme';
|
||||
import Alert from '.';
|
||||
|
||||
@ -14,27 +13,4 @@ describe('Alert', () => {
|
||||
const alert = wrapper.find('.global-alert');
|
||||
expect(alert).toHaveLength(0);
|
||||
});
|
||||
|
||||
it('renders when visible in state is true, and message', () => {
|
||||
const errorMessage = 'Error Message';
|
||||
|
||||
wrapper.setState({ visible: true, msg: errorMessage });
|
||||
|
||||
const alert = wrapper.find('.global-alert');
|
||||
expect(alert).toHaveLength(1);
|
||||
|
||||
const errorText = wrapper.find('.msg');
|
||||
expect(errorText.text()).toStrictEqual(errorMessage);
|
||||
});
|
||||
|
||||
it('calls component method when componentWillReceiveProps is called', () => {
|
||||
const animateInSpy = sinon.stub(wrapper.instance(), 'animateIn');
|
||||
const animateOutSpy = sinon.stub(wrapper.instance(), 'animateOut');
|
||||
|
||||
wrapper.setProps({ visible: true });
|
||||
expect(animateInSpy.calledOnce).toStrictEqual(true);
|
||||
|
||||
wrapper.setProps({ visible: false });
|
||||
expect(animateOutSpy.calledOnce).toStrictEqual(true);
|
||||
});
|
||||
});
|
||||
|
16
ui/components/ui/breadcrumbs/README.mdx
Normal file
16
ui/components/ui/breadcrumbs/README.mdx
Normal file
@ -0,0 +1,16 @@
|
||||
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
|
||||
|
||||
import Breadcrumbs from './breadcrumbs.component';
|
||||
|
||||
|
||||
# Breadcrumbs
|
||||
|
||||
Breadcrumbs element is used to represent the current index out of total.
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-ui-breadcrumbs-breadcrumbs-stories-js--default-breadcrumbs" />
|
||||
</Canvas>
|
||||
|
||||
## Component API
|
||||
|
||||
<ArgsTable of={Breadcrumbs} />
|
33
ui/components/ui/breadcrumbs/breadcrumbs.stories.js
Normal file
33
ui/components/ui/breadcrumbs/breadcrumbs.stories.js
Normal file
@ -0,0 +1,33 @@
|
||||
import React from 'react';
|
||||
import README from './README.mdx';
|
||||
import Breadcrumbs from './breadcrumbs.component';
|
||||
|
||||
export default {
|
||||
title: 'Components/UI/Breadcrumbs ',
|
||||
id: __filename,
|
||||
component: Breadcrumbs,
|
||||
parameters: {
|
||||
docs: {
|
||||
page: README,
|
||||
},
|
||||
},
|
||||
argsTypes: {
|
||||
currentIndex: {
|
||||
control: 'number',
|
||||
},
|
||||
total: {
|
||||
control: 'number',
|
||||
},
|
||||
className: { control: 'text' },
|
||||
},
|
||||
};
|
||||
|
||||
export const DefaultBreadcrumbs = (args) => {
|
||||
return <Breadcrumbs {...args} />;
|
||||
};
|
||||
|
||||
DefaultBreadcrumbs.storyName = 'Default';
|
||||
DefaultBreadcrumbs.args = {
|
||||
currentIndex: 1,
|
||||
total: 3,
|
||||
};
|
25
ui/components/ui/confusable/README.mdx
Normal file
25
ui/components/ui/confusable/README.mdx
Normal file
@ -0,0 +1,25 @@
|
||||
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
|
||||
|
||||
import Confusable from './confusable.component';
|
||||
|
||||
# Confusable
|
||||
|
||||
Confusable allows to filter out any characters that look very similar to English language characters.
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-ui-confusable-confusable-stories-js--default-confusable" />
|
||||
</Canvas>
|
||||
|
||||
## Component API
|
||||
|
||||
| Name | Description | Default |
|
||||
| ----- | ----------- | ------- |
|
||||
| input | string | - |
|
||||
|
||||
## NonConfusable
|
||||
|
||||
Not to detect emojis
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-ui-confusable-confusable-stories-js--non-confusable" />
|
||||
</Canvas>
|
37
ui/components/ui/confusable/confusable.stories.js
Normal file
37
ui/components/ui/confusable/confusable.stories.js
Normal file
@ -0,0 +1,37 @@
|
||||
import React from 'react';
|
||||
import README from './README.mdx';
|
||||
import Confusable from './confusable.component';
|
||||
|
||||
export default {
|
||||
title: 'Components/UI/Confusable',
|
||||
id: __filename,
|
||||
component: Confusable,
|
||||
parameters: {
|
||||
docs: {
|
||||
page: README,
|
||||
},
|
||||
},
|
||||
argsTypes: {
|
||||
input: {
|
||||
control: 'text',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const DefaultConfusable = (args) => {
|
||||
return <Confusable {...args} />;
|
||||
};
|
||||
|
||||
export const NonConfusable = (args) => {
|
||||
return <Confusable {...args} />;
|
||||
};
|
||||
|
||||
DefaultConfusable.storyName = 'Default';
|
||||
DefaultConfusable.args = {
|
||||
input: 'vitalik.eth',
|
||||
};
|
||||
|
||||
NonConfusable.storyName = 'NonConfusable';
|
||||
NonConfusable.args = {
|
||||
input: '👻.eth',
|
||||
};
|
15
ui/components/ui/dialog/README.mdx
Normal file
15
ui/components/ui/dialog/README.mdx
Normal file
@ -0,0 +1,15 @@
|
||||
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
|
||||
|
||||
import Dialog from '.';
|
||||
|
||||
# Dialog
|
||||
|
||||
Dialog element is to create popup dialogs
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-ui-dialog-dialog-stories-js--default-dialog" />
|
||||
</Canvas>
|
||||
|
||||
## Component API
|
||||
|
||||
<ArgsTable of={Dialog} />
|
30
ui/components/ui/dialog/dialog.stories.js
Normal file
30
ui/components/ui/dialog/dialog.stories.js
Normal file
@ -0,0 +1,30 @@
|
||||
import React from 'react';
|
||||
import README from './README.mdx';
|
||||
import Dialog from '.';
|
||||
|
||||
export default {
|
||||
title: 'Components/UI/Dialog',
|
||||
id: __filename,
|
||||
component: Dialog,
|
||||
parameters: {
|
||||
docs: {
|
||||
page: README,
|
||||
},
|
||||
},
|
||||
argsTypes: {
|
||||
children: {
|
||||
control: 'text',
|
||||
},
|
||||
type: { control: 'text' },
|
||||
},
|
||||
};
|
||||
|
||||
export const DefaultDialog = (args) => {
|
||||
return <Dialog {...args} />;
|
||||
};
|
||||
|
||||
DefaultDialog.storyName = 'Default';
|
||||
DefaultDialog.args = {
|
||||
type: 'error',
|
||||
children: 'Dialog Box',
|
||||
};
|
15
ui/components/ui/export-text-container/README.mdx
Normal file
15
ui/components/ui/export-text-container/README.mdx
Normal file
@ -0,0 +1,15 @@
|
||||
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
|
||||
|
||||
import ExportTextContainer from '.';
|
||||
|
||||
# ExportTextContainer
|
||||
|
||||
The ExportTextContainer component enables to copy the input text or save it as a CSV File
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-ui-export-text-container-export-text-stories-js--default-export-text-container" />
|
||||
</Canvas>
|
||||
|
||||
## Component API
|
||||
|
||||
<ArgsTable of={ExportTextContainer} />
|
@ -0,0 +1,29 @@
|
||||
import React from 'react';
|
||||
import README from './README.mdx';
|
||||
import ExportTextContainer from '.';
|
||||
|
||||
export default {
|
||||
title: 'Components/UI/ExportTextContainer',
|
||||
id: __filename,
|
||||
component: ExportTextContainer,
|
||||
parameters: {
|
||||
docs: {
|
||||
page: README,
|
||||
},
|
||||
},
|
||||
argsTypes: {
|
||||
text: {
|
||||
control: 'text',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const DefaultExportTextContainer = (args) => {
|
||||
return <ExportTextContainer {...args} />;
|
||||
};
|
||||
|
||||
DefaultExportTextContainer.storyName = 'Default';
|
||||
|
||||
DefaultExportTextContainer.args = {
|
||||
text: ' Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
|
||||
};
|
15
ui/components/ui/hex-to-decimal/README.mdx
Normal file
15
ui/components/ui/hex-to-decimal/README.mdx
Normal file
@ -0,0 +1,15 @@
|
||||
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
|
||||
|
||||
import HexToDecimal from './hex-to-decimal.component';
|
||||
|
||||
# HexToDecimal
|
||||
|
||||
The HexToDecimal component renders hex as a decimal
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-ui-hex-to-decimal-hex-to-decimal-stories-js--default-hex-to-decimal" />
|
||||
</Canvas>
|
||||
|
||||
## Component API
|
||||
|
||||
<ArgsTable of={HexToDecimal} />
|
32
ui/components/ui/hex-to-decimal/hex-to-decimal.stories.js
Normal file
32
ui/components/ui/hex-to-decimal/hex-to-decimal.stories.js
Normal file
@ -0,0 +1,32 @@
|
||||
import React from 'react';
|
||||
import README from './README.mdx';
|
||||
import HexToDecimal from './hex-to-decimal.component';
|
||||
|
||||
export default {
|
||||
title: 'Components/UI/HexToDecimal',
|
||||
id: __filename,
|
||||
component: HexToDecimal,
|
||||
parameters: {
|
||||
docs: {
|
||||
page: README,
|
||||
},
|
||||
},
|
||||
argsTypes: {
|
||||
text: {
|
||||
control: 'text',
|
||||
},
|
||||
className: {
|
||||
value: 'text',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const DefaultHexToDecimal = (args) => {
|
||||
return <HexToDecimal {...args} />;
|
||||
};
|
||||
|
||||
DefaultHexToDecimal.storyName = 'Default';
|
||||
|
||||
DefaultHexToDecimal.args = {
|
||||
value: '0x3039',
|
||||
};
|
Loading…
Reference in New Issue
Block a user