From 5205f02de60e23b8ade4847a25c5a027b9e03fda Mon Sep 17 00:00:00 2001 From: Etienne Dusseault Date: Wed, 8 Dec 2021 02:01:17 +0800 Subject: [PATCH] Fix Actionable message for new Storybook format (#12874) * actionable-message * remove usage table * Updating stories * linting fix Co-authored-by: georgewrmarshall --- .../ui/actionable-message/README.mdx | 47 +++++ .../actionable-message/actionable-message.js | 34 ++++ .../actionable-message.stories.js | 166 ++++++++++-------- 3 files changed, 175 insertions(+), 72 deletions(-) create mode 100644 ui/components/ui/actionable-message/README.mdx diff --git a/ui/components/ui/actionable-message/README.mdx b/ui/components/ui/actionable-message/README.mdx new file mode 100644 index 000000000..c01e3b749 --- /dev/null +++ b/ui/components/ui/actionable-message/README.mdx @@ -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. + + + + + +## Component API + + + +### One Action + +Add actionable message component with one button + + + + + +### Two Actions + +Add actionable message component with two buttons + + + + + +### Left Aligned + +Align actionable message component's text to left + + + + + +### With Icon + +Add tooltip icon to the left of the component + + + + diff --git a/ui/components/ui/actionable-message/actionable-message.js b/ui/components/ui/actionable-message/actionable-message.js index ccae2b676..ae32b434c 100644 --- a/ui/components/ui/actionable-message/actionable-message.js +++ b/ui/components/ui/actionable-message/actionable-message.js @@ -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, }; diff --git a/ui/components/ui/actionable-message/actionable-message.stories.js b/ui/components/ui/actionable-message/actionable-message.stories.js index 238efdbce..f6ed2e3fb 100644 --- a/ui/components/ui/actionable-message/actionable-message.stories.js +++ b/ui/components/ui/actionable-message/actionable-message.stories.js @@ -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 = () => ( -
- -
+export const DefaultStory = (args) => ( + ); DefaultStory.storyName = 'Default'; -export const OneAction = () => ( -
- -
-); +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 = () => ( -
- -
-); +export const OneAction = (args) => ; -export const LeftAligned = () => ( -
- -
-); +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 = () => ( -
- -
-); +export const TwoActions = (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) => ; + +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) => ; + +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) => ; + +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', + }, +};