Merge pull request #2275 from Spy-Seth/qa/extract-guidelines

Refactor addon-action to use glamorous

addons/actions/package.json

@@ -20,7 +20,9 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
+    "@storybook/components": "^3.4.0-alpha.8",
     "deep-equal": "^1.0.1",
+    "glamorous": "^4.11.6",
     "global": "^4.3.2",
     "make-error": "^1.3.4",
     "prop-types": "^15.6.0",

addons/actions/src/components/ActionLogger/index.js

@@ -1,38 +1,36 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Inspector from 'react-inspector';
-import style from './style';
+import { Actions, Action, Button, Wrapper, InspectorContainer, Countwrap, Counter } from './style';
 
 class ActionLogger extends Component {
   getActionData() {
     return this.props.actions.map(action => this.renderAction(action));
   }
 
   renderAction(action) {
-    const counter = <div style={style.counter}>{action.count}</div>;
+    const counter = <Counter>{action.count}</Counter>;
     return (
-      <div key={action.id} style={style.action}>
-        <div style={style.countwrap}>{action.count > 1 && counter}</div>
-        <div style={style.inspector}>
+      <Action key={action.id}>
+        <Countwrap>{action.count > 1 && counter}</Countwrap>
+        <InspectorContainer>
           <Inspector
             sortObjectKeys
             showNonenumerable={false}
             name={action.data.name}
             data={action.data.args || action.data}
           />
-        </div>
-      </div>
+        </InspectorContainer>
+      </Action>
     );
   }
 
   render() {
     return (
-      <div style={style.wrapper}>
-        <pre style={style.actions}>{this.getActionData()}</pre>
-        <button style={style.button} onClick={this.props.onClear}>
-          CLEAR
-        </button>
-      </div>
+      <Wrapper>
+        <Actions>{this.getActionData()}</Actions>
+        <Button onClick={this.props.onClear}>Clear</Button>
+      </Wrapper>
     );
   }
 }

addons/actions/src/components/ActionLogger/style.js

@@ -1,49 +1,53 @@
-export default {
-  wrapper: {
-    flex: 1,
-    display: 'flex',
-    position: 'relative',
-  },
-  actions: {
-    flex: 1,
-    margin: 0,
-    padding: '8px 2px 20px 0',
-    overflowY: 'auto',
-    color: '#666',
-  },
-  action: {
-    display: 'flex',
-    padding: '3px 3px 3px 0',
-    borderLeft: '5px solid white',
-    borderBottom: '1px solid #fafafa',
-    transition: 'all 0.1s',
-    alignItems: 'start',
-  },
-  countwrap: {
-    paddingBottom: 2,
-  },
-  counter: {
-    margin: '0 5px 0 5px',
-    backgroundColor: '#777777',
-    color: '#ffffff',
-    padding: '1px 5px',
-    borderRadius: '20px',
-  },
-  inspector: {
-    flex: 1,
-    padding: '0 0 0 5px',
-  },
-  button: {
-    position: 'absolute',
-    bottom: 0,
-    right: 0,
-    border: 'none',
-    borderTop: 'solid 1px rgba(0, 0, 0, 0.2)',
-    borderLeft: 'solid 1px rgba(0, 0, 0, 0.2)',
-    background: 'rgba(255, 255, 255, 0.5)',
-    padding: '5px 10px',
-    borderRadius: '4px 0 0 0',
-    color: 'rgba(0, 0, 0, 0.5)',
-    outline: 'none',
-  },
-};
+import glamorous from 'glamorous';
+import { Button as BaseButton } from '@storybook/components';
+
+export const Actions = glamorous.pre({
+  flex: 1,
+  margin: 0,
+  padding: '8px 2px 20px 0',
+  overflowY: 'auto',
+  color: '#666',
+});
+
+export const Action = glamorous.div({
+  display: 'flex',
+  padding: '3px 3px 3px 0',
+  borderLeft: '5px solid white',
+  borderBottom: '1px solid #fafafa',
+  transition: 'all 0.1s',
+  alignItems: 'start',
+});
+
+export const Button = glamorous(BaseButton)({
+  position: 'absolute',
+  bottom: 0,
+  right: 0,
+  borderRadius: '4px 0 0 0',
+  textTransform: 'uppercase',
+  letterSpacing: 1,
+  paddingTop: 5,
+  paddingBootom: 5,
+});
+
+export const Counter = glamorous.div({
+  margin: '0 5px 0 5px',
+  backgroundColor: '#777777',
+  color: '#ffffff',
+  padding: '1px 5px',
+  borderRadius: '20px',
+});
+
+export const Countwrap = glamorous.div({
+  paddingBottom: 2,
+});
+
+export const InspectorContainer = glamorous.div({
+  flex: 1,
+  padding: '0 0 0 5px',
+});
+
+export const Wrapper = glamorous.div({
+  flex: 1,
+  display: 'flex',
+  position: 'relative',
+});

lib/components/src/form/__snapshots__/button.stories.storyshot

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Components|Form/Button with onclick 1`] = `
+<button
+  class="css-1ibnlbj"
+  type="button"
+>
+  Submit
+</button>
+`;

lib/components/src/form/button.js

@@ -0,0 +1,28 @@
+import glamorous from 'glamorous';
+import { baseFonts } from '../theme';
+
+export default glamorous
+  .button({
+    ...baseFonts,
+    border: 'none',
+    boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.2)',
+    backgroundColor: 'rgb(255, 255, 255)',
+    padding: '4px 10px 7px',
+    borderRadius: 4,
+    cursor: 'pointer',
+    transition: 'box-shadow 0.15s ease-out',
+    ':hover': {
+      transition: 'background-color 0.15s ease-out',
+      boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.3)',
+    },
+    ':focus': {
+      transition: 'background-color 0.15s ease-out',
+      outline: 'none',
+      boxShadow: '0 0 0 2px rgba(0, 0, 0, 0.3)',
+    },
+    ':active': {
+      transition: 'none',
+      backgroundColor: 'rgb(247, 247, 247)',
+    },
+  })
+  .withProps({ type: 'button' });

lib/components/src/form/button.stories.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, text } from '@storybook/addon-knobs';
+
+import Button from './button';
+
+storiesOf('Components|Form/Button', module)
+  .addDecorator(withKnobs)
+  .add('with onclick', () => <Button onClick={action('click')}>{text('Text', 'Submit')}</Button>);

lib/components/src/index.js

@@ -5,3 +5,5 @@ export { default as MenuLink } from './navigation/menu_link';
 export { default as HighlightButton } from './highlight_button';
 export { default as Table } from './table/table';
 export { td as Td, th as Th } from './table/cell';
+
+export { default as Button } from './form/button';

lib/components/src/navigation/__snapshots__/menu_link.stories.storyshot

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots components/MenuLink active 1`] = `
+exports[`Storyshots Components|Navigation/MenuLink active 1`] = `
 <a
   class="css-1enjukp"
   href="http://google.com"
@@ -9,7 +9,7 @@ exports[`Storyshots components/MenuLink active 1`] = `
 </a>
 `;
 
-exports[`Storyshots components/MenuLink default 1`] = `
+exports[`Storyshots Components|Navigation/MenuLink default 1`] = `
 <a
   class="css-1b2u8sb"
   href="http://google.com"
@@ -18,7 +18,7 @@ exports[`Storyshots components/MenuLink default 1`] = `
 </a>
 `;
 
-exports[`Storyshots components/MenuLink with knobs 1`] = `
+exports[`Storyshots Components|Navigation/MenuLink with knobs 1`] = `
 <div
   class="css-t9df35"
 >

lib/components/src/navigation/__snapshots__/routed_link.stories.storyshot

@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots components/RoutedLink w/ href 1`] = `
+exports[`Storyshots Components|Navigation/RoutedLink w/ href 1`] = `
 <a
   href="http://google.com"
 >
   Link
 </a>
 `;
 
-exports[`Storyshots components/RoutedLink w/ onClick 1`] = `
+exports[`Storyshots Components|Navigation/RoutedLink w/ onClick 1`] = `
 <a
   href="/"
 >

lib/components/src/navigation/menu_link.stories.js

@@ -6,7 +6,7 @@ import { Div } from 'glamorous';
 
 import MenuLink from './menu_link';
 
-storiesOf('components/MenuLink', module)
+storiesOf('Components|Navigation/MenuLink', module)
   .add('default', () => <MenuLink href="http://google.com">Link</MenuLink>)
   .add('active', () => (
     <MenuLink active href="http://google.com">

lib/components/src/navigation/routed_link.stories.js

@@ -5,7 +5,7 @@ import { action } from '@storybook/addon-actions';
 import RoutedLink from './routed_link';
 
 const onClick = action('onClick');
-storiesOf('components/RoutedLink', module)
+storiesOf('Components|Navigation/RoutedLink', module)
   .add('w/ onClick', () => (
     <RoutedLink href="/" onClick={onClick}>
       Try clicking with different mouse buttons and modifier keys (shift/ctrl/alt/cmd)

lib/ui/src/modules/ui/components/addon_panel/__snapshots__/index.stories.storyshot

@@ -5,7 +5,7 @@ exports[`Storyshots ui/AddonPanel default 1`] = `
   style="height:100px;display:flex"
 >
   <div
-    style="flex:1 1 auto;display:flex;flex-direction:column;background:white;border-radius:4px;border:solid 1px rgb(236, 236, 236);margin-top:5px;width:100%"
+    style="flex:1 1 auto;display:flex;flex-direction:column;background:white;border-radius:4px;border:solid 1px rgb(236, 236, 236);margin-top:5px;overflow:hidden;width:100%"
   >
     <div
       role="tablist"

lib/ui/src/modules/ui/components/addon_panel/style.js

@@ -20,6 +20,7 @@ export default {
     borderRadius: 4,
     border: 'solid 1px rgb(236, 236, 236)',
     marginTop: 5,
+    overflow: 'hidden',
     width: '100%',
   },