Add Centered addon

ADDONS_SUPPORT.md

@@ -1,11 +1,11 @@
 ## Addon / Framework Support Table
 
-| |[React](app/react)|[React Native](app/react-native)|[Vue](app/vue)|[Angular](app/angular)| [Polymer](app/polymer)| [Mithril](app/mithril)| [Mithril](app/html)|
+| |[React](app/react)|[React Native](app/react-native)|[Vue](app/vue)|[Angular](app/angular)| [Polymer](app/polymer)| [Mithril](app/mithril)| [HTML](app/html)|
 | ----------- |:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|
 |[a11y](addons/a11y)              |+| | | | | | |
 |[actions](addons/actions)        |+|+|+|+|+|+|+|
 |[background](addons/background)  |+| | | | |+| |
-|[centered](addons/centered)      |+| |+| | |+| |
+|[centered](addons/centered)      |+| |+| | |+|+|
 |[events](addons/events)          |+| | | | | | |
 |[graphql](addons/graphql)        |+| | | | | | |
 |[info](addons/info)              |+| | | | | | |

addons/centered/html.js

@@ -0,0 +1 @@
+module.exports = require('./dist/html');

addons/centered/src/html.js

@@ -0,0 +1,39 @@
+import { document, Node } from 'global';
+
+const style = {
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  overflow: 'auto',
+};
+
+const innerStyle = {
+  margin: 'auto',
+};
+
+export default function(storyFn) {
+  const inner = document.createElement('div');
+  Object.assign(inner.style, innerStyle);
+
+  const wrapper = document.createElement('div');
+  Object.assign(wrapper.style, style);
+  wrapper.appendChild(inner);
+
+  const component = storyFn();
+
+  if (typeof component === 'string') {
+    inner.innerHTML = component;
+  } else if (component instanceof Node) {
+    inner.innerHTML = '';
+    inner.appendChild(component);
+  } else {
+    return component;
+  }
+
+  return wrapper;
+}

examples/html-kitchen-sink/package.json

@@ -14,6 +14,7 @@
   "dependencies": {},
   "devDependencies": {
     "@storybook/addon-actions": "^4.0.0-alpha.3",
+    "@storybook/addon-centered": "^4.0.0-alpha.3",
     "@storybook/addon-knobs": "^4.0.0-alpha.3",
     "@storybook/addon-links": "^4.0.0-alpha.3",
     "@storybook/addon-options": "^4.0.0-alpha.3",

examples/html-kitchen-sink/stories/addon-centered.stories.js

@@ -0,0 +1,6 @@
+import { storiesOf } from '@storybook/html';
+import centered from '@storybook/addon-centered/html';
+
+storiesOf('Addons|Centered', module)
+  .addDecorator(centered)
+  .add('button in center', () => '<button>I am a Button !</button>');