Merge branch 'improvement/storybook-docs' into q/1.0

.storybook/main.js

@@ -1,10 +1,9 @@
 module.exports = {
-  stories: ['../stories/**/*.@(mdx|stories.@(ts|tsx))'],
+  stories: ['../stories/**/*.@(mdx|stories.@(ts|tsx))', '../src/**/**/*.@(mdx|stories.@(ts|tsx))'],
 
   addons: [
     '@storybook/addon-essentials',
     '@storybook/addon-storysource',
-    // '@storybook/addon-knobs',
     '@storybook/addon-mdx-gfm'
   ],
 
@@ -26,6 +25,7 @@ module.exports = {
   },
 
   docs: {
-    autodocs: true
+    autodocs: true,
+    defaultName: 'Stories',
   }
 };

.storybook/preview.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { CoreUiThemeProvider } from '../src/lib/next';
 import { brand, coreUIAvailableThemes} from '../src/lib/style/theme';
+import { Wrapper } from '../stories/common';
 
 
 export const globalTypes = {
@@ -19,10 +20,16 @@ export const globalTypes = {
 
 const withThemeProvider = (Story, context) => {
   const theme = coreUIAvailableThemes[context.globals.theme];
+  const {viewMode} = context
   return (
     <QueryClientProvider client={new QueryClient()}>
       <CoreUiThemeProvider theme={theme}>
-        <Story {...context} />
+        {/* Wrapper to make the stories take the full screen but not in docs */}
+        <div style={viewMode === 'story' ? {height: 100 + 'vh' }: null}>
+          <Wrapper>
+            <Story {...context} />
+          </Wrapper>
+        </div>
       </CoreUiThemeProvider>
     </QueryClientProvider>
   );
@@ -31,6 +38,11 @@ const withThemeProvider = (Story, context) => {
 export const decorators = [withThemeProvider];
 
 export const parameters = {
+  layout: 'fullscreen',
+  docs:{
+      toc : {headingSelector: 'h2,h3',
+      title: "Table of Contents"},
+  },
   controls:{
     //All props with color in name will automatically have a control 'color'
     //with colors presets to theme colors, possible to have the color name from theme in control
@@ -47,6 +59,7 @@ export const parameters = {
         'Guidelines',
         'Templates',
         'Components',
+        ['Navigation', 'Data Display', 'Inputs', 'Feedback', 'Progress & loading', 'Styling', 'Deprecated']
 
       ],
     },