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

Fix Actionable message for new Storybook format (#12874)

Browse Source 
* actionable-message

* remove usage table

* Updating stories

* linting fix

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
This commit is contained in:
Etienne Dusseault 2021-12-08 02:01:17 +08:00 committed by GitHub
parent 09ba8d689e
commit 5205f02de6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 175 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
ui/components/ui/actionable-message/README.mdx Normal file
View File

@ -0,0 +1,47 @@
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import ActionableMessage from '.';
# Actionable Message
Popup component that give the user information. Actionable Message component can generate a tooltip and a maximum of two action buttons.
<Canvas>
<Story id="ui-components-ui-actionable-message-actionable-message-stories-js--default-story" />
</Canvas>
## Component API
<ArgsTable of={ActionableMessage} />
### One Action
Add actionable message component with one button
<Canvas>
<Story id="ui-components-ui-actionable-message-actionable-message-stories-js--one-action" />
</Canvas>
### Two Actions
Add actionable message component with two buttons
<Canvas>
<Story id="ui-components-ui-actionable-message-actionable-message-stories-js--two-actions" />
</Canvas>
### Left Aligned
Align actionable message component's text to left
<Canvas>
<Story id="ui-components-ui-actionable-message-actionable-message-stories-js--left-aligned" />
</Canvas>
### With Icon
Add tooltip icon to the left of the component
<Canvas>
<Story id="ui-components-ui-actionable-message-actionable-message-stories-js--with-icon" />
</Canvas>

34
ui/components/ui/actionable-message/actionable-message.js
View File

@ -102,24 +102,58 @@ export default function ActionableMessage({
} }
ActionableMessage.propTypes = { ActionableMessage.propTypes = {
/**
* Text inside actionable message
*/
message: PropTypes.node.isRequired, message: PropTypes.node.isRequired,
/**
* First button props that have label and onClick props
*/
primaryAction: PropTypes.shape({ primaryAction: PropTypes.shape({
label: PropTypes.string, label: PropTypes.string,
onClick: PropTypes.func, onClick: PropTypes.func,
}), }),
/**
* Another style of primary action.
* This probably shouldn't have been added. A `children` prop might have been more appropriate.
*/
primaryActionV2: PropTypes.shape({ primaryActionV2: PropTypes.shape({
label: PropTypes.string, label: PropTypes.string,
onClick: PropTypes.func, onClick: PropTypes.func,
}), }),
/**
* Second button props that have label and onClick props
*/
secondaryAction: PropTypes.shape({ secondaryAction: PropTypes.shape({
label: PropTypes.string, label: PropTypes.string,
onClick: PropTypes.func, onClick: PropTypes.func,
}), }),
/**
* Additional css className for the component based on the parent css
*/
className: PropTypes.string, className: PropTypes.string,
/**
* change color theme for the component that already predefined in css
*/
type: PropTypes.string, type: PropTypes.string,
/**
* change text align to left and button to bottom right
*/
withRightButton: PropTypes.bool, withRightButton: PropTypes.bool,
/**
* Add tooltip and custom message
*/
infoTooltipText: PropTypes.string, infoTooltipText: PropTypes.string,
/**
* Add tooltip icon in the left component without message
*/
useIcon: PropTypes.bool, useIcon: PropTypes.bool,
/**
* change tooltip icon color
*/
iconFillColor: PropTypes.string, iconFillColor: PropTypes.string,
/**
* Whether the buttons are rounded
*/
roundedButtons: PropTypes.bool, roundedButtons: PropTypes.bool,
}; };

166
ui/components/ui/actionable-message/actionable-message.stories.js
View File

@ -1,87 +1,109 @@
import React from 'react'; import React from 'react';
import { action } from '@storybook/addon-actions'; import README from './README.mdx';
import { text } from '@storybook/addon-knobs';
import ActionableMessage from '.'; import ActionableMessage from '.';
export default { export default {
title: 'Components/UI/ActionableMessage', title: 'Components/UI/ActionableMessage',
id: __filename, id: __filename,
component: ActionableMessage,
parameters: { docs: { page: README } },
argTypes: {
'message': { control: 'text' },
'primaryAction.label': { control: 'text' },
'primaryAction.onClick': { action: 'primaryAction.onClick' },
'primaryActionV2.label': { control: 'text' },
'primaryActionV2.onClick': { action: 'primaryActionV2.onClick' },
'secondaryAction.label': { control: 'text' },
'secondaryAction.onClick': { action: 'secondaryAction.onClick' },
'className': { control: 'text' },
'type': { control: 'text' },
'withRightButton': { control: 'boolean' },
'infoTooltipText': { control: 'text' },
'useIcon': { control: 'boolean' },
'iconFillColor': { control: 'color' },
},
}; };
export const DefaultStory = () => ( export const DefaultStory = (args) => (
<div style={{ height: '200px', width: '200px' }}> <ActionableMessage
<ActionableMessage {...args}
message={text( primaryAction={{
'Message', label: args['primaryAction.label'],
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', onClick: args['primaryAction.onClick'],
)} }}
/> primaryActionV2={{
</div> label: args['primaryActionV2.label'],
onClick: args['primaryActionV2.onClick'],
}}
secondaryAction={{
label: args['secondaryAction.label'],
onClick: args['secondaryAction.onClick'],
}}
message={args.message}
/>
); );
DefaultStory.storyName = 'Default'; DefaultStory.storyName = 'Default';
export const OneAction = () => ( DefaultStory.args = {
<div style={{ height: '200px', width: '250px' }}> message:
<ActionableMessage 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
message={text( };
'Message',
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
)}
primaryAction={{
label: text('ActionLabel', 'Dismiss'),
onClick: action('OneAction Click'),
}}
/>
</div>
);
export const TwoActions = () => ( export const OneAction = (args) => <ActionableMessage {...args} />;
<div style={{ height: '200px', width: '300px' }}>
<ActionableMessage
message={text(
'Message',
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
)}
primaryAction={{
label: text('First ActionLabel', 'Dismiss'),
onClick: action('TwoActionsWithClassNames Click 1'),
}}
secondaryAction={{
label: text('Second ActionLabel', 'Okay'),
onClick: action('TwoActionsWithClassNames Click 2'),
}}
className="actionable-message--warning"
/>
</div>
);
export const LeftAligned = () => ( OneAction.args = {
<div style={{ height: '200px', width: '300px' }}> message:
<ActionableMessage 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
message={text( primaryAction: {
'Message', label: 'Dismiss',
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', },
)} };
primaryAction={{
label: text('LeftAligned Label', 'Dismiss'),
onClick: action('LeftAligned Click 1'),
}}
className="actionable-message--left-aligned"
/>
</div>
);
export const WithIcon = () => ( export const TwoActions = (args) => <ActionableMessage {...args} />;
<div style={{ height: '200px', width: '300px' }}>
<ActionableMessage TwoActions.args = {
message={text( message:
'Message', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', primaryAction: {
)} label: 'Dismiss',
className="actionable-message--left-aligned actionable-message--warning" },
useIcon secondaryAction: {
iconFillColor="#f8c000" label: 'Okay',
/> },
</div> className: 'actionable-message--warning',
); };
export const LeftAligned = (args) => <ActionableMessage {...args} />;
LeftAligned.args = {
message:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
primaryAction: {
label: 'Dismiss',
},
className: 'actionable-message--left-aligned',
};
export const WithIcon = (args) => <ActionableMessage {...args} />;
WithIcon.args = {
message:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
className: 'actionable-message--left-aligned actionable-message--warning',
useIcon: true,
iconFillColor: '#f8c000',
};
export const PrimaryV2Action = (args) => <ActionableMessage {...args} />;
PrimaryV2Action.args = {
message:
'We were not able to estimate gas. There might be an error in the contract and this transaction may fail.',
useIcon: true,
iconFillColor: '#d73a49',
type: 'danger',
primaryActionV2: {
label: 'I want to proceed anyway',
},
};