docs: improved base presentation

trutoo · Dec 24, 2019 · 5bd0800 · 5bd0800
1 parent 57c2f9d
commit 5bd0800
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/packages/docs/.storybook/config.jsx b/packages/docs/.storybook/config.jsx
@@ -14,6 +14,9 @@ const stories = require.context('../node_modules/@trutoo', true, /src.*\.stories
 addDecorator(withA11y);
 
 addParameters({
+  options: {
+    storySort: (a, b) => (a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true })),
+  },
   darkMode: {
     // Override the default dark theme
     dark: { ...themes.dark },
@@ -22,14 +25,17 @@ addParameters({
   },
 });
 
-addDecorator(storyFn => (
-  <div className="e-container">
-    <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: icons }}></div>
-    {storyFn()}
-  </div>
-));
-
-addDecorator(centered);
+addDecorator((storyFn, context) => {
+  return (
+    <div className="e-container e-elevation-1" style={{ marginTop: '2rem', paddingTop: '1rem', minHeight: '50vh' }}>
+      <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: icons }}></div>
+      <h1 style={{ fontSize: '1.5em' }}>{context.kind}</h1>
+      <strong style={{ color: 'var(--c_text_low)' }}>{context.name}</strong>
+      <hr />
+      {storyFn()}
+    </div>
+  );
+});
 
 // Update preview html with theme attribute on dark mode change
 const channel = addon.getChannel();

diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -25,8 +25,8 @@
     }
   ],
   "scripts": {
-    "docs": "start-storybook --quiet -p 2999",
-    "docs:build": "build-storybook -o dist --quiet",
+    "docs": "start-storybook --quiet --ci -p 2999",
+    "docs:build": "build-storybook --quiet --ci -o dist",
     "docs:deploy": "npm run docs:build && node .storybook/deploy.js"
   },
   "dependencies": {