Merge branch 'storybook' into react-find-bar
This commit is contained in:
50
src/components/stories/Card.js
Normal file
50
src/components/stories/Card.js
Normal file
@ -0,0 +1,50 @@
|
||||
import React from 'react';
|
||||
import { Card } from '../UI';
|
||||
import { storiesOf } from '@kadira/storybook';
|
||||
|
||||
const styles = {
|
||||
fixedWidth: { width: 280 },
|
||||
footer: {
|
||||
color: '#aaa',
|
||||
backgroundColor: '#555',
|
||||
textAlign: 'center',
|
||||
marginTop: 5,
|
||||
padding: 10
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
storiesOf('Card', module)
|
||||
.add('Default View', () => (
|
||||
<div style={styles.fixedWidth}>
|
||||
<Card>
|
||||
<h1>A Card</h1>
|
||||
<h2>Subtitle</h2>
|
||||
<p>
|
||||
Margins are applied to all elements inside a card. <br/>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. lobortis vel. Nulla porttitor enim at tellus eget
|
||||
malesuada eleifend. Nunc tellus turpis, tincidunt sed felis facilisis, lacinia condimentum quam. Cras quis
|
||||
tortor fermentum, aliquam tortor eu, consequat ligula. Nulla eget nulla act odio varius ullamcorper turpis.
|
||||
In consequat egestas nulla condimentum faucibus. Donec scelerisque convallis est nec fringila. Suspendisse
|
||||
non lorem non erat congue consequat.
|
||||
</p>
|
||||
</Card>
|
||||
</div>
|
||||
)).add('Full width content', () => (
|
||||
<div style={styles.fixedWidth}>
|
||||
<Card>
|
||||
<img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" />
|
||||
<h1>Card & cat</h1>
|
||||
<p>Media Elements such as video, img (and iFrame for embeds) don't have margin</p>
|
||||
</Card>
|
||||
</div>
|
||||
)).add('Footer', () => (
|
||||
<div style={styles.fixedWidth}>
|
||||
<Card>
|
||||
<img src="http://www.top13.net/wp-content/uploads/2015/10/perfectly-timed-funny-cat-pictures-5.jpg" />
|
||||
<h1>Now with footer.</h1>
|
||||
<p>header and footer elements are also not subject to margin</p>
|
||||
<footer style={styles.footer}>© Thousand Cats Corp</footer>
|
||||
</Card>
|
||||
</div>
|
||||
))
|
2
src/components/stories/index.js
Normal file
2
src/components/stories/index.js
Normal file
@ -0,0 +1,2 @@
|
||||
import '../../index.css';
|
||||
import './Card';
|
@ -2,11 +2,16 @@ html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body, #appRoot, #appRoot > * {
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:global #root, :global #root > * {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, figure, dl, ol, ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
@ -11,7 +11,7 @@ const store = configureStore();
|
||||
window.store = store;
|
||||
|
||||
const el = document.createElement('div');
|
||||
el.id = 'appRoot';
|
||||
el.id = 'root';
|
||||
document.body.appendChild(el);
|
||||
|
||||
render((
|
||||
|
Reference in New Issue
Block a user