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

Code cleanup and simplification for actionable-message component

Browse Source
This commit is contained in:
Dan Miller 2020-08-18 15:43:36 -02:30
parent 7695343a3b
commit f106128c41
3 changed files with 54 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
ui/app/pages/token/actionable-message/actionable-message.js
View File

@ -3,44 +3,47 @@ import PropTypes from 'prop-types'
import classnames from 'classnames' import classnames from 'classnames'
export default function ActionableMessage ({ export default function ActionableMessage ({
shown = true,
message = '', message = '',
actions = [], primaryAction = null,
secondaryAction = null,
className = '', className = '',
}) { }) {
return ( return (
shown <div className={classnames('actionable-message', className)}>
? ( <div className="actionable-message__message">
<div className={classnames('actionable-message', className)}> {message}
<div className="actionable-message__message"> </div>
{message} <div className="actionable-message__actions">
{primaryAction && (
<div
className={classnames('actionable-message__action', 'actionable-message__action--primary')}
onClick={primaryAction.onClick}
>
{primaryAction.label}
</div> </div>
<div className="actionable-message__actions"> )}
{ {secondaryAction && (
actions.map(({ label, onClick, actionClassName }, index) => ( <div
<div className={classnames('actionable-message__action', 'actionable-message__action--secondary')}
className={classnames('actionable-message__action', actionClassName)} onClick={secondaryAction.onClick}
onClick={onClick} >
key={`actionable-message-action-${index}`} {secondaryAction.label}
>
{label}
</div>
))
}
</div> </div>
</div> )}
) </div>
: null </div>
) )
} }
ActionableMessage.propTypes = { ActionableMessage.propTypes = {
shown: PropTypes.bool,
message: PropTypes.string.isRequired, message: PropTypes.string.isRequired,
actions: PropTypes.shape({ primaryAction: PropTypes.shape({
label: PropTypes.string,
onClick: PropTypes.func,
}),
secondaryAction: PropTypes.shape({
label: PropTypes.string, label: PropTypes.string,
onClick: PropTypes.func, onClick: PropTypes.func,
actionClassName: PropTypes.string,
}), }),
className: PropTypes.string, className: PropTypes.string,
} }

52
ui/app/pages/token/actionable-message/actionable-message.stories.js
View File

@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import { action } from '@storybook/addon-actions' import { action } from '@storybook/addon-actions'
import { text, boolean } from '@storybook/addon-knobs/react' import { text } from '@storybook/addon-knobs/react'
import ActionableMessage from '.' import ActionableMessage from '.'
export default { export default {
@ -10,7 +10,6 @@ export default {
export const NoAction = () => ( export const NoAction = () => (
<div style={{ height: '200px', width: '200px' }}> <div style={{ height: '200px', width: '200px' }}>
<ActionableMessage <ActionableMessage
shown={boolean('Shown', true)}
message={text('Message', '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.')}
/> />
</div> </div>
@ -19,50 +18,27 @@ export const NoAction = () => (
export const OneAction = () => ( export const OneAction = () => (
<div style={{ height: '200px', width: '250px' }}> <div style={{ height: '200px', width: '250px' }}>
<ActionableMessage <ActionableMessage
shown={boolean('Shown', true)}
message={text('Message', '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.')}
actions={[ primaryAction={{
{ label: text('ActionLabel', 'Dismiss'),
label: text('ActionLabel', 'Dismiss'), onClick: action('OneAction Click'),
onClick: action('OneAction Click'), }}
},
]}
/> />
</div> </div>
) )
export const TwoActionsWithClassNames = () => ( export const TwoActions = () => (
<div style={{ height: '200px', width: '300px' }}> <div style={{ height: '200px', width: '300px' }}>
<ActionableMessage <ActionableMessage
shown={boolean('Shown', true)}
message={text('Message', '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.')}
actions={[ primaryAction={{
{ label: text('First ActionLabel', 'Dismiss'),
label: text('First ActionLabel', 'Dismiss'), onClick: action('TwoActionsWithClassNames Click 1'),
onClick: action('TwoActionsWithClassNames Click 1'), }}
actionClassName: 'text-transform-uppercase', secondaryAction={{
}, label: text('Second ActionLabel', 'Okay'),
{ onClick: action('TwoActionsWithClassNames Click 2'),
label: text('Second ActionLabel', 'okay'), }}
onClick: action('TwoActionsWithClassNames Click 2'),
actionClassName: 'text-transform-uppercase',
},
]}
/>
</div>
)
export const OneActionWithAClass = () => (
<div style={{ height: '200px', width: '350px' }}>
<ActionableMessage
shown={boolean('Shown', true)}
message={text('Message', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.')}
actions={[
{
label: text('ActionLabel', 'Dismiss'),
onClick: action('OneActionWithAClass Click'),
},
]}
className="actionable-message--warning" className="actionable-message--warning"
/> />
</div> </div>

20
ui/app/pages/token/actionable-message/index.scss
View File

@ -27,15 +27,19 @@
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
} }
}
.actionable-message--warning { &--warning {
background: $Yellow-100; background: $Yellow-100;
border: 1px solid $Yellow-500; border: 1px solid $Yellow-500;
justify-content: center; justify-content: center;
.actionable-message__message, .actionable-message__message,
.actionable-message__action { .actionable-message__action {
color: $Black-100; color: $Black-100;
}
.actionable-message__action--secondary {
text-decoration: underline;
}
} }
} }