wix-style-react/dist/es/stories/Typography/TypographyTestStories.js

wix-style-react

import React from 'react';
import { storiesOf } from '@storybook/react';

import { renderSizeAndWeightTable, renderColorTable } from './TextClassesExample';
import { renderHeadingTable } from './HeadingClassesExample';
import { getTestStoryKind, Category } from '../storiesHierarchy';

import typography from '../../src/Typography';

var kind = getTestStoryKind({
  category: Category.FOUNDATION,
  storyName: '1.2 Typography'
});
storiesOf(kind, module).add('1. Typography with Classes - Text', function () {
  return React.createElement(
    'div',
    null,
    React.createElement(
      'h1',
      null,
      'Typography text with classes'
    ),
    React.createElement('br', null),
    React.createElement(
      'div',
      { style: { display: 'flex' } },
      renderSizeAndWeightTable(),
      React.createElement('div', { style: { width: '20px' } }),
      renderColorTable()
    )
  );
});

storiesOf(kind, module).add('2. Typography with Classes - Heading', function () {
  return React.createElement(
    'div',
    null,
    React.createElement(
      'h1',
      null,
      'Typography heading with classes'
    ),
    React.createElement('br', null),
    React.createElement(
      'div',
      { style: { display: 'flex' } },
      renderHeadingTable()
    )
  );
});

storiesOf(kind, module).add('3. Typography class deprecation log', function () {
  return React.createElement(
    'div',
    { style: { backgroundColor: 'black' } },
    React.createElement(
      'h1',
      { className: typography.h1_1 },
      'Deprecated h1_1 class'
    )
  );
});