1
1
mirror of https://github.com/primer/css.git synced 2024-12-11 11:16:04 +03:00
css/modules/primer-marketing-utilities/stories.js
2017-11-17 12:08:28 -08:00

74 lines
2.5 KiB
JavaScript

import React from 'react'
import { storiesOf } from '@storybook/react'
storiesOf('Marketing utilities', module)
.add('Responsive borders', () => (
<div className='border-top border-sm-right border-md-bottom border-lg-top-0'>.border-top-0</div>
))
.add('border-white-fade', () => (
<div className='bg-blue text-white p-3'>
<span className='border border-white-fade p-2'>
.border-white-fade
</span>
</div>
))
.add('Responsive position', () => (
<div className='position-relative p-6 bg-gray'>
<div className='d-inline-block position-md-absolute bottom-0 right-0 border bg-white p-2'>
.position-md-absolute
</div>
</div>
))
.add('Y directional margin', () => (
<div>
<div className="d-inline-block mr-6">
<div className="d-inline-block mt-7 bg-blue-light">.mt-7</div>
</div>
<div className="d-inline-block mr-6">
<div className="d-inline-block mb-7 bg-blue-light">.mb-7</div>
</div>
<div className="d-inline-block mr-6">
<div className="d-inline-block my-7 bg-blue-light">.my-7</div>
</div>
</div>
))
.add('Y directional responsive margin', () => (
<div>
<div className="d-inline-block mr-6">
<div className="d-inline-block mt-sm-7 bg-blue-light">.mt-sm-7</div>
</div>
<div className="d-inline-block mr-6">
<div className="d-inline-block mb-md-7 bg-blue-light">.mb-md-7</div>
</div>
<div className="d-inline-block mr-6">
<div className="d-inline-block my-lg-7 bg-blue-light">.my-lg-7</div>
</div>
</div>
))
.add('Y directional padding', () => (
<div>
<div className="d-inline-block mr-6">
<div className="d-inline-block pt-7 bg-blue-light">.pt-7</div>
</div>
<div className="d-inline-block mr-6">
<div className="d-inline-block pb-7 bg-blue-light">.pb-7</div>
</div>
<div className="d-inline-block mr-6">
<div className="d-inline-block py-7 bg-blue-light">.py-7</div>
</div>
</div>
))
.add('Y directional responsive padding', () => (
<div>
<div className="d-inline-block mr-6">
<div className="d-inline-block pt-sm-7 bg-blue-light">.pt-sm-7</div>
</div>
<div className="d-inline-block mr-6">
<div className="d-inline-block pb-md-7 bg-blue-light">.pb-md-7</div>
</div>
<div className="d-inline-block mr-6">
<div className="d-inline-block py-lg-7 bg-blue-light">.py-lg-7</div>
</div>
</div>
))