metamask-extension/ui/app/pages/swaps/actionable-message/actionable-message.stories.js

import React from 'react';
import { action } from '@storybook/addon-actions';
import { text } from '@storybook/addon-knobs';
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>
);