mirror of
https://github.com/primer/css.git
synced 2024-12-25 07:03:35 +03:00
93 lines
3.4 KiB
JavaScript
93 lines
3.4 KiB
JavaScript
import React from 'react'
|
|
import { storiesOf } from '@storybook/react'
|
|
|
|
storiesOf('Typography', 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>
|
|
</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>
|
|
))
|