refactor the styling on the storybook

stipsan · Aug 8, 2016 · 6b56623 · 6b56623
1 parent d26044d
commit 6b56623
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 31 deletions.
diff --git a/.storybook/Logo.js b/.storybook/Logo.js
@@ -3,6 +3,9 @@ import src from './static/logo.svg'
 const linkStyle = Object.freeze({
   height: '40px',
   overflow: 'hidden',
+  paddingRight: 0,
+  paddingLeft: 0,
+  marginLeft: '-15px',
 })
 
 const logoStyle = Object.freeze({
@@ -13,7 +16,7 @@ const logoStyle = Object.freeze({
 })
 
 const Logo = () => <a className="uk-navbar-brand" style={linkStyle}>
-  <img src={src} style={logoStyle} title="UIkit React Logo" role="presentation" />
+  <img role="presentation" src={src} style={logoStyle} title="UIkit React Logo" />
 </a>
 
 export default Logo
diff --git a/.storybook/config.js b/.storybook/config.js
@@ -7,31 +7,35 @@ import Logo from './Logo'
 
 setAddon(infoAddon)
 
-addDecorator((fn, { kind, story }) => {
-  return (
-    <div>
-      <nav className="tm-navbar uk-navbar">
-        <Logo />
-        <ul className="uk-navbar-nav">
-          <li className="uk-active">
-            <a className="uk-navbar-nav-subtitle" href="#/getting-started">
-              {kind}
-              <div>{story}</div>
-            </a>
-          </li>
-        </ul>
-        <div className="uk-navbar-flip">
-          <ul className="uk-navbar-nav">
-            <li><a href="https://github.com/stipsan/uikit-react">GitHub</a></li>
-          </ul>
-        </div>
-      </nav>
-      <div className="uk-margin-top uk-margin-left uk-margin-right uk-margin-bototm">
-        {fn()}
-      </div>
+addDecorator((fn, { kind, story }) => <div>
+  <nav className="tm-navbar uk-navbar">
+    <Logo />
+    <ul className="uk-navbar-nav">
+      <li className="uk-active">
+        <a className="uk-navbar-nav-subtitle" href="#/getting-started">
+          {kind}
+          <div>{story}</div>
+        </a>
+      </li>
+    </ul>
+    <div className="uk-navbar-flip">
+      <ul className="uk-navbar-nav">
+        <li>
+          <a
+            href="https://github.com/stipsan/uikit-react"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            GitHub
+          </a>
+        </li>
+      </ul>
     </div>
-  )
-})
+  </nav>
+  <div className="uk-margin-top uk-margin-left uk-margin-right uk-margin-bottom">
+    {fn()}
+  </div>
+</div>)
 
 function loadStories() {
   require('../src/stories/button')

diff --git a/.storybook/uikit.scss b/.storybook/uikit.scss
@@ -7,3 +7,12 @@ $icon-font-path: "~uikit/dist/fonts";
 @import "~uikit/dist/scss/components/form-advanced.scss";
 
 @import "~uikit-react/scss/Select.scss";
+
+/* Storybook specific */
+.tm-navbar {
+  background: #fbfdfe;
+  border-bottom: 1px solid #ececec;
+}
+.tm-navbar > .uk-navbar-nav > li.uk-active > a.uk-navbar-nav-subtitle {
+  background: transparent;
+}
diff --git a/src/stories/Select.js b/src/stories/Select.js
@@ -43,7 +43,7 @@ storiesOf('Select', module)
       This is the basic usage examples
     `,
     () => (
-      <div className="uk-grid">
+      <div className="uk-grid uk-margin-bottom">
         <Form>
           <Select
             allowCreate
@@ -67,5 +67,5 @@ storiesOf('Select', module)
         </Form>
       </div>
   ),
-  { inline: true, propTables: [/* Value, Option, */Select] }
+  { header: false, inline: true, propTables: [/* Value, Option, */Select] }
 )
diff --git a/src/stories/button.js b/src/stories/button.js
@@ -11,13 +11,13 @@ storiesOf('Button', module)
       This is the basic usage with the button with providing a label to show the text.
     `,
     () => (
-      <div>
+      <div className="uk-margin-bottom">
         <Button primary>Primary</Button> &nbsp;
         <Button success>Success</Button> &nbsp;
         <Button danger>Danger</Button> &nbsp;
         <Button link>Link</Button> &nbsp;
         <Button type="submit">Submit</Button>
       </div>
   ),
-  { inline: true, propTables: [Button] }
+  { header: false, inline: true, propTables: [Button] }
 )
diff --git a/src/stories/dropdown.js b/src/stories/dropdown.js
@@ -2,6 +2,9 @@ import { storiesOf } from '@kadira/storybook'
 
 import Dropdown from '../Dropdown'
 
+// This is to work around: https://github.com/kadirahq/react-storybook-addon-info/issues/26#issuecomment-229029177
+Dropdown.displayName = 'Dropdown'
+
 const Menu = () => (
   <div className="uk-dropdown uk-dropdown-bottom">
     <ul className="uk-nav uk-nav-dropdown">
@@ -23,7 +26,7 @@ storiesOf('Dropdown', module)
       This is the basic usage showing hover, and click mode.
     `,
     () => (
-      <div className="">
+      <div className="uk-margin-bottom">
         <Dropdown>
           <button className="uk-button">
             Hover <i className="uk-icon-caret-down" />
@@ -39,5 +42,5 @@ storiesOf('Dropdown', module)
         </Dropdown>
       </div>
   ),
-  { inline: true, propTables: [Dropdown] }
+  { header: false, inline: true, propTables: [Dropdown] }
 )