primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-28 22:01:43 +03:00
Code Issues Projects Releases Wiki Activity

move typography to correct module

Browse Source
This commit is contained in:
Diana Mounter 2017-10-09 14:38:04 -04:00
parent 72e979b0fb
commit 2d0c8f03ec
1 changed files with 20 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
modules/primer-support/stories/Typography.js → modules/primer-utilities/stories/Typography.js
View File

@ -33,14 +33,14 @@ storiesOf('Typography', module)
))
.add('line-height', () =>(
<div>
<p className="lh-default">
<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">
<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">
<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>
@ -49,31 +49,31 @@ storiesOf('Typography', module)
<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-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>
<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>
<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">
<ul className='list-style-none'>
<li>list-style-none</li>
<li>list-style-none</li>
<li>list-style-none</li>
@ -82,11 +82,11 @@ storiesOf('Typography', module)
))
.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 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 className='bg-yellow p-5'>
<h3 className='text-shadow-light'>.text-shadow-light creates an embossed effect for dark text</h3>
</div>
</div>
))