Merge pull request #9258 from MetaMask/actionable-message

Adds actionable message component and stories

ui/app/pages/token/actionable-message/actionable-message.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+export default function ActionableMessage ({
+  message = '',
+  primaryAction = null,
+  secondaryAction = null,
+  className = '',
+}) {
+  return (
+    <div className={classnames('actionable-message', className)}>
+      <div className="actionable-message__message">
+        {message}
+      </div>
+      {(primaryAction || secondaryAction) && (
+        <div className="actionable-message__actions">
+          {primaryAction && (
+            <div
+              className={classnames('actionable-message__action', 'actionable-message__action--primary')}
+              onClick={primaryAction.onClick}
+            >
+              {primaryAction.label}
+            </div>
+          )}
+          {secondaryAction && (
+            <div
+              className={classnames('actionable-message__action', 'actionable-message__action--secondary')}
+              onClick={secondaryAction.onClick}
+            >
+              {secondaryAction.label}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+ActionableMessage.propTypes = {
+  message: PropTypes.string.isRequired,
+  primaryAction: PropTypes.shape({
+    label: PropTypes.string,
+    onClick: PropTypes.func,
+  }),
+  secondaryAction: PropTypes.shape({
+    label: PropTypes.string,
+    onClick: PropTypes.func,
+  }),
+  className: PropTypes.string,
+}

ui/app/pages/token/actionable-message/actionable-message.stories.js

@@ -0,0 +1,58 @@
+import React from 'react'
+import { action } from '@storybook/addon-actions'
+import { text } from '@storybook/addon-knobs/react'
+import ActionableMessage from '.'
+
+export default {
+  title: 'ActionableMessage',
+}
+
+export const NoAction = () => (
+  <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 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>
+)
+
+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 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>
+)

ui/app/pages/token/actionable-message/index.js

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

ui/app/pages/token/actionable-message/index.scss

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

ui/app/pages/token/index.scss

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