m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +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'
export default function ActionableMessage ({
shown = true,
message = '',
actions = [],
primaryAction = null,
secondaryAction = null,
className = '',
}) {
return (
shown
? (
<div className={classnames('actionable-message', className)}>
<div className="actionable-message__message">
{message}
<div className={classnames('actionable-message', className)}>
<div className="actionable-message__message">
{message}
</div>
<div className="actionable-message__actions">
{primaryAction && (
<div
className={classnames('actionable-message__action', 'actionable-message__action--primary')}
onClick={primaryAction.onClick}
>
{primaryAction.label}
</div>
<div className="actionable-message__actions">
{
actions.map(({ label, onClick, actionClassName }, index) => (
<div
className={classnames('actionable-message__action', actionClassName)}
onClick={onClick}
key={`actionable-message-action-${index}`}
>
{label}
</div>
))
}
)}
{secondaryAction && (
<div
className={classnames('actionable-message__action', 'actionable-message__action--secondary')}
onClick={secondaryAction.onClick}
>
{secondaryAction.label}
</div>
</div>
)
: null
)}
</div>
</div>
)
}
ActionableMessage.propTypes = {
shown: PropTypes.bool,
message: PropTypes.string.isRequired,
actions: PropTypes.shape({
primaryAction: PropTypes.shape({
label: PropTypes.string,
onClick: PropTypes.func,
}),
secondaryAction: PropTypes.shape({
label: PropTypes.string,
onClick: PropTypes.func,
actionClassName: 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 { action } from '@storybook/addon-actions'
import { text, boolean } from '@storybook/addon-knobs/react'
import { text } from '@storybook/addon-knobs/react'
import ActionableMessage from '.'
export default {
@ -10,7 +10,6 @@ export default {
export const NoAction = () => (
<div style={{ height: '200px', width: '200px' }}>
<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.')}
/>
</div>
@ -19,50 +18,27 @@ export const NoAction = () => (
export const OneAction = () => (
<div style={{ height: '200px', width: '250px' }}>
<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('OneAction Click'),
},
]}
primaryAction={{
label: text('ActionLabel', 'Dismiss'),
onClick: action('OneAction Click'),
}}
/>
</div>
)
export const TwoActionsWithClassNames = () => (
export const TwoActions = () => (
<div style={{ height: '200px', width: '300px' }}>
<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('First ActionLabel', 'Dismiss'),
onClick: action('TwoActionsWithClassNames Click 1'),
actionClassName: 'text-transform-uppercase',
},
{
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'),
},
]}
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>

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

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