mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
Fix Actionable message for new Storybook format (#12874)
* actionable-message * remove usage table * Updating stories * linting fix Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
This commit is contained in:
Etienne Dusseault
GitHub
parent
09ba8d689e
commit
5205f02de6
47
ui/components/ui/actionable-message/README.mdx
Normal file
47
ui/components/ui/actionable-message/README.mdx
Normal 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>
|
||||
@ -102,24 +102,58 @@ export default function ActionableMessage({
|
||||
}
|
||||
|
||||
ActionableMessage.propTypes = {
|
||||
/**
|
||||
* Text inside actionable message
|
||||
*/
|
||||
message: PropTypes.node.isRequired,
|
||||
/**
|
||||
* First button props that have label and onClick props
|
||||
*/
|
||||
primaryAction: PropTypes.shape({
|
||||
label: PropTypes.string,
|
||||
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({
|
||||
label: PropTypes.string,
|
||||
onClick: PropTypes.func,
|
||||
}),
|
||||
/**
|
||||
* Second button props that have label and onClick props
|
||||
*/
|
||||
secondaryAction: PropTypes.shape({
|
||||
label: PropTypes.string,
|
||||
onClick: PropTypes.func,
|
||||
}),
|
||||
/**
|
||||
* Additional css className for the component based on the parent css
|
||||
*/
|
||||
className: PropTypes.string,
|
||||
/**
|
||||
* change color theme for the component that already predefined in css
|
||||
*/
|
||||
type: PropTypes.string,
|
||||
/**
|
||||
* change text align to left and button to bottom right
|
||||
*/
|
||||
withRightButton: PropTypes.bool,
|
||||
/**
|
||||
* Add tooltip and custom message
|
||||
*/
|
||||
infoTooltipText: PropTypes.string,
|
||||
/**
|
||||
* Add tooltip icon in the left component without message
|
||||
*/
|
||||
useIcon: PropTypes.bool,
|
||||
/**
|
||||
* change tooltip icon color
|
||||
*/
|
||||
iconFillColor: PropTypes.string,
|
||||
/**
|
||||
* Whether the buttons are rounded
|
||||
*/
|
||||
roundedButtons: PropTypes.bool,
|
||||
};
|
||||
|
||||
@ -1,87 +1,109 @@
|
||||
import React from 'react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { text } from '@storybook/addon-knobs';
|
||||
import README from './README.mdx';
|
||||
import ActionableMessage from '.';
|
||||
|
||||
export default {
|
||||
title: 'Components/UI/ActionableMessage',
|
||||
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 = () => (
|
||||
<div style={{ height: '200px', width: '200px' }}>
|
||||
<ActionableMessage
|
||||
message={text(
|
||||
'Message',
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
export const DefaultStory = (args) => (
|
||||
<ActionableMessage
|
||||
{...args}
|
||||
primaryAction={{
|
||||
label: args['primaryAction.label'],
|
||||
onClick: args['primaryAction.onClick'],
|
||||
}}
|
||||
primaryActionV2={{
|
||||
label: args['primaryActionV2.label'],
|
||||
onClick: args['primaryActionV2.onClick'],
|
||||
}}
|
||||
secondaryAction={{
|
||||
label: args['secondaryAction.label'],
|
||||
onClick: args['secondaryAction.onClick'],
|
||||
}}
|
||||
message={args.message}
|
||||
/>
|
||||
);
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
||||
|
||||
export const OneAction = () => (
|
||||
<div style={{ height: '200px', width: '250px' }}>
|
||||
<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('ActionLabel', 'Dismiss'),
|
||||
onClick: action('OneAction Click'),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
DefaultStory.args = {
|
||||
message:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
|
||||
};
|
||||
|
||||
export const TwoActions = () => (
|
||||
<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 OneAction = (args) => <ActionableMessage {...args} />;
|
||||
|
||||
export const LeftAligned = () => (
|
||||
<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('LeftAligned Label', 'Dismiss'),
|
||||
onClick: action('LeftAligned Click 1'),
|
||||
}}
|
||||
className="actionable-message--left-aligned"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
OneAction.args = {
|
||||
message:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
|
||||
primaryAction: {
|
||||
label: 'Dismiss',
|
||||
},
|
||||
};
|
||||
|
||||
export const WithIcon = () => (
|
||||
<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.',
|
||||
)}
|
||||
className="actionable-message--left-aligned actionable-message--warning"
|
||||
useIcon
|
||||
iconFillColor="#f8c000"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
export const TwoActions = (args) => <ActionableMessage {...args} />;
|
||||
|
||||
TwoActions.args = {
|
||||
message:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
|
||||
primaryAction: {
|
||||
label: 'Dismiss',
|
||||
},
|
||||
secondaryAction: {
|
||||
label: 'Okay',
|
||||
},
|
||||
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',
|
||||
},
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user