Adds actionable message component and stories

feature/default_network_editable
Dan Miller 4 years ago
parent ca35098f67
commit 7695343a3b
  1. 46
      ui/app/pages/token/actionable-message/actionable-message.js
  2. 69
      ui/app/pages/token/actionable-message/actionable-message.stories.js
  3. 1
      ui/app/pages/token/actionable-message/index.js
  4. 41
      ui/app/pages/token/actionable-message/index.scss
  5. 1
      ui/app/pages/token/index.scss

@ -0,0 +1,46 @@
import React from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
export default function ActionableMessage ({
shown = true,
message = '',
actions = [],
className = '',
}) {
return (
shown
? (
<div className={classnames('actionable-message', className)}>
<div className="actionable-message__message">
{message}
</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>
))
}
</div>
</div>
)
: null
)
}
ActionableMessage.propTypes = {
shown: PropTypes.bool,
message: PropTypes.string.isRequired,
actions: PropTypes.shape({
label: PropTypes.string,
onClick: PropTypes.func,
actionClassName: PropTypes.string,
}),
className: PropTypes.string,
}

@ -0,0 +1,69 @@
import React from 'react'
import { action } from '@storybook/addon-actions'
import { text, boolean } from '@storybook/addon-knobs/react'
import ActionableMessage from '.'
export default {
title: 'ActionableMessage',
}
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>
)
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'),
},
]}
/>
</div>
)
export const TwoActionsWithClassNames = () => (
<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'),
},
]}
className="actionable-message--warning"
/>
</div>
)

@ -0,0 +1 @@
export { default } from './actionable-message'

@ -0,0 +1,41 @@
.actionable-message {
background: $Blue-000;
border: 1px solid $Blue-200;
border-radius: 8px;
padding: 8px 28px 8px 28px;
margin-top: 18px;
display: flex;
flex-flow: column;
align-items: center;
@include H7;
&__message {
color: $Blue-600;
}
&__actions {
display: flex;
width: 80%;
justify-content: space-evenly;
align-items: center;
margin-top: 10px;
color: $Blue-600;
}
&__action {
font-weight: bold;
cursor: pointer;
}
}
.actionable-message--warning {
background: $Yellow-100;
border: 1px solid $Yellow-500;
justify-content: center;
.actionable-message__message,
.actionable-message__action {
color: $Black-100;
}
}

@ -1,2 +1,3 @@
@import 'fee-card/index';
@import 'exchange-rate-display/index';
@import 'actionable-message/index';

Loading…
Cancel
Save