content: import React from 'react';
  import {storiesOf} from '@storybook/react';
  import {withInfo} from '@storybook/addon-info';
  // import {action} from '@storybook/addon-actions';
  
  import FlowLayout from 'sentry-ui/flowLayout';
  import SpreadLayout from 'sentry-ui/spreadLayout';
  
  storiesOf('ComponentLayouts/FlowLayout', module)
    .add(
      'row',
      withInfo('Horizontal row with vertical centering')(() => (
        <FlowLayout style={{backgroundColor: '#fff'}}>
          <div style={{padding: 6, backgroundColor: 'rgba(0, 0, 0, 0.2)'}}>Flow</div>
          <div style={{padding: 12, backgroundColor: 'rgba(0, 0, 0, 0.1)'}}>Layout</div>
          <div style={{padding: 24, backgroundColor: 'rgba(0, 0, 0, 0.05)'}}>Flow</div>
          <div style={{padding: 18, backgroundColor: 'rgba(0, 0, 0, 0.3)'}}>Layout</div>
        </FlowLayout>
      ))
    )
    .add(
      'column',
      withInfo('Vertical column with horizontal centering')(() => (
        <FlowLayout vertical style={{backgroundColor: '#fff'}}>
          <div style={{padding: 6, backgroundColor: 'rgba(0, 0, 0, 0.2)'}}>Flow</div>
          <div style={{padding: 12, backgroundColor: 'rgba(0, 0, 0, 0.1)'}}>Layout</div>
          <div style={{padding: 24, backgroundColor: 'rgba(0, 0, 0, 0.05)'}}>Flow</div>
          <div style={{padding: 18, backgroundColor: 'rgba(0, 0, 0, 0.3)'}}>Layout</div>
        </FlowLayout>
      ))
    )
    .add(
      'long content (truncate)',
      withInfo(
        'When you use <FlowLayout> with content that does not get wrapped and overflows, by default hide overflow.'
      )(() => (
        <div>
          <h3 style={{marginBottom: 0, marginTop: 24}}>With "truncate"</h3>
          <SpreadLayout style={{backgroundColor: 'white', width: 250}}>
            <FlowLayout truncate={true}>
              <span className="truncate" style={{whiteSpace: 'nowrap'}}>
                Very very long content Very very long content Very very long content Very
                very long content
              </span>
            </FlowLayout>
  
            <div style={{backgroundColor: '#ccc'}}>Important</div>
          </SpreadLayout>
  
          <h3 style={{marginBottom: 0, marginTop: 24}}>Without "truncate"</h3>
          <SpreadLayout style={{backgroundColor: 'white', width: 250}}>
            <FlowLayout truncate={false}>
              <span className="truncate" style={{whiteSpace: 'nowrap'}}>
                Very very long content Very very long content Very very long content Very
                very long content
              </span>
            </FlowLayout>
  
            <div style={{backgroundColor: '#ccc'}}>Important</div>
          </SpreadLayout>
        </div>
      ))
    );
  