mirror of
https://github.com/primer/css.git
synced 2024-11-28 22:01:43 +03:00
94 lines
3.4 KiB
JavaScript
94 lines
3.4 KiB
JavaScript
import React from 'react'
|
|
import { storiesOf } from '@storybook/react'
|
|
|
|
storiesOf('Typography utilities', module)
|
|
.add('h1-h6', () => (
|
|
<div>
|
|
<h1 className='h1'>h1</h1>
|
|
<h1 className='h2'>h2</h1>
|
|
<h1 className='h3'>h3</h1>
|
|
<h1 className='h4'>h4</h1>
|
|
<h1 className='h5'>h5</h1>
|
|
<h1 className='h6'>h6</h1>
|
|
</div>
|
|
))
|
|
.add('f1-f6', () => (
|
|
<div>
|
|
<h1 className='f1'>f1</h1>
|
|
<h1 className='f2'>f2</h1>
|
|
<h1 className='f3'>f3</h1>
|
|
<h1 className='f4'>f4</h1>
|
|
<h1 className='f5'>f5</h1>
|
|
<h1 className='f6'>f6</h1>
|
|
</div>
|
|
))
|
|
.add('f light', () => (
|
|
<div>
|
|
<h1 className='f00-light'>f00-light</h1>
|
|
<h1 className='f0-light'>f0-light</h1>
|
|
<h1 className='f1-light'>f1-light</h1>
|
|
<h1 className='f2-light'>f2-light</h1>
|
|
<h1 className='f3-light'>f3-light</h1>
|
|
</div>
|
|
))
|
|
.add('line-height', () =>(
|
|
<div>
|
|
<p className='lh-default'>
|
|
lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default
|
|
|
|
</p>
|
|
<p className='lh-condensed'>
|
|
lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed
|
|
</p>
|
|
<p className='lh-condensed-ultra'>
|
|
lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra
|
|
</p>
|
|
</div>
|
|
))
|
|
.add('typographic styles', () => (
|
|
<div>
|
|
<h3 className='text-normal'>text-normal</h3>
|
|
<p className='text-bold'>text-bold</p>
|
|
<p className='text-uppercase'>text-uppercase</p>
|
|
<p className='no-wrap'>no-wrap</p>
|
|
<p className='ws-normal'>ws-normal</p>
|
|
<p className='wb-break-all'>wb-break-all</p>
|
|
<p className='no-underline'>no-underline</p>
|
|
<p className='text-emphasized'>text-emphasized</p>
|
|
<p className='text-small'>text-small</p>
|
|
<p className='lead'>lead</p>
|
|
<p className='text-mono'>text-mono</p>
|
|
</div>
|
|
))
|
|
.add('text alignment', () => (
|
|
<div>
|
|
<p className='text-left'>text-left</p>
|
|
<p className='text-center'>text-center</p>
|
|
<p className='text-right'>text-right</p>
|
|
</div>
|
|
))
|
|
.add('responsive text alignment', () => (
|
|
<div>
|
|
<p className='text-left text-sm-center text-lg-right'>Left in a small viewport, centered in mid-sized viewports, and right aligned in larger viewports</p>
|
|
</div>
|
|
))
|
|
.add('list-style-none', () => (
|
|
<div>
|
|
<ul className='list-style-none'>
|
|
<li>list-style-none</li>
|
|
<li>list-style-none</li>
|
|
<li>list-style-none</li>
|
|
</ul>
|
|
</div>
|
|
))
|
|
.add('text shadows', () => (
|
|
<div>
|
|
<div className='bg-purple p-5'>
|
|
<h3 className='text-white text-shadow-dark'>.text-shadow-dark helps white text stand out on dark or photographic backgrounds</h3>
|
|
</div>
|
|
<div className='bg-yellow p-5'>
|
|
<h3 className='text-shadow-light'>.text-shadow-light creates an embossed effect for dark text</h3>
|
|
</div>
|
|
</div>
|
|
))
|