Adds actionable message component and stories

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

@@ -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,
+}

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

@@ -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>
+)

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,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;
+  }
+}

ui/app/pages/token/index.scss

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