Code cleanup and simplification for actionable-message component

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

@@ -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>
       <div className="actionable-message__actions">
-            {
+        {primaryAction && (
-              actions.map(({ label, onClick, actionClassName }, index) => (
           <div
-                  className={classnames('actionable-message__action', actionClassName)}
+            className={classnames('actionable-message__action', 'actionable-message__action--primary')}
-                  onClick={onClick}
+            onClick={primaryAction.onClick}
-                  key={`actionable-message-action-${index}`}
           >
-                  {label}
+            {primaryAction.label}
           </div>
-              ))
+        )}
-            }
+        {secondaryAction && (
+          <div
+            className={classnames('actionable-message__action', 'actionable-message__action--secondary')}
+            onClick={secondaryAction.onClick}
+          >
+            {secondaryAction.label}
+          </div>
+        )}
       </div>
     </div>
   )
-      : null
-  )
 }
 
 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,
 }

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

@@ -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={[
+      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={[
+      primaryAction={{
-        {
         label: text('First ActionLabel', 'Dismiss'),
         onClick: action('TwoActionsWithClassNames Click 1'),
-          actionClassName: 'text-transform-uppercase',
+      }}
-        },
+      secondaryAction={{
-        {
+        label: text('Second ActionLabel', 'Okay'),
-          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.scss

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