content: import React from 'react';
  import PropTypes from 'prop-types';
  
  import { Grid, Heading } from 'grommet';
  
  const headingFiller = `
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua.
  `;
  
  const H = ({ level, size }) => (
    <Heading level={level} size={size}>
      {`Heading ${level} ${size}`}
    </Heading>
  );
  
  H.propTypes = {
    level: PropTypes.number.isRequired,
    size: PropTypes.string.isRequired,
  };
  
  const Set = ({ size }) => (
    <div>
      {[1, 2, 3, 4, 5, 6].map((level) => (
        <H key={level} level={level} size={size} />
      ))}
    </div>
  );
  
  Set.propTypes = {
    size: PropTypes.string.isRequired,
  };
  
  export const All = () => (
    // Uncomment <Grommet> lines when using outside of storybook
    // <Grommet theme={...}>
    <>
      <Grid columns="large" gap="medium">
        <Set size="medium" />
        <Set size="small" />
        <Set size="large" />
        <Set size="xlarge" />
      </Grid>
      <Heading fill>{headingFiller}</Heading>
    </>
    // </Grommet>
  );
  
  export default {
    title: 'Type/Heading/All',
  };
  