From e39022bb29d6b507e2a49cb4b72d660a6bf7d087 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20Th=C3=BCring?= <t.thuering@linguala.com>
Date: Wed, 22 Nov 2017 13:18:28 +0100
Subject: [PATCH] center preview, add global wrapper (CenterDecorator)
---
.storybook/config.js | 19 +++++++++++++++++-
.storybook/preview-head.html | 5 +++++
.storybook/storybook-helper.js | 15 +++++++++++++++
src/stories/icon.js | 9 ++-------
src/stories/logo.js | 35 ++++++----------------------------
src/stories/pin.js | 23 ++++------------------
6 files changed, 50 insertions(+), 56 deletions(-)
create mode 100644 .storybook/preview-head.html
create mode 100644 .storybook/storybook-helper.js
diff --git a/.storybook/config.js b/.storybook/config.js
index 34907c8..aa7494a 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -1,4 +1,21 @@
-import { configure } from '@storybook/react';
+import React from 'react'
+import { configure, addDecorator } from '@storybook/react'
+
+const styles = {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ textAlign: 'center',
+ height: '100vh',
+}
+
+const CenterDecorator = (storyFn) => (
+ <div style={styles}>
+ { storyFn() }
+ </div>
+)
+
+addDecorator(CenterDecorator)
function loadStories() {
require('../src/stories/pin.js');
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
new file mode 100644
index 0000000..78b20a4
--- /dev/null
+++ b/.storybook/preview-head.html
@@ -0,0 +1,5 @@
+<style>
+ body {
+ margin: 0;
+ }
+</style>
diff --git a/.storybook/storybook-helper.js b/.storybook/storybook-helper.js
new file mode 100644
index 0000000..b288f4c
--- /dev/null
+++ b/.storybook/storybook-helper.js
@@ -0,0 +1,15 @@
+import React from 'react'
+
+export const ShowCaseBox = ({ children, style, backgroundColor }) => {
+ const caseStyle = {
+ backgroundColor: (!backgroundColor) ? "white" : backgroundColor,
+ borderWidth: "1px",
+ borderStyle: "solid",
+ borderColor: "black",
+ }
+ return (
+ <div style={{...caseStyle, ...style}}>
+ {children}
+ </div>
+ )
+}
diff --git a/src/stories/icon.js b/src/stories/icon.js
index 28df1b9..6630b2b 100644
--- a/src/stories/icon.js
+++ b/src/stories/icon.js
@@ -1,17 +1,12 @@
import React from 'react'
import { Icon, LingualaIcon } from '../lib'
-import { ShowCaseBox } from './helper'
import { storiesOf, action } from '@storybook/react'
import { Theme } from '../lib'
export default storiesOf('Icon', module)
.add('Generic Icon', () => (
- <ShowCaseBox>
- <Icon />
- </ShowCaseBox>
+ <Icon />
))
.add('Linguala', () => (
- <ShowCaseBox>
- <LingualaIcon />
- </ShowCaseBox>
+ <LingualaIcon />
))
diff --git a/src/stories/logo.js b/src/stories/logo.js
index a34895c..5cb03cf 100644
--- a/src/stories/logo.js
+++ b/src/stories/logo.js
@@ -1,46 +1,23 @@
import React from 'react'
import { Logo } from '../lib'
-import { ShowCaseBox } from './helper'
import { storiesOf, action } from '@storybook/react'
export default storiesOf('Linguala Logo', module)
.add('no size specified', () => (
- <ShowCaseBox>
- <Logo />
- </ShowCaseBox>
+ <Logo />
))
.add('size (width: 300px) specified', () => (
- <ShowCaseBox>
- <Logo style={{ width: '300px'}} />
- </ShowCaseBox>
+ <Logo style={{ width: '300px'}} />
))
.add('small', () => (
- <ShowCaseBox>
- <Logo small />
- </ShowCaseBox>
+ <Logo small />
))
.add('medium', () => (
- <ShowCaseBox>
- <Logo medium />
- </ShowCaseBox>
+ <Logo medium />
))
.add('big', () => (
- <ShowCaseBox>
- <Logo big />
- </ShowCaseBox>
+ <Logo big />
))
.add('huge', () => (
- <ShowCaseBox>
- <Logo huge />
- </ShowCaseBox>
- ))
- .add('black background', () => (
- <ShowCaseBox backgroundColor="black">
- <Logo />
- </ShowCaseBox>
- ))
- .add('with onClick handler', () => (
- <ShowCaseBox>
- <Logo onClick={action(() => {})} />
- </ShowCaseBox>
+ <Logo huge />
))
diff --git a/src/stories/pin.js b/src/stories/pin.js
index 7e5b48b..4ce3b72 100644
--- a/src/stories/pin.js
+++ b/src/stories/pin.js
@@ -1,6 +1,5 @@
import React from 'react';
-import { storiesOf, action, addDecorator } from '@storybook/react';
-import { ShowCaseBox } from './helper'
+import { storiesOf, action } from '@storybook/react';
import {
Pin,
Logo,
@@ -24,22 +23,8 @@ storiesOf('Linguala Pin', module)
<Pin huge />
))
.add('Logo + Pin', () => (
- <ShowCaseBox backgroundColor="white" style={{ height: '700px'}}>
- <div style={{ position: "absolute" }}>
- <Pin big>
- <Logo big />
- </Pin>
- </div>
- </ShowCaseBox>
- )
- )
- .add('Logo + Pin contrast background', () => (
- <ShowCaseBox backgroundColor="pink" style={{ height: '700px'}}>
- <div style={{ position: "absolute" }}>
- <Pin big>
- <Logo big />
- </Pin>
- </div>
- </ShowCaseBox>
+ <Pin big>
+ <Logo big />
+ </Pin>
)
)
--
GitLab