// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { Box, Grid, GridItem } from '../../src';
import intro from './INTRO.mkd';
import { compileMarkdown } from '../markdown-formatter';

storiesOf('A MANUAL/Implementers Guide', module).add('Intro', () => (
  <Box colorName="background" spacing="pv4">
    <Grid>
      <GridItem
        sm={10}
        md={8}
        offsetSm={1}
        offsetMd={2}
        offsetLg={2}
        offsetXl={2}
      >
        <Box colorName="white" spacing="p3">
          {compileMarkdown(intro).tree}
        </Box>
      </GridItem>
    </Grid>
  </Box>
));
