From 209621985535c7a6d7478c149d6007b4b5c8c1fa Mon Sep 17 00:00:00 2001 From: misund Date: Mon, 26 Nov 2018 21:53:34 +0100 Subject: [PATCH 001/120] fix(addon-info): Display description when story name matches component --- addons/info/src/components/Story.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js index d5dfa4013cab..6e0fea751ab5 100644 --- a/addons/info/src/components/Story.js +++ b/addons/info/src/components/Story.js @@ -249,12 +249,16 @@ class Story extends Component { } _getComponentDescription() { - const { context } = this.props; + const { + context: { kind, story }, + } = this.props; let retDiv = null; + const validMatches = [kind, story]; + if (Object.keys(STORYBOOK_REACT_CLASSES).length) { Object.keys(STORYBOOK_REACT_CLASSES).forEach(key => { - if (STORYBOOK_REACT_CLASSES[key].name === context.kind) { + if (validMatches.includes(STORYBOOK_REACT_CLASSES[key].name)) { retDiv =
{STORYBOOK_REACT_CLASSES[key].docgenInfo.description}
; } }); From 81ca654291274e4ac912a035abbf9b171ddd51ef Mon Sep 17 00:00:00 2001 From: misund Date: Mon, 26 Nov 2018 21:54:11 +0100 Subject: [PATCH 002/120] test(addon-info): Add test for when story name matches component --- .../info/src/__snapshots__/index.test.js.snap | 2452 +++++++++++++++++ addons/info/src/index.test.js | 17 +- 2 files changed, 2468 insertions(+), 1 deletion(-) diff --git a/addons/info/src/__snapshots__/index.test.js.snap b/addons/info/src/__snapshots__/index.test.js.snap index 3bff0c35ba1e..fc951c17de01 100644 --- a/addons/info/src/__snapshots__/index.test.js.snap +++ b/addons/info/src/__snapshots__/index.test.js.snap @@ -3954,3 +3954,2455 @@ exports[`addon Info should render component description 1`] = ` `; + +exports[`addon Info should render component description if story kind matches component 1`] = ` +.emotion-4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + font-size: .88em; + font-family: Menlo,Monaco,"Courier New",monospace; + background-color: #fafafa; + padding: .5rem; + line-height: 1.5; + overflow-x: scroll; +} + +.emotion-2 { + overflow: hidden; + border: 1px solid #eee; + border-radius: 3px; + background-color: #FFFFFF; + cursor: pointer; + font-size: 13px; + padding: 3px 10px; + -webkit-align-self: flex-start; + -ms-flex-item-align: start; + align-self: flex-start; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.emotion-2:hover { + background-color: #f4f7fa; + border-color: #ddd; +} + +.emotion-2:active { + background-color: #e9ecef; + border-color: #ccc; +} + +.emotion-0 { + -webkit-transition: -webkit-transform .2s ease; + -webkit-transition: transform .2s ease; + transition: transform .2s ease; + height: 16px; + -webkit-transform: translateY(-100%) translateY(-6px); + -ms-transform: translateY(-100%) translateY(-6px); + transform: translateY(-100%) translateY(-6px); +} + + + +
+
+
+
+

+ TestComponent +

+

+ Basic test +

+
+
+
+
+
+ It's a + Basic test + story: + +
+

+ function func(x) { + return x + 1; + } +

+

+ [object Object] +

+

+ 1,2,3 +

+

+ 7 +

+
+ seven +
+
+ true +
+

+ undefined +

+ + test + + + storiesOf + +
    +
  • + 1 +
    • +
  • + 2 +
    • +
+
+ +
+
+
+
+
+ Awesome test component description +
+
+

+ Story Source +

+ 
+              
+                
+                  
+                    

+                      
+                            It's a 
+                            Basic test
+                             story:
+                            
+                          

+                        }
+                      >
+                        

+                          

+                            
+                              <
+                              div
+                            
+                            
+                                  It's a 
+                                  Basic test
+                                   story:
+                                  
+                                

+                              }
+                              singleLine={false}
+                            >
+                              
+                            
+                            
+                              >
+                            
+                          

+                          
+                            

+                              
+                                It's a 
+                              
+                            

+                          
+                          
+                            

+                              
+                                Basic test
+                              
+                            

+                          
+                          
+                            

+                              
+                                 story:
+                              
+                            

+                          
+                          
+                            }
+                          >
+                            

+                              
+                                <
+                                TestComponent
+                              
+                              
+                                }
+                                singleLine={true}
+                              >
+                                
+                                  
+                                    
+                                      

+                                        
+                                    
+                                    
+                                      func
+                                    
+                                    
+                                      =
+                                      
+                                        {
+                                        
+                                          
+                                            func
+                                          
+                                        
+                                        }
+                                      
+                                    
+                                  
+                                  
+                                    
+                                      

+                                        
+                                    
+                                    
+                                      obj
+                                    
+                                    
+                                      =
+                                      
+                                        {
+                                        
+                                          
+                                            
+                                              {
+                                              
+                                                
+                                                  a
+                                                
+                                              
+                                              : 
+                                              
+                                                
+                                                  'a'
+                                                
+                                              
+                                              ,
+                                              
+                                                
+                                                  b
+                                                
+                                              
+                                              : 
+                                              
+                                                
+                                                  'b'
+                                                
+                                              
+                                              }
+                                            
+                                          
+                                        
+                                        }
+                                      
+                                    
+                                  
+                                  
+                                    
+                                      

+                                        
+                                    
+                                    
+                                      array
+                                    
+                                    
+                                      =
+                                      
+                                        {
+                                        
+                                          
+                                            
+                                              [
+                                              
+                                                
+                                                  
+                                                    1
+                                                  
+                                                
+                                              
+                                              ,
+                                              
+                                                
+                                                  
+                                                    2
+                                                  
+                                                
+                                              
+                                              ,
+                                              
+                                                
+                                                  
+                                                    3
+                                                  
+                                                
+                                              
+                                              ]
+                                            
+                                          
+                                        
+                                        }
+                                      
+                                    
+                                  
+                                  
+                                    
+                                      

+                                        
+                                    
+                                    
+                                      number
+                                    
+                                    
+                                      =
+                                      
+                                        {
+                                        
+                                          
+                                            7
+                                          
+                                        
+                                        }
+                                      
+                                    
+                                  
+                                  
+                                    
+                                      

+                                        
+                                    
+                                    
+                                      string
+                                    
+                                    
+                                      =
+                                      
+                                        "
+                                        
+                                          
+                                            seven
+                                          
+                                        
+                                        "
+                                      
+                                    
+                                  
+                                  
+                                    
+                                      

+                                        
+                                    
+                                    
+                                      bool
+                                    
+                                    

+                                  
+                                
+                              
+                              
+                                />
+                              
+                            

+                          
+                          

+                            
+                              </
+                              div
+                              >
+                            
+                          

+
+ +
+ + + + + + + + + + + +
+
+ + + + +`; + +exports[`addon Info should render component description if story name matches component 1`] = ` +.emotion-4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + font-size: .88em; + font-family: Menlo,Monaco,"Courier New",monospace; + background-color: #fafafa; + padding: .5rem; + line-height: 1.5; + overflow-x: scroll; +} + +.emotion-2 { + overflow: hidden; + border: 1px solid #eee; + border-radius: 3px; + background-color: #FFFFFF; + cursor: pointer; + font-size: 13px; + padding: 3px 10px; + -webkit-align-self: flex-start; + -ms-flex-item-align: start; + align-self: flex-start; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.emotion-2:hover { + background-color: #f4f7fa; + border-color: #ddd; +} + +.emotion-2:active { + background-color: #e9ecef; + border-color: #ccc; +} + +.emotion-0 { + -webkit-transition: -webkit-transform .2s ease; + -webkit-transition: transform .2s ease; + transition: transform .2s ease; + height: 16px; + -webkit-transform: translateY(-100%) translateY(-6px); + -ms-transform: translateY(-100%) translateY(-6px); + transform: translateY(-100%) translateY(-6px); +} + + + +
+
+
+
+

+ Test Components +

+

+ TestComponent +

+
+
+
+
+
+ It's a + TestComponent + story: + +
+

+ function func(x) { + return x + 1; + } +

+

+ [object Object] +

+

+ 1,2,3 +

+

+ 7 +

+
+ seven +
+
+ true +
+

+ undefined +

+ + test + + + storiesOf + +
    +
  • + 1 +
    • +
  • + 2 +
    • +
+
+ +
+
+
+
+
+ Awesome test component description +
+
+

+ Story Source +

+ 
+              
+                
+                  
+                    

+                      
+                            It's a 
+                            TestComponent
+                             story:
+                            
+                          

+                        }
+                      >
+                        

+                          

+                            
+                              <
+                              div
+                            
+                            
+                                  It's a 
+                                  TestComponent
+                                   story:
+                                  
+                                

+                              }
+                              singleLine={false}
+                            >
+                              
+                            
+                            
+                              >
+                            
+                          

+                          
+                            

+                              
+                                It's a 
+                              
+                            

+                          
+                          
+                            

+                              
+                                TestComponent
+                              
+                            

+                          
+                          
+                            

+                              
+                                 story:
+                              
+                            

+                          
+                          
+                            }
+                          >
+                            

+                              
+                                <
+                                TestComponent
+                              
+                              
+                                }
+                                singleLine={true}
+                              >
+                                
+                                  
+                                    
+                                      

+                                        
+                                    
+                                    
+                                      func
+                                    
+                                    
+                                      =
+                                      
+                                        {
+                                        
+                                          
+                                            func
+                                          
+                                        
+                                        }
+                                      
+                                    
+                                  
+                                  
+                                    
+                                      

+                                        
+                                    
+                                    
+                                      obj
+                                    
+                                    
+                                      =
+                                      
+                                        {
+                                        
+                                          
+                                            
+                                              {
+                                              
+                                                
+                                                  a
+                                                
+                                              
+                                              : 
+                                              
+                                                
+                                                  'a'
+                                                
+                                              
+                                              ,
+                                              
+                                                
+                                                  b
+                                                
+                                              
+                                              : 
+                                              
+                                                
+                                                  'b'
+                                                
+                                              
+                                              }
+                                            
+                                          
+                                        
+                                        }
+                                      
+                                    
+                                  
+                                  
+                                    
+                                      

+                                        
+                                    
+                                    
+                                      array
+                                    
+                                    
+                                      =
+                                      
+                                        {
+                                        
+                                          
+                                            
+                                              [
+                                              
+                                                
+                                                  
+                                                    1
+                                                  
+                                                
+                                              
+                                              ,
+                                              
+                                                
+                                                  
+                                                    2
+                                                  
+                                                
+                                              
+                                              ,
+                                              
+                                                
+                                                  
+                                                    3
+                                                  
+                                                
+                                              
+                                              ]
+                                            
+                                          
+                                        
+                                        }
+                                      
+                                    
+                                  
+                                  
+                                    
+                                      

+                                        
+                                    
+                                    
+                                      number
+                                    
+                                    
+                                      =
+                                      
+                                        {
+                                        
+                                          
+                                            7
+                                          
+                                        
+                                        }
+                                      
+                                    
+                                  
+                                  
+                                    
+                                      

+                                        
+                                    
+                                    
+                                      string
+                                    
+                                    
+                                      =
+                                      
+                                        "
+                                        
+                                          
+                                            seven
+                                          
+                                        
+                                        "
+                                      
+                                    
+                                  
+                                  
+                                    
+                                      

+                                        
+                                    
+                                    
+                                      bool
+                                    
+                                    

+                                  
+                                
+                              
+                              
+                                />
+                              
+                            

+                          
+                          

+                            
+                              </
+                              div
+                              >
+                            
+                          

+
+ +
+ + + + + + + + + + + +
+
+ + + + +`; diff --git a/addons/info/src/index.test.js b/addons/info/src/index.test.js index 44b60bb69a20..309ce548458d 100644 --- a/addons/info/src/index.test.js +++ b/addons/info/src/index.test.js @@ -74,7 +74,7 @@ describe('addon Info', () => { mount(); }); - it('should render component description', () => { + it('should render component description if story kind matches component', () => { const previousReactClassesValue = global.STORYBOOK_REACT_CLASSES[reactClassPath]; Object.assign(global.STORYBOOK_REACT_CLASSES, { [reactClassPath]: storybookReactClassMock }); @@ -88,4 +88,19 @@ describe('addon Info', () => { Object.assign(global.STORYBOOK_REACT_CLASSES, { [reactClassPath]: previousReactClassesValue }); }); + + it('should render component description if story name matches component', () => { + const previousReactClassesValue = global.STORYBOOK_REACT_CLASSES[reactClassPath]; + Object.assign(global.STORYBOOK_REACT_CLASSES, { [reactClassPath]: storybookReactClassMock }); + + const Info = () => + withInfo({ inline: true, propTables: false })(storyFn, { + kind: 'Test Components', + story: 'TestComponent', + }); + + expect(mount()).toMatchSnapshot(); + + Object.assign(global.STORYBOOK_REACT_CLASSES, { [reactClassPath]: previousReactClassesValue }); + }); }); From cb15153810e885ce90b0ba9782f8ef57fef4d627 Mon Sep 17 00:00:00 2001 From: igor-dv Date: Wed, 5 Dec 2018 12:32:54 +0200 Subject: [PATCH 003/120] Remove "defaultConfigName" prop and use "defaultConfig" as a single config to be extended --- app/angular/src/server/options.js | 1 - app/ember/src/server/options.js | 1 - app/react/src/server/options.js | 1 - .../ember-cli/.storybook/webpack.config.js | 20 +++++++------ .../.storybook/webpack.config.js | 20 +++++++------ .../marko-cli/.storybook/webpack.config.js | 20 +++++++------ .../.storybook/webpack.config.js | 20 +++++++------ .../polymer-cli/.storybook/webpack.config.js | 24 +++++++-------- .../.storybook/webpack.config.js | 29 ++++++++++--------- .../.storybook/webpack.config.js | 20 +++++++------ .../.storybook/webpack.config.js | 20 +++++++------ .../server/preview/custom-webpack-preset.js | 21 ++++---------- 12 files changed, 99 insertions(+), 98 deletions(-) diff --git a/app/angular/src/server/options.js b/app/angular/src/server/options.js index 189c31521e3e..6ddc4098b20d 100644 --- a/app/angular/src/server/options.js +++ b/app/angular/src/server/options.js @@ -2,7 +2,6 @@ import packageJson from '../../package.json'; export default { packageJson, - defaultConfigName: 'angular-cli', frameworkPresets: [ require.resolve('./framework-preset-angular.js'), require.resolve('./framework-preset-angular-cli.js'), diff --git a/app/ember/src/server/options.js b/app/ember/src/server/options.js index 21bd042f0099..919e0202bca0 100644 --- a/app/ember/src/server/options.js +++ b/app/ember/src/server/options.js @@ -2,6 +2,5 @@ import packageJson from '../../package.json'; export default { packageJson, - defaultConfigName: 'ember-cli', frameworkPresets: [require.resolve('./framework-preset-babel-ember.js')], }; diff --git a/app/react/src/server/options.js b/app/react/src/server/options.js index a14cc3f4a67b..dd787ee58788 100644 --- a/app/react/src/server/options.js +++ b/app/react/src/server/options.js @@ -2,7 +2,6 @@ import packageJson from '../../package.json'; export default { packageJson, - defaultConfigName: 'create-react-app', frameworkPresets: [ require.resolve('./framework-preset-react.js'), require.resolve('./framework-preset-cra.js'), diff --git a/examples/ember-cli/.storybook/webpack.config.js b/examples/ember-cli/.storybook/webpack.config.js index 74dbd2156cc9..3df5f03cc6a0 100644 --- a/examples/ember-cli/.storybook/webpack.config.js +++ b/examples/ember-cli/.storybook/webpack.config.js @@ -1,12 +1,14 @@ const path = require('path'); -module.exports = (storybookBaseConfig, configType, defaultConfig) => { - defaultConfig.module.rules.push({ - test: [/\.stories\.js$/, /index\.js$/], - loaders: [require.resolve('@storybook/addon-storysource/loader')], - include: [path.resolve(__dirname, '../')], - enforce: 'pre', - }); - - return defaultConfig; +module.exports = { + module: { + rules: [ + { + test: [/\.stories\.js$/, /index\.js$/], + loaders: [require.resolve('@storybook/addon-storysource/loader')], + include: [path.resolve(__dirname, '../')], + enforce: 'pre', + }, + ], + }, }; diff --git a/examples/html-kitchen-sink/.storybook/webpack.config.js b/examples/html-kitchen-sink/.storybook/webpack.config.js index 5d9aaf4e1dad..358db1cf6eed 100644 --- a/examples/html-kitchen-sink/.storybook/webpack.config.js +++ b/examples/html-kitchen-sink/.storybook/webpack.config.js @@ -1,12 +1,14 @@ const path = require('path'); -module.exports = (storybookBaseConfig, configType, defaultConfig) => { - defaultConfig.module.rules.push({ - test: [/\.stories\.js$/, /index\.js$/], - loaders: [require.resolve('@storybook/addon-storysource/loader')], - include: [path.resolve(__dirname, '../stories')], - enforce: 'pre', - }); - - return defaultConfig; +module.exports = { + module: { + rules: [ + { + test: [/\.stories\.js$/, /index\.js$/], + loaders: [require.resolve('@storybook/addon-storysource/loader')], + include: [path.resolve(__dirname, '../stories')], + enforce: 'pre', + }, + ], + }, }; diff --git a/examples/marko-cli/.storybook/webpack.config.js b/examples/marko-cli/.storybook/webpack.config.js index 692ad69caccc..d10037b0fd01 100644 --- a/examples/marko-cli/.storybook/webpack.config.js +++ b/examples/marko-cli/.storybook/webpack.config.js @@ -1,12 +1,14 @@ const path = require('path'); -module.exports = (storybookBaseConfig, configType, defaultConfig) => { - defaultConfig.module.rules.push({ - test: [/\.stories\.js$/], - loaders: [require.resolve('@storybook/addon-storysource/loader')], - include: [path.resolve(__dirname, '../src')], - enforce: 'pre', - }); - - return defaultConfig; +module.exports = { + module: { + rules: [ + { + test: [/\.stories\.js$/], + loaders: [require.resolve('@storybook/addon-storysource/loader')], + include: [path.resolve(__dirname, '../src')], + enforce: 'pre', + }, + ], + }, }; diff --git a/examples/mithril-kitchen-sink/.storybook/webpack.config.js b/examples/mithril-kitchen-sink/.storybook/webpack.config.js index 692ad69caccc..d10037b0fd01 100644 --- a/examples/mithril-kitchen-sink/.storybook/webpack.config.js +++ b/examples/mithril-kitchen-sink/.storybook/webpack.config.js @@ -1,12 +1,14 @@ const path = require('path'); -module.exports = (storybookBaseConfig, configType, defaultConfig) => { - defaultConfig.module.rules.push({ - test: [/\.stories\.js$/], - loaders: [require.resolve('@storybook/addon-storysource/loader')], - include: [path.resolve(__dirname, '../src')], - enforce: 'pre', - }); - - return defaultConfig; +module.exports = { + module: { + rules: [ + { + test: [/\.stories\.js$/], + loaders: [require.resolve('@storybook/addon-storysource/loader')], + include: [path.resolve(__dirname, '../src')], + enforce: 'pre', + }, + ], + }, }; diff --git a/examples/polymer-cli/.storybook/webpack.config.js b/examples/polymer-cli/.storybook/webpack.config.js index e6be81a0e93b..e1ed08fcf618 100644 --- a/examples/polymer-cli/.storybook/webpack.config.js +++ b/examples/polymer-cli/.storybook/webpack.config.js @@ -1,16 +1,16 @@ const path = require('path'); const webpack = require('webpack'); -module.exports = (storybookBaseConfig, configType, defaultConfig) => { - defaultConfig.module.rules.push({ - test: [/\.stories\.js$/, /index\.js$/], - loaders: [require.resolve('@storybook/addon-storysource/loader')], - include: [path.resolve(__dirname, '../src')], - enforce: 'pre', - }); - - // TEMP fix: https://github.com/plotly/plotly.js/issues/2466#issuecomment-372924684 - defaultConfig.plugins.push(new webpack.IgnorePlugin(/vertx/)); - - return defaultConfig; +module.exports = { + module: { + rules: [ + { + test: [/\.stories\.js$/, /index\.js$/], + loaders: [require.resolve('@storybook/addon-storysource/loader')], + include: [path.resolve(__dirname, '../src')], + enforce: 'pre', + }, + ], + }, + plugins: [new webpack.IgnorePlugin(/vertx/)], }; diff --git a/examples/riot-kitchen-sink/.storybook/webpack.config.js b/examples/riot-kitchen-sink/.storybook/webpack.config.js index becba8b172f3..f60c4be6a3d7 100644 --- a/examples/riot-kitchen-sink/.storybook/webpack.config.js +++ b/examples/riot-kitchen-sink/.storybook/webpack.config.js @@ -1,17 +1,18 @@ const path = require('path'); -module.exports = (storybookBaseConfig, configType, defaultConfig) => { - defaultConfig.module.rules.push({ - test: [/\.stories\.js$/, /index\.js$/], - loaders: [require.resolve('@storybook/addon-storysource/loader')], - include: [path.resolve(__dirname, '../src')], - enforce: 'pre', - }); - - defaultConfig.module.rules.push({ - test: /\.txt$/, - use: 'raw-loader', - }); - - return defaultConfig; +module.exports = { + module: { + rules: [ + { + test: [/\.stories\.js$/, /index\.js$/], + loaders: [require.resolve('@storybook/addon-storysource/loader')], + include: [path.resolve(__dirname, '../src')], + enforce: 'pre', + }, + { + test: /\.txt$/, + use: 'raw-loader', + }, + ], + }, }; diff --git a/examples/svelte-kitchen-sink/.storybook/webpack.config.js b/examples/svelte-kitchen-sink/.storybook/webpack.config.js index 647e02ae0d4a..92d286a488cc 100644 --- a/examples/svelte-kitchen-sink/.storybook/webpack.config.js +++ b/examples/svelte-kitchen-sink/.storybook/webpack.config.js @@ -1,12 +1,14 @@ const path = require('path'); -module.exports = (storybookBaseConfig, configType, defaultConfig) => { - defaultConfig.module.rules.push({ - test: [/\.stories\.js$/, /index\.js$/], - loaders: [require.resolve('@storybook/addon-storysource/loader')], - include: [path.resolve(__dirname, '../src')], - enforce: 'pre', - }); - - return defaultConfig; +module.exports = { + module: { + rules: [ + { + test: [/\.stories\.js$/, /index\.js$/], + loaders: [require.resolve('@storybook/addon-storysource/loader')], + include: [path.resolve(__dirname, '../src')], + enforce: 'pre', + }, + ], + }, }; diff --git a/examples/vue-kitchen-sink/.storybook/webpack.config.js b/examples/vue-kitchen-sink/.storybook/webpack.config.js index 647e02ae0d4a..92d286a488cc 100644 --- a/examples/vue-kitchen-sink/.storybook/webpack.config.js +++ b/examples/vue-kitchen-sink/.storybook/webpack.config.js @@ -1,12 +1,14 @@ const path = require('path'); -module.exports = (storybookBaseConfig, configType, defaultConfig) => { - defaultConfig.module.rules.push({ - test: [/\.stories\.js$/, /index\.js$/], - loaders: [require.resolve('@storybook/addon-storysource/loader')], - include: [path.resolve(__dirname, '../src')], - enforce: 'pre', - }); - - return defaultConfig; +module.exports = { + module: { + rules: [ + { + test: [/\.stories\.js$/, /index\.js$/], + loaders: [require.resolve('@storybook/addon-storysource/loader')], + include: [path.resolve(__dirname, '../src')], + enforce: 'pre', + }, + ], + }, }; diff --git a/lib/core/src/server/preview/custom-webpack-preset.js b/lib/core/src/server/preview/custom-webpack-preset.js index 467d268902e7..bd767c326dbd 100644 --- a/lib/core/src/server/preview/custom-webpack-preset.js +++ b/lib/core/src/server/preview/custom-webpack-preset.js @@ -3,40 +3,31 @@ import loadCustomWebpackConfig from '../utils/load-custom-webpack-config'; import mergeConfigs from '../utils/merge-webpack-config'; import { createDefaultWebpackConfig } from './base-webpack.config'; -function logConfigName(defaultConfigName) { - if (!defaultConfigName) { - logger.info('=> Using default webpack setup.'); - } else { - logger.info(`=> Using default webpack setup based on "${defaultConfigName}".`); - } -} - async function createFinalDefaultConfig(presets, config, options) { const defaultConfig = createDefaultWebpackConfig(config); return presets.apply('webpackFinal', defaultConfig, options); } export async function webpack(config, options) { - const { configDir, configType, defaultConfigName, presets } = options; + const { configDir, configType, presets } = options; - const finalConfig = await presets.apply('webpackFinal', config, options); + const finalDefaultConfig = await createFinalDefaultConfig(presets, config, options); // Check whether user has a custom webpack config file and // return the (extended) base configuration if it's not available. const customConfig = loadCustomWebpackConfig(configDir); if (customConfig === null) { - logConfigName(defaultConfigName); - return createFinalDefaultConfig(presets, config, options); + logger.info('=> Using default webpack setup.'); + return finalDefaultConfig; } if (typeof customConfig === 'function') { logger.info('=> Loading custom webpack config (full-control mode).'); - const finalDefaultConfig = await createFinalDefaultConfig(presets, config, options); - return customConfig(finalConfig, configType, finalDefaultConfig); + return customConfig({ config: finalDefaultConfig, configType }); } logger.info('=> Loading custom webpack config (extending mode).'); - return mergeConfigs(finalConfig, customConfig); + return mergeConfigs(finalDefaultConfig, customConfig); } From 1790d3b315f319b68a67c41327da0f66b66ade70 Mon Sep 17 00:00:00 2001 From: igor-dv Date: Wed, 5 Dec 2018 12:38:47 +0200 Subject: [PATCH 004/120] Rename configType to mode --- lib/core/src/server/preview/custom-webpack-preset.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/core/src/server/preview/custom-webpack-preset.js b/lib/core/src/server/preview/custom-webpack-preset.js index bd767c326dbd..bf81ce25f16a 100644 --- a/lib/core/src/server/preview/custom-webpack-preset.js +++ b/lib/core/src/server/preview/custom-webpack-preset.js @@ -24,7 +24,7 @@ export async function webpack(config, options) { if (typeof customConfig === 'function') { logger.info('=> Loading custom webpack config (full-control mode).'); - return customConfig({ config: finalDefaultConfig, configType }); + return customConfig({ config: finalDefaultConfig, mode: configType }); } logger.info('=> Loading custom webpack config (extending mode).'); From 0c9837c96dcb52f04ab16eebbff89e12d96cfdd5 Mon Sep 17 00:00:00 2001 From: igor-dv Date: Wed, 5 Dec 2018 12:48:07 +0200 Subject: [PATCH 005/120] Fix "angular-cli/.storybook/webpack.config.ts" --- .../angular-cli/.storybook/webpack.config.ts | 28 ++++++++++--------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/examples/angular-cli/.storybook/webpack.config.ts b/examples/angular-cli/.storybook/webpack.config.ts index e649449c1a51..952d18125f67 100644 --- a/examples/angular-cli/.storybook/webpack.config.ts +++ b/examples/angular-cli/.storybook/webpack.config.ts @@ -1,19 +1,21 @@ const path = require('path'); -module.exports = (baseConfig: any) => { - baseConfig.module.rules.push({ - test: [/\.stories\.tsx?$/, /index\.ts$/], - loaders: [ +module.exports = { + module: { + rules: [ { - loader: require.resolve('@storybook/addon-storysource/loader'), - options: { - parser: 'typescript', - }, + test: [/\.stories\.tsx?$/, /index\.ts$/], + loaders: [ + { + loader: require.resolve('@storybook/addon-storysource/loader'), + options: { + parser: 'typescript', + }, + }, + ], + include: [path.resolve(__dirname, '../src')], + enforce: 'pre', }, ], - include: [path.resolve(__dirname, '../src')], - enforce: 'pre', - }); - - return baseConfig; + }, }; From 69b380f79e3a7c677cc381accacfc25bf427af9c Mon Sep 17 00:00:00 2001 From: igor-dv Date: Wed, 5 Dec 2018 16:24:02 +0200 Subject: [PATCH 006/120] Fix official example's custom webpack.config --- examples/official-storybook/webpack.config.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/examples/official-storybook/webpack.config.js b/examples/official-storybook/webpack.config.js index 8238f7a937c0..d3096cc29d63 100644 --- a/examples/official-storybook/webpack.config.js +++ b/examples/official-storybook/webpack.config.js @@ -1,12 +1,12 @@ const path = require('path'); const { DefinePlugin, ContextReplacementPlugin } = require('webpack'); -module.exports = async (baseConfig, env, defaultConfig) => ({ - ...defaultConfig, +module.exports = async ({ config }) => ({ + ...config, module: { - ...defaultConfig.module, + ...config.module, rules: [ - ...defaultConfig.module.rules, + ...config.module.rules, { test: /\.stories\.jsx?$/, use: require.resolve('@storybook/addon-storysource/loader'), @@ -19,7 +19,7 @@ module.exports = async (baseConfig, env, defaultConfig) => ({ }, { test: /\.js/, - use: defaultConfig.module.rules[0].use, + use: config.module.rules[0].use, include: [ path.resolve(__dirname, '../../app/react'), path.resolve(__dirname, '../../lib/ui/src'), @@ -29,12 +29,12 @@ module.exports = async (baseConfig, env, defaultConfig) => ({ ], }, resolve: { - ...defaultConfig.resolve, + ...config.resolve, // https://github.com/graphql/graphql-js#using-in-a-browser - extensions: ['.mjs', ...defaultConfig.resolve.extensions], + extensions: ['.mjs', ...config.resolve.extensions], }, plugins: [ - ...defaultConfig.plugins, + ...config.plugins, // graphql sources check process variable new DefinePlugin({ process: JSON.stringify(true), From 76ae1d4456e98ffe4f2099b7a3b6abbe16ceded4 Mon Sep 17 00:00:00 2001 From: igor-dv Date: Wed, 5 Dec 2018 16:30:54 +0200 Subject: [PATCH 007/120] Remove mjs from custom config. It's supported by default --- examples/official-storybook/webpack.config.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/examples/official-storybook/webpack.config.js b/examples/official-storybook/webpack.config.js index d3096cc29d63..427eaab81fe9 100644 --- a/examples/official-storybook/webpack.config.js +++ b/examples/official-storybook/webpack.config.js @@ -28,11 +28,6 @@ module.exports = async ({ config }) => ({ }, ], }, - resolve: { - ...config.resolve, - // https://github.com/graphql/graphql-js#using-in-a-browser - extensions: ['.mjs', ...config.resolve.extensions], - }, plugins: [ ...config.plugins, // graphql sources check process variable From aa0964bdf30f14fa0b396345553067cc6057dbbd Mon Sep 17 00:00:00 2001 From: Oliver Date: Mon, 10 Dec 2018 11:38:56 +0100 Subject: [PATCH 008/120] Change OnDevice layout to have absolute positioning --- .../preview/components/OnDeviceUI/index.js | 90 +++++++++---------- .../components/OnDeviceUI/navigation/index.js | 37 +++++--- .../navigation/visibility-button.js | 2 +- .../preview/components/OnDeviceUI/style.js | 1 + .../preview/components/StoryListView/index.js | 8 +- .../preview/components/StoryListView/style.js | 4 + 6 files changed, 76 insertions(+), 66 deletions(-) diff --git a/app/react-native/src/preview/components/OnDeviceUI/index.js b/app/react-native/src/preview/components/OnDeviceUI/index.js index ab39f6cd5399..969ad7156ff6 100644 --- a/app/react-native/src/preview/components/OnDeviceUI/index.js +++ b/app/react-native/src/preview/components/OnDeviceUI/index.js @@ -1,13 +1,6 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; -import { - Keyboard, - KeyboardAvoidingView, - Platform, - SafeAreaView, - Animated, - TouchableOpacity, -} from 'react-native'; +import { Keyboard, KeyboardAvoidingView, Platform, Animated, TouchableOpacity } from 'react-native'; import Events from '@storybook/core-events'; import StoryListView from '../StoryListView'; @@ -150,49 +143,48 @@ export default class OnDeviceUI extends PureComponent { ]; return ( - - + - - - - - - - + + + + + - - - - - - - - - - + + + + + + + + + + + ); } } diff --git a/app/react-native/src/preview/components/OnDeviceUI/navigation/index.js b/app/react-native/src/preview/components/OnDeviceUI/navigation/index.js index a82d4147c6f3..e4b96b184c12 100644 --- a/app/react-native/src/preview/components/OnDeviceUI/navigation/index.js +++ b/app/react-native/src/preview/components/OnDeviceUI/navigation/index.js @@ -1,5 +1,5 @@ import React, { PureComponent } from 'react'; -import { View } from 'react-native'; +import { View, SafeAreaView, StyleSheet } from 'react-native'; import GestureRecognizer from 'react-native-swipe-gestures'; import PropTypes from 'prop-types'; @@ -11,6 +11,15 @@ const SWIPE_CONFIG = { directionalOffsetThreshold: 80, }; +const style = StyleSheet.create({ + wrapper: { + position: 'absolute', + left: 0, + right: 0, + bottom: 0, + }, +}); + export default class Navigation extends PureComponent { constructor(props) { super(props); @@ -44,17 +53,21 @@ export default class Navigation extends PureComponent { const { isUIVisible } = this.state; return ( - - {isUIVisible && ( - - - - )} - + + + {isUIVisible && ( + + + + )} + + + + ); } diff --git a/app/react-native/src/preview/components/OnDeviceUI/navigation/visibility-button.js b/app/react-native/src/preview/components/OnDeviceUI/navigation/visibility-button.js index 1719b18e71df..b9fbf8285d2c 100644 --- a/app/react-native/src/preview/components/OnDeviceUI/navigation/visibility-button.js +++ b/app/react-native/src/preview/components/OnDeviceUI/navigation/visibility-button.js @@ -14,7 +14,7 @@ export default class VisibilityButton extends PureComponent { style={style.hideButton} hitSlop={{ top: 5, left: 5, bottom: 5, right: 5 }} > - □ + □ ); } diff --git a/app/react-native/src/preview/components/OnDeviceUI/style.js b/app/react-native/src/preview/components/OnDeviceUI/style.js index f130d7f9a935..c2a673fa7c74 100644 --- a/app/react-native/src/preview/components/OnDeviceUI/style.js +++ b/app/react-native/src/preview/components/OnDeviceUI/style.js @@ -23,6 +23,7 @@ export default { position: 'absolute', right: 8, bottom: 12, + zIndex: 100, }, previewMinimized: { borderWidth: 1, diff --git a/app/react-native/src/preview/components/StoryListView/index.js b/app/react-native/src/preview/components/StoryListView/index.js index 750f26ab9c08..18844b8243a1 100644 --- a/app/react-native/src/preview/components/StoryListView/index.js +++ b/app/react-native/src/preview/components/StoryListView/index.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; -import { SectionList, Text, TextInput, TouchableOpacity, View } from 'react-native'; +import { SectionList, Text, TextInput, TouchableOpacity, View, SafeAreaView } from 'react-native'; import Events from '@storybook/core-events'; import style from './style'; @@ -116,7 +116,7 @@ export default class StoryListView extends Component { const { data } = this.state; return ( - + ( - + ); } } diff --git a/app/react-native/src/preview/components/StoryListView/style.js b/app/react-native/src/preview/components/StoryListView/style.js index 5cac48f5cabc..619543f55714 100644 --- a/app/react-native/src/preview/components/StoryListView/style.js +++ b/app/react-native/src/preview/components/StoryListView/style.js @@ -10,6 +10,10 @@ export default { flex: { flex: 1, }, + sectionList: { + flex: 1, + marginBottom: 40, + }, header: { paddingVertical: 5, }, From f15f8c50818a4353a4a37ba299c206012ec0ca14 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 14 Dec 2018 18:03:41 +0100 Subject: [PATCH 009/120] FIX snapshots --- .../info/src/__snapshots__/index.test.js.snap | 1226 ----------------- 1 file changed, 1226 deletions(-) diff --git a/addons/info/src/__snapshots__/index.test.js.snap b/addons/info/src/__snapshots__/index.test.js.snap index fc951c17de01..3551f6a670a4 100644 --- a/addons/info/src/__snapshots__/index.test.js.snap +++ b/addons/info/src/__snapshots__/index.test.js.snap @@ -2729,1232 +2729,6 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)" `; -exports[`addon Info should render component description 1`] = ` -.emotion-4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - font-size: .88em; - font-family: Menlo,Monaco,"Courier New",monospace; - background-color: #fafafa; - padding: .5rem; - line-height: 1.5; - overflow-x: scroll; -} - -.emotion-2 { - overflow: hidden; - border: 1px solid #eee; - border-radius: 3px; - background-color: #FFFFFF; - cursor: pointer; - font-size: 13px; - padding: 3px 10px; - -webkit-align-self: flex-start; - -ms-flex-item-align: start; - align-self: flex-start; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; -} - -.emotion-2:hover { - background-color: #f4f7fa; - border-color: #ddd; -} - -.emotion-2:active { - background-color: #e9ecef; - border-color: #ccc; -} - -.emotion-0 { - -webkit-transition: -webkit-transform .2s ease; - -webkit-transition: transform .2s ease; - transition: transform .2s ease; - height: 16px; - -webkit-transform: translateY(-100%) translateY(-6px); - -ms-transform: translateY(-100%) translateY(-6px); - transform: translateY(-100%) translateY(-6px); -} - - - -
-
-
-
-

- TestComponent -

-

- Basic test -

-
-
-
-
-
- It's a - Basic test - story: - -
-

- function func(x) { - return x + 1; - } -

-

- [object Object] -

-

- 1,2,3 -

-

- 7 -

-
- seven -
-
- true -
-

- undefined -

- - test - - - storiesOf - -
    -
  • - 1 -
    • -
  • - 2 -
    • -
-
- -
-
-
-
-
- Awesome test component description -
-
-

- Story Source -

- 
-              
-                
-                  
-                    

-                      
-                            It's a 
-                            Basic test
-                             story:
-                            
-                          

-                        }
-                      >
-                        

-                          

-                            
-                              <
-                              div
-                            
-                            
-                                  It's a 
-                                  Basic test
-                                   story:
-                                  
-                                

-                              }
-                              singleLine={false}
-                            >
-                              
-                            
-                            
-                              >
-                            
-                          

-                          
-                            

-                              
-                                It's a 
-                              
-                            

-                          
-                          
-                            

-                              
-                                Basic test
-                              
-                            

-                          
-                          
-                            

-                              
-                                 story:
-                              
-                            

-                          
-                          
-                            }
-                          >
-                            

-                              
-                                <
-                                TestComponent
-                              
-                              
-                                }
-                                singleLine={true}
-                              >
-                                
-                                  
-                                    
-                                      

-                                        
-                                    
-                                    
-                                      func
-                                    
-                                    
-                                      =
-                                      
-                                        {
-                                        
-                                          
-                                            func
-                                          
-                                        
-                                        }
-                                      
-                                    
-                                  
-                                  
-                                    
-                                      

-                                        
-                                    
-                                    
-                                      obj
-                                    
-                                    
-                                      =
-                                      
-                                        {
-                                        
-                                          
-                                            
-                                              {
-                                              
-                                                
-                                                  a
-                                                
-                                              
-                                              : 
-                                              
-                                                
-                                                  'a'
-                                                
-                                              
-                                              ,
-                                              
-                                                
-                                                  b
-                                                
-                                              
-                                              : 
-                                              
-                                                
-                                                  'b'
-                                                
-                                              
-                                              }
-                                            
-                                          
-                                        
-                                        }
-                                      
-                                    
-                                  
-                                  
-                                    
-                                      

-                                        
-                                    
-                                    
-                                      array
-                                    
-                                    
-                                      =
-                                      
-                                        {
-                                        
-                                          
-                                            
-                                              [
-                                              
-                                                
-                                                  
-                                                    1
-                                                  
-                                                
-                                              
-                                              ,
-                                              
-                                                
-                                                  
-                                                    2
-                                                  
-                                                
-                                              
-                                              ,
-                                              
-                                                
-                                                  
-                                                    3
-                                                  
-                                                
-                                              
-                                              ]
-                                            
-                                          
-                                        
-                                        }
-                                      
-                                    
-                                  
-                                  
-                                    
-                                      

-                                        
-                                    
-                                    
-                                      number
-                                    
-                                    
-                                      =
-                                      
-                                        {
-                                        
-                                          
-                                            7
-                                          
-                                        
-                                        }
-                                      
-                                    
-                                  
-                                  
-                                    
-                                      

-                                        
-                                    
-                                    
-                                      string
-                                    
-                                    
-                                      =
-                                      
-                                        "
-                                        
-                                          
-                                            seven
-                                          
-                                        
-                                        "
-                                      
-                                    
-                                  
-                                  
-                                    
-                                      

-                                        
-                                    
-                                    
-                                      bool
-                                    
-                                    

-                                  
-                                
-                              
-                              
-                                />
-                              
-                            

-                          
-                          

-                            
-                              </
-                              div
-                              >
-                            
-                          

-
- -
- - - - - - - - - - - -
-
- - - - -`; - exports[`addon Info should render component description if story kind matches component 1`] = ` .emotion-4 { display: -webkit-box; From 9d2f1fcf1bb4c9d9c56b7f0566f34edffe910e21 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kai=20R=C3=B6der?= Date: Mon, 17 Dec 2018 14:37:12 +0100 Subject: [PATCH 010/120] WIP working on migration for @storybook/addons --- lib/addons/package.json | 5 +- lib/addons/src/index.js | 88 ------------------- lib/addons/src/index.ts | 82 +++++++++++++++++ ...corator.test.js => make-decorator.test.ts} | 0 .../{make-decorator.js => make-decorator.ts} | 26 ++++-- ...nnel-mock.js => storybook-channel-mock.ts} | 0 lib/addons/src/typings.d.ts | 1 + lib/addons/tsconfig.json | 14 +++ tsconfig.json | 4 +- yarn.lock | 7 +- 10 files changed, 128 insertions(+), 99 deletions(-) delete mode 100644 lib/addons/src/index.js create mode 100644 lib/addons/src/index.ts rename lib/addons/src/{make-decorator.test.js => make-decorator.test.ts} (100%) rename lib/addons/src/{make-decorator.js => make-decorator.ts} (70%) rename lib/addons/src/{storybook-channel-mock.js => storybook-channel-mock.ts} (100%) create mode 100644 lib/addons/src/typings.d.ts create mode 100644 lib/addons/tsconfig.json diff --git a/lib/addons/package.json b/lib/addons/package.json index cbdd6ae220b6..11883fe40c54 100644 --- a/lib/addons/package.json +++ b/lib/addons/package.json @@ -15,7 +15,6 @@ }, "license": "MIT", "main": "dist/index.js", - "jsnext:main": "src/index.js", "scripts": { "prepare": "node ../../scripts/prepare.js" }, @@ -25,6 +24,10 @@ "global": "^4.3.2", "util-deprecate": "^1.0.2" }, + "devDependencies": { + "@types/util-deprecate": "^1.0.0", + "@types/react": "^16.7.17y" + }, "publishConfig": { "access": "public" } diff --git a/lib/addons/src/index.js b/lib/addons/src/index.js deleted file mode 100644 index bee676ea0f2a..000000000000 --- a/lib/addons/src/index.js +++ /dev/null @@ -1,88 +0,0 @@ -// Resolves to window in browser and to global in node -import global from 'global'; -// import { TabWrapper } from '@storybook/components'; - -export mockChannel from './storybook-channel-mock'; -export { makeDecorator } from './make-decorator'; - -export class AddonStore { - constructor() { - this.loaders = {}; - this.panels = {}; - this.channel = null; - this.preview = null; - this.database = null; - } - - getChannel() { - // this.channel should get overwritten by setChannel. If it wasn't called (e.g. in non-browser environment), throw. - if (!this.channel) { - throw new Error( - 'Accessing nonexistent addons channel, see https://storybook.js.org/basics/faq/#why-is-there-no-addons-channel' - ); - } - return this.channel; - } - - hasChannel() { - return Boolean(this.channel); - } - - setChannel(channel) { - this.channel = channel; - } - - getPreview() { - return this.preview; - } - - setPreview(preview) { - this.preview = preview; - } - - getDatabase() { - return this.database; - } - - setDatabase(database) { - this.database = database; - } - - getPanels() { - return this.panels; - } - - addPanel(name, panel) { - // supporting legacy addons, which have not migrated to the active-prop - // const original = panel.render; - // if (original && original.toString() && !original.toString().match(/active/)) { - // this.panels[name] = { - // ...panel, - // render: ({ active }) => TabWrapper({ active, render: original }), - // }; - // } else { - this.panels[name] = panel; - // } - } - - register(name, loader) { - this.loaders[name] = loader; - } - - loadAddons(api) { - Object.keys(this.loaders) - .map(name => this.loaders[name]) - .forEach(loader => loader(api)); - } -} - -// Enforce addons store to be a singleton -const KEY = '__STORYBOOK_ADDONS'; -function getAddonsStore() { - if (!global[KEY]) { - global[KEY] = new AddonStore(); - } - return global[KEY]; -} - -export default getAddonsStore(); diff --git a/lib/addons/src/index.ts b/lib/addons/src/index.ts new file mode 100644 index 000000000000..0e550e2c164a --- /dev/null +++ b/lib/addons/src/index.ts @@ -0,0 +1,82 @@ +// Resolves to window in browser and to global in node +import global from 'global'; +// import { TabWrapper } from '@storybook/components'; +import mockChannel from './storybook-channel-mock'; +import Channel from '@storybook/channels'; +import { ReactElement } from 'react'; + +export { mockChannel }; +export { makeDecorator } from './make-decorator'; + +export interface PanelOptions { + active: boolean; +} + +export interface Panel { + title: string; + + render(options: PanelOptions): ReactElement; +} + +export type Loader = (callback: (api: any) => void) => void; + +interface LoaderKeyValue { + [key: string]: Loader; +} + +interface PanelKeyValue { + [key: string]: Panel; +} + +export class AddonStore { + private loaders: LoaderKeyValue = {}; + private panels: PanelKeyValue = {}; + private channel: Channel | undefined; + + getChannel() { + // this.channel should get overwritten by setChannel. If it wasn't called (e.g. in non-browser environment), throw. + if (!this.channel) { + throw new Error( + 'Accessing nonexistent addons channel, see https://storybook.js.org/basics/faq/#why-is-there-no-addons-channel' + ); + } + + return this.channel; + } + + hasChannel() { + return !!this.channel; + } + + setChannel(channel: Channel) { + this.channel = channel; + } + + getPanels() { + return this.panels; + } + + addPanel(name: string, panel: Panel) { + this.panels[name] = panel; + } + + register(name: string, registerCallback: (api: any) => void) { + this.loaders[name] = registerCallback; + } + + loadAddons(api: any) { + Object.values(this.loaders).forEach(value => value(api)); + } +} + +// Enforce addons store to be a singleton +const KEY = '__STORYBOOK_ADDONS'; + +function getAddonsStore() { + if (!global[KEY]) { + global[KEY] = new AddonStore(); + } + return global[KEY]; +} + +export default getAddonsStore(); diff --git a/lib/addons/src/make-decorator.test.js b/lib/addons/src/make-decorator.test.ts similarity index 100% rename from lib/addons/src/make-decorator.test.js rename to lib/addons/src/make-decorator.test.ts diff --git a/lib/addons/src/make-decorator.js b/lib/addons/src/make-decorator.ts similarity index 70% rename from lib/addons/src/make-decorator.js rename to lib/addons/src/make-decorator.ts index e7df28f726f1..81c4174b6fbf 100644 --- a/lib/addons/src/make-decorator.js +++ b/lib/addons/src/make-decorator.ts @@ -10,14 +10,22 @@ import deprecate from 'util-deprecate'; // *And* in the older, but not deprecated, "pass options to decorator" style: // .addDecorator(decorator(options)) -export const makeDecorator = ({ +interface MakeDecoratorOptions { + name: any; + parameterName: any; + wrapper: any; + skipIfNoParametersOrOptions: boolean; + allowDeprecatedUsage: boolean; +} + +export const makeDecorator: any = ({ name, parameterName, wrapper, skipIfNoParametersOrOptions = false, allowDeprecatedUsage = false, -}) => { - const decorator = options => (getStory, context) => { +}: MakeDecoratorOptions) => { + const decorator: any = (options: any) => (getStory: any, context: any) => { const parameters = context.parameters && context.parameters[parameterName]; if (parameters && parameters.disable) { @@ -33,13 +41,13 @@ export const makeDecorator = ({ }); }; - return (...args) => { + return (...args: any) => { // Used without options as .addDecorator(decorator) if (typeof args[0] === 'function') { return decorator()(...args); } - return (...innerArgs) => { + return (...innerArgs: any): any => { // Used as [.]addDecorator(decorator(options)) if (innerArgs.length > 1) { return decorator(...args)(...innerArgs); @@ -49,13 +57,15 @@ export const makeDecorator = ({ // Used to wrap a story directly .add('story', decorator(options)(() => )) // This is now deprecated: return deprecate( - context => decorator(...args)(innerArgs[0], context), - `Passing stories directly into ${name}() is deprecated, instead use addDecorator(${name}) and pass options with the '${parameterName}' parameter` + (context: any) => decorator(...args)(innerArgs[0], context), + `Passing stories directly into ${name}() is deprecated, + instead use addDecorator(${name}) and pass options with the '${parameterName}' parameter` ); } throw new Error( - `Passing stories directly into ${name}() is not allowed, instead use addDecorator(${name}) and pass options with the '${parameterName}' parameter` + `Passing stories directly into ${name}() is not allowed, + instead use addDecorator(${name}) and pass options with the '${parameterName}' parameter` ); }; }; diff --git a/lib/addons/src/storybook-channel-mock.js b/lib/addons/src/storybook-channel-mock.ts similarity index 100% rename from lib/addons/src/storybook-channel-mock.js rename to lib/addons/src/storybook-channel-mock.ts diff --git a/lib/addons/src/typings.d.ts b/lib/addons/src/typings.d.ts new file mode 100644 index 000000000000..2f4eb9cf4fd9 --- /dev/null +++ b/lib/addons/src/typings.d.ts @@ -0,0 +1 @@ +declare module 'global'; diff --git a/lib/addons/tsconfig.json b/lib/addons/tsconfig.json new file mode 100644 index 000000000000..81d74f99bec2 --- /dev/null +++ b/lib/addons/tsconfig.json @@ -0,0 +1,14 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "rootDir": "./src", + "strict": true + }, + "include": [ + "src/**/*.ts", + "src/**/*.tsx" + ], + "exclude": [ + "src/index.test.ts" + ] +} diff --git a/tsconfig.json b/tsconfig.json index 55ea5bb93317..c2e1fbdc8a35 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -9,13 +9,15 @@ "noImplicitAny": true, "jsx": "react", "module": "commonjs", + "allowSyntheticDefaultImports": true, + "esModuleInterop": true, "target": "es5", "types": [ "node", "jest" ], "lib": [ - "es2016", + "es2017", "dom" ] } diff --git a/yarn.lock b/yarn.lock index 0349d52c8150..63ad18f67d3c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2275,7 +2275,7 @@ resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.1.tgz#48fd98c1561fe718b61733daed46ff115b496e18" integrity sha512-eqz8c/0kwNi/OEHQfvIuJVLTst3in0e7uTKeuY+WL/zfKn0xVujOTp42bS/vUUokhK5P2BppLd9JXMOMHcgbjA== -"@types/react@^16.7.3": +"@types/react@^16.7.17y", "@types/react@^16.7.3": version "16.7.17" resolved "https://registry.yarnpkg.com/@types/react/-/react-16.7.17.tgz#3242e796a1ffbba4f49eae5915a67f4c079504e9" integrity sha512-YcXcaoXaxo7A76mBCGlKlN2aZu3REQfF0DTrhiyXVJLA7PDdxVCr+wiQOrkVNn44D/zLlIyDSn3U918Ve0AaEA== @@ -2298,6 +2298,11 @@ resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.2.tgz#5dc0a7f76809b7518c0df58689cd16a19bd751c6" integrity sha512-iHI60IbyfQilNubmxsq4zqSjdynlmc2Q/QvH9kjzg9+CCYVVzq1O6tc7VBzSygIwnmOt07w80IG6HDQvjv3Liw== +"@types/util-deprecate@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@types/util-deprecate/-/util-deprecate-1.0.0.tgz#341d0815fe5a661b94e3ea738d182b4c359e3958" + integrity sha512-I2vixiQ+mrmKxfdLNvaa766nulrMVDoUQiSQoNeTjFUNAt8klnMgDh3yy/bH/r275357q30ACOEUaxFOR8YVrA== + "@types/vfile-message@*": version "1.0.1" resolved "https://registry.yarnpkg.com/@types/vfile-message/-/vfile-message-1.0.1.tgz#e1e9895cc6b36c462d4244e64e6d0b6eaf65355a" From 385782898a84150ac842546d2c4644edf48bfe57 Mon Sep 17 00:00:00 2001 From: igor-dv Date: Mon, 17 Dec 2018 16:53:09 +0200 Subject: [PATCH 011/120] Unfinished things --- .eslintignore | 1 + addons/notes/package.json | 1 + addons/notes/src/index.ts | 47 ++++++++++++++++---------------- addons/notes/src/register.tsx | 22 ++++++--------- addons/notes/src/typings.d.ts | 3 -- lib/addons/src/index.ts | 4 +-- lib/addons/src/make-decorator.ts | 39 ++++++++++++++++---------- 7 files changed, 61 insertions(+), 56 deletions(-) diff --git a/.eslintignore b/.eslintignore index acaec38f0b07..76cb54f8b1ee 100644 --- a/.eslintignore +++ b/.eslintignore @@ -10,6 +10,7 @@ lib/cli/test *.bundle.js *.js.map *.ts +*.tsx !.remarkrc.js !.babelrc.js diff --git a/addons/notes/package.json b/addons/notes/package.json index 4fecb96436d6..41af9fbf9048 100644 --- a/addons/notes/package.json +++ b/addons/notes/package.json @@ -25,6 +25,7 @@ "dependencies": { "@emotion/styled": "^0.10.6", "@storybook/addons": "4.2.0-alpha.2", + "@storybook/channels": "4.2.0-alpha.2", "core-js": "^2.5.7", "marked": "^0.5.2", "prop-types": "^15.6.2" diff --git a/addons/notes/src/index.ts b/addons/notes/src/index.ts index 57749ebb5434..419b73acbf2d 100644 --- a/addons/notes/src/index.ts +++ b/addons/notes/src/index.ts @@ -1,34 +1,35 @@ -import addons, { makeDecorator } from '@storybook/addons'; +import addons, { makeDecorator, StoryContext, StoryGetter, StoryWrapper } from '@storybook/addons'; import { parse as renderMarkdown } from 'marked'; +// function wrapper(getStory: StoryGetter, context: StoryContext, {options, parameters}) { +// const channel = addons.getChannel(); +// +// const storyOptions = parameters || options; +// +// const {text, markdown, markdownOptions} = +// typeof storyOptions === 'string' +// ? { +// text: storyOptions, +// markdown: undefined, +// markdownOptions: undefined, +// } +// : storyOptions; +// +// if (!text && !markdown) { +// throw new Error('You must set of one of `text` or `markdown` on the `notes` parameter'); +// } +// +// channel.emit('storybook/notes/add_notes', text || renderMarkdown(markdown, markdownOptions)); +// +// return getStory(context); +// } + // todo resolve any after @storybook/addons and @storybook/channels are migrated to TypeScript export const withNotes = makeDecorator({ name: 'withNotes', parameterName: 'notes', skipIfNoParametersOrOptions: true, allowDeprecatedUsage: true, - wrapper: (getStory: (context: any) => any, context: any, { options, parameters }: any) => { - const channel = addons.getChannel(); - - const storyOptions = parameters || options; - - const { text, markdown, markdownOptions } = - typeof storyOptions === 'string' - ? { - text: storyOptions, - markdown: undefined, - markdownOptions: undefined, - } - : storyOptions; - - if (!text && !markdown) { - throw new Error('You must set of one of `text` or `markdown` on the `notes` parameter'); - } - - channel.emit('storybook/notes/add_notes', text || renderMarkdown(markdown, markdownOptions)); - - return getStory(context); - }, }); export const withMarkdownNotes = (text: string, options: any) => diff --git a/addons/notes/src/register.tsx b/addons/notes/src/register.tsx index 9b6d15364ce0..04fee67bc6bc 100644 --- a/addons/notes/src/register.tsx +++ b/addons/notes/src/register.tsx @@ -1,16 +1,11 @@ import * as React from 'react'; import addons from '@storybook/addons'; +import Channel from '@storybook/channels'; + import * as PropTypes from 'prop-types'; import styled from '@emotion/styled'; -// todo this is going to be refactored after the migration of @storybook/channel to TypeScript -interface NotesChannel { - emit: any; - on(listener: string, callback: (text: string) => void): any; - removeListener(listener: string, callback: (text: string) => void): void; -} - interface NotesApi { setQueryParams: any; // todo check correct definition getQueryParam(queryParamName: string): any; @@ -20,7 +15,7 @@ interface NotesApi { interface NotesProps { active: boolean; - channel: NotesChannel; + channel: Channel; api: NotesApi; } @@ -35,7 +30,6 @@ const Panel = styled.div({ }); export class Notes extends React.Component { - static propTypes = { active: PropTypes.bool.isRequired, channel: PropTypes.shape({ @@ -91,9 +85,9 @@ export class Notes extends React.Component { const { text } = this.state; const textAfterFormatted = text ? text - .trim() - .replace(/(<\S+.*>)\n/g, '$1') - .replace(/\n/g, '
') + .trim() + .replace(/(<\S+.*>)\n/g, '$1') + .replace(/\n/g, '
') : ''; return active ? ( @@ -109,6 +103,8 @@ addons.register('storybook/notes', (api: any) => { const channel = addons.getChannel(); addons.addPanel('storybook/notes/panel', { title: 'Notes', - render: ({ active }: { active: boolean }) => , + render: ({ active }: { active: boolean }) => ( + + ), }); }); diff --git a/addons/notes/src/typings.d.ts b/addons/notes/src/typings.d.ts index 84ab86f76adc..54a71c2c205c 100644 --- a/addons/notes/src/typings.d.ts +++ b/addons/notes/src/typings.d.ts @@ -1,5 +1,2 @@ -// Fixes 'noImplicitAny' lint error because @storybook/addons isn't migrated to typescript yet -declare module '@storybook/addons'; - // Only necessary for 0.x.x. Version 10.x.x has definition files included declare module '@emotion/styled'; diff --git a/lib/addons/src/index.ts b/lib/addons/src/index.ts index 0e550e2c164a..d0618201654e 100644 --- a/lib/addons/src/index.ts +++ b/lib/addons/src/index.ts @@ -1,12 +1,10 @@ -// Resolves to window in browser and to global in node import global from 'global'; -// import { TabWrapper } from '@storybook/components'; import mockChannel from './storybook-channel-mock'; import Channel from '@storybook/channels'; import { ReactElement } from 'react'; export { mockChannel }; -export { makeDecorator } from './make-decorator'; +export * from './make-decorator'; export interface PanelOptions { active: boolean; diff --git a/lib/addons/src/make-decorator.ts b/lib/addons/src/make-decorator.ts index 81c4174b6fbf..a4c40eb161f4 100644 --- a/lib/addons/src/make-decorator.ts +++ b/lib/addons/src/make-decorator.ts @@ -1,24 +1,34 @@ import deprecate from 'util-deprecate'; -// Create a decorator that can be used both in the (deprecated) old "hoc" style: -// .add('story', decorator(options)(() => )); -// -// And in the new, "parameterized" style: -// .addDecorator(decorator) -// .add('story', () => , { name: { parameters } }); -// -// *And* in the older, but not deprecated, "pass options to decorator" style: -// .addDecorator(decorator(options)) +export interface StoryContext { + story: string; + kind: string; +} + +export interface WrapperSettings { + options: any; + parameters: any; +} + +export type StoryGetter = (context: StoryContext) => any; + +export type StoryWrapper = ( + getStory: StoryGetter, + context: StoryContext, + settings: WrapperSettings +) => any; + +type MakeDecoratorResult = (...args: any) => any; interface MakeDecoratorOptions { - name: any; - parameterName: any; - wrapper: any; - skipIfNoParametersOrOptions: boolean; + name: string; + parameterName: string; allowDeprecatedUsage: boolean; + skipIfNoParametersOrOptions: boolean; + wrapper: StoryWrapper; } -export const makeDecorator: any = ({ +export const makeDecorator: MakeDecoratorResult = ({ name, parameterName, wrapper, @@ -35,6 +45,7 @@ export const makeDecorator: any = ({ if (skipIfNoParametersOrOptions && !options && !parameters) { return getStory(context); } + return wrapper(getStory, context, { options, parameters, From fa2c957aa0cef738ef984282b1424002f93cf68c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kai=20R=C3=B6der?= Date: Mon, 17 Dec 2018 16:43:48 +0100 Subject: [PATCH 012/120] Rewrote @storybook/addons --- addons/notes/src/index.ts | 57 ++++++++++++++---------- lib/addons/package.json | 3 +- lib/addons/src/index.ts | 10 ++--- lib/addons/src/make-decorator.test.ts | 15 +++++-- lib/addons/src/make-decorator.ts | 4 +- lib/addons/src/public_api.ts | 3 ++ lib/addons/src/storybook-channel-mock.ts | 2 +- lib/addons/src/typings.d.ts | 4 ++ 8 files changed, 62 insertions(+), 36 deletions(-) create mode 100644 lib/addons/src/public_api.ts diff --git a/addons/notes/src/index.ts b/addons/notes/src/index.ts index 419b73acbf2d..c12ad3c8c7c6 100644 --- a/addons/notes/src/index.ts +++ b/addons/notes/src/index.ts @@ -1,28 +1,38 @@ -import addons, { makeDecorator, StoryContext, StoryGetter, StoryWrapper } from '@storybook/addons'; import { parse as renderMarkdown } from 'marked'; +import { + addons, + makeDecorator, + StoryContext, + StoryGetter, + WrapperSettings, +} from '@storybook/addons'; -// function wrapper(getStory: StoryGetter, context: StoryContext, {options, parameters}) { -// const channel = addons.getChannel(); -// -// const storyOptions = parameters || options; -// -// const {text, markdown, markdownOptions} = -// typeof storyOptions === 'string' -// ? { -// text: storyOptions, -// markdown: undefined, -// markdownOptions: undefined, -// } -// : storyOptions; -// -// if (!text && !markdown) { -// throw new Error('You must set of one of `text` or `markdown` on the `notes` parameter'); -// } -// -// channel.emit('storybook/notes/add_notes', text || renderMarkdown(markdown, markdownOptions)); -// -// return getStory(context); -// } +function wrapper( + getStory: StoryGetter, + context: StoryContext, + { options, parameters }: WrapperSettings +) { + const channel = addons.getChannel(); + + const storyOptions = parameters || options; + + const { text, markdown, markdownOptions } = + typeof storyOptions === 'string' + ? { + text: storyOptions, + markdown: undefined, + markdownOptions: undefined, + } + : storyOptions; + + if (!text && !markdown) { + throw new Error('You must set of one of `text` or `markdown` on the `notes` parameter'); + } + + channel.emit('storybook/notes/add_notes', text || renderMarkdown(markdown, markdownOptions)); + + return getStory(context); +} // todo resolve any after @storybook/addons and @storybook/channels are migrated to TypeScript export const withNotes = makeDecorator({ @@ -30,6 +40,7 @@ export const withNotes = makeDecorator({ parameterName: 'notes', skipIfNoParametersOrOptions: true, allowDeprecatedUsage: true, + wrapper, }); export const withMarkdownNotes = (text: string, options: any) => diff --git a/lib/addons/package.json b/lib/addons/package.json index 11883fe40c54..2c34906580de 100644 --- a/lib/addons/package.json +++ b/lib/addons/package.json @@ -14,7 +14,8 @@ "url": "https://github.com/storybooks/storybook.git" }, "license": "MIT", - "main": "dist/index.js", + "main": "dist/public_api.js", + "types": "dist/public_api.d.ts", "scripts": { "prepare": "node ../../scripts/prepare.js" }, diff --git a/lib/addons/src/index.ts b/lib/addons/src/index.ts index d0618201654e..135ed25fda9a 100644 --- a/lib/addons/src/index.ts +++ b/lib/addons/src/index.ts @@ -1,11 +1,7 @@ import global from 'global'; -import mockChannel from './storybook-channel-mock'; import Channel from '@storybook/channels'; import { ReactElement } from 'react'; -export { mockChannel }; -export * from './make-decorator'; - export interface PanelOptions { active: boolean; } @@ -77,4 +73,8 @@ function getAddonsStore() { return global[KEY]; } -export default getAddonsStore(); +// Exporting this twice in order to to be able to import it like { addons } instead of 'addons' +// prefer import { addons } from '@storybook/addons' over import addons from '@storybook/addons' +const addonStore = getAddonsStore(); +export { addonStore as addons }; +export default addonStore; diff --git a/lib/addons/src/make-decorator.test.ts b/lib/addons/src/make-decorator.test.ts index 53f3dd8cfeb5..4b640ac6636c 100644 --- a/lib/addons/src/make-decorator.test.ts +++ b/lib/addons/src/make-decorator.test.ts @@ -1,10 +1,17 @@ import deprecate from 'util-deprecate'; -import { makeDecorator } from './make-decorator'; -import { defaultDecorateStory } from '../../core/src/client/preview/client_api'; +import { makeDecorator, StoryContext } from './make-decorator'; + +// Copy & paste from internal api: core/client/preview/client_api +export const defaultDecorateStory = (getStory: Function, decorators: Function[]) => + decorators.reduce( + (decorated, decorator) => (context: StoryContext) => + decorator(() => decorated(context), context), + getStory + ); jest.mock('util-deprecate'); -let deprecatedFns = []; -deprecate.mockImplementation((fn, warning) => { +let deprecatedFns: any[] = []; +(deprecate as any).mockImplementation((fn: (...args: any) => any, warning: string) => { const deprecatedFn = jest.fn(fn); deprecatedFns.push({ deprecatedFn, diff --git a/lib/addons/src/make-decorator.ts b/lib/addons/src/make-decorator.ts index a4c40eb161f4..15d16687e881 100644 --- a/lib/addons/src/make-decorator.ts +++ b/lib/addons/src/make-decorator.ts @@ -6,7 +6,7 @@ export interface StoryContext { } export interface WrapperSettings { - options: any; + options: object; parameters: any; } @@ -35,7 +35,7 @@ export const makeDecorator: MakeDecoratorResult = ({ skipIfNoParametersOrOptions = false, allowDeprecatedUsage = false, }: MakeDecoratorOptions) => { - const decorator: any = (options: any) => (getStory: any, context: any) => { + const decorator: any = (options: object) => (getStory: any, context: any) => { const parameters = context.parameters && context.parameters[parameterName]; if (parameters && parameters.disable) { diff --git a/lib/addons/src/public_api.ts b/lib/addons/src/public_api.ts new file mode 100644 index 000000000000..c07891fd40a1 --- /dev/null +++ b/lib/addons/src/public_api.ts @@ -0,0 +1,3 @@ +export * from './make-decorator'; +export * from '.'; +export * from './storybook-channel-mock'; diff --git a/lib/addons/src/storybook-channel-mock.ts b/lib/addons/src/storybook-channel-mock.ts index 7358fc7e4bef..8cc153b624f5 100644 --- a/lib/addons/src/storybook-channel-mock.ts +++ b/lib/addons/src/storybook-channel-mock.ts @@ -1,6 +1,6 @@ import Channel from '@storybook/channels'; -export default function createChannel() { +export function createChannel() { const transport = { setHandler: () => {}, send: () => {}, diff --git a/lib/addons/src/typings.d.ts b/lib/addons/src/typings.d.ts index 2f4eb9cf4fd9..d9790e720639 100644 --- a/lib/addons/src/typings.d.ts +++ b/lib/addons/src/typings.d.ts @@ -1 +1,5 @@ declare module 'global'; + +declare module '@storybook/core' { + export type defaultDecorateStory = any; +} From 7b56599ea94b76ecbf36d528adb51c0192a1fa64 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kai=20R=C3=B6der?= Date: Mon, 17 Dec 2018 16:50:44 +0100 Subject: [PATCH 013/120] removed unnecessary module declaration --- lib/addons/src/typings.d.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/lib/addons/src/typings.d.ts b/lib/addons/src/typings.d.ts index d9790e720639..2f4eb9cf4fd9 100644 --- a/lib/addons/src/typings.d.ts +++ b/lib/addons/src/typings.d.ts @@ -1,5 +1 @@ declare module 'global'; - -declare module '@storybook/core' { - export type defaultDecorateStory = any; -} From a9bbbe6ab041da39f3a17ae667dc49e62046b2b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kai=20R=C3=B6der?= Date: Wed, 19 Dec 2018 11:13:10 +0100 Subject: [PATCH 014/120] Migration of @storybook/channel-websocket --- lib/channel-websocket/package.json | 6 +- lib/channel-websocket/src/index.js | 63 --------------------- lib/channel-websocket/src/index.ts | 78 ++++++++++++++++++++++++++ lib/channel-websocket/src/typings.d.ts | 1 + lib/channel-websocket/tsconfig.json | 9 +++ 5 files changed, 91 insertions(+), 66 deletions(-) delete mode 100644 lib/channel-websocket/src/index.js create mode 100644 lib/channel-websocket/src/index.ts create mode 100644 lib/channel-websocket/src/typings.d.ts create mode 100644 lib/channel-websocket/tsconfig.json diff --git a/lib/channel-websocket/package.json b/lib/channel-websocket/package.json index d50397074eed..fc9825b582ea 100644 --- a/lib/channel-websocket/package.json +++ b/lib/channel-websocket/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channel-websocket", - "version": "4.2.0-alpha.4", + "version": "4.2.0-alpha.2", "description": "", "keywords": [ "storybook" @@ -15,12 +15,12 @@ }, "license": "MIT", "main": "dist/index.js", - "jsnext:main": "src/index.js", + "types": "dist/index.d.ts", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/channels": "4.2.0-alpha.4", + "@storybook/channels": "4.2.0-alpha.2", "global": "^4.3.2" }, "publishConfig": { diff --git a/lib/channel-websocket/src/index.js b/lib/channel-websocket/src/index.js deleted file mode 100644 index 4c2907ea9963..000000000000 --- a/lib/channel-websocket/src/index.js +++ /dev/null @@ -1,63 +0,0 @@ -/* eslint-disable no-underscore-dangle */ - -import { WebSocket } from 'global'; -import Channel from '@storybook/channels'; - -export class WebsocketTransport { - constructor({ url, onError }) { - this._socket = null; - this._buffer = []; - this._handler = null; - this._isReady = false; - this._connect(url, onError); - } - - setHandler(handler) { - this._handler = handler; - } - - send(event) { - if (!this._isReady) { - this._sendLater(event); - } else { - this._sendNow(event); - } - } - - _sendLater(event) { - this._buffer.push(event); - } - - _sendNow(event) { - const data = JSON.stringify(event); - this._socket.send(data); - } - - _flush() { - const buffer = this._buffer; - this._buffer = []; - buffer.forEach(event => this.send(event)); - } - - _connect(url, onError) { - this._socket = new WebSocket(url); - this._socket.onopen = () => { - this._isReady = true; - this._flush(); - }; - this._socket.onmessage = e => { - const event = JSON.parse(e.data); - this._handler(event); - }; - this._socket.onerror = e => { - if (onError) { - onError(e); - } - }; - } -} - -export default function createChannel({ url, async, onError }) { - const transport = new WebsocketTransport({ url, onError }); - return new Channel({ transport, async }); -} diff --git a/lib/channel-websocket/src/index.ts b/lib/channel-websocket/src/index.ts new file mode 100644 index 000000000000..9a4121b7ad75 --- /dev/null +++ b/lib/channel-websocket/src/index.ts @@ -0,0 +1,78 @@ +import { WebSocket } from 'global'; +import { Channel, ChannelHandler } from '@storybook/channels'; + +type OnError = (message: Event) => void; + +interface WebsocketTransportArgs { + url: string; + onError: OnError; +} + +interface CreateChannelArgs { + url: string; + async: boolean; + onError: OnError; +} + +export class WebsocketTransport { + private socket: WebSocket; + private handler: ChannelHandler; + private buffer: string[] = []; + private isReady = false; + + constructor({ url, onError }: WebsocketTransportArgs) { + this.connect( + url, + onError + ); + } + + setHandler(handler: ChannelHandler) { + this.handler = handler; + } + + send(event: any) { + if (!this.isReady) { + this.sendLater(event); + } else { + this.sendNow(event); + } + } + + private sendLater(event: any) { + this.buffer.push(event); + } + + private sendNow(event: any) { + const data = JSON.stringify(event); + this.socket.send(data); + } + + private flush() { + const buffer = this.buffer; + this.buffer = []; + buffer.forEach(event => this.send(event)); + } + + private connect(url: string, onError: OnError) { + this.socket = new WebSocket(url); + this.socket.onopen = () => { + this.isReady = true; + this.flush(); + }; + this.socket.onmessage = e => { + const event = JSON.parse(e.data); + this.handler(event); + }; + this.socket.onerror = e => { + if (onError) { + onError(e); + } + }; + } +} + +export default function createChannel({ url, async, onError }: CreateChannelArgs) { + const transport = new WebsocketTransport({ url, onError }); + return new Channel({ transport, async }); +} diff --git a/lib/channel-websocket/src/typings.d.ts b/lib/channel-websocket/src/typings.d.ts new file mode 100644 index 000000000000..2f4eb9cf4fd9 --- /dev/null +++ b/lib/channel-websocket/src/typings.d.ts @@ -0,0 +1 @@ +declare module 'global'; diff --git a/lib/channel-websocket/tsconfig.json b/lib/channel-websocket/tsconfig.json new file mode 100644 index 000000000000..11744d2a8c36 --- /dev/null +++ b/lib/channel-websocket/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "rootDir": "./src" + }, + "include": [ + "src/**/*.ts" + ] +} From f080c5eb9e5b128f08183aae477c02f5e0b4561b Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Thu, 20 Dec 2018 12:14:25 +1100 Subject: [PATCH 015/120] Merge 4848-new-example-format into tech/overhaul-ui --- examples/official-storybook/config.js | 57 +++++++++++++- .../stories/core.stories.js | 76 ------------------- .../stories/core/async.examples.inactive.js | 15 ++++ .../stories/core/errors.examples.js | 18 +++++ .../stories/core/events.examples.js | 17 +++++ .../stories/core/parameters.examples.js | 28 +++++++ 6 files changed, 134 insertions(+), 77 deletions(-) delete mode 100644 examples/official-storybook/stories/core.stories.js create mode 100644 examples/official-storybook/stories/core/async.examples.inactive.js create mode 100644 examples/official-storybook/stories/core/errors.examples.js create mode 100644 examples/official-storybook/stories/core/events.examples.js create mode 100644 examples/official-storybook/stories/core/parameters.examples.js diff --git a/examples/official-storybook/config.js b/examples/official-storybook/config.js index 86df91977bed..ed93ba46fc2c 100644 --- a/examples/official-storybook/config.js +++ b/examples/official-storybook/config.js @@ -1,12 +1,13 @@ import React from 'react'; import { ThemeProvider } from 'emotion-theming'; import styled from '@emotion/styled'; -import { configure, addDecorator, addParameters } from '@storybook/react'; +import { storiesOf, configure, addDecorator, addParameters } from '@storybook/react'; import { themes } from '@storybook/components'; import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; import { withCssResources } from '@storybook/addon-cssresources'; import { withA11Y } from '@storybook/addon-a11y'; +import { withNotes } from '@storybook/addon-notes'; import 'react-chromatic/storybook-addon'; @@ -32,6 +33,7 @@ addHeadWarning('Dotenv file not loaded', 'dotenv-file-not-loaded'); addDecorator(withCssResources); addDecorator(withA11Y); +addDecorator(withNotes); const Reset = styled.div(({ theme }) => ({ fontFamily: theme.mainTextFace, @@ -64,6 +66,56 @@ function importAll(req) { req.keys().forEach(filename => req(filename)); } +// TODO -- somehow don't use window for this cross HMR storage +const { previousExports = {} } = window; // eslint-disable-line no-undef +window.previousExports = previousExports; // eslint-disable-line no-undef + +// The simplest version of examples would just export this function for users to use +function importAllExamples(context) { + const storyStore = window.__STORYBOOK_CLIENT_API__._storyStore; // eslint-disable-line no-undef, no-underscore-dangle + + context.keys().forEach(filename => { + // console.log(`checking ${filename}`); + const fileExports = context(filename); + const { default: component, ...examples } = fileExports; + let componentOptions = component; + if (component.prototype && component.prototype.isReactComponent) { + componentOptions = { component }; + } + const kindName = componentOptions.title || componentOptions.component.displayName; + + if (previousExports[filename]) { + // console.log(`found previousExports ${filename}`); + if (previousExports[filename] === fileExports) { + // console.log(`exports have not changed ${filename}`); + return; + } + + // Otherwise clear this kind + storyStore.removeStoryKind(kindName); + storyStore.incrementRevision(); + } + + // We pass true here to avoid the warning about HMR. It's cool clientApi, we got this + const kind = storiesOf(kindName, true); + + (componentOptions.decorators || []).forEach(decorator => { + kind.addDecorator(decorator); + }); + if (componentOptions.parameters) { + kind.addParameters(componentOptions.parameters); + } + + Object.keys(examples).forEach(key => { + const example = examples[key]; + const { title = key, parameters } = example; + kind.add(title, example, parameters); + }); + + previousExports[filename] = fileExports; + }); +} + function loadStories() { let req; req = require.context('../../lib/ui/src', true, /\.stories\.js$/); @@ -74,6 +126,9 @@ function loadStories() { req = require.context('./stories', true, /\.stories\.js$/); importAll(req); + + req = require.context('./stories', true, /\.examples\.js$/); + importAllExamples(req); } configure(loadStories, module); diff --git a/examples/official-storybook/stories/core.stories.js b/examples/official-storybook/stories/core.stories.js deleted file mode 100644 index f004cb913f38..000000000000 --- a/examples/official-storybook/stories/core.stories.js +++ /dev/null @@ -1,76 +0,0 @@ -import React from 'react'; -import { storiesOf, addParameters } from '@storybook/react'; -import addons from '@storybook/addons'; -import Events from '@storybook/core-events'; -import { Button } from '@storybook/components'; -import { navigator } from 'global'; - -const globalParameter = 'globalParameter'; -const chapterParameter = 'chapterParameter'; -const storyParameter = 'storyParameter'; - -addParameters({ globalParameter }); - -storiesOf('Core|Parameters', module) - .addParameters({ chapterParameter }) - .add( - 'passed to story', - ({ parameters: { fileName, ...parameters } }) => ( -
-

Parameters are

- 
{JSON.stringify(parameters, null, 2)}
-
- ), - { - storyParameter, - } - ); - -storiesOf('Core|Parameters', module) - .addDecorator(fn => fn({ decoratorParameter: 'decoratorParameter' })) - .addParameters({ chapterParameter }) - .add('adds data to storyFn', (...params) => 
{JSON.stringify(params, null, 2)}
, { - storyParameter, - }); - -let timesClicked = 0; -const increment = () => { - timesClicked += 1; - addons.getChannel().emit(Events.FORCE_RE_RENDER); -}; - -storiesOf('Core|Events', module).add('Force re-render', () => ( - -)); - -// Skip these stories in storyshots, they will throw -- NOTE: would rather do this -// via a params API, see https://github.com/storybooks/storybook/pull/3967#issuecomment-411616023 -if ( - navigator && - navigator.userAgent && - !(navigator.userAgent.indexOf('jsdom') > -1) && - !(navigator.userAgent.indexOf('Chromatic') > -1) -) { - storiesOf('Core|Errors', module) - .add('story throws exception', () => { - throw new Error('error'); - }) - // Story does not return something react can render - .add('story errors', () => null); -} - -// storiesOf('Core|Async', module).add('storyFn returns a Promise', () => -// Promise.resolve(
I Promise!
) -// ); - -// const AsyncStories = storiesOf('Core|Async', module); - -// setTimeout(() => { -// AsyncStories.add('.add called in setTimeout', () =>
Added late
); -// }); - -// import('fast-deep-equal').then(m => { -// storiesOf('Core|Async', module).add('storyOf is added async', () => ( -//
{m.default('foo', 'foo') ? 'TRUE' : 'FALSE'}
-// )); -// }); diff --git a/examples/official-storybook/stories/core/async.examples.inactive.js b/examples/official-storybook/stories/core/async.examples.inactive.js new file mode 100644 index 000000000000..206bbdb2b1ca --- /dev/null +++ b/examples/official-storybook/stories/core/async.examples.inactive.js @@ -0,0 +1,15 @@ +// storiesOf('Core|Async', module).add('storyFn returns a Promise', () => +// Promise.resolve(
I Promise!
) +// ); + +// const AsyncStories = storiesOf('Core|Async', module); + +// setTimeout(() => { +// AsyncStories.add('.add called in setTimeout', () =>
Added late
); +// }); + +// import('fast-deep-equal').then(m => { +// storiesOf('Core|Async', module).add('storyOf is added async', () => ( +//
{m.default('foo', 'foo') ? 'TRUE' : 'FALSE'}
+// )); +// }); diff --git a/examples/official-storybook/stories/core/errors.examples.js b/examples/official-storybook/stories/core/errors.examples.js new file mode 100644 index 000000000000..ff6f94ac0e79 --- /dev/null +++ b/examples/official-storybook/stories/core/errors.examples.js @@ -0,0 +1,18 @@ +export default { + title: 'Core|Errors', +}; + +export const exception = () => { + throw new Error('error'); +}; +exception.title = 'story throws exception'; +exception.parameters = { + storyshots: { disabled: true }, +}; + +export const errors = () => null; +errors.title = 'story errors'; +errors.parameters = { + notes: 'Story does not return something react can render', + storyshots: { disabled: true }, +}; diff --git a/examples/official-storybook/stories/core/events.examples.js b/examples/official-storybook/stories/core/events.examples.js new file mode 100644 index 000000000000..2cfc555d1054 --- /dev/null +++ b/examples/official-storybook/stories/core/events.examples.js @@ -0,0 +1,17 @@ +import React from 'react'; +import addons from '@storybook/addons'; +import Events from '@storybook/core-events'; +import { Button } from '@storybook/components'; + +let timesClicked = 0; +const increment = () => { + timesClicked += 1; + addons.getChannel().emit(Events.FORCE_RE_RENDER); +}; + +export default { + title: 'Core|Events', +}; + +export const force = () => ; +force.title = 'Force re-render'; diff --git a/examples/official-storybook/stories/core/parameters.examples.js b/examples/official-storybook/stories/core/parameters.examples.js new file mode 100644 index 000000000000..61a5d8a91fb7 --- /dev/null +++ b/examples/official-storybook/stories/core/parameters.examples.js @@ -0,0 +1,28 @@ +import React from 'react'; + +// We would need to add this in config.js idomatically however that would make this file a bit confusing +import { addParameters } from '@storybook/react'; + +const globalParameter = 'globalParameter'; +const chapterParameter = 'chapterParameter'; +const decoratorParameter = 'decoratorParameter'; +const storyParameter = 'storyParameter'; + +addParameters({ globalParameter }); + +export default { + title: 'Core|Parameters', + decorators: [fn => fn({ decoratorParameter })], + parameters: { + chapterParameter, + }, +}; + +// I'm not sure what we should recommend regarding propTypes? are they a good idea for examples? +// Given we sort of control the props, should we export a prop type? +// eslint-disable-next-line react/prop-types +export const passed = ({ parameters: { fileName, ...parameters } }) => ( +
Parameters are {JSON.stringify(parameters)}
+); +passed.title = 'passed to story'; +passed.parameters = { storyParameter }; From 9f0ce22c72b219b7c6440e09df250eec800359e0 Mon Sep 17 00:00:00 2001 From: Oliver Hoff Date: Thu, 20 Dec 2018 03:50:08 +0100 Subject: [PATCH 016/120] improve vue integration --- .../src/frameworks/vue/renderTree.js | 11 ++- app/vue/src/client/preview/index.js | 74 +++++++++++++++---- app/vue/src/client/preview/render.js | 24 ++---- .../addon-centered.stories.storyshot | 26 ++----- .../custom-decorators.stories.storyshot | 38 +++------- 5 files changed, 88 insertions(+), 85 deletions(-) diff --git a/addons/storyshots/storyshots-core/src/frameworks/vue/renderTree.js b/addons/storyshots/storyshots-core/src/frameworks/vue/renderTree.js index 888c9820365f..424070b78931 100644 --- a/addons/storyshots/storyshots-core/src/frameworks/vue/renderTree.js +++ b/addons/storyshots/storyshots-core/src/frameworks/vue/renderTree.js @@ -2,12 +2,15 @@ import Vue from 'vue'; function getRenderedTree(story, context) { - const storyElement = story.render(context); + const component = story.render(context); - const Constructor = Vue.extend(storyElement); - const vm = new Constructor().$mount(); + const vm = new Vue({ + render(h) { + return h(component); + }, + }); - return vm.$el; + return vm.$mount().$el; } export default getRenderedTree; diff --git a/app/vue/src/client/preview/index.js b/app/vue/src/client/preview/index.js index b859c3dd1c82..819562448297 100644 --- a/app/vue/src/client/preview/index.js +++ b/app/vue/src/client/preview/index.js @@ -1,30 +1,72 @@ import { start } from '@storybook/core/client'; +import Vue from 'vue'; import './globals'; import render from './render'; -const createWrapperComponent = Target => ({ - functional: true, - render(h, c) { - return h(Target, c.data, c.children); - }, -}); -const decorateStory = (getStory, decorators) => - decorators.reduce( +export const WRAPS = 'STORYBOOK_WRAPS'; +export const VALUES = 'STORYBOOK_VALUES'; + +function extractProps(component) { + return Object.entries(component.options.props || {}) + .map(([name, def]) => ({ [name]: def.default })) + .reduce((wrap, prop) => ({ ...wrap, ...prop }), {}); +} + +function prepare(rawStory, innerStory) { + let story = rawStory; + // eslint-disable-next-line no-underscore-dangle + if (!story._isVue) { + if (typeof story === 'string') { + story = { template: story }; + } + if (innerStory) { + story.components = { ...(story.components || {}), story: innerStory }; + } + story = Vue.extend(story); + } else if (story.options[WRAPS]) { + return story; + } + + return Vue.extend({ + [WRAPS]: story, + [VALUES]: { ...(innerStory ? innerStory.options[VALUES] : {}), ...extractProps(story) }, + functional: true, + render(h, { data, parent, children }) { + return h( + story, + { + ...data, + props: { ...(data.props || {}), ...(parent.$root[VALUES] || {}) }, + }, + children + ); + }, + }); +} + +function decorateStory(getStory, decorators) { + return decorators.reduce( (decorated, decorator) => context => { - const story = () => decorated(context); - let decoratedStory = decorator(story, context); + let story; + const decoratedStory = decorator(() => { + story = decorated(context); + return story; + }, context); + + if (!story) { + story = decorated(context); + } - if (typeof decoratedStory === 'string') { - decoratedStory = { template: decoratedStory }; + if (decoratedStory === story) { + return story; } - decoratedStory.components = decoratedStory.components || {}; - decoratedStory.components.story = createWrapperComponent(story()); - return decoratedStory; + return prepare(decoratedStory, story); }, - getStory + context => prepare(getStory(context)) ); +} const { clientApi, configApi, forceReRender } = start(render, { decorateStory }); diff --git a/app/vue/src/client/preview/render.js b/app/vue/src/client/preview/render.js index 7204bfccae65..24ba65417a35 100644 --- a/app/vue/src/client/preview/render.js +++ b/app/vue/src/client/preview/render.js @@ -1,24 +1,17 @@ import { stripIndents } from 'common-tags'; import Vue from 'vue'; +import { VALUES } from '.'; let root = null; -function getComponentProxy(component) { - return Object.entries(component.props || {}) - .map(([name, def]) => ({ [name]: def.default })) - .reduce((wrap, prop) => ({ ...wrap, ...prop }), {}); -} - -function renderRoot(component, proxy) { +function renderRoot(component) { root = new Vue({ el: '#root', - beforeCreate() { - this.proxy = proxy; + data() { + return { [VALUES]: component.options[VALUES] }; }, - render(h) { - const props = this.proxy; - return h('div', { attrs: { id: 'root' } }, [h(component, { props })]); + return h('div', { attrs: { id: 'root' } }, [h(component)]); }, }); } @@ -49,15 +42,12 @@ export default function render({ showMain(); - const proxy = getComponentProxy(component); - // at component creation || refresh by HMR if (!root || !forceRender) { if (root) root.$destroy(); - renderRoot(component, proxy); + renderRoot(component); } else { - root.proxy = proxy; - root.$forceUpdate(); + root[VALUES] = component.options[VALUES]; } } diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot index 66bdedf3c917..d19663d8679c 100644 --- a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot +++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot @@ -7,28 +7,12 @@ exports[`Storyshots Addon|Centered rounded 1`] = `
-
-
-
-
- -
-
-
-
+ A Button with rounded edges! +
`; diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot index 810bf9fab812..eb88673228af 100644 --- a/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot +++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot @@ -5,21 +5,13 @@ exports[`Storyshots Custom|Decorator for Vue render 1`] = ` style="border: medium solid blue;" >
-
-
- -
-
+ renders component: MyButton! +
`; @@ -29,22 +21,14 @@ exports[`Storyshots Custom|Decorator for Vue template 1`] = ` style="border: medium solid blue;" >
-
-
- -
-
+ MyButton with template! +
`; From 9b2e4243d2a21517c137d0b00c43a190b1d765aa Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Thu, 20 Dec 2018 14:13:08 +1100 Subject: [PATCH 017/120] Fix up parameters examples --- .../stories/core/parameters.examples.js | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/examples/official-storybook/stories/core/parameters.examples.js b/examples/official-storybook/stories/core/parameters.examples.js index 61a5d8a91fb7..d55ceebc4512 100644 --- a/examples/official-storybook/stories/core/parameters.examples.js +++ b/examples/official-storybook/stories/core/parameters.examples.js @@ -3,26 +3,26 @@ import React from 'react'; // We would need to add this in config.js idomatically however that would make this file a bit confusing import { addParameters } from '@storybook/react'; -const globalParameter = 'globalParameter'; -const chapterParameter = 'chapterParameter'; -const decoratorParameter = 'decoratorParameter'; -const storyParameter = 'storyParameter'; - -addParameters({ globalParameter }); +addParameters({ globalParameter: 'globalParameter' }); export default { title: 'Core|Parameters', - decorators: [fn => fn({ decoratorParameter })], + decorators: [fn => fn({ parameters: { decoratorParameter: 'decoratorParameter' } })], parameters: { - chapterParameter, + chapterParameter: 'chapterParameter', }, }; // I'm not sure what we should recommend regarding propTypes? are they a good idea for examples? // Given we sort of control the props, should we export a prop type? -// eslint-disable-next-line react/prop-types -export const passed = ({ parameters: { fileName, ...parameters } }) => ( -
Parameters are {JSON.stringify(parameters)}
+export const passed = ({ + // eslint-disable-next-line react/prop-types + parameters: { globalParameter, chapterParameter, decoratorParameter, storyParameter }, +}) => ( +
+ Parameters are{' '} + {JSON.stringify({ globalParameter, chapterParameter, decoratorParameter, storyParameter })} +
); passed.title = 'passed to story'; -passed.parameters = { storyParameter }; +passed.parameters = { storyParameter: 'storyParameter' }; From e8dc5313b0a6705cd69b4f598585413f954ffc08 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Thu, 20 Dec 2018 14:16:17 +1100 Subject: [PATCH 018/120] Change .examples -> .stories --- examples/official-storybook/config.js | 15 +++++++-------- ...ples.inactive.js => async.stories.inactive.js} | 0 .../{errors.examples.js => errors.stories.js} | 0 .../{events.examples.js => events.stories.js} | 0 ...rameters.examples.js => parameters.stories.js} | 0 5 files changed, 7 insertions(+), 8 deletions(-) rename examples/official-storybook/stories/core/{async.examples.inactive.js => async.stories.inactive.js} (100%) rename examples/official-storybook/stories/core/{errors.examples.js => errors.stories.js} (100%) rename examples/official-storybook/stories/core/{events.examples.js => events.stories.js} (100%) rename examples/official-storybook/stories/core/{parameters.examples.js => parameters.stories.js} (100%) diff --git a/examples/official-storybook/config.js b/examples/official-storybook/config.js index ed93ba46fc2c..6e82f4ece176 100644 --- a/examples/official-storybook/config.js +++ b/examples/official-storybook/config.js @@ -62,21 +62,23 @@ addParameters({ }, }); -function importAll(req) { - req.keys().forEach(filename => req(filename)); -} - // TODO -- somehow don't use window for this cross HMR storage const { previousExports = {} } = window; // eslint-disable-line no-undef window.previousExports = previousExports; // eslint-disable-line no-undef // The simplest version of examples would just export this function for users to use -function importAllExamples(context) { +function importAll(context) { const storyStore = window.__STORYBOOK_CLIENT_API__._storyStore; // eslint-disable-line no-undef, no-underscore-dangle context.keys().forEach(filename => { // console.log(`checking ${filename}`); const fileExports = context(filename); + + // A old-style story file + if (!fileExports.default) { + return; + } + const { default: component, ...examples } = fileExports; let componentOptions = component; if (component.prototype && component.prototype.isReactComponent) { @@ -126,9 +128,6 @@ function loadStories() { req = require.context('./stories', true, /\.stories\.js$/); importAll(req); - - req = require.context('./stories', true, /\.examples\.js$/); - importAllExamples(req); } configure(loadStories, module); diff --git a/examples/official-storybook/stories/core/async.examples.inactive.js b/examples/official-storybook/stories/core/async.stories.inactive.js similarity index 100% rename from examples/official-storybook/stories/core/async.examples.inactive.js rename to examples/official-storybook/stories/core/async.stories.inactive.js diff --git a/examples/official-storybook/stories/core/errors.examples.js b/examples/official-storybook/stories/core/errors.stories.js similarity index 100% rename from examples/official-storybook/stories/core/errors.examples.js rename to examples/official-storybook/stories/core/errors.stories.js diff --git a/examples/official-storybook/stories/core/events.examples.js b/examples/official-storybook/stories/core/events.stories.js similarity index 100% rename from examples/official-storybook/stories/core/events.examples.js rename to examples/official-storybook/stories/core/events.stories.js diff --git a/examples/official-storybook/stories/core/parameters.examples.js b/examples/official-storybook/stories/core/parameters.stories.js similarity index 100% rename from examples/official-storybook/stories/core/parameters.examples.js rename to examples/official-storybook/stories/core/parameters.stories.js From 670e1abb1d4d3b228170df0ab69d82f76f63706e Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 20 Dec 2018 10:31:11 +0100 Subject: [PATCH 019/120] FIX snapshots --- .../info/src/__snapshots__/index.test.js.snap | 74 ++++++++++++++++++- 1 file changed, 73 insertions(+), 1 deletion(-) diff --git a/addons/info/src/__snapshots__/index.test.js.snap b/addons/info/src/__snapshots__/index.test.js.snap index a29309b5ea3e..20cadfe57bc2 100644 --- a/addons/info/src/__snapshots__/index.test.js.snap +++ b/addons/info/src/__snapshots__/index.test.js.snap @@ -4268,7 +4268,79 @@ exports[`addon Info should render component description if story name matches co } >
- Awesome test component description +

+

+ Awesome test component description +

+ +

+

+ with markdown support +

+ +

+

+ + bold + + + + cursive + + +
+

Date: Thu, 20 Dec 2018 15:44:29 +0200 Subject: [PATCH 020/120] Fixed isUIHidden param. --- app/react-native/src/preview/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/react-native/src/preview/index.js b/app/react-native/src/preview/index.js index 1f0f7f6ad653..d1a946a26bf0 100644 --- a/app/react-native/src/preview/index.js +++ b/app/react-native/src/preview/index.js @@ -114,7 +114,7 @@ export default class Preview { stories={preview._stories} events={channel} url={webUrl} - isUIOpen={params.isUIOpen} + isUIHidden={params.isUIHidden} tabOpen={params.tabOpen} getInitialStory={ setInitialStory From 192bfb3b7d3621995bc4dd2916bed5b777f01cc6 Mon Sep 17 00:00:00 2001 From: Gytis Vinclovas Date: Thu, 20 Dec 2018 16:20:30 +0200 Subject: [PATCH 021/120] Disabling warning if story is not set in async storage. --- app/react-native/src/preview/index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/app/react-native/src/preview/index.js b/app/react-native/src/preview/index.js index 1f0f7f6ad653..3f1e531c451a 100644 --- a/app/react-native/src/preview/index.js +++ b/app/react-native/src/preview/index.js @@ -198,14 +198,12 @@ export default class Preview { _checkStory(selection) { if (!selection || typeof selection !== 'object' || !selection.kind || !selection.story) { - console.warn('invalid storybook selection'); // eslint-disable-line no-console return null; } const story = this._getStory(selection); if (story.storyFn === null) { - console.warn('invalid storybook selection'); // eslint-disable-line no-console return null; } From a70341b62bfaeeee75a60d653bef92bf86dd9f55 Mon Sep 17 00:00:00 2001 From: Oliver Hoff Date: Thu, 20 Dec 2018 12:39:42 +0100 Subject: [PATCH 022/120] avoid unnecessary recreation of root vue instance --- app/vue/src/client/preview/index.js | 5 ++-- app/vue/src/client/preview/render.js | 43 +++++++++++++++------------- 2 files changed, 25 insertions(+), 23 deletions(-) diff --git a/app/vue/src/client/preview/index.js b/app/vue/src/client/preview/index.js index 819562448297..b99b4f8f184d 100644 --- a/app/vue/src/client/preview/index.js +++ b/app/vue/src/client/preview/index.js @@ -2,10 +2,9 @@ import { start } from '@storybook/core/client'; import Vue from 'vue'; import './globals'; -import render from './render'; +import render, { VALUES } from './render'; export const WRAPS = 'STORYBOOK_WRAPS'; -export const VALUES = 'STORYBOOK_VALUES'; function extractProps(component) { return Object.entries(component.options.props || {}) @@ -37,7 +36,7 @@ function prepare(rawStory, innerStory) { story, { ...data, - props: { ...(data.props || {}), ...(parent.$root[VALUES] || {}) }, + props: { ...(data.props || {}), ...parent.$root[VALUES] }, }, children ); diff --git a/app/vue/src/client/preview/render.js b/app/vue/src/client/preview/render.js index 24ba65417a35..e3227b3e71f9 100644 --- a/app/vue/src/client/preview/render.js +++ b/app/vue/src/client/preview/render.js @@ -1,20 +1,21 @@ import { stripIndents } from 'common-tags'; import Vue from 'vue'; -import { VALUES } from '.'; - -let root = null; - -function renderRoot(component) { - root = new Vue({ - el: '#root', - data() { - return { [VALUES]: component.options[VALUES] }; - }, - render(h) { - return h('div', { attrs: { id: 'root' } }, [h(component)]); - }, - }); -} + +export const COMPONENT = 'STORYBOOK_COMPONENT'; +export const VALUES = 'STORYBOOK_VALUES'; + +const root = new Vue({ + data() { + return { + [COMPONENT]: undefined, + [VALUES]: {}, + }; + }, + render(h) { + const children = this[COMPONENT] ? [h(this[COMPONENT])] : undefined; + return h('div', { attrs: { id: 'root' } }, children); + }, +}); export default function render({ story, @@ -43,11 +44,13 @@ export default function render({ showMain(); // at component creation || refresh by HMR - if (!root || !forceRender) { - if (root) root.$destroy(); + if (!root[COMPONENT] || !forceRender) { + root[COMPONENT] = component; + } + + root[VALUES] = component.options[VALUES]; - renderRoot(component); - } else { - root[VALUES] = component.options[VALUES]; + if (!root.$el) { + root.$mount('#root'); } } From 96411108452801c474ac95574579dd4d1bcf0f6e Mon Sep 17 00:00:00 2001 From: Oliver Hoff Date: Thu, 20 Dec 2018 15:33:27 +0100 Subject: [PATCH 023/120] update outdated & not working vue knob stories --- .../addon-knobs.stories.storyshot | 6 +- .../src/stories/addon-knobs.stories.js | 81 ++++++++++++------- 2 files changed, 52 insertions(+), 35 deletions(-) diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot index e851776c1def..75b0ecf029dc 100644 --- a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot +++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot @@ -2,7 +2,7 @@ exports[`Storyshots Addon|Knobs All knobs 1`] = `

My name is Jane, @@ -46,8 +46,6 @@ exports[`Storyshots Addon|Knobs Simple 1`] = ` exports[`Storyshots Addon|Knobs XSS safety 1`] = `
- - <img src=x onerror="alert('XSS Attack')" > - + <img src=x onerror="alert('XSS Attack')" >
`; diff --git a/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js b/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js index 60f645265961..c317c0c8a7dc 100644 --- a/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js +++ b/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js @@ -38,53 +38,72 @@ storiesOf('Addon|Knobs', module) }, })) .add('All knobs', () => { - const name = text('Name', 'Jane'); - const stock = number('Stock', 20, { - range: true, - min: 0, - max: 30, - step: 5, - }); const fruits = { Apple: 'apples', Banana: 'bananas', Cherry: 'cherries', }; - const fruit = select('Fruit', fruits, 'apples'); - const price = number('Price', 2.25); - - const colour = color('Border', 'deeppink'); - const today = date('Today', new Date('Jan 20 2017 GMT+0')); - const items = array('Items', ['Laptop', 'Book', 'Whiskey']); - const nice = boolean('Nice', true); - - const stockMessage = stock - ? `I have a stock of ${stock} ${fruit}, costing $${price} each.` - : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`; - const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!'; - const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' }; button('Arbitrary action', action('You clicked it!')); return { + props: { + name: { default: text('Name', 'Jane') }, + stock: { + default: number('Stock', 20, { + range: true, + min: 0, + max: 30, + step: 5, + }), + }, + fruit: { default: select('Fruit', fruits, 'apples') }, + price: { default: number('Price', 2.25) }, + colour: { default: color('Border', 'deeppink') }, + today: { default: date('Today', new Date('Jan 20 2017 GMT+0')) }, + // this is necessary, because we cant use arrays/objects directly in vue prop default values + // a factory function is required, but we need to make sure the knob is only called once + items: { default: (items => () => items)(array('Items', ['Laptop', 'Book', 'Whiskey'])) }, + nice: { default: boolean('Nice', true) }, + }, + data: () => ({ + dateOptions: { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' }, + }), + computed: { + stockMessage() { + return this.stock + ? `I have a stock of ${this.stock} ${this.fruit}, costing $${this.price} each.` + : `I'm out of ${this.fruit}${this.nice ? ', Sorry!' : '.'}`; + }, + salutation() { + return this.nice ? 'Nice to meet you!' : 'Leave me alone!'; + }, + formattedDate() { + return new Date(this.today).toLocaleDateString('en-US', this.dateOptions); + }, + style() { + return { + 'border-color': this.colour, + }; + }, + }, template: ` -
-

My name is ${name},

-

today is ${new Date(today).toLocaleDateString('en-US', dateOptions)}

-

${stockMessage}

+
+

My name is {{ name }},

+

today is {{ formattedDate }}

+

{{ stockMessage }}

Also, I have:

    - ${items.map(item => `
  • ${item}
    • `).join('')} +
  • {{ item }}
-

${salutation}

+

{{ salutation }}

`, }; }) .add('XSS safety', () => ({ - template: ` -
- ${text('Rendered string', '')} -
- `, + props: { + text: { default: text('Rendered string', '') }, + }, + template: '
', })); From 11a8ca57f1e1a456760f6b5bd3427a1c3d18d881 Mon Sep 17 00:00:00 2001 From: Oliver Hoff Date: Thu, 20 Dec 2018 17:13:27 +0100 Subject: [PATCH 024/120] fix handling of factories for default values when extracting props --- app/vue/README.md | 17 +++++++++++++++++ app/vue/src/client/preview/index.js | 7 +------ app/vue/src/client/preview/util.js | 20 ++++++++++++++++++++ 3 files changed, 38 insertions(+), 6 deletions(-) create mode 100644 app/vue/src/client/preview/util.js diff --git a/app/vue/README.md b/app/vue/README.md index 81cbb180f656..d3a62ce8b895 100644 --- a/app/vue/README.md +++ b/app/vue/README.md @@ -29,3 +29,20 @@ You can also build a [static version](https://storybook.js.org/basics/exporting- ## Vue Notes - When using global custom components or extension (e.g `Vue.use`). You will need to declare those in the `./storybook/config.js`. + +## Known Limitations + +In Storybook story and decorator components you can not access the Vue instance +in factory functions for default prop values: + +```js +{ + props: { + foo: { + default() { + return this.bar; // does not work! + } + } + } +} +``` diff --git a/app/vue/src/client/preview/index.js b/app/vue/src/client/preview/index.js index b99b4f8f184d..5dfda555955c 100644 --- a/app/vue/src/client/preview/index.js +++ b/app/vue/src/client/preview/index.js @@ -3,15 +3,10 @@ import Vue from 'vue'; import './globals'; import render, { VALUES } from './render'; +import { extractProps } from './util'; export const WRAPS = 'STORYBOOK_WRAPS'; -function extractProps(component) { - return Object.entries(component.options.props || {}) - .map(([name, def]) => ({ [name]: def.default })) - .reduce((wrap, prop) => ({ ...wrap, ...prop }), {}); -} - function prepare(rawStory, innerStory) { let story = rawStory; // eslint-disable-next-line no-underscore-dangle diff --git a/app/vue/src/client/preview/util.js b/app/vue/src/client/preview/util.js new file mode 100644 index 000000000000..77bc1cddf2f7 --- /dev/null +++ b/app/vue/src/client/preview/util.js @@ -0,0 +1,20 @@ +function getType(fn) { + const match = fn && fn.toString().match(/^\s*function (\w+)/); + return match ? match[1] : ''; +} + +// https://github.com/vuejs/vue/blob/dev/src/core/util/props.js#L92 +function resolveDefault({ type, default: def }) { + if (typeof def === 'function' && getType(type) !== 'Function') { + // known limitation: we dont have the component instance to pass + return def.call(); + } + + return def; +} + +export function extractProps(component) { + return Object.entries(component.options.props || {}) + .map(([name, prop]) => ({ [name]: resolveDefault(prop) })) + .reduce((wrap, prop) => ({ ...wrap, ...prop }), {}); +} From 637128db94c2935c03f5413317db8cbd279fe26b Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 20 Dec 2018 14:13:28 -0800 Subject: [PATCH 025/120] 4.2.0-alpha.6 changelog --- CHANGELOG.md | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index fd45a155c5ab..9fe1a3d0c5c9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,29 @@ +## 4.2.0-alpha.6 (December 20, 2018) + +### Features + +* React-Native: Change on-device layout to absolute position ([#4962](https://github.com/storybooks/storybook/pull/4962)) +* Addon-Info: add css classes for style overrides ([#4589](https://github.com/storybooks/storybook/pull/4589)) + +### Bug Fixes + +* Addon-Info: Display description when story name matches component ([#4863](https://github.com/storybooks/storybook/pull/4863)) +* React-Native: Disable warning if story is not set in async storage ([#5068](https://github.com/storybooks/storybook/pull/5068)) +* React-Native: Fixed isUIHidden param ([#5067](https://github.com/storybooks/storybook/pull/5067)) +* Vue: Fix reloading and story decoration ([#5057](https://github.com/storybooks/storybook/pull/5057)) + +### Maintenance + +* TypeScript: migrate @storybook/channels to typescript ([#4977](https://github.com/storybooks/storybook/pull/4977)) + +### Dependency Upgrades + +* Bump babel-plugin-macros from 2.4.2 to 2.4.3 ([#5060](https://github.com/storybooks/storybook/pull/5060)) +* Bump @babel/core from 7.2.0 to 7.2.2 ([#5059](https://github.com/storybooks/storybook/pull/5059)) +* Bump ember-cli-htmlbars-inline-precompile from 1.0.5 to 2.1.0 ([#5064](https://github.com/storybooks/storybook/pull/5064)) +* Bump react-test-renderer from 16.6.3 to 16.7.0 ([#5063](https://github.com/storybooks/storybook/pull/5063)) +* Bump autoprefixer from 9.4.2 to 9.4.3 ([#5061](https://github.com/storybooks/storybook/pull/5061)) + ## 4.2.0-alpha.5 (December 19, 2018) ### Bug Fixes From bb9b7b3d5b996ed037001f57ca60bd26ac5c1326 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 20 Dec 2018 14:20:25 -0800 Subject: [PATCH 026/120] v4.2.0-alpha.6 --- addons/a11y/package.json | 10 ++-- addons/actions/package.json | 8 +-- addons/backgrounds/package.json | 6 +-- addons/centered/package.json | 2 +- addons/cssresources/package.json | 8 +-- addons/events/package.json | 6 +-- addons/google-analytics/package.json | 4 +- addons/graphql/package.json | 2 +- addons/info/package.json | 8 +-- addons/jest/package.json | 6 +-- addons/knobs/package.json | 8 +-- addons/links/package.json | 8 +-- addons/notes/package.json | 4 +- addons/ondevice-backgrounds/package.json | 4 +- addons/ondevice-knobs/package.json | 4 +- addons/ondevice-notes/package.json | 4 +- addons/options/package.json | 4 +- .../storyshots/storyshots-core/package.json | 10 ++-- .../storyshots-puppeteer/package.json | 4 +- addons/storysource/package.json | 6 +-- addons/viewport/package.json | 8 +-- app/angular/package.json | 6 +-- app/ember/package.json | 4 +- app/html/package.json | 4 +- app/marko/package.json | 4 +- app/mithril/package.json | 4 +- app/polymer/package.json | 4 +- app/preact/package.json | 4 +- app/react-native/package.json | 14 ++--- app/react/package.json | 6 +-- app/riot/package.json | 4 +- app/svelte/package.json | 4 +- app/vue/package.json | 4 +- examples/angular-cli/package.json | 26 ++++----- examples/cra-kitchen-sink/package.json | 32 +++++------ examples/ember-cli/package.json | 26 ++++----- examples/html-kitchen-sink/package.json | 36 ++++++------- examples/marko-cli/package.json | 14 ++--- examples/mithril-kitchen-sink/package.json | 26 ++++----- examples/official-storybook/package.json | 46 ++++++++-------- examples/polymer-cli/package.json | 20 +++---- examples/preact-kitchen-sink/package.json | 24 ++++----- examples/riot-kitchen-sink/package.json | 26 ++++----- examples/svelte-kitchen-sink/package.json | 26 ++++----- examples/vue-kitchen-sink/package.json | 26 ++++----- lerna.json | 2 +- lib/addons/package.json | 6 +-- lib/channel-postmessage/package.json | 4 +- lib/channel-websocket/package.json | 4 +- lib/channels/package.json | 2 +- lib/cli/package.json | 54 +++++++++---------- lib/client-logger/package.json | 2 +- lib/codemod/package.json | 2 +- lib/components/package.json | 8 +-- lib/core-events/package.json | 2 +- lib/core/package.json | 14 ++--- lib/node-logger/package.json | 2 +- lib/ui/package.json | 6 +-- 58 files changed, 311 insertions(+), 311 deletions(-) diff --git a/addons/a11y/package.json b/addons/a11y/package.json index 2885fd370f8a..ac4299c7bce3 100644 --- a/addons/a11y/package.json +++ b/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "a11y addon for storybook", "keywords": [ "a11y", @@ -26,10 +26,10 @@ }, "dependencies": { "@emotion/styled": "^0.10.6", - "@storybook/addons": "4.2.0-alpha.5", - "@storybook/client-logger": "4.2.0-alpha.5", - "@storybook/components": "4.2.0-alpha.5", - "@storybook/core-events": "4.2.0-alpha.5", + "@storybook/addons": "4.2.0-alpha.6", + "@storybook/client-logger": "4.2.0-alpha.6", + "@storybook/components": "4.2.0-alpha.6", + "@storybook/core-events": "4.2.0-alpha.6", "axe-core": "^3.1.2", "core-js": "^2.5.7", "global": "^4.3.2", diff --git a/addons/actions/package.json b/addons/actions/package.json index 0e64ec1ffab7..a04cd52c9267 100644 --- a/addons/actions/package.json +++ b/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "Action Logger addon for storybook", "keywords": [ "storybook" @@ -23,9 +23,9 @@ "@emotion/core": "^0.13.1", "@emotion/provider": "^0.11.2", "@emotion/styled": "^0.10.6", - "@storybook/addons": "4.2.0-alpha.5", - "@storybook/components": "4.2.0-alpha.5", - "@storybook/core-events": "4.2.0-alpha.5", + "@storybook/addons": "4.2.0-alpha.6", + "@storybook/components": "4.2.0-alpha.6", + "@storybook/core-events": "4.2.0-alpha.6", "core-js": "^2.5.7", "deep-equal": "^1.0.1", "global": "^4.3.2", diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json index 8104e1e546de..27c2053f144b 100644 --- a/addons/backgrounds/package.json +++ b/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "A storybook addon to show different backgrounds for your preview", "keywords": [ "addon", @@ -25,8 +25,8 @@ }, "dependencies": { "@emotion/styled": "^0.10.6", - "@storybook/addons": "4.2.0-alpha.5", - "@storybook/core-events": "4.2.0-alpha.5", + "@storybook/addons": "4.2.0-alpha.6", + "@storybook/core-events": "4.2.0-alpha.6", "core-js": "^2.5.7", "eventemitter3": "^3.1.0", "global": "^4.3.2", diff --git a/addons/centered/package.json b/addons/centered/package.json index dd275ad1e761..e318e01ec0ab 100644 --- a/addons/centered/package.json +++ b/addons/centered/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-centered", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "Storybook decorator to center components", "keywords": [ "addon", diff --git a/addons/cssresources/package.json b/addons/cssresources/package.json index a2ecdcee1c3e..1a61353d09c5 100644 --- a/addons/cssresources/package.json +++ b/addons/cssresources/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-cssresources", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "A storybook addon to switch between css resources at runtime for your story", "keywords": [ "addon", @@ -25,9 +25,9 @@ }, "dependencies": { "@emotion/styled": "0.10.6", - "@storybook/addons": "4.2.0-alpha.5", - "@storybook/components": "4.2.0-alpha.5", - "@storybook/core-events": "4.2.0-alpha.5", + "@storybook/addons": "4.2.0-alpha.6", + "@storybook/components": "4.2.0-alpha.6", + "@storybook/core-events": "4.2.0-alpha.6", "core-js": "^2.5.7", "global": "^4.3.2", "prop-types": "^15.6.2", diff --git a/addons/events/package.json b/addons/events/package.json index bdeb116b316c..a652b366e725 100644 --- a/addons/events/package.json +++ b/addons/events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-events", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "Add events to your Storybook stories.", "keywords": [ "addon", @@ -24,8 +24,8 @@ }, "dependencies": { "@emotion/styled": "^0.10.6", - "@storybook/addons": "4.2.0-alpha.5", - "@storybook/core-events": "4.2.0-alpha.5", + "@storybook/addons": "4.2.0-alpha.6", + "@storybook/core-events": "4.2.0-alpha.6", "core-js": "^2.5.7", "format-json": "^1.0.3", "prop-types": "^15.6.2", diff --git a/addons/google-analytics/package.json b/addons/google-analytics/package.json index 797bf590e746..60568eee4479 100644 --- a/addons/google-analytics/package.json +++ b/addons/google-analytics/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-google-analytics", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "Storybook addon for google analytics", "keywords": [ "addon", @@ -21,7 +21,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "4.2.0-alpha.5", + "@storybook/addons": "4.2.0-alpha.6", "core-js": "^2.5.7", "global": "^4.3.2", "react-ga": "^2.5.3" diff --git a/addons/graphql/package.json b/addons/graphql/package.json index 8a66af68070b..516bc6a5eb22 100644 --- a/addons/graphql/package.json +++ b/addons/graphql/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-graphql", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "Storybook addon to display the GraphiQL IDE", "keywords": [ "addon", diff --git a/addons/info/package.json b/addons/info/package.json index 746057f7698f..c41e339a11bb 100644 --- a/addons/info/package.json +++ b/addons/info/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-info", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "A Storybook addon to show additional information for your stories.", "keywords": [ "addon", @@ -22,9 +22,9 @@ }, "dependencies": { "@emotion/styled": "^0.10.6", - "@storybook/addons": "4.2.0-alpha.5", - "@storybook/client-logger": "4.2.0-alpha.5", - "@storybook/components": "4.2.0-alpha.5", + "@storybook/addons": "4.2.0-alpha.6", + "@storybook/client-logger": "4.2.0-alpha.6", + "@storybook/components": "4.2.0-alpha.6", "core-js": "^2.5.7", "global": "^4.3.2", "marksy": "^6.1.0", diff --git a/addons/jest/package.json b/addons/jest/package.json index 84e407f6f3dc..4d2bec3ef027 100644 --- a/addons/jest/package.json +++ b/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "React storybook addon that show component jest report", "keywords": [ "addon", @@ -28,8 +28,8 @@ }, "dependencies": { "@emotion/styled": "^0.10.6", - "@storybook/addons": "4.2.0-alpha.5", - "@storybook/components": "4.2.0-alpha.5", + "@storybook/addons": "4.2.0-alpha.6", + "@storybook/components": "4.2.0-alpha.6", "core-js": "^2.5.7", "global": "^4.3.2", "prop-types": "^15.6.2", diff --git a/addons/knobs/package.json b/addons/knobs/package.json index e8771cc8cad3..12215fad67ba 100644 --- a/addons/knobs/package.json +++ b/addons/knobs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-knobs", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "Storybook Addon Prop Editor Component", "keywords": [ "addon", @@ -23,9 +23,9 @@ "dependencies": { "@emotion/core": "^0.13.1", "@emotion/styled": "^0.10.6", - "@storybook/addons": "4.2.0-alpha.5", - "@storybook/components": "4.2.0-alpha.5", - "@storybook/core-events": "4.2.0-alpha.5", + "@storybook/addons": "4.2.0-alpha.6", + "@storybook/components": "4.2.0-alpha.6", + "@storybook/core-events": "4.2.0-alpha.6", "copy-to-clipboard": "^3.0.8", "core-js": "^2.5.7", "escape-html": "^1.0.3", diff --git a/addons/links/package.json b/addons/links/package.json index d098c57a05ee..366d17107a6a 100644 --- a/addons/links/package.json +++ b/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "Story Links addon for storybook", "keywords": [ "addon", @@ -21,9 +21,9 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "4.2.0-alpha.5", - "@storybook/components": "4.2.0-alpha.5", - "@storybook/core-events": "4.2.0-alpha.5", + "@storybook/addons": "4.2.0-alpha.6", + "@storybook/components": "4.2.0-alpha.6", + "@storybook/core-events": "4.2.0-alpha.6", "core-js": "^2.5.7", "global": "^4.3.2", "prop-types": "^15.6.2" diff --git a/addons/notes/package.json b/addons/notes/package.json index ded8e8ef48c9..64173a9b8489 100644 --- a/addons/notes/package.json +++ b/addons/notes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-notes", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "Write notes for your Storybook stories.", "keywords": [ "addon", @@ -24,7 +24,7 @@ }, "dependencies": { "@emotion/styled": "^0.10.6", - "@storybook/addons": "4.2.0-alpha.5", + "@storybook/addons": "4.2.0-alpha.6", "core-js": "^2.5.7", "marked": "^0.5.2", "prop-types": "^15.6.2" diff --git a/addons/ondevice-backgrounds/package.json b/addons/ondevice-backgrounds/package.json index 89080580c69f..db2b6f243f4f 100644 --- a/addons/ondevice-backgrounds/package.json +++ b/addons/ondevice-backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-ondevice-backgrounds", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "A storybook addon to show different backgrounds for your preview", "keywords": [ "addon", @@ -23,7 +23,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "4.2.0-alpha.5", + "@storybook/addons": "4.2.0-alpha.6", "core-js": "^2.5.7", "prop-types": "^15.6.2" }, diff --git a/addons/ondevice-knobs/package.json b/addons/ondevice-knobs/package.json index 5a2a1727db01..8db0a71d0f24 100644 --- a/addons/ondevice-knobs/package.json +++ b/addons/ondevice-knobs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-ondevice-knobs", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "Display storybook story knobs on your deviced.", "keywords": [ "addon", @@ -20,7 +20,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "4.2.0-alpha.5", + "@storybook/addons": "4.2.0-alpha.6", "core-js": "^2.5.7", "deep-equal": "^1.0.1", "prop-types": "^15.6.2", diff --git a/addons/ondevice-notes/package.json b/addons/ondevice-notes/package.json index 33bca237c372..709216d41160 100644 --- a/addons/ondevice-notes/package.json +++ b/addons/ondevice-notes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-ondevice-notes", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "Write notes for your Storybook stories.", "keywords": [ "addon", @@ -18,7 +18,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "4.2.0-alpha.5", + "@storybook/addons": "4.2.0-alpha.6", "core-js": "^2.5.7", "prop-types": "^15.6.2", "react-native-simple-markdown": "^1.1.0" diff --git a/addons/options/package.json b/addons/options/package.json index 10a92ba00b65..47d53de7fdbe 100644 --- a/addons/options/package.json +++ b/addons/options/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-options", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "Options addon for storybook", "keywords": [ "addon", @@ -20,7 +20,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "4.2.0-alpha.5", + "@storybook/addons": "4.2.0-alpha.6", "core-js": "^2.5.7", "util-deprecate": "^1.0.2" }, diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json index 6b4576130b97..2d88335302ea 100644 --- a/addons/storyshots/storyshots-core/package.json +++ b/addons/storyshots/storyshots-core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storyshots", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.", "keywords": [ "addon", @@ -24,7 +24,7 @@ "storybook": "start-storybook -p 6006" }, "dependencies": { - "@storybook/addons": "4.2.0-alpha.5", + "@storybook/addons": "4.2.0-alpha.6", "core-js": "^2.5.7", "glob": "^7.1.3", "global": "^4.3.2", @@ -33,10 +33,10 @@ "regenerator-runtime": "^0.12.1" }, "devDependencies": { - "@storybook/addon-actions": "4.2.0-alpha.5", - "@storybook/addon-links": "4.2.0-alpha.5", + "@storybook/addon-actions": "4.2.0-alpha.6", + "@storybook/addon-links": "4.2.0-alpha.6", "@storybook/addons": "4.2.0-alpha.1", - "@storybook/react": "4.2.0-alpha.5", + "@storybook/react": "4.2.0-alpha.6", "enzyme-to-json": "^3.3.4", "react": "^16.6.0" }, diff --git a/addons/storyshots/storyshots-puppeteer/package.json b/addons/storyshots/storyshots-puppeteer/package.json index 44e69239bb8f..2e00543896be 100644 --- a/addons/storyshots/storyshots-puppeteer/package.json +++ b/addons/storyshots/storyshots-puppeteer/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storyshots-puppeteer", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "Image snappshots addition to StoryShots base on puppeteer", "keywords": [ "addon", @@ -21,7 +21,7 @@ "prepare": "node ../../../scripts/prepare.js" }, "dependencies": { - "@storybook/node-logger": "4.2.0-alpha.5", + "@storybook/node-logger": "4.2.0-alpha.6", "core-js": "^2.5.7", "jest-image-snapshot": "^2.6.0", "puppeteer": "^1.9.0", diff --git a/addons/storysource/package.json b/addons/storysource/package.json index fd217884b2b0..2e953a6e7fe2 100644 --- a/addons/storysource/package.json +++ b/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "Stories addon for storybook", "keywords": [ "addon", @@ -21,8 +21,8 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "4.2.0-alpha.5", - "@storybook/components": "4.2.0-alpha.5", + "@storybook/addons": "4.2.0-alpha.6", + "@storybook/components": "4.2.0-alpha.6", "core-js": "^2.5.7", "estraverse": "^4.2.0", "loader-utils": "^1.1.0", diff --git a/addons/viewport/package.json b/addons/viewport/package.json index 435432018383..4d75e2af0dbf 100644 --- a/addons/viewport/package.json +++ b/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "Storybook addon to change the viewport size to mobile", "keywords": [ "addon", @@ -21,9 +21,9 @@ }, "dependencies": { "@emotion/styled": "^0.10.6", - "@storybook/addons": "4.2.0-alpha.5", - "@storybook/components": "4.2.0-alpha.5", - "@storybook/core-events": "4.2.0-alpha.5", + "@storybook/addons": "4.2.0-alpha.6", + "@storybook/components": "4.2.0-alpha.6", + "@storybook/core-events": "4.2.0-alpha.6", "core-js": "^2.5.7", "global": "^4.3.2", "prop-types": "^15.6.2", diff --git a/app/angular/package.json b/app/angular/package.json index 0ccfd142e066..4b1abe6368a9 100644 --- a/app/angular/package.json +++ b/app/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -25,8 +25,8 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/core": "4.2.0-alpha.5", - "@storybook/node-logger": "4.2.0-alpha.5", + "@storybook/core": "4.2.0-alpha.6", + "@storybook/node-logger": "4.2.0-alpha.6", "angular2-template-loader": "^0.6.2", "core-js": "^2.5.7", "fork-ts-checker-webpack-plugin": "^0.5.2", diff --git a/app/ember/package.json b/app/ember/package.json index ba5d8cc2c9cb..e632bb7200e7 100644 --- a/app/ember/package.json +++ b/app/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybooks/storybook/tree/master/app/ember", "bugs": { @@ -23,7 +23,7 @@ }, "dependencies": { "@ember/test-helpers": "^1.0.0", - "@storybook/core": "4.2.0-alpha.5", + "@storybook/core": "4.2.0-alpha.6", "common-tags": "^1.8.0", "core-js": "^2.5.7", "global": "^4.3.2", diff --git a/app/html/package.json b/app/html/package.json index e6bc077f7364..1093aee765b8 100644 --- a/app/html/package.json +++ b/app/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -24,7 +24,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/core": "4.2.0-alpha.5", + "@storybook/core": "4.2.0-alpha.6", "common-tags": "^1.8.0", "core-js": "^2.5.7", "global": "^4.3.2", diff --git a/app/marko/package.json b/app/marko/package.json index b07c9349de22..05358baf671d 100644 --- a/app/marko/package.json +++ b/app/marko/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/marko", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -25,7 +25,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/core": "4.2.0-alpha.5", + "@storybook/core": "4.2.0-alpha.6", "common-tags": "^1.8.0", "core-js": "^2.5.7", "global": "^4.3.2", diff --git a/app/mithril/package.json b/app/mithril/package.json index 2a2ae69bf98b..0a55a796cf87 100644 --- a/app/mithril/package.json +++ b/app/mithril/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/mithril", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "Storybook for Mithril: Develop Mithril Component in isolation.", "keywords": [ "storybook" @@ -26,7 +26,7 @@ }, "dependencies": { "@babel/plugin-transform-react-jsx": "^7.2.0", - "@storybook/core": "4.2.0-alpha.5", + "@storybook/core": "4.2.0-alpha.6", "common-tags": "^1.8.0", "core-js": "^2.5.7", "global": "^4.3.2", diff --git a/app/polymer/package.json b/app/polymer/package.json index b0b52e6830e2..611fe1adaea2 100644 --- a/app/polymer/package.json +++ b/app/polymer/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/polymer", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -24,7 +24,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/core": "4.2.0-alpha.5", + "@storybook/core": "4.2.0-alpha.6", "@webcomponents/webcomponentsjs": "^1.2.0", "common-tags": "^1.8.0", "core-js": "^2.5.7", diff --git a/app/preact/package.json b/app/preact/package.json index 7b2300717ad1..b7831097f269 100644 --- a/app/preact/package.json +++ b/app/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" @@ -26,7 +26,7 @@ }, "dependencies": { "@babel/plugin-transform-react-jsx": "^7.2.0", - "@storybook/core": "4.2.0-alpha.5", + "@storybook/core": "4.2.0-alpha.6", "common-tags": "^1.8.0", "core-js": "^2.5.7", "global": "^4.3.2", diff --git a/app/react-native/package.json b/app/react-native/package.json index e05bed148d5c..8d3be9fa880e 100644 --- a/app/react-native/package.json +++ b/app/react-native/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-native", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "A better way to develop React Native Components for your app", "keywords": [ "react", @@ -25,12 +25,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "4.2.0-alpha.5", - "@storybook/channel-websocket": "4.2.0-alpha.5", - "@storybook/channels": "4.2.0-alpha.5", - "@storybook/core": "4.2.0-alpha.5", - "@storybook/core-events": "4.2.0-alpha.5", - "@storybook/ui": "4.2.0-alpha.5", + "@storybook/addons": "4.2.0-alpha.6", + "@storybook/channel-websocket": "4.2.0-alpha.6", + "@storybook/channels": "4.2.0-alpha.6", + "@storybook/core": "4.2.0-alpha.6", + "@storybook/core-events": "4.2.0-alpha.6", + "@storybook/ui": "4.2.0-alpha.6", "babel-loader": "^8.0.4", "babel-plugin-macros": "^2.4.3", "babel-plugin-syntax-async-functions": "^6.13.0", diff --git a/app/react/package.json b/app/react/package.json index 1b20ee1bafdc..4cc3c464b843 100644 --- a/app/react/package.json +++ b/app/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -29,8 +29,8 @@ "@babel/preset-flow": "^7.0.0", "@babel/preset-react": "^7.0.0", "@emotion/styled": "^0.10.6", - "@storybook/core": "4.2.0-alpha.5", - "@storybook/node-logger": "4.2.0-alpha.5", + "@storybook/core": "4.2.0-alpha.6", + "@storybook/node-logger": "4.2.0-alpha.6", "@svgr/webpack": "^4.0.3", "babel-plugin-named-asset-import": "^0.2.3", "babel-plugin-react-docgen": "^2.0.0", diff --git a/app/riot/package.json b/app/riot/package.json index f5c813084fdf..b6fd602ea3b0 100644 --- a/app/riot/package.json +++ b/app/riot/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/riot", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "Storybook for riot.js: View riot snippets in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -24,7 +24,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/core": "4.2.0-alpha.5", + "@storybook/core": "4.2.0-alpha.6", "common-tags": "^1.8.0", "core-js": "^2.5.7", "global": "^4.3.2", diff --git a/app/svelte/package.json b/app/svelte/package.json index 6c3586281a49..d797a353da68 100644 --- a/app/svelte/package.json +++ b/app/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -25,7 +25,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/core": "4.2.0-alpha.5", + "@storybook/core": "4.2.0-alpha.6", "common-tags": "^1.8.0", "core-js": "^2.5.7", "global": "^4.3.2", diff --git a/app/vue/package.json b/app/vue/package.json index 79545274197b..12fca7b126c5 100644 --- a/app/vue/package.json +++ b/app/vue/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -25,7 +25,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/core": "4.2.0-alpha.5", + "@storybook/core": "4.2.0-alpha.6", "common-tags": "^1.8.0", "core-js": "^2.5.7", "global": "^4.3.2", diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json index b51f09e57929..c8ce805485b8 100644 --- a/examples/angular-cli/package.json +++ b/examples/angular-cli/package.json @@ -1,6 +1,6 @@ { "name": "angular-cli", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "private": true, "license": "MIT", "scripts": { @@ -33,18 +33,18 @@ "@angular-devkit/build-angular": "^0.10.3", "@angular/cli": "^7.0.3", "@angular/compiler-cli": "^7.0.1", - "@storybook/addon-actions": "4.2.0-alpha.5", - "@storybook/addon-backgrounds": "4.2.0-alpha.5", - "@storybook/addon-centered": "4.2.0-alpha.5", - "@storybook/addon-jest": "4.2.0-alpha.5", - "@storybook/addon-knobs": "4.2.0-alpha.5", - "@storybook/addon-links": "4.2.0-alpha.5", - "@storybook/addon-notes": "4.2.0-alpha.5", - "@storybook/addon-options": "4.2.0-alpha.5", - "@storybook/addon-storyshots": "4.2.0-alpha.5", - "@storybook/addon-storysource": "4.2.0-alpha.5", - "@storybook/addons": "4.2.0-alpha.5", - "@storybook/angular": "4.2.0-alpha.5", + "@storybook/addon-actions": "4.2.0-alpha.6", + "@storybook/addon-backgrounds": "4.2.0-alpha.6", + "@storybook/addon-centered": "4.2.0-alpha.6", + "@storybook/addon-jest": "4.2.0-alpha.6", + "@storybook/addon-knobs": "4.2.0-alpha.6", + "@storybook/addon-links": "4.2.0-alpha.6", + "@storybook/addon-notes": "4.2.0-alpha.6", + "@storybook/addon-options": "4.2.0-alpha.6", + "@storybook/addon-storyshots": "4.2.0-alpha.6", + "@storybook/addon-storysource": "4.2.0-alpha.6", + "@storybook/addons": "4.2.0-alpha.6", + "@storybook/angular": "4.2.0-alpha.6", "@types/core-js": "^2.5.0", "@types/jest": "^23.3.9", "@types/node": "~10.12.17", diff --git a/examples/cra-kitchen-sink/package.json b/examples/cra-kitchen-sink/package.json index bdcbe884665d..32281a341b30 100644 --- a/examples/cra-kitchen-sink/package.json +++ b/examples/cra-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "cra-kitchen-sink", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "private": true, "scripts": { "build": "react-scripts build", @@ -19,21 +19,21 @@ }, "devDependencies": { "@emotion/snapshot-serializer": "^0.8.2", - "@storybook/addon-a11y": "4.2.0-alpha.5", - "@storybook/addon-actions": "4.2.0-alpha.5", - "@storybook/addon-backgrounds": "4.2.0-alpha.5", - "@storybook/addon-centered": "4.2.0-alpha.5", - "@storybook/addon-events": "4.2.0-alpha.5", - "@storybook/addon-info": "4.2.0-alpha.5", - "@storybook/addon-jest": "4.2.0-alpha.5", - "@storybook/addon-knobs": "4.2.0-alpha.5", - "@storybook/addon-links": "4.2.0-alpha.5", - "@storybook/addon-notes": "4.2.0-alpha.5", - "@storybook/addon-options": "4.2.0-alpha.5", - "@storybook/addon-storyshots": "4.2.0-alpha.5", - "@storybook/addons": "4.2.0-alpha.5", - "@storybook/client-logger": "4.2.0-alpha.5", - "@storybook/react": "4.2.0-alpha.5", + "@storybook/addon-a11y": "4.2.0-alpha.6", + "@storybook/addon-actions": "4.2.0-alpha.6", + "@storybook/addon-backgrounds": "4.2.0-alpha.6", + "@storybook/addon-centered": "4.2.0-alpha.6", + "@storybook/addon-events": "4.2.0-alpha.6", + "@storybook/addon-info": "4.2.0-alpha.6", + "@storybook/addon-jest": "4.2.0-alpha.6", + "@storybook/addon-knobs": "4.2.0-alpha.6", + "@storybook/addon-links": "4.2.0-alpha.6", + "@storybook/addon-notes": "4.2.0-alpha.6", + "@storybook/addon-options": "4.2.0-alpha.6", + "@storybook/addon-storyshots": "4.2.0-alpha.6", + "@storybook/addons": "4.2.0-alpha.6", + "@storybook/client-logger": "4.2.0-alpha.6", + "@storybook/react": "4.2.0-alpha.6", "enzyme": "^3.7.0", "enzyme-adapter-react-16": "^1.6.0", "enzyme-to-json": "^3.3.4", diff --git a/examples/ember-cli/package.json b/examples/ember-cli/package.json index ba05a1b19091..2ac21d905500 100644 --- a/examples/ember-cli/package.json +++ b/examples/ember-cli/package.json @@ -1,6 +1,6 @@ { "name": "ember-example", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "private": true, "scripts": { "build": "ember build", @@ -14,18 +14,18 @@ }, "devDependencies": { "@babel/core": "^7.2.2", - "@storybook/addon-a11y": "4.2.0-alpha.5", - "@storybook/addon-actions": "4.2.0-alpha.5", - "@storybook/addon-backgrounds": "4.2.0-alpha.5", - "@storybook/addon-centered": "4.2.0-alpha.5", - "@storybook/addon-knobs": "4.2.0-alpha.5", - "@storybook/addon-links": "4.2.0-alpha.5", - "@storybook/addon-notes": "4.2.0-alpha.5", - "@storybook/addon-options": "4.2.0-alpha.5", - "@storybook/addon-storysource": "4.2.0-alpha.5", - "@storybook/addon-viewport": "4.2.0-alpha.5", - "@storybook/addons": "4.2.0-alpha.5", - "@storybook/ember": "4.2.0-alpha.5", + "@storybook/addon-a11y": "4.2.0-alpha.6", + "@storybook/addon-actions": "4.2.0-alpha.6", + "@storybook/addon-backgrounds": "4.2.0-alpha.6", + "@storybook/addon-centered": "4.2.0-alpha.6", + "@storybook/addon-knobs": "4.2.0-alpha.6", + "@storybook/addon-links": "4.2.0-alpha.6", + "@storybook/addon-notes": "4.2.0-alpha.6", + "@storybook/addon-options": "4.2.0-alpha.6", + "@storybook/addon-storysource": "4.2.0-alpha.6", + "@storybook/addon-viewport": "4.2.0-alpha.6", + "@storybook/addons": "4.2.0-alpha.6", + "@storybook/ember": "4.2.0-alpha.6", "babel-loader": "^8", "broccoli-asset-rev": "^3.0.0", "cross-env": "^5.2.0", diff --git a/examples/html-kitchen-sink/package.json b/examples/html-kitchen-sink/package.json index 3267960f2f65..8e54cfdf5734 100644 --- a/examples/html-kitchen-sink/package.json +++ b/examples/html-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "html-kitchen-sink", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "private": true, "description": "", "keywords": [], @@ -13,23 +13,23 @@ "storybook": "start-storybook -p 9006" }, "devDependencies": { - "@storybook/addon-a11y": "4.2.0-alpha.5", - "@storybook/addon-actions": "4.2.0-alpha.5", - "@storybook/addon-backgrounds": "4.2.0-alpha.5", - "@storybook/addon-centered": "4.2.0-alpha.5", - "@storybook/addon-events": "4.2.0-alpha.5", - "@storybook/addon-jest": "4.2.0-alpha.5", - "@storybook/addon-knobs": "4.2.0-alpha.5", - "@storybook/addon-links": "4.2.0-alpha.5", - "@storybook/addon-notes": "4.2.0-alpha.5", - "@storybook/addon-options": "4.2.0-alpha.5", - "@storybook/addon-storyshots": "4.2.0-alpha.5", - "@storybook/addon-storysource": "4.2.0-alpha.5", - "@storybook/addon-viewport": "4.2.0-alpha.5", - "@storybook/addons": "4.2.0-alpha.5", - "@storybook/core": "4.2.0-alpha.5", - "@storybook/core-events": "4.2.0-alpha.5", - "@storybook/html": "4.2.0-alpha.5", + "@storybook/addon-a11y": "4.2.0-alpha.6", + "@storybook/addon-actions": "4.2.0-alpha.6", + "@storybook/addon-backgrounds": "4.2.0-alpha.6", + "@storybook/addon-centered": "4.2.0-alpha.6", + "@storybook/addon-events": "4.2.0-alpha.6", + "@storybook/addon-jest": "4.2.0-alpha.6", + "@storybook/addon-knobs": "4.2.0-alpha.6", + "@storybook/addon-links": "4.2.0-alpha.6", + "@storybook/addon-notes": "4.2.0-alpha.6", + "@storybook/addon-options": "4.2.0-alpha.6", + "@storybook/addon-storyshots": "4.2.0-alpha.6", + "@storybook/addon-storysource": "4.2.0-alpha.6", + "@storybook/addon-viewport": "4.2.0-alpha.6", + "@storybook/addons": "4.2.0-alpha.6", + "@storybook/core": "4.2.0-alpha.6", + "@storybook/core-events": "4.2.0-alpha.6", + "@storybook/html": "4.2.0-alpha.6", "eventemitter3": "^3.1.0", "format-json": "^1.0.3", "global": "^4.3.2", diff --git a/examples/marko-cli/package.json b/examples/marko-cli/package.json index 903a39652ffa..0c9eaf199b5f 100644 --- a/examples/marko-cli/package.json +++ b/examples/marko-cli/package.json @@ -1,6 +1,6 @@ { "name": "marko-cli", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "private": true, "description": "Demo of how to build an app using marko-starter", "repository": { @@ -22,12 +22,12 @@ "marko-starter": "^2.0.4" }, "devDependencies": { - "@storybook/addon-actions": "4.2.0-alpha.5", - "@storybook/addon-knobs": "4.2.0-alpha.5", - "@storybook/addon-options": "4.2.0-alpha.5", - "@storybook/addon-storysource": "4.2.0-alpha.5", - "@storybook/addons": "4.2.0-alpha.5", - "@storybook/marko": "4.2.0-alpha.5", + "@storybook/addon-actions": "4.2.0-alpha.6", + "@storybook/addon-knobs": "4.2.0-alpha.6", + "@storybook/addon-options": "4.2.0-alpha.6", + "@storybook/addon-storysource": "4.2.0-alpha.6", + "@storybook/addons": "4.2.0-alpha.6", + "@storybook/marko": "4.2.0-alpha.6", "prettier": "^1.14.3", "webpack": "^4.23.1" } diff --git a/examples/mithril-kitchen-sink/package.json b/examples/mithril-kitchen-sink/package.json index c3464da69f86..a50a2f9f9757 100644 --- a/examples/mithril-kitchen-sink/package.json +++ b/examples/mithril-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "mithril-example", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "private": true, "scripts": { "build-storybook": "build-storybook", @@ -10,18 +10,18 @@ "mithril": "^1.1.6" }, "devDependencies": { - "@storybook/addon-actions": "4.2.0-alpha.5", - "@storybook/addon-backgrounds": "4.2.0-alpha.5", - "@storybook/addon-centered": "4.2.0-alpha.5", - "@storybook/addon-knobs": "4.2.0-alpha.5", - "@storybook/addon-links": "4.2.0-alpha.5", - "@storybook/addon-notes": "4.2.0-alpha.5", - "@storybook/addon-options": "4.2.0-alpha.5", - "@storybook/addon-storyshots": "4.2.0-alpha.5", - "@storybook/addon-storysource": "4.2.0-alpha.5", - "@storybook/addon-viewport": "4.2.0-alpha.5", - "@storybook/addons": "4.2.0-alpha.5", - "@storybook/mithril": "4.2.0-alpha.5", + "@storybook/addon-actions": "4.2.0-alpha.6", + "@storybook/addon-backgrounds": "4.2.0-alpha.6", + "@storybook/addon-centered": "4.2.0-alpha.6", + "@storybook/addon-knobs": "4.2.0-alpha.6", + "@storybook/addon-links": "4.2.0-alpha.6", + "@storybook/addon-notes": "4.2.0-alpha.6", + "@storybook/addon-options": "4.2.0-alpha.6", + "@storybook/addon-storyshots": "4.2.0-alpha.6", + "@storybook/addon-storysource": "4.2.0-alpha.6", + "@storybook/addon-viewport": "4.2.0-alpha.6", + "@storybook/addons": "4.2.0-alpha.6", + "@storybook/mithril": "4.2.0-alpha.6", "webpack": "^4.23.1" } } diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json index 3d6a32245181..5fca27c40314 100644 --- a/examples/official-storybook/package.json +++ b/examples/official-storybook/package.json @@ -1,6 +1,6 @@ { "name": "official-storybook", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "private": true, "scripts": { "build-storybook": "build-storybook -c ./ -s built-storybooks", @@ -16,28 +16,28 @@ "@emotion/provider": "^0.11.2", "@emotion/snapshot-serializer": "^0.8.2", "@emotion/styled": "^0.10.6", - "@storybook/addon-a11y": "4.2.0-alpha.5", - "@storybook/addon-actions": "4.2.0-alpha.5", - "@storybook/addon-backgrounds": "4.2.0-alpha.5", - "@storybook/addon-centered": "4.2.0-alpha.5", - "@storybook/addon-cssresources": "4.2.0-alpha.5", - "@storybook/addon-events": "4.2.0-alpha.5", - "@storybook/addon-graphql": "4.2.0-alpha.5", - "@storybook/addon-info": "4.2.0-alpha.5", - "@storybook/addon-jest": "4.2.0-alpha.5", - "@storybook/addon-knobs": "4.2.0-alpha.5", - "@storybook/addon-links": "4.2.0-alpha.5", - "@storybook/addon-notes": "4.2.0-alpha.5", - "@storybook/addon-options": "4.2.0-alpha.5", - "@storybook/addon-storyshots": "4.2.0-alpha.5", - "@storybook/addon-storyshots-puppeteer": "4.2.0-alpha.5", - "@storybook/addon-storysource": "4.2.0-alpha.5", - "@storybook/addon-viewport": "4.2.0-alpha.5", - "@storybook/addons": "4.2.0-alpha.5", - "@storybook/components": "4.2.0-alpha.5", - "@storybook/core-events": "4.2.0-alpha.5", - "@storybook/node-logger": "4.2.0-alpha.5", - "@storybook/react": "4.2.0-alpha.5", + "@storybook/addon-a11y": "4.2.0-alpha.6", + "@storybook/addon-actions": "4.2.0-alpha.6", + "@storybook/addon-backgrounds": "4.2.0-alpha.6", + "@storybook/addon-centered": "4.2.0-alpha.6", + "@storybook/addon-cssresources": "4.2.0-alpha.6", + "@storybook/addon-events": "4.2.0-alpha.6", + "@storybook/addon-graphql": "4.2.0-alpha.6", + "@storybook/addon-info": "4.2.0-alpha.6", + "@storybook/addon-jest": "4.2.0-alpha.6", + "@storybook/addon-knobs": "4.2.0-alpha.6", + "@storybook/addon-links": "4.2.0-alpha.6", + "@storybook/addon-notes": "4.2.0-alpha.6", + "@storybook/addon-options": "4.2.0-alpha.6", + "@storybook/addon-storyshots": "4.2.0-alpha.6", + "@storybook/addon-storyshots-puppeteer": "4.2.0-alpha.6", + "@storybook/addon-storysource": "4.2.0-alpha.6", + "@storybook/addon-viewport": "4.2.0-alpha.6", + "@storybook/addons": "4.2.0-alpha.6", + "@storybook/components": "4.2.0-alpha.6", + "@storybook/core-events": "4.2.0-alpha.6", + "@storybook/node-logger": "4.2.0-alpha.6", + "@storybook/react": "4.2.0-alpha.6", "cors": "^2.8.4", "cross-env": "^5.2.0", "enzyme-to-json": "^3.3.4", diff --git a/examples/polymer-cli/package.json b/examples/polymer-cli/package.json index c01602fb2e50..47054aa082e9 100644 --- a/examples/polymer-cli/package.json +++ b/examples/polymer-cli/package.json @@ -1,6 +1,6 @@ { "name": "polymer-cli", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "private": true, "scripts": { "build-storybook": "build-storybook", @@ -9,15 +9,15 @@ }, "dependencies": { "@polymer/polymer": "^2.6.0", - "@storybook/addon-actions": "4.2.0-alpha.5", - "@storybook/addon-backgrounds": "4.2.0-alpha.5", - "@storybook/addon-knobs": "4.2.0-alpha.5", - "@storybook/addon-links": "4.2.0-alpha.5", - "@storybook/addon-notes": "4.2.0-alpha.5", - "@storybook/addon-options": "4.2.0-alpha.5", - "@storybook/addon-storysource": "4.2.0-alpha.5", - "@storybook/addon-viewport": "4.2.0-alpha.5", - "@storybook/polymer": "4.2.0-alpha.5", + "@storybook/addon-actions": "4.2.0-alpha.6", + "@storybook/addon-backgrounds": "4.2.0-alpha.6", + "@storybook/addon-knobs": "4.2.0-alpha.6", + "@storybook/addon-links": "4.2.0-alpha.6", + "@storybook/addon-notes": "4.2.0-alpha.6", + "@storybook/addon-options": "4.2.0-alpha.6", + "@storybook/addon-storysource": "4.2.0-alpha.6", + "@storybook/addon-viewport": "4.2.0-alpha.6", + "@storybook/polymer": "4.2.0-alpha.6", "@webcomponents/webcomponentsjs": "^1.2.0", "global": "^4.3.2", "lit-html": "^0.12.0", diff --git a/examples/preact-kitchen-sink/package.json b/examples/preact-kitchen-sink/package.json index 0089f587eb59..390a9470a83f 100644 --- a/examples/preact-kitchen-sink/package.json +++ b/examples/preact-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "preact-example", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "private": true, "scripts": { "build": "cross-env NODE_ENV=production webpack --progress --hide-modules", @@ -15,18 +15,18 @@ "devDependencies": { "@babel/core": "^7.2.2", "@babel/plugin-transform-runtime": "^7.2.0", - "@storybook/addon-actions": "4.2.0-alpha.5", - "@storybook/addon-backgrounds": "4.2.0-alpha.5", - "@storybook/addon-centered": "4.2.0-alpha.5", - "@storybook/addon-knobs": "4.2.0-alpha.5", - "@storybook/addon-links": "4.2.0-alpha.5", + "@storybook/addon-actions": "4.2.0-alpha.6", + "@storybook/addon-backgrounds": "4.2.0-alpha.6", + "@storybook/addon-centered": "4.2.0-alpha.6", + "@storybook/addon-knobs": "4.2.0-alpha.6", + "@storybook/addon-links": "4.2.0-alpha.6", "@storybook/addon-notes": "^4.1.0", - "@storybook/addon-options": "4.2.0-alpha.5", - "@storybook/addon-storyshots": "4.2.0-alpha.5", - "@storybook/addon-storysource": "4.2.0-alpha.5", - "@storybook/addon-viewport": "4.2.0-alpha.5", - "@storybook/addons": "4.2.0-alpha.5", - "@storybook/preact": "4.2.0-alpha.5", + "@storybook/addon-options": "4.2.0-alpha.6", + "@storybook/addon-storyshots": "4.2.0-alpha.6", + "@storybook/addon-storysource": "4.2.0-alpha.6", + "@storybook/addon-viewport": "4.2.0-alpha.6", + "@storybook/addons": "4.2.0-alpha.6", + "@storybook/preact": "4.2.0-alpha.6", "babel-loader": "^8.0.4", "cross-env": "^5.2.0", "file-loader": "^2.0.0", diff --git a/examples/riot-kitchen-sink/package.json b/examples/riot-kitchen-sink/package.json index e30e3903f7fb..0f09b7b6825a 100644 --- a/examples/riot-kitchen-sink/package.json +++ b/examples/riot-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "riot-example", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "private": true, "scripts": { "build": "cross-env NODE_ENV=production webpack --progress --hide-modules", @@ -15,18 +15,18 @@ }, "devDependencies": { "@babel/core": "^7.2.2", - "@storybook/addon-actions": "4.2.0-alpha.5", - "@storybook/addon-backgrounds": "4.2.0-alpha.5", - "@storybook/addon-centered": "4.2.0-alpha.5", - "@storybook/addon-knobs": "4.2.0-alpha.5", - "@storybook/addon-links": "4.2.0-alpha.5", - "@storybook/addon-notes": "4.2.0-alpha.5", - "@storybook/addon-options": "4.2.0-alpha.5", - "@storybook/addon-storyshots": "4.2.0-alpha.5", - "@storybook/addon-storysource": "4.2.0-alpha.5", - "@storybook/addon-viewport": "4.2.0-alpha.5", - "@storybook/addons": "4.2.0-alpha.5", - "@storybook/riot": "4.2.0-alpha.5", + "@storybook/addon-actions": "4.2.0-alpha.6", + "@storybook/addon-backgrounds": "4.2.0-alpha.6", + "@storybook/addon-centered": "4.2.0-alpha.6", + "@storybook/addon-knobs": "4.2.0-alpha.6", + "@storybook/addon-links": "4.2.0-alpha.6", + "@storybook/addon-notes": "4.2.0-alpha.6", + "@storybook/addon-options": "4.2.0-alpha.6", + "@storybook/addon-storyshots": "4.2.0-alpha.6", + "@storybook/addon-storysource": "4.2.0-alpha.6", + "@storybook/addon-viewport": "4.2.0-alpha.6", + "@storybook/addons": "4.2.0-alpha.6", + "@storybook/riot": "4.2.0-alpha.6", "babel-loader": "^8.0.4", "cross-env": "^5.2.0", "file-loader": "^2.0.0", diff --git a/examples/svelte-kitchen-sink/package.json b/examples/svelte-kitchen-sink/package.json index f3df0f103777..c19ae6c80e8b 100644 --- a/examples/svelte-kitchen-sink/package.json +++ b/examples/svelte-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "svelte-example", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "private": true, "scripts": { "build-storybook": "build-storybook -s public", @@ -10,17 +10,17 @@ "global": "^4.3.2" }, "devDependencies": { - "@storybook/addon-actions": "4.2.0-alpha.5", - "@storybook/addon-backgrounds": "4.2.0-alpha.5", - "@storybook/addon-centered": "4.2.0-alpha.5", - "@storybook/addon-knobs": "4.2.0-alpha.5", - "@storybook/addon-links": "4.2.0-alpha.5", - "@storybook/addon-notes": "4.2.0-alpha.5", - "@storybook/addon-options": "4.2.0-alpha.5", - "@storybook/addon-storyshots": "4.2.0-alpha.5", - "@storybook/addon-storysource": "4.2.0-alpha.5", - "@storybook/addon-viewport": "4.2.0-alpha.5", - "@storybook/addons": "4.2.0-alpha.5", - "@storybook/svelte": "4.2.0-alpha.5" + "@storybook/addon-actions": "4.2.0-alpha.6", + "@storybook/addon-backgrounds": "4.2.0-alpha.6", + "@storybook/addon-centered": "4.2.0-alpha.6", + "@storybook/addon-knobs": "4.2.0-alpha.6", + "@storybook/addon-links": "4.2.0-alpha.6", + "@storybook/addon-notes": "4.2.0-alpha.6", + "@storybook/addon-options": "4.2.0-alpha.6", + "@storybook/addon-storyshots": "4.2.0-alpha.6", + "@storybook/addon-storysource": "4.2.0-alpha.6", + "@storybook/addon-viewport": "4.2.0-alpha.6", + "@storybook/addons": "4.2.0-alpha.6", + "@storybook/svelte": "4.2.0-alpha.6" } } diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json index 9b8576856a01..fea6508b5890 100644 --- a/examples/vue-kitchen-sink/package.json +++ b/examples/vue-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "vue-example", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "private": true, "scripts": { "build": "cross-env NODE_ENV=production webpack --progress --hide-modules", @@ -14,18 +14,18 @@ }, "devDependencies": { "@babel/core": "^7.2.2", - "@storybook/addon-actions": "4.2.0-alpha.5", - "@storybook/addon-backgrounds": "4.2.0-alpha.5", - "@storybook/addon-centered": "4.2.0-alpha.5", - "@storybook/addon-knobs": "4.2.0-alpha.5", - "@storybook/addon-links": "4.2.0-alpha.5", - "@storybook/addon-notes": "4.2.0-alpha.5", - "@storybook/addon-options": "4.2.0-alpha.5", - "@storybook/addon-storyshots": "4.2.0-alpha.5", - "@storybook/addon-storysource": "4.2.0-alpha.5", - "@storybook/addon-viewport": "4.2.0-alpha.5", - "@storybook/addons": "4.2.0-alpha.5", - "@storybook/vue": "4.2.0-alpha.5", + "@storybook/addon-actions": "4.2.0-alpha.6", + "@storybook/addon-backgrounds": "4.2.0-alpha.6", + "@storybook/addon-centered": "4.2.0-alpha.6", + "@storybook/addon-knobs": "4.2.0-alpha.6", + "@storybook/addon-links": "4.2.0-alpha.6", + "@storybook/addon-notes": "4.2.0-alpha.6", + "@storybook/addon-options": "4.2.0-alpha.6", + "@storybook/addon-storyshots": "4.2.0-alpha.6", + "@storybook/addon-storysource": "4.2.0-alpha.6", + "@storybook/addon-viewport": "4.2.0-alpha.6", + "@storybook/addons": "4.2.0-alpha.6", + "@storybook/vue": "4.2.0-alpha.6", "babel-core": "^7.0.0-bridge.0", "babel-loader": "^8.0.4", "cross-env": "^5.2.0", diff --git a/lerna.json b/lerna.json index 95116267228c..3e2bcc7bfbda 100644 --- a/lerna.json +++ b/lerna.json @@ -11,5 +11,5 @@ "npmClient": "yarn", "useWorkspaces": true, "registry": "https://registry.npmjs.org", - "version": "4.2.0-alpha.5" + "version": "4.2.0-alpha.6" } diff --git a/lib/addons/package.json b/lib/addons/package.json index ce9f083e8f80..1a3509fcbc72 100644 --- a/lib/addons/package.json +++ b/lib/addons/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addons", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "Storybook addons store", "keywords": [ "storybook" @@ -20,8 +20,8 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/channels": "4.2.0-alpha.5", - "@storybook/components": "4.2.0-alpha.5", + "@storybook/channels": "4.2.0-alpha.6", + "@storybook/components": "4.2.0-alpha.6", "global": "^4.3.2", "util-deprecate": "^1.0.2" }, diff --git a/lib/channel-postmessage/package.json b/lib/channel-postmessage/package.json index 19183b6eed45..980e60789c98 100644 --- a/lib/channel-postmessage/package.json +++ b/lib/channel-postmessage/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channel-postmessage", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "", "keywords": [ "storybook" @@ -20,7 +20,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/channels": "4.2.0-alpha.5", + "@storybook/channels": "4.2.0-alpha.6", "global": "^4.3.2", "json-stringify-safe": "^5.0.1" }, diff --git a/lib/channel-websocket/package.json b/lib/channel-websocket/package.json index e0529f9cfa59..435cdf16c592 100644 --- a/lib/channel-websocket/package.json +++ b/lib/channel-websocket/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channel-websocket", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "", "keywords": [ "storybook" @@ -20,7 +20,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/channels": "4.2.0-alpha.5", + "@storybook/channels": "4.2.0-alpha.6", "global": "^4.3.2" }, "publishConfig": { diff --git a/lib/channels/package.json b/lib/channels/package.json index 991d4eb33e01..1925c472e4db 100644 --- a/lib/channels/package.json +++ b/lib/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "", "keywords": [ "storybook" diff --git a/lib/cli/package.json b/lib/cli/package.json index 0c8c25062fb2..cc68dab675f2 100644 --- a/lib/cli/package.json +++ b/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "Storybook's CLI - easiest method of adding storybook to your projects", "keywords": [ "cli", @@ -29,7 +29,7 @@ "@babel/core": "^7.2.2", "@babel/preset-env": "^7.2.0", "@babel/register": "^7.0.0", - "@storybook/codemod": "4.2.0-alpha.5", + "@storybook/codemod": "4.2.0-alpha.6", "chalk": "^2.4.1", "commander": "^2.19.0", "core-js": "^2.5.7", @@ -43,31 +43,31 @@ "update-notifier": "^2.5.0" }, "devDependencies": { - "@storybook/addon-actions": "4.2.0-alpha.5", - "@storybook/addon-centered": "4.2.0-alpha.5", - "@storybook/addon-graphql": "4.2.0-alpha.5", - "@storybook/addon-info": "4.2.0-alpha.5", - "@storybook/addon-knobs": "4.2.0-alpha.5", - "@storybook/addon-links": "4.2.0-alpha.5", - "@storybook/addon-notes": "4.2.0-alpha.5", - "@storybook/addon-options": "4.2.0-alpha.5", - "@storybook/addon-storyshots": "4.2.0-alpha.5", - "@storybook/addons": "4.2.0-alpha.5", - "@storybook/angular": "4.2.0-alpha.5", - "@storybook/channel-postmessage": "4.2.0-alpha.5", - "@storybook/channel-websocket": "4.2.0-alpha.5", - "@storybook/channels": "4.2.0-alpha.5", - "@storybook/ember": "4.2.0-alpha.5", - "@storybook/html": "4.2.0-alpha.5", - "@storybook/marko": "4.2.0-alpha.5", - "@storybook/mithril": "4.2.0-alpha.5", - "@storybook/polymer": "4.2.0-alpha.5", - "@storybook/preact": "4.2.0-alpha.5", - "@storybook/react": "4.2.0-alpha.5", - "@storybook/react-native": "4.2.0-alpha.5", - "@storybook/riot": "4.2.0-alpha.5", - "@storybook/ui": "4.2.0-alpha.5", - "@storybook/vue": "4.2.0-alpha.5" + "@storybook/addon-actions": "4.2.0-alpha.6", + "@storybook/addon-centered": "4.2.0-alpha.6", + "@storybook/addon-graphql": "4.2.0-alpha.6", + "@storybook/addon-info": "4.2.0-alpha.6", + "@storybook/addon-knobs": "4.2.0-alpha.6", + "@storybook/addon-links": "4.2.0-alpha.6", + "@storybook/addon-notes": "4.2.0-alpha.6", + "@storybook/addon-options": "4.2.0-alpha.6", + "@storybook/addon-storyshots": "4.2.0-alpha.6", + "@storybook/addons": "4.2.0-alpha.6", + "@storybook/angular": "4.2.0-alpha.6", + "@storybook/channel-postmessage": "4.2.0-alpha.6", + "@storybook/channel-websocket": "4.2.0-alpha.6", + "@storybook/channels": "4.2.0-alpha.6", + "@storybook/ember": "4.2.0-alpha.6", + "@storybook/html": "4.2.0-alpha.6", + "@storybook/marko": "4.2.0-alpha.6", + "@storybook/mithril": "4.2.0-alpha.6", + "@storybook/polymer": "4.2.0-alpha.6", + "@storybook/preact": "4.2.0-alpha.6", + "@storybook/react": "4.2.0-alpha.6", + "@storybook/react-native": "4.2.0-alpha.6", + "@storybook/riot": "4.2.0-alpha.6", + "@storybook/ui": "4.2.0-alpha.6", + "@storybook/vue": "4.2.0-alpha.6" }, "publishConfig": { "access": "public" diff --git a/lib/client-logger/package.json b/lib/client-logger/package.json index 57be5337fd7b..89febc7fa201 100644 --- a/lib/client-logger/package.json +++ b/lib/client-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-logger", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "", "keywords": [ "storybook" diff --git a/lib/codemod/package.json b/lib/codemod/package.json index 117e4adfe2bb..2ccaab377a1f 100644 --- a/lib/codemod/package.json +++ b/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" diff --git a/lib/components/package.json b/lib/components/package.json index 6fee808c71b6..123e55e3b458 100644 --- a/lib/components/package.json +++ b/lib/components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/components", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "Core Storybook Components", "keywords": [ "storybook" @@ -34,9 +34,9 @@ "render-fragment": "^0.1.1" }, "devDependencies": { - "@storybook/addon-actions": "4.2.0-alpha.5", - "@storybook/addon-knobs": "4.2.0-alpha.5", - "@storybook/react": "4.2.0-alpha.5" + "@storybook/addon-actions": "4.2.0-alpha.6", + "@storybook/addon-knobs": "4.2.0-alpha.6", + "@storybook/react": "4.2.0-alpha.6" }, "peerDependencies": { "react": "*", diff --git a/lib/core-events/package.json b/lib/core-events/package.json index e741e48a4026..f0c5fdd64e6c 100644 --- a/lib/core-events/package.json +++ b/lib/core-events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-events", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "Event names used in storybook core", "keywords": [ "storybook" diff --git a/lib/core/package.json b/lib/core/package.json index c8e6c59f20be..5e8cbc3f0797 100644 --- a/lib/core/package.json +++ b/lib/core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -24,12 +24,12 @@ "@emotion/core": "^0.13.1", "@emotion/provider": "^0.11.2", "@emotion/styled": "^0.10.6", - "@storybook/addons": "4.2.0-alpha.5", - "@storybook/channel-postmessage": "4.2.0-alpha.5", - "@storybook/client-logger": "4.2.0-alpha.5", - "@storybook/core-events": "4.2.0-alpha.5", - "@storybook/node-logger": "4.2.0-alpha.5", - "@storybook/ui": "4.2.0-alpha.5", + "@storybook/addons": "4.2.0-alpha.6", + "@storybook/channel-postmessage": "4.2.0-alpha.6", + "@storybook/client-logger": "4.2.0-alpha.6", + "@storybook/core-events": "4.2.0-alpha.6", + "@storybook/node-logger": "4.2.0-alpha.6", + "@storybook/ui": "4.2.0-alpha.6", "airbnb-js-shims": "^1 || ^2", "autoprefixer": "^9.4.3", "babel-plugin-macros": "^2.4.3", diff --git a/lib/node-logger/package.json b/lib/node-logger/package.json index 8f2b9c9b5503..1a8e6195ac5d 100644 --- a/lib/node-logger/package.json +++ b/lib/node-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/node-logger", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "", "keywords": [ "storybook" diff --git a/lib/ui/package.json b/lib/ui/package.json index 1a861f648ada..25db6faf5726 100644 --- a/lib/ui/package.json +++ b/lib/ui/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ui", - "version": "4.2.0-alpha.5", + "version": "4.2.0-alpha.6", "description": "Core Storybook UI", "keywords": [ "storybook" @@ -24,8 +24,8 @@ "@emotion/core": "^0.13.1", "@emotion/provider": "^0.11.2", "@emotion/styled": "^0.10.6", - "@storybook/components": "4.2.0-alpha.5", - "@storybook/core-events": "4.2.0-alpha.5", + "@storybook/components": "4.2.0-alpha.6", + "@storybook/core-events": "4.2.0-alpha.6", "@storybook/mantra-core": "^1.7.2", "@storybook/podda": "^1.2.3", "@storybook/react-komposer": "^2.0.5", From d353b9f0cf2e5ce1399617c34c035cd5cf3005d7 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Fri, 21 Dec 2018 11:34:24 +1100 Subject: [PATCH 027/120] Use module.hot.dispose to do previousExports. --- examples/official-storybook/config.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/examples/official-storybook/config.js b/examples/official-storybook/config.js index 6e82f4ece176..8a0e39c01e10 100644 --- a/examples/official-storybook/config.js +++ b/examples/official-storybook/config.js @@ -62,16 +62,21 @@ addParameters({ }, }); -// TODO -- somehow don't use window for this cross HMR storage -const { previousExports = {} } = window; // eslint-disable-line no-undef -window.previousExports = previousExports; // eslint-disable-line no-undef +let previousExports = {}; +if (module && module.hot && module.hot.dispose) { + ({ previousExports = {} } = module.hot.data || {}); + + module.hot.dispose(data => { + // eslint-disable-next-line no-param-reassign + data.previousExports = previousExports; + }); +} // The simplest version of examples would just export this function for users to use function importAll(context) { const storyStore = window.__STORYBOOK_CLIENT_API__._storyStore; // eslint-disable-line no-undef, no-underscore-dangle context.keys().forEach(filename => { - // console.log(`checking ${filename}`); const fileExports = context(filename); // A old-style story file @@ -87,9 +92,7 @@ function importAll(context) { const kindName = componentOptions.title || componentOptions.component.displayName; if (previousExports[filename]) { - // console.log(`found previousExports ${filename}`); if (previousExports[filename] === fileExports) { - // console.log(`exports have not changed ${filename}`); return; } From 3dd6c35fa42db184d232c79e6d7a94d38d04b2d9 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" Date: Fri, 21 Dec 2018 05:29:08 +0000 Subject: [PATCH 028/120] Bump react-dom from 16.6.3 to 16.7.0 Bumps [react-dom](https://github.com/facebook/react) from 16.6.3 to 16.7.0. - [Release notes](https://github.com/facebook/react/releases) - [Changelog](https://github.com/facebook/react/blob/master/CHANGELOG.md) - [Commits](https://github.com/facebook/react/compare/v16.6.3...v16.7.0) Signed-off-by: dependabot[bot] --- app/angular/package.json | 2 +- app/ember/package.json | 2 +- app/html/package.json | 2 +- app/marko/package.json | 2 +- app/mithril/package.json | 2 +- app/polymer/package.json | 2 +- app/preact/package.json | 2 +- app/riot/package.json | 2 +- app/svelte/package.json | 2 +- app/vue/package.json | 2 +- examples/cra-kitchen-sink/package.json | 2 +- examples/official-storybook/package.json | 2 +- yarn.lock | 9 +++++---- 13 files changed, 17 insertions(+), 16 deletions(-) diff --git a/app/angular/package.json b/app/angular/package.json index 4b1abe6368a9..fe723dcf3ce9 100644 --- a/app/angular/package.json +++ b/app/angular/package.json @@ -32,7 +32,7 @@ "fork-ts-checker-webpack-plugin": "^0.5.2", "global": "^4.3.2", "react": "^16.6.0", - "react-dom": "^16.6.0", + "react-dom": "^16.7.0", "regenerator-runtime": "^0.12.1", "sass-loader": "^7.1.0", "ts-loader": "^5.2.2", diff --git a/app/ember/package.json b/app/ember/package.json index e632bb7200e7..d2876932af5d 100644 --- a/app/ember/package.json +++ b/app/ember/package.json @@ -28,7 +28,7 @@ "core-js": "^2.5.7", "global": "^4.3.2", "react": "^16.6.0", - "react-dom": "^16.6.0", + "react-dom": "^16.7.0", "regenerator-runtime": "^0.12.1" }, "peerDependencies": { diff --git a/app/html/package.json b/app/html/package.json index 1093aee765b8..402b66839b17 100644 --- a/app/html/package.json +++ b/app/html/package.json @@ -30,7 +30,7 @@ "global": "^4.3.2", "html-loader": "^0.5.5", "react": "^16.6.0", - "react-dom": "^16.6.0", + "react-dom": "^16.7.0", "regenerator-runtime": "^0.12.1" }, "peerDependencies": { diff --git a/app/marko/package.json b/app/marko/package.json index 05358baf671d..277ed596c83d 100644 --- a/app/marko/package.json +++ b/app/marko/package.json @@ -32,7 +32,7 @@ "marko-loader": "^1.3.3", "raw-loader": "^0.5.1", "react": "^16.6.0", - "react-dom": "^16.6.0", + "react-dom": "^16.7.0", "regenerator-runtime": "^0.12.1" }, "peerDependencies": { diff --git a/app/mithril/package.json b/app/mithril/package.json index 0a55a796cf87..e8b8b39bc26f 100644 --- a/app/mithril/package.json +++ b/app/mithril/package.json @@ -31,7 +31,7 @@ "core-js": "^2.5.7", "global": "^4.3.2", "react": "^16.6.0", - "react-dom": "^16.6.0", + "react-dom": "^16.7.0", "regenerator-runtime": "^0.12.1" }, "devDependencies": { diff --git a/app/polymer/package.json b/app/polymer/package.json index 611fe1adaea2..3c1298dbd04d 100644 --- a/app/polymer/package.json +++ b/app/polymer/package.json @@ -30,7 +30,7 @@ "core-js": "^2.5.7", "global": "^4.3.2", "react": "^16.6.0", - "react-dom": "^16.6.0", + "react-dom": "^16.7.0", "regenerator-runtime": "^0.12.1", "webpack": "^4.23.1" }, diff --git a/app/preact/package.json b/app/preact/package.json index b7831097f269..8aaac0585265 100644 --- a/app/preact/package.json +++ b/app/preact/package.json @@ -31,7 +31,7 @@ "core-js": "^2.5.7", "global": "^4.3.2", "react": "^16.6.0", - "react-dom": "^16.6.0", + "react-dom": "^16.7.0", "regenerator-runtime": "^0.12.1" }, "devDependencies": { diff --git a/app/riot/package.json b/app/riot/package.json index b6fd602ea3b0..b5812426de5d 100644 --- a/app/riot/package.json +++ b/app/riot/package.json @@ -30,7 +30,7 @@ "global": "^4.3.2", "raw-loader": "^0.5.1", "react": "^16.6.0", - "react-dom": "^16.6.0", + "react-dom": "^16.7.0", "regenerator-runtime": "^0.12.1" }, "devDependencies": { diff --git a/app/svelte/package.json b/app/svelte/package.json index d797a353da68..ca161c78e4fc 100644 --- a/app/svelte/package.json +++ b/app/svelte/package.json @@ -30,7 +30,7 @@ "core-js": "^2.5.7", "global": "^4.3.2", "react": "^16.6.0", - "react-dom": "^16.6.0", + "react-dom": "^16.7.0", "regenerator-runtime": "^0.12.1" }, "devDependencies": { diff --git a/app/vue/package.json b/app/vue/package.json index 12fca7b126c5..c257137b6bcf 100644 --- a/app/vue/package.json +++ b/app/vue/package.json @@ -30,7 +30,7 @@ "core-js": "^2.5.7", "global": "^4.3.2", "react": "^16.6.0", - "react-dom": "^16.6.0", + "react-dom": "^16.7.0", "regenerator-runtime": "^0.12.1" }, "devDependencies": { diff --git a/examples/cra-kitchen-sink/package.json b/examples/cra-kitchen-sink/package.json index 32281a341b30..19501ae014ee 100644 --- a/examples/cra-kitchen-sink/package.json +++ b/examples/cra-kitchen-sink/package.json @@ -14,7 +14,7 @@ "global": "^4.3.2", "prop-types": "^15.6.2", "react": "^16.6.0", - "react-dom": "^16.6.0", + "react-dom": "^16.7.0", "react-lifecycles-compat": "^3.0.4" }, "devDependencies": { diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json index 5fca27c40314..7d9491b92638 100644 --- a/examples/official-storybook/package.json +++ b/examples/official-storybook/package.json @@ -51,7 +51,7 @@ "prop-types": "^15.6.2", "react": "^16.6.0", "react-chromatic": "^0.8.4", - "react-dom": "^16.6.0", + "react-dom": "^16.7.0", "uuid": "^3.3.2", "webpack": "^4.23.1" } diff --git a/yarn.lock b/yarn.lock index 996ee957f77d..bc340b1e8bc5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16353,14 +16353,15 @@ react-docgen@^3.0.0-rc.1: node-dir "^0.1.10" recast "^0.16.0" -react-dom@^16.6.0, react-dom@^16.6.3: - version "16.6.3" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.6.3.tgz#8fa7ba6883c85211b8da2d0efeffc9d3825cccc0" +react-dom@^16.6.3, react-dom@^16.7.0: + version "16.7.0" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.7.0.tgz#a17b2a7ca89ee7390bc1ed5eb81783c7461748b8" + integrity sha512-D0Ufv1ExCAmF38P2Uh1lwpminZFRXEINJe53zRAbm4KPwSyd6DY/uDoS0Blj9jvPpn1+wivKpZYc8aAAN/nAkg== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" - scheduler "^0.11.2" + scheduler "^0.12.0" react-error-overlay@^5.1.0: version "5.1.0" From 4beeba36bbb7c08d4f2b7fea8c985ef7941bf42a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kai=20R=C3=B6der?= Date: Fri, 21 Dec 2018 08:16:57 +0100 Subject: [PATCH 029/120] Fixed export issue in lib/addons --- lib/addons/src/index.ts | 4 +--- lib/addons/src/public_api.ts | 8 ++++++++ 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/lib/addons/src/index.ts b/lib/addons/src/index.ts index 135ed25fda9a..66602973e993 100644 --- a/lib/addons/src/index.ts +++ b/lib/addons/src/index.ts @@ -75,6 +75,4 @@ function getAddonsStore() { // Exporting this twice in order to to be able to import it like { addons } instead of 'addons' // prefer import { addons } from '@storybook/addons' over import addons from '@storybook/addons' -const addonStore = getAddonsStore(); -export { addonStore as addons }; -export default addonStore; +export const addons = getAddonsStore(); diff --git a/lib/addons/src/public_api.ts b/lib/addons/src/public_api.ts index c07891fd40a1..22adacc28201 100644 --- a/lib/addons/src/public_api.ts +++ b/lib/addons/src/public_api.ts @@ -1,3 +1,11 @@ export * from './make-decorator'; export * from '.'; export * from './storybook-channel-mock'; + +// There can only be 1 default export per entry point and it has to be directly from public_api +// Exporting this twice in order to to be able to import it like { addons } instead of 'addons' +// prefer import { addons } from '@storybook/addons' over import addons from '@storybook/addons' +// +// See index.ts +import { addons } from '.'; +export default addons; From cd7eb71b6e45484b08c818ddeb577ac1c33b1201 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kai=20R=C3=B6der?= Date: Fri, 21 Dec 2018 09:14:04 +0100 Subject: [PATCH 030/120] Removed addons from devDep because it is already a dependency --- addons/storyshots/storyshots-core/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json index 2d88335302ea..3c7cd1289372 100644 --- a/addons/storyshots/storyshots-core/package.json +++ b/addons/storyshots/storyshots-core/package.json @@ -35,7 +35,6 @@ "devDependencies": { "@storybook/addon-actions": "4.2.0-alpha.6", "@storybook/addon-links": "4.2.0-alpha.6", - "@storybook/addons": "4.2.0-alpha.1", "@storybook/react": "4.2.0-alpha.6", "enzyme-to-json": "^3.3.4", "react": "^16.6.0" From 6f6b119031d102fb49d546b4f4b7bd15a4c63abe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kai=20R=C3=B6der?= Date: Fri, 21 Dec 2018 09:14:46 +0100 Subject: [PATCH 031/120] Renamed createChannel to mockChannel in storybook-mock-channel --- lib/addons/src/index.ts | 2 ++ lib/addons/src/storybook-channel-mock.ts | 2 +- lib/channels/package.json | 1 - 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/lib/addons/src/index.ts b/lib/addons/src/index.ts index 66602973e993..fc71f994895d 100644 --- a/lib/addons/src/index.ts +++ b/lib/addons/src/index.ts @@ -75,4 +75,6 @@ function getAddonsStore() { // Exporting this twice in order to to be able to import it like { addons } instead of 'addons' // prefer import { addons } from '@storybook/addons' over import addons from '@storybook/addons' +// +// See public_api.ts export const addons = getAddonsStore(); diff --git a/lib/addons/src/storybook-channel-mock.ts b/lib/addons/src/storybook-channel-mock.ts index 8cc153b624f5..7d43f7b025c0 100644 --- a/lib/addons/src/storybook-channel-mock.ts +++ b/lib/addons/src/storybook-channel-mock.ts @@ -1,6 +1,6 @@ import Channel from '@storybook/channels'; -export function createChannel() { +export function mockChannel() { const transport = { setHandler: () => {}, send: () => {}, diff --git a/lib/channels/package.json b/lib/channels/package.json index 1925c472e4db..2a41e199b371 100644 --- a/lib/channels/package.json +++ b/lib/channels/package.json @@ -15,7 +15,6 @@ }, "license": "MIT", "main": "dist/index.js", - "jsnext:main": "src/index.ts", "scripts": { "prepare": "node ../../scripts/prepare.js" }, From 751b847fa93712b7c46eaf484f70a44b3d00edf6 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 21 Dec 2018 11:45:21 +0100 Subject: [PATCH 032/120] FIX tests --- addons/info/src/components/Story.js | 4 +- addons/info/src/components/markdown/code.js | 53 +- .../addon-a11y.stories.storyshot | 334 + .../addon-info.stories.storyshot | 9716 +++++++++++------ .../addon-knobs.stories.storyshot | 2 +- .../__snapshots__/core.stories.storyshot | 2 +- .../stories/addon-info.stories.js | 10 +- .../form/__snapshots__/form.stories.storyshot | 58 +- .../grid/__snapshots__/grid.stories.storyshot | 304 + .../menu/__snapshots__/menu.stories.storyshot | 27 + lib/components/src/menu/menu.js | 2 +- lib/components/src/menu/menu.stories.js | 6 - .../__snapshots__/preview.stories.storyshot | 297 + lib/components/src/preview/preview.stories.js | 21 +- .../tabs/__snapshots__/tabs.stories.storyshot | 148 +- .../__snapshots__/treeview.stories.storyshot | 1197 +- lib/components/src/treeview/components.js | 3 +- lib/components/src/treeview/treeview.js | 1 + .../src/treeview/treeview.stories.js | 7 + 19 files changed, 8356 insertions(+), 3836 deletions(-) create mode 100644 lib/components/src/grid/__snapshots__/grid.stories.storyshot create mode 100644 lib/components/src/preview/__snapshots__/preview.stories.storyshot diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js index cba271395325..2af808001a16 100644 --- a/addons/info/src/components/Story.js +++ b/addons/info/src/components/Story.js @@ -230,7 +230,7 @@ class Story extends Component { return (

{context.kind}

-

{context.story}

+

{context.name}

); } @@ -401,7 +401,7 @@ Story.displayName = 'Story'; Story.propTypes = { context: PropTypes.shape({ kind: PropTypes.string, - story: PropTypes.string, + name: PropTypes.string, }), info: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), propTables: PropTypes.arrayOf(PropTypes.func), diff --git a/addons/info/src/components/markdown/code.js b/addons/info/src/components/markdown/code.js index 3663bbd0f1d1..13e7a19bf246 100644 --- a/addons/info/src/components/markdown/code.js +++ b/addons/info/src/components/markdown/code.js @@ -1,57 +1,10 @@ -import { Prism } from 'global'; import React from 'react'; import PropTypes from 'prop-types'; +import { SyntaxHighlighter } from '@storybook/components'; -export class Code extends React.Component { - componentDidMount() { - this.highlight(); - } +const Code = ({ props }) => ; - componentDidUpdate() { - this.highlight(); - } - - highlight() { - if (typeof Prism !== 'undefined') { - Prism.highlightAll(); - } - } - - render() { - const { language, code } = this.props; - const codeStyle = { - fontFamily: 'Menlo, Monaco, "Courier New", monospace', - backgroundColor: '#fafafa', - }; - - const preStyle = { - fontFamily: 'Menlo, Monaco, "Courier New", monospace', - backgroundColor: '#fafafa', - padding: '.5rem', - lineHeight: 1.5, - overflowX: 'scroll', - }; - - const className = language ? `language-${language}` : ''; - - return ( - 
-        
-          {code}
-        
-
- ); - } -} - -Code.propTypes = { - language: PropTypes.string, - code: PropTypes.node, -}; -Code.defaultProps = { - language: null, - code: null, -}; +export { Code }; export function Blockquote({ children }) { const style = { diff --git a/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot index 3dfb5d4ff450..73bf91cfe2a4 100644 --- a/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot +++ b/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot @@ -1,5 +1,106 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Storyshots Addons|A11y/Button Content 1`] = ` +.emotion-0 { + font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; + color: #444; + -webkit-font-smoothing: antialiased; + font-size: 13px; +} + +
+ +
+`; + +exports[`Storyshots Addons|A11y/Button Default 1`] = ` +.emotion-0 { + font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; + color: #444; + -webkit-font-smoothing: antialiased; + font-size: 13px; +} + +
+ +
+`; + +exports[`Storyshots Addons|A11y/Button Disabled 1`] = ` +.emotion-0 { + font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; + color: #444; + -webkit-font-smoothing: antialiased; + font-size: 13px; +} + +
+ +
+`; + +exports[`Storyshots Addons|A11y/Button Invalid contrast 1`] = ` +.emotion-0 { + font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; + color: #444; + -webkit-font-smoothing: antialiased; + font-size: 13px; +} + +
+ +
+`; + +exports[`Storyshots Addons|A11y/Button Label 1`] = ` +.emotion-0 { + font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; + color: #444; + -webkit-font-smoothing: antialiased; + font-size: 13px; +} + +
+ +
+`; + exports[`Storyshots Addons|A11y/Form With label 1`] = ` .emotion-0 { font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; @@ -61,3 +162,236 @@ exports[`Storyshots Addons|A11y/Form Without Label 1`] = `

`; + +exports[`Storyshots Addons|A11y/Image Presentation 1`] = ` +.emotion-0 { + font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; + color: #444; + -webkit-font-smoothing: antialiased; + font-size: 13px; +} + +
+ +
+`; + +exports[`Storyshots Addons|A11y/Image With alt 1`] = ` +.emotion-0 { + font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; + color: #444; + -webkit-font-smoothing: antialiased; + font-size: 13px; +} + +
+ Testing the a11y addon +
+`; + +exports[`Storyshots Addons|A11y/Image Without alt 1`] = ` +.emotion-0 { + font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; + color: #444; + -webkit-font-smoothing: antialiased; + font-size: 13px; +} + +
+ +
+`; + +exports[`Storyshots Addons|A11y/Typography Correct 1`] = ` +.emotion-0 { + font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; + color: #444; + -webkit-font-smoothing: antialiased; + font-size: 13px; +} + +
+

+ Testing the a11y addon +

+

+ Testing the a11y addon +

+ + Testing the a11y addon... + +
+`; + +exports[`Storyshots Addons|A11y/Typography Empty Heading 1`] = ` +.emotion-0 { + font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; + color: #444; + -webkit-font-smoothing: antialiased; + font-size: 13px; +} + +
+

+

+`; + +exports[`Storyshots Addons|A11y/Typography Empty Link 1`] = ` +.emotion-0 { + font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; + color: #444; + -webkit-font-smoothing: antialiased; + font-size: 13px; +} + +
+ +
+`; + +exports[`Storyshots Addons|A11y/Typography Empty Paragraph 1`] = ` +.emotion-0 { + font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; + color: #444; + -webkit-font-smoothing: antialiased; + font-size: 13px; +} + +
+

+

+`; + +exports[`Storyshots Addons|A11y/Typography Link without href 1`] = ` +.emotion-0 { + font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; + color: #444; + -webkit-font-smoothing: antialiased; + font-size: 13px; +} + +
+ + Testing the a11y addon... + +
+`; + +exports[`Storyshots Addons|a11y Default 1`] = ` +.emotion-0 { + font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; + color: #444; + -webkit-font-smoothing: antialiased; + font-size: 13px; +} + +
+
+`; + +exports[`Storyshots Addons|a11y Disabled 1`] = ` +.emotion-0 { + font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; + color: #444; + -webkit-font-smoothing: antialiased; + font-size: 13px; +} + +
+ +
+`; + +exports[`Storyshots Addons|a11y Invalid contrast 1`] = ` +.emotion-0 { + font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; + color: #444; + -webkit-font-smoothing: antialiased; + font-size: 13px; +} + +
+ +
+`; + +exports[`Storyshots Addons|a11y Label 1`] = ` +.emotion-0 { + font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; + color: #444; + -webkit-font-smoothing: antialiased; + font-size: 13px; +} + +
+ +
+`; + +exports[`Storyshots Addons|a11y delayed render 1`] = ` +.emotion-0 { + font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; + color: #444; + -webkit-font-smoothing: antialiased; + font-size: 13px; +} + +
+
+
+`; diff --git a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot index 0e3e6ad331b4..2eda9efe45aa 100644 --- a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot +++ b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Storyshots Addons|Info.ForwardRef Displays forwarded ref components correctly 1`] = ` +exports[`Storyshots Addons|Info/Decorator Use Info as story decorator 1`] = ` .emotion-78 { font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; color: #444; @@ -324,7 +324,7 @@ exports[`Storyshots Addons|Info.ForwardRef Displays forwarded ref components cor

+ > + Use Info as story decorator +

+
+
+
+ Info can take options via the global or local decorator as well. +

- < - - - - [ - - object Object - - ] - - label - - = - - - - "Forwarded Ref Button" - - - - / - - - - > + + + < + + BaseButton + + + + label + + + + = + + + " + + Button + + " + + + + + /> + @@ -622,7 +638,7 @@ exports[`Storyshots Addons|Info.ForwardRef Displays forwarded ref components cor

`; -exports[`Storyshots Addons|Info.deprecated Displays Markdown in description 1`] = ` +exports[`Storyshots Addons|Info/ForwardRef Displays forwarded ref components correctly 1`] = ` .emotion-78 { font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; color: #444; @@ -946,7 +962,7 @@ exports[`Storyshots Addons|Info.deprecated Displays Markdown in description 1`] - - - - -
-

+ [ + + object Object + + ] + + label + + = + + + + "Forwarded Ref Button" + + + + / + + + + > + + + + + +

+
    +
  • + +
    • +
+ + +
+

Prop Types @@ -1349,8 +1262,8 @@ exports[`Storyshots Addons|Info.deprecated Displays Markdown in description 1`]

`; -exports[`Storyshots Addons|Info/Decorator Use Info as story decorator 1`] = ` -.emotion-78 { +exports[`Storyshots Addons|Info/GitHub issues #1814 1`] = ` +.emotion-14 { font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; color: #444; -webkit-font-smoothing: antialiased; @@ -1597,84 +1510,19 @@ exports[`Storyshots Addons|Info/Decorator Use Info as story decorator 1`] = ` opacity: 1; } -.emotion-76 { - border-collapse: collapse; - margin-top: 16px; - width: auto; - table-layout: auto; -} - -.emotion-24 { - border-bottom: 1px solid rgba(0,0,0,0.1); -} - -.emotion-14 { - padding: 2px 6px; - line-height: 18px; - vertical-align: middle; - padding: 8px 16px; -} - -.emotion-74 { - font-size: 14px; -} - -.emotion-36 { - border-bottom: 1px solid #eee; -} - -.emotion-26 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #774dd7; -} - -.emotion-28 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #1ea7fd; -} - -.emotion-28 button { - color: #37d5d3; -} - -.emotion-28 span { - white-space: pre; -} - -.emotion-30 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; -} - -.emotion-34 { - padding: 2px 6px; - text-align: left; - padding: 8px 16px; -} -
- +
+ + -
-
+
+
+ -
-
+
+
+ -
+ text +
`; exports[`Storyshots Components|Form/Textarea sizes 1`] = ` -.emotion-14 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-12 > * { margin-top: 10px; } @@ -1168,53 +1084,42 @@ exports[`Storyshots Components|Form/Textarea sizes 1`] = ` }
-
- -
-
+
+
+ -
-
+
+
+ -
+ text +
`; exports[`Storyshots Components|Form/Textarea validations 1`] = ` -.emotion-18 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-16 > * { margin-top: 10px; } @@ -1334,66 +1239,55 @@ exports[`Storyshots Components|Form/Textarea validations 1`] = ` }
-
- -
-
+
+
+ -
-
+
+
+ -
-
+
+
+ -
+ text +
`; exports[`Storyshots Components|Form/Textarea with knobs (controlled) 1`] = ` -.emotion-2 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-0 { padding: 0 10px; color: #444; @@ -1419,16 +1313,12 @@ exports[`Storyshots Components|Form/Textarea with knobs (controlled) 1`] = ` border-bottom-color: #9fdaff; } -
- -
+ `; diff --git a/lib/components/src/grid/__snapshots__/grid.stories.storyshot b/lib/components/src/grid/__snapshots__/grid.stories.storyshot index 0d9a3383da8b..d34ad5fdb00f 100644 --- a/lib/components/src/grid/__snapshots__/grid.stories.storyshot +++ b/lib/components/src/grid/__snapshots__/grid.stories.storyshot @@ -1,304 +1,276 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Components|Grid col 1`] = ` -.emotion-12 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - -.emotion-0 { +Array [ + .emotion-0 { background: silver; display: inline-block; padding: 20px; } -.emotion-8 { +, + .emotion-6 { display: inline-block; vertical-align: inherit; } -.emotion-8 > * { +.emotion-6 > * { margin-left: 10px; vertical-align: inherit; } -.emotion-8 > *:nth-child(0) { +.emotion-6 > *:nth-child(0) { margin-left: 0; } -.emotion-2 { +.emotion-0 { background: hotpink; display: inline-block; padding: 20px; }
-
+ class="emotion-6 emotion-7" + > + -
- - - -
-
-
+
, + .emotion-0 { + background: silver; + display: inline-block; + padding: 20px; +} + +, +] `; exports[`Storyshots Components|Grid col outer 1`] = ` -.emotion-12 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - -.emotion-0 { +Array [ + .emotion-0 { background: silver; display: inline-block; padding: 20px; } -.emotion-2 { +, + .emotion-0 { background: hotpink; display: inline-block; padding: 20px; } -.emotion-8 { +.emotion-6 { display: inline-block; vertical-align: inherit; margin-left: 10px; margin-right: 10px; } -.emotion-8 > * { +.emotion-6 > * { margin-left: 10px; vertical-align: inherit; } -.emotion-8 > *:nth-child(0) { +.emotion-6 > *:nth-child(0) { margin-left: 0; }
-
+ class="emotion-6 emotion-7" + > + -
- - - -
-
-
+ , + .emotion-0 { + background: silver; + display: inline-block; + padding: 20px; +} + +, +] `; exports[`Storyshots Components|Grid row 1`] = ` -.emotion-12 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; +Array [ + .emotion-0 { + background: silver; + padding: 20px; } -.emotion-8 > * { +
, + .emotion-6 > * { margin-top: 10px; } -.emotion-8 > *:nth-child(0) { +.emotion-6 > *:nth-child(0) { margin-top: 0; } .emotion-0 { - background: silver; - padding: 20px; -} - -.emotion-2 { background: hotpink; padding: 20px; }
-
+ class="emotion-6 emotion-7" + >
-
-
-
-
+ class="emotion-0 emotion-1" + />
-
-
+
, + .emotion-0 { + background: silver; + padding: 20px; +} + +
, +] `; exports[`Storyshots Components|Grid row multiply 1`] = ` -.emotion-12 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - -.emotion-0 { +Array [ + .emotion-0 { background: silver; padding: 20px; } -.emotion-2 { +
, + .emotion-0 { background: hotpink; padding: 20px; } -.emotion-8 { +.emotion-6 { margin-top: 5px; margin-bottom: 5px; } -.emotion-8 > * { +.emotion-6 > * { margin-top: 30px; } -.emotion-8 > *:nth-child(0) { +.emotion-6 > *:nth-child(0) { margin-top: 0; }
-
+ class="emotion-6 emotion-7" + >
-
-
-
-
+ class="emotion-0 emotion-1" + />
-
-
+
, + .emotion-0 { + background: silver; + padding: 20px; +} + +
, +] `; exports[`Storyshots Components|Grid row outer 1`] = ` -.emotion-12 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - -.emotion-0 { +Array [ + .emotion-0 { background: silver; padding: 20px; } -.emotion-2 { +
, + .emotion-0 { background: hotpink; padding: 20px; } -.emotion-8 { +.emotion-6 { margin-top: 10px; margin-bottom: 10px; } -.emotion-8 > * { +.emotion-6 > * { margin-top: 10px; } -.emotion-8 > *:nth-child(0) { +.emotion-6 > *:nth-child(0) { margin-top: 0; }
-
+ class="emotion-6 emotion-7" + >
-
-
-
-
+ class="emotion-0 emotion-1" + />
-
-
+
, + .emotion-0 { + background: silver; + padding: 20px; +} + +
, +] `; diff --git a/lib/components/src/grid/grid.stories.js b/lib/components/src/grid/grid.stories.js index 41bf39f5efe5..32ca1ebe94b3 100644 --- a/lib/components/src/grid/grid.stories.js +++ b/lib/components/src/grid/grid.stories.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { Fragment } from 'react'; import { storiesOf } from '@storybook/react'; import styled from '@emotion/styled'; @@ -16,7 +16,7 @@ const PlaceholderInline = styled.span(({ color }) => ({ storiesOf('Components|Grid', module) .add('row', () => ( -
+ @@ -24,10 +24,10 @@ storiesOf('Components|Grid', module) -
+ )) .add('row outer', () => ( -
+ @@ -35,10 +35,10 @@ storiesOf('Components|Grid', module) -
+ )) .add('row multiply', () => ( -
+ @@ -46,10 +46,10 @@ storiesOf('Components|Grid', module) -
+ )) .add('col', () => ( -
+ @@ -57,10 +57,10 @@ storiesOf('Components|Grid', module) -
+ )) .add('col outer', () => ( -
+ @@ -68,5 +68,5 @@ storiesOf('Components|Grid', module) -
+ )); diff --git a/lib/components/src/heading/__snapshots__/heading.stories.storyshot b/lib/components/src/heading/__snapshots__/heading.stories.storyshot index eb640200fd51..4cad06025af6 100644 --- a/lib/components/src/heading/__snapshots__/heading.stories.storyshot +++ b/lib/components/src/heading/__snapshots__/heading.stories.storyshot @@ -1,13 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Components|Heading types 1`] = ` -.emotion-46 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-4 { margin: 10px; border: 1px dashed deepskyblue; @@ -135,132 +128,128 @@ exports[`Storyshots Components|Heading types 1`] = ` font-size: 14px; } -
-
-
+
+
-
-

- - DEFAULT WITH ALL CAPS - -

-
-
-
+ DEFAULT WITH ALL CAPS + + + +
+
+
-
-

- - THIS LONG DEFAULT WITH ALL CAPS & SUB - - - With a great sub - -

-
-
-
+ THIS LONG DEFAULT WITH ALL CAPS & SUB + + + With a great sub + + + +
+
+
-
-

- - page type - -

-
-
-
+ page type + + + +
+
+
-
-

- - secondary type - -

-
-
-
+ secondary type + + + +
+
+
-
-

- - page type - - - With a sub - -

-
-
-
+ page type + + + With a sub + + + +
+
+
-
-

- - section type - -

-
-
-
+ section type + + + +
+
+
-
-

- - section type - -

-
-
+ section type + + +
+
+

-

- - section type - -

-
-
+ + section type + + +
`; diff --git a/lib/components/src/icon/__snapshots__/icon.stories.storyshot b/lib/components/src/icon/__snapshots__/icon.stories.storyshot index 9b5f18f04957..32cf91bafbd5 100644 --- a/lib/components/src/icon/__snapshots__/icon.stories.storyshot +++ b/lib/components/src/icon/__snapshots__/icon.stories.storyshot @@ -1,13 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Components|Icon labels 1`] = ` -.emotion-1194 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-2 { display: block; } @@ -57,5450 +50,5435 @@ exports[`Storyshots Components|Icon labels 1`] = ` }
-
-
- - - - -
- add -
-
-
- - - - -
- admin -
-
-
- - - - -
- alert -
-
-
- - - - -
- arrowdown -
-
-
- - - - -
- arrowleft -
-
-
- - - - -
- arrowleftalt -
-
-
- - - - -
- arrowright -
-
-
- - - - -
- arrowrightalt -
-
-
- - - - -
- arrowup -
-
-
- - - - -
- back -
-
-
- - - - -
- basket -
-
-
- - - - -
- batchaccept -
-
-
- - - - -
- batchdeny -
-
-
- - - - -
- beaker -
-
-
- - - - -
- bell -
-
-
- - - - -
- bitbucket -
-
-
- - - - -
- book -
-
-
- - - - -
- bookmark -
-
-
- - - - -
- bookmarkhollow -
-
-
- - - - -
- bottombar -
-
-
- - - - -
- box -
-
-
- - - - -
- branch -
-
-
- - - - -
- browser -
-
-
- - - - -
- button -
-
-
- - - - -
- calendar -
-
-
- - - - -
- camera -
-
-
- - - - -
- category -
-
-
- - - - -
- certificate -
-
-
- - - - -
- check -
-
-
- - - - -
- chevrondown -
-
-
- - - - -
- chroma -
-
-
- - - - -
- circle -
-
-
- - - - -
- circlehollow -
-
-
- - - - -
- close -
-
-
- - - - -
- cog -
-
-
- - - - -
- comment -
-
-
- - - - -
- commit -
-
-
- - - - -
- compass -
-
-
- - - - -
- component -
-
-
- - - - -
- copy -
-
-
- - - - -
- cpu -
-
-
- - - - -
- credit -
-
-
- - - - -
- cross -
-
-
- - - - -
- dashboard -
-
-
- - - - -
- database -
-
-
- - - - -
- delete -
-
-
- - - - -
- docchart -
-
-
- - - - -
- doclist -
-
-
- - - - -
- document -
-
-
- - - - -
- download -
-
-
- - - - -
- edit -
-
-
- - - - -
- ellipsis -
-
-
- - - - -
- email -
-
-
- - - - -
- expand -
-
-
- - - - -
- expandalt -
-
-
- - - - -
- eye -
-
-
- - - - -
- eyeclose -
-
-
- - - - -
- facebook -
-
-
- - - - -
- facehappy -
-
-
- - - - -
- faceneutral -
-
-
- - - - -
- facesad -
-
-
- - - - -
- filter -
-
-
- - - - -
- flag -
-
-
- - - - -
- folder -
-
-
- - - - -
- form -
-
-
- - - - -
- gdrive -
-
-
- - - - -
- github -
-
-
- - - - -
- gitlab -
-
-
- - - - -
- globe -
-
-
- - - - -
- google -
-
-
- - - - -
- graphbar -
-
-
- - - - -
- graphline -
-
-
- - - - -
- graphql -
-
-
- - - - -
- grid -
-
-
- - - - -
- grow -
-
-
- - - - -
- heart -
-
-
- - - - -
- hearthollow -
-
-
- - - - -
- home -
-
-
- - - - -
- hourglass -
-
-
- - - - -
- info -
-
-
- - - - -
- key -
-
-
- - - - -
- lightning -
-
-
- - - - -
- link -
-
-
- - - - -
- listunordered -
-
-
- - - - -
- location -
-
-
- - - - -
- lock -
-
-
- - - - -
- medium -
-
-
- - - - -
- memory -
-
-
- - - - -
- menu -
-
-
- - - - -
- merge -
-
-
- - - - -
- mirror -
-
-
- - - - -
- mobile -
-
-
- - - - -
- nut -
-
-
- - - - -
- outbox -
-
-
- - - - -
- paintbrush -
-
-
- - - - -
- paperclip -
-
-
- - - - -
- paragraph -
-
-
- - - - -
- phone -
-
-
- - - - -
- photo -
-
-
- - - - -
- pin -
-
-
- - - - -
- play -
-
-
- - - - -
- plus -
-
-
- - - - -
- power -
-
-
- - - - -
- print -
-
-
- - - - -
- proceed -
-
-
- - - - -
- profile -
-
-
- - - - -
- pullrequest -
-
-
- - - - -
- question -
-
-
- - - - -
- redirect -
-
-
- - - - -
- redux -
-
-
- - - - -
- reply -
-
-
- - - - -
- repository -
-
-
- - - - -
- requestchange -
-
-
- - - - -
- rss -
-
-
- - - - -
- search -
-
-
- - - - -
- share -
-
-
- - - - -
- shield -
-
-
- - - - -
- sidebar -
-
-
- - - - -
- sidebaralt -
-
-
- - - - -
- speaker -
-
-
- - - - -
- star -
-
-
- - - - -
- starhollow -
-
-
- - - - -
- stop -
-
-
- - - - -
- structure -
-
-
- - - - -
- subtract -
-
-
- - - - -
- support -
-
-
- - - - -
- switchalt -
-
-
- - - - -
- sync -
-
-
- - - - -
- tablet -
-
-
- - - - -
- thumbsup -
-
-
- - - - -
- time -
-
-
- - - - -
- timer -
-
-
- - - - -
- transfer -
-
-
- - - - -
- trash -
-
-
- - - - -
- twitter -
-
-
- - - - -
- undo -
-
-
- - - - -
- unlock -
-
-
- - - - -
- upload -
-
-
- - - - -
- user -
-
-
- - - - -
- useradd -
-
-
- - - - -
- useralt -
-
-
- - - - -
- users -
-
-
- - - - -
- video -
-
-
- - - - -
- watch -
-
-
- - - - -
- wrench -
-
-
- - - - -
- youtube -
-
-
- - - - -
- zoom -
-
-
- - - - -
- zoomout -
-
-
- - - - -
- zoomreset -
-
-
-
-`; - -exports[`Storyshots Components|Icon no labels 1`] = ` -.emotion-896 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - -.emotion-2 { - display: block; -} - -.emotion-0 { - fill: currentColor; -} - -.emotion-894 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-flow: row wrap; - -ms-flex-flow: row wrap; - flex-flow: row wrap; -} - -.emotion-4 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex: 0 1 20%; - -ms-flex: 0 1 20%; - flex: 0 1 20%; - min-width: 120px; - padding: 0px 7.5px 20px; - -webkit-flex: none; - -ms-flex: none; - flex: none; - min-width: auto; - padding: 0; - background: #fff; - border: 1px solid #666; -} - -.emotion-4 svg { - margin-right: 10px; - width: 24px; - height: 24px; -} - -.emotion-4 svg { - display: block; - margin-right: 0; - width: 48px; - height: 48px; -} - -
+ + + +
- - - + add
+
+
+ + + +
- - - + admin
+
+
+ + + +
- - - + alert
+
+
+ + + +
- - - + arrowdown
+
+
+ + + +
- - - + arrowleft
+
+
+ + + +
- - - + arrowleftalt
+
+
+ + + +
- - - + arrowright
+
+
+ + + +
- - - + arrowrightalt
+
+
+ + + +
- - - + arrowup
+
+
+ + + +
- - - + back
+
+
+ + + +
- - - + basket
+
+
+ + + +
- - - + batchaccept
+
+
+ + + +
- - - + batchdeny
+
+
+ + + +
- - - + beaker
+
+
+ + + +
- - - + bell
+
+
+ + + +
- - - + bitbucket
+
+
+ + + +
- - - + book
+
+
+ + + +
- - - + bookmark
+
+
+ + + +
- - - + bookmarkhollow
+
+
+ + + +
- - - + bottombar
+
+
+ + + +
- - - + box
+
+
+ + + +
- - - + branch
+
+
+ + + +
- - - + browser
+
+
+ + + +
- - - + button
+
+
+ + + +
- - - + calendar
+
+
+ + + +
- - - + camera
+
+
+ + + +
- - - + category
+
+
+ + + +
- - - + certificate
+
+
+ + + +
- - - + check
+
+
+ + + +
- - - + chevrondown
+
+
+ + + +
- - - + chroma
+
+
+ + + +
- - - + circle
+
+
+ + + +
- - - + circlehollow
+
+
+ + + +
- - - + close
+
+
+ + + +
- - - + cog
+
+
+ + + +
- - - + comment
+
+
+ + + +
- - - + commit
+
+
+ + + +
- - - + compass
+
+
+ + + +
- - - + component
+
+
+ + + +
- - - + copy
+
+
+ + + +
- - - + cpu
+
+
+ + + +
- - - + credit
+
+
+ + + +
- - - + cross
+
+
+ + + +
- - - + dashboard
+
+
+ + + +
- - - + database
+
+
+ + + +
- - - + delete
+
+
+ + + +
- - - + docchart
-
+
+ - - - -
+ + +
- - - + doclist
-
+
+ - - - -
+ + +
- - - + document
+
+
+ + + +
- - - + download
+
+
+ + + +
- - - + edit
+
+
+ + + +
- - - + ellipsis
+
+
+ + + +
- - - + email
+
+
+ + + +
- - - + expand
+
+
+ + + +
- - - + expandalt
+
+
+ + + +
- - - + eye
+
+
+ + + +
- - - + eyeclose
+
+
+ + + +
- - - + facebook
+
+
+ + + +
- - - + facehappy
+
+
+ + + +
- - - + faceneutral
+
+
+ + + +
- - - + facesad
+
+
+ + + +
- - - + filter
+
+
+ + + +
- - - + flag
+
+
+ + + +
- - - + folder
+
+
+ + + +
- - - + form
+
+
+ + + +
- - - + gdrive
+
+
+ + + +
- - - + github
+
+
+ + + +
- - - + gitlab
+
+
+ + + +
- - - + globe
+
+
+ + + +
- - - + google
+
+
+ + + +
- - - + graphbar
+
+
+ + + +
- - - + graphline
+
+
+ + + +
- - - + graphql
+
+
+ + + +
- - - + grid
+
+
+ + + +
- - - + grow
+
+
+ + + +
- - - + heart
+
+
+ + + +
- - - + hearthollow
+
+
+ + + +
- - - + home
+
+
+ + + +
- - - + hourglass
+
+
+ + + +
- - - + info
+
+
+ + + +
- - - + key
+
+
+ + + +
- - - + lightning
+
+
+ + + +
- - - + link
+
+
+ + + +
- - - + listunordered
+
+
+ + + +
- - - + location
+
+
+ + + +
- - - + lock
+
+
+ + + +
- - - + medium
+
+
+ + + +
- - - + memory
+
+
+ + + +
- - - + menu
+
+
+ + + +
- - - + merge
+
+
+ + + +
- - - + mirror
+
+
+ + + +
- - - + mobile
+
+
+ + + +
- - - + nut
+
+
+ + + +
- - - + outbox
+
+
+ + + +
- - - + paintbrush
+
+
+ + + +
- - - + paperclip
+
+
+ + + +
- - - + paragraph
+
+
+ + + +
- - - + phone
+
+
+ + + +
- - - + photo
+
+
+ + + +
- - - + pin
+
+
+ + + +
- - - + play
+
+
+ + + +
- - - + plus
+
+
+ + + +
- - - + power
+
+
+ + + +
- - - + print
+
+
+ + + +
- - - + proceed
+
+
+ + + +
- - - + profile
+
+
+ + + +
- - - + pullrequest
+
+
+ + + +
- - - + question
+
+
+ + + +
- - - + redirect
+
+
+ + + +
- - - + redux
-
+
+ + + + +
+ reply +
+
+
+ + + + +
+ repository +
+
+
+ + + + +
- - - + requestchange
+
+
+ + + +
- - - + rss
+
+
+ + + +
- - - + search
+
+
+ + + +
- - - + share
+
+
+ + + +
- - - + shield
+
+
+ + + +
- - - + sidebar
+
+
+ + + +
- - - + sidebaralt
+
+
+ + + +
- - - + speaker
+
+
+ + + +
- - - + star
+
+
+ + + +
- - - + starhollow
+
+
+ + + +
- - - + stop
+
+
+ + + +
- - - + structure
+
+
+ + + +
- - - + subtract
+
+
+ + + +
- - - + support
+
+
+ + + +
- - - + switchalt
+
+
+ + + +
- - - + sync
+
+
+ + + +
- - - + tablet
+
+
+ + + +
- - - + thumbsup
+
+
+ + + +
- - - + time
+
+
+ + + +
- - - + timer
+
+
+ + + +
- - - + transfer
+
+
+ + + +
- - - + trash
+
+
+ + + +
- - - + twitter
+
+
+ + + +
- - - + undo
+
+
+ + + +
- - - + unlock
+
+
+ + + +
- - - + upload
+
+
+ + + +
- - - + user
+
+
+ + + +
- - - + useradd
+
+
+ + + +
- - - + useralt
+
+
+ + + +
- - - + users
+
+
+ + + +
- - - + video
+
+
+ + + +
- - - + watch
+
+
+ + + +
- - - + wrench
+
+
+ + + +
- - - + youtube
+
+
+ + + +
- - - + zoom
+
+
+ + + +
- - - + zoomout
+
+
+ + + +
- - - + zoomreset
`; + +exports[`Storyshots Components|Icon no labels 1`] = ` +.emotion-2 { + display: block; +} + +.emotion-0 { + fill: currentColor; +} + +.emotion-894 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; +} + +.emotion-4 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex: 0 1 20%; + -ms-flex: 0 1 20%; + flex: 0 1 20%; + min-width: 120px; + padding: 0px 7.5px 20px; + -webkit-flex: none; + -ms-flex: none; + flex: none; + min-width: auto; + padding: 0; + background: #fff; + border: 1px solid #666; +} + +.emotion-4 svg { + margin-right: 10px; + width: 24px; + height: 24px; +} + +.emotion-4 svg { + display: block; + margin-right: 0; + width: 48px; + height: 48px; +} + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+`; diff --git a/lib/components/src/logo/__snapshots__/logo.stories.storyshot b/lib/components/src/logo/__snapshots__/logo.stories.storyshot index 04509c22da91..6887b2c47d48 100644 --- a/lib/components/src/logo/__snapshots__/logo.stories.storyshot +++ b/lib/components/src/logo/__snapshots__/logo.stories.storyshot @@ -1,133 +1,111 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Components|Logo colored 1`] = ` -.emotion-2 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-0 { display: block; max-width: 100%; } -
- - - - - - - - - - - - -
+ + + + + + + + + + + `; exports[`Storyshots Components|Logo gray 1`] = ` -.emotion-2 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-0 { display: block; max-width: 100%; } -
- - - - - - - - - - - - -
+ + + + + + + + + + + `; diff --git a/lib/components/src/menu/__snapshots__/menu.stories.storyshot b/lib/components/src/menu/__snapshots__/menu.stories.storyshot index cf76b6971c52..4e7edad02a66 100644 --- a/lib/components/src/menu/__snapshots__/menu.stories.storyshot +++ b/lib/components/src/menu/__snapshots__/menu.stories.storyshot @@ -1,48 +1,28 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Components|Menu initial closed 1`] = ` -.emotion-4 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-0 { background: hotpink; } -
- - - -
+ Click me + + `; exports[`Storyshots Components|Menu multiple open 1`] = ` -.emotion-8 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - -.emotion-0 { +Array [ + .emotion-0 { background: hotpink; } -
- - - , + .emotion-0 { + background: hotpink; +} + + - -
+ , +] `; exports[`Storyshots Components|Menu with Items 1`] = ` -.emotion-4 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-0 { background: hotpink; } -
- - - -
+ Click me + + `; exports[`Storyshots Components|Menu with Items that close 1`] = ` -.emotion-4 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-0 { background: hotpink; } -
- - - -
+ Click me + + `; exports[`Storyshots Components|Menu with links 1`] = ` -.emotion-4 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-0 { background: hotpink; } -
- - - -
+ Click me + + `; diff --git a/lib/components/src/navigation/__snapshots__/RoutedLink.stories.storyshot b/lib/components/src/navigation/__snapshots__/RoutedLink.stories.storyshot index 4d57e66bdd7a..2ec98bcf0bfc 100644 --- a/lib/components/src/navigation/__snapshots__/RoutedLink.stories.storyshot +++ b/lib/components/src/navigation/__snapshots__/RoutedLink.stories.storyshot @@ -1,49 +1,27 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Components|Navigation/RoutedLink w/ href 1`] = ` -.emotion-2 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-0 { color: inherit; } -
- - Link - -
+ Link + `; exports[`Storyshots Components|Navigation/RoutedLink w/ onClick 1`] = ` -.emotion-2 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-0 { color: inherit; } -
- - Try clicking with different mouse buttons and modifier keys (shift/ctrl/alt/cmd) - -
+ Try clicking with different mouse buttons and modifier keys (shift/ctrl/alt/cmd) + `; diff --git a/lib/components/src/panel_actionbar/__snapshots__/panel_actionbar.stories.storyshot b/lib/components/src/panel_actionbar/__snapshots__/panel_actionbar.stories.storyshot index ea9c36aa9caa..6d521532b7d1 100644 --- a/lib/components/src/panel_actionbar/__snapshots__/panel_actionbar.stories.storyshot +++ b/lib/components/src/panel_actionbar/__snapshots__/panel_actionbar.stories.storyshot @@ -1,13 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Components|PanelActionBar 3 items 1`] = ` -.emotion-14 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-12 { position: absolute; bottom: 0; @@ -84,51 +77,40 @@ exports[`Storyshots Components|PanelActionBar 3 items 1`] = ` border-left: 1px solid rgba(0,0,0,0.1); } -
-
    -
  • - -
    • -
  • +
    • +
  • + -
    • -
  • +
    • +
  • + -
    • -
-
+ Nr3 + + + `; exports[`Storyshots Components|PanelActionBar single item 1`] = ` -.emotion-6 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-4 { position: absolute; bottom: 0; @@ -187,21 +169,17 @@ exports[`Storyshots Components|PanelActionBar single item 1`] = ` outline: 0 none; } -
-
    -
  • - -
    • -
-
+ CLEAR + + + `; diff --git a/lib/components/src/placeholder/__snapshots__/placeholder.stories.storyshot b/lib/components/src/placeholder/__snapshots__/placeholder.stories.storyshot index 8d1910140f06..75a0744a623f 100644 --- a/lib/components/src/placeholder/__snapshots__/placeholder.stories.storyshot +++ b/lib/components/src/placeholder/__snapshots__/placeholder.stories.storyshot @@ -1,13 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Components|Placeholder default 1`] = ` -.emotion-2 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-0 { font-size: 11px; display: block; @@ -17,13 +10,9 @@ exports[`Storyshots Components|Placeholder default 1`] = ` padding: 20px; } -
-

- This is a placeholder -

-
+ This is a placeholder +

`; diff --git a/lib/components/src/preview/__snapshots__/preview.stories.storyshot b/lib/components/src/preview/__snapshots__/preview.stories.storyshot index 812e13ff5055..f250b1ad0d94 100644 --- a/lib/components/src/preview/__snapshots__/preview.stories.storyshot +++ b/lib/components/src/preview/__snapshots__/preview.stories.storyshot @@ -1,14 +1,8 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Components|Preview default 1`] = ` -.emotion-58 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - -.emotion-10 { +Array [ + .emotion-10 { display: block; } @@ -146,22 +140,7 @@ exports[`Storyshots Components|Preview default 1`] = ` margin-right: 15px; } -.emotion-56 { - position: absolute; - overflow: auto; - left: 0; - right: 0; - bottom: 0; - top: 0; - z-index: 3; - height: 100%; - background: transparent; -} -
-
-
-
, + .emotion-0 { + position: absolute; + overflow: auto; + left: 0; + right: 0; + bottom: 0; + top: 0; + z-index: 3; + height: 100%; + background: transparent; +} + +
-
+ />, +] `; diff --git a/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot b/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot index 0bd7ab93b172..2b55d4b8c7c0 100644 --- a/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot +++ b/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot @@ -1,13 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Components|SyntaxHighlighter bash 1`] = ` -.emotion-8 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-6 { position: relative; overflow: hidden; @@ -191,48 +184,37 @@ exports[`Storyshots Components|SyntaxHighlighter bash 1`] = ` }
-
- 
-        
-          npx npm-check-updates 
-          
-            '/storybook/'
-          
-           -u 
-          
-            &&
-          
-           yarn
-        
-
-
+ '/storybook/' + + -u + + && + + yarn + +
`; exports[`Storyshots Components|SyntaxHighlighter bordered & copy-able 1`] = ` -.emotion-14 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-10 { position: absolute; bottom: 0; @@ -477,228 +459,217 @@ exports[`Storyshots Components|SyntaxHighlighter bordered & copy-able 1`] = ` }
-
- 
-        
-          
-            import
-          
-           
-          
-            {
-          
-           Good
-          
-            ,
-          
-           Things 
-          
-            }
-          
-           
-          
-            from
-          
-           
-          
-            'life'
-          
-          
-            ;
-          
-          
+          import
+        
+         
+        
+          {
+        
+         Good
+        
+          ,
+        
+         Things 
+        
+          }
+        
+         
+        
+          from
+        
+         
+        
+          'life'
+        
+        
+          ;
+        
+        
 
 
+        
+          const
+        
+         
+        
+          result
+        
+         
+        
+          =
+        
+         
+        
+          (
+        
+        
+          )
+        
+         
+        
+          =>
+        
+         
+        
           
-            const
-          
-           
-          
-            result
-          
-           
-          
-            =
-          
-           
-          
-            (
+            
+              <
+            
+            Good
           
           
-            )
-          
-           
-          
-            =>
+            >
           
-           
+        
+        
           
-            
-              
-                <
-              
-              Good
-            
             
-              >
+              <
             
+            Things
           
+           
           
-            
-              
-                <
-              
-              Things
-            
-             
-            
-              />
-            
+            />
           
+        
+        
           
-            
-              
-                </
-              
-              Good
-            
             
-              >
+              </
             
+            Good
           
           
-            ;
+            >
           
-          
+        
+        
+          ;
+        
+        
 
 
-          
-            export
-          
-           
-          
-            {
-          
-           result 
-          
-            as
-          
-           
-          
-            default
-          
-           
-          
-            }
-          
-          
-            ;
-          
-          
+        
+          export
+        
+         
+        
+          {
+        
+         result 
+        
+          as
+        
+         
+        
+          default
+        
+         
+        
+          }
+        
+        
+          ;
+        
+        
 
-        
-
-
-
    + +
+
    +
  • -
  • - -
    • -
-
+ copy + + +
`; exports[`Storyshots Components|SyntaxHighlighter jsx 1`] = ` -.emotion-8 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-6 { position: relative; overflow: hidden; @@ -882,245 +853,234 @@ exports[`Storyshots Components|SyntaxHighlighter jsx 1`] = ` }
-
- 
-        
-          
-            import
-          
-           
-          
-            {
-          
-           Good
-          
-            ,
-          
-           Things 
-          
-            }
-          
-           
-          
-            from
-          
-           
-          
-            'life'
-          
-          
-            ;
-          
-          
+          import
+        
+         
+        
+          {
+        
+         Good
+        
+          ,
+        
+         Things 
+        
+          }
+        
+         
+        
+          from
+        
+         
+        
+          'life'
+        
+        
+          ;
+        
+        
 
 
+        
+          const
+        
+         
+        
+          result
+        
+         
+        
+          =
+        
+         
+        
+          (
+        
+        
+          )
+        
+         
+        
+          =>
+        
+         
+        
           
-            const
-          
-           
-          
-            result
-          
-           
-          
-            =
-          
-           
-          
-            (
+            
+              <
+            
+            Good
           
           
-            )
-          
-           
-          
-            =>
+            >
           
-           
+        
+        
           
-            
-              
-                <
-              
-              Good
-            
             
-              >
+              <
             
+            Things
+          
+           
+          
+            all
           
           
             
-              
-                <
-              
-              Things
+              =
             
-             
             
-              all
+              {
             
             
-              
-                =
-              
-              
-                {
-              
-              
-                true
-              
-              
-                }
-              
+              true
             
-             
             
-              />
+              }
             
           
+           
+          
+            />
+          
+        
+        
           
-            
-              
-                </
-              
-              Good
-            
             
-              >
+              </
             
+            Good
           
           
-            ;
+            >
           
-          
+        
+        
+          ;
+        
+        
 
 
-          
-            export
-          
-           
-          
-            {
-          
-           result 
-          
-            as
-          
-           
-          
-            default
-          
-           
-          
-            }
-          
-          
-            ;
-          
-          
+        
+          export
+        
+         
+        
+          {
+        
+         result 
+        
+          as
+        
+         
+        
+          default
+        
+         
+        
+          }
+        
+        
+          ;
+        
+        
 
-        
-
-
+ +
`; exports[`Storyshots Components|SyntaxHighlighter showLineNumbers 1`] = ` -.emotion-8 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-6 { position: relative; overflow: hidden; @@ -1304,247 +1264,236 @@ exports[`Storyshots Components|SyntaxHighlighter showLineNumbers 1`] = ` }
-
- 
-        
-          
-            1
+      
+        
+          1
 
-          
-          
-            2
+        
+        
+          2
 
-          
-          
-            3
+        
+        
+          3
 
-          
-          
-            4
+        
+        
+          4
 
-          
-          
-            5
+        
+        
+          5
 
-          
-        
-        
+      
+      
+        
-          
-            import
-          
-           
-          
-            {
-          
-           Good
-          
-            ,
-          
-           Things 
-          
-            }
-          
-           
-          
-            from
-          
-           
-          
-            'life'
-          
-          
-            ;
-          
-          
+          import
+        
+         
+        
+          {
+        
+         Good
+        
+          ,
+        
+         Things 
+        
+          }
+        
+         
+        
+          from
+        
+         
+        
+          'life'
+        
+        
+          ;
+        
+        
 
 
+        
+          const
+        
+         
+        
+          result
+        
+         
+        
+          =
+        
+         
+        
+          (
+        
+        
+          )
+        
+         
+        
+          =>
+        
+         
+        
           
-            const
-          
-           
-          
-            result
-          
-           
-          
-            =
-          
-           
-          
-            (
+            
+              <
+            
+            Good
           
           
-            )
-          
-           
-          
-            =>
+            >
           
-           
+        
+        
           
-            
-              
-                <
-              
-              Good
-            
             
-              >
+              <
             
+            Things
           
+           
           
-            
-              
-                <
-              
-              Things
-            
-             
-            
-              />
-            
+            />
           
+        
+        
           
-            
-              
-                </
-              
-              Good
-            
             
-              >
+              </
             
+            Good
           
           
-            ;
+            >
           
-          
+        
+        
+          ;
+        
+        
 
 
-          
-            export
-          
-           
-          
-            {
-          
-           result 
-          
-            as
-          
-           
-          
-            default
-          
-           
-          
-            }
-          
-          
-            ;
-          
-          
+        
+          export
+        
+         
+        
+          {
+        
+         result 
+        
+          as
+        
+         
+        
+          default
+        
+         
+        
+          }
+        
+        
+          ;
+        
+        
 
-        
-
-
+ +
`; exports[`Storyshots Components|SyntaxHighlighter story 1`] = ` -.emotion-8 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-6 { position: relative; overflow: hidden; @@ -1728,869 +1677,865 @@ exports[`Storyshots Components|SyntaxHighlighter story 1`] = ` }
-
- 
-        
+          import
+        
+         React 
+        
+          from
+        
+         
+        
+          'react'
+        
+        
+          ;
+        
+        
+
+        
+          import
+        
+         
+        
+          {
+        
+         storiesOf 
+        
+          }
+        
+         
+        
+          from
+        
+         
+        
+          '@storybook/react'
+        
+        
+          ;
+        
+        
+
+        
+          import
+        
+         styled 
+        
+          from
+        
+         
+        
+          '@emotion/styled'
+        
+        
+          ;
+        
+        
+
+
+        
+          import
+        
+         Heading 
+        
+          from
+        
+         
+        
+          './heading'
+        
+        
+          ;
+        
+        
+
+
+        
+          const
+        
+         Holder 
+        
+          =
+        
+         styled
+        
+          .
+        
+        
+          div
+        
+        
+          (
+        
+        
+          {
+        
+        
+  margin
+        
+          :
+        
+         
+        
+          10
+        
+        
+          ,
+        
+        
+  border
+        
+          :
+        
+         
+        
+          '1px dashed deepskyblue'
+        
+        
+          ,
+        
+        
+  
+        
+          // overflow: 'hidden',
+        
+        
+
+        
+          }
+        
+        
+          )
+        
+        
+          ;
+        
+        
+
+
+        
+          storiesOf
+        
+        
+          (
+        
+        
+          'Components|Heading'
+        
+        
+          ,
+        
+         module
+        
+          )
+        
+        
+          .
+        
+        
+          add
+        
+        
+          (
+        
+        
+          'types'
+        
+        
+          ,
+        
+         
+        
+          (
+        
+        
+          )
+        
+         
+        
+          =>
+        
+         
+        
+          (
+        
+        
+  
+        
           
-            import
+            
+              <
+            
+            div
           
-           React 
           
-            from
+            >
           
-           
+        
+        
+          
+            
+        
+        
           
-            'react'
+            
+              <
+            
+            Holder
           
           
-            ;
+            >
           
+        
+        
           
-
+              
+        
+        
           
-            import
+            
+              <
+            
+            Heading
           
-           
           
-            {
+            >
           
-           storiesOf 
+        
+        
+          DEFAULT WITH ALL CAPS
+        
+        
           
-            }
+            
+              </
+            
+            Heading
           
-           
           
-            from
+            >
           
-           
+        
+        
+          
+            
+        
+        
           
-            '@storybook/react'
+            
+              </
+            
+            Holder
           
           
-            ;
+            >
           
+        
+        
           
-
+            
+        
+        
           
-            import
-          
-           styled 
-          
-            from
-          
-           
-          
-            '@emotion/styled'
-          
-          
-            ;
-          
-          
-
-
-          
-            import
-          
-           Heading 
-          
-            from
-          
-           
-          
-            './heading'
-          
-          
-            ;
-          
-          
-
-
-          
-            const
-          
-           Holder 
-          
-            =
-          
-           styled
-          
-            .
-          
-          
-            div
-          
-          
-            (
-          
-          
-            {
-          
-          
-  margin
-          
-            :
-          
-           
-          
-            10
-          
-          
-            ,
-          
-          
-  border
-          
-            :
-          
-           
-          
-            '1px dashed deepskyblue'
-          
-          
-            ,
-          
-          
-  
-          
-            // overflow: 'hidden',
-          
-          
-
-          
-            }
-          
-          
-            )
-          
-          
-            ;
-          
-          
-
-
-          
-            storiesOf
-          
-          
-            (
-          
-          
-            'Components|Heading'
-          
-          
-            ,
-          
-           module
-          
-            )
-          
-          
-            .
-          
-          
-            add
-          
-          
-            (
-          
-          
-            'types'
-          
-          
-            ,
-          
-           
-          
-            (
-          
-          
-            )
-          
-           
-          
-            =>
+            
+              <
+            
+            Holder
           
-           
           
-            (
+            >
           
+        
+        
           
-  
+              
+        
+        
           
-            
-              
-                <
-              
-              div
-            
             
-              >
+              <
             
+            Heading
           
+           
           
-            
-    
+            sub
           
           
-            
-              
-                <
-              
-              Holder
-            
             
-              >
+              =
             
-          
-          
-            
-      
-          
-          
             
-              
-                <
-              
-              Heading
+              "
             
+            With a great sub
             
-              >
+              "
             
           
           
-            DEFAULT WITH ALL CAPS
+            >
           
+        
+        
+          THIS LONG DEFAULT WITH ALL CAPS & SUB
+        
+        
           
-            
-              
-                </
-              
-              Heading
-            
             
-              >
+              </
             
+            Heading
           
           
-            
-    
+            >
           
+        
+        
+          
+            
+        
+        
           
-            
-              
-                </
-              
-              Holder
-            
             
-              >
+              </
             
+            Holder
           
           
-            
-    
+            >
           
+        
+        
+          
+            
+        
+        
           
-            
-              
-                <
-              
-              Holder
-            
             
-              >
+              <
             
+            Holder
           
           
-            
-      
+            >
           
+        
+        
+          
+              
+        
+        
           
-            
-              
-                <
-              
-              Heading
-            
-             
-            
-              sub
-            
-            
-              
-                =
-              
-              
-                "
-              
-              With a great sub
-              
-                "
-              
-            
             
-              >
+              <
             
+            Heading
           
+           
           
-            THIS LONG DEFAULT WITH ALL CAPS & SUB
+            type
           
           
-            
-              
-                </
-              
-              Heading
-            
             
-              >
+              =
             
-          
-          
-            
-    
-          
-          
             
-              
-                </
-              
-              Holder
+              "
             
+            page
             
-              >
+              "
             
           
           
-            
-    
+            >
           
+        
+        
+          page type
+        
+        
           
-            
-              
-                <
-              
-              Holder
-            
             
-              >
+              </
             
+            Heading
           
           
-            
-      
+            >
           
+        
+        
+          
+            
+        
+        
           
-            
-              
-                <
-              
-              Heading
-            
-             
-            
-              type
-            
-            
-              
-                =
-              
-              
-                "
-              
-              page
-              
-                "
-              
-            
             
-              >
+              </
             
+            Holder
           
           
-            page type
+            >
           
+        
+        
+          
+            
+        
+        
           
-            
-              
-                </
-              
-              Heading
-            
             
-              >
+              <
             
+            Holder
           
           
-            
-    
+            >
           
+        
+        
+          
+              
+        
+        
           
-            
-              
-                </
-              
-              Holder
-            
             
-              >
+              <
             
+            Heading
           
+           
           
-            
-    
+            type
           
           
             
+              =
+            
+            
-              
-                <
-              
-              Holder
+              "
             
+            page
             
-              >
+              "
             
           
+           
           
-            
-      
+            sub
           
           
             
-              
-                <
-              
-              Heading
-            
-             
-            
-              type
-            
-            
-              
-                =
-              
-              
-                "
-              
-              page
-              
-                "
-              
-            
-             
-            
-              sub
+              =
             
             
-              
-                =
-              
-              
-                "
-              
-              With a sub
-              
-                "
-              
+              "
             
+            With a sub
             
-              >
+              "
             
           
           
-            
-        page type
-      
+            >
           
+        
+        
+          
+                page type
+              
+        
+        
           
-            
-              
-                </
-              
-              Heading
-            
             
-              >
+              </
             
+            Heading
           
           
-            
-    
+            >
           
+        
+        
+          
+            
+        
+        
           
-            
-              
-                </
-              
-              Holder
-            
             
-              >
+              </
             
+            Holder
           
           
-            
-  
+            >
           
+        
+        
+          
+          
+        
+        
           
-            
-              
-                </
-              
-              div
-            
             
-              >
+              </
             
-          
-          
-
-          
-            )
-          
-          
-            )
+            div
           
           
-            ;
+            >
           
-          
+        
+        
+
+        
+          )
+        
+        
+          )
+        
+        
+          ;
+        
+        
 
-        
-
-
+ +
`; diff --git a/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.js b/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.js index 01c8bfb79a1b..cc04311a2d86 100644 --- a/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.js +++ b/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.js @@ -21,36 +21,37 @@ storiesOf('Components|SyntaxHighlighter', module) .add('story', () => ( {` - import React from 'react'; -import { storiesOf } from '@storybook/react'; -import styled from '@emotion/styled'; + import React from 'react'; + import { storiesOf } from '@storybook/react'; + import styled from '@emotion/styled'; -import Heading from './heading'; + import Heading from './heading'; -const Holder = styled.div({ - margin: 10, - border: '1px dashed deepskyblue', - // overflow: 'hidden', -}); + const Holder = styled.div({ + margin: 10, + border: '1px dashed deepskyblue', + // overflow: 'hidden', + }); -storiesOf('Components|Heading', module).add('types', () => ( -
- - DEFAULT WITH ALL CAPS - - - THIS LONG DEFAULT WITH ALL CAPS & SUB - - - page type - - - - page type - - -
-));`} + storiesOf('Components|Heading', module).add('types', () => ( +
+ + DEFAULT WITH ALL CAPS + + + THIS LONG DEFAULT WITH ALL CAPS & SUB + + + page type + + + + page type + + +
+ )); + `} )) .add('bordered & copy-able', () => ( diff --git a/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot b/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot index 0af1e9ce2e98..158eb93b648e 100644 --- a/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot +++ b/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot @@ -1,13 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Components|Tabs stateful - dynamic 1`] = ` -.emotion-20 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-0 { white-space: normal; display: -webkit-inline-box; @@ -133,106 +126,95 @@ exports[`Storyshots Components|Tabs stateful - dynamic 1`] = ` }
-
- - - - - - -
+ Tab title #1 + + + + + +
+
+
-
-
-
-
-
-
-
+ id="test1" + title="Tab title #1" + /> +
+
+
+
+
`; exports[`Storyshots Components|Tabs stateful - no initial 1`] = ` -.emotion-20 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-2 { white-space: normal; display: -webkit-inline-box; @@ -358,106 +340,95 @@ exports[`Storyshots Components|Tabs stateful - no initial 1`] = ` }
-
- - - - - - -
+ Tab title #1 + + + + + +
+
+
-
-
-
-
-
-
-
+ id="test1" + title="Tab title #1" + /> +
+
+
+
+
`; exports[`Storyshots Components|Tabs stateful - static 1`] = ` -.emotion-12 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-0 { white-space: normal; display: -webkit-inline-box; @@ -583,51 +554,47 @@ exports[`Storyshots Components|Tabs stateful - static 1`] = ` }
-
- - -
+ With a function + +
+
+
+
-
-
-
- test2 is always active (but visually hidden) -
+
+ test2 is always active (but visually hidden)
@@ -636,13 +603,6 @@ exports[`Storyshots Components|Tabs stateful - static 1`] = ` `; exports[`Storyshots Components|Tabs stateless - absolute 1`] = ` -.emotion-20 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-0 { white-space: normal; display: -webkit-inline-box; @@ -787,106 +747,95 @@ exports[`Storyshots Components|Tabs stateless - absolute 1`] = ` }
-
- - - - - - -
+ Tab title #1 + + + + + +
+
+
-
-
-
-
-
-
-
+ id="test1" + title="Tab title #1" + /> +
+
+
+
+
`; exports[`Storyshots Components|Tabs stateless - bordered 1`] = ` -.emotion-20 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-0 { white-space: normal; display: -webkit-inline-box; @@ -1016,106 +965,95 @@ exports[`Storyshots Components|Tabs stateless - bordered 1`] = ` }
-
- - - - - - -
+ Tab title #1 + + + + + +
+
+
-
-
-
-
-
-
-
+ id="test1" + title="Tab title #1" + /> +
+
+
+
+
`; exports[`Storyshots Components|Tabs stateless - empty 1`] = ` -.emotion-2 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-0 { font-size: 11px; display: block; @@ -1126,28 +1064,17 @@ exports[`Storyshots Components|Tabs stateless - empty 1`] = ` }
-
-

- no panels available -

-
+ no panels available +

`; exports[`Storyshots Components|Tabs stateless - no scrolling 1`] = ` -.emotion-20 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-0 { white-space: normal; display: -webkit-inline-box; @@ -1277,106 +1204,95 @@ exports[`Storyshots Components|Tabs stateless - no scrolling 1`] = ` }
-
- - - - - - -
+ Tab title #1 + + + + + +
+
+
-
-
-
-
-
-
-
+ id="test1" + title="Tab title #1" + /> +
+
+
+
+
`; exports[`Storyshots Components|Tabs stateless - with tools 1`] = ` -.emotion-22 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-0 { white-space: normal; display: -webkit-inline-box; @@ -1524,108 +1440,104 @@ exports[`Storyshots Components|Tabs stateless - with tools 1`] = ` }
-
- - - - - - -
-
+ - -
+ Tab title #2 + + + + +
-
-
-
-
-
-
+ +
+
+
+
+
+
+
+
+
`; diff --git a/lib/components/src/treeview/__snapshots__/treeview.stories.storyshot b/lib/components/src/treeview/__snapshots__/treeview.stories.storyshot index cdbf59113d65..311aaf776744 100644 --- a/lib/components/src/treeview/__snapshots__/treeview.stories.storyshot +++ b/lib/components/src/treeview/__snapshots__/treeview.stories.storyshot @@ -1,18 +1,8 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Components|Treeview stateful 1`] = ` -.emotion-63 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - -.emotion-2 { - fill: currentColor; -} - -.emotion-0 { +Array [ + .emotion-0 { height: 24px; box-sizing: border-box; width: 100%; @@ -29,12 +19,21 @@ exports[`Storyshots Components|Treeview stateful 1`] = ` border-bottom: 1px solid #9fdaff; } -.emotion-61 { +, + .emotion-0 { + fill: currentColor; +} + +.emotion-59 { margin-left: -20px; margin-right: -20px; } -.emotion-14 { +.emotion-12 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -48,7 +47,7 @@ exports[`Storyshots Components|Treeview stateful 1`] = ` text-decoration: none; } -.emotion-12 { +.emotion-10 { min-height: 24px; display: -webkit-box; display: -webkit-flex; @@ -65,7 +64,7 @@ exports[`Storyshots Components|Treeview stateful 1`] = ` background: transparent; } -.emotion-5 { +.emotion-3 { display: block; display: inline-block; width: 8px; @@ -82,7 +81,7 @@ exports[`Storyshots Components|Treeview stateful 1`] = ` transform: rotateZ(90deg); } -.emotion-10 { +.emotion-8 { display: block; display: inline-block; width: 10px; @@ -91,7 +90,7 @@ exports[`Storyshots Components|Treeview stateful 1`] = ` color: #774dd7; } -.emotion-21 { +.emotion-19 { min-height: 24px; display: -webkit-box; display: -webkit-flex; @@ -108,7 +107,7 @@ exports[`Storyshots Components|Treeview stateful 1`] = ` background: transparent; } -.emotion-19 { +.emotion-17 { display: block; display: inline-block; width: 10px; @@ -117,7 +116,7 @@ exports[`Storyshots Components|Treeview stateful 1`] = ` color: #37d5d3; } -.emotion-28 { +.emotion-26 { display: block; display: inline-block; width: 8px; @@ -132,46 +131,38 @@ exports[`Storyshots Components|Treeview stateful 1`] = ` }
- -
@@ -181,25 +172,25 @@ exports[`Storyshots Components|Treeview stateful 1`] = `
@@ -207,35 +198,35 @@ exports[`Storyshots Components|Treeview stateful 1`] = `
@@ -248,35 +239,35 @@ exports[`Storyshots Components|Treeview stateful 1`] = `
@@ -286,18 +277,11 @@ exports[`Storyshots Components|Treeview stateful 1`] = `
-
-
+
, +] `; exports[`Storyshots Components|Treeview stateless 1`] = ` -.emotion-43 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-0 { fill: currentColor; } @@ -400,129 +384,115 @@ exports[`Storyshots Components|Treeview stateless 1`] = ` }
+ +
+ + + + + + + + Parent A + +
+
- - - - - Parent A - + Child A1
+ + + - Child A1 + + Child A2 +
-
- -
- - - - - - - - Child A2 - -
- -
`; exports[`Storyshots Components|Treeview with custom node 1`] = ` -.emotion-64 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - -.emotion-2 { - fill: currentColor; -} - -.emotion-0 { +Array [ + .emotion-0 { height: 24px; box-sizing: border-box; width: 100%; @@ -539,12 +509,21 @@ exports[`Storyshots Components|Treeview with custom node 1`] = ` border-bottom: 1px solid #9fdaff; } -.emotion-62 { +, + .emotion-0 { + fill: currentColor; +} + +.emotion-60 { margin-left: -20px; margin-right: -20px; } -.emotion-14 { +.emotion-12 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -558,7 +537,7 @@ exports[`Storyshots Components|Treeview with custom node 1`] = ` text-decoration: none; } -.emotion-12 { +.emotion-10 { min-height: 24px; display: -webkit-box; display: -webkit-flex; @@ -575,7 +554,7 @@ exports[`Storyshots Components|Treeview with custom node 1`] = ` background: transparent; } -.emotion-5 { +.emotion-3 { display: block; display: inline-block; width: 8px; @@ -592,7 +571,7 @@ exports[`Storyshots Components|Treeview with custom node 1`] = ` transform: rotateZ(90deg); } -.emotion-10 { +.emotion-8 { display: block; display: inline-block; width: 10px; @@ -601,7 +580,7 @@ exports[`Storyshots Components|Treeview with custom node 1`] = ` color: #774dd7; } -.emotion-36 { +.emotion-34 { min-height: 24px; display: -webkit-box; display: -webkit-flex; @@ -618,7 +597,7 @@ exports[`Storyshots Components|Treeview with custom node 1`] = ` background: transparent; } -.emotion-19 { +.emotion-17 { display: block; display: inline-block; width: 10px; @@ -627,7 +606,7 @@ exports[`Storyshots Components|Treeview with custom node 1`] = ` color: #37d5d3; } -.emotion-29 { +.emotion-27 { display: block; display: inline-block; width: 8px; @@ -641,7 +620,7 @@ exports[`Storyshots Components|Treeview with custom node 1`] = ` color: rgba(0,0,0,0.4); } -.emotion-22 { +.emotion-20 { min-height: 24px; display: -webkit-box; display: -webkit-flex; @@ -660,46 +639,38 @@ exports[`Storyshots Components|Treeview with custom node 1`] = ` }
- -
@@ -709,25 +680,25 @@ exports[`Storyshots Components|Treeview with custom node 1`] = `
@@ -735,35 +706,35 @@ exports[`Storyshots Components|Treeview with custom node 1`] = `
@@ -776,35 +747,35 @@ exports[`Storyshots Components|Treeview with custom node 1`] = `
@@ -814,23 +785,35 @@ exports[`Storyshots Components|Treeview with custom node 1`] = `
-
-
+
, +] `; exports[`Storyshots Components|Treeview with ensured (WIP) 1`] = ` -.emotion-71 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; +Array [ + .emotion-0 { + height: 24px; + box-sizing: border-box; + width: 100%; + background: transparent; + border: 0 none; color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; + padding: 10px; + padding-left: 0; + border-bottom: 1px solid rgba(0,0,0,0.05); } -.emotion-7 { - fill: currentColor; +.emotion-0:focus { + outline: 0; + border-bottom: 1px solid #9fdaff; } -.emotion-2 { +, + .emotion-0 { color: currentColor; font-weight: normal; font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; @@ -848,36 +831,39 @@ exports[`Storyshots Components|Treeview with ensured (WIP) 1`] = ` text-transform: uppercase; } -.emotion-2 > sub { +.emotion-0 > sub { display: block; padding-top: 5px; line-height: 1.2em; font-size: 14px; } -.emotion-0 { - height: 24px; - box-sizing: border-box; - width: 100%; - background: transparent; - border: 0 none; - color: #444; - padding: 10px; - padding-left: 0; - border-bottom: 1px solid rgba(0,0,0,0.05); +.emotion-3 { + margin-top: 20px; + margin-bottom: 10px; } -.emotion-0:focus { - outline: 0; - border-bottom: 1px solid #9fdaff; +
+

+ + Root 1 + +

+
, + .emotion-0 { + fill: currentColor; } -.emotion-23 { +.emotion-16 { margin-left: -20px; margin-right: -20px; } -.emotion-19 { +.emotion-12 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -891,7 +877,7 @@ exports[`Storyshots Components|Treeview with ensured (WIP) 1`] = ` text-decoration: none; } -.emotion-17 { +.emotion-10 { min-height: 24px; display: -webkit-box; display: -webkit-flex; @@ -908,7 +894,7 @@ exports[`Storyshots Components|Treeview with ensured (WIP) 1`] = ` background: transparent; } -.emotion-15 { +.emotion-8 { display: block; display: inline-block; width: 10px; @@ -917,7 +903,7 @@ exports[`Storyshots Components|Treeview with ensured (WIP) 1`] = ` color: #774dd7; } -.emotion-10 { +.emotion-3 { display: block; display: inline-block; width: 8px; @@ -931,63 +917,39 @@ exports[`Storyshots Components|Treeview with ensured (WIP) 1`] = ` color: rgba(0,0,0,0.4); } -.emotion-5 { - margin-top: 20px; - margin-bottom: 10px; -} -
- -
-

- - Root 1 - -

-
-
@@ -997,51 +959,144 @@ exports[`Storyshots Components|Treeview with ensured (WIP) 1`] = `
-
-
, + .emotion-0 { + color: currentColor; + font-weight: normal; + font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; + margin: 0; + padding: 0; + line-height: 1.2em; + display: block; + color: rgba(0,0,0,0.4); + -webkit-letter-spacing: 4.3px; + -moz-letter-spacing: 4.3px; + -ms-letter-spacing: 4.3px; + letter-spacing: 4.3px; + font-weight: 400; + font-size: 10px; + text-transform: uppercase; +} + +.emotion-0 > sub { + display: block; + padding-top: 5px; + line-height: 1.2em; + font-size: 14px; +} + +.emotion-3 { + margin-top: 20px; + margin-bottom: 10px; +} + +

Root 3

-
-
-
- -
- +
, + .emotion-0 { + fill: currentColor; +} + +.emotion-16 { + margin-left: -20px; + margin-right: -20px; +} + +.emotion-12 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: inherit; + -webkit-text-decoration: none; + text-decoration: none; +} + +.emotion-10 { + min-height: 24px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + padding-left: 10px; + background: transparent; +} + +.emotion-8 { + display: block; + display: inline-block; + width: 10px; + height: 10px; + margin-right: 10px; + color: #774dd7; +} + +.emotion-3 { + display: block; + display: inline-block; + width: 8px; + height: 8px; + margin: 1px; + margin-right: 4px; + margin-left: -2px; + -webkit-transition: -webkit-transform .1s linear; + -webkit-transition: transform .1s linear; + transition: transform .1s linear; + color: rgba(0,0,0,0.4); +} + +
+
+ +
+ @@ -1051,51 +1106,144 @@ exports[`Storyshots Components|Treeview with ensured (WIP) 1`] = `
-
-
, + .emotion-0 { + color: currentColor; + font-weight: normal; + font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; + margin: 0; + padding: 0; + line-height: 1.2em; + display: block; + color: rgba(0,0,0,0.4); + -webkit-letter-spacing: 4.3px; + -moz-letter-spacing: 4.3px; + -ms-letter-spacing: 4.3px; + letter-spacing: 4.3px; + font-weight: 400; + font-size: 10px; + text-transform: uppercase; +} + +.emotion-0 > sub { + display: block; + padding-top: 5px; + line-height: 1.2em; + font-size: 14px; +} + +.emotion-3 { + margin-top: 20px; + margin-bottom: 10px; +} + +

Others

-
-
, + .emotion-0 { + fill: currentColor; +} + +.emotion-16 { + margin-left: -20px; + margin-right: -20px; +} + +.emotion-12 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: inherit; + -webkit-text-decoration: none; + text-decoration: none; +} + +.emotion-10 { + min-height: 24px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + padding-left: 10px; + background: transparent; +} + +.emotion-8 { + display: block; + display: inline-block; + width: 10px; + height: 10px; + margin-right: 10px; + color: #774dd7; +} + +.emotion-3 { + display: block; + display: inline-block; + width: 8px; + height: 8px; + margin: 1px; + margin-right: 4px; + margin-left: -2px; + -webkit-transition: -webkit-transform .1s linear; + -webkit-transition: transform .1s linear; + transition: transform .1s linear; + color: rgba(0,0,0,0.4); +} + +
@@ -1105,23 +1253,35 @@ exports[`Storyshots Components|Treeview with ensured (WIP) 1`] = `
-
-
+
, +] `; exports[`Storyshots Components|Treeview with roots node 1`] = ` -.emotion-71 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; +Array [ + .emotion-0 { + height: 24px; + box-sizing: border-box; + width: 100%; + background: transparent; + border: 0 none; color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; + padding: 10px; + padding-left: 0; + border-bottom: 1px solid rgba(0,0,0,0.05); } -.emotion-7 { - fill: currentColor; +.emotion-0:focus { + outline: 0; + border-bottom: 1px solid #9fdaff; } -.emotion-2 { +, + .emotion-0 { color: currentColor; font-weight: normal; font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; @@ -1139,36 +1299,39 @@ exports[`Storyshots Components|Treeview with roots node 1`] = ` text-transform: uppercase; } -.emotion-2 > sub { +.emotion-0 > sub { display: block; padding-top: 5px; line-height: 1.2em; font-size: 14px; } -.emotion-0 { - height: 24px; - box-sizing: border-box; - width: 100%; - background: transparent; - border: 0 none; - color: #444; - padding: 10px; - padding-left: 0; - border-bottom: 1px solid rgba(0,0,0,0.05); +.emotion-3 { + margin-top: 20px; + margin-bottom: 10px; } -.emotion-0:focus { - outline: 0; - border-bottom: 1px solid #9fdaff; +
+

+ + Root 1 + +

+
, + .emotion-0 { + fill: currentColor; } -.emotion-23 { +.emotion-16 { margin-left: -20px; margin-right: -20px; } -.emotion-19 { +.emotion-12 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1182,7 +1345,7 @@ exports[`Storyshots Components|Treeview with roots node 1`] = ` text-decoration: none; } -.emotion-17 { +.emotion-10 { min-height: 24px; display: -webkit-box; display: -webkit-flex; @@ -1199,7 +1362,7 @@ exports[`Storyshots Components|Treeview with roots node 1`] = ` background: transparent; } -.emotion-15 { +.emotion-8 { display: block; display: inline-block; width: 10px; @@ -1208,7 +1371,7 @@ exports[`Storyshots Components|Treeview with roots node 1`] = ` color: #774dd7; } -.emotion-10 { +.emotion-3 { display: block; display: inline-block; width: 8px; @@ -1222,63 +1385,39 @@ exports[`Storyshots Components|Treeview with roots node 1`] = ` color: rgba(0,0,0,0.4); } -.emotion-5 { - margin-top: 20px; - margin-bottom: 10px; -} -
- -
-

- - Root 1 - -

-
-
@@ -1288,51 +1427,144 @@ exports[`Storyshots Components|Treeview with roots node 1`] = `
-
-
, + .emotion-0 { + color: currentColor; + font-weight: normal; + font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; + margin: 0; + padding: 0; + line-height: 1.2em; + display: block; + color: rgba(0,0,0,0.4); + -webkit-letter-spacing: 4.3px; + -moz-letter-spacing: 4.3px; + -ms-letter-spacing: 4.3px; + letter-spacing: 4.3px; + font-weight: 400; + font-size: 10px; + text-transform: uppercase; +} + +.emotion-0 > sub { + display: block; + padding-top: 5px; + line-height: 1.2em; + font-size: 14px; +} + +.emotion-3 { + margin-top: 20px; + margin-bottom: 10px; +} + +

Root 3

-
-
, + .emotion-0 { + fill: currentColor; +} + +.emotion-16 { + margin-left: -20px; + margin-right: -20px; +} + +.emotion-12 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: inherit; + -webkit-text-decoration: none; + text-decoration: none; +} + +.emotion-10 { + min-height: 24px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + padding-left: 10px; + background: transparent; +} + +.emotion-8 { + display: block; + display: inline-block; + width: 10px; + height: 10px; + margin-right: 10px; + color: #774dd7; +} + +.emotion-3 { + display: block; + display: inline-block; + width: 8px; + height: 8px; + margin: 1px; + margin-right: 4px; + margin-left: -2px; + -webkit-transition: -webkit-transform .1s linear; + -webkit-transition: transform .1s linear; + transition: transform .1s linear; + color: rgba(0,0,0,0.4); +} + +
@@ -1342,51 +1574,144 @@ exports[`Storyshots Components|Treeview with roots node 1`] = `
-
-
, + .emotion-0 { + color: currentColor; + font-weight: normal; + font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; + margin: 0; + padding: 0; + line-height: 1.2em; + display: block; + color: rgba(0,0,0,0.4); + -webkit-letter-spacing: 4.3px; + -moz-letter-spacing: 4.3px; + -ms-letter-spacing: 4.3px; + letter-spacing: 4.3px; + font-weight: 400; + font-size: 10px; + text-transform: uppercase; +} + +.emotion-0 > sub { + display: block; + padding-top: 5px; + line-height: 1.2em; + font-size: 14px; +} + +.emotion-3 { + margin-top: 20px; + margin-bottom: 10px; +} + +

Others

-
-
, + .emotion-0 { + fill: currentColor; +} + +.emotion-16 { + margin-left: -20px; + margin-right: -20px; +} + +.emotion-12 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: inherit; + -webkit-text-decoration: none; + text-decoration: none; +} + +.emotion-10 { + min-height: 24px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + padding-left: 10px; + background: transparent; +} + +.emotion-8 { + display: block; + display: inline-block; + width: 10px; + height: 10px; + margin-right: 10px; + color: #774dd7; +} + +.emotion-3 { + display: block; + display: inline-block; + width: 8px; + height: 8px; + margin: 1px; + margin-right: 4px; + margin-left: -2px; + -webkit-transition: -webkit-transform .1s linear; + -webkit-transition: transform .1s linear; + transition: transform .1s linear; + color: rgba(0,0,0,0.4); +} + +
@@ -1396,6 +1721,6 @@ exports[`Storyshots Components|Treeview with roots node 1`] = `
-
-
+
, +] `; diff --git a/lib/ui/src/components/layout/__snapshots__/layout.stories.storyshot b/lib/ui/src/components/layout/__snapshots__/layout.stories.storyshot index 15163bf3c33e..e0484dba0685 100644 --- a/lib/ui/src/components/layout/__snapshots__/layout.stories.storyshot +++ b/lib/ui/src/components/layout/__snapshots__/layout.stories.storyshot @@ -1,13 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots UI|Desktop layout bottom Panel 1`] = ` -.emotion-2 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-0 { position: fixed; left: 0; @@ -18,29 +11,18 @@ exports[`Storyshots UI|Desktop layout bottom Panel 1`] = ` }
-
-
- 0 width or height -
+ style="position:absolute;width:0;height:0;visibility:hidden;display:none" + /> +
+ 0 width or height
`; exports[`Storyshots UI|Desktop layout default 1`] = ` -.emotion-2 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-0 { position: fixed; left: 0; @@ -51,29 +33,18 @@ exports[`Storyshots UI|Desktop layout default 1`] = ` }
-
-
- 0 width or height -
+ style="position:absolute;width:0;height:0;visibility:hidden;display:none" + /> +
+ 0 width or height
`; exports[`Storyshots UI|Desktop layout full 1`] = ` -.emotion-2 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-0 { position: fixed; left: 0; @@ -84,29 +55,18 @@ exports[`Storyshots UI|Desktop layout full 1`] = ` }
-
-
- 0 width or height -
+ style="position:absolute;width:0;height:0;visibility:hidden;display:none" + /> +
+ 0 width or height
`; exports[`Storyshots UI|Desktop layout no Nav 1`] = ` -.emotion-2 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-0 { position: fixed; left: 0; @@ -117,29 +77,18 @@ exports[`Storyshots UI|Desktop layout no Nav 1`] = ` }
-
-
- 0 width or height -
+ style="position:absolute;width:0;height:0;visibility:hidden;display:none" + /> +
+ 0 width or height
`; exports[`Storyshots UI|Desktop layout no Panel 1`] = ` -.emotion-2 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-0 { position: fixed; left: 0; @@ -150,29 +99,18 @@ exports[`Storyshots UI|Desktop layout no Panel 1`] = ` }
-
-
- 0 width or height -
+ style="position:absolute;width:0;height:0;visibility:hidden;display:none" + /> +
+ 0 width or height
`; exports[`Storyshots UI|Desktop layout no Panel, no Nav 1`] = ` -.emotion-2 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-0 { position: fixed; left: 0; @@ -183,29 +121,18 @@ exports[`Storyshots UI|Desktop layout no Panel, no Nav 1`] = ` }
-
-
- 0 width or height -
+ style="position:absolute;width:0;height:0;visibility:hidden;display:none" + /> +
+ 0 width or height
`; exports[`Storyshots UI|Desktop layout page 1`] = ` -.emotion-2 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-0 { position: fixed; left: 0; @@ -216,29 +143,18 @@ exports[`Storyshots UI|Desktop layout page 1`] = ` }
-
-
- 0 width or height -
+ style="position:absolute;width:0;height:0;visibility:hidden;display:none" + /> +
+ 0 width or height
`; exports[`Storyshots UI|Mobile layout initial 0 1`] = ` -.emotion-24 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-22 { position: fixed; left: 0; @@ -444,59 +360,36 @@ exports[`Storyshots UI|Mobile layout initial 0 1`] = ` }
-
-

- 1 -

- 
-            {}
-
-
-
-
-
-
-
-

- 1 -

- 
-                {}
-
-
-
-
+ 1 + + 
+          {}
+
-
+
+
+ 

-              {
-  "hidden": false
-}
+              {}

- +
+
+

+ 1 +

+ 
+            {
+  "hidden": false
+}
+
+
+
+
+
`; exports[`Storyshots UI|Mobile layout initial 1 1`] = ` -.emotion-24 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-22 { position: fixed; left: 0; @@ -742,59 +647,36 @@ exports[`Storyshots UI|Mobile layout initial 1 1`] = ` }
-
-

- 1 -

- 
-            {}
-
-
+ 1 + + 
+          {}
+
-
-
-
-
-

- 1 -

- 
-                {}
-
-
-
-
-
-
+
+
+ 

-              {
-  "hidden": false
-}
+              {}

- +
+
+

+ 1 +

+ 
+            {
+  "hidden": false
+}
+
+
+
+
+
`; exports[`Storyshots UI|Mobile layout initial 2 1`] = ` -.emotion-24 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-22 { position: fixed; left: 0; @@ -1046,59 +940,36 @@ exports[`Storyshots UI|Mobile layout initial 2 1`] = ` }
-
-

- 1 -

- 
-            {}
-
-
+ 1 + + 
+          {}
+
-
-
-
-
-

- 1 -

- 
-                {}
-
-
-
-
-
-
+
+
+ 

-              {
-  "hidden": false
-}
+              {}

- +
+
+

+ 1 +

+ 
+            {
+  "hidden": false
+}
+
+
+
+
+
`; exports[`Storyshots UI|Mobile layout page 1`] = ` -.emotion-24 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-22 { position: fixed; left: 0; @@ -1368,55 +1251,38 @@ exports[`Storyshots UI|Mobile layout page 1`] = ` }
-
-

- 1 -

- 
-            {}
-
-
+ 1 + + 
+          {}
+
-
-
- +
+
+
+ +
+

+ 1 +

+ 
+            {}
+
+
+
+
-
+
`; diff --git a/lib/ui/src/components/nav/__snapshots__/nav.stories.storyshot b/lib/ui/src/components/nav/__snapshots__/nav.stories.storyshot index 99d8c434ad6c..a7c9c930b41d 100644 --- a/lib/ui/src/components/nav/__snapshots__/nav.stories.storyshot +++ b/lib/ui/src/components/nav/__snapshots__/nav.stories.storyshot @@ -1,13 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots UI|Nav/components components 1`] = ` -.emotion-28 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-24 { position: absolute; z-index: 1; @@ -156,101 +149,90 @@ exports[`Storyshots UI|Nav/components components 1`] = ` box-sizing: border-box; } -
- -
+
+
+ `; exports[`Storyshots UI|Nav/settings with brand 1`] = ` -.emotion-28 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-26 { background: linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%); position: absolute; @@ -399,101 +381,90 @@ exports[`Storyshots UI|Nav/settings with brand 1`] = ` padding: 20px; } -
- -
+
+
+ `; exports[`Storyshots UI|Nav/settings without brand 1`] = ` -.emotion-24 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-22 { background: linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%); position: absolute; @@ -622,63 +593,59 @@ exports[`Storyshots UI|Nav/settings without brand 1`] = ` text-decoration: none; } -
- -
+
+
+ `; diff --git a/lib/ui/src/components/panel/__snapshots__/panel.stories.storyshot b/lib/ui/src/components/panel/__snapshots__/panel.stories.storyshot index 10d0825db270..86838e9b1df4 100644 --- a/lib/ui/src/components/panel/__snapshots__/panel.stories.storyshot +++ b/lib/ui/src/components/panel/__snapshots__/panel.stories.storyshot @@ -1,13 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots UI|Panel default 1`] = ` -.emotion-28 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-0 { white-space: normal; display: -webkit-inline-box; @@ -201,91 +194,87 @@ exports[`Storyshots UI|Panel default 1`] = ` }
-
- - -
-
+
+
+ + - + -
+ + +
+
+
+
-
-
- TEST 2 -
+ TEST 2
@@ -294,13 +283,6 @@ exports[`Storyshots UI|Panel default 1`] = ` `; exports[`Storyshots UI|Panel no panels 1`] = ` -.emotion-2 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - .emotion-0 { font-size: 11px; display: block; @@ -311,16 +293,12 @@ exports[`Storyshots UI|Panel no panels 1`] = ` }
-
-

- no panels available -

-
+ no panels available +

`; diff --git a/lib/ui/src/settings/__snapshots__/about.stories.storyshot b/lib/ui/src/settings/__snapshots__/about.stories.storyshot index 5ef28a262888..62dca652e2a5 100644 --- a/lib/ui/src/settings/__snapshots__/about.stories.storyshot +++ b/lib/ui/src/settings/__snapshots__/about.stories.storyshot @@ -1,14 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Storyshots UI|AboutPage default 1`] = ` -.emotion-0 { - font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - -
-`; +exports[`Storyshots UI|AboutPage default 1`] = `null`; From 053473882e388fe2c1eccdfe1d3663eb86d3a575 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Sat, 22 Dec 2018 00:15:03 +0100 Subject: [PATCH 050/120] REMOVE emotion from snapshots, as they become too big, and they provide little value provided we're also using Chromatic --- .../info/src/__snapshots__/index.test.js.snap | 172 +- .../__snapshots__/index.stories.storyshot | 173 +- .../cra-kitchen-sink/src/storyshots.test.js | 3 +- .../addon-actions.stories.storyshot | 1126 +-- .../addon-events.stories.storyshot | 24 +- .../addon-info.stories.storyshot | 8886 ++--------------- .../addon-links.stories.storyshot | 46 +- .../addon-viewport.stories.storyshot | 6 +- .../__snapshots__/core.stories.storyshot | 30 +- .../tests/storyshots.test.js | 3 +- jest.config.js | 1 - .../form/__snapshots__/form.stories.storyshot | 1020 +- .../grid/__snapshots__/grid.stories.storyshot | 235 +- .../__snapshots__/heading.stories.storyshot | 173 +- .../icon/__snapshots__/icon.stories.storyshot | 2195 ++-- .../logo/__snapshots__/logo.stories.storyshot | 14 +- .../menu/__snapshots__/menu.stories.storyshot | 52 +- .../RoutedLink.stories.storyshot | 12 +- .../panel_actionbar.stories.storyshot | 154 +- .../placeholder.stories.storyshot | 11 +- .../__snapshots__/preview.stories.storyshot | 212 +- .../syntaxhighlighter.stories.storyshot | 1017 +- .../tabs/__snapshots__/tabs.stories.storyshot | 1062 +- .../__snapshots__/treeview.stories.storyshot | 1267 +-- .../__snapshots__/layout.stories.storyshot | 1001 +- .../nav/__snapshots__/nav.stories.storyshot | 504 +- .../__snapshots__/panel.stories.storyshot | 231 +- 27 files changed, 2723 insertions(+), 16907 deletions(-) diff --git a/addons/info/src/__snapshots__/index.test.js.snap b/addons/info/src/__snapshots__/index.test.js.snap index f25c10f5c4a9..3a5b9950bcc1 100644 --- a/addons/info/src/__snapshots__/index.test.js.snap +++ b/addons/info/src/__snapshots__/index.test.js.snap @@ -1,41 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`addon Info should render and external markdown 1`] = ` -.emotion-6 { - position: relative; - overflow: hidden; -} - -.emotion-4 { - position: relative; - overflow: auto; -} - -.emotion-4 code { - opacity: 0.7; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 0; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} - and external markdown 1`] = ` >
and external markdown 1`] = ` className="hljs" > 
                               
                                 
                                    and external markdown 1`] = `
 `;
 
 exports[`addon Info should render  and markdown 1`] = `
-.emotion-6 {
-  position: relative;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  position: relative;
-  overflow: auto;
-}
-
-.emotion-4 code {
-  opacity: 0.7;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 0;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
 
   
                 
                   

                     
                       

                         
                             
                               
                                 
                                   
   
               
                 

                   
                     

                       
                           
                             
                               
                                 
   
               
                 

                   
                     

                       
                           
                             
                               
                                 
   

           

             

               
                 
                   
             
diff --git a/examples/cra-kitchen-sink/src/storyshots.test.js b/examples/cra-kitchen-sink/src/storyshots.test.js
index 00b2b4469037..6b780d80bf02 100644
--- a/examples/cra-kitchen-sink/src/storyshots.test.js
+++ b/examples/cra-kitchen-sink/src/storyshots.test.js
@@ -1,5 +1,4 @@
 import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
-import { createSerializer as emotionCreateSerializer } from 'jest-emotion';
 import path from 'path';
 import { render as renderer, configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
@@ -14,5 +13,5 @@ initStoryshots({
   test: multiSnapshotWithOptions({
     renderer,
   }),
-  snapshotSerializers: [createSerializer(), emotionCreateSerializer()],
+  snapshotSerializers: [createSerializer()],
 });
diff --git a/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot
index 1e5a124ab617..9a9a0acf4321 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot
@@ -2,663 +2,103 @@
 
 exports[`Storyshots Addons|Actions All types 1`] = `
 Array [
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
@@ -666,216 +106,48 @@ Array [
 `;
 
 exports[`Storyshots Addons|Actions Basic example 1`] = `
-.emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
 
 `;
 
 exports[`Storyshots Addons|Actions Circular Payload 1`] = `
-.emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
 
 `;
 
 exports[`Storyshots Addons|Actions Decorated action + config 1`] = `
-.emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
 
 `;
 
 exports[`Storyshots Addons|Actions Decorated action 1`] = `
-.emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
 
 `;
 
 exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
-.emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
 
 `;
 
 exports[`Storyshots Addons|Actions Decorated actions 1`] = `
-.emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
 
@@ -883,69 +155,13 @@ exports[`Storyshots Addons|Actions Decorated actions 1`] = `
 
 exports[`Storyshots Addons|Actions Limit Action Output 1`] = `
 Array [
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
@@ -953,144 +169,32 @@ Array [
 `;
 
 exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
-.emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
 
 `;
 
 exports[`Storyshots Addons|Actions Multiple actions 1`] = `
-.emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
 
 `;
 
 exports[`Storyshots Addons|Actions Multiple actions as object 1`] = `
-.emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
 
 `;
 
 exports[`Storyshots Addons|Actions Multiple actions, object + config 1`] = `
-.emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
 
@@ -1101,36 +205,8 @@ Array [
   

     Moving away from this story will persist the action logger
   
,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
@@ -1138,108 +214,24 @@ Array [
 `;
 
 exports[`Storyshots Addons|Actions Reserved keyword as name 1`] = `
-.emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
 
 `;
 
 exports[`Storyshots Addons|Actions configureActionsDepth 1`] = `
-.emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
 
 `;
 
 exports[`Storyshots Addons|Actions.deprecated Decorated Action 1`] = `
-.emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
 
diff --git a/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot
index eb2b3abf0497..2d1c3b896231 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot
@@ -1,19 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Addons|Events Logger 1`] = `
-.emotion-2 {
-  padding: 20px;
-}
-
-.emotion-0 {
-  margin: 0;
-}
-
 

   

     Logger
   

@@ -22,19 +14,11 @@ exports[`Storyshots Addons|Events Logger 1`] = `
 `;
 
 exports[`Storyshots Addons|Events.deprecated Logger 1`] = `
-.emotion-2 {
-  padding: 20px;
-}
-
-.emotion-0 {
-  margin: 0;
-}
-
 

   

     Logger
   

diff --git a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
index 4135c0fa3d52..e5f8156ece46 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
@@ -1,254 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Addons|Info/Decorator Use Info as story decorator 1`] = `
-.emotion-6 {
-  position: relative;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  position: relative;
-  overflow: auto;
-}
-
-.emotion-4 code {
-  padding-right: 10px;
-  opacity: 0.7;
-}
-
-.emotion-4 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-4 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.string {
-  color: #A31515;
-}
-
-.emotion-4 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-4 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-4 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.function {
-  color: #393A34;
-}
-
-.emotion-4 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-4 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-4 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-4 * .token.tag {
-  color: #800000;
-}
-
-.emotion-4 * .token.selector {
-  color: #800000;
-}
-
-.emotion-4 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-4 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-4 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 0;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-70 {
-  border-collapse: collapse;
-  margin-top: 16px;
-  width: auto;
-  table-layout: auto;
-}
-
-.emotion-18 {
-  border-bottom: 1px solid rgba(0,0,0,0.1);
-}
-
-.emotion-8 {
-  padding: 2px 6px;
-  line-height: 18px;
-  vertical-align: middle;
-  padding: 8px 16px;
-}
-
-.emotion-68 {
-  font-size: 14px;
-}
-
-.emotion-30 {
-  border-bottom: 1px solid #eee;
-}
-
-.emotion-20 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #774dd7;
-}
-
-.emotion-22 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #1ea7fd;
-}
-
-.emotion-22 button {
-  color: #37d5d3;
-}
-
-.emotion-22 span {
-  white-space: pre;
-}
-
-.emotion-24 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-}
-
-.emotion-28 {
-  padding: 2px 6px;
-  text-align: left;
-  padding: 8px 16px;
-}
-
 

   

           

             

               
                 
                   
             

               
                 

                   
                     Property
                   
                   
                     Type
                   
                   
                     Required
                   
                   
                     Default
                   
                   
                     Description
                   
                 

               
               
                 

                   
                     children
                   
                   
                     
                       node
                     
                   
                   
                     yes
                   
                   
                     -
                   
                   
                 

                 

                   
                     isAmazing
                   
                   
                     
                       bool
                     
                   
                   
                     -
                   
                   
                     
                       false
                     
                   
                   
                 

                 

                   
                     age
                   
                   
                     
                       other
                     
                   
                   
                     -
                   
                   
                     
                       {
@@ -478,38 +377,38 @@ exports[`Storyshots Button with new info 1`] = `
                     
                   
                   
                 

                 

                   
                     title
                   
                   
                     
                       string
                     
                   
                   
                     -
                   
                   
                     
                       the best container ever
                     
                   
                   
                 

               

@@ -557,254 +309,6 @@ exports[`Storyshots Addons|Info/Decorator Use Info as story decorator 1`] = `
 `;
 
 exports[`Storyshots Addons|Info/ForwardRef Displays forwarded ref components correctly 1`] = `
-.emotion-6 {
-  position: relative;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  position: relative;
-  overflow: auto;
-}
-
-.emotion-4 code {
-  padding-right: 10px;
-  opacity: 0.7;
-}
-
-.emotion-4 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-4 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.string {
-  color: #A31515;
-}
-
-.emotion-4 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-4 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-4 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.function {
-  color: #393A34;
-}
-
-.emotion-4 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-4 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-4 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-4 * .token.tag {
-  color: #800000;
-}
-
-.emotion-4 * .token.selector {
-  color: #800000;
-}
-
-.emotion-4 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-4 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-4 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 0;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-70 {
-  border-collapse: collapse;
-  margin-top: 16px;
-  width: auto;
-  table-layout: auto;
-}
-
-.emotion-18 {
-  border-bottom: 1px solid rgba(0,0,0,0.1);
-}
-
-.emotion-8 {
-  padding: 2px 6px;
-  line-height: 18px;
-  vertical-align: middle;
-  padding: 8px 16px;
-}
-
-.emotion-68 {
-  font-size: 14px;
-}
-
-.emotion-30 {
-  border-bottom: 1px solid #eee;
-}
-
-.emotion-20 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #774dd7;
-}
-
-.emotion-22 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #1ea7fd;
-}
-
-.emotion-22 button {
-  color: #37d5d3;
-}
-
-.emotion-22 span {
-  white-space: pre;
-}
-
-.emotion-24 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-}
-
-.emotion-28 {
-  padding: 2px 6px;
-  text-align: left;
-  padding: 8px 16px;
-}
-
 

   

           

             

               
                 
                   
             

               
                 

                   
                     Property
                   
                   
                     Type
                   
                   
                     Required
                   
                   
                     Default
                   
                   
                     Description
                   
                 

               
               
                 

                   
                     disabled
                   
                   
                     
                       bool
                     
                   
                   
                     -
                   
                   
                     
                       false
                     
                   
                   
                 

                 

                   
                     label
                   
                   
                     
                       string
                     
                   
                   
                     yes
                   
                   
                     -
                   
                   
                 

                 

                   
                     onClick
                   
                   
                     
                       func
                     
                   
                   
                     -
                   
                   
                     
                       onClick
                     
                   
                   
                 

                 

                   
                     style
                   
                   
                     
                       other
                     
                   
                   
                     -
                   
                   
                     
                       {}
                     
                   
                   
                 

               

@@ -1099,188 +603,6 @@ exports[`Storyshots Addons|Info/ForwardRef Displays forwarded ref components cor
 `;
 
 exports[`Storyshots Addons|Info/GitHub issues #1814 1`] = `
-.emotion-6 {
-  position: relative;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  position: relative;
-  overflow: auto;
-}
-
-.emotion-4 code {
-  padding-right: 10px;
-  opacity: 0.7;
-}
-
-.emotion-4 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-4 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.string {
-  color: #A31515;
-}
-
-.emotion-4 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-4 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-4 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.function {
-  color: #393A34;
-}
-
-.emotion-4 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-4 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-4 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-4 * .token.tag {
-  color: #800000;
-}
-
-.emotion-4 * .token.selector {
-  color: #800000;
-}
-
-.emotion-4 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-4 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-4 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 0;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
 

   

           

             

               
                 
                   
   

           

             

               
                 
                   
             

               
                 

                   
                     Property
                   
                   
                     Type
                   
                   
                     Required
                   
                   
                     Default
                   
                   
                     Description
                   
                 

               
               
                 

                   
                     disabled
                   
                   
                     
                       bool
                     
                   
                   
                     -
                   
                   
                     
                       false
                     
                   
                   
                 

                 

                   
                     label
                   
                   
                     
                       string
                     
                   
                   
                     yes
                   
                   
                     -
                   
                   
                 

                 

                   
                     onClick
                   
                   
                     
                       func
                     
                   
                   
                     -
                   
                   
                     
                       onClick
                     
                   
                   
                 

                 

                   
                     style
                   
                   
                     
                       other
                     
                   
                   
                     -
                   
                   
                     
                       {}
                     
                   
                   
                 

               

@@ -2117,254 +1191,6 @@ exports[`Storyshots Addons|Info/JSX Displays JSX in description 1`] = `
 `;
 
 exports[`Storyshots Addons|Info/Markdown Displays Markdown in description 1`] = `
-.emotion-6 {
-  position: relative;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  position: relative;
-  overflow: auto;
-}
-
-.emotion-4 code {
-  padding-right: 10px;
-  opacity: 0.7;
-}
-
-.emotion-4 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-4 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.string {
-  color: #A31515;
-}
-
-.emotion-4 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-4 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-4 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.function {
-  color: #393A34;
-}
-
-.emotion-4 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-4 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-4 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-4 * .token.tag {
-  color: #800000;
-}
-
-.emotion-4 * .token.selector {
-  color: #800000;
-}
-
-.emotion-4 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-4 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-4 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 0;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-70 {
-  border-collapse: collapse;
-  margin-top: 16px;
-  width: auto;
-  table-layout: auto;
-}
-
-.emotion-18 {
-  border-bottom: 1px solid rgba(0,0,0,0.1);
-}
-
-.emotion-8 {
-  padding: 2px 6px;
-  line-height: 18px;
-  vertical-align: middle;
-  padding: 8px 16px;
-}
-
-.emotion-68 {
-  font-size: 14px;
-}
-
-.emotion-30 {
-  border-bottom: 1px solid #eee;
-}
-
-.emotion-20 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #774dd7;
-}
-
-.emotion-22 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #1ea7fd;
-}
-
-.emotion-22 button {
-  color: #37d5d3;
-}
-
-.emotion-22 span {
-  white-space: pre;
-}
-
-.emotion-24 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-}
-
-.emotion-28 {
-  padding: 2px 6px;
-  text-align: left;
-  padding: 8px 16px;
-}
-
 

   

           

             

               
                 
                   
             

               
                 

                   
                     Property
                   
                   
                     Type
                   
                   
                     Required
                   
                   
                     Default
                   
                   
                     Description
                   
                 

               
               
                 

                   
                     disabled
                   
                   
                     
                       bool
                     
                   
                   
                     -
                   
                   
                     
                       false
                     
                   
                   
                 

                 

                   
                     label
                   
                   
                     
                       string
                     
                   
                   
                     yes
                   
                   
                     -
                   
                   
                 

                 

                   
                     onClick
                   
                   
                     
                       func
                     
                   
                   
                     -
                   
                   
                     
                       onClick
                     
                   
                   
                 

                 

                   
                     style
                   
                   
                     
                       other
                     
                   
                   
                     -
                   
                   
                     
                       {}
                     
                   
                   
                 

               

@@ -2753,254 +1579,6 @@ exports[`Storyshots Addons|Info/Markdown Displays Markdown in description 1`] =
 `;
 
 exports[`Storyshots Addons|Info/Markdown From external Markdown file 1`] = `
-.emotion-6 {
-  position: relative;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  position: relative;
-  overflow: auto;
-}
-
-.emotion-4 code {
-  padding-right: 10px;
-  opacity: 0.7;
-}
-
-.emotion-4 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-4 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.string {
-  color: #A31515;
-}
-
-.emotion-4 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-4 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-4 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.function {
-  color: #393A34;
-}
-
-.emotion-4 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-4 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-4 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-4 * .token.tag {
-  color: #800000;
-}
-
-.emotion-4 * .token.selector {
-  color: #800000;
-}
-
-.emotion-4 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-4 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-4 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 0;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-70 {
-  border-collapse: collapse;
-  margin-top: 16px;
-  width: auto;
-  table-layout: auto;
-}
-
-.emotion-18 {
-  border-bottom: 1px solid rgba(0,0,0,0.1);
-}
-
-.emotion-8 {
-  padding: 2px 6px;
-  line-height: 18px;
-  vertical-align: middle;
-  padding: 8px 16px;
-}
-
-.emotion-68 {
-  font-size: 14px;
-}
-
-.emotion-30 {
-  border-bottom: 1px solid #eee;
-}
-
-.emotion-20 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #774dd7;
-}
-
-.emotion-22 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #1ea7fd;
-}
-
-.emotion-22 button {
-  color: #37d5d3;
-}
-
-.emotion-22 span {
-  white-space: pre;
-}
-
-.emotion-24 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-}
-
-.emotion-28 {
-  padding: 2px 6px;
-  text-align: left;
-  padding: 8px 16px;
-}
-
 

   

           

             

               
                 
                   
             

               
                 

                   
                     Property
                   
                   
                     Type
                   
                   
                     Required
                   
                   
                     Default
                   
                   
                     Description
                   
                 

               
               
                 

                   
                     disabled
                   
                   
                     
                       bool
                     
                   
                   
                     -
                   
                   
                     
                       false
                     
                   
                   
                 

                 

                   
                     label
                   
                   
                     
                       string
                     
                   
                   
                     yes
                   
                   
                     -
                   
                   
                 

                 

                   
                     onClick
                   
                   
                     
                       func
                     
                   
                   
                     -
                   
                   
                     
                       onClick
                     
                   
                   
                 

                 

                   
                     style
                   
                   
                     
                       other
                     
                   
                   
                     -
                   
                   
                     
                       {}
                     
                   
                   
                 

               

@@ -3369,254 +1947,6 @@ exports[`Storyshots Addons|Info/Markdown From external Markdown file 1`] = `
 `;
 
 exports[`Storyshots Addons|Info/Markdown From internal Markdown file 1`] = `
-.emotion-6 {
-  position: relative;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  position: relative;
-  overflow: auto;
-}
-
-.emotion-4 code {
-  padding-right: 10px;
-  opacity: 0.7;
-}
-
-.emotion-4 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-4 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.string {
-  color: #A31515;
-}
-
-.emotion-4 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-4 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-4 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.function {
-  color: #393A34;
-}
-
-.emotion-4 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-4 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-4 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-4 * .token.tag {
-  color: #800000;
-}
-
-.emotion-4 * .token.selector {
-  color: #800000;
-}
-
-.emotion-4 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-4 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-4 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 0;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-70 {
-  border-collapse: collapse;
-  margin-top: 16px;
-  width: auto;
-  table-layout: auto;
-}
-
-.emotion-18 {
-  border-bottom: 1px solid rgba(0,0,0,0.1);
-}
-
-.emotion-8 {
-  padding: 2px 6px;
-  line-height: 18px;
-  vertical-align: middle;
-  padding: 8px 16px;
-}
-
-.emotion-68 {
-  font-size: 14px;
-}
-
-.emotion-30 {
-  border-bottom: 1px solid #eee;
-}
-
-.emotion-20 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #774dd7;
-}
-
-.emotion-22 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #1ea7fd;
-}
-
-.emotion-22 button {
-  color: #37d5d3;
-}
-
-.emotion-22 span {
-  white-space: pre;
-}
-
-.emotion-24 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-}
-
-.emotion-28 {
-  padding: 2px 6px;
-  text-align: left;
-  padding: 8px 16px;
-}
-
 

   

           

             

               
                 
                   
             

               
                 

                   
                     Property
                   
                   
                     Type
                   
                   
                     Required
                   
                   
                     Default
                   
                   
                     Description
                   
                 

               
               
                 

                   
                     disabled
                   
                   
                     
                       bool
                     
                   
                   
                     -
                   
                   
                     
                       false
                     
                   
                   
                 

                 

                   
                     label
                   
                   
                     
                       string
                     
                   
                   
                     yes
                   
                   
                     -
                   
                   
                 

                 

                   
                     onClick
                   
                   
                     
                       func
                     
                   
                   
                     -
                   
                   
                     
                       onClick
                     
                   
                   
                 

                 

                   
                     style
                   
                   
                     
                       other
                     
                   
                   
                     -
                   
                   
                     
                       {}
                     
                   
                   
                 

               

@@ -3997,188 +2327,6 @@ exports[`Storyshots Addons|Info/Markdown From internal Markdown file 1`] = `
 `;
 
 exports[`Storyshots Addons|Info/Options.TableComponent Use a custom component for the table 1`] = `
-.emotion-6 {
-  position: relative;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  position: relative;
-  overflow: auto;
-}
-
-.emotion-4 code {
-  padding-right: 10px;
-  opacity: 0.7;
-}
-
-.emotion-4 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-4 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.string {
-  color: #A31515;
-}
-
-.emotion-4 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-4 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-4 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.function {
-  color: #393A34;
-}
-
-.emotion-4 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-4 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-4 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-4 * .token.tag {
-  color: #800000;
-}
-
-.emotion-4 * .token.selector {
-  color: #800000;
-}
-
-.emotion-4 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-4 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-4 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 0;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
 

   

           

             

               
                 
                   
   

           

             

               
                 
                   
             

               
                 

                   
                     Property
                   
                   
                     Type
                   
                   
                     Required
                   
                   
                     Default
                   
                   
                     Description
                   
                 

               
               
                 

                   
                     disabled
                   
                   
                     
                       bool
                     
                   
                   
                     -
                   
                   
                     
                       false
                     
                   
                   
                 

                 

                   
                     label
                   
                   
                     
                       string
                     
                   
                   
                     yes
                   
                   
                     -
                   
                   
                 

                 

                   
                     onClick
                   
                   
                     
                       func
                     
                   
                   
                     -
                   
                   
                     
                       onClick
                     
                   
                   
                 

                 

                   
                     style
                   
                   
                     
                       other
                     
                   
                   
                     -
                   
                   
                     
                       {}
                     
                   
                   
                 

               

@@ -4905,254 +2805,6 @@ exports[`Storyshots Addons|Info/Options.excludedPropTypes Excludes propTypes tha
 `;
 
 exports[`Storyshots Addons|Info/Options.header Shows or hides Info Addon header 1`] = `
-.emotion-6 {
-  position: relative;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  position: relative;
-  overflow: auto;
-}
-
-.emotion-4 code {
-  padding-right: 10px;
-  opacity: 0.7;
-}
-
-.emotion-4 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-4 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.string {
-  color: #A31515;
-}
-
-.emotion-4 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-4 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-4 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.function {
-  color: #393A34;
-}
-
-.emotion-4 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-4 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-4 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-4 * .token.tag {
-  color: #800000;
-}
-
-.emotion-4 * .token.selector {
-  color: #800000;
-}
-
-.emotion-4 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-4 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-4 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 0;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-70 {
-  border-collapse: collapse;
-  margin-top: 16px;
-  width: auto;
-  table-layout: auto;
-}
-
-.emotion-18 {
-  border-bottom: 1px solid rgba(0,0,0,0.1);
-}
-
-.emotion-8 {
-  padding: 2px 6px;
-  line-height: 18px;
-  vertical-align: middle;
-  padding: 8px 16px;
-}
-
-.emotion-68 {
-  font-size: 14px;
-}
-
-.emotion-30 {
-  border-bottom: 1px solid #eee;
-}
-
-.emotion-20 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #774dd7;
-}
-
-.emotion-22 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #1ea7fd;
-}
-
-.emotion-22 button {
-  color: #37d5d3;
-}
-
-.emotion-22 span {
-  white-space: pre;
-}
-
-.emotion-24 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-}
-
-.emotion-28 {
-  padding: 2px 6px;
-  text-align: left;
-  padding: 8px 16px;
-}
-
 

   

           

             

               
                 
                   
             

               
                 

                   
                     Property
                   
                   
                     Type
                   
                   
                     Required
                   
                   
                     Default
                   
                   
                     Description
                   
                 

               
               
                 

                   
                     disabled
                   
                   
                     
                       bool
                     
                   
                   
                     -
                   
                   
                     
                       false
                     
                   
                   
                 

                 

                   
                     onClick
                   
                   
                     
                       func
                     
                   
                   
                     -
                   
                   
                     
                       onClick
                     
                   
                   
                 

                 

                   
                     style
                   
                   
                     
                       other
                     
                   
                   
                     -
                   
                   
                     
                       {}
                     
                   
                   
                 

               

@@ -5447,254 +3099,6 @@ exports[`Storyshots Addons|Info/Options.header Shows or hides Info Addon header
 `;
 
 exports[`Storyshots Addons|Info/Options.inline Inlines component inside story 1`] = `
-.emotion-6 {
-  position: relative;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  position: relative;
-  overflow: auto;
-}
-
-.emotion-4 code {
-  padding-right: 10px;
-  opacity: 0.7;
-}
-
-.emotion-4 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-4 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.string {
-  color: #A31515;
-}
-
-.emotion-4 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-4 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-4 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.function {
-  color: #393A34;
-}
-
-.emotion-4 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-4 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-4 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-4 * .token.tag {
-  color: #800000;
-}
-
-.emotion-4 * .token.selector {
-  color: #800000;
-}
-
-.emotion-4 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-4 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-4 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 0;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-70 {
-  border-collapse: collapse;
-  margin-top: 16px;
-  width: auto;
-  table-layout: auto;
-}
-
-.emotion-18 {
-  border-bottom: 1px solid rgba(0,0,0,0.1);
-}
-
-.emotion-8 {
-  padding: 2px 6px;
-  line-height: 18px;
-  vertical-align: middle;
-  padding: 8px 16px;
-}
-
-.emotion-68 {
-  font-size: 14px;
-}
-
-.emotion-30 {
-  border-bottom: 1px solid #eee;
-}
-
-.emotion-20 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #774dd7;
-}
-
-.emotion-22 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #1ea7fd;
-}
-
-.emotion-22 button {
-  color: #37d5d3;
-}
-
-.emotion-22 span {
-  white-space: pre;
-}
-
-.emotion-24 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-}
-
-.emotion-28 {
-  padding: 2px 6px;
-  text-align: left;
-  padding: 8px 16px;
-}
-
 

   

     

         

           

             
               
                 
           

               
                 

                   
                     Property
                   
                   
                     Type
                   
                   
                     Required
                   
                   
                     Default
                   
                   
                     Description
                   
                 

               
               
                 

                   
                     disabled
                   
                   
                     
                       bool
                     
                   
                   
                     -
                   
                   
                     
                       false
                     
                   
                   
                 

                 

                   
                     label
                   
                   
                     
                       string
                     
                   
                   
                     yes
                   
                   
                     -
                   
                   
                 

                 

                   
                     onClick
                   
                   
                     
                       func
                     
                   
                   
                     -
                   
                   
                     
                       onClick
                     
                   
                   
                 

                 

                   
                     style
                   
                   
                     
                       other
                     
                   
                   
                     -
                   
                   
                     
                       {}
                     
                   
                   
                 

               

@@ -5990,254 +3394,6 @@ exports[`Storyshots Addons|Info/Options.inline Inlines component inside story 1`
 `;
 
 exports[`Storyshots Addons|Info/Options.propTables Shows additional component prop tables 1`] = `
-.emotion-6 {
-  position: relative;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  position: relative;
-  overflow: auto;
-}
-
-.emotion-4 code {
-  padding-right: 10px;
-  opacity: 0.7;
-}
-
-.emotion-4 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-4 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.string {
-  color: #A31515;
-}
-
-.emotion-4 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-4 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-4 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.function {
-  color: #393A34;
-}
-
-.emotion-4 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-4 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-4 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-4 * .token.tag {
-  color: #800000;
-}
-
-.emotion-4 * .token.selector {
-  color: #800000;
-}
-
-.emotion-4 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-4 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-4 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 0;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-70 {
-  border-collapse: collapse;
-  margin-top: 16px;
-  width: auto;
-  table-layout: auto;
-}
-
-.emotion-18 {
-  border-bottom: 1px solid rgba(0,0,0,0.1);
-}
-
-.emotion-8 {
-  padding: 2px 6px;
-  line-height: 18px;
-  vertical-align: middle;
-  padding: 8px 16px;
-}
-
-.emotion-68 {
-  font-size: 14px;
-}
-
-.emotion-30 {
-  border-bottom: 1px solid #eee;
-}
-
-.emotion-20 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #774dd7;
-}
-
-.emotion-22 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #1ea7fd;
-}
-
-.emotion-22 button {
-  color: #37d5d3;
-}
-
-.emotion-22 span {
-  white-space: pre;
-}
-
-.emotion-24 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-}
-
-.emotion-28 {
-  padding: 2px 6px;
-  text-align: left;
-  padding: 8px 16px;
-}
-
 

   

           

             

               
                 
                   
             

             
               

                 
                   Property
                 
                 
                   Type
                 
                 
                   Required
                 
                 
                   Default
                 
                 
                   Description
                 
               

             
             
               

                 
                   disabled
                 
                 
                   
                     bool
                   
                 
                 
                   -
                 
                 
                   
                     false
                   
                 
                 
               

               

                 
                   label
                 
                 
                   
                     string
                   
                 
                 
                   yes
                 
                 
                   -
                 
                 
               

               

                 
                   onClick
                 
                 
                   
                     func
                   
                 
                 
                   -
                 
                 
                   
                     onClick
                   
                 
                 
               

               

                 
                   style
                 
                 
                   
                     other
                   
                 
                 
                   -
                 
                 
                   
                     {}
                   
                 
                 
               

             

@@ -6545,102 +3701,102 @@ exports[`Storyshots Addons|Info/Options.propTables Shows additional component pr
               "FlowTypeButton" Component
             
             

               
                 

                   
                     Property
                   
                   
                     Type
                   
                   
                     Required
                   
                   
                     Default
                   
                   
                     Description
                   
                 

               
               
                 

                   
                     disabled
                   
                   
                     
                       bool
                     
                   
                   
                     -
                   
                   
                     
                       false
                     
                   
                   
                 

                 

                   
                     label
                   
                   
                     
                       string
                     
                   
                   
                     yes
                   
                   
                     -
                   
                   
                 

                 

                   
                     onClick
                   
                   
                     
                       func
                     
                   
                   
                     -
                   
                   
                     
                       onClick
                     
                   
                   
                 

                 

                   
                     style
                   
                   
                     
                       other
                     
                   
                   
                     -
                   
                   
                     
                       {}
                     
                   
                   
                 

               

@@ -6654,72 +3810,6 @@ exports[`Storyshots Addons|Info/Options.propTables Shows additional component pr
 `;
 
 exports[`Storyshots Addons|Info/Options.source Shows or hides Info Addon source 1`] = `
-.emotion-62 {
-  border-collapse: collapse;
-  margin-top: 16px;
-  width: auto;
-  table-layout: auto;
-}
-
-.emotion-10 {
-  border-bottom: 1px solid rgba(0,0,0,0.1);
-}
-
-.emotion-0 {
-  padding: 2px 6px;
-  line-height: 18px;
-  vertical-align: middle;
-  padding: 8px 16px;
-}
-
-.emotion-60 {
-  font-size: 14px;
-}
-
-.emotion-22 {
-  border-bottom: 1px solid #eee;
-}
-
-.emotion-12 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #774dd7;
-}
-
-.emotion-14 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #1ea7fd;
-}
-
-.emotion-14 button {
-  color: #37d5d3;
-}
-
-.emotion-14 span {
-  white-space: pre;
-}
-
-.emotion-16 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-}
-
-.emotion-20 {
-  padding: 2px 6px;
-  text-align: left;
-  padding: 8px 16px;
-}
-
 

   

             

               
                 

                   
                     Property
                   
                   
                     Type
                   
                   
                     Required
                   
                   
                     Default
                   
                   
                     Description
                   
                 

               
               
                 

                   
                     disabled
                   
                   
                     
                       unknown
                     
                   
                   
                     -
                   
                   
                     
                       false
                     
                   
                   
                 

                 

                   
                     onClick
                   
                   
                     
                       unknown
                     
                   
                   
                     -
                   
                   
                     
                       onClick
                     
                   
                   
                 

               

@@ -6956,255 +4046,7 @@ exports[`Storyshots Addons|Info/Options.source Shows or hides Info Addon source
 
 `;
 
-exports[`Storyshots Addons|Info/Options.styles Extend info styles with an object 1`] = `
-.emotion-6 {
-  position: relative;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  position: relative;
-  overflow: auto;
-}
-
-.emotion-4 code {
-  padding-right: 10px;
-  opacity: 0.7;
-}
-
-.emotion-4 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-4 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.string {
-  color: #A31515;
-}
-
-.emotion-4 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-4 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-4 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.function {
-  color: #393A34;
-}
-
-.emotion-4 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-4 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-4 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-4 * .token.tag {
-  color: #800000;
-}
-
-.emotion-4 * .token.selector {
-  color: #800000;
-}
-
-.emotion-4 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-4 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-4 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 0;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-70 {
-  border-collapse: collapse;
-  margin-top: 16px;
-  width: auto;
-  table-layout: auto;
-}
-
-.emotion-18 {
-  border-bottom: 1px solid rgba(0,0,0,0.1);
-}
-
-.emotion-8 {
-  padding: 2px 6px;
-  line-height: 18px;
-  vertical-align: middle;
-  padding: 8px 16px;
-}
-
-.emotion-68 {
-  font-size: 14px;
-}
-
-.emotion-30 {
-  border-bottom: 1px solid #eee;
-}
-
-.emotion-20 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #774dd7;
-}
-
-.emotion-22 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #1ea7fd;
-}
-
-.emotion-22 button {
-  color: #37d5d3;
-}
-
-.emotion-22 span {
-  white-space: pre;
-}
-
-.emotion-24 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-}
-
-.emotion-28 {
-  padding: 2px 6px;
-  text-align: left;
-  padding: 8px 16px;
-}
-
+exports[`Storyshots Addons|Info/Options.styles Extend info styles with an object 1`] = `
 

   

           

             

               
                 
                   
             

               
                 

                   
                     Property
                   
                   
                     Type
                   
                   
                     Required
                   
                   
                     Default
                   
                   
                     Description
                   
                 

               
               
                 

                   
                     disabled
                   
                   
                     
                       bool
                     
                   
                   
                     -
                   
                   
                     
                       false
                     
                   
                   
                 

                 

                   
                     label
                   
                   
                     
                       string
                     
                   
                   
                     yes
                   
                   
                     -
                   
                   
                 

                 

                   
                     onClick
                   
                   
                     
                       func
                     
                   
                   
                     -
                   
                   
                     
                       onClick
                     
                   
                   
                 

                 

                   
                     style
                   
                   
                     
                       other
                     
                   
                   
                     -
                   
                   
                     
                       {}
                     
                   
                   
                 

               

@@ -7504,254 +4346,6 @@ exports[`Storyshots Addons|Info/Options.styles Extend info styles with an object
 `;
 
 exports[`Storyshots Addons|Info/Options.styles Full control over styles using a function 1`] = `
-.emotion-6 {
-  position: relative;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  position: relative;
-  overflow: auto;
-}
-
-.emotion-4 code {
-  padding-right: 10px;
-  opacity: 0.7;
-}
-
-.emotion-4 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-4 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.string {
-  color: #A31515;
-}
-
-.emotion-4 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-4 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-4 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.function {
-  color: #393A34;
-}
-
-.emotion-4 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-4 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-4 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-4 * .token.tag {
-  color: #800000;
-}
-
-.emotion-4 * .token.selector {
-  color: #800000;
-}
-
-.emotion-4 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-4 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-4 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 0;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-70 {
-  border-collapse: collapse;
-  margin-top: 16px;
-  width: auto;
-  table-layout: auto;
-}
-
-.emotion-18 {
-  border-bottom: 1px solid rgba(0,0,0,0.1);
-}
-
-.emotion-8 {
-  padding: 2px 6px;
-  line-height: 18px;
-  vertical-align: middle;
-  padding: 8px 16px;
-}
-
-.emotion-68 {
-  font-size: 14px;
-}
-
-.emotion-30 {
-  border-bottom: 1px solid #eee;
-}
-
-.emotion-20 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #774dd7;
-}
-
-.emotion-22 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #1ea7fd;
-}
-
-.emotion-22 button {
-  color: #37d5d3;
-}
-
-.emotion-22 span {
-  white-space: pre;
-}
-
-.emotion-24 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-}
-
-.emotion-28 {
-  padding: 2px 6px;
-  text-align: left;
-  padding: 8px 16px;
-}
-
 

   

           

             

               
                 
                   
             

               
                 

                   
                     Property
                   
                   
                     Type
                   
                   
                     Required
                   
                   
                     Default
                   
                   
                     Description
                   
                 

               
               
                 

                   
                     disabled
                   
                   
                     
                       bool
                     
                   
                   
                     -
                   
                   
                     
                       false
                     
                   
                   
                 

                 

                   
                     label
                   
                   
                     
                       string
                     
                   
                   
                     yes
                   
                   
                     -
                   
                   
                 

                 

                   
                     onClick
                   
                   
                     
                       func
                     
                   
                   
                     -
                   
                   
                     
                       onClick
                     
                   
                   
                 

                 

                   
                     style
                   
                   
                     
                       other
                     
                   
                   
                     -
                   
                   
                     
                       {}
                     
                   
                   
                 

               

@@ -8059,254 +4653,6 @@ exports[`Storyshots Addons|Info/Parameters Disable the addon entirely 1`] = `
 `;
 
 exports[`Storyshots Addons|Info/Parameters Overwrite the parameters with markdown variable 1`] = `
-.emotion-6 {
-  position: relative;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  position: relative;
-  overflow: auto;
-}
-
-.emotion-4 code {
-  padding-right: 10px;
-  opacity: 0.7;
-}
-
-.emotion-4 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-4 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.string {
-  color: #A31515;
-}
-
-.emotion-4 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-4 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-4 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.function {
-  color: #393A34;
-}
-
-.emotion-4 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-4 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-4 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-4 * .token.tag {
-  color: #800000;
-}
-
-.emotion-4 * .token.selector {
-  color: #800000;
-}
-
-.emotion-4 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-4 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-4 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 0;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-70 {
-  border-collapse: collapse;
-  margin-top: 16px;
-  width: auto;
-  table-layout: auto;
-}
-
-.emotion-18 {
-  border-bottom: 1px solid rgba(0,0,0,0.1);
-}
-
-.emotion-8 {
-  padding: 2px 6px;
-  line-height: 18px;
-  vertical-align: middle;
-  padding: 8px 16px;
-}
-
-.emotion-68 {
-  font-size: 14px;
-}
-
-.emotion-30 {
-  border-bottom: 1px solid #eee;
-}
-
-.emotion-20 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #774dd7;
-}
-
-.emotion-22 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #1ea7fd;
-}
-
-.emotion-22 button {
-  color: #37d5d3;
-}
-
-.emotion-22 span {
-  white-space: pre;
-}
-
-.emotion-24 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-}
-
-.emotion-28 {
-  padding: 2px 6px;
-  text-align: left;
-  padding: 8px 16px;
-}
-
 

   

           

             

               
                 
                   
             

               
                 

                   
                     Property
                   
                   
                     Type
                   
                   
                     Required
                   
                   
                     Default
                   
                   
                     Description
                   
                 

               
               
                 

                   
                     disabled
                   
                   
                     
                       bool
                     
                   
                   
                     -
                   
                   
                     
                       false
                     
                   
                   
                 

                 

                   
                     label
                   
                   
                     
                       string
                     
                   
                   
                     yes
                   
                   
                     -
                   
                   
                 

                 

                   
                     onClick
                   
                   
                     
                       func
                     
                   
                   
                     -
                   
                   
                     
                       onClick
                     
                   
                   
                 

                 

                   
                     style
                   
                   
                     
                       other
                     
                   
                   
                     -
                   
                   
                     
                       {}
                     
                   
                   
                 

               

@@ -8695,254 +5041,6 @@ exports[`Storyshots Addons|Info/Parameters Overwrite the parameters with markdow
 `;
 
 exports[`Storyshots Addons|Info/Parameters Overwrite the text parameter with markdown inline 1`] = `
-.emotion-6 {
-  position: relative;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  position: relative;
-  overflow: auto;
-}
-
-.emotion-4 code {
-  padding-right: 10px;
-  opacity: 0.7;
-}
-
-.emotion-4 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-4 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.string {
-  color: #A31515;
-}
-
-.emotion-4 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-4 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-4 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.function {
-  color: #393A34;
-}
-
-.emotion-4 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-4 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-4 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-4 * .token.tag {
-  color: #800000;
-}
-
-.emotion-4 * .token.selector {
-  color: #800000;
-}
-
-.emotion-4 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-4 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-4 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 0;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-58 {
-  border-collapse: collapse;
-  margin-top: 16px;
-  width: auto;
-  table-layout: auto;
-}
-
-.emotion-18 {
-  border-bottom: 1px solid rgba(0,0,0,0.1);
-}
-
-.emotion-8 {
-  padding: 2px 6px;
-  line-height: 18px;
-  vertical-align: middle;
-  padding: 8px 16px;
-}
-
-.emotion-56 {
-  font-size: 14px;
-}
-
-.emotion-30 {
-  border-bottom: 1px solid #eee;
-}
-
-.emotion-20 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #774dd7;
-}
-
-.emotion-22 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #1ea7fd;
-}
-
-.emotion-22 button {
-  color: #37d5d3;
-}
-
-.emotion-22 span {
-  white-space: pre;
-}
-
-.emotion-24 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-}
-
-.emotion-28 {
-  padding: 2px 6px;
-  text-align: left;
-  padding: 8px 16px;
-}
-
 

   

     

         

           

             
               
                 
           

               
                 

                   
                     Property
                   
                   
                     Type
                   
                   
                     Required
                   
                   
                     Default
                   
                   
                     Description
                   
                 

               
               
                 

                   
                     disabled
                   
                   
                     
                       bool
                     
                   
                   
                     -
                   
                   
                     
                       false
                     
                   
                   
                 

                 

                   
                     label
                   
                   
                     
                       string
                     
                   
                   
                     yes
                   
                   
                     -
                   
                   
                 

                 

                   
                     onClick
                   
                   
                     
                       func
                     
                   
                   
                     -
                   
                   
                     
                       onClick
                     
                   
                   
                 

                 

                   
                     style
                   
                   
                     
                       other
                     
                   
                   
                     -
                   
                   
                     
                       {}
                     
                   
                   
                 

               

@@ -9269,254 +5367,6 @@ exports[`Storyshots Addons|Info/Parameters Overwrite the text parameter with mar
 `;
 
 exports[`Storyshots Addons|Info/Parameters Overwriting and extending the parameters and options set stories-wise 1`] = `
-.emotion-6 {
-  position: relative;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  position: relative;
-  overflow: auto;
-}
-
-.emotion-4 code {
-  padding-right: 10px;
-  opacity: 0.7;
-}
-
-.emotion-4 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-4 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.string {
-  color: #A31515;
-}
-
-.emotion-4 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-4 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-4 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.function {
-  color: #393A34;
-}
-
-.emotion-4 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-4 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-4 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-4 * .token.tag {
-  color: #800000;
-}
-
-.emotion-4 * .token.selector {
-  color: #800000;
-}
-
-.emotion-4 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-4 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-4 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 0;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-58 {
-  border-collapse: collapse;
-  margin-top: 16px;
-  width: auto;
-  table-layout: auto;
-}
-
-.emotion-18 {
-  border-bottom: 1px solid rgba(0,0,0,0.1);
-}
-
-.emotion-8 {
-  padding: 2px 6px;
-  line-height: 18px;
-  vertical-align: middle;
-  padding: 8px 16px;
-}
-
-.emotion-56 {
-  font-size: 14px;
-}
-
-.emotion-30 {
-  border-bottom: 1px solid #eee;
-}
-
-.emotion-20 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #774dd7;
-}
-
-.emotion-22 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #1ea7fd;
-}
-
-.emotion-22 button {
-  color: #37d5d3;
-}
-
-.emotion-22 span {
-  white-space: pre;
-}
-
-.emotion-24 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-}
-
-.emotion-28 {
-  padding: 2px 6px;
-  text-align: left;
-  padding: 8px 16px;
-}
-
 

   

     

         

           

             
               
                 
           

             
               

                 
                   Property
                 
                 
                   Type
                 
                 
                   Required
                 
                 
                   Default
                 
                 
                   Description
                 
               

             
             
               

                 
                   disabled
                 
                 
                   
                     bool
                   
                 
                 
                   -
                 
                 
                   
                     false
                   
                 
                 
               

               

                 
                   onClick
                 
                 
                   
                     func
                   
                 
                 
                   -
                 
                 
                   
                     onClick
                   
                 
                 
               

               

                 
                   style
                 
                 
                   
                     other
                   
                 
                 
                   -
                 
                 
                   
                     {}
                   
                 
                 
               

             

@@ -9783,254 +5633,6 @@ exports[`Storyshots Addons|Info/Parameters Overwriting and extending the paramet
 `;
 
 exports[`Storyshots Addons|Info/Parameters Using paramaters across all stories 1`] = `
-.emotion-6 {
-  position: relative;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  position: relative;
-  overflow: auto;
-}
-
-.emotion-4 code {
-  padding-right: 10px;
-  opacity: 0.7;
-}
-
-.emotion-4 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-4 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.string {
-  color: #A31515;
-}
-
-.emotion-4 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-4 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-4 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.function {
-  color: #393A34;
-}
-
-.emotion-4 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-4 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-4 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-4 * .token.tag {
-  color: #800000;
-}
-
-.emotion-4 * .token.selector {
-  color: #800000;
-}
-
-.emotion-4 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-4 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-4 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 0;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-70 {
-  border-collapse: collapse;
-  margin-top: 16px;
-  width: auto;
-  table-layout: auto;
-}
-
-.emotion-18 {
-  border-bottom: 1px solid rgba(0,0,0,0.1);
-}
-
-.emotion-8 {
-  padding: 2px 6px;
-  line-height: 18px;
-  vertical-align: middle;
-  padding: 8px 16px;
-}
-
-.emotion-68 {
-  font-size: 14px;
-}
-
-.emotion-30 {
-  border-bottom: 1px solid #eee;
-}
-
-.emotion-20 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #774dd7;
-}
-
-.emotion-22 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #1ea7fd;
-}
-
-.emotion-22 button {
-  color: #37d5d3;
-}
-
-.emotion-22 span {
-  white-space: pre;
-}
-
-.emotion-24 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-}
-
-.emotion-28 {
-  padding: 2px 6px;
-  text-align: left;
-  padding: 8px 16px;
-}
-
 

   

     

         

           

             
               
                 
           

             
               

                 
                   Property
                 
                 
                   Type
                 
                 
                   Required
                 
                 
                   Default
                 
                 
                   Description
                 
               

             
             
               

                 
                   disabled
                 
                 
                   
                     bool
                   
                 
                 
                   -
                 
                 
                   
                     false
                   
                 
                 
               

               

                 
                   onClick
                 
                 
                   
                     func
                   
                 
                 
                   -
                 
                 
                   
                     onClick
                   
                 
                 
               

               

                 
                   style
                 
                 
                   
                     other
                   
                 
                 
                   -
                 
                 
                   
                     {}
                   
                 
                 
               

             

@@ -10326,254 +5928,6 @@ exports[`Storyshots Addons|Info/Parameters Using paramaters across all stories 1
 `;
 
 exports[`Storyshots Addons|Info/React Docgen Comments from Flow declarations 1`] = `
-.emotion-6 {
-  position: relative;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  position: relative;
-  overflow: auto;
-}
-
-.emotion-4 code {
-  padding-right: 10px;
-  opacity: 0.7;
-}
-
-.emotion-4 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-4 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.string {
-  color: #A31515;
-}
-
-.emotion-4 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-4 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-4 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.function {
-  color: #393A34;
-}
-
-.emotion-4 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-4 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-4 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-4 * .token.tag {
-  color: #800000;
-}
-
-.emotion-4 * .token.selector {
-  color: #800000;
-}
-
-.emotion-4 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-4 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-4 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 0;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-46 {
-  border-collapse: collapse;
-  margin-top: 16px;
-  width: auto;
-  table-layout: auto;
-}
-
-.emotion-18 {
-  border-bottom: 1px solid rgba(0,0,0,0.1);
-}
-
-.emotion-8 {
-  padding: 2px 6px;
-  line-height: 18px;
-  vertical-align: middle;
-  padding: 8px 16px;
-}
-
-.emotion-44 {
-  font-size: 14px;
-}
-
-.emotion-30 {
-  border-bottom: 1px solid #eee;
-}
-
-.emotion-20 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #774dd7;
-}
-
-.emotion-22 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #1ea7fd;
-}
-
-.emotion-22 button {
-  color: #37d5d3;
-}
-
-.emotion-22 span {
-  white-space: pre;
-}
-
-.emotion-24 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-}
-
-.emotion-28 {
-  padding: 2px 6px;
-  text-align: left;
-  padding: 8px 16px;
-}
-
 

   

           

             

               
                 
                   
             

             
               

                 
                   Property
                 
                 
                   Type
                 
                 
                   Required
                 
                 
                   Default
                 
                 
                   Description
                 
               

             
             
               

                 
                   disabled
                 
                 
                   
                     bool
                   
                 
                 
                   -
                 
                 
                   
                     false
                   
                 
                 
               

               

                 
                   label
                 
                 
                   
                     string
                   
                 
                 
                   yes
                 
                 
                   -
                 
                 
               

               

                 
                   onClick
                 
                 
                   
                     func
                   
                 
                 
                   -
                 
                 
                   
                     onClick
                   
                 
                 
               

               

                 
                   style
                 
                 
                   
                     other
                   
                 
                 
                   -
                 
                 
                   
                     {}
                   
                 
                 
               

             

@@ -10882,254 +6236,6 @@ exports[`Storyshots Addons|Info/React Docgen Comments from Flow declarations 1`]
 `;
 
 exports[`Storyshots Addons|Info/React Docgen Comments from PropType declarations 1`] = `
-.emotion-6 {
-  position: relative;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  position: relative;
-  overflow: auto;
-}
-
-.emotion-4 code {
-  padding-right: 10px;
-  opacity: 0.7;
-}
-
-.emotion-4 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-4 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.string {
-  color: #A31515;
-}
-
-.emotion-4 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-4 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-4 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.function {
-  color: #393A34;
-}
-
-.emotion-4 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-4 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-4 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-4 * .token.tag {
-  color: #800000;
-}
-
-.emotion-4 * .token.selector {
-  color: #800000;
-}
-
-.emotion-4 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-4 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-4 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 0;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-178 {
-  border-collapse: collapse;
-  margin-top: 16px;
-  width: auto;
-  table-layout: auto;
-}
-
-.emotion-18 {
-  border-bottom: 1px solid rgba(0,0,0,0.1);
-}
-
-.emotion-8 {
-  padding: 2px 6px;
-  line-height: 18px;
-  vertical-align: middle;
-  padding: 8px 16px;
-}
-
-.emotion-176 {
-  font-size: 14px;
-}
-
-.emotion-30 {
-  border-bottom: 1px solid #eee;
-}
-
-.emotion-20 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #774dd7;
-}
-
-.emotion-22 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #1ea7fd;
-}
-
-.emotion-22 button {
-  color: #37d5d3;
-}
-
-.emotion-22 span {
-  white-space: pre;
-}
-
-.emotion-24 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-}
-
-.emotion-28 {
-  padding: 2px 6px;
-  text-align: left;
-  padding: 8px 16px;
-}
-
 

   

           

             

               
                 
                   
             

               
                 

                   
                     Property
                   
                   
                     Type
                   
                   
                     Required
                   
                   
                     Default
                   
                   
                     Description
                   
                 

               
               
                 

                   
                     disabled
                   
                   
                     
                       unknown
                     
                   
                   
                     -
                   
                   
                     
                       false
                     
                   
                   
                 

                 

                   
                     onClick
                   
                   
                     
                       unknown
                     
                   
                   
                     -
                   
                   
                     
                       onClick
                     
                   
                   
                 

               

@@ -12151,254 +7257,6 @@ exports[`Storyshots Addons|Info/React Docgen Comments from PropType declarations
 `;
 
 exports[`Storyshots Addons|Info/React Docgen Comments from component declaration 1`] = `
-.emotion-6 {
-  position: relative;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  position: relative;
-  overflow: auto;
-}
-
-.emotion-4 code {
-  padding-right: 10px;
-  opacity: 0.7;
-}
-
-.emotion-4 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-4 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.string {
-  color: #A31515;
-}
-
-.emotion-4 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-4 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-4 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.function {
-  color: #393A34;
-}
-
-.emotion-4 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-4 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-4 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-4 * .token.tag {
-  color: #800000;
-}
-
-.emotion-4 * .token.selector {
-  color: #800000;
-}
-
-.emotion-4 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-4 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-4 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 0;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-70 {
-  border-collapse: collapse;
-  margin-top: 16px;
-  width: auto;
-  table-layout: auto;
-}
-
-.emotion-18 {
-  border-bottom: 1px solid rgba(0,0,0,0.1);
-}
-
-.emotion-8 {
-  padding: 2px 6px;
-  line-height: 18px;
-  vertical-align: middle;
-  padding: 8px 16px;
-}
-
-.emotion-68 {
-  font-size: 14px;
-}
-
-.emotion-30 {
-  border-bottom: 1px solid #eee;
-}
-
-.emotion-20 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #774dd7;
-}
-
-.emotion-22 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #1ea7fd;
-}
-
-.emotion-22 button {
-  color: #37d5d3;
-}
-
-.emotion-22 span {
-  white-space: pre;
-}
-
-.emotion-24 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-}
-
-.emotion-28 {
-  padding: 2px 6px;
-  text-align: left;
-  padding: 8px 16px;
-}
-
 

   

           

             

               
                 
                   
             

               
                 

                   
                     Property
                   
                   
                     Type
                   
                   
                     Required
                   
                   
                     Default
                   
                   
                     Description
                   
                 

               
               
                 

                   
                     disabled
                   
                   
                     
                       bool
                     
                   
                   
                     -
                   
                   
                     
                       false
                     
                   
                   
                 

                 

                   
                     label
                   
                   
                     
                       string
                     
                   
                   
                     yes
                   
                   
                     -
                   
                   
                 

                 

                   
                     onClick
                   
                   
                     
                       func
                     
                   
                   
                     -
                   
                   
                     
                       onClick
                     
                   
                   
                 

                 

                   
                     one
                   
                   
                     
                       other
                     
                   
                   
                     -
                   
                   
                     
                       {
@@ -11736,31 +6842,31 @@ exports[`Storyshots Addons|Info/React Docgen Comments from PropType declarations
                     
                   
                   
                 

                 

                   
                     two
                   
                   
                     
                       other
                     
                   
                   
                     -
                   
                   
                     
                       {
@@ -11807,31 +6913,31 @@ exports[`Storyshots Addons|Info/React Docgen Comments from PropType declarations
                     
                   
                   
                 

                 

                   
                     obj
                   
                   
                     
                       object
                     
                   
                   
                     -
                   
                   
                     
                       {
@@ -11848,31 +6954,31 @@ exports[`Storyshots Addons|Info/React Docgen Comments from PropType declarations
                     
                   
                   
                 

                 

                   
                     shape
                   
                   
                     
                       other
                     
                   
                   
                     -
                   
                   
                     
                       {
@@ -11933,31 +7039,31 @@ exports[`Storyshots Addons|Info/React Docgen Comments from PropType declarations
                     
                   
                   
                 

                 

                   
                     arrayOf
                   
                   
                     
                       other
                     
                   
                   
                     -
                   
                   
                     
                       [
@@ -11982,162 +7088,162 @@ exports[`Storyshots Addons|Info/React Docgen Comments from PropType declarations
                     
                   
                   
                 

                 

                   
                     msg
                   
                   
                     
                       other
                     
                   
                   
                     -
                   
                   
                     
                       {}
                     
                   
                   
                 

                 

                   
                     enm
                   
                   
                     
                       other
                     
                   
                   
                     -
                   
                   
                     
                       News
                     
                   
                   
                 

                 

                   
                     enmEval
                   
                   
                     
                       other
                     
                   
                   
                     -
                   
                   
                     
                       Photos
                     
                   
                   
                 

                 

                   
                     union
                   
                   
                     
                       other
                     
                   
                   
                     -
                   
                   
                     
                       hello
                     
                   
                   
                 

                 

                   
                     optionalString
                   
                   
                     
                       string
                     
                   
                   
                     -
                   
                   
                     
                       Default String
                     
                   
                   
                 

               

@@ -12767,254 +7625,6 @@ exports[`Storyshots Addons|Info/React Docgen Comments from component declaration
 `;
 
 exports[`Storyshots Addons|Info/React Docgen Comments from named export component declaration 1`] = `
-.emotion-6 {
-  position: relative;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  position: relative;
-  overflow: auto;
-}
-
-.emotion-4 code {
-  padding-right: 10px;
-  opacity: 0.7;
-}
-
-.emotion-4 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-4 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.string {
-  color: #A31515;
-}
-
-.emotion-4 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-4 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-4 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.function {
-  color: #393A34;
-}
-
-.emotion-4 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-4 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-4 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-4 * .token.tag {
-  color: #800000;
-}
-
-.emotion-4 * .token.selector {
-  color: #800000;
-}
-
-.emotion-4 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-4 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-4 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 0;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-70 {
-  border-collapse: collapse;
-  margin-top: 16px;
-  width: auto;
-  table-layout: auto;
-}
-
-.emotion-18 {
-  border-bottom: 1px solid rgba(0,0,0,0.1);
-}
-
-.emotion-8 {
-  padding: 2px 6px;
-  line-height: 18px;
-  vertical-align: middle;
-  padding: 8px 16px;
-}
-
-.emotion-68 {
-  font-size: 14px;
-}
-
-.emotion-30 {
-  border-bottom: 1px solid #eee;
-}
-
-.emotion-20 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #774dd7;
-}
-
-.emotion-22 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #1ea7fd;
-}
-
-.emotion-22 button {
-  color: #37d5d3;
-}
-
-.emotion-22 span {
-  white-space: pre;
-}
-
-.emotion-24 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-}
-
-.emotion-28 {
-  padding: 2px 6px;
-  text-align: left;
-  padding: 8px 16px;
-}
-
 

   

           

             

               
                 
                   
             

               
                 

                   
                     Property
                   
                   
                     Type
                   
                   
                     Required
                   
                   
                     Default
                   
                   
                     Description
                   
                 

               
               
                 

                   
                     disabled
                   
                   
                     
                       bool
                     
                   
                   
                     -
                   
                   
                     
                       false
                     
                   
                   
                 

                 

                   
                     label
                   
                   
                     
                       string
                     
                   
                   
                     yes
                   
                   
                     -
                   
                   
                 

                 

                   
                     onClick
                   
                   
                     
                       func
                     
                   
                   
                     -
                   
                   
                     
                       onClick
                     
                   
                   
                 

                 

                   
                     style
                   
                   
                     
                       other
                     
                   
                   
                     -
                   
                   
                     
                       {}
                     
                   
                   
                 

               

@@ -13382,255 +7992,7 @@ exports[`Storyshots Addons|Info/React Docgen Comments from named export componen
 
 `;
 
-exports[`Storyshots Addons|Info/Story Source Array prop 1`] = `
-.emotion-6 {
-  position: relative;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  position: relative;
-  overflow: auto;
-}
-
-.emotion-4 code {
-  padding-right: 10px;
-  opacity: 0.7;
-}
-
-.emotion-4 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-4 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.string {
-  color: #A31515;
-}
-
-.emotion-4 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-4 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-4 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.function {
-  color: #393A34;
-}
-
-.emotion-4 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-4 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-4 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-4 * .token.tag {
-  color: #800000;
-}
-
-.emotion-4 * .token.selector {
-  color: #800000;
-}
-
-.emotion-4 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-4 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-4 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 0;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-34 {
-  border-collapse: collapse;
-  margin-top: 16px;
-  width: auto;
-  table-layout: auto;
-}
-
-.emotion-18 {
-  border-bottom: 1px solid rgba(0,0,0,0.1);
-}
-
-.emotion-8 {
-  padding: 2px 6px;
-  line-height: 18px;
-  vertical-align: middle;
-  padding: 8px 16px;
-}
-
-.emotion-32 {
-  font-size: 14px;
-}
-
-.emotion-30 {
-  border-bottom: 1px solid #eee;
-}
-
-.emotion-20 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #774dd7;
-}
-
-.emotion-22 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #1ea7fd;
-}
-
-.emotion-22 button {
-  color: #37d5d3;
-}
-
-.emotion-22 span {
-  white-space: pre;
-}
-
-.emotion-24 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-}
-
-.emotion-28 {
-  padding: 2px 6px;
-  text-align: left;
-  padding: 8px 16px;
-}
-
+exports[`Storyshots Addons|Info/Story Source Array prop 1`] = `
 

   

           

             

               
                 
                   
             

               
                 

                   
                     Property
                   
                   
                     Type
                   
                   
                     Required
                   
                   
                     Default
                   
                   
                     Description
                   
                 

               
               
                 

                   
                     disabled
                   
                   
                     
                       bool
                     
                   
                   
                     -
                   
                   
                     
                       false
                     
                   
                   
                 

                 

                   
                     label
                   
                   
                     
                       string
                     
                   
                   
                     yes
                   
                   
                     -
                   
                   
                 

                 

                   
                     onClick
                   
                   
                     
                       func
                     
                   
                   
                     -
                   
                   
                     
                       onClick
                     
                   
                   
                 

                 

                   
                     style
                   
                   
                     
                       other
                     
                   
                   
                     -
                   
                   
                     
                       {}
                     
                   
                   
                 

               

@@ -14414,254 +8776,6 @@ exports[`Storyshots Addons|Info/Story Source Array prop 1`] = `
 `;
 
 exports[`Storyshots Addons|Info/Story Source Children 1`] = `
-.emotion-6 {
-  position: relative;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  position: relative;
-  overflow: auto;
-}
-
-.emotion-4 code {
-  padding-right: 10px;
-  opacity: 0.7;
-}
-
-.emotion-4 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-4 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.string {
-  color: #A31515;
-}
-
-.emotion-4 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-4 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-4 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.function {
-  color: #393A34;
-}
-
-.emotion-4 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-4 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-4 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-4 * .token.tag {
-  color: #800000;
-}
-
-.emotion-4 * .token.selector {
-  color: #800000;
-}
-
-.emotion-4 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-4 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-4 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 0;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-70 {
-  border-collapse: collapse;
-  margin-top: 16px;
-  width: auto;
-  table-layout: auto;
-}
-
-.emotion-18 {
-  border-bottom: 1px solid rgba(0,0,0,0.1);
-}
-
-.emotion-8 {
-  padding: 2px 6px;
-  line-height: 18px;
-  vertical-align: middle;
-  padding: 8px 16px;
-}
-
-.emotion-68 {
-  font-size: 14px;
-}
-
-.emotion-30 {
-  border-bottom: 1px solid #eee;
-}
-
-.emotion-20 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #774dd7;
-}
-
-.emotion-22 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #1ea7fd;
-}
-
-.emotion-22 button {
-  color: #37d5d3;
-}
-
-.emotion-22 span {
-  white-space: pre;
-}
-
-.emotion-24 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-}
-
-.emotion-28 {
-  padding: 2px 6px;
-  text-align: left;
-  padding: 8px 16px;
-}
-
 

   

           

             

               
                 
                   
             

               
                 

                   
                     Property
                   
                   
                     Type
                   
                   
                     Required
                   
                   
                     Default
                   
                   
                     Description
                   
                 

               
               
                 

                   
                     propDefinitions
                   
                   
                     
                       other
                     
                   
                   
                     -
                   
                   
                     
                       []
                     
                   
                   
                 

               

@@ -15089,254 +9203,6 @@ onClick
 `;
 
 exports[`Storyshots Addons|Info/Story Source Many props 1`] = `
-.emotion-6 {
-  position: relative;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  position: relative;
-  overflow: auto;
-}
-
-.emotion-4 code {
-  padding-right: 10px;
-  opacity: 0.7;
-}
-
-.emotion-4 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-4 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.string {
-  color: #A31515;
-}
-
-.emotion-4 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-4 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-4 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.function {
-  color: #393A34;
-}
-
-.emotion-4 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-4 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-4 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-4 * .token.tag {
-  color: #800000;
-}
-
-.emotion-4 * .token.selector {
-  color: #800000;
-}
-
-.emotion-4 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-4 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-4 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 0;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-70 {
-  border-collapse: collapse;
-  margin-top: 16px;
-  width: auto;
-  table-layout: auto;
-}
-
-.emotion-18 {
-  border-bottom: 1px solid rgba(0,0,0,0.1);
-}
-
-.emotion-8 {
-  padding: 2px 6px;
-  line-height: 18px;
-  vertical-align: middle;
-  padding: 8px 16px;
-}
-
-.emotion-68 {
-  font-size: 14px;
-}
-
-.emotion-30 {
-  border-bottom: 1px solid #eee;
-}
-
-.emotion-20 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #774dd7;
-}
-
-.emotion-22 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #1ea7fd;
-}
-
-.emotion-22 button {
-  color: #37d5d3;
-}
-
-.emotion-22 span {
-  white-space: pre;
-}
-
-.emotion-24 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-}
-
-.emotion-28 {
-  padding: 2px 6px;
-  text-align: left;
-  padding: 8px 16px;
-}
-
 

   

           

             

               
                 
                   
             

               
                 

                   
                     Property
                   
                   
                     Type
                   
                   
                     Required
                   
                   
                     Default
                   
                   
                     Description
                   
                 

               
               
                 

                   
                     disabled
                   
                   
                     
                       bool
                     
                   
                   
                     -
                   
                   
                     
                       false
                     
                   
                   
                 

                 

                   
                     label
                   
                   
                     
                       string
                     
                   
                   
                     yes
                   
                   
                     -
                   
                   
                 

                 

                   
                     onClick
                   
                   
                     
                       func
                     
                   
                   
                     -
                   
                   
                     
                       onClick
                     
                   
                   
                 

                 

                   
                     style
                   
                   
                     
                       other
                     
                   
                   
                     -
                   
                   
                     
                       {}
                     
                   
                   
                 

               

@@ -15704,254 +9570,6 @@ exports[`Storyshots Addons|Info/Story Source Many props 1`] = `
 `;
 
 exports[`Storyshots Addons|Info/Story Source Object prop 1`] = `
-.emotion-6 {
-  position: relative;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  position: relative;
-  overflow: auto;
-}
-
-.emotion-4 code {
-  padding-right: 10px;
-  opacity: 0.7;
-}
-
-.emotion-4 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-4 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.string {
-  color: #A31515;
-}
-
-.emotion-4 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-4 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-4 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.function {
-  color: #393A34;
-}
-
-.emotion-4 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-4 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-4 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-4 * .token.tag {
-  color: #800000;
-}
-
-.emotion-4 * .token.selector {
-  color: #800000;
-}
-
-.emotion-4 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-4 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-4 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 0;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-70 {
-  border-collapse: collapse;
-  margin-top: 16px;
-  width: auto;
-  table-layout: auto;
-}
-
-.emotion-18 {
-  border-bottom: 1px solid rgba(0,0,0,0.1);
-}
-
-.emotion-8 {
-  padding: 2px 6px;
-  line-height: 18px;
-  vertical-align: middle;
-  padding: 8px 16px;
-}
-
-.emotion-68 {
-  font-size: 14px;
-}
-
-.emotion-30 {
-  border-bottom: 1px solid #eee;
-}
-
-.emotion-20 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #774dd7;
-}
-
-.emotion-22 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #1ea7fd;
-}
-
-.emotion-22 button {
-  color: #37d5d3;
-}
-
-.emotion-22 span {
-  white-space: pre;
-}
-
-.emotion-24 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-}
-
-.emotion-28 {
-  padding: 2px 6px;
-  text-align: left;
-  padding: 8px 16px;
-}
-
 

   

           

             

               
                 
                   
             

               
                 

                   
                     Property
                   
                   
                     Type
                   
                   
                     Required
                   
                   
                     Default
                   
                   
                     Description
                   
                 

               
               
                 

                   
                     disabled
                   
                   
                     
                       bool
                     
                   
                   
                     -
                   
                   
                     
                       false
                     
                   
                   
                 

                 

                   
                     label
                   
                   
                     
                       string
                     
                   
                   
                     yes
                   
                   
                     -
                   
                   
                 

                 

                   
                     onClick
                   
                   
                     
                       func
                     
                   
                   
                     -
                   
                   
                     
                       onClick
                     
                   
                   
                 

                 

                   
                     style
                   
                   
                     
                       other
                     
                   
                   
                     -
                   
                   
                     
                       {}
                     
                   
                   
                 

               

@@ -16395,254 +10013,6 @@ exports[`Storyshots Addons|Info/Story Source Object prop 1`] = `
 `;
 
 exports[`Storyshots Addons|Info/Story Source One prop 1`] = `
-.emotion-6 {
-  position: relative;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  position: relative;
-  overflow: auto;
-}
-
-.emotion-4 code {
-  padding-right: 10px;
-  opacity: 0.7;
-}
-
-.emotion-4 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-4 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.string {
-  color: #A31515;
-}
-
-.emotion-4 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-4 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-4 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.function {
-  color: #393A34;
-}
-
-.emotion-4 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-4 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-4 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-4 * .token.tag {
-  color: #800000;
-}
-
-.emotion-4 * .token.selector {
-  color: #800000;
-}
-
-.emotion-4 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-4 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-4 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 0;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-70 {
-  border-collapse: collapse;
-  margin-top: 16px;
-  width: auto;
-  table-layout: auto;
-}
-
-.emotion-18 {
-  border-bottom: 1px solid rgba(0,0,0,0.1);
-}
-
-.emotion-8 {
-  padding: 2px 6px;
-  line-height: 18px;
-  vertical-align: middle;
-  padding: 8px 16px;
-}
-
-.emotion-68 {
-  font-size: 14px;
-}
-
-.emotion-30 {
-  border-bottom: 1px solid #eee;
-}
-
-.emotion-20 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #774dd7;
-}
-
-.emotion-22 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #1ea7fd;
-}
-
-.emotion-22 button {
-  color: #37d5d3;
-}
-
-.emotion-22 span {
-  white-space: pre;
-}
-
-.emotion-24 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-}
-
-.emotion-28 {
-  padding: 2px 6px;
-  text-align: left;
-  padding: 8px 16px;
-}
-
 

   

           

             

               
                 
                   
             

               
                 

                   
                     Property
                   
                   
                     Type
                   
                   
                     Required
                   
                   
                     Default
                   
                   
                     Description
                   
                 

               
               
                 

                   
                     disabled
                   
                   
                     
                       bool
                     
                   
                   
                     -
                   
                   
                     
                       false
                     
                   
                   
                 

                 

                   
                     label
                   
                   
                     
                       string
                     
                   
                   
                     yes
                   
                   
                     -
                   
                   
                 

                 

                   
                     onClick
                   
                   
                     
                       func
                     
                   
                   
                     -
                   
                   
                     
                       onClick
                     
                   
                   
                 

                 

                   
                     style
                   
                   
                     
                       other
                     
                   
                   
                     -
                   
                   
                     
                       {}
                     
                   
                   
                 

               

@@ -16942,254 +10312,6 @@ exports[`Storyshots Addons|Info/Story Source One prop 1`] = `
 `;
 
 exports[`Storyshots Addons|Info/deprecated Displays Markdown in description 1`] = `
-.emotion-6 {
-  position: relative;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  position: relative;
-  overflow: auto;
-}
-
-.emotion-4 code {
-  padding-right: 10px;
-  opacity: 0.7;
-}
-
-.emotion-4 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-4 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-4 * .token.string {
-  color: #A31515;
-}
-
-.emotion-4 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-4 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-4 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-4 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-4 * .token.function {
-  color: #393A34;
-}
-
-.emotion-4 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-4 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-4 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-4 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-4 * .token.tag {
-  color: #800000;
-}
-
-.emotion-4 * .token.selector {
-  color: #800000;
-}
-
-.emotion-4 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-4 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-4 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-4 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-4 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 0;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-70 {
-  border-collapse: collapse;
-  margin-top: 16px;
-  width: auto;
-  table-layout: auto;
-}
-
-.emotion-18 {
-  border-bottom: 1px solid rgba(0,0,0,0.1);
-}
-
-.emotion-8 {
-  padding: 2px 6px;
-  line-height: 18px;
-  vertical-align: middle;
-  padding: 8px 16px;
-}
-
-.emotion-68 {
-  font-size: 14px;
-}
-
-.emotion-30 {
-  border-bottom: 1px solid #eee;
-}
-
-.emotion-20 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #774dd7;
-}
-
-.emotion-22 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-  color: #1ea7fd;
-}
-
-.emotion-22 button {
-  color: #37d5d3;
-}
-
-.emotion-22 span {
-  white-space: pre;
-}
-
-.emotion-24 {
-  padding: 2px 6px;
-  white-space: nowrap;
-  font-family: Monaco,Consolas,"Courier New",monospace;
-  text-align: left;
-  padding: 8px 16px;
-}
-
-.emotion-28 {
-  padding: 2px 6px;
-  text-align: left;
-  padding: 8px 16px;
-}
-
 

   

           

             

               
                 
                   
             

               
                 

                   
                     Property
                   
                   
                     Type
                   
                   
                     Required
                   
                   
                     Default
                   
                   
                     Description
                   
                 

               
               
                 

                   
                     disabled
                   
                   
                     
                       bool
                     
                   
                   
                     -
                   
                   
                     
                       false
                     
                   
                   
                 

                 

                   
                     label
                   
                   
                     
                       string
                     
                   
                   
                     yes
                   
                   
                     -
                   
                   
                 

                 

                   
                     onClick
                   
                   
                     
                       func
                     
                   
                   
                     -
                   
                   
                     
                       onClick
                     
                   
                   
                 

                 

                   
                     style
                   
                   
                     
                       other
                     
                   
                   
                     -
                   
                   
                     
                       {}
                     
                   
                   
                 

               

diff --git a/examples/official-storybook/stories/__snapshots__/addon-links.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-links.stories.storyshot
index 5ad349309e80..1b8f3818d409 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-links.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-links.stories.storyshot
@@ -23,12 +23,8 @@ exports[`Storyshots Addons|Links.Href log 1`] = `
 `;
 
 exports[`Storyshots Addons|Links.Link First 1`] = `
-.emotion-0 {
-  color: inherit;
-}
-
 
   Go to Second
@@ -36,12 +32,8 @@ exports[`Storyshots Addons|Links.Link First 1`] = `
 `;
 
 exports[`Storyshots Addons|Links.Link Second 1`] = `
-.emotion-0 {
-  color: inherit;
-}
-
 
   Go to First
@@ -55,12 +47,8 @@ Array [
   >
     Scroll down to see the link
   ,
-  .emotion-0 {
-  color: inherit;
-}
-
-
     Go to Second
@@ -75,12 +63,8 @@ Array [
   >
     Scroll down to see the link
   ,
-  .emotion-0 {
-  color: inherit;
-}
-
-
     Go to First
@@ -89,12 +73,8 @@ Array [
 `;
 
 exports[`Storyshots Addons|Links.Select First 1`] = `
-.emotion-0 {
-  color: inherit;
-}
-
 
   Go back
@@ -121,12 +101,8 @@ exports[`Storyshots Addons|Links.Select Index 1`] = `
 `;
 
 exports[`Storyshots Addons|Links.Select Second 1`] = `
-.emotion-0 {
-  color: inherit;
-}
-
 
   Go back
@@ -134,12 +110,8 @@ exports[`Storyshots Addons|Links.Select Second 1`] = `
 `;
 
 exports[`Storyshots Addons|Links.Select Third 1`] = `
-.emotion-0 {
-  color: inherit;
-}
-
 
   Go back
diff --git a/examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot
index 856f526a52f5..46c2fc8a91b8 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot
@@ -2,7 +2,7 @@
 
 exports[`Storyshots Addons|Viewport default 1`] = `
 

   I don't have problems being rendered using the default viewport.
 

@@ -10,7 +10,7 @@ exports[`Storyshots Addons|Viewport default 1`] = `
 
 exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Inherited 1`] = `
 

   I've inherited 
   
@@ -22,7 +22,7 @@ exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Inherited 1`]
 
 exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Overridden via "withViewport" parameterized decorator 1`] = `
 

   I respect my parents but I should be looking good on 
   
diff --git a/examples/official-storybook/stories/__snapshots__/core.stories.storyshot b/examples/official-storybook/stories/__snapshots__/core.stories.storyshot
index e082d1369a5a..7dd560960357 100644
--- a/examples/official-storybook/stories/__snapshots__/core.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/core.stories.storyshot
@@ -1,36 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Core|Events Force re-render 1`] = `
-.emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
 
diff --git a/examples/official-storybook/tests/storyshots.test.js b/examples/official-storybook/tests/storyshots.test.js
index b12e72149656..256d81f7c023 100644
--- a/examples/official-storybook/tests/storyshots.test.js
+++ b/examples/official-storybook/tests/storyshots.test.js
@@ -1,5 +1,4 @@
 import path from 'path';
-import { createSerializer as emotionCreateSerializer } from 'jest-emotion';
 import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
 import { render as renderer } from 'enzyme';
 import { createSerializer } from 'enzyme-to-json';
@@ -12,5 +11,5 @@ initStoryshots({
   test: multiSnapshotWithOptions({
     renderer,
   }),
-  snapshotSerializers: [createSerializer(), emotionCreateSerializer()],
+  snapshotSerializers: [createSerializer()],
 });
diff --git a/jest.config.js b/jest.config.js
index 763c9f19c401..33e04c4c7f78 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -23,7 +23,6 @@ module.exports = {
     '/lib',
     '/examples/official-storybook',
   ],
-  snapshotSerializers: ['jest-emotion'],
   transform: {
     '^.+\\.jsx?$': '/scripts/babel-jest.js',
     '^.+\\.tsx?$': '/node_modules/ts-jest',
diff --git a/lib/components/src/form/__snapshots__/form.stories.storyshot b/lib/components/src/form/__snapshots__/form.stories.storyshot
index cad94608d23d..ff1e1c598eba 100644
--- a/lib/components/src/form/__snapshots__/form.stories.storyshot
+++ b/lib/components/src/form/__snapshots__/form.stories.storyshot
@@ -1,131 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Components|Form/Button alignment 1`] = `
-.emotion-12 > * {
-  margin-top: 10px;
-}
-
-.emotion-12 > *:nth-child(0) {
-  margin-top: 0;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-8 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  width: 100%;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-8:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-.emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  width: 100%;
-  text-align: right;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-.emotion-4 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  width: 100%;
-  text-align: center;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-4:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
 

   

     
   

   

     
   

   

     
@@ -134,133 +35,32 @@ exports[`Storyshots Components|Form/Button alignment 1`] = `
 `;
 
 exports[`Storyshots Components|Form/Button sizes 1`] = `
-.emotion-12 > * {
-  margin-top: 10px;
-}
-
-.emotion-12 > *:nth-child(0) {
-  margin-top: 0;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-.emotion-4 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-4:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-.emotion-8 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  width: 100%;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-8:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
 

   

     
   

   

     
   

   

     
@@ -269,171 +69,41 @@ exports[`Storyshots Components|Form/Button sizes 1`] = `
 `;
 
 exports[`Storyshots Components|Form/Button validations 1`] = `
-.emotion-16 > * {
-  margin-top: 10px;
-}
-
-.emotion-16 > *:nth-child(0) {
-  margin-top: 0;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-12 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  width: 100%;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-12:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-.emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  width: 100%;
-  text-align: left;
-  border-bottom-color: #d53535;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-.emotion-4 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  width: 100%;
-  text-align: left;
-  border-bottom-color: orange;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-4:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-.emotion-8 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  width: 100%;
-  text-align: left;
-  border-bottom-color: #09833a;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-8:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
 

   

     
   

   

     
   

   

     
   

   

     
@@ -442,148 +112,22 @@ exports[`Storyshots Components|Form/Button validations 1`] = `
 `;
 
 exports[`Storyshots Components|Form/Button with knobs 1`] = `
-.emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
 
 `;
 
 exports[`Storyshots Components|Form/Select sizes 1`] = `
-.emotion-12 > * {
-  margin-top: 10px;
-}
-
-.emotion-12 > *:nth-child(0) {
-  margin-top: 0;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  height: 32px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  padding-right: 20px;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-.emotion-4 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: left;
-  height: 32px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  padding-right: 20px;
-}
-
-.emotion-4:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-.emotion-8 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  width: 100%;
-  text-align: left;
-  height: 32px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  padding-right: 20px;
-}
-
-.emotion-8:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
 

   

     
       

   

     
     

   

     
   

   

     
   

   

     
   

   

     
   

   

     
   

   

     
   

   

     
-`;
diff --git a/lib/components/src/preview/__snapshots__/preview.stories.storyshot b/lib/components/src/preview/__snapshots__/preview.stories.storyshot
index 2fc0807a2453..385b8f1447e7 100644
--- a/lib/components/src/preview/__snapshots__/preview.stories.storyshot
+++ b/lib/components/src/preview/__snapshots__/preview.stories.storyshot
@@ -9,7 +9,7 @@ Array [
       class="css-1g91tai-Side e18hjm8i2"
     >
       

         
     

       

         
-        
+        CONTENT 2
       

-    

-    

       

-      

         

-          test2 is always active (but visually hidden)
+          CONTENT 6
         

       

     

@@ -238,10 +220,10 @@ exports[`Storyshots Components|Tabs stateless - absolute 1`] = `
     class="css-rpkhur-Wrapper e1lzzkxx0"
   >
     

       

         


From 552d64b9088c93a97c128e14800ea20a8c9eb6d1 Mon Sep 17 00:00:00 2001
From: Norbert de Langen 
Date: Sat, 29 Dec 2018 19:06:03 +0100
Subject: [PATCH 117/120] FIX parameter merging

---
 .../addon-a11y.stories.storyshot              |  30 ++
 .../addon-info.stories.storyshot              |  29 ++
 .../__snapshots__/core.stories.storyshot      | 358 ------------------
 .../stories/addon-a11y.stories.js             |  10 +-
 .../stories/addon-cssresources.stories.js     |   6 +
 .../stories/addon-events.stories.js           |  10 +
 .../stories/core/parameters.stories.js        |   9 +-
 .../__snapshots__/storyshots.test.js.snap     | 163 +++++++-
 lib/core/src/client/preview/client_api.js     |   5 +-
 lib/core/src/client/preview/start.js          |   2 +-
 10 files changed, 248 insertions(+), 374 deletions(-)
 delete mode 100644 examples/official-storybook/stories/__snapshots__/core.stories.storyshot

diff --git a/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot
index a7592902cdc6..f8fbd7092ffa 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot
@@ -80,6 +80,36 @@ exports[`Storyshots Addons|A11y/Button Label 1`] = `
 
 `;
 
+exports[`Storyshots Addons|A11y/Form With label 1`] = `
+
+`;
+
+exports[`Storyshots Addons|A11y/Form With placeholder 1`] = `
+
+`;
+
 exports[`Storyshots Addons|A11y/Form Without Label 1`] = `
 

+                
+                
+                
+                
+                
diff --git a/examples/official-storybook/stories/__snapshots__/core.stories.storyshot b/examples/official-storybook/stories/__snapshots__/core.stories.storyshot
deleted file mode 100644
index 1fb72f7dac01..000000000000
--- a/examples/official-storybook/stories/__snapshots__/core.stories.storyshot
+++ /dev/null
@@ -1,358 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Core|Events Force re-render 1`] = `
-
-`;
-
-exports[`Storyshots Core|Parameters adds data to storyFn 1`] = `
-
-  [
-  {
-    "kind": "Core|Parameters",
-    "name": "adds data to storyFn",
-    "parameters": {
-      "fileName": "/Users/dev/Projects/GitHub/storybook/core/examples/official-storybook/stories/core.stories.js",
-      "a11y": {},
-      "options": {
-        "name": "Custom Storybook",
-        "hierarchySeparator": {},
-        "hierarchyRootSeparator": "|",
-        "selectedPanel": "storybook/actions/panel",
-        "selectedPanel": "storybook/background/panel",
-        "panel": "storybook/actions/panel",
-        "showPanel": false
-      },
-      "viewports": {
-        "iphone5": {
-          "name": "iPhone 5",
-          "styles": {
-            "height": "568px",
-            "width": "320px"
-          },
-          "type": "mobile"
-        },
-        "iphone6": {
-          "name": "iPhone 6",
-          "styles": {
-            "height": "667px",
-            "width": "375px"
-          },
-          "type": "mobile"
-        },
-        "iphone6p": {
-          "name": "iPhone 6 Plus",
-          "styles": {
-            "height": "736px",
-            "width": "414px"
-          },
-          "type": "mobile"
-        },
-        "iphone8p": {
-          "name": "iPhone 8 Plus",
-          "styles": {
-            "height": "736px",
-            "width": "414px"
-          },
-          "type": "mobile"
-        },
-        "iphonex": {
-          "name": "iPhone X",
-          "styles": {
-            "height": "812px",
-            "width": "375px"
-          },
-          "type": "mobile"
-        },
-        "iphonexr": {
-          "name": "iPhone XR",
-          "styles": {
-            "height": "896px",
-            "width": "414px"
-          },
-          "type": "mobile"
-        },
-        "iphonexsmax": {
-          "name": "iPhone Xs Max",
-          "styles": {
-            "height": "896px",
-            "width": "414px"
-          },
-          "type": "mobile"
-        },
-        "ipad": {
-          "name": "iPad",
-          "styles": {
-            "height": "1024px",
-            "width": "768px"
-          },
-          "type": "tablet"
-        },
-        "ipad10p": {
-          "name": "iPad Pro 10.5-in",
-          "styles": {
-            "height": "1112px",
-            "width": "834px"
-          },
-          "type": "tablet"
-        },
-        "ipad12p": {
-          "name": "iPad Pro 12.9-in",
-          "styles": {
-            "height": "1366px",
-            "width": "1024px"
-          },
-          "type": "tablet"
-        },
-        "galaxys5": {
-          "name": "Galaxy S5",
-          "styles": {
-            "height": "640px",
-            "width": "360px"
-          },
-          "type": "mobile"
-        },
-        "galaxys9": {
-          "name": "Galaxy S9",
-          "styles": {
-            "height": "1480px",
-            "width": "720px"
-          },
-          "type": "mobile"
-        },
-        "nexus5x": {
-          "name": "Nexus 5X",
-          "styles": {
-            "height": "660px",
-            "width": "412px"
-          },
-          "type": "mobile"
-        },
-        "nexus6p": {
-          "name": "Nexus 6P",
-          "styles": {
-            "height": "732px",
-            "width": "412px"
-          },
-          "type": "mobile"
-        },
-        "pixel": {
-          "name": "Pixel",
-          "styles": {
-            "height": "960px",
-            "width": "540px"
-          },
-          "type": "mobile"
-        },
-        "pixelxl": {
-          "name": "Pixel XL",
-          "styles": {
-            "height": "1280px",
-            "width": "720px"
-          },
-          "type": "mobile"
-        },
-        "kindleFire2": {
-          "name": "Kindle Fire 2",
-          "styles": {
-            "width": "600px",
-            "height": "963px"
-          },
-          "type": "tablet"
-        },
-        "kindleFireHD": {
-          "name": "Kindle Fire HD",
-          "styles": {
-            "width": "533px",
-            "height": "801px"
-          },
-          "type": "tablet"
-        }
-      },
-      "globalParameter": "globalParameter",
-      "chapterParameter": "chapterParameter",
-      "storyParameter": "storyParameter"
-    },
-    "id": "Core-Parameters-addsDataToStoryFn",
-    "depth": 2,
-    "path": "Core-Parameters-addsDataToStoryFn",
-    "options": {},
-    "decoratorParameter": "decoratorParameter"
-  }
-]
-

-`;
-
-exports[`Storyshots Core|Parameters passed to story 1`] = `
-Array [
-  

-    Parameters are
-  
,
-  
-    {
-  "a11y": {},
-  "options": {
-    "name": "Custom Storybook",
-    "hierarchySeparator": {},
-    "hierarchyRootSeparator": "|",
-    "selectedPanel": "storybook/actions/panel",
-    "selectedPanel": "storybook/background/panel",
-    "panel": "storybook/actions/panel",
-    "showPanel": false
-  },
-  "viewports": {
-    "iphone5": {
-      "name": "iPhone 5",
-      "styles": {
-        "height": "568px",
-        "width": "320px"
-      },
-      "type": "mobile"
-    },
-    "iphone6": {
-      "name": "iPhone 6",
-      "styles": {
-        "height": "667px",
-        "width": "375px"
-      },
-      "type": "mobile"
-    },
-    "iphone6p": {
-      "name": "iPhone 6 Plus",
-      "styles": {
-        "height": "736px",
-        "width": "414px"
-      },
-      "type": "mobile"
-    },
-    "iphone8p": {
-      "name": "iPhone 8 Plus",
-      "styles": {
-        "height": "736px",
-        "width": "414px"
-      },
-      "type": "mobile"
-    },
-    "iphonex": {
-      "name": "iPhone X",
-      "styles": {
-        "height": "812px",
-        "width": "375px"
-      },
-      "type": "mobile"
-    },
-    "iphonexr": {
-      "name": "iPhone XR",
-      "styles": {
-        "height": "896px",
-        "width": "414px"
-      },
-      "type": "mobile"
-    },
-    "iphonexsmax": {
-      "name": "iPhone Xs Max",
-      "styles": {
-        "height": "896px",
-        "width": "414px"
-      },
-      "type": "mobile"
-    },
-    "ipad": {
-      "name": "iPad",
-      "styles": {
-        "height": "1024px",
-        "width": "768px"
-      },
-      "type": "tablet"
-    },
-    "ipad10p": {
-      "name": "iPad Pro 10.5-in",
-      "styles": {
-        "height": "1112px",
-        "width": "834px"
-      },
-      "type": "tablet"
-    },
-    "ipad12p": {
-      "name": "iPad Pro 12.9-in",
-      "styles": {
-        "height": "1366px",
-        "width": "1024px"
-      },
-      "type": "tablet"
-    },
-    "galaxys5": {
-      "name": "Galaxy S5",
-      "styles": {
-        "height": "640px",
-        "width": "360px"
-      },
-      "type": "mobile"
-    },
-    "galaxys9": {
-      "name": "Galaxy S9",
-      "styles": {
-        "height": "1480px",
-        "width": "720px"
-      },
-      "type": "mobile"
-    },
-    "nexus5x": {
-      "name": "Nexus 5X",
-      "styles": {
-        "height": "660px",
-        "width": "412px"
-      },
-      "type": "mobile"
-    },
-    "nexus6p": {
-      "name": "Nexus 6P",
-      "styles": {
-        "height": "732px",
-        "width": "412px"
-      },
-      "type": "mobile"
-    },
-    "pixel": {
-      "name": "Pixel",
-      "styles": {
-        "height": "960px",
-        "width": "540px"
-      },
-      "type": "mobile"
-    },
-    "pixelxl": {
-      "name": "Pixel XL",
-      "styles": {
-        "height": "1280px",
-        "width": "720px"
-      },
-      "type": "mobile"
-    },
-    "kindleFire2": {
-      "name": "Kindle Fire 2",
-      "styles": {
-        "width": "600px",
-        "height": "963px"
-      },
-      "type": "tablet"
-    },
-    "kindleFireHD": {
-      "name": "Kindle Fire HD",
-      "styles": {
-        "width": "533px",
-        "height": "801px"
-      },
-      "type": "tablet"
-    }
-  },
-  "globalParameter": "globalParameter",
-  "chapterParameter": "chapterParameter",
-  "storyParameter": "storyParameter"
-}
-  
,
-]
-`;
diff --git a/examples/official-storybook/stories/addon-a11y.stories.js b/examples/official-storybook/stories/addon-a11y.stories.js
index 18cbf8d8af99..afc72013a0b2 100644
--- a/examples/official-storybook/stories/addon-a11y.stories.js
+++ b/examples/official-storybook/stories/addon-a11y.stories.js
@@ -42,9 +42,15 @@ storiesOf('Addons|A11y/Form', module)
     
   ))
   .add('With label', () => (
-    } input={} />
+    
+      
+    
   ))
-  .add('With placeholder', () => } />);
+  .add('With placeholder', () => (
+    
+      
+    
+  ));
 
 storiesOf('Addons|A11y/Image', module)
   .addParameters({ options: { selectedPanel: 'storybook/a11y/panel' } })
diff --git a/examples/official-storybook/stories/addon-cssresources.stories.js b/examples/official-storybook/stories/addon-cssresources.stories.js
index 70b0869a0b21..4cc9bceef29d 100644
--- a/examples/official-storybook/stories/addon-cssresources.stories.js
+++ b/examples/official-storybook/stories/addon-cssresources.stories.js
@@ -15,6 +15,9 @@ storiesOf('Addons|Cssresources', module)
         picked: false,
       },
     ],
+    options: {
+      selectedPanel: 'storybook/cssresources/panel',
+    },
   })
   .add('Primary Large Button', () => (
     
-        
-      
-      

-        There have no stories been loaded yet
-      

-    
-    

-  

-
-`;
-
 exports[`Storyshots UI|Nav/settings without brand 1`] = `
 

               
                 

                   
                     Property
                   
                   
                     Type
                   
                   
                     Required
                   
                   
                     Default
                   
                   
                     Description
                   
                 

               
               
                 

                   
                     disabled
                   
                   
                     
                       bool
                     
                   
                   
                     -
                   
                   
                     
                       false
                     
                   
                   
                 

                 

                   
                     label
                   
                   
                     
                       string
                     
                   
                   
                     yes
                   
                   
                     -
                   
                   
                 

                 

                   
                     onClick
                   
                   
                     
                       func
                     
                   
                   
                     -
                   
                   
                     
                       onClick
                     
                   
                   
                 

                 

                   
                     style
                   
                   
                     
                       other
                     
                   
                   
                     -
                   
                   
                     
                       {}
                     
                   
                   
                 

               

+                  label
+                
+                  
+                    string
+                  
+                
+                  yes
+                
+                  -
+                
+