example-first-publish/src/typograhpy.stories.js

Typography for BNNVARA

import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, text } from '@storybook/addon-knobs';
import styles from '@sambego/storybook-styles';

import { Heading, Text } from '.';

storiesOf('Typography', module)
  .addDecorator(withKnobs)
  .addDecorator(styles({
    background: '#f1f1f1',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    height: 'calc(100vh - 16px)',
  }))
  .add('Headings', () => (
    <div>
      <Heading
        element="h1"
        variant="one"
        value={text('Title', 'Title example')}
      />
      <br />
      <Heading
        element="h2"
        variant="two"
        value={text('Title', 'Title example')}
      />
      <br />
      <Heading
        element="h3"
        variant="three"
        value={text('Title', 'Title example')}
      />
      <br />
      <Heading
        element="h4"
        variant="four"
        value={text('Title', 'Title example')}
      />
      <br />
      <Heading
        element="h5"
        variant="five"
        value={text('Title', 'Title example')}
      />
      <br />
      <Heading
        element="h6"
        variant="six"
        value={text('Title', 'Title example')}
      />
    </div>
  ))
  .add('Text', () => (
    <div Style="max-width:900px;">
      <Text
        value={text('Text', '<p>Suspendisse potenti. Nam facilisis mi quis libero convallis, eget condimentum odio bibendum. Phasellus vitae luctus urna. Sed in malesuada metus, vel placerat turpis. Duis eu commodo est, ut pharetra ex. Proin purus libero, tristique ut ornare sit amet, ullamcorper a arcu. Aenean vel justo ac tortor gravida scelerisque. Nunc dapibus odio euismod velit finibus rutrum. Suspendisse accumsan dui quis mattis vehicula. Praesent iaculis elementum tempus.</p>')}
      />
    </div>
  ));