import React, { Component } from 'react';

import { Float, ClearFix } from '../../../src/float';
import { Callout } from '../../../src/callout';
import { Button } from '../../../src/button';

export default class FloatPage extends Component {
  render() {
    return (
      <div>
        <h1>Float</h1>
        <p>
          Helpful positioning components.
        </p>
        <h2>Basics</h2>
        <p>Importing the Float components:</p>
        <pre>
          <code>
{
`// Import with local scoped class names (via CSS Modules)
import { Float, ClearFix } from 'react-foundation-components/lib/float';

or

// Import with global scoped class names
import { Float, ClearFix } from 'react-foundation-components/lib/global/float';`
}
          </code>
        </pre>
        <p>
          Position content by placing it inside the Float component. Set the <code>position</code>
          prop to left, right or center to specify the position. Center will only work when Float
          has as absolute width. To clear floats, wrap them in the ClearFix component.
        </p>
        <pre>
          <code>
            {
`<ClearFix>
  <Float position="left">
    <Button>Left</Button>
  </Float>
  <Float position="right">
    <Button>Right</Button>
  </Float>
</ClearFix>
<Float position="center" style={{ width: '400px' }}>
  <img src="http://foundation.zurb.com/sites/docs/assets/img/voyager.jpg" />
</Float>`
            }
          </code>
        </pre>
        <ClearFix componentClass={Callout}>
          <Float position="left">
            <Button>Left</Button>
          </Float>
          <Float position="right">
            <Button>Right</Button>
          </Float>
        </ClearFix>
        <Float position="center" style={{ width: '400px' }}>
          <img src="http://foundation.zurb.com/sites/docs/assets/img/voyager.jpg" />
        </Float>
        <Float
          position="center"
          componentClass="img"
          src="http://foundation.zurb.com/sites/docs/assets/img/voyager.jpg"
        />
      </div>
    );
  }
}

import React, { Component } from 'react';

import { Float, ClearFix } from '../../../src/float';
import { Callout } from '../../../src/callout';
import { Button } from '../../../src/button';

export default class FloatPage extends Component {
  render() {
    return (
      <div>
        <h1>Float</h1>
        <p>
          Helpful positioning components.
        </p>
        <h2>Basics</h2>
        <p>Importing the Float components:</p>
        <pre>
          <code>
{
`// Import with local scoped class names (via CSS Modules)
import { Float, ClearFix } from 'react-foundation-components/lib/float';

or

// Import with global scoped class names
import { Float, ClearFix } from 'react-foundation-components/lib/global/float';`
}
          </code>
        </pre>
        <p>
          Position content by placing it inside the Float component. Set the <code>position</code>
          prop to left, right or center to specify the position. Center will only work when Float
          has as absolute width. To clear floats, wrap them in the ClearFix component.
        </p>
        <pre>
          <code>
            {
`<ClearFix>
  <Float position="left">
    <Button>Left</Button>
  </Float>
  <Float position="right">
    <Button>Right</Button>
  </Float>
</ClearFix>
<Float
  position="center"
  componentClass="img"
  src="http://foundation.zurb.com/sites/docs/assets/img/voyager.jpg"
/>`
            }
          </code>
        </pre>
        <ClearFix componentClass={Callout}>
          <Float position="left">
            <Button>Left</Button>
          </Float>
          <Float position="right">
            <Button>Right</Button>
          </Float>
        </ClearFix>
        <Float
          position="center"
          componentClass="img"
          src="http://foundation.zurb.com/sites/docs/assets/img/voyager.jpg"
        />
      </div>
    );
  }
}

simplify doc