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 d5dfa4013ca..6e0fea751ab 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 3bff0c35ba1..fc951c17de0 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 44b60bb69a2..309ce548458 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 189c31521e3..6ddc4098b20 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 21bd042f009..919e0202bca 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 a14cc3f4a67..dd787ee5878 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 74dbd2156cc..3df5f03cc6a 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 5d9aaf4e1da..358db1cf6ee 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 692ad69cacc..d10037b0fd0 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 692ad69cacc..d10037b0fd0 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 e6be81a0e93..e1ed08fcf61 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 becba8b172f..f60c4be6a3d 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 647e02ae0d4..92d286a488c 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 647e02ae0d4..92d286a488c 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 467d268902e..bd767c326db 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 bd767c326db..bf81ce25f16 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 e649449c1a5..952d18125f6 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 8238f7a937c..d3096cc29d6 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 d3096cc29d6..427eaab81fe 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 ab39f6cd539..969ad7156ff 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 a82d4147c6f..e4b96b184c1 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 1719b18e71d..b9fbf8285d2 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 f130d7f9a93..c2a673fa7c7 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 750f26ab9c0..18844b8243a 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 5cac48f5cab..619543f5571 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 fc951c17de0..3551f6a670a 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 cbdd6ae220b..11883fe40c5 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 bee676ea0f2..00000000000 --- 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 00000000000..0e550e2c164 --- /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 e7df28f726f..81c4174b6fb 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 00000000000..2f4eb9cf4fd --- /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 00000000000..81d74f99bec --- /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 55ea5bb9331..c2e1fbdc8a3 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 0349d52c815..63ad18f67d3 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 | 45 ++++++++++++++++++------------ 7 files changed, 64 insertions(+), 59 deletions(-) diff --git a/.eslintignore b/.eslintignore index acaec38f0b0..76cb54f8b1e 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 4fecb96436d..41af9fbf904 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 57749ebb543..419b73acbf2 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 9b6d15364ce..04fee67bc6b 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 84ab86f76ad..54a71c2c205 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 0e550e2c164..d0618201654 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 81c4174b6fb..a4c40eb161f 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)) - -interface MakeDecoratorOptions { - name: any; - parameterName: any; - wrapper: any; - skipIfNoParametersOrOptions: boolean; - allowDeprecatedUsage: boolean; +export interface StoryContext { + story: string; + kind: string; } -export const makeDecorator: any = ({ +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: string; + parameterName: string; + allowDeprecatedUsage: boolean; + skipIfNoParametersOrOptions: boolean; + wrapper: StoryWrapper; +} + +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 419b73acbf2..c12ad3c8c7c 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 11883fe40c5..2c34906580d 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 d0618201654..135ed25fda9 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 53f3dd8cfeb..4b640ac6636 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 a4c40eb161f..15d16687e88 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 00000000000..c07891fd40a --- /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 7358fc7e4be..8cc153b624f 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 2f4eb9cf4fd..d9790e72063 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 d9790e72063..2f4eb9cf4fd 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 d50397074ee..fc9825b582e 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 4c2907ea996..00000000000 --- 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 00000000000..9a4121b7ad7 --- /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 00000000000..2f4eb9cf4fd --- /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 00000000000..11744d2a8c3 --- /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 86df91977be..ed93ba46fc2 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 f004cb913f3..00000000000 --- 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 00000000000..206bbdb2b1c --- /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 00000000000..ff6f94ac0e7 --- /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 00000000000..2cfc555d105 --- /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 00000000000..61a5d8a91fb --- /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 | 76 ++++++++++++++----- app/vue/src/client/preview/render.js | 24 ++---- .../addon-centered.stories.storyshot | 26 ++----- .../custom-decorators.stories.storyshot | 38 +++------- 5 files changed, 89 insertions(+), 86 deletions(-) diff --git a/addons/storyshots/storyshots-core/src/frameworks/vue/renderTree.js b/addons/storyshots/storyshots-core/src/frameworks/vue/renderTree.js index 888c9820365..424070b7893 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 b859c3dd1c8..81956244829 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( - (decorated, decorator) => context => { - const story = () => decorated(context); - let decoratedStory = decorator(story, context); +export const WRAPS = 'STORYBOOK_WRAPS'; +export const VALUES = 'STORYBOOK_VALUES'; - if (typeof decoratedStory === 'string') { - decoratedStory = { template: decoratedStory }; +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 => { + let story; + const decoratedStory = decorator(() => { + story = decorated(context); + return story; + }, context); + + if (!story) { + story = decorated(context); } - decoratedStory.components = decoratedStory.components || {}; - decoratedStory.components.story = createWrapperComponent(story()); - return decoratedStory; + if (decoratedStory === story) { + return story; + } + + 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 7204bfccae6..24ba65417a3 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 66bdedf3c91..d19663d8679 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 810bf9fab81..eb88673228a 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 61a5d8a91fb..d55ceebc451 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 ed93ba46fc2..6e82f4ece17 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 a29309b5ea3..20cadfe57bc 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 1f0f7f6ad65..d1a946a26bf 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 1f0f7f6ad65..3f1e531c451 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 | 39 +++++++++++++++------------- 2 files changed, 23 insertions(+), 21 deletions(-) diff --git a/app/vue/src/client/preview/index.js b/app/vue/src/client/preview/index.js index 81956244829..b99b4f8f184 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 24ba65417a3..e3227b3e71f 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; +export const COMPONENT = 'STORYBOOK_COMPONENT'; +export const VALUES = 'STORYBOOK_VALUES'; -function renderRoot(component) { - root = new Vue({ - el: '#root', - data() { - return { [VALUES]: component.options[VALUES] }; - }, - render(h) { - return h('div', { attrs: { id: 'root' } }, [h(component)]); - }, - }); -} +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; + } - renderRoot(component); - } else { - root[VALUES] = component.options[VALUES]; + 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 e851776c1de..75b0ecf029d 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 60f64526596..c317c0c8a7d 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 81cbb180f65..d3a62ce8b89 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 b99b4f8f184..5dfda555955 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 00000000000..77bc1cddf2f --- /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 fd45a155c5a..9fe1a3d0c5c 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 2885fd370f8..ac4299c7bce 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 0e64ec1ffab..a04cd52c926 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 8104e1e546d..27c2053f144 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 dd275ad1e76..e318e01ec0a 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 a2ecdcee1c3..1a61353d09c 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 bdeb116b316..a652b366e72 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 797bf590e74..60568eee447 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 8a66af68070..516bc6a5eb2 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 746057f7698..c41e339a11b 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 84e407f6f3d..4d2bec3ef02 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 e8771cc8cad..12215fad67b 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 d098c57a05e..366d17107a6 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 ded8e8ef48c..64173a9b848 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 89080580c69..db2b6f243f4 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 5a2a1727db0..8db0a71d0f2 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 33bca237c37..709216d4116 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 10a92ba00b6..47d53de7fdb 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 6b4576130b9..2d88335302e 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 44e69239bb8..2e00543896b 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 fd217884b2b..2e953a6e7fe 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 43543201838..4d75e2af0db 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 0ccfd142e06..4b1abe6368a 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 ba5d8cc2c9c..e632bb7200e 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 e6bc077f736..1093aee765b 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 b07c9349de2..05358baf671 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 2a2ae69bf98..0a55a796cf8 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 b0b52e6830e..611fe1adaea 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 7b2300717ad..b7831097f26 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 e05bed148d5..8d3be9fa880 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 1b20ee1bafd..4cc3c464b84 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 f5c813084fd..b6fd602ea3b 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 6c3586281a4..d797a353da6 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 79545274197..12fca7b126c 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 b51f09e5792..c8ce805485b 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 bdcbe884665..32281a341b3 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 ba05a1b1909..2ac21d90550 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 3267960f2f6..8e54cfdf573 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 903a39652ff..0c9eaf199b5 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 c3464da69f8..a50a2f9f975 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 3d6a3224518..5fca27c4031 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 c01602fb2e5..47054aa082e 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 0089f587eb5..390a9470a83 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 e30e3903f7f..0f09b7b6825 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 f3df0f10377..c19ae6c80e8 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 9b8576856a0..fea6508b589 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 95116267228..3e2bcc7bfbd 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 ce9f083e8f8..1a3509fcbc7 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 19183b6eed4..980e60789c9 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 e0529f9cfa5..435cdf16c59 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 991d4eb33e0..1925c472e4d 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 0c8c25062fb..cc68dab675f 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 57be5337fd7..89febc7fa20 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 117e4adfe2b..2ccaab377a1 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 6fee808c71b..123e55e3b45 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 e741e48a402..f0c5fdd64e6 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 c8e6c59f20b..5e8cbc3f079 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 8f2b9c9b550..1a8e6195ac5 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 1a861f648ad..25db6faf572 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 6e82f4ece17..8a0e39c01e1 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 4b1abe6368a..fe723dcf3ce 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 e632bb7200e..d2876932af5 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 1093aee765b..402b66839b1 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 05358baf671..277ed596c83 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 0a55a796cf8..e8b8b39bc26 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 611fe1adaea..3c1298dbd04 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 b7831097f26..8aaac058526 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 b6fd602ea3b..b5812426de5 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 d797a353da6..ca161c78e4f 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 12fca7b126c..c257137b6bc 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 32281a341b3..19501ae014e 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 5fca27c4031..7d9491b9263 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 996ee957f77..bc340b1e8bc 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 135ed25fda9..66602973e99 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 c07891fd40a..22adacc2820 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 2d88335302e..3c7cd128937 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 66602973e99..fc71f994895 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 8cc153b624f..7d43f7b025c 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 1925c472e4d..2a41e199b37 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 | 5288 ++++++++++++----- .../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 | 1221 +++- lib/components/src/treeview/components.js | 3 +- lib/components/src/treeview/treeview.js | 1 + .../src/treeview/treeview.stories.js | 7 + 19 files changed, 6154 insertions(+), 1634 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 cba27139532..2af808001a1 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 3663bbd0f1d..13e7a19bf24 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 3dfb5d4ff45..73bf91cfe2a 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 0e3e6ad331b..2eda9efe45a 100644 --- a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot +++ b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot @@ -1,1354 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -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; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - -.emotion-10 { - position: absolute; - bottom: 0; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; - border-top: 1px solid rgba(0,0,0,0.1); - border-left: 1px solid rgba(0,0,0,0.1); - background: rgba(255,255,255,1); - border-radius: 4px 0 0 0; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - list-style: none; - padding: 0; - height: 26px; - font-size: 11px; - -webkit-letter-spacing: 1px; - -moz-letter-spacing: 1px; - -ms-letter-spacing: 1px; - letter-spacing: 1px; - text-transform: uppercase; - border-left: 0 none; -} - -.emotion-6 { - border: 0 none; - display: block; - background: none; - padding: 0 10px; - cursor: pointer; - text-transform: inherit; - -webkit-letter-spacing: inherit; - -moz-letter-spacing: inherit; - -ms-letter-spacing: inherit; - letter-spacing: inherit; - font-size: inherit; - color: inherit; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; -} - -.emotion-6:focus { - border-bottom: 2px solid #9fdaff; - outline: 0 none; -} - -.emotion-12 { - 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-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; -} - -
-
-
- -
- - -
-
-`; - -exports[`Storyshots Addons|Info.deprecated Displays Markdown in description 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; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - -.emotion-10 { - position: absolute; - bottom: 0; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; - border-top: 1px solid rgba(0,0,0,0.1); - border-left: 1px solid rgba(0,0,0,0.1); - background: rgba(255,255,255,1); - border-radius: 4px 0 0 0; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - list-style: none; - padding: 0; - height: 26px; - font-size: 11px; - -webkit-letter-spacing: 1px; - -moz-letter-spacing: 1px; - -ms-letter-spacing: 1px; - letter-spacing: 1px; - text-transform: uppercase; - border-left: 0 none; -} - -.emotion-6 { - border: 0 none; - display: block; - background: none; - padding: 0 10px; - cursor: pointer; - text-transform: inherit; - -webkit-letter-spacing: inherit; - -moz-letter-spacing: inherit; - -ms-letter-spacing: inherit; - letter-spacing: inherit; - font-size: inherit; - color: inherit; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; -} - -.emotion-6:focus { - border-bottom: 2px solid #9fdaff; - outline: 0 none; -} - -.emotion-12 { - 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-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; -} - -
-
-
- -
- - -
-
-`; - 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; @@ -1708,7 +359,9 @@ exports[`Storyshots Addons|Info/Decorator Use Info as story decorator 1`] = `

+ > + Use Info as story decorator +

`; +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; + -webkit-font-smoothing: antialiased; + font-size: 13px; +} + +.emotion-10 { + position: absolute; + bottom: 0; + right: 0; + max-width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + list-style: none; + margin: 0; + padding: 0; + border-top: 1px solid rgba(0,0,0,0.1); + border-left: 1px solid rgba(0,0,0,0.1); + background: rgba(255,255,255,1); + border-radius: 4px 0 0 0; +} + +.emotion-8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; + list-style: none; + padding: 0; + height: 26px; + font-size: 11px; + -webkit-letter-spacing: 1px; + -moz-letter-spacing: 1px; + -ms-letter-spacing: 1px; + letter-spacing: 1px; + text-transform: uppercase; + border-left: 0 none; +} + +.emotion-6 { + border: 0 none; + display: block; + background: none; + padding: 0 10px; + cursor: pointer; + text-transform: inherit; + -webkit-letter-spacing: inherit; + -moz-letter-spacing: inherit; + -ms-letter-spacing: inherit; + letter-spacing: inherit; + font-size: inherit; + color: inherit; + border-top: 2px solid transparent; + border-bottom: 2px solid transparent; +} + +.emotion-6:focus { + border-bottom: 2px solid #9fdaff; + outline: 0 none; +} + +.emotion-12 { + 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-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; +} + +
+
+
+ +
+ + +
+
+`; + 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; @@ -2279,7 +1556,9 @@ exports[`Storyshots Addons|Info/GitHub issues #1814 1`] = `

+ > + #1814 +

+ > + Displays JSX in description +

+ > + Displays Markdown in description +

Sometimes you might want to manually include some code examples:
- 
-              
-                const Button = () => <button />;
-              
-
@@ -4280,7 +3552,9 @@ exports[`Storyshots Addons|Info/Markdown From external Markdown file 1`] = `

+ > + From external Markdown file +

+ > + From internal Markdown file +

+ > + Use a custom component for the table +

+ > + Excludes propTypes that are in the excludedPropTypes array +

+ > + Inlines component inside story +

@@ -7999,7 +7281,9 @@ exports[`Storyshots Addons|Info/Options.propTables Shows additional component pr

+ > + Shows additional component prop tables +

+ > + Exclude component from prop tables +

+ > + Shows or hides Info Addon source +

+ > + Extend info styles with an object +

+ > + Full control over styles using a function +

+ > + Overwrite the parameters with markdown variable +

Sometimes you might want to manually include some code examples:
- 
-              
-                const Button = () => <button />;
-              
-
@@ -11773,7 +11056,9 @@ exports[`Storyshots Addons|Info/Parameters Overwrite the text parameter with mar

+ > + Overwrite the text parameter with markdown inline +

@@ -11798,17 +11083,6 @@ exports[`Storyshots Addons|Info/Parameters Overwrite the text parameter with mar > description or documentation about my component, supports markdown - 
-            
-              <Button>Click Here</Button>
-            
-

+ > + Overwriting and extending the parameters and options set stories-wise +

@@ -13032,7 +12308,9 @@ exports[`Storyshots Addons|Info/Parameters Using paramaters across all stories 1

+ > + Using paramaters across all stories +

@@ -13682,7 +12960,9 @@ exports[`Storyshots Addons|Info/React Docgen Comments from Flow declarations 1`]

+ > + Comments from Flow declarations +

`; +exports[`Storyshots Addons|Info/React Docgen Comments from PropType declarations 1`] = ` +.emotion-186 { + 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; + right: 0; + max-width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + list-style: none; + margin: 0; + padding: 0; + border-top: 1px solid rgba(0,0,0,0.1); + border-left: 1px solid rgba(0,0,0,0.1); + background: rgba(255,255,255,1); + border-radius: 4px 0 0 0; +} + +.emotion-8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; + list-style: none; + padding: 0; + height: 26px; + font-size: 11px; + -webkit-letter-spacing: 1px; + -moz-letter-spacing: 1px; + -ms-letter-spacing: 1px; + letter-spacing: 1px; + text-transform: uppercase; + border-left: 0 none; +} + +.emotion-6 { + border: 0 none; + display: block; + background: none; + padding: 0 10px; + cursor: pointer; + text-transform: inherit; + -webkit-letter-spacing: inherit; + -moz-letter-spacing: inherit; + -ms-letter-spacing: inherit; + letter-spacing: inherit; + font-size: inherit; + color: inherit; + border-top: 2px solid transparent; + border-bottom: 2px solid transparent; +} + +.emotion-6:focus { + border-bottom: 2px solid #9fdaff; + outline: 0 none; +} + +.emotion-12 { + 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-184 { + 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-182 { + 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; +} + +
+
+
+ +
+ + +
+
+`; + exports[`Storyshots Addons|Info/React Docgen Comments from component declaration 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; @@ -14318,7 +14949,9 @@ exports[`Storyshots Addons|Info/React Docgen Comments from component declaration

+ > + Comments from component declaration +

+ > + Comments from named export component declaration +

`; +exports[`Storyshots Addons|Info/Story Source Array prop 1`] = ` +.emotion-42 { + 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; + right: 0; + max-width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + list-style: none; + margin: 0; + padding: 0; + border-top: 1px solid rgba(0,0,0,0.1); + border-left: 1px solid rgba(0,0,0,0.1); + background: rgba(255,255,255,1); + border-radius: 4px 0 0 0; +} + +.emotion-8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; + list-style: none; + padding: 0; + height: 26px; + font-size: 11px; + -webkit-letter-spacing: 1px; + -moz-letter-spacing: 1px; + -ms-letter-spacing: 1px; + letter-spacing: 1px; + text-transform: uppercase; + border-left: 0 none; +} + +.emotion-6 { + border: 0 none; + display: block; + background: none; + padding: 0 10px; + cursor: pointer; + text-transform: inherit; + -webkit-letter-spacing: inherit; + -moz-letter-spacing: inherit; + -ms-letter-spacing: inherit; + letter-spacing: inherit; + font-size: inherit; + color: inherit; + border-top: 2px solid transparent; + border-bottom: 2px solid transparent; +} + +.emotion-6:focus { + border-bottom: 2px solid #9fdaff; + outline: 0 none; +} + +.emotion-12 { + 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-40 { + 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-38 { + 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; +} + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ name + + type + + default + + description +
+ label + + * + + + string + + + Text to display inside button +
+ disabled + + boolean + + false + +
+ onClick + + * + + + function + + + Callback for when button is clicked +
+ style + + object + + {} + + Styles to apply to button +
+
+ + +
+
+`; + exports[`Storyshots Addons|Info/Story Source Children 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; @@ -15717,7 +17465,9 @@ exports[`Storyshots Addons|Info/Story Source Children 1`] = `

+ > + Children +

+ > + Many props +

+ > + Object prop +

+ > + One prop +

`; + +exports[`Storyshots Addons|Info/deprecated Displays Markdown in description 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; + -webkit-font-smoothing: antialiased; + font-size: 13px; +} + +.emotion-10 { + position: absolute; + bottom: 0; + right: 0; + max-width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + list-style: none; + margin: 0; + padding: 0; + border-top: 1px solid rgba(0,0,0,0.1); + border-left: 1px solid rgba(0,0,0,0.1); + background: rgba(255,255,255,1); + border-radius: 4px 0 0 0; +} + +.emotion-8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; + list-style: none; + padding: 0; + height: 26px; + font-size: 11px; + -webkit-letter-spacing: 1px; + -moz-letter-spacing: 1px; + -ms-letter-spacing: 1px; + letter-spacing: 1px; + text-transform: uppercase; + border-left: 0 none; +} + +.emotion-6 { + border: 0 none; + display: block; + background: none; + padding: 0 10px; + cursor: pointer; + text-transform: inherit; + -webkit-letter-spacing: inherit; + -moz-letter-spacing: inherit; + -ms-letter-spacing: inherit; + letter-spacing: inherit; + font-size: inherit; + color: inherit; + border-top: 2px solid transparent; + border-bottom: 2px solid transparent; +} + +.emotion-6:focus { + border-bottom: 2px solid #9fdaff; + outline: 0 none; +} + +.emotion-12 { + 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-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; +} + +
+
+
+ +
+ + +
+
+`; diff --git a/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot index f47650439e3..7a7fb4159c3 100644 --- a/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot +++ b/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot @@ -46,7 +46,7 @@ exports[`Storyshots Addons|Knobs.withKnobs complex select 1`] = ` class="emotion-0 emotion-1" > 
-    the type of string = string
+    the type of "string" = string
`; diff --git a/examples/official-storybook/stories/__snapshots__/core.stories.storyshot b/examples/official-storybook/stories/__snapshots__/core.stories.storyshot index 59f77b8ffec..d42397aa512 100644 --- a/examples/official-storybook/stories/__snapshots__/core.stories.storyshot +++ b/examples/official-storybook/stories/__snapshots__/core.stories.storyshot @@ -11,7 +11,7 @@ exports[`Storyshots Core|Events Force re-render 1`] = ` .emotion-0 { padding: 0 10px; color: #444; - background: transparent; + background: rgba(0,0,0,0.1); border-radius: 4px; -webkit-transition: border-bottom-color .3s linear; transition: border-bottom-color .3s linear; diff --git a/examples/official-storybook/stories/addon-info.stories.js b/examples/official-storybook/stories/addon-info.stories.js index 03e18e46246..cdad5ac7dde 100644 --- a/examples/official-storybook/stories/addon-info.stories.js +++ b/examples/official-storybook/stories/addon-info.stories.js @@ -315,20 +315,19 @@ storiesOf('Addons|Info/Parameters', module) { info: { disable: true } } ); -storiesOf('Addons|Info.ForwardRef', module) +storiesOf('Addons|Info/ForwardRef', module) .addDecorator(withInfo) .add('Displays forwarded ref components correctly', () => ( )); -storiesOf('Addons|Info.deprecated', module).add( +storiesOf('Addons|Info/deprecated', module).add( 'Displays Markdown in description', withInfo(markdownDescription)(() => ) ); storiesOf('Addons|Info/Story Source', module) - .addDecorator(withInfo()) - .add('Simple', () => ) + .addDecorator(withInfo) .add('One prop', () => ) .add('Many props', () => ) .add('Children', () => ( @@ -348,18 +347,21 @@ storiesOf('Addons|Info/Story Source', module) { property: 'disabled', propType: { name: 'boolean' }, + required: false, defaultValue: false, }, { property: 'onClick', propType: { name: 'function' }, description: 'Callback for when button is clicked', + required: true, defaultValue: () => {}, }, { property: 'style', propType: { name: 'object' }, description: 'Styles to apply to button', + required: false, defaultValue: {}, }, ]; diff --git a/lib/components/src/form/__snapshots__/form.stories.storyshot b/lib/components/src/form/__snapshots__/form.stories.storyshot index 8581df38bd4..05b9fbb0dca 100644 --- a/lib/components/src/form/__snapshots__/form.stories.storyshot +++ b/lib/components/src/form/__snapshots__/form.stories.storyshot @@ -26,7 +26,7 @@ exports[`Storyshots Components|Form/Button alignment 1`] = ` .emotion-8 { padding: 0 10px; color: #444; - background: transparent; + background: rgba(0,0,0,0.1); border-radius: 4px; -webkit-transition: border-bottom-color .3s linear; transition: border-bottom-color .3s linear; @@ -54,7 +54,7 @@ exports[`Storyshots Components|Form/Button alignment 1`] = ` .emotion-0 { padding: 0 10px; color: #444; - background: transparent; + background: rgba(0,0,0,0.1); border-radius: 4px; -webkit-transition: border-bottom-color .3s linear; transition: border-bottom-color .3s linear; @@ -82,7 +82,7 @@ exports[`Storyshots Components|Form/Button alignment 1`] = ` .emotion-4 { padding: 0 10px; color: #444; - background: transparent; + background: rgba(0,0,0,0.1); border-radius: 4px; -webkit-transition: border-bottom-color .3s linear; transition: border-bottom-color .3s linear; @@ -170,7 +170,7 @@ exports[`Storyshots Components|Form/Button sizes 1`] = ` .emotion-0 { padding: 0 10px; color: #444; - background: transparent; + background: rgba(0,0,0,0.1); border-radius: 4px; -webkit-transition: border-bottom-color .3s linear; transition: border-bottom-color .3s linear; @@ -198,7 +198,7 @@ exports[`Storyshots Components|Form/Button sizes 1`] = ` .emotion-4 { padding: 0 10px; color: #444; - background: transparent; + background: rgba(0,0,0,0.1); border-radius: 4px; -webkit-transition: border-bottom-color .3s linear; transition: border-bottom-color .3s linear; @@ -228,7 +228,7 @@ exports[`Storyshots Components|Form/Button sizes 1`] = ` .emotion-8 { padding: 0 10px; color: #444; - background: transparent; + background: rgba(0,0,0,0.1); border-radius: 4px; -webkit-transition: border-bottom-color .3s linear; transition: border-bottom-color .3s linear; @@ -316,7 +316,7 @@ exports[`Storyshots Components|Form/Button validations 1`] = ` .emotion-12 { padding: 0 10px; color: #444; - background: transparent; + background: rgba(0,0,0,0.1); border-radius: 4px; -webkit-transition: border-bottom-color .3s linear; transition: border-bottom-color .3s linear; @@ -344,7 +344,7 @@ exports[`Storyshots Components|Form/Button validations 1`] = ` .emotion-0 { padding: 0 10px; color: #444; - background: transparent; + background: rgba(0,0,0,0.1); border-radius: 4px; -webkit-transition: border-bottom-color .3s linear; transition: border-bottom-color .3s linear; @@ -373,7 +373,7 @@ exports[`Storyshots Components|Form/Button validations 1`] = ` .emotion-4 { padding: 0 10px; color: #444; - background: transparent; + background: rgba(0,0,0,0.1); border-radius: 4px; -webkit-transition: border-bottom-color .3s linear; transition: border-bottom-color .3s linear; @@ -402,7 +402,7 @@ exports[`Storyshots Components|Form/Button validations 1`] = ` .emotion-8 { padding: 0 10px; color: #444; - background: transparent; + background: rgba(0,0,0,0.1); border-radius: 4px; -webkit-transition: border-bottom-color .3s linear; transition: border-bottom-color .3s linear; @@ -485,7 +485,7 @@ exports[`Storyshots Components|Form/Button with knobs 1`] = ` .emotion-0 { padding: 0 10px; color: #444; - background: transparent; + background: rgba(0,0,0,0.1); border-radius: 4px; -webkit-transition: border-bottom-color .3s linear; transition: border-bottom-color .3s linear; @@ -547,7 +547,7 @@ exports[`Storyshots Components|Form/Select sizes 1`] = ` .emotion-0 { padding: 0 10px; color: #444; - background: transparent; + background: rgba(0,0,0,0.1); border-radius: 4px; -webkit-transition: border-bottom-color .3s linear; transition: border-bottom-color .3s linear; @@ -574,7 +574,7 @@ exports[`Storyshots Components|Form/Select sizes 1`] = ` .emotion-4 { padding: 0 10px; color: #444; - background: transparent; + background: rgba(0,0,0,0.1); border-radius: 4px; -webkit-transition: border-bottom-color .3s linear; transition: border-bottom-color .3s linear; @@ -603,7 +603,7 @@ exports[`Storyshots Components|Form/Select sizes 1`] = ` .emotion-8 { padding: 0 10px; color: #444; - background: transparent; + background: rgba(0,0,0,0.1); border-radius: 4px; -webkit-transition: border-bottom-color .3s linear; transition: border-bottom-color .3s linear; @@ -728,7 +728,7 @@ exports[`Storyshots Components|Form/Select validations 1`] = ` .emotion-6 { padding: 0 10px; color: #444; - background: transparent; + background: rgba(0,0,0,0.1); border-radius: 4px; -webkit-transition: border-bottom-color .3s linear; transition: border-bottom-color .3s linear; @@ -755,7 +755,7 @@ exports[`Storyshots Components|Form/Select validations 1`] = ` .emotion-0 { padding: 0 10px; color: #444; - background: transparent; + background: rgba(0,0,0,0.1); border-radius: 4px; -webkit-transition: border-bottom-color .3s linear; transition: border-bottom-color .3s linear; @@ -783,7 +783,7 @@ exports[`Storyshots Components|Form/Select validations 1`] = ` .emotion-2 { padding: 0 10px; color: #444; - background: transparent; + background: rgba(0,0,0,0.1); border-radius: 4px; -webkit-transition: border-bottom-color .3s linear; transition: border-bottom-color .3s linear; @@ -811,7 +811,7 @@ exports[`Storyshots Components|Form/Select validations 1`] = ` .emotion-4 { padding: 0 10px; color: #444; - background: transparent; + background: rgba(0,0,0,0.1); border-radius: 4px; -webkit-transition: border-bottom-color .3s linear; transition: border-bottom-color .3s linear; @@ -952,7 +952,7 @@ exports[`Storyshots Components|Form/Textarea alignment 1`] = ` .emotion-8 { padding: 0 10px; color: #444; - background: transparent; + background: rgba(0,0,0,0.1); border-radius: 4px; -webkit-transition: border-bottom-color .3s linear; transition: border-bottom-color .3s linear; @@ -977,7 +977,7 @@ exports[`Storyshots Components|Form/Textarea alignment 1`] = ` .emotion-0 { padding: 0 10px; color: #444; - background: transparent; + background: rgba(0,0,0,0.1); border-radius: 4px; -webkit-transition: border-bottom-color .3s linear; transition: border-bottom-color .3s linear; @@ -1002,7 +1002,7 @@ exports[`Storyshots Components|Form/Textarea alignment 1`] = ` .emotion-4 { padding: 0 10px; color: #444; - background: transparent; + background: rgba(0,0,0,0.1); border-radius: 4px; -webkit-transition: border-bottom-color .3s linear; transition: border-bottom-color .3s linear; @@ -1093,7 +1093,7 @@ exports[`Storyshots Components|Form/Textarea sizes 1`] = ` .emotion-8 { padding: 0 10px; color: #444; - background: transparent; + background: rgba(0,0,0,0.1); border-radius: 4px; -webkit-transition: border-bottom-color .3s linear; transition: border-bottom-color .3s linear; @@ -1118,7 +1118,7 @@ exports[`Storyshots Components|Form/Textarea sizes 1`] = ` .emotion-0 { padding: 0 10px; color: #444; - background: transparent; + background: rgba(0,0,0,0.1); border-radius: 4px; -webkit-transition: border-bottom-color .3s linear; transition: border-bottom-color .3s linear; @@ -1143,7 +1143,7 @@ exports[`Storyshots Components|Form/Textarea sizes 1`] = ` .emotion-4 { padding: 0 10px; color: #444; - background: transparent; + background: rgba(0,0,0,0.1); border-radius: 4px; -webkit-transition: border-bottom-color .3s linear; transition: border-bottom-color .3s linear; @@ -1233,7 +1233,7 @@ exports[`Storyshots Components|Form/Textarea validations 1`] = ` .emotion-12 { padding: 0 10px; color: #444; - background: transparent; + background: rgba(0,0,0,0.1); border-radius: 4px; -webkit-transition: border-bottom-color .3s linear; transition: border-bottom-color .3s linear; @@ -1258,7 +1258,7 @@ exports[`Storyshots Components|Form/Textarea validations 1`] = ` .emotion-0 { padding: 0 10px; color: #444; - background: transparent; + background: rgba(0,0,0,0.1); border-radius: 4px; -webkit-transition: border-bottom-color .3s linear; transition: border-bottom-color .3s linear; @@ -1284,7 +1284,7 @@ exports[`Storyshots Components|Form/Textarea validations 1`] = ` .emotion-4 { padding: 0 10px; color: #444; - background: transparent; + background: rgba(0,0,0,0.1); border-radius: 4px; -webkit-transition: border-bottom-color .3s linear; transition: border-bottom-color .3s linear; @@ -1310,7 +1310,7 @@ exports[`Storyshots Components|Form/Textarea validations 1`] = ` .emotion-8 { padding: 0 10px; color: #444; - background: transparent; + background: rgba(0,0,0,0.1); border-radius: 4px; -webkit-transition: border-bottom-color .3s linear; transition: border-bottom-color .3s linear; @@ -1397,7 +1397,7 @@ exports[`Storyshots Components|Form/Textarea with knobs (controlled) 1`] = ` .emotion-0 { padding: 0 10px; color: #444; - background: transparent; + background: rgba(0,0,0,0.1); border-radius: 4px; -webkit-transition: border-bottom-color .3s linear; transition: border-bottom-color .3s linear; diff --git a/lib/components/src/grid/__snapshots__/grid.stories.storyshot b/lib/components/src/grid/__snapshots__/grid.stories.storyshot new file mode 100644 index 00000000000..03c4a0c404e --- /dev/null +++ b/lib/components/src/grid/__snapshots__/grid.stories.storyshot @@ -0,0 +1,304 @@ +// 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 { + background: silver; + display: inline-block; + padding: 20px; +} + +.emotion-8 { + display: inline-block; + vertical-align: inherit; +} + +.emotion-8 > * { + margin-left: 10px; + vertical-align: inherit; +} + +.emotion-8 > *:first-of-type { + margin-left: 0; +} + +.emotion-2 { + background: hotpink; + 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 { + background: silver; + display: inline-block; + padding: 20px; +} + +.emotion-2 { + background: hotpink; + display: inline-block; + padding: 20px; +} + +.emotion-8 { + display: inline-block; + vertical-align: inherit; + margin-left: 10px; + margin-right: 10px; +} + +.emotion-8 > * { + margin-left: 10px; + vertical-align: inherit; +} + +.emotion-8 > *:first-of-type { + margin-left: 0; +} + +
+
+ +
+ + + +
+ +
+
+`; + +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; +} + +.emotion-8 > * { + margin-top: 10px; +} + +.emotion-8 > *:first-of-type { + margin-top: 0; +} + +.emotion-0 { + background: silver; + padding: 20px; +} + +.emotion-2 { + background: hotpink; + 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 { + background: silver; + padding: 20px; +} + +.emotion-2 { + background: hotpink; + padding: 20px; +} + +.emotion-8 { + margin-top: 5px; + margin-bottom: 5px; +} + +.emotion-8 > * { + margin-top: 30px; +} + +.emotion-8 > *:first-of-type { + margin-top: 0; +} + +
+
+
+
+
+
+
+
+
+
+
+`; + +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 { + background: silver; + padding: 20px; +} + +.emotion-2 { + background: hotpink; + padding: 20px; +} + +.emotion-8 { + margin-top: 10px; + margin-bottom: 10px; +} + +.emotion-8 > * { + margin-top: 10px; +} + +.emotion-8 > *:first-of-type { + margin-top: 0; +} + +
+
+
+
+
+
+
+
+
+
+
+`; diff --git a/lib/components/src/menu/__snapshots__/menu.stories.storyshot b/lib/components/src/menu/__snapshots__/menu.stories.storyshot index 97edb8d2060..cf76b6971c5 100644 --- a/lib/components/src/menu/__snapshots__/menu.stories.storyshot +++ b/lib/components/src/menu/__snapshots__/menu.stories.storyshot @@ -63,6 +63,33 @@ exports[`Storyshots Components|Menu multiple open 1`] = `
`; +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; +} + +
+ + + +
+`; + 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; diff --git a/lib/components/src/menu/menu.js b/lib/components/src/menu/menu.js index 1ac3aa5f1bf..602f94898f8 100644 --- a/lib/components/src/menu/menu.js +++ b/lib/components/src/menu/menu.js @@ -34,7 +34,7 @@ export const Icon = ({ type }) => { return {type}; }; Icon.propTypes = { - type: PropTypes.string, + type: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), }; Icon.defaultProps = { type: undefined, diff --git a/lib/components/src/menu/menu.stories.js b/lib/components/src/menu/menu.stories.js index 4e1ce740088..5299034f395 100644 --- a/lib/components/src/menu/menu.stories.js +++ b/lib/components/src/menu/menu.stories.js @@ -25,12 +25,6 @@ storiesOf('Components|Menu', module)
Hey! well hello there
)) - .add('initial open', () => ( - - -
Hey! well hello there
- - )) .add('with links', () => ( diff --git a/lib/components/src/preview/__snapshots__/preview.stories.storyshot b/lib/components/src/preview/__snapshots__/preview.stories.storyshot new file mode 100644 index 00000000000..812e13ff505 --- /dev/null +++ b/lib/components/src/preview/__snapshots__/preview.stories.storyshot @@ -0,0 +1,297 @@ +// 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 { + display: block; +} + +.emotion-8 { + fill: currentColor; +} + +.emotion-0 { + white-space: normal; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + overflow: hidden; + vertical-align: top; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + font-size: 11px; + -webkit-letter-spacing: 1px; + -moz-letter-spacing: 1px; + -ms-letter-spacing: 1px; + letter-spacing: 1px; + padding: 0 15px; + text-transform: uppercase; + -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear; + transition: color 0.2s linear,border-bottom-color 0.2s linear; + height: 40px; + line-height: 12px; + box-sizing: border-box; + cursor: pointer; + background: transparent; + border: 0 solid transparent; + border-top: 3px solid transparent; + border-bottom: 3px solid transparent; + color: #444; + border-bottom-color: rgba(0,0,0,0.1); +} + +.emotion-0:empty { + display: none; +} + +.emotion-0:focus { + outline: 0 none; + border-bottom-color: #9fdaff; +} + +.emotion-54 { + display: none; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + position: absolute; + top: 0; + right: 0; + left: 0; + height: 40px; + width: 100%; + box-sizing: border-box; + border-bottom: 1px solid rgba(0,0,0,0.1); + background: rgba(255,255,255,1); + color: #999999; + z-index: 4; + overflow: auto; +} + +.emotion-34 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; +} + +.emotion-34 > * { + margin-right: 15px; +} + +.emotion-4 { + overflow: visisble; + white-space: nowrap; + height: 100%; +} + +.emotion-2 { + color: inherit; + -webkit-text-decoration: inherit; + text-decoration: inherit; + display: inline-block; +} + +.emotion-6 { + width: 1px; + height: 24px; + background: #eee; + margin-top: 8px; +} + +.emotion-12 { + height: 40px; + background: none; + color: inherit; + padding: 0; + border: 0 solid transparent; + border-top: 3px solid transparent; + border-bottom: 3px solid transparent; +} + +.emotion-12:hover, +.emotion-12:focus { + outline: 0 none; + color: #00aaff; +} + +.emotion-52 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.emotion-52 > * { + margin-right: 15px; +} + +.emotion-56 { + 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/preview/preview.stories.js b/lib/components/src/preview/preview.stories.js index f5ce72ca586..69da8090488 100644 --- a/lib/components/src/preview/preview.stories.js +++ b/lib/components/src/preview/preview.stories.js @@ -3,4 +3,23 @@ import { storiesOf } from '@storybook/react'; import { Preview } from './preview'; -storiesOf('Components|Preview', module).add('default', () => ); +const props = { + id: 'string', + channel: { + on: () => {}, + emit: () => {}, + off: () => {}, + }, + componentId: 'string', + path: 'string', + viewMode: 'components', + location: {}, + getElements: () => [], + options: { + isFullscreen: false, + isToolshown: false, + }, + actions: {}, +}; + +storiesOf('Components|Preview', module).add('default', () => ); diff --git a/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot b/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot index c17cd50a3ab..0af1e9ce2e9 100644 --- a/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot +++ b/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot @@ -57,10 +57,6 @@ exports[`Storyshots Components|Tabs stateful - dynamic 1`] = ` border-bottom-color: #9fdaff; } -.emotion-18 { - display: block; -} - .emotion-14 { height: 40px; background: rgba(255,255,255,1); @@ -72,12 +68,6 @@ exports[`Storyshots Components|Tabs stateful - dynamic 1`] = ` color: rgba(0,0,0,0.4); } -.emotion-12 { - overflow: auto; - white-space: nowrap; - height: 100%; -} - .emotion-4 { white-space: normal; display: -webkit-inline-box; @@ -127,6 +117,16 @@ exports[`Storyshots Components|Tabs stateful - dynamic 1`] = ` border-bottom-color: #9fdaff; } +.emotion-18 { + display: block; +} + +.emotion-12 { + overflow: auto; + white-space: nowrap; + height: 100%; +} + .emotion-16 { display: block; position: relative; @@ -282,10 +282,6 @@ exports[`Storyshots Components|Tabs stateful - no initial 1`] = ` border-bottom-color: #9fdaff; } -.emotion-18 { - display: block; -} - .emotion-14 { height: 40px; background: rgba(255,255,255,1); @@ -297,12 +293,6 @@ exports[`Storyshots Components|Tabs stateful - no initial 1`] = ` color: rgba(0,0,0,0.4); } -.emotion-12 { - overflow: auto; - white-space: nowrap; - height: 100%; -} - .emotion-0 { white-space: normal; display: -webkit-inline-box; @@ -352,6 +342,16 @@ exports[`Storyshots Components|Tabs stateful - no initial 1`] = ` border-bottom-color: #9fdaff; } +.emotion-18 { + display: block; +} + +.emotion-12 { + overflow: auto; + white-space: nowrap; + height: 100%; +} + .emotion-16 { display: block; position: relative; @@ -507,10 +507,6 @@ exports[`Storyshots Components|Tabs stateful - static 1`] = ` border-bottom-color: #9fdaff; } -.emotion-10 { - display: block; -} - .emotion-6 { height: 40px; background: rgba(255,255,255,1); @@ -522,12 +518,6 @@ exports[`Storyshots Components|Tabs stateful - static 1`] = ` color: rgba(0,0,0,0.4); } -.emotion-4 { - overflow: auto; - white-space: nowrap; - height: 100%; -} - .emotion-2 { white-space: normal; display: -webkit-inline-box; @@ -577,6 +567,16 @@ exports[`Storyshots Components|Tabs stateful - static 1`] = ` border-bottom-color: #9fdaff; } +.emotion-10 { + display: block; +} + +.emotion-4 { + overflow: auto; + white-space: nowrap; + height: 100%; +} + .emotion-8 { display: block; position: relative; @@ -703,12 +703,6 @@ exports[`Storyshots Components|Tabs stateless - absolute 1`] = ` color: rgba(0,0,0,0.4); } -.emotion-12 { - overflow: auto; - white-space: nowrap; - height: 100%; -} - .emotion-4 { white-space: normal; display: -webkit-inline-box; @@ -758,6 +752,23 @@ exports[`Storyshots Components|Tabs stateless - absolute 1`] = ` border-bottom-color: #9fdaff; } +.emotion-16 { + display: block; + position: relative; + position: relative; + overflow: auto; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + width: 100%; +} + +.emotion-12 { + overflow: auto; + white-space: nowrap; + height: 100%; +} + .emotion-18 { background: rgba(255,255,255,0.89); background-clip: padding-box; @@ -775,17 +786,6 @@ exports[`Storyshots Components|Tabs stateless - absolute 1`] = ` flex-direction: column; } -.emotion-16 { - display: block; - position: relative; - position: relative; - overflow: auto; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - width: 100%; -} -
@@ -947,12 +947,6 @@ exports[`Storyshots Components|Tabs stateless - bordered 1`] = ` color: rgba(0,0,0,0.4); } -.emotion-12 { - overflow: auto; - white-space: nowrap; - height: 100%; -} - .emotion-4 { white-space: normal; display: -webkit-inline-box; @@ -1002,6 +996,12 @@ exports[`Storyshots Components|Tabs stateless - bordered 1`] = ` border-bottom-color: #9fdaff; } +.emotion-12 { + overflow: auto; + white-space: nowrap; + height: 100%; +} + .emotion-16 { display: block; position: relative; @@ -1257,6 +1257,12 @@ exports[`Storyshots Components|Tabs stateless - no scrolling 1`] = ` border-bottom-color: #9fdaff; } +.emotion-12 { + overflow: visisble; + white-space: nowrap; + height: 100%; +} + .emotion-16 { display: block; position: relative; @@ -1270,12 +1276,6 @@ exports[`Storyshots Components|Tabs stateless - no scrolling 1`] = ` display: block; } -.emotion-12 { - overflow: visisble; - white-space: nowrap; - height: 100%; -} -
@@ -1426,10 +1426,6 @@ exports[`Storyshots Components|Tabs stateless - with tools 1`] = ` border-bottom-color: #9fdaff; } -.emotion-20 { - display: block; -} - .emotion-16 { height: 40px; background: rgba(255,255,255,1); @@ -1441,12 +1437,6 @@ exports[`Storyshots Components|Tabs stateless - with tools 1`] = ` color: rgba(0,0,0,0.4); } -.emotion-12 { - overflow: auto; - white-space: nowrap; - height: 100%; -} - .emotion-4 { white-space: normal; display: -webkit-inline-box; @@ -1496,11 +1486,6 @@ exports[`Storyshots Components|Tabs stateless - with tools 1`] = ` border-bottom-color: #9fdaff; } -.emotion-18 { - display: block; - position: relative; -} - .emotion-14 { height: 100%; padding-right: 15px; @@ -1523,6 +1508,21 @@ exports[`Storyshots Components|Tabs stateless - with tools 1`] = ` margin-right: 0; } +.emotion-20 { + display: block; +} + +.emotion-12 { + overflow: auto; + white-space: nowrap; + height: 100%; +} + +.emotion-18 { + display: block; + position: relative; +} +
diff --git a/lib/components/src/treeview/__snapshots__/treeview.stories.storyshot b/lib/components/src/treeview/__snapshots__/treeview.stories.storyshot index ad1f057b6a8..cdbf59113d6 100644 --- a/lib/components/src/treeview/__snapshots__/treeview.stories.storyshot +++ b/lib/components/src/treeview/__snapshots__/treeview.stories.storyshot @@ -1,5 +1,823 @@ // 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 { + 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-0:focus { + outline: 0; + border-bottom: 1px solid #9fdaff; +} + +.emotion-61 { + margin-left: -20px; + margin-right: -20px; +} + +.emotion-14 { + 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-12 { + 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-5 { + 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); + -webkit-transform: rotateZ(90deg); + -ms-transform: rotateZ(90deg); + transform: rotateZ(90deg); +} + +.emotion-10 { + display: block; + display: inline-block; + width: 10px; + height: 10px; + margin-right: 10px; + color: #774dd7; +} + +.emotion-21 { + 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: 30px; + background: transparent; +} + +.emotion-19 { + display: block; + display: inline-block; + width: 10px; + height: 10px; + margin-right: 10px; + color: #37d5d3; +} + +.emotion-28 { + 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); +} + +
+ +
+
+ +
+ + + + + + + + Parent A + +
+ +
+ +
+ + + + Child A1 +
+ +
+ +
+ + + + + + + + Child A2 + +
+ +
+
+
+
+ +
+ + + + + + + + Parent B + +
+ +
+
+
+`; + +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; +} + +.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-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); + -webkit-transform: rotateZ(90deg); + -ms-transform: rotateZ(90deg); + transform: rotateZ(90deg); +} + +.emotion-8 { + display: block; + display: inline-block; + width: 10px; + height: 10px; + margin-right: 10px; + color: #774dd7; +} + +.emotion-19 { + 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: 30px; + background: transparent; +} + +.emotion-17 { + display: block; + display: inline-block; + width: 10px; + height: 10px; + margin-right: 10px; + color: #37d5d3; +} + +.emotion-26 { + 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); +} + +
+
+ +
+ + + + + + + + Parent A + +
+ +
+ +
+ + + + Child A1 +
+ +
+ +
+ + + + + + + + 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 { + 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-0:focus { + outline: 0; + border-bottom: 1px solid #9fdaff; +} + +.emotion-62 { + margin-left: -20px; + margin-right: -20px; +} + +.emotion-14 { + 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-12 { + 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-5 { + 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); + -webkit-transform: rotateZ(90deg); + -ms-transform: rotateZ(90deg); + transform: rotateZ(90deg); +} + +.emotion-10 { + display: block; + display: inline-block; + width: 10px; + height: 10px; + margin-right: 10px; + color: #774dd7; +} + +.emotion-36 { + 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: 30px; + background: transparent; +} + +.emotion-19 { + display: block; + display: inline-block; + width: 10px; + height: 10px; + margin-right: 10px; + color: #37d5d3; +} + +.emotion-29 { + 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); +} + +.emotion-22 { + 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: 30px; + background: transparent; + background: deepskyblue; +} + +
+ +
+
+ +
+ + + + + + + + Parent A + +
+ +
+ +
+ + + + Child A1 +
+ +
+ +
+ + + + + + + + Child A2 + +
+ +
+
+
+
+ +
+ + + + + + + + Parent B + +
+ +
+
+
+`; + 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; @@ -12,11 +830,358 @@ exports[`Storyshots Components|Treeview with ensured (WIP) 1`] = ` fill: currentColor; } +.emotion-2 { + 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-2 > 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-0:focus { + outline: 0; + border-bottom: 1px solid #9fdaff; +} + .emotion-23 { margin-left: -20px; margin-right: -20px; } +.emotion-19 { + 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-17 { + 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-15 { + display: block; + display: inline-block; + width: 10px; + height: 10px; + margin-right: 10px; + color: #774dd7; +} + +.emotion-10 { + 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); +} + +.emotion-5 { + margin-top: 20px; + margin-bottom: 10px; +} + +
+ +
+

+ + Root 1 + +

+
+
+
+ +
+ + + + + + + + Child A2 + +
+ +
+
+
+

+ + Root 3 + +

+
+
+
+ +
+ + + + + + + + Child A2 + +
+ +
+
+
+

+ + Others + +

+
+
+
+ +
+ + + + + + + + Group 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; + color: #444; + -webkit-font-smoothing: antialiased; + font-size: 13px; +} + +.emotion-7 { + fill: currentColor; +} + +.emotion-2 { + 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-2 > 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-0:focus { + outline: 0; + border-bottom: 1px solid #9fdaff; +} + +.emotion-23 { + margin-left: -20px; + margin-right: -20px; +} + +.emotion-19 { + 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-17 { min-height: 24px; display: -webkit-box; @@ -43,23 +1208,6 @@ exports[`Storyshots Components|Treeview with ensured (WIP) 1`] = ` color: #774dd7; } -.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-0:focus { - outline: 0; - border-bottom: 1px solid #9fdaff; -} - .emotion-10 { display: block; display: inline-block; @@ -74,50 +1222,11 @@ exports[`Storyshots Components|Treeview with ensured (WIP) 1`] = ` color: rgba(0,0,0,0.4); } -.emotion-2 { - 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-2 > sub { - display: block; - padding-top: 5px; - line-height: 1.2em; - font-size: 14px; -} - .emotion-5 { margin-top: 20px; margin-bottom: 10px; } -.emotion-19 { - 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; -} -
diff --git a/lib/components/src/treeview/components.js b/lib/components/src/treeview/components.js index c0eeb2fabf8..874fd02c735 100644 --- a/lib/components/src/treeview/components.js +++ b/lib/components/src/treeview/components.js @@ -160,7 +160,7 @@ export const DefaultRootTitle = styled(({ children, ...rest }) => ( {children} ))({ marginTop: 20, marginBottom: 10 }); -export const Link = ({ href, children, path, ...rest }) => ( +export const Link = ({ href, children, ...rest }) => ( {children} @@ -169,5 +169,4 @@ Link.displayName = 'Link'; Link.propTypes = { href: PropTypes.string.isRequired, children: PropTypes.node.isRequired, - path: PropTypes.string.isRequired, }; diff --git a/lib/components/src/treeview/treeview.js b/lib/components/src/treeview/treeview.js index 8afe064f2d2..cdac6f3e60a 100644 --- a/lib/components/src/treeview/treeview.js +++ b/lib/components/src/treeview/treeview.js @@ -305,6 +305,7 @@ class TreeState extends PureComponent { {children.map(key => ( ( ( {}, onKeyUp: () => {} }} /> )) .add('with custom node', () => ( ( ( Date: Fri, 21 Dec 2018 12:16:10 +0100 Subject: [PATCH 033/120] FIX tests --- .../__snapshots__/index.stories.storyshot | 600 ++++++++++++++++++ .../src/stories/index.stories.js | 17 +- .../syntaxhighlighter/syntaxhighlighter.js | 2 +- 3 files changed, 605 insertions(+), 14 deletions(-) diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot index 75458df7908..b456131ed13 100644 --- a/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot +++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot @@ -1,5 +1,605 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Storyshots Button with new info 1`] = ` +.emotion-12 { + 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; +} + +.emotion-10 { + position: absolute; + bottom: 0; + right: 0; + max-width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + list-style: none; + margin: 0; + padding: 0; + border-radius: undefinedpx 0 0 0; +} + +.emotion-8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; + list-style: none; + padding: 0; + height: 26px; + font-size: 11px; + -webkit-letter-spacing: 1px; + -moz-letter-spacing: 1px; + -ms-letter-spacing: 1px; + letter-spacing: 1px; + text-transform: uppercase; + border-left: 0 none; +} + +.emotion-6 { + border: 0 none; + display: block; + background: none; + padding: 0 10px; + cursor: pointer; + text-transform: inherit; + -webkit-letter-spacing: inherit; + -moz-letter-spacing: inherit; + -ms-letter-spacing: inherit; + letter-spacing: inherit; + font-size: inherit; + color: inherit; + border-top: 2px solid transparent; + border-bottom: 2px solid transparent; +} + +.emotion-6:focus { + border-bottom: 2px solid undefined; + outline: 0 none; +} + +.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; +} + +
+
+
+ + click the + + Show Info + + label in top right for info about "with new info" + +
+
+ + +
+`; + exports[`Storyshots Button with notes 1`] = ` - - - - - - - + + </ + + div + + + > + + + + + + + + + +
+ + + +
    + +
  • + + + +
    • +     +
+ + +
+ +

and external markdown 1`] = `
-

and external markdown 1`] = ` " TestComponent " Component -

+

and external markdown 1`] = ` `; exports[`addon Info should render and markdown 1`] = ` +.emotion-12 { + 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: 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; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + margin: 0; + padding: 0; } .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); + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + padding-right: 0; + opacity: 1; +} + +.emotion-10 { + position: absolute; + bottom: 0; + right: 0; + max-width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + list-style: none; + margin: 0; + padding: 0; + border-radius: undefinedpx 0 0 0; +} + +.emotion-8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; + list-style: none; + padding: 0; + height: 26px; + font-size: 11px; + -webkit-letter-spacing: 1px; + -moz-letter-spacing: 1px; + -ms-letter-spacing: 1px; + letter-spacing: 1px; + text-transform: uppercase; + border-left: 0 none; +} + +.emotion-6 { + border: 0 none; + display: block; + background: none; + padding: 0 10px; + cursor: pointer; + text-transform: inherit; + -webkit-letter-spacing: inherit; + -moz-letter-spacing: inherit; + -ms-letter-spacing: inherit; + letter-spacing: inherit; + font-size: inherit; + color: inherit; + border-top: 2px solid transparent; + border-bottom: 2px solid transparent; +} + +.emotion-6:focus { + border-bottom: 2px solid undefined; + outline: 0 none; } @@ -1455,747 +1324,503 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)" > Story Source - 
-                
-                  
-                    
-                      

-                        
-                              It's a 
-                               story:
-                              
-                            

-                          }
-                        >
-                          

-                            

+                  

+                    
+                      

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

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

-                            
-                              

-                                
+                                
-                                  It's a 
-                                
-                              

-                            
-                            
-                              

-                                
-                              

-                            
-                            
-                              

-                                
-                                   story:
-                                
-                              

-                            
-                            
-                              }
-                            >
-                              

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

-                                          
-                                      
                                       
-                                        func
-                                      
-                                      
-                                        =
-                                        
-                                          {
-                                          
-                                            >>>>>> next
-                                                }
-                                              >
-                                                
-                                                  'b'
-                                                
-                                              
-                                              }
-                                            
-                                          
-                                        
-                                        }
+                                        <
                                       
+                                      div
+                                    
+                                    
+                                      >
                                     
                                   
                                   
-                                    
-                                      

-                                        
+                                    
+  It's a  story:
+  
+                                  
+                                  
+                                    
+                                      
+                                        <
+                                      
+                                      TestComponent
+                                    
+                                    
+    
+                                    
+                                      func
                                     
                                     
+                                      
+                                        =
+                                      
+                                      
+                                        {
+                                      
+                                      
+                                        function
+                                      
+                                       
+                                      
+                                        noRefCheck
+                                      
+                                      
+                                        (
+                                      
+                                      
+                                        )
+                                      
+                                       
+                                      
+                                        {
+                                      
+                                      
+                                        }
+                                      
+                                      
+                                        }
+                                      
+                                    
+                                    
+    
+                                    
+                                      obj
+                                    
+                                    
+                                      
+                                        =
+                                      
+                                      
+                                        {
+                                      
+                                      
+                                        {
+                                      
+                                      
+      a
+                                      
+                                        :
+                                      
+                                       
+                                      
+                                        'a'
+                                      
+                                      
+                                        ,
+                                      
+                                      
+      b
+                                      
+                                        :
+                                      
+                                       
+                                      
+                                        'b'
+                                      
+                                      
+    
+                                      
+                                        }
+                                      
+                                      
+                                        }
+                                      
+                                    
+                                    
+    
+                                    
                                       array
                                     
-                                    
-                                      =
+                                    
                                       
+                                        =
+                                      
+                                      
                                         {
-                                        
-                                          
-                                            
-                                              [
-                                              
-                                                
-                                                  
-                                                    1
-                                                  
-                                                
-                                              
-                                              ,
-                                              
-                                                
-                                                  
-                                                    2
-                                                  
-                                                
-                                              
-                                              ,
-                                              
-                                                
-                                                  
-                                                    3
-                                                  
-                                                
-                                              
-                                              ]
-                                            
-                                          
-                                        
+                                      
+                                      
+                                        [
+                                      
+                                      
+      
+                                      
+                                        1
+                                      
+                                      
+                                        ,
+                                      
+                                      
+      
+                                      
+                                        2
+                                      
+                                      
+                                        ,
+                                      
+                                      
+      
+                                      
+                                        3
+                                      
+                                      
+    
+                                      
+                                        ]
+                                      
+                                      
                                         }
                                       
                                     
-                                  
-                                  
-                                    
-                                      

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

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

-                                        
-                                    
+                                    
+    
                                     
                                       bool
                                     
-                                    

+                                    
+  
+                                    
+                                      />
+                                    
                                   
-                                
-                              
-                              
-                                />
-                              
-                            

-                          
-                          

-                            
-                              </
-                              div
-                              >
-                            
-                          

-                        

-                      
-                    

-                    
-                      
-                        

+
+ +
+ + + +
    - -
    -
    - Copied! -
    -
    - Copy -
    -
    -     - - - - - - + + + + +
+ + +
+ +

-

+

`; -exports[`addon Info should render and markdown 1`] = ` +exports[`addon Info should render component description 1`] = ` +.emotion-12 { + 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: 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; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + margin: 0; + padding: 0; } .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); + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + padding-right: 0; + opacity: 1; } - +.emotion-10 { + position: absolute; + bottom: 0; + right: 0; + max-width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + list-style: none; + margin: 0; + padding: 0; + border-radius: undefinedpx 0 0 0; +} + +.emotion-8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; + list-style: none; + padding: 0; + height: 26px; + font-size: 11px; + -webkit-letter-spacing: 1px; + -moz-letter-spacing: 1px; + -ms-letter-spacing: 1px; + letter-spacing: 1px; + text-transform: uppercase; + border-left: 0 none; +} + +.emotion-6 { + border: 0 none; + display: block; + background: none; + padding: 0 10px; + cursor: pointer; + text-transform: inherit; + -webkit-letter-spacing: inherit; + -moz-letter-spacing: inherit; + -ms-letter-spacing: inherit; + letter-spacing: inherit; + font-size: inherit; + color: inherit; + border-top: 2px solid transparent; + border-bottom: 2px solid transparent; +} + +.emotion-6:focus { + border-bottom: 2px solid undefined; + outline: 0 none; +} + + and markdown 1`] = ` "ul": [Function], } } - context={Object {}} + context={ + Object { + "kind": "TestComponent", + "story": "Basic test", + } + } excludedPropTypes={Array []} - info="# Test story -## with markdown info -containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)" + info="" maxPropArrayLength={3} maxPropObjectKeys={3} maxPropStringLength={50} maxPropsIntoLine={3} - propTables={Array []} + propTables={null} propTablesExclude={Array []} showHeader={true} - showInline={false} + showInline={true} showSource={true} styles={[Function]} >
-
+
+
+

+ TestComponent +

+

+

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

+ > + Awesome test component description +

+ +

-

-
+ with markdown support + + +

+

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

+
+
+

-

-

- Test story -

- -

-

- with markdown info -

- -

+ Story Source + + +

- containing - - bold - - , - - cursive - - text, - - code - - and - - + -

-
-
-

- Story Source -

- 
-                
-                  
-                    

-                      
-                            It's a 
-                             story:
-                            
-                          

-                        }
-                      >
-                        

-                          

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

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

-                          
-                            

-                              
+                              
-                                It's a 
-                              
-                            

-                          
-                          
-                            

-                              
-                            

-                          
-                          
-                            

-                              
-                                 story:
-                              
-                            

-                          
-                          
-                            }
-                          >
-                            

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

-                                        
-                                    
                                     
-                                      func
-                                    
-                                    
-                                      =
-                                      
-                                        {
-                                        
-                                          
-                                            func
-                                          
-                                        
-                                        }
-                                      
+                                      <
                                     
+                                    div
                                   
                                   
-                                    
-                                      

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

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

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

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

-                                        
-                                    
-                                    
-                                      bool
-                                    
-                                    

+                                    >
                                   
                                 
-                              
-                              
-                                />
-                              
-                            

-                          
-                          

-                            
-                              </
-                              div
-                              >
-                            
-                          

-
- + + + It's a Basic test story: + + + + + + < + + TestComponent + + + + + func + + + + = + + + { + + + function + + + + noRefCheck + + + ( + + + ) + + + + { + + + } + + + } + + + + + + obj + + + + = + + + { + + + { + + + a + + : + + + + 'a' + + + , + + + b + + : + + + + 'b' + + + + + } + + + } + + + + + + array + + + + = + + + { + + + [ + + + + + 1 + + + , + + + + + 2 + + + , + + + + + 3 + + + + + ] + + + } + + + + + + number + + + + = + + + { + + + 7 + + + } + + + + + + string + + + + = + + + " + + seven + + " + + + + + + bool + + + + + /> + + + + + + + + + + </ + + div + + + > + + + + + + + + +
- - + + +
    - - - - - - -
-
-

- Prop Types -

-
-

- " - TestComponent - " Component -

- - - - No propTypes defined! - - - -
-
+ copy + + + + + + + +
+ +
- + `; - -exports[`addon Info should render component description 1`] = `null`; From 18c6333f4b46f8a3a56afdc660baa0fd7ce6c26c Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 21 Dec 2018 13:33:45 +0100 Subject: [PATCH 036/120] FIX tests --- .../knobs/src/components/__tests__/Panel.js | 35 +++++++++++++------ 1 file changed, 25 insertions(+), 10 deletions(-) diff --git a/addons/knobs/src/components/__tests__/Panel.js b/addons/knobs/src/components/__tests__/Panel.js index 4ee505c72c5..b67adc4e23d 100644 --- a/addons/knobs/src/components/__tests__/Panel.js +++ b/addons/knobs/src/components/__tests__/Panel.js @@ -1,23 +1,33 @@ import React from 'react'; import { shallow } from 'enzyme'; +import { STORY_CHANGED } from '@storybook/core-events'; import Panel from '../Panel'; import { CHANGE, SET } from '../../shared'; +const createTestChannel = () => ({ + on: jest.fn(), + emit: jest.fn(), +}); +const createTestApi = () => ({ + on: jest.fn(), + emit: jest.fn(), +}); + describe('Panel', () => { it('should subscribe to setKnobs event of channel', () => { - const testChannel = { on: jest.fn() }; - const testApi = { onStory: jest.fn() }; + const testChannel = createTestChannel(); + const testApi = createTestApi(); shallow(); - expect(testChannel.on).toHaveBeenCalledWith(SET, jasmine.any(Function)); + expect(testChannel.on).toHaveBeenCalledWith(SET, expect.any(Function)); }); - it('should subscribe to onStory event', () => { - const testChannel = { on: jest.fn() }; - const testApi = { onStory: jest.fn() }; + it('should subscribe to STORY_CHANGE event', () => { + const testChannel = createTestChannel(); + const testApi = createTestApi(); shallow(); - expect(testApi.onStory).toHaveBeenCalled(); - expect(testChannel.on).toHaveBeenCalledWith(SET, jasmine.any(Function)); + expect(testApi.on.mock.calls).toContainEqual([STORY_CHANGED, expect.any(Function)]); + expect(testChannel.on).toHaveBeenCalledWith(SET, expect.any(Function)); }); describe('setKnobs handler', () => { @@ -37,6 +47,9 @@ describe('Panel', () => { }; const testApi = { + on: (e, handler) => { + handlers[e] = handler; + }, getQueryParam: key => testQueryParams[key], setQueryParams: jest.fn(), onStory: jest.fn(), @@ -84,9 +97,11 @@ describe('Panel', () => { }; const testApi = { + on: (e, handler) => { + handlers[e] = handler; + }, getQueryParam: key => testQueryParams[key], setQueryParams: jest.fn(), - onStory: jest.fn(), }; const wrapper = shallow(); @@ -128,7 +143,7 @@ describe('Panel', () => { const testApi = { getQueryParam: jest.fn(), setQueryParams: jest.fn(), - onStory: jest.fn(), + on: jest.fn(), }; const wrapper = shallow(); From 337cc2b639680ad117d084d6e69e46474dd4d8b5 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 21 Dec 2018 14:17:39 +0100 Subject: [PATCH 037/120] FIX tests --- addons/links/src/preview.test.js | 30 ++++++++++++------- .../__snapshots__/link.test.js.snap | 2 +- .../links/src/react/components/link.test.js | 13 ++++---- 3 files changed, 28 insertions(+), 17 deletions(-) diff --git a/addons/links/src/preview.test.js b/addons/links/src/preview.test.js index 7e7bf4abc0f..357fe203390 100644 --- a/addons/links/src/preview.test.js +++ b/addons/links/src/preview.test.js @@ -1,4 +1,5 @@ import addons from '@storybook/addons'; +import { SELECT_STORY } from '@storybook/core-events'; import { linkTo, hrefTo } from './preview'; import EVENTS from './constants'; @@ -9,7 +10,11 @@ export const mockChannel = () => { return { emit(id, payload) { if (id === EVENTS.REQUEST) { - cb(`?selectedKind=${payload.kind}&selectedStory=${payload.story}`); + cb( + Object.values(payload) + .map(item => item.toString().toLowerCase()) + .join('-') + ); } }, on(id, callback) { @@ -31,12 +36,12 @@ describe('preview', () => { const channel = { emit: jest.fn() }; addons.getChannel.mockReturnValue(channel); - const handler = linkTo('kind', 'story'); + const handler = linkTo('kind', 'name'); handler(); - expect(channel.emit).toHaveBeenCalledWith(EVENTS.NAVIGATE, { + expect(channel.emit).toHaveBeenCalledWith(SELECT_STORY, { kind: 'kind', - story: 'story', + story: 'name', }); }); @@ -45,12 +50,15 @@ describe('preview', () => { addons.getChannel.mockReturnValue(channel); const handler = linkTo((a, b) => a + b, (a, b) => b + a); - handler('foo', 'bar'); + handler('kind', 'name'); - expect(channel.emit).toHaveBeenCalledWith(EVENTS.NAVIGATE, { - kind: 'foobar', - story: 'barfoo', - }); + expect(channel.emit.mock.calls).toContainEqual([ + SELECT_STORY, + { + kind: 'kindname', + story: 'namekind', + }, + ]); }); }); @@ -59,8 +67,8 @@ describe('preview', () => { const channel = mockChannel(); addons.getChannel.mockReturnValue(channel); - const href = await hrefTo('kind', 'story'); - expect(href).toBe('?selectedKind=kind&selectedStory=story'); + const href = await hrefTo('kind', 'name'); + expect(href).toContain('?id=kind-name'); }); }); }); diff --git a/addons/links/src/react/components/__snapshots__/link.test.js.snap b/addons/links/src/react/components/__snapshots__/link.test.js.snap index b53a6294a91..4af2de94da1 100644 --- a/addons/links/src/react/components/__snapshots__/link.test.js.snap +++ b/addons/links/src/react/components/__snapshots__/link.test.js.snap @@ -2,7 +2,7 @@ exports[`LinkTo render should render a link 1`] = ` `; diff --git a/addons/links/src/react/components/link.test.js b/addons/links/src/react/components/link.test.js index c22bc9e3d5b..63d5394d14c 100644 --- a/addons/links/src/react/components/link.test.js +++ b/addons/links/src/react/components/link.test.js @@ -2,7 +2,7 @@ import { shallow } from 'enzyme'; import React from 'react'; import addons from '@storybook/addons'; -import EVENTS from '../../constants'; +import { SELECT_STORY } from '@storybook/core-events'; import { mockChannel } from '../../preview.test'; import LinkTo from './link'; @@ -31,10 +31,13 @@ describe('LinkTo', () => { const wrapper = shallow(); wrapper.simulate('click'); - expect(channel.emit).toHaveBeenCalledWith(EVENTS.NAVIGATE, { - kind: 'foo', - story: 'bar', - }); + expect(channel.emit.mock.calls).toContainEqual([ + SELECT_STORY, + { + kind: 'foo', + story: 'bar', + }, + ]); }); }); }); From 3aa88f9d946badf69c78cabf57cfa10aecabd2de Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 21 Dec 2018 14:29:18 +0100 Subject: [PATCH 038/120] FIX tests --- lib/channel-postmessage/src/index.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/lib/channel-postmessage/src/index.js b/lib/channel-postmessage/src/index.js index 3586d943bf4..11890d2508b 100644 --- a/lib/channel-postmessage/src/index.js +++ b/lib/channel-postmessage/src/index.js @@ -16,8 +16,14 @@ export class PostmsgTransport { this._buffer = []; this._handler = null; - window.addEventListener('message', this._handleEvent.bind(this), false); - document.addEventListener('DOMContentLoaded', () => this._flush()); + if (window && window.addEventListener) { + window.addEventListener('message', this._handleEvent.bind(this), false); + } + if (document && document.addEventListener) { + document.addEventListener('DOMContentLoaded', () => this._flush()); + } else { + this._flush(); + } // Check whether the config.page parameter has a valid value if (config.page !== 'manager' && config.page !== 'preview') { From 2afab936fa227d3116f6afe0b261385e702ed74f Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 21 Dec 2018 15:32:16 +0100 Subject: [PATCH 039/120] FIX tests --- .../src/preview/__tests__/action.test.js | 151 +++++++++--------- lib/ui/src/libs/nav/nav.js | 0 lib/ui/src/libs/nav/nav.test.js | 148 ----------------- 3 files changed, 78 insertions(+), 221 deletions(-) delete mode 100644 lib/ui/src/libs/nav/nav.js delete mode 100644 lib/ui/src/libs/nav/nav.test.js diff --git a/addons/actions/src/preview/__tests__/action.test.js b/addons/actions/src/preview/__tests__/action.test.js index 8f221c61e77..1162015f4cb 100644 --- a/addons/actions/src/preview/__tests__/action.test.js +++ b/addons/actions/src/preview/__tests__/action.test.js @@ -1,90 +1,95 @@ import addons from '@storybook/addons'; -import { action, configureActions } from '../..'; +import { action } from '../..'; +// import { configureActions } from '../..'; jest.mock('@storybook/addons'); -const getChannelData = channel => - channel.emit.mock.calls[channel.emit.mock.calls.length - 1][1].data; - -describe('Action', () => { +const createChannel = () => { const channel = { emit: jest.fn() }; addons.getChannel.mockReturnValue(channel); + return channel; +}; +const getChannelData = channel => channel.emit.mock.calls[0][1].data.args; +describe('Action', () => { it('with one argument', () => { + const channel = createChannel(); + action('test-action')('one'); - expect(getChannelData(channel).args[0]).toEqual('"one"'); + expect(getChannelData(channel)[0]).toEqual('one'); }); it('with multiple arguments', () => { + const channel = createChannel(); + action('test-action')('one', 'two', 'three'); - expect(getChannelData(channel).args).toEqual(['"one"', '"two"', '"three"']); - }); - - it('with global depth configuration', () => { - const depth = 1; - - configureActions({ - depth, - }); - - action('test-action')({ - root: { - one: { - two: 'foo', - }, - }, - }); - - expect(getChannelData(channel).args[0]).toEqual( - JSON.stringify({ - '$___storybook.objectName': 'Object', - root: { - '$___storybook.objectName': 'Object', - one: { - '$___storybook.objectName': 'Object', - }, - }, - }) - ); - }); - - it('per action depth option overrides global config', () => { - configureActions({ - depth: 1, - }); - - action('test-action', { depth: 3 })({ - root: { - one: { - two: { - three: { - four: { - five: 'foo', - }, - }, - }, - }, - }, - }); - - expect(getChannelData(channel).args[0]).toEqual( - JSON.stringify({ - '$___storybook.objectName': 'Object', - root: { - '$___storybook.objectName': 'Object', - one: { - '$___storybook.objectName': 'Object', - two: { - '$___storybook.objectName': 'Object', - three: { - '$___storybook.objectName': 'Object', - }, - }, - }, - }, - }) - ); + expect(getChannelData(channel)).toEqual(['one', 'two', 'three']); }); }); + +// TODO: This functionality is removed, unsure if to add back or remove +// describe('Depth config', () => { +// it('with global depth configuration', () => { +// const channel = createChannel(); + +// const depth = 1; + +// configureActions({ +// depth, +// }); + +// action('test-action')({ +// root: { +// one: { +// two: 'foo', +// }, +// }, +// }); + +// expect(getChannelData(channel)[0]).toEqual({ +// root: { +// one: { +// two: 'foo', +// }, +// }, +// }); +// }); + +// it('per action depth option overrides global config', () => { +// const channel = createChannel(); + +// configureActions({ +// depth: 1, +// }); + +// action('test-action', { depth: 3 })({ +// root: { +// one: { +// two: { +// three: { +// four: { +// five: 'foo', +// }, +// }, +// }, +// }, +// }, +// }); + +// expect(getChannelData(channel)[0]).toEqual({ +// root: { +// one: { +// two: { +// three: { +// four: { +// five: 'foo', +// }, +// }, +// }, +// }, +// }, +// }); +// }); +// }); diff --git a/lib/ui/src/libs/nav/nav.js b/lib/ui/src/libs/nav/nav.js deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/lib/ui/src/libs/nav/nav.test.js b/lib/ui/src/libs/nav/nav.test.js deleted file mode 100644 index 91ab27c8aef..00000000000 --- a/lib/ui/src/libs/nav/nav.test.js +++ /dev/null @@ -1,148 +0,0 @@ -import * as utils from './nav'; - -const sample = [ - { - kind: 'UI|SearchBox', - stories: ['default', 'with stories'], - }, - { - kind: 'UI|stories/TextFilter', - stories: ['without filterText', 'with filterText'], - }, - { - kind: 'Components|Form/Select', - stories: ['sizes', 'validations'], - }, - { - kind: 'Components|Form/Button', - stories: ['with knobs', 'sizes', 'validations', 'alignment'], - }, - { - kind: 'Components|Form/Textarea', - stories: ['with knobs (controlled)', 'sizes', 'validations', 'alignment'], - }, -]; - -const rootSeparator = '\\|'; -const groupSeparator = '\\/|\\.'; - -describe('toNested', () => { - test('transforms input correctly', () => { - const result = utils.toNested(sample, { rootSeparator, groupSeparator }); - - expect(result).toMatchInlineSnapshot(` -Array [ - Object { - "children": Array [ - Object { - "children": Array [ - Object { - "id": "default", - "name": "default", - }, - Object { - "id": "withStories", - "name": "with stories", - }, - ], - "id": "searchBox", - "name": "SearchBox", - }, - Object { - "children": Array [ - Object { - "children": Array [ - Object { - "id": "withoutFiltertext", - "name": "without filterText", - }, - Object { - "id": "withFiltertext", - "name": "with filterText", - }, - ], - "id": "textFilter", - "name": "TextFilter", - }, - ], - "id": "stories", - "name": "stories", - }, - ], - "id": "ui", - "name": "UI", - }, - Object { - "children": Array [ - Object { - "children": Array [ - Object { - "children": Array [ - Object { - "id": "sizes", - "name": "sizes", - }, - Object { - "id": "validations", - "name": "validations", - }, - ], - "id": "select", - "name": "Select", - }, - Object { - "children": Array [ - Object { - "id": "withKnobs", - "name": "with knobs", - }, - Object { - "id": "sizes", - "name": "sizes", - }, - Object { - "id": "validations", - "name": "validations", - }, - Object { - "id": "alignment", - "name": "alignment", - }, - ], - "id": "button", - "name": "Button", - }, - Object { - "children": Array [ - Object { - "id": "withKnobsControlled", - "name": "with knobs (controlled)", - }, - Object { - "id": "sizes", - "name": "sizes", - }, - Object { - "id": "validations", - "name": "validations", - }, - Object { - "id": "alignment", - "name": "alignment", - }, - ], - "id": "textarea", - "name": "Textarea", - }, - ], - "id": "form", - "name": "Form", - }, - ], - "id": "components", - "name": "Components", - }, -] -`); - }); -}); From f55a605d8b6f5519ecd12a7c44f63390d20c2519 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 21 Dec 2018 15:35:36 +0100 Subject: [PATCH 040/120] REMOVE tests, as it's no longer implemented here, instead in channel --- .../src/preview/__tests__/preview.test.js | 111 ------------------ 1 file changed, 111 deletions(-) delete mode 100644 addons/actions/src/preview/__tests__/preview.test.js diff --git a/addons/actions/src/preview/__tests__/preview.test.js b/addons/actions/src/preview/__tests__/preview.test.js deleted file mode 100644 index 0dfac009e8e..00000000000 --- a/addons/actions/src/preview/__tests__/preview.test.js +++ /dev/null @@ -1,111 +0,0 @@ -import addons from '@storybook/addons'; -import uuid from 'uuid/v1'; -import { action } from '..'; - -jest.mock('uuid/v1'); -jest.mock('@storybook/addons'); - -describe('preview', () => { - describe('action()', () => { - it('should use a uuid for action ids', () => { - const channel = { emit: jest.fn() }; - const uuidGenerator = (function* uuidGenerator() { - yield '42'; - yield '24'; - })(); - uuid.mockImplementation(() => uuidGenerator.next().value); - addons.getChannel.mockReturnValue(channel); - const fn = action('foo'); - - fn(); - fn(); - expect(channel.emit).toHaveBeenCalledTimes(2); - expect(channel.emit.mock.calls[0][1].id).toBe('42'); - expect(channel.emit.mock.calls[1][1].id).toBe('24'); - }); - it('should be able to handle cyclic object without hanging', () => { - const cyclicObject = { - propertyA: { - innerPropertyA: {}, - }, - propertyB: 'b', - }; - cyclicObject.propertyA.innerPropertyA = cyclicObject; - - expect(() => JSON.stringify(cyclicObject)).toThrow(); - expect(() => action('foo')(cyclicObject)).not.toThrow(); - }); - - it('should be able to handle non plain object', () => { - function A(val) { - this.a = val; - } - - const a = new A('b'); - - const channel = { emit: jest.fn() }; - addons.getChannel.mockReturnValue(channel); - - action('foo')(a); - - expect(JSON.parse(channel.emit.mock.calls[0][1].data.args[0])).toEqual({ - '$___storybook.objectName': 'A', - a: 'b', - }); - }); - - it('should be able to handle non plain cyclic object', () => { - function A() {} - const a = new A(); - a.a = a; - - const channel = { emit: jest.fn() }; - addons.getChannel.mockReturnValue(channel); - - action('foo')(a); - - expect(JSON.parse(channel.emit.mock.calls[0][1].data.args[0])).toEqual({ - '$___storybook.objectName': 'A', - '$___storybook.isCyclic': true, - a: { - $ref: '$', - }, - }); - }); - - describe('should be able to emit primitive value type:', () => { - [true, false, null, 10, 'a'].forEach(value => { - it(`${typeof value} value ${JSON.stringify(value)}`, () => { - const channel = { emit: jest.fn() }; - addons.getChannel.mockReturnValue(channel); - - action('foo')(value); - - expect(JSON.parse(channel.emit.mock.calls[0][1].data.args[0])).toBe(value); - }); - }); - - // it('undefined value', () => { - // const channel = { emit: jest.fn() }; - // addons.getChannel.mockReturnValue(channel); - - // action('foo')(undefined); - - // expect(JSON.parse(channel.emit.mock.calls[0][1].data.args[0])).toEqual({ - // [undefinedType.KEY]: true, - // }); - // }); - - // it('symbol value', () => { - // const channel = { emit: jest.fn() }; - // addons.getChannel.mockReturnValue(channel); - - // action('foo')(Symbol('A Symbol')); - - // expect(JSON.parse(channel.emit.mock.calls[0][1].data.args[0])).toEqual({ - // [symbolType.KEY]: 'A Symbol', - // }); - // }); - }); - }); -}); From 02b368aa1a0140797b1b2ccd060f7647ae3d1904 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 21 Dec 2018 15:37:58 +0100 Subject: [PATCH 041/120] FIX tests --- lib/client-logger/src/index.test.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/lib/client-logger/src/index.test.js b/lib/client-logger/src/index.test.js index ee9eaf5dfa8..32f936895bf 100644 --- a/lib/client-logger/src/index.test.js +++ b/lib/client-logger/src/index.test.js @@ -13,6 +13,11 @@ describe('client-logger', () => { it('should have an info method that displays the message', () => { const message = 'information'; logger.info(message); + expect(global.console.info).toHaveBeenCalledWith(message); + }); + it('should have an log method that displays the message', () => { + const message = 'information'; + logger.log(message); expect(global.console.log).toHaveBeenCalledWith(message); }); it('should have a warning method that displays the message in yellow, with a trace', () => { From 27be672fac3dda682b13c07fb7c741025c4905c1 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 21 Dec 2018 15:43:13 +0100 Subject: [PATCH 042/120] REMOVE test that is essentially a duplicate of our story --- lib/ui/src/components/panel/panel.test.js | 75 ----------------------- 1 file changed, 75 deletions(-) delete mode 100644 lib/ui/src/components/panel/panel.test.js diff --git a/lib/ui/src/components/panel/panel.test.js b/lib/ui/src/components/panel/panel.test.js deleted file mode 100644 index 32bed067f8a..00000000000 --- a/lib/ui/src/components/panel/panel.test.js +++ /dev/null @@ -1,75 +0,0 @@ -import React from 'react'; -import { mount, shallow } from 'enzyme'; -import AddonPanel from './panel'; - -describe('manager.ui.components.addon_panel.index', () => { - const actions = { - togglePosition: jest.fn(), - toggleVisibility: jest.fn(), - onSelect: jest.fn(), - }; - - test('should render only the selected panel with display set other than "none"', () => { - const panels = { - test1: { - title: 'TEST 1', - // eslint-disable-next-line react/prop-types - render: ({ active, key }) => - active ? ( -
- TEST 1 -
- ) : null, - }, - test2: { - title: 'TEST 2', - // eslint-disable-next-line react/prop-types - render: ({ active, key }) => - active ? ( -
- TEST 2 -
- ) : null, - }, - }; - - const wrapper = mount(); - - expect(wrapper.find('#test2')).toExist(); - expect(wrapper.find('Tab').at(0)).toHaveProp('active', false); - expect(wrapper.find('Tab').at(1)).toHaveProp('active', true); - }); - - test('should set onPanelSelected as onClick handlers of tabs', () => { - actions.onSelect.mockClear(); - const panels = { - test1: { - title: 'TEST 1', - // eslint-disable-next-line react/prop-types - render({ key }) { - return
TEST 1
; - }, - }, - }; - const preventDefault = jest.fn(); - const wrapper = shallow(); - - wrapper - .dive() - .find('Tab') - .dive() - .simulate('click', { preventDefault }); - - expect(actions.onSelect).toHaveBeenCalled(); - expect(preventDefault).toHaveBeenCalled(); - }); - - describe('when no panels are given', () => { - test('should render "no panels available"', () => { - const panels = {}; - const wrapper = shallow().dive(); - - expect(wrapper.contains('no panels available')).toBe(true); - }); - }); -}); From 362e41bacd703bcefb40758bf9a498c4209ef0f6 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 21 Dec 2018 15:52:47 +0100 Subject: [PATCH 043/120] CLEANUP --- WORKLOG.md | 57 ------------------------------------------------------ 1 file changed, 57 deletions(-) delete mode 100644 WORKLOG.md diff --git a/WORKLOG.md b/WORKLOG.md deleted file mode 100644 index 3b1e9acc7de..00000000000 --- a/WORKLOG.md +++ /dev/null @@ -1,57 +0,0 @@ -@ndelangen -TODO: -- [x] FIX navigate by keyboard shortcut -- [x] FIX addon-storysource click navigate -- [x] FIX addon-links -- [x] FIX addon-actions -- [ ] FIX when reloading page selected story should stay (this happens when there's a mismatch between hierarchySeparators) - -- [ ] INVESTIGATE if addon-storysource can use router directly over state method -- [ ] DISCUSS moving router into a separate package - -- [ ] TEST other examples (vue with it's different `decorateStory`) - -- [x] FIX HMR - stick with story in url -- [x] FIX HMR - HMR in ejected iframe -- [ ] FIX HMR - keep state of explorer - -- [x] FIX http://localhost:9011/?path=/components/Core-Errors-storyErrors (should error) -- [ ] FIX https://deploy-preview-4086--storybooks-official.netlify.com/?selectedKind=Addons%7Ca11y&selectedStory=Invalid%20contrast&full=0&addons=1&stories=1&panelRight=0&addonPanel=%40storybook%2Faddon-a11y%2Fpanel (should redirect correctly) - -- [x] OPTIMIZE double selectStory event -- [x] OPTIMIZE selectStory event at fullscreen switch -- [ ] unify SET_CURRENT_STORY & SELECT_STORY - -- [x] FIX eslint -- [ ] ADD unit tests - -- [x] REMOVE zoom level text & ADD reset button -- [x] REMOVE grid-lines or move into addons / toggle -- [x] FIX refresh when toggle panel or nav -- [ ] FIX main is weird when entry page is settings after switching to components -- [x] FIX delay in resizing panels because of transition - -- [ ] ADD postMessage to ejected iframe - -- [x] REMOVE toNested -- [ ] ADD explorer hover over items -- [ ] ADD support for rootSeparators in explorer -- [ ] ADD auto-open of selection in explorer -- [ ] ADD explorer empty message -- [ ] ADD highlighting of the search results -- [ ] TRY - when you click on a group, maybe select first renderable child - in an option? - -- [ ] ADD fetching of data for version notification -- [ ] ADD storage of version info in localStorage - -Dom's changes -- [x] ADD tools/hotkeys button -- [x] ADD UI to go fullscreen and toggle panels -- [ ] CHANGE styles of explorer -- [ ] CHANGE styles of notifications -- [x] CHANGE styles of main (preview+panel) -- [ ] CHANGE toolbar -- [ ] ADD shortcut for toggle toolbar -- [ ] ADD shortcut for zoom -- [ ] ADD shortcut for toggle grid -- [ ] ADD tools to TabsBar From 8f895f317e5312f6ae7cc079cfc57db000874a2c Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 21 Dec 2018 16:03:50 +0100 Subject: [PATCH 044/120] CHANGE to use yarn everywhere --- MIGRATION.md | 8 +++---- addons/centered/README.md | 2 +- addons/graphql/README.md | 2 +- addons/jest/README.md | 2 +- addons/knobs/README.md | 10 +++++++-- addons/ondevice-knobs/README.md | 2 +- addons/options/README.md | 2 +- addons/storyshots/storyshots-core/README.md | 22 +++++++++---------- .../storyshots/storyshots-puppeteer/README.md | 4 ++-- addons/storysource/README.md | 2 +- app/react-native/docs/manual-setup.md | 2 +- .../pages/basics/exporting-storybook/index.md | 17 ++++---------- .../testing/automated-visual-testing/index.md | 4 ++-- examples/ember-cli/README.md | 2 +- examples/mithril-kitchen-sink/README.md | 2 +- examples/preact-kitchen-sink/README.md | 2 +- examples/riot-kitchen-sink/README.md | 2 +- examples/vue-kitchen-sink/README.md | 2 +- lib/codemod/README.md | 3 +-- lib/ui/README.md | 2 +- 20 files changed, 45 insertions(+), 49 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index a1f855d0393..4e2ec600545 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -228,8 +228,8 @@ Also read on if you're using `addon-knobs`: we advise an update to your code for This affects you if you don't use babel in your project. You may need to add `babel-core` as dev dependency: -``` -npm install --save-dev babel-core +```sh +yarn add babel-core --dev ``` This was done to support different major versions of babel. @@ -261,7 +261,7 @@ In the case of Angular: `import { ... } from '@storybook/addon-knobs/angular';` TypeScript users: we've moved the rest of our addons type definitions into [DefinitelyTyped](http://definitelytyped.org/). Starting in 3.2.0 make sure to use the right addons types: ```sh -npm install @types/storybook__addon-notes @types/storybook__addon-options @types/storybook__addon-knobs @types/storybook__addon-links --save-dev +yarn add @types/storybook__addon-notes @types/storybook__addon-options @types/storybook__addon-knobs @types/storybook__addon-links --dev ``` See also [TypeScript definitions in 3.1.x](#moved-typescript-definitions). @@ -294,7 +294,7 @@ It's not beautiful, but we'll be adding a more convenient/idiomatic way of using TypeScript users: we are in the process of moving our typescript definitions into [DefinitelyTyped](http://definitelytyped.org/). If you're using TypeScript, starting in 3.1.0 you need to make sure your type definitions are installed: ```sh -npm install @types/node @types/react @types/storybook__react --save-dev +yarn add @types/node @types/react @types/storybook__react --dev ``` ### Deprecated head.html diff --git a/addons/centered/README.md b/addons/centered/README.md index 2393005a999..e594f0186f0 100644 --- a/addons/centered/README.md +++ b/addons/centered/README.md @@ -7,7 +7,7 @@ Storybook Centered Decorator can be used to center components inside the preview ### Usage ```sh -npm install @storybook/addon-centered --save-dev +yarn add @storybook/addon-centered --dev ``` #### As a decorator diff --git a/addons/graphql/README.md b/addons/graphql/README.md index 4a0973c3f27..c2477e46d0a 100644 --- a/addons/graphql/README.md +++ b/addons/graphql/README.md @@ -11,7 +11,7 @@ Storybook GraphQL Addon can be used to display the GraphiQL IDE with example que First, install the addon ```sh -npm install -D @storybook/addon-graphql +yarn add @storybook/addon-graphql --dev ``` Import the `setupGraphiQL` function and use it to create the graphiql helper with a base url. diff --git a/addons/jest/README.md b/addons/jest/README.md index b8f51001b4c..513360222ef 100644 --- a/addons/jest/README.md +++ b/addons/jest/README.md @@ -12,7 +12,7 @@ Brings Jest results in storybook. ### Install -`npm install --save-dev @storybook/addon-jest` +`yarn add --save-dev @storybook/addon-jest --dev` or diff --git a/addons/knobs/README.md b/addons/knobs/README.md index 701738424a0..47ac4c63731 100644 --- a/addons/knobs/README.md +++ b/addons/knobs/README.md @@ -16,7 +16,7 @@ This is how Knobs look like: First of all, you need to install knobs into your project as a dev dependency. ```sh -npm install @storybook/addon-knobs --save-dev +yarn add @storybook/addon-knobs --dev ``` Then, configure it as an addon by adding it to your `addons.js` file (located in the Storybook config directory). @@ -418,4 +418,10 @@ If you are using typescript, make sure you have the type definitions installed f - node - react -You can install them using `npm install -save @types/node @types/react`, assuming you are using Typescript >2.0. +You can install them using: +*assuming you are using Typescript >2.0.* + +```sh +yarn add @types/node @types/react --dev +``` + diff --git a/addons/ondevice-knobs/README.md b/addons/ondevice-knobs/README.md index 78043a63a3c..3d0146a9975 100644 --- a/addons/ondevice-knobs/README.md +++ b/addons/ondevice-knobs/README.md @@ -18,7 +18,7 @@ Refer to its documentation to understand how to use knobs** First of all, you need to install knobs into your project. ```sh -npm install @storybook/addon-ondevice-knobs +yarn add @storybook/addon-ondevice-knobs --dev ``` Then create a file called `rn-addons.js` in your storybook config. diff --git a/addons/options/README.md b/addons/options/README.md index c7ca8a02666..d3bd80910ef 100644 --- a/addons/options/README.md +++ b/addons/options/README.md @@ -11,7 +11,7 @@ The Options addon can be used to (re-)configure the [Storybook](https://storyboo First, install the addon ```sh -npm install -D @storybook/addon-options +yarn add @storybook/addon-options --dev ``` Add this line to your `addons.js` file (create this file inside your storybook config directory if needed). diff --git a/addons/storyshots/storyshots-core/README.md b/addons/storyshots/storyshots-core/README.md index 6356e750bfc..695d2be9e0b 100644 --- a/addons/storyshots/storyshots-core/README.md +++ b/addons/storyshots/storyshots-core/README.md @@ -13,7 +13,7 @@ To use StoryShots, you must use your existing Storybook stories as the input for Add the following module into your app. ```sh -npm install --save-dev @storybook/addon-storyshots +yarn add @storybook/addon-storyshots --dev ``` ## Configure your app for Jest @@ -59,7 +59,7 @@ You can do this with a Babel [plugin](https://github.com/smrq/babel-plugin-requi First, install it: ```sh -npm install --save-dev babel-plugin-require-context-hook +yarn add babel-plugin-require-context-hook --dev ``` Next, it needs to be registered and loaded before each test. To register it, create a file with the following register function `.jest/register-context.js`: @@ -93,7 +93,7 @@ The plugin is only added to the test environment otherwise it could replace webp First, install it: ```sh -npm install --save-dev require-context.macro +yarn add require-context.macro --dev ``` Now, inside of your Storybook config file, simply import the macro and run it in place of `require.context`, like so: @@ -110,7 +110,7 @@ StoryShots addon for React is dependent on [react-test-renderer](https://github. [doesn't](#deps-issue) install it, so you need to install it separately. ```sh -npm install --save-dev react-test-renderer +yarn add react-test-renderer --dev ``` ### Configure Jest for Angular @@ -118,7 +118,7 @@ StoryShots addon for Angular is dependent on [jest-preset-angular](https://githu [doesn't](#deps-issue) install it, so you need to install it separately. ```sh -npm install --save-dev jest-preset-angular +yarn add jest-preset-angular ``` If you already use Jest for testing your angular app - probably you already have the needed jest configuration. @@ -139,9 +139,9 @@ module.exports = { StoryShots addon for Vue is dependent on [jest-vue-preprocessor](https://github.com/vire/jest-vue-preprocessor), but [doesn't](#deps-issue) install it, so you need to install it separately. - ```sh - npm install --save-dev jest-vue-preprocessor - ``` +```sh +yarn add jest-vue-preprocessor +``` If you already use Jest for testing your vue app - probably you already have the needed jest configuration. Anyway you can add these lines to your jest config: @@ -162,9 +162,9 @@ module.exports = { StoryShots addon for Preact is dependent on [preact-render-to-json](https://github.com/nathancahill/preact-render-to-json), but [doesn't](#deps-issue) install it, so you need to install it separately. - ```sh - npm install --save-dev preact-render-to-json - ``` +```sh +yarn add preact-render-to-json --dev +``` ### Why don't we install dependencies of each framework ? Storyshots addon is currently supporting React, Angular and Vue. Each framework needs its own packages to be integrated with Jest. We don't want people that use only React will need to bring other dependencies that do not make sense for them. diff --git a/addons/storyshots/storyshots-puppeteer/README.md b/addons/storyshots/storyshots-puppeteer/README.md index c9856b2ef47..d06cf452523 100644 --- a/addons/storyshots/storyshots-puppeteer/README.md +++ b/addons/storyshots/storyshots-puppeteer/README.md @@ -2,8 +2,8 @@ Add the following module into your app. - ```sh -npm install --save-dev @storybook/addon-storyshots-puppeteer +```sh +yarn add @storybook/addon-storyshots-puppeteer --dev ``` ## Configure Storyshots for image snapshots diff --git a/addons/storysource/README.md b/addons/storysource/README.md index 69a4211f5d2..42d2e9c4de4 100644 --- a/addons/storysource/README.md +++ b/addons/storysource/README.md @@ -11,7 +11,7 @@ This addon is used to show stories source in the addon panel. First, install the addon ```sh -npm install -D @storybook/addon-storysource +yarn add @storybook/addon-storysource --dev ``` Add this line to your `addons.js` file diff --git a/app/react-native/docs/manual-setup.md b/app/react-native/docs/manual-setup.md index 8d93913aedd..c9facdd0747 100644 --- a/app/react-native/docs/manual-setup.md +++ b/app/react-native/docs/manual-setup.md @@ -3,7 +3,7 @@ First, install the `@storybook/react-native` module ```sh -npm install @storybook/react-native +yarn add @storybook/react-native --dev ``` Create a new directory called `storybook` in your project root and create an entry file (index.js) as given below. diff --git a/docs/src/pages/basics/exporting-storybook/index.md b/docs/src/pages/basics/exporting-storybook/index.md index 8987308ac99..58c1da52161 100644 --- a/docs/src/pages/basics/exporting-storybook/index.md +++ b/docs/src/pages/basics/exporting-storybook/index.md @@ -15,29 +15,20 @@ Simply add the following NPM script: ```json { "scripts": { - "storybook": "build-storybook -c .storybook -o .out" + "build-storybook": "build-storybook -c .storybook -o .out" } } ``` -Then run `npm run storybook`. +Then run `yarn build-storybook`. This will build the storybook configured in the Storybook directory into a static web app and place it inside the `.out` directory. Now you can deploy the content in the `.out` directory wherever you want. -To test it locally, simply run the following commands with Python HTTP Server: +To test it locally: ```sh -cd .out -python -m SimpleHTTPServer -``` - -or Node HTTP Server: - -```sh -npm install http-server -g -cd .out -http-server +npx serve . ``` ## Deploying to GitHub Pages diff --git a/docs/src/pages/testing/automated-visual-testing/index.md b/docs/src/pages/testing/automated-visual-testing/index.md index 9ab2090a588..c499acb0722 100644 --- a/docs/src/pages/testing/automated-visual-testing/index.md +++ b/docs/src/pages/testing/automated-visual-testing/index.md @@ -95,8 +95,8 @@ For this example, we're going to use a number of packages: Let's go ahead and add all of these: -``` -npm install --save-dev jest puppeteer jest-puppeteer jest-image-snapshot start-server-and-test +```sh +yarn add jest puppeteer jest-puppeteer jest-image-snapshot start-server-and-test --dev ``` There's a bit of setup code that needs to run before your tests, so we'll need to configure a Jest setup file to run first, if you haven't already. This is done with the [`setupTestFrameworkScriptFile` config property](https://jestjs.io/docs/en/configuration.html#setuptestframeworkscriptfile-string), either in your package.json or in your `jest.config.js`. We'll also set `"preset": "jest-puppeteer"` so that we get the nice integration from jest-puppeteer. diff --git a/examples/ember-cli/README.md b/examples/ember-cli/README.md index 117d6d61d81..7b3dc63568c 100644 --- a/examples/ember-cli/README.md +++ b/examples/ember-cli/README.md @@ -1,3 +1,3 @@ # Storybook Demo -This is a demo app to test Ember integration with Storybook. Run `npm install` to sync Storybook module with the source code and run `npm run storybook` to start the Storybook. +This is a demo app to test Ember integration with Storybook. Run `yarn install` to sync Storybook module with the source code and run `yarn storybook` to start the Storybook. diff --git a/examples/mithril-kitchen-sink/README.md b/examples/mithril-kitchen-sink/README.md index 765012ecfa4..935df144521 100644 --- a/examples/mithril-kitchen-sink/README.md +++ b/examples/mithril-kitchen-sink/README.md @@ -1,3 +1,3 @@ # Storybook Demo -This is a demo app to test Mithril integration with Storybook. Run `npm install` or `yarn install` to sync Storybook module with the source code and run `npm run storybook` or `yarn storybook` to start the Storybook. +This is a demo app to test Mithril integration with Storybook. Run `yarn install` to sync Storybook module with the source code and run `yarn storybook` to start the Storybook. diff --git a/examples/preact-kitchen-sink/README.md b/examples/preact-kitchen-sink/README.md index f5970ba797b..f2c53ad4493 100644 --- a/examples/preact-kitchen-sink/README.md +++ b/examples/preact-kitchen-sink/README.md @@ -1,3 +1,3 @@ # Storybook Demo -This is a demo app to test `preact` integration with Storybook. Run `npm install` to sync Storybook module with the source code and run `npm run storybook` to start the Storybook. +This is a demo app to test `preact` integration with Storybook. Run `yarn install` to sync Storybook module with the source code and run `yarn storybook` to start the Storybook. diff --git a/examples/riot-kitchen-sink/README.md b/examples/riot-kitchen-sink/README.md index c99dc3c0ec5..cc4306faac1 100644 --- a/examples/riot-kitchen-sink/README.md +++ b/examples/riot-kitchen-sink/README.md @@ -1,3 +1,3 @@ # Storybook Demo -This is a demo app to test riot.js integration with Storybook. Run `npm install` to sync Storybook module with the source code and run `npm run storybook` to start the Storybook. +This is a demo app to test riot.js integration with Storybook. Run `yarn install` to sync Storybook module with the source code and run `yarn storybook` to start the Storybook. diff --git a/examples/vue-kitchen-sink/README.md b/examples/vue-kitchen-sink/README.md index c126932b16c..bf042ddc891 100644 --- a/examples/vue-kitchen-sink/README.md +++ b/examples/vue-kitchen-sink/README.md @@ -1,3 +1,3 @@ # Storybook Demo -This is a demo app to test VueJs integration with Storybook. Run `npm install` to sync Storybook module with the source code and run `npm run storybook` to start the Storybook. +This is a demo app to test VueJs integration with Storybook. Run `yarn install` to sync Storybook module with the source code and run `yarn storybook` to start the Storybook. diff --git a/lib/codemod/README.md b/lib/codemod/README.md index 4e4eeaa4f5a..1f69564413f 100644 --- a/lib/codemod/README.md +++ b/lib/codemod/README.md @@ -6,8 +6,7 @@ It will help you migrate breaking changes & deprecations. ## Installation ```sh -npm install jscodeshift -npm install @storybook/codemod +yarn add jscodeshift @storybook/codemod --dev ``` - `@storybook/codemod` is our collection of codemod scripts. diff --git a/lib/ui/README.md b/lib/ui/README.md index db39436d82c..39019e9c85e 100644 --- a/lib/ui/README.md +++ b/lib/ui/README.md @@ -26,7 +26,7 @@ You can configure it by providing a provider API. First you need to install `@storybook/ui` into your app. ```sh -npm install --save @storybook/ui +yarn add @storybook/ui --dev ``` Then you need to create a Provider class like this: From 2bb5172038aafebd5c0e9a740e2fb0ba4ce3a0f8 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 21 Dec 2018 17:10:38 +0100 Subject: [PATCH 045/120] FIX first-child issue && ADD new Heading type --- addons/knobs/src/components/types/Date.js | 2 +- .../form/__snapshots__/form.stories.storyshot | 16 ++--- .../grid/__snapshots__/grid.stories.storyshot | 10 +-- lib/components/src/grid/grid.js | 4 +- .../__snapshots__/heading.stories.storyshot | 71 ++++++++++++++----- lib/components/src/heading/heading.js | 8 +++ lib/components/src/heading/heading.stories.js | 3 + lib/components/src/index.js | 2 + .../syntaxhighlighter/syntaxhighlighter.js | 4 +- lib/ui/src/settings/components.js | 4 +- scripts/jest.init.js | 8 ++- 11 files changed, 95 insertions(+), 37 deletions(-) diff --git a/addons/knobs/src/components/types/Date.js b/addons/knobs/src/components/types/Date.js index 631486b47db..72dba2c6dc3 100644 --- a/addons/knobs/src/components/types/Date.js +++ b/addons/knobs/src/components/types/Date.js @@ -9,7 +9,7 @@ const FlexSpaced = styled.div({ '& > *': { marginLeft: 10, }, - '& > *:first-of-type': { + '& > *:nth-child(0)': { marginLeft: 0, }, }); diff --git a/lib/components/src/form/__snapshots__/form.stories.storyshot b/lib/components/src/form/__snapshots__/form.stories.storyshot index 05b9fbb0dca..829c329500f 100644 --- a/lib/components/src/form/__snapshots__/form.stories.storyshot +++ b/lib/components/src/form/__snapshots__/form.stories.storyshot @@ -12,7 +12,7 @@ exports[`Storyshots Components|Form/Button alignment 1`] = ` margin-top: 10px; } -.emotion-12 > *:first-of-type { +.emotion-12 > *:nth-child(0) { margin-top: 0; } @@ -156,7 +156,7 @@ exports[`Storyshots Components|Form/Button sizes 1`] = ` margin-top: 10px; } -.emotion-12 > *:first-of-type { +.emotion-12 > *:nth-child(0) { margin-top: 0; } @@ -302,7 +302,7 @@ exports[`Storyshots Components|Form/Button validations 1`] = ` margin-top: 10px; } -.emotion-16 > *:first-of-type { +.emotion-16 > *:nth-child(0) { margin-top: 0; } @@ -533,7 +533,7 @@ exports[`Storyshots Components|Form/Select sizes 1`] = ` margin-top: 10px; } -.emotion-12 > *:first-of-type { +.emotion-12 > *:nth-child(0) { margin-top: 0; } @@ -721,7 +721,7 @@ exports[`Storyshots Components|Form/Select validations 1`] = ` margin-top: 10px; } -.emotion-8 > *:first-of-type { +.emotion-8 > *:nth-child(0) { margin-top: 0; } @@ -938,7 +938,7 @@ exports[`Storyshots Components|Form/Textarea alignment 1`] = ` margin-top: 10px; } -.emotion-12 > *:first-of-type { +.emotion-12 > *:nth-child(0) { margin-top: 0; } @@ -1079,7 +1079,7 @@ exports[`Storyshots Components|Form/Textarea sizes 1`] = ` margin-top: 10px; } -.emotion-12 > *:first-of-type { +.emotion-12 > *:nth-child(0) { margin-top: 0; } @@ -1219,7 +1219,7 @@ exports[`Storyshots Components|Form/Textarea validations 1`] = ` margin-top: 10px; } -.emotion-16 > *:first-of-type { +.emotion-16 > *:nth-child(0) { margin-top: 0; } diff --git a/lib/components/src/grid/__snapshots__/grid.stories.storyshot b/lib/components/src/grid/__snapshots__/grid.stories.storyshot index 03c4a0c404e..0d9a3383da8 100644 --- a/lib/components/src/grid/__snapshots__/grid.stories.storyshot +++ b/lib/components/src/grid/__snapshots__/grid.stories.storyshot @@ -24,7 +24,7 @@ exports[`Storyshots Components|Grid col 1`] = ` vertical-align: inherit; } -.emotion-8 > *:first-of-type { +.emotion-8 > *:nth-child(0) { margin-left: 0; } @@ -95,7 +95,7 @@ exports[`Storyshots Components|Grid col outer 1`] = ` vertical-align: inherit; } -.emotion-8 > *:first-of-type { +.emotion-8 > *:nth-child(0) { margin-left: 0; } @@ -140,7 +140,7 @@ exports[`Storyshots Components|Grid row 1`] = ` margin-top: 10px; } -.emotion-8 > *:first-of-type { +.emotion-8 > *:nth-child(0) { margin-top: 0; } @@ -210,7 +210,7 @@ exports[`Storyshots Components|Grid row multiply 1`] = ` margin-top: 30px; } -.emotion-8 > *:first-of-type { +.emotion-8 > *:nth-child(0) { margin-top: 0; } @@ -270,7 +270,7 @@ exports[`Storyshots Components|Grid row outer 1`] = ` margin-top: 10px; } -.emotion-8 > *:first-of-type { +.emotion-8 > *:nth-child(0) { margin-top: 0; } diff --git a/lib/components/src/grid/grid.js b/lib/components/src/grid/grid.js index 05e31d04584..f2c2e2b1b3b 100644 --- a/lib/components/src/grid/grid.js +++ b/lib/components/src/grid/grid.js @@ -14,7 +14,7 @@ const Container = styled.div( marginLeft: col * theme.layoutMargin, verticalAlign: 'inherit', }, - '& > *:first-of-type': { + '& > *:nth-child(0)': { marginLeft: 0, }, } @@ -22,7 +22,7 @@ const Container = styled.div( '& > *': { marginTop: row * theme.layoutMargin, }, - '& > *:first-of-type': { + '& > *:nth-child(0)': { marginTop: 0, }, }, diff --git a/lib/components/src/heading/__snapshots__/heading.stories.storyshot b/lib/components/src/heading/__snapshots__/heading.stories.storyshot index 7037688a101..eb640200fd5 100644 --- a/lib/components/src/heading/__snapshots__/heading.stories.storyshot +++ b/lib/components/src/heading/__snapshots__/heading.stories.storyshot @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Components|Heading types 1`] = ` -.emotion-40 { +.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; @@ -36,7 +36,7 @@ exports[`Storyshots Components|Heading types 1`] = ` color: rgba(0,0,0,0.4); } -.emotion-24 { +.emotion-18 { 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; @@ -45,21 +45,21 @@ exports[`Storyshots Components|Heading types 1`] = ` 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; + line-height: 1em; + font-size: 22px; } -.emotion-24 > sub { +.emotion-18 > sub { display: block; padding-top: 5px; line-height: 1.2em; font-size: 14px; } +.emotion-18 > sub { + color: rgba(0,0,0,0.4); +} + .emotion-30 { color: currentColor; font-weight: normal; @@ -75,7 +75,6 @@ exports[`Storyshots Components|Heading types 1`] = ` letter-spacing: 4.3px; font-weight: 400; font-size: 10px; - text-transform: uppercase; } .emotion-30 > sub { @@ -85,7 +84,32 @@ exports[`Storyshots Components|Heading types 1`] = ` font-size: 14px; } -.emotion-34 { +.emotion-36 { + 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-36 > sub { + display: block; + padding-top: 5px; + line-height: 1.2em; + font-size: 14px; +} + +.emotion-40 { 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; @@ -104,7 +128,7 @@ exports[`Storyshots Components|Heading types 1`] = ` text-decoration: underline; } -.emotion-34 > sub { +.emotion-40 > sub { display: block; padding-top: 5px; line-height: 1.2em; @@ -112,7 +136,7 @@ exports[`Storyshots Components|Heading types 1`] = ` }
+
+
+

+ + secondary type + +

+
+
@@ -188,7 +227,7 @@ exports[`Storyshots Components|Heading types 1`] = ` class="emotion-2 emotion-3" >

section type @@ -203,7 +242,7 @@ exports[`Storyshots Components|Heading types 1`] = ` class="emotion-2 emotion-3" >

section type @@ -214,7 +253,7 @@ exports[`Storyshots Components|Heading types 1`] = ` class="emotion-2 emotion-3" >

section type diff --git a/lib/components/src/heading/heading.js b/lib/components/src/heading/heading.js index 36379d6c7af..45be76f5e36 100644 --- a/lib/components/src/heading/heading.js +++ b/lib/components/src/heading/heading.js @@ -20,6 +20,14 @@ const types = { color: theme.dimmedTextColor, }, }), + secondary: ({ theme }) => ({ + color: theme.dimmedTextColor, + lineHeight: '1em', + fontSize: 22, + '& > sub': { + color: theme.dimmedTextColor, + }, + }), section: ({ theme }) => ({ color: theme.dimmedTextColor, letterSpacing: 4.3, diff --git a/lib/components/src/heading/heading.stories.js b/lib/components/src/heading/heading.stories.js index f6711ed39b6..b0f58c29365 100644 --- a/lib/components/src/heading/heading.stories.js +++ b/lib/components/src/heading/heading.stories.js @@ -20,6 +20,9 @@ storiesOf('Components|Heading', module).add('types', () => ( page type + + secondary type + page type diff --git a/lib/components/src/index.js b/lib/components/src/index.js index d156d3c3718..2a107e111a0 100644 --- a/lib/components/src/index.js +++ b/lib/components/src/index.js @@ -9,6 +9,8 @@ export { default as HighlightButton } from './highlight_button'; export { default as Table } from './table/table'; export { Td, Th } from './table/cell'; +export { Spaced } from './grid/grid'; + export { Button, Input, Select, Textarea } from './form/input'; export { default as Field } from './form/field'; diff --git a/lib/components/src/syntaxhighlighter/syntaxhighlighter.js b/lib/components/src/syntaxhighlighter/syntaxhighlighter.js index a384a6cc09e..42495e2e072 100644 --- a/lib/components/src/syntaxhighlighter/syntaxhighlighter.js +++ b/lib/components/src/syntaxhighlighter/syntaxhighlighter.js @@ -63,7 +63,7 @@ const Code = styled.code({ opacity: 1, }); -export default class Copyable extends PureComponent { +export default class CopyableCode extends PureComponent { state = { copied: false }; formatCode = memoize(2)((language, code) => { @@ -105,7 +105,7 @@ export default class Copyable extends PureComponent { }; render() { - const { children, language = 'jsx', copyable = true, bordered, padded, ...rest } = this.props; + const { children, language = 'jsx', copyable, bordered, padded, ...rest } = this.props; const { copied } = this.state; return children ? ( diff --git a/lib/ui/src/settings/components.js b/lib/ui/src/settings/components.js index 3127591866a..c0f9007c1e1 100644 --- a/lib/ui/src/settings/components.js +++ b/lib/ui/src/settings/components.js @@ -156,7 +156,7 @@ export const Footer = styled.div(({ theme }) => ({ '& > *': { marginLeft: 20, }, - '& > *:first-of-type': { + '& > *:nth-child(0)': { marginLeft: 0, }, })); @@ -210,7 +210,7 @@ export const Row = styled.div(({ theme }) => ({ borderTop: theme.mainBorder, display: 'grid', gridTemplateColumns: '1fr 1fr 10px', - '& > div:first-of-type': { + '& > div:nth-child(0)': { borderTop: '0 none', }, '&:hover': { diff --git a/scripts/jest.init.js b/scripts/jest.init.js index f2390df531f..41f9a5b5993 100644 --- a/scripts/jest.init.js +++ b/scripts/jest.init.js @@ -26,8 +26,14 @@ configure({ adapter: new Adapter() }); free of warnings going forward. */ +const ignoredWarnings = [ + 'The pseudo class ":nth-child" is potentially unsafe when doing server-side rendering. Try changing it to "nth-of-type"', +]; + const throwError = message => { - throw new Error(message); + if (!ignoredWarnings.find(warning => message === warning)) { + throw new Error(message); + } }; global.console.error = throwError; From a600edb947213acac2065ae7ec171ff30c473d1d Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 21 Dec 2018 17:12:37 +0100 Subject: [PATCH 046/120] FIX snapshots --- .../info/src/__snapshots__/index.test.js.snap | 285 +- .../__snapshots__/index.stories.storyshot | 158 +- .../addon-info.stories.storyshot | 4607 +++++------------ 3 files changed, 1337 insertions(+), 3713 deletions(-) diff --git a/addons/info/src/__snapshots__/index.test.js.snap b/addons/info/src/__snapshots__/index.test.js.snap index b74ddab8cda..e635dfc6071 100644 --- a/addons/info/src/__snapshots__/index.test.js.snap +++ b/addons/info/src/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`addon Info should render and external markdown 1`] = ` -.emotion-12 { +.emotion-6 { position: relative; overflow: hidden; } @@ -36,61 +36,6 @@ exports[`addon Info should render and external markdown 1`] = ` opacity: 1; } -.emotion-10 { - position: absolute; - bottom: 0; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; - border-radius: undefinedpx 0 0 0; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - list-style: none; - padding: 0; - height: 26px; - font-size: 11px; - -webkit-letter-spacing: 1px; - -moz-letter-spacing: 1px; - -ms-letter-spacing: 1px; - letter-spacing: 1px; - text-transform: uppercase; - border-left: 0 none; -} - -.emotion-6 { - border: 0 none; - display: block; - background: none; - padding: 0 10px; - cursor: pointer; - text-transform: inherit; - -webkit-letter-spacing: inherit; - -moz-letter-spacing: inherit; - -ms-letter-spacing: inherit; - letter-spacing: inherit; - font-size: inherit; - color: inherit; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; -} - -.emotion-6:focus { - border-bottom: 2px solid undefined; - outline: 0 none; -} - and external markdown 1`] = ` > Story Source

-
and external markdown 1`] = ` "__emotion_styles": Array [ "label:Code;", Object { - "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9zeW50YXhoaWdobGlnaHRlci9zeW50YXhoaWdobGlnaHRlci5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyRGEiLCJmaWxlIjoiLi4vLi4vc3JjL3N5bnRheGhpZ2hsaWdodGVyL3N5bnRheGhpZ2hsaWdodGVyLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBkb2N1bWVudCwgd2luZG93IH0gZnJvbSAnZ2xvYmFsJztcbmltcG9ydCBtZW1vaXplIGZyb20gJ21lbW9pemVyaWZpYyc7XG5cbmltcG9ydCBqc3ggZnJvbSAncmVhY3Qtc3ludGF4LWhpZ2hsaWdodGVyL2xhbmd1YWdlcy9wcmlzbS9qc3gnO1xuaW1wb3J0IGJhc2ggZnJvbSAncmVhY3Qtc3ludGF4LWhpZ2hsaWdodGVyL2xhbmd1YWdlcy9wcmlzbS9iYXNoJztcbmltcG9ydCBjc3MgZnJvbSAncmVhY3Qtc3ludGF4LWhpZ2hsaWdodGVyL2xhbmd1YWdlcy9wcmlzbS9jc3MnO1xuaW1wb3J0IGh0bWwgZnJvbSAncmVhY3Qtc3ludGF4LWhpZ2hsaWdodGVyL2xhbmd1YWdlcy9wcmlzbS9tYXJrdXAnO1xuXG5pbXBvcnQgU3ludGF4SGlnaGxpZ2h0ZXIsIHsgcmVnaXN0ZXJMYW5ndWFnZSB9IGZyb20gJ3JlYWN0LXN5bnRheC1oaWdobGlnaHRlci9wcmlzbS1saWdodCc7XG5pbXBvcnQgeyBqcyBhcyBiZWF1dGlmeSB9IGZyb20gJ2pzLWJlYXV0aWZ5JztcbmltcG9ydCB7IEFjdGlvbkJhciwgQWN0aW9uQnV0dG9uIH0gZnJvbSAnLi4vcGFuZWxfYWN0aW9uYmFyL3BhbmVsX2FjdGlvbmJhcic7XG5cbnJlZ2lzdGVyTGFuZ3VhZ2UoJ2pzeCcsIGpzeCk7XG5yZWdpc3Rlckxhbmd1YWdlKCdiYXNoJywgYmFzaCk7XG5yZWdpc3Rlckxhbmd1YWdlKCdjc3MnLCBjc3MpO1xucmVnaXN0ZXJMYW5ndWFnZSgnaHRtbCcsIGh0bWwpO1xuXG5jb25zdCB0aGVtZWRTeW50YXggPSBtZW1vaXplKDIpKHRoZW1lID0+XG4gIE9iamVjdC5lbnRyaWVzKHRoZW1lLmNvZGUgfHwge30pLnJlZHVjZSgoYWNjLCBba2V5LCB2YWxdKSA9PiAoeyAuLi5hY2MsIFtgKiAuJHtrZXl9YF06IHZhbCB9KSwge30pXG4pO1xuXG5jb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdihcbiAge1xuICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICAgIG92ZXJmbG93OiAnaGlkZGVuJyxcbiAgfSxcbiAgKHsgdGhlbWUsIGJvcmRlcmVkIH0pID0+XG4gICAgYm9yZGVyZWRcbiAgICAgID8ge1xuICAgICAgICAgIGJvcmRlcjogdGhlbWUubWFpbkJvcmRlcixcbiAgICAgICAgICBib3JkZXJSYWRpdXM6IHRoZW1lLm1haW5Cb3JkZXJSYWRpdXMsXG4gICAgICAgICAgYmFja2dyb3VuZDogdGhlbWUuYmFyRmlsbCxcbiAgICAgICAgfVxuICAgICAgOiB7fVxuKTtcblxuY29uc3QgU2Nyb2xsZXIgPSBzdHlsZWQuZGl2KFxuICB7XG4gICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgb3ZlcmZsb3c6ICdhdXRvJyxcbiAgfSxcbiAgKHsgdGhlbWUgfSkgPT4gKHtcbiAgICAnJiBjb2RlJzoge1xuICAgICAgcGFkZGluZ1JpZ2h0OiB0aGVtZS5sYXlvdXRNYXJnaW4sXG4gICAgICBvcGFjaXR5OiAwLjcsXG4gICAgfSxcbiAgfSksXG4gICh7IHRoZW1lIH0pID0+IHRoZW1lZFN5bnRheCh0aGVtZSlcbik7XG5cbmNvbnN0IFByZSA9IHN0eWxlZC5wcmUoKHsgdGhlbWUsIHBhZGRlZCB9KSA9PiAoe1xuICBkaXNwbGF5OiAnZmxleCcsXG4gIGp1c3RpZnlDb250ZW50OiAnZmxleC1zdGFydCcsXG4gIG1hcmdpbjogMCxcbiAgcGFkZGluZzogcGFkZGVkID8gdGhlbWUubGF5b3V0TWFyZ2luIDogMCxcbn0pKTtcblxuY29uc3QgQ29kZSA9IHN0eWxlZC5jb2RlKHtcbiAgZmxleDogMSxcbiAgcGFkZGluZ1JpZ2h0OiAwLFxuICBvcGFjaXR5OiAxLFxufSk7XG5cbmV4cG9ydCBkZWZhdWx0IGNsYXNzIENvcHlhYmxlIGV4dGVuZHMgUHVyZUNvbXBvbmVudCB7XG4gIHN0YXRlID0geyBjb3BpZWQ6IGZhbHNlIH07XG5cbiAgZm9ybWF0Q29kZSA9IG1lbW9pemUoMikoKGxhbmd1YWdlLCBjb2RlKSA9PiB7XG4gICAgbGV0IGZvcm1hdHRlZENvZGUgPSBjb2RlO1xuICAgIGlmIChsYW5ndWFnZSA9PT0gJ2pzeCcpIHtcbiAgICAgIHRyeSB7XG4gICAgICAgIGZvcm1hdHRlZENvZGUgPSBiZWF1dGlmeShjb2RlLCB7XG4gICAgICAgICAgaW5kZW50X3NpemU6IDIsXG4gICAgICAgICAgYnJhY2Vfc3R5bGU6ICdjb2xsYXBzZSxwcmVzZXJ2ZS1pbmxpbmUnLFxuICAgICAgICAgIGVuZF93aXRoX25ld2xpbmU6IHRydWUsXG4gICAgICAgICAgd3JhcF9saW5lX2xlbmd0aDogODAsXG4gICAgICAgICAgZTR4OiB0cnVlLFxuICAgICAgICB9KTtcbiAgICAgIH0gY2F0Y2ggKGVycm9yKSB7XG4gICAgICAgIGNvbnNvbGUud2FybihcIkNvdWxkbid0IGZvcm1hdCBjb2RlXCIsIGZvcm1hdHRlZENvZGUpOyAvLyBlc2xpbnQtZGlzYWJsZS1saW5lIG5vLWNvbnNvbGVcbiAgICAgIH1cbiAgICB9XG4gICAgcmV0dXJuIGZvcm1hdHRlZENvZGU7XG4gIH0pO1xuXG4gIG9uQ2xpY2sgPSBlID0+IHtcbiAgICBjb25zdCB7IGNoaWxkcmVuIH0gPSB0aGlzLnByb3BzO1xuXG4gICAgZS5wcmV2ZW50RGVmYXVsdCgpO1xuICAgIGNvbnN0IHRtcCA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ1RFWFRBUkVBJyk7XG4gICAgY29uc3QgZm9jdXMgPSBkb2N1bWVudC5hY3RpdmVFbGVtZW50O1xuXG4gICAgdG1wLnZhbHVlID0gY2hpbGRyZW47XG5cbiAgICBkb2N1bWVudC5ib2R5LmFwcGVuZENoaWxkKHRtcCk7XG4gICAgdG1wLnNlbGVjdCgpO1xuICAgIGRvY3VtZW50LmV4ZWNDb21tYW5kKCdjb3B5Jyk7XG4gICAgZG9jdW1lbnQuYm9keS5yZW1vdmVDaGlsZCh0bXApO1xuICAgIGZvY3VzLmZvY3VzKCk7XG5cbiAgICB0aGlzLnNldFN0YXRlKHsgY29waWVkOiB0cnVlIH0sICgpID0+IHtcbiAgICAgIHdpbmRvdy5zZXRUaW1lb3V0KCgpID0+IHRoaXMuc2V0U3RhdGUoeyBjb3BpZWQ6IGZhbHNlIH0pLCAxNTAwKTtcbiAgICB9KTtcbiAgfTtcblxuICByZW5kZXIoKSB7XG4gICAgY29uc3QgeyBjaGlsZHJlbiwgbGFuZ3VhZ2UgPSAnanN4JywgY29weWFibGUgPSB0cnVlLCBib3JkZXJlZCwgcGFkZGVkLCAuLi5yZXN0IH0gPSB0aGlzLnByb3BzO1xuICAgIGNvbnN0IHsgY29waWVkIH0gPSB0aGlzLnN0YXRlO1xuXG4gICAgcmV0dXJuIGNoaWxkcmVuID8gKFxuICAgICAgPFdyYXBwZXIgYm9yZGVyZWQ9e2JvcmRlcmVkfSBwYWRkZWQ9e3BhZGRlZH0+XG4gICAgICAgIDxTY3JvbGxlcj5cbiAgICAgICAgICA8U3ludGF4SGlnaGxpZ2h0ZXJcbiAgICAgICAgICAgIHBhZGRlZD17cGFkZGVkIHx8IGJvcmRlcmVkfVxuICAgICAgICAgICAgbGFuZ3VhZ2U9e2xhbmd1YWdlfVxuICAgICAgICAgICAgdXNlSW5saW5lU3R5bGVzPXtmYWxzZX1cbiAgICAgICAgICAgIFByZVRhZz17UHJlfVxuICAgICAgICAgICAgQ29kZVRhZz17Q29kZX1cbiAgICAgICAgICAgIGxpbmVOdW1iZXJDb250YWluZXJTdHlsZT17e319XG4gICAgICAgICAgICB7Li4ucmVzdH1cbiAgICAgICAgICA+XG4gICAgICAgICAgICB7dGhpcy5mb3JtYXRDb2RlKGxhbmd1YWdlLCBjaGlsZHJlbi50cmltKCkpfVxuICAgICAgICAgIDwvU3ludGF4SGlnaGxpZ2h0ZXI+XG4gICAgICAgIDwvU2Nyb2xsZXI+XG4gICAgICAgIHtjb3B5YWJsZSA/IChcbiAgICAgICAgICA8QWN0aW9uQmFyPlxuICAgICAgICAgICAgPEFjdGlvbkJ1dHRvbiBvbkNsaWNrPXt0aGlzLm9uQ2xpY2t9Pntjb3BpZWQgPyAnY29waWVkJyA6ICdjb3B5J308L0FjdGlvbkJ1dHRvbj5cbiAgICAgICAgICA8L0FjdGlvbkJhcj5cbiAgICAgICAgKSA6IG51bGx9XG4gICAgICA8L1dyYXBwZXI+XG4gICAgKSA6IG51bGw7XG4gIH1cbn1cbiJdfQ== */", + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9zeW50YXhoaWdobGlnaHRlci9zeW50YXhoaWdobGlnaHRlci5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyRGEiLCJmaWxlIjoiLi4vLi4vc3JjL3N5bnRheGhpZ2hsaWdodGVyL3N5bnRheGhpZ2hsaWdodGVyLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBkb2N1bWVudCwgd2luZG93IH0gZnJvbSAnZ2xvYmFsJztcbmltcG9ydCBtZW1vaXplIGZyb20gJ21lbW9pemVyaWZpYyc7XG5cbmltcG9ydCBqc3ggZnJvbSAncmVhY3Qtc3ludGF4LWhpZ2hsaWdodGVyL2xhbmd1YWdlcy9wcmlzbS9qc3gnO1xuaW1wb3J0IGJhc2ggZnJvbSAncmVhY3Qtc3ludGF4LWhpZ2hsaWdodGVyL2xhbmd1YWdlcy9wcmlzbS9iYXNoJztcbmltcG9ydCBjc3MgZnJvbSAncmVhY3Qtc3ludGF4LWhpZ2hsaWdodGVyL2xhbmd1YWdlcy9wcmlzbS9jc3MnO1xuaW1wb3J0IGh0bWwgZnJvbSAncmVhY3Qtc3ludGF4LWhpZ2hsaWdodGVyL2xhbmd1YWdlcy9wcmlzbS9tYXJrdXAnO1xuXG5pbXBvcnQgU3ludGF4SGlnaGxpZ2h0ZXIsIHsgcmVnaXN0ZXJMYW5ndWFnZSB9IGZyb20gJ3JlYWN0LXN5bnRheC1oaWdobGlnaHRlci9wcmlzbS1saWdodCc7XG5pbXBvcnQgeyBqcyBhcyBiZWF1dGlmeSB9IGZyb20gJ2pzLWJlYXV0aWZ5JztcbmltcG9ydCB7IEFjdGlvbkJhciwgQWN0aW9uQnV0dG9uIH0gZnJvbSAnLi4vcGFuZWxfYWN0aW9uYmFyL3BhbmVsX2FjdGlvbmJhcic7XG5cbnJlZ2lzdGVyTGFuZ3VhZ2UoJ2pzeCcsIGpzeCk7XG5yZWdpc3Rlckxhbmd1YWdlKCdiYXNoJywgYmFzaCk7XG5yZWdpc3Rlckxhbmd1YWdlKCdjc3MnLCBjc3MpO1xucmVnaXN0ZXJMYW5ndWFnZSgnaHRtbCcsIGh0bWwpO1xuXG5jb25zdCB0aGVtZWRTeW50YXggPSBtZW1vaXplKDIpKHRoZW1lID0+XG4gIE9iamVjdC5lbnRyaWVzKHRoZW1lLmNvZGUgfHwge30pLnJlZHVjZSgoYWNjLCBba2V5LCB2YWxdKSA9PiAoeyAuLi5hY2MsIFtgKiAuJHtrZXl9YF06IHZhbCB9KSwge30pXG4pO1xuXG5jb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdihcbiAge1xuICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICAgIG92ZXJmbG93OiAnaGlkZGVuJyxcbiAgfSxcbiAgKHsgdGhlbWUsIGJvcmRlcmVkIH0pID0+XG4gICAgYm9yZGVyZWRcbiAgICAgID8ge1xuICAgICAgICAgIGJvcmRlcjogdGhlbWUubWFpbkJvcmRlcixcbiAgICAgICAgICBib3JkZXJSYWRpdXM6IHRoZW1lLm1haW5Cb3JkZXJSYWRpdXMsXG4gICAgICAgICAgYmFja2dyb3VuZDogdGhlbWUuYmFyRmlsbCxcbiAgICAgICAgfVxuICAgICAgOiB7fVxuKTtcblxuY29uc3QgU2Nyb2xsZXIgPSBzdHlsZWQuZGl2KFxuICB7XG4gICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgb3ZlcmZsb3c6ICdhdXRvJyxcbiAgfSxcbiAgKHsgdGhlbWUgfSkgPT4gKHtcbiAgICAnJiBjb2RlJzoge1xuICAgICAgcGFkZGluZ1JpZ2h0OiB0aGVtZS5sYXlvdXRNYXJnaW4sXG4gICAgICBvcGFjaXR5OiAwLjcsXG4gICAgfSxcbiAgfSksXG4gICh7IHRoZW1lIH0pID0+IHRoZW1lZFN5bnRheCh0aGVtZSlcbik7XG5cbmNvbnN0IFByZSA9IHN0eWxlZC5wcmUoKHsgdGhlbWUsIHBhZGRlZCB9KSA9PiAoe1xuICBkaXNwbGF5OiAnZmxleCcsXG4gIGp1c3RpZnlDb250ZW50OiAnZmxleC1zdGFydCcsXG4gIG1hcmdpbjogMCxcbiAgcGFkZGluZzogcGFkZGVkID8gdGhlbWUubGF5b3V0TWFyZ2luIDogMCxcbn0pKTtcblxuY29uc3QgQ29kZSA9IHN0eWxlZC5jb2RlKHtcbiAgZmxleDogMSxcbiAgcGFkZGluZ1JpZ2h0OiAwLFxuICBvcGFjaXR5OiAxLFxufSk7XG5cbmV4cG9ydCBkZWZhdWx0IGNsYXNzIENvcHlhYmxlQ29kZSBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICBzdGF0ZSA9IHsgY29waWVkOiBmYWxzZSB9O1xuXG4gIGZvcm1hdENvZGUgPSBtZW1vaXplKDIpKChsYW5ndWFnZSwgY29kZSkgPT4ge1xuICAgIGxldCBmb3JtYXR0ZWRDb2RlID0gY29kZTtcbiAgICBpZiAobGFuZ3VhZ2UgPT09ICdqc3gnKSB7XG4gICAgICB0cnkge1xuICAgICAgICBmb3JtYXR0ZWRDb2RlID0gYmVhdXRpZnkoY29kZSwge1xuICAgICAgICAgIGluZGVudF9zaXplOiAyLFxuICAgICAgICAgIGJyYWNlX3N0eWxlOiAnY29sbGFwc2UscHJlc2VydmUtaW5saW5lJyxcbiAgICAgICAgICBlbmRfd2l0aF9uZXdsaW5lOiB0cnVlLFxuICAgICAgICAgIHdyYXBfbGluZV9sZW5ndGg6IDgwLFxuICAgICAgICAgIGU0eDogdHJ1ZSxcbiAgICAgICAgfSk7XG4gICAgICB9IGNhdGNoIChlcnJvcikge1xuICAgICAgICBjb25zb2xlLndhcm4oXCJDb3VsZG4ndCBmb3JtYXQgY29kZVwiLCBmb3JtYXR0ZWRDb2RlKTsgLy8gZXNsaW50LWRpc2FibGUtbGluZSBuby1jb25zb2xlXG4gICAgICB9XG4gICAgfVxuICAgIHJldHVybiBmb3JtYXR0ZWRDb2RlO1xuICB9KTtcblxuICBvbkNsaWNrID0gZSA9PiB7XG4gICAgY29uc3QgeyBjaGlsZHJlbiB9ID0gdGhpcy5wcm9wcztcblxuICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICBjb25zdCB0bXAgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdURVhUQVJFQScpO1xuICAgIGNvbnN0IGZvY3VzID0gZG9jdW1lbnQuYWN0aXZlRWxlbWVudDtcblxuICAgIHRtcC52YWx1ZSA9IGNoaWxkcmVuO1xuXG4gICAgZG9jdW1lbnQuYm9keS5hcHBlbmRDaGlsZCh0bXApO1xuICAgIHRtcC5zZWxlY3QoKTtcbiAgICBkb2N1bWVudC5leGVjQ29tbWFuZCgnY29weScpO1xuICAgIGRvY3VtZW50LmJvZHkucmVtb3ZlQ2hpbGQodG1wKTtcbiAgICBmb2N1cy5mb2N1cygpO1xuXG4gICAgdGhpcy5zZXRTdGF0ZSh7IGNvcGllZDogdHJ1ZSB9LCAoKSA9PiB7XG4gICAgICB3aW5kb3cuc2V0VGltZW91dCgoKSA9PiB0aGlzLnNldFN0YXRlKHsgY29waWVkOiBmYWxzZSB9KSwgMTUwMCk7XG4gICAgfSk7XG4gIH07XG5cbiAgcmVuZGVyKCkge1xuICAgIGNvbnN0IHsgY2hpbGRyZW4sIGxhbmd1YWdlID0gJ2pzeCcsIGNvcHlhYmxlLCBib3JkZXJlZCwgcGFkZGVkLCAuLi5yZXN0IH0gPSB0aGlzLnByb3BzO1xuICAgIGNvbnN0IHsgY29waWVkIH0gPSB0aGlzLnN0YXRlO1xuXG4gICAgcmV0dXJuIGNoaWxkcmVuID8gKFxuICAgICAgPFdyYXBwZXIgYm9yZGVyZWQ9e2JvcmRlcmVkfSBwYWRkZWQ9e3BhZGRlZH0+XG4gICAgICAgIDxTY3JvbGxlcj5cbiAgICAgICAgICA8U3ludGF4SGlnaGxpZ2h0ZXJcbiAgICAgICAgICAgIHBhZGRlZD17cGFkZGVkIHx8IGJvcmRlcmVkfVxuICAgICAgICAgICAgbGFuZ3VhZ2U9e2xhbmd1YWdlfVxuICAgICAgICAgICAgdXNlSW5saW5lU3R5bGVzPXtmYWxzZX1cbiAgICAgICAgICAgIFByZVRhZz17UHJlfVxuICAgICAgICAgICAgQ29kZVRhZz17Q29kZX1cbiAgICAgICAgICAgIGxpbmVOdW1iZXJDb250YWluZXJTdHlsZT17e319XG4gICAgICAgICAgICB7Li4ucmVzdH1cbiAgICAgICAgICA+XG4gICAgICAgICAgICB7dGhpcy5mb3JtYXRDb2RlKGxhbmd1YWdlLCBjaGlsZHJlbi50cmltKCkpfVxuICAgICAgICAgIDwvU3ludGF4SGlnaGxpZ2h0ZXI+XG4gICAgICAgIDwvU2Nyb2xsZXI+XG4gICAgICAgIHtjb3B5YWJsZSA/IChcbiAgICAgICAgICA8QWN0aW9uQmFyPlxuICAgICAgICAgICAgPEFjdGlvbkJ1dHRvbiBvbkNsaWNrPXt0aGlzLm9uQ2xpY2t9Pntjb3BpZWQgPyAnY29waWVkJyA6ICdjb3B5J308L0FjdGlvbkJ1dHRvbj5cbiAgICAgICAgICA8L0FjdGlvbkJhcj5cbiAgICAgICAgKSA6IG51bGx9XG4gICAgICA8L1dyYXBwZXI+XG4gICAgKSA6IG51bGw7XG4gIH1cbn1cbiJdfQ== */", "name": "1maezg8", "styles": "flex:1;padding-right:0;opacity:1;", }, @@ -379,7 +324,7 @@ exports[`addon Info should render and external markdown 1`] = ` "__emotion_styles": Array [ "label:Pre;", [Function], - "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9zeW50YXhoaWdobGlnaHRlci9zeW50YXhoaWdobGlnaHRlci5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvRFkiLCJmaWxlIjoiLi4vLi4vc3JjL3N5bnRheGhpZ2hsaWdodGVyL3N5bnRheGhpZ2hsaWdodGVyLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBkb2N1bWVudCwgd2luZG93IH0gZnJvbSAnZ2xvYmFsJztcbmltcG9ydCBtZW1vaXplIGZyb20gJ21lbW9pemVyaWZpYyc7XG5cbmltcG9ydCBqc3ggZnJvbSAncmVhY3Qtc3ludGF4LWhpZ2hsaWdodGVyL2xhbmd1YWdlcy9wcmlzbS9qc3gnO1xuaW1wb3J0IGJhc2ggZnJvbSAncmVhY3Qtc3ludGF4LWhpZ2hsaWdodGVyL2xhbmd1YWdlcy9wcmlzbS9iYXNoJztcbmltcG9ydCBjc3MgZnJvbSAncmVhY3Qtc3ludGF4LWhpZ2hsaWdodGVyL2xhbmd1YWdlcy9wcmlzbS9jc3MnO1xuaW1wb3J0IGh0bWwgZnJvbSAncmVhY3Qtc3ludGF4LWhpZ2hsaWdodGVyL2xhbmd1YWdlcy9wcmlzbS9tYXJrdXAnO1xuXG5pbXBvcnQgU3ludGF4SGlnaGxpZ2h0ZXIsIHsgcmVnaXN0ZXJMYW5ndWFnZSB9IGZyb20gJ3JlYWN0LXN5bnRheC1oaWdobGlnaHRlci9wcmlzbS1saWdodCc7XG5pbXBvcnQgeyBqcyBhcyBiZWF1dGlmeSB9IGZyb20gJ2pzLWJlYXV0aWZ5JztcbmltcG9ydCB7IEFjdGlvbkJhciwgQWN0aW9uQnV0dG9uIH0gZnJvbSAnLi4vcGFuZWxfYWN0aW9uYmFyL3BhbmVsX2FjdGlvbmJhcic7XG5cbnJlZ2lzdGVyTGFuZ3VhZ2UoJ2pzeCcsIGpzeCk7XG5yZWdpc3Rlckxhbmd1YWdlKCdiYXNoJywgYmFzaCk7XG5yZWdpc3Rlckxhbmd1YWdlKCdjc3MnLCBjc3MpO1xucmVnaXN0ZXJMYW5ndWFnZSgnaHRtbCcsIGh0bWwpO1xuXG5jb25zdCB0aGVtZWRTeW50YXggPSBtZW1vaXplKDIpKHRoZW1lID0+XG4gIE9iamVjdC5lbnRyaWVzKHRoZW1lLmNvZGUgfHwge30pLnJlZHVjZSgoYWNjLCBba2V5LCB2YWxdKSA9PiAoeyAuLi5hY2MsIFtgKiAuJHtrZXl9YF06IHZhbCB9KSwge30pXG4pO1xuXG5jb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdihcbiAge1xuICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICAgIG92ZXJmbG93OiAnaGlkZGVuJyxcbiAgfSxcbiAgKHsgdGhlbWUsIGJvcmRlcmVkIH0pID0+XG4gICAgYm9yZGVyZWRcbiAgICAgID8ge1xuICAgICAgICAgIGJvcmRlcjogdGhlbWUubWFpbkJvcmRlcixcbiAgICAgICAgICBib3JkZXJSYWRpdXM6IHRoZW1lLm1haW5Cb3JkZXJSYWRpdXMsXG4gICAgICAgICAgYmFja2dyb3VuZDogdGhlbWUuYmFyRmlsbCxcbiAgICAgICAgfVxuICAgICAgOiB7fVxuKTtcblxuY29uc3QgU2Nyb2xsZXIgPSBzdHlsZWQuZGl2KFxuICB7XG4gICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgb3ZlcmZsb3c6ICdhdXRvJyxcbiAgfSxcbiAgKHsgdGhlbWUgfSkgPT4gKHtcbiAgICAnJiBjb2RlJzoge1xuICAgICAgcGFkZGluZ1JpZ2h0OiB0aGVtZS5sYXlvdXRNYXJnaW4sXG4gICAgICBvcGFjaXR5OiAwLjcsXG4gICAgfSxcbiAgfSksXG4gICh7IHRoZW1lIH0pID0+IHRoZW1lZFN5bnRheCh0aGVtZSlcbik7XG5cbmNvbnN0IFByZSA9IHN0eWxlZC5wcmUoKHsgdGhlbWUsIHBhZGRlZCB9KSA9PiAoe1xuICBkaXNwbGF5OiAnZmxleCcsXG4gIGp1c3RpZnlDb250ZW50OiAnZmxleC1zdGFydCcsXG4gIG1hcmdpbjogMCxcbiAgcGFkZGluZzogcGFkZGVkID8gdGhlbWUubGF5b3V0TWFyZ2luIDogMCxcbn0pKTtcblxuY29uc3QgQ29kZSA9IHN0eWxlZC5jb2RlKHtcbiAgZmxleDogMSxcbiAgcGFkZGluZ1JpZ2h0OiAwLFxuICBvcGFjaXR5OiAxLFxufSk7XG5cbmV4cG9ydCBkZWZhdWx0IGNsYXNzIENvcHlhYmxlIGV4dGVuZHMgUHVyZUNvbXBvbmVudCB7XG4gIHN0YXRlID0geyBjb3BpZWQ6IGZhbHNlIH07XG5cbiAgZm9ybWF0Q29kZSA9IG1lbW9pemUoMikoKGxhbmd1YWdlLCBjb2RlKSA9PiB7XG4gICAgbGV0IGZvcm1hdHRlZENvZGUgPSBjb2RlO1xuICAgIGlmIChsYW5ndWFnZSA9PT0gJ2pzeCcpIHtcbiAgICAgIHRyeSB7XG4gICAgICAgIGZvcm1hdHRlZENvZGUgPSBiZWF1dGlmeShjb2RlLCB7XG4gICAgICAgICAgaW5kZW50X3NpemU6IDIsXG4gICAgICAgICAgYnJhY2Vfc3R5bGU6ICdjb2xsYXBzZSxwcmVzZXJ2ZS1pbmxpbmUnLFxuICAgICAgICAgIGVuZF93aXRoX25ld2xpbmU6IHRydWUsXG4gICAgICAgICAgd3JhcF9saW5lX2xlbmd0aDogODAsXG4gICAgICAgICAgZTR4OiB0cnVlLFxuICAgICAgICB9KTtcbiAgICAgIH0gY2F0Y2ggKGVycm9yKSB7XG4gICAgICAgIGNvbnNvbGUud2FybihcIkNvdWxkbid0IGZvcm1hdCBjb2RlXCIsIGZvcm1hdHRlZENvZGUpOyAvLyBlc2xpbnQtZGlzYWJsZS1saW5lIG5vLWNvbnNvbGVcbiAgICAgIH1cbiAgICB9XG4gICAgcmV0dXJuIGZvcm1hdHRlZENvZGU7XG4gIH0pO1xuXG4gIG9uQ2xpY2sgPSBlID0+IHtcbiAgICBjb25zdCB7IGNoaWxkcmVuIH0gPSB0aGlzLnByb3BzO1xuXG4gICAgZS5wcmV2ZW50RGVmYXVsdCgpO1xuICAgIGNvbnN0IHRtcCA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ1RFWFRBUkVBJyk7XG4gICAgY29uc3QgZm9jdXMgPSBkb2N1bWVudC5hY3RpdmVFbGVtZW50O1xuXG4gICAgdG1wLnZhbHVlID0gY2hpbGRyZW47XG5cbiAgICBkb2N1bWVudC5ib2R5LmFwcGVuZENoaWxkKHRtcCk7XG4gICAgdG1wLnNlbGVjdCgpO1xuICAgIGRvY3VtZW50LmV4ZWNDb21tYW5kKCdjb3B5Jyk7XG4gICAgZG9jdW1lbnQuYm9keS5yZW1vdmVDaGlsZCh0bXApO1xuICAgIGZvY3VzLmZvY3VzKCk7XG5cbiAgICB0aGlzLnNldFN0YXRlKHsgY29waWVkOiB0cnVlIH0sICgpID0+IHtcbiAgICAgIHdpbmRvdy5zZXRUaW1lb3V0KCgpID0+IHRoaXMuc2V0U3RhdGUoeyBjb3BpZWQ6IGZhbHNlIH0pLCAxNTAwKTtcbiAgICB9KTtcbiAgfTtcblxuICByZW5kZXIoKSB7XG4gICAgY29uc3QgeyBjaGlsZHJlbiwgbGFuZ3VhZ2UgPSAnanN4JywgY29weWFibGUgPSB0cnVlLCBib3JkZXJlZCwgcGFkZGVkLCAuLi5yZXN0IH0gPSB0aGlzLnByb3BzO1xuICAgIGNvbnN0IHsgY29waWVkIH0gPSB0aGlzLnN0YXRlO1xuXG4gICAgcmV0dXJuIGNoaWxkcmVuID8gKFxuICAgICAgPFdyYXBwZXIgYm9yZGVyZWQ9e2JvcmRlcmVkfSBwYWRkZWQ9e3BhZGRlZH0+XG4gICAgICAgIDxTY3JvbGxlcj5cbiAgICAgICAgICA8U3ludGF4SGlnaGxpZ2h0ZXJcbiAgICAgICAgICAgIHBhZGRlZD17cGFkZGVkIHx8IGJvcmRlcmVkfVxuICAgICAgICAgICAgbGFuZ3VhZ2U9e2xhbmd1YWdlfVxuICAgICAgICAgICAgdXNlSW5saW5lU3R5bGVzPXtmYWxzZX1cbiAgICAgICAgICAgIFByZVRhZz17UHJlfVxuICAgICAgICAgICAgQ29kZVRhZz17Q29kZX1cbiAgICAgICAgICAgIGxpbmVOdW1iZXJDb250YWluZXJTdHlsZT17e319XG4gICAgICAgICAgICB7Li4ucmVzdH1cbiAgICAgICAgICA+XG4gICAgICAgICAgICB7dGhpcy5mb3JtYXRDb2RlKGxhbmd1YWdlLCBjaGlsZHJlbi50cmltKCkpfVxuICAgICAgICAgIDwvU3ludGF4SGlnaGxpZ2h0ZXI+XG4gICAgICAgIDwvU2Nyb2xsZXI+XG4gICAgICAgIHtjb3B5YWJsZSA/IChcbiAgICAgICAgICA8QWN0aW9uQmFyPlxuICAgICAgICAgICAgPEFjdGlvbkJ1dHRvbiBvbkNsaWNrPXt0aGlzLm9uQ2xpY2t9Pntjb3BpZWQgPyAnY29waWVkJyA6ICdjb3B5J308L0FjdGlvbkJ1dHRvbj5cbiAgICAgICAgICA8L0FjdGlvbkJhcj5cbiAgICAgICAgKSA6IG51bGx9XG4gICAgICA8L1dyYXBwZXI+XG4gICAgKSA6IG51bGw7XG4gIH1cbn1cbiJdfQ== */", + "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9zeW50YXhoaWdobGlnaHRlci9zeW50YXhoaWdobGlnaHRlci5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvRFkiLCJmaWxlIjoiLi4vLi4vc3JjL3N5bnRheGhpZ2hsaWdodGVyL3N5bnRheGhpZ2hsaWdodGVyLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBkb2N1bWVudCwgd2luZG93IH0gZnJvbSAnZ2xvYmFsJztcbmltcG9ydCBtZW1vaXplIGZyb20gJ21lbW9pemVyaWZpYyc7XG5cbmltcG9ydCBqc3ggZnJvbSAncmVhY3Qtc3ludGF4LWhpZ2hsaWdodGVyL2xhbmd1YWdlcy9wcmlzbS9qc3gnO1xuaW1wb3J0IGJhc2ggZnJvbSAncmVhY3Qtc3ludGF4LWhpZ2hsaWdodGVyL2xhbmd1YWdlcy9wcmlzbS9iYXNoJztcbmltcG9ydCBjc3MgZnJvbSAncmVhY3Qtc3ludGF4LWhpZ2hsaWdodGVyL2xhbmd1YWdlcy9wcmlzbS9jc3MnO1xuaW1wb3J0IGh0bWwgZnJvbSAncmVhY3Qtc3ludGF4LWhpZ2hsaWdodGVyL2xhbmd1YWdlcy9wcmlzbS9tYXJrdXAnO1xuXG5pbXBvcnQgU3ludGF4SGlnaGxpZ2h0ZXIsIHsgcmVnaXN0ZXJMYW5ndWFnZSB9IGZyb20gJ3JlYWN0LXN5bnRheC1oaWdobGlnaHRlci9wcmlzbS1saWdodCc7XG5pbXBvcnQgeyBqcyBhcyBiZWF1dGlmeSB9IGZyb20gJ2pzLWJlYXV0aWZ5JztcbmltcG9ydCB7IEFjdGlvbkJhciwgQWN0aW9uQnV0dG9uIH0gZnJvbSAnLi4vcGFuZWxfYWN0aW9uYmFyL3BhbmVsX2FjdGlvbmJhcic7XG5cbnJlZ2lzdGVyTGFuZ3VhZ2UoJ2pzeCcsIGpzeCk7XG5yZWdpc3Rlckxhbmd1YWdlKCdiYXNoJywgYmFzaCk7XG5yZWdpc3Rlckxhbmd1YWdlKCdjc3MnLCBjc3MpO1xucmVnaXN0ZXJMYW5ndWFnZSgnaHRtbCcsIGh0bWwpO1xuXG5jb25zdCB0aGVtZWRTeW50YXggPSBtZW1vaXplKDIpKHRoZW1lID0+XG4gIE9iamVjdC5lbnRyaWVzKHRoZW1lLmNvZGUgfHwge30pLnJlZHVjZSgoYWNjLCBba2V5LCB2YWxdKSA9PiAoeyAuLi5hY2MsIFtgKiAuJHtrZXl9YF06IHZhbCB9KSwge30pXG4pO1xuXG5jb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdihcbiAge1xuICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICAgIG92ZXJmbG93OiAnaGlkZGVuJyxcbiAgfSxcbiAgKHsgdGhlbWUsIGJvcmRlcmVkIH0pID0+XG4gICAgYm9yZGVyZWRcbiAgICAgID8ge1xuICAgICAgICAgIGJvcmRlcjogdGhlbWUubWFpbkJvcmRlcixcbiAgICAgICAgICBib3JkZXJSYWRpdXM6IHRoZW1lLm1haW5Cb3JkZXJSYWRpdXMsXG4gICAgICAgICAgYmFja2dyb3VuZDogdGhlbWUuYmFyRmlsbCxcbiAgICAgICAgfVxuICAgICAgOiB7fVxuKTtcblxuY29uc3QgU2Nyb2xsZXIgPSBzdHlsZWQuZGl2KFxuICB7XG4gICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgb3ZlcmZsb3c6ICdhdXRvJyxcbiAgfSxcbiAgKHsgdGhlbWUgfSkgPT4gKHtcbiAgICAnJiBjb2RlJzoge1xuICAgICAgcGFkZGluZ1JpZ2h0OiB0aGVtZS5sYXlvdXRNYXJnaW4sXG4gICAgICBvcGFjaXR5OiAwLjcsXG4gICAgfSxcbiAgfSksXG4gICh7IHRoZW1lIH0pID0+IHRoZW1lZFN5bnRheCh0aGVtZSlcbik7XG5cbmNvbnN0IFByZSA9IHN0eWxlZC5wcmUoKHsgdGhlbWUsIHBhZGRlZCB9KSA9PiAoe1xuICBkaXNwbGF5OiAnZmxleCcsXG4gIGp1c3RpZnlDb250ZW50OiAnZmxleC1zdGFydCcsXG4gIG1hcmdpbjogMCxcbiAgcGFkZGluZzogcGFkZGVkID8gdGhlbWUubGF5b3V0TWFyZ2luIDogMCxcbn0pKTtcblxuY29uc3QgQ29kZSA9IHN0eWxlZC5jb2RlKHtcbiAgZmxleDogMSxcbiAgcGFkZGluZ1JpZ2h0OiAwLFxuICBvcGFjaXR5OiAxLFxufSk7XG5cbmV4cG9ydCBkZWZhdWx0IGNsYXNzIENvcHlhYmxlQ29kZSBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICBzdGF0ZSA9IHsgY29waWVkOiBmYWxzZSB9O1xuXG4gIGZvcm1hdENvZGUgPSBtZW1vaXplKDIpKChsYW5ndWFnZSwgY29kZSkgPT4ge1xuICAgIGxldCBmb3JtYXR0ZWRDb2RlID0gY29kZTtcbiAgICBpZiAobGFuZ3VhZ2UgPT09ICdqc3gnKSB7XG4gICAgICB0cnkge1xuICAgICAgICBmb3JtYXR0ZWRDb2RlID0gYmVhdXRpZnkoY29kZSwge1xuICAgICAgICAgIGluZGVudF9zaXplOiAyLFxuICAgICAgICAgIGJyYWNlX3N0eWxlOiAnY29sbGFwc2UscHJlc2VydmUtaW5saW5lJyxcbiAgICAgICAgICBlbmRfd2l0aF9uZXdsaW5lOiB0cnVlLFxuICAgICAgICAgIHdyYXBfbGluZV9sZW5ndGg6IDgwLFxuICAgICAgICAgIGU0eDogdHJ1ZSxcbiAgICAgICAgfSk7XG4gICAgICB9IGNhdGNoIChlcnJvcikge1xuICAgICAgICBjb25zb2xlLndhcm4oXCJDb3VsZG4ndCBmb3JtYXQgY29kZVwiLCBmb3JtYXR0ZWRDb2RlKTsgLy8gZXNsaW50LWRpc2FibGUtbGluZSBuby1jb25zb2xlXG4gICAgICB9XG4gICAgfVxuICAgIHJldHVybiBmb3JtYXR0ZWRDb2RlO1xuICB9KTtcblxuICBvbkNsaWNrID0gZSA9PiB7XG4gICAgY29uc3QgeyBjaGlsZHJlbiB9ID0gdGhpcy5wcm9wcztcblxuICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICBjb25zdCB0bXAgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdURVhUQVJFQScpO1xuICAgIGNvbnN0IGZvY3VzID0gZG9jdW1lbnQuYWN0aXZlRWxlbWVudDtcblxuICAgIHRtcC52YWx1ZSA9IGNoaWxkcmVuO1xuXG4gICAgZG9jdW1lbnQuYm9keS5hcHBlbmRDaGlsZCh0bXApO1xuICAgIHRtcC5zZWxlY3QoKTtcbiAgICBkb2N1bWVudC5leGVjQ29tbWFuZCgnY29weScpO1xuICAgIGRvY3VtZW50LmJvZHkucmVtb3ZlQ2hpbGQodG1wKTtcbiAgICBmb2N1cy5mb2N1cygpO1xuXG4gICAgdGhpcy5zZXRTdGF0ZSh7IGNvcGllZDogdHJ1ZSB9LCAoKSA9PiB7XG4gICAgICB3aW5kb3cuc2V0VGltZW91dCgoKSA9PiB0aGlzLnNldFN0YXRlKHsgY29waWVkOiBmYWxzZSB9KSwgMTUwMCk7XG4gICAgfSk7XG4gIH07XG5cbiAgcmVuZGVyKCkge1xuICAgIGNvbnN0IHsgY2hpbGRyZW4sIGxhbmd1YWdlID0gJ2pzeCcsIGNvcHlhYmxlLCBib3JkZXJlZCwgcGFkZGVkLCAuLi5yZXN0IH0gPSB0aGlzLnByb3BzO1xuICAgIGNvbnN0IHsgY29waWVkIH0gPSB0aGlzLnN0YXRlO1xuXG4gICAgcmV0dXJuIGNoaWxkcmVuID8gKFxuICAgICAgPFdyYXBwZXIgYm9yZGVyZWQ9e2JvcmRlcmVkfSBwYWRkZWQ9e3BhZGRlZH0+XG4gICAgICAgIDxTY3JvbGxlcj5cbiAgICAgICAgICA8U3ludGF4SGlnaGxpZ2h0ZXJcbiAgICAgICAgICAgIHBhZGRlZD17cGFkZGVkIHx8IGJvcmRlcmVkfVxuICAgICAgICAgICAgbGFuZ3VhZ2U9e2xhbmd1YWdlfVxuICAgICAgICAgICAgdXNlSW5saW5lU3R5bGVzPXtmYWxzZX1cbiAgICAgICAgICAgIFByZVRhZz17UHJlfVxuICAgICAgICAgICAgQ29kZVRhZz17Q29kZX1cbiAgICAgICAgICAgIGxpbmVOdW1iZXJDb250YWluZXJTdHlsZT17e319XG4gICAgICAgICAgICB7Li4ucmVzdH1cbiAgICAgICAgICA+XG4gICAgICAgICAgICB7dGhpcy5mb3JtYXRDb2RlKGxhbmd1YWdlLCBjaGlsZHJlbi50cmltKCkpfVxuICAgICAgICAgIDwvU3ludGF4SGlnaGxpZ2h0ZXI+XG4gICAgICAgIDwvU2Nyb2xsZXI+XG4gICAgICAgIHtjb3B5YWJsZSA/IChcbiAgICAgICAgICA8QWN0aW9uQmFyPlxuICAgICAgICAgICAgPEFjdGlvbkJ1dHRvbiBvbkNsaWNrPXt0aGlzLm9uQ2xpY2t9Pntjb3BpZWQgPyAnY29waWVkJyA6ICdjb3B5J308L0FjdGlvbkJ1dHRvbj5cbiAgICAgICAgICA8L0FjdGlvbkJhcj5cbiAgICAgICAgKSA6IG51bGx9XG4gICAgICA8L1dyYXBwZXI+XG4gICAgKSA6IG51bGw7XG4gIH1cbn1cbiJdfQ== */", ], "defaultProps": undefined, "displayName": "Pre", @@ -804,37 +749,9 @@ exports[`addon Info should render and external markdown 1`] = `
- - -
    - -
  • - - - -
    • -     -
- -
- +

and external markdown 1`] = ` `; exports[`addon Info should render and markdown 1`] = ` -.emotion-12 { +.emotion-6 { position: relative; overflow: hidden; } @@ -929,61 +846,6 @@ exports[`addon Info should render and markdown 1`] = ` opacity: 1; } -.emotion-10 { - position: absolute; - bottom: 0; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; - border-radius: undefinedpx 0 0 0; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - list-style: none; - padding: 0; - height: 26px; - font-size: 11px; - -webkit-letter-spacing: 1px; - -moz-letter-spacing: 1px; - -ms-letter-spacing: 1px; - letter-spacing: 1px; - text-transform: uppercase; - border-left: 0 none; -} - -.emotion-6 { - border: 0 none; - display: block; - background: none; - padding: 0 10px; - cursor: pointer; - text-transform: inherit; - -webkit-letter-spacing: inherit; - -moz-letter-spacing: inherit; - -ms-letter-spacing: inherit; - letter-spacing: inherit; - font-size: inherit; - color: inherit; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; -} - -.emotion-6:focus { - border-bottom: 2px solid undefined; - outline: 0 none; -} - Story Source

-
- - -
    - -
  • - - - -
    • -     -
- -
- +

Story Source

-
- - -
    - -
  • - - - -
    • -     -
- -
- +
diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot index b456131ed13..d5d7633cf8a 100644 --- a/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot +++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Button with new info 1`] = ` -.emotion-12 { +.emotion-6 { position: relative; overflow: hidden; } @@ -36,88 +36,33 @@ exports[`Storyshots Button with new info 1`] = ` opacity: 1; } -.emotion-10 { - position: absolute; - bottom: 0; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; - border-radius: undefinedpx 0 0 0; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - list-style: none; - padding: 0; - height: 26px; - font-size: 11px; - -webkit-letter-spacing: 1px; - -moz-letter-spacing: 1px; - -ms-letter-spacing: 1px; - letter-spacing: 1px; - text-transform: uppercase; - border-left: 0 none; -} - -.emotion-6 { - border: 0 none; - display: block; - background: none; - padding: 0 10px; - cursor: pointer; - text-transform: inherit; - -webkit-letter-spacing: inherit; - -moz-letter-spacing: inherit; - -ms-letter-spacing: inherit; - letter-spacing: inherit; - font-size: inherit; - color: inherit; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; -} - -.emotion-6:focus { - border-bottom: 2px solid undefined; - outline: 0 none; -} - -.emotion-76 { +.emotion-70 { border-collapse: collapse; margin-top: 16px; width: auto; table-layout: auto; } -.emotion-24 { +.emotion-18 { border-bottom: 1px solid rgba(0,0,0,0.1); } -.emotion-14 { +.emotion-8 { padding: 2px 6px; line-height: 18px; vertical-align: middle; padding: 8px 16px; } -.emotion-74 { +.emotion-68 { font-size: 14px; } -.emotion-36 { +.emotion-30 { border-bottom: 1px solid #eee; } -.emotion-26 { +.emotion-20 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -126,7 +71,7 @@ exports[`Storyshots Button with new info 1`] = ` color: #774dd7; } -.emotion-28 { +.emotion-22 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -135,15 +80,15 @@ exports[`Storyshots Button with new info 1`] = ` color: #1ea7fd; } -.emotion-28 button { +.emotion-22 button { color: #37d5d3; } -.emotion-28 span { +.emotion-22 span { white-space: pre; } -.emotion-30 { +.emotion-24 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -151,7 +96,7 @@ exports[`Storyshots Button with new info 1`] = ` padding: 8px 16px; } -.emotion-34 { +.emotion-28 { padding: 2px 6px; text-align: left; padding: 8px 16px; @@ -236,7 +181,7 @@ exports[`Storyshots Button with new info 1`] = ` Story Source
-
    -
  • - -
    • -
@@ -402,124 +334,124 @@ exports[`Storyshots Button with new info 1`] = ` "Container" Component diff --git a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot index 2eda9efe45a..104ca945b89 100644 --- a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot +++ b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot @@ -1,72 +1,14 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Addons|Info/Decorator Use Info as story decorator 1`] = ` -.emotion-78 { +.emotion-72 { 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; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; - border-top: 1px solid rgba(0,0,0,0.1); - border-left: 1px solid rgba(0,0,0,0.1); - background: rgba(255,255,255,1); - border-radius: 4px 0 0 0; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - list-style: none; - padding: 0; - height: 26px; - font-size: 11px; - -webkit-letter-spacing: 1px; - -moz-letter-spacing: 1px; - -ms-letter-spacing: 1px; - letter-spacing: 1px; - text-transform: uppercase; - border-left: 0 none; -} - .emotion-6 { - border: 0 none; - display: block; - background: none; - padding: 0 10px; - cursor: pointer; - text-transform: inherit; - -webkit-letter-spacing: inherit; - -moz-letter-spacing: inherit; - -ms-letter-spacing: inherit; - letter-spacing: inherit; - font-size: inherit; - color: inherit; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; -} - -.emotion-6:focus { - border-bottom: 2px solid #9fdaff; - outline: 0 none; -} - -.emotion-12 { position: relative; overflow: hidden; } @@ -248,33 +190,33 @@ exports[`Storyshots Addons|Info/Decorator Use Info as story decorator 1`] = ` opacity: 1; } -.emotion-76 { +.emotion-70 { border-collapse: collapse; margin-top: 16px; width: auto; table-layout: auto; } -.emotion-24 { +.emotion-18 { border-bottom: 1px solid rgba(0,0,0,0.1); } -.emotion-14 { +.emotion-8 { padding: 2px 6px; line-height: 18px; vertical-align: middle; padding: 8px 16px; } -.emotion-74 { +.emotion-68 { font-size: 14px; } -.emotion-36 { +.emotion-30 { border-bottom: 1px solid #eee; } -.emotion-26 { +.emotion-20 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -283,7 +225,7 @@ exports[`Storyshots Addons|Info/Decorator Use Info as story decorator 1`] = ` color: #774dd7; } -.emotion-28 { +.emotion-22 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -292,15 +234,15 @@ exports[`Storyshots Addons|Info/Decorator Use Info as story decorator 1`] = ` color: #1ea7fd; } -.emotion-28 button { +.emotion-22 button { color: #37d5d3; } -.emotion-28 span { +.emotion-22 span { white-space: pre; } -.emotion-30 { +.emotion-24 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -308,14 +250,14 @@ exports[`Storyshots Addons|Info/Decorator Use Info as story decorator 1`] = ` padding: 8px 16px; } -.emotion-34 { +.emotion-28 { padding: 2px 6px; text-align: left; padding: 8px 16px; }
-
    -
  • - -
    • -
@@ -469,162 +398,162 @@ exports[`Storyshots Addons|Info/Decorator Use Info as story decorator 1`] = ` "BaseButton" Component
Property Type Required Default Description
children node yes -
isAmazing bool - false
age other - { @@ -546,38 +478,38 @@ exports[`Storyshots Button with new info 1`] = `
title string - the best container ever
@@ -639,72 +568,14 @@ exports[`Storyshots Addons|Info/Decorator Use Info as story decorator 1`] = ` `; exports[`Storyshots Addons|Info/ForwardRef Displays forwarded ref components correctly 1`] = ` -.emotion-78 { +.emotion-72 { 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; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; - border-top: 1px solid rgba(0,0,0,0.1); - border-left: 1px solid rgba(0,0,0,0.1); - background: rgba(255,255,255,1); - border-radius: 4px 0 0 0; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - list-style: none; - padding: 0; - height: 26px; - font-size: 11px; - -webkit-letter-spacing: 1px; - -moz-letter-spacing: 1px; - -ms-letter-spacing: 1px; - letter-spacing: 1px; - text-transform: uppercase; - border-left: 0 none; -} - .emotion-6 { - border: 0 none; - display: block; - background: none; - padding: 0 10px; - cursor: pointer; - text-transform: inherit; - -webkit-letter-spacing: inherit; - -moz-letter-spacing: inherit; - -ms-letter-spacing: inherit; - letter-spacing: inherit; - font-size: inherit; - color: inherit; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; -} - -.emotion-6:focus { - border-bottom: 2px solid #9fdaff; - outline: 0 none; -} - -.emotion-12 { position: relative; overflow: hidden; } @@ -886,33 +757,33 @@ exports[`Storyshots Addons|Info/ForwardRef Displays forwarded ref components cor opacity: 1; } -.emotion-76 { +.emotion-70 { border-collapse: collapse; margin-top: 16px; width: auto; table-layout: auto; } -.emotion-24 { +.emotion-18 { border-bottom: 1px solid rgba(0,0,0,0.1); } -.emotion-14 { +.emotion-8 { padding: 2px 6px; line-height: 18px; vertical-align: middle; padding: 8px 16px; } -.emotion-74 { +.emotion-68 { font-size: 14px; } -.emotion-36 { +.emotion-30 { border-bottom: 1px solid #eee; } -.emotion-26 { +.emotion-20 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -921,7 +792,7 @@ exports[`Storyshots Addons|Info/ForwardRef Displays forwarded ref components cor color: #774dd7; } -.emotion-28 { +.emotion-22 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -930,15 +801,15 @@ exports[`Storyshots Addons|Info/ForwardRef Displays forwarded ref components cor color: #1ea7fd; } -.emotion-28 button { +.emotion-22 button { color: #37d5d3; } -.emotion-28 span { +.emotion-22 span { white-space: pre; } -.emotion-30 { +.emotion-24 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -946,14 +817,14 @@ exports[`Storyshots Addons|Info/ForwardRef Displays forwarded ref components cor padding: 8px 16px; } -.emotion-34 { +.emotion-28 { padding: 2px 6px; text-align: left; padding: 8px 16px; }
-
    -
  • - -
    • -
@@ -1093,162 +951,162 @@ exports[`Storyshots Addons|Info/ForwardRef Displays forwarded ref components cor "BaseButton" Component
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -1263,72 +1121,14 @@ exports[`Storyshots Addons|Info/ForwardRef Displays forwarded ref components cor `; exports[`Storyshots Addons|Info/GitHub issues #1814 1`] = ` -.emotion-14 { +.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-10 { - position: absolute; - bottom: 0; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; - border-top: 1px solid rgba(0,0,0,0.1); - border-left: 1px solid rgba(0,0,0,0.1); - background: rgba(255,255,255,1); - border-radius: 4px 0 0 0; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - list-style: none; - padding: 0; - height: 26px; - font-size: 11px; - -webkit-letter-spacing: 1px; - -moz-letter-spacing: 1px; - -ms-letter-spacing: 1px; - letter-spacing: 1px; - text-transform: uppercase; - border-left: 0 none; -} - .emotion-6 { - border: 0 none; - display: block; - background: none; - padding: 0 10px; - cursor: pointer; - text-transform: inherit; - -webkit-letter-spacing: inherit; - -moz-letter-spacing: inherit; - -ms-letter-spacing: inherit; - letter-spacing: inherit; - font-size: inherit; - color: inherit; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; -} - -.emotion-6:focus { - border-bottom: 2px solid #9fdaff; - outline: 0 none; -} - -.emotion-12 { position: relative; overflow: hidden; } @@ -1511,7 +1311,7 @@ exports[`Storyshots Addons|Info/GitHub issues #1814 1`] = ` }
-
    -
  • - -
    • -
@@ -1762,72 +1549,14 @@ exports[`Storyshots Addons|Info/GitHub issues #1814 1`] = ` `; exports[`Storyshots Addons|Info/JSX Displays JSX in description 1`] = ` -.emotion-78 { +.emotion-72 { 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; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; - border-top: 1px solid rgba(0,0,0,0.1); - border-left: 1px solid rgba(0,0,0,0.1); - background: rgba(255,255,255,1); - border-radius: 4px 0 0 0; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - list-style: none; - padding: 0; - height: 26px; - font-size: 11px; - -webkit-letter-spacing: 1px; - -moz-letter-spacing: 1px; - -ms-letter-spacing: 1px; - letter-spacing: 1px; - text-transform: uppercase; - border-left: 0 none; -} - .emotion-6 { - border: 0 none; - display: block; - background: none; - padding: 0 10px; - cursor: pointer; - text-transform: inherit; - -webkit-letter-spacing: inherit; - -moz-letter-spacing: inherit; - -ms-letter-spacing: inherit; - letter-spacing: inherit; - font-size: inherit; - color: inherit; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; -} - -.emotion-6:focus { - border-bottom: 2px solid #9fdaff; - outline: 0 none; -} - -.emotion-12 { position: relative; overflow: hidden; } @@ -2009,33 +1738,33 @@ exports[`Storyshots Addons|Info/JSX Displays JSX in description 1`] = ` opacity: 1; } -.emotion-76 { +.emotion-70 { border-collapse: collapse; margin-top: 16px; width: auto; table-layout: auto; } -.emotion-24 { +.emotion-18 { border-bottom: 1px solid rgba(0,0,0,0.1); } -.emotion-14 { +.emotion-8 { padding: 2px 6px; line-height: 18px; vertical-align: middle; padding: 8px 16px; } -.emotion-74 { +.emotion-68 { font-size: 14px; } -.emotion-36 { +.emotion-30 { border-bottom: 1px solid #eee; } -.emotion-26 { +.emotion-20 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -2044,7 +1773,7 @@ exports[`Storyshots Addons|Info/JSX Displays JSX in description 1`] = ` color: #774dd7; } -.emotion-28 { +.emotion-22 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -2053,15 +1782,15 @@ exports[`Storyshots Addons|Info/JSX Displays JSX in description 1`] = ` color: #1ea7fd; } -.emotion-28 button { +.emotion-22 button { color: #37d5d3; } -.emotion-28 span { +.emotion-22 span { white-space: pre; } -.emotion-30 { +.emotion-24 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -2069,14 +1798,14 @@ exports[`Storyshots Addons|Info/JSX Displays JSX in description 1`] = ` padding: 8px 16px; } -.emotion-34 { +.emotion-28 { padding: 2px 6px; text-align: left; padding: 8px 16px; }
-
    -
  • - -
    • -
@@ -2306,162 +2022,162 @@ exports[`Storyshots Addons|Info/JSX Displays JSX in description 1`] = ` "BaseButton" Component
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -2476,72 +2192,14 @@ exports[`Storyshots Addons|Info/JSX Displays JSX in description 1`] = ` `; exports[`Storyshots Addons|Info/Markdown Displays Markdown in description 1`] = ` -.emotion-78 { +.emotion-72 { 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; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; - border-top: 1px solid rgba(0,0,0,0.1); - border-left: 1px solid rgba(0,0,0,0.1); - background: rgba(255,255,255,1); - border-radius: 4px 0 0 0; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - list-style: none; - padding: 0; - height: 26px; - font-size: 11px; - -webkit-letter-spacing: 1px; - -moz-letter-spacing: 1px; - -ms-letter-spacing: 1px; - letter-spacing: 1px; - text-transform: uppercase; - border-left: 0 none; -} - .emotion-6 { - border: 0 none; - display: block; - background: none; - padding: 0 10px; - cursor: pointer; - text-transform: inherit; - -webkit-letter-spacing: inherit; - -moz-letter-spacing: inherit; - -ms-letter-spacing: inherit; - letter-spacing: inherit; - font-size: inherit; - color: inherit; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; -} - -.emotion-6:focus { - border-bottom: 2px solid #9fdaff; - outline: 0 none; -} - -.emotion-12 { position: relative; overflow: hidden; } @@ -2723,33 +2381,33 @@ exports[`Storyshots Addons|Info/Markdown Displays Markdown in description 1`] = opacity: 1; } -.emotion-76 { +.emotion-70 { border-collapse: collapse; margin-top: 16px; width: auto; table-layout: auto; } -.emotion-24 { +.emotion-18 { border-bottom: 1px solid rgba(0,0,0,0.1); } -.emotion-14 { +.emotion-8 { padding: 2px 6px; line-height: 18px; vertical-align: middle; padding: 8px 16px; } -.emotion-74 { +.emotion-68 { font-size: 14px; } -.emotion-36 { +.emotion-30 { border-bottom: 1px solid #eee; } -.emotion-26 { +.emotion-20 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -2758,7 +2416,7 @@ exports[`Storyshots Addons|Info/Markdown Displays Markdown in description 1`] = color: #774dd7; } -.emotion-28 { +.emotion-22 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -2767,15 +2425,15 @@ exports[`Storyshots Addons|Info/Markdown Displays Markdown in description 1`] = color: #1ea7fd; } -.emotion-28 button { +.emotion-22 button { color: #37d5d3; } -.emotion-28 span { +.emotion-22 span { white-space: pre; } -.emotion-30 { +.emotion-24 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -2783,14 +2441,14 @@ exports[`Storyshots Addons|Info/Markdown Displays Markdown in description 1`] = padding: 8px 16px; } -.emotion-34 { +.emotion-28 { padding: 2px 6px; text-align: left; padding: 8px 16px; }
-
    -
  • - -
    • -
@@ -3024,162 +2669,162 @@ exports[`Storyshots Addons|Info/Markdown Displays Markdown in description 1`] = "BaseButton" Component
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -3194,72 +2839,14 @@ exports[`Storyshots Addons|Info/Markdown Displays Markdown in description 1`] = `; exports[`Storyshots Addons|Info/Markdown From external Markdown file 1`] = ` -.emotion-78 { +.emotion-72 { 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; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; - border-top: 1px solid rgba(0,0,0,0.1); - border-left: 1px solid rgba(0,0,0,0.1); - background: rgba(255,255,255,1); - border-radius: 4px 0 0 0; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - list-style: none; - padding: 0; - height: 26px; - font-size: 11px; - -webkit-letter-spacing: 1px; - -moz-letter-spacing: 1px; - -ms-letter-spacing: 1px; - letter-spacing: 1px; - text-transform: uppercase; - border-left: 0 none; -} - .emotion-6 { - border: 0 none; - display: block; - background: none; - padding: 0 10px; - cursor: pointer; - text-transform: inherit; - -webkit-letter-spacing: inherit; - -moz-letter-spacing: inherit; - -ms-letter-spacing: inherit; - letter-spacing: inherit; - font-size: inherit; - color: inherit; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; -} - -.emotion-6:focus { - border-bottom: 2px solid #9fdaff; - outline: 0 none; -} - -.emotion-12 { position: relative; overflow: hidden; } @@ -3441,33 +3028,33 @@ exports[`Storyshots Addons|Info/Markdown From external Markdown file 1`] = ` opacity: 1; } -.emotion-76 { +.emotion-70 { border-collapse: collapse; margin-top: 16px; width: auto; table-layout: auto; } -.emotion-24 { +.emotion-18 { border-bottom: 1px solid rgba(0,0,0,0.1); } -.emotion-14 { +.emotion-8 { padding: 2px 6px; line-height: 18px; vertical-align: middle; padding: 8px 16px; } -.emotion-74 { +.emotion-68 { font-size: 14px; } -.emotion-36 { +.emotion-30 { border-bottom: 1px solid #eee; } -.emotion-26 { +.emotion-20 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -3476,7 +3063,7 @@ exports[`Storyshots Addons|Info/Markdown From external Markdown file 1`] = ` color: #774dd7; } -.emotion-28 { +.emotion-22 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -3485,15 +3072,15 @@ exports[`Storyshots Addons|Info/Markdown From external Markdown file 1`] = ` color: #1ea7fd; } -.emotion-28 button { +.emotion-22 button { color: #37d5d3; } -.emotion-28 span { +.emotion-22 span { white-space: pre; } -.emotion-30 { +.emotion-24 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -3501,14 +3088,14 @@ exports[`Storyshots Addons|Info/Markdown From external Markdown file 1`] = ` padding: 8px 16px; } -.emotion-34 { +.emotion-28 { padding: 2px 6px; text-align: left; padding: 8px 16px; }
-
    -
  • - -
    • -
@@ -3722,162 +3296,162 @@ exports[`Storyshots Addons|Info/Markdown From external Markdown file 1`] = ` "BaseButton" Component
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -3892,72 +3466,14 @@ exports[`Storyshots Addons|Info/Markdown From external Markdown file 1`] = ` `; exports[`Storyshots Addons|Info/Markdown From internal Markdown file 1`] = ` -.emotion-78 { +.emotion-72 { 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; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; - border-top: 1px solid rgba(0,0,0,0.1); - border-left: 1px solid rgba(0,0,0,0.1); - background: rgba(255,255,255,1); - border-radius: 4px 0 0 0; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - list-style: none; - padding: 0; - height: 26px; - font-size: 11px; - -webkit-letter-spacing: 1px; - -moz-letter-spacing: 1px; - -ms-letter-spacing: 1px; - letter-spacing: 1px; - text-transform: uppercase; - border-left: 0 none; -} - .emotion-6 { - border: 0 none; - display: block; - background: none; - padding: 0 10px; - cursor: pointer; - text-transform: inherit; - -webkit-letter-spacing: inherit; - -moz-letter-spacing: inherit; - -ms-letter-spacing: inherit; - letter-spacing: inherit; - font-size: inherit; - color: inherit; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; -} - -.emotion-6:focus { - border-bottom: 2px solid #9fdaff; - outline: 0 none; -} - -.emotion-12 { position: relative; overflow: hidden; } @@ -4139,33 +3655,33 @@ exports[`Storyshots Addons|Info/Markdown From internal Markdown file 1`] = ` opacity: 1; } -.emotion-76 { +.emotion-70 { border-collapse: collapse; margin-top: 16px; width: auto; table-layout: auto; } -.emotion-24 { +.emotion-18 { border-bottom: 1px solid rgba(0,0,0,0.1); } -.emotion-14 { +.emotion-8 { padding: 2px 6px; line-height: 18px; vertical-align: middle; padding: 8px 16px; } -.emotion-74 { +.emotion-68 { font-size: 14px; } -.emotion-36 { +.emotion-30 { border-bottom: 1px solid #eee; } -.emotion-26 { +.emotion-20 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -4174,7 +3690,7 @@ exports[`Storyshots Addons|Info/Markdown From internal Markdown file 1`] = ` color: #774dd7; } -.emotion-28 { +.emotion-22 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -4183,15 +3699,15 @@ exports[`Storyshots Addons|Info/Markdown From internal Markdown file 1`] = ` color: #1ea7fd; } -.emotion-28 button { +.emotion-22 button { color: #37d5d3; } -.emotion-28 span { +.emotion-22 span { white-space: pre; } -.emotion-30 { +.emotion-24 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -4199,14 +3715,14 @@ exports[`Storyshots Addons|Info/Markdown From internal Markdown file 1`] = ` padding: 8px 16px; } -.emotion-34 { +.emotion-28 { padding: 2px 6px; text-align: left; padding: 8px 16px; }
-
    -
  • - -
    • -
@@ -4432,162 +3935,162 @@ exports[`Storyshots Addons|Info/Markdown From internal Markdown file 1`] = ` "BaseButton" Component
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -4602,72 +4105,14 @@ 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-14 { +.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-10 { - position: absolute; - bottom: 0; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; - border-top: 1px solid rgba(0,0,0,0.1); - border-left: 1px solid rgba(0,0,0,0.1); - background: rgba(255,255,255,1); - border-radius: 4px 0 0 0; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - list-style: none; - padding: 0; - height: 26px; - font-size: 11px; - -webkit-letter-spacing: 1px; - -moz-letter-spacing: 1px; - -ms-letter-spacing: 1px; - letter-spacing: 1px; - text-transform: uppercase; - border-left: 0 none; -} - .emotion-6 { - border: 0 none; - display: block; - background: none; - padding: 0 10px; - cursor: pointer; - text-transform: inherit; - -webkit-letter-spacing: inherit; - -moz-letter-spacing: inherit; - -ms-letter-spacing: inherit; - letter-spacing: inherit; - font-size: inherit; - color: inherit; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; -} - -.emotion-6:focus { - border-bottom: 2px solid #9fdaff; - outline: 0 none; -} - -.emotion-12 { position: relative; overflow: hidden; } @@ -4850,7 +4295,7 @@ exports[`Storyshots Addons|Info/Options.TableComponent Use a custom component fo }
-
    -
  • - -
    • -
@@ -5065,72 +4497,14 @@ exports[`Storyshots Addons|Info/Options.TableComponent Use a custom component fo `; exports[`Storyshots Addons|Info/Options.excludedPropTypes Excludes propTypes that are in the excludedPropTypes array 1`] = ` -.emotion-66 { +.emotion-60 { 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; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; - border-top: 1px solid rgba(0,0,0,0.1); - border-left: 1px solid rgba(0,0,0,0.1); - background: rgba(255,255,255,1); - border-radius: 4px 0 0 0; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - list-style: none; - padding: 0; - height: 26px; - font-size: 11px; - -webkit-letter-spacing: 1px; - -moz-letter-spacing: 1px; - -ms-letter-spacing: 1px; - letter-spacing: 1px; - text-transform: uppercase; - border-left: 0 none; -} - .emotion-6 { - border: 0 none; - display: block; - background: none; - padding: 0 10px; - cursor: pointer; - text-transform: inherit; - -webkit-letter-spacing: inherit; - -moz-letter-spacing: inherit; - -ms-letter-spacing: inherit; - letter-spacing: inherit; - font-size: inherit; - color: inherit; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; -} - -.emotion-6:focus { - border-bottom: 2px solid #9fdaff; - outline: 0 none; -} - -.emotion-12 { position: relative; overflow: hidden; } @@ -5312,33 +4686,33 @@ exports[`Storyshots Addons|Info/Options.excludedPropTypes Excludes propTypes tha opacity: 1; } -.emotion-64 { +.emotion-58 { border-collapse: collapse; margin-top: 16px; width: auto; table-layout: auto; } -.emotion-24 { +.emotion-18 { border-bottom: 1px solid rgba(0,0,0,0.1); } -.emotion-14 { +.emotion-8 { padding: 2px 6px; line-height: 18px; vertical-align: middle; padding: 8px 16px; } -.emotion-62 { +.emotion-56 { font-size: 14px; } -.emotion-36 { +.emotion-30 { border-bottom: 1px solid #eee; } -.emotion-26 { +.emotion-20 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -5347,7 +4721,7 @@ exports[`Storyshots Addons|Info/Options.excludedPropTypes Excludes propTypes tha color: #774dd7; } -.emotion-28 { +.emotion-22 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -5356,15 +4730,15 @@ exports[`Storyshots Addons|Info/Options.excludedPropTypes Excludes propTypes tha color: #1ea7fd; } -.emotion-28 button { +.emotion-22 button { color: #37d5d3; } -.emotion-28 span { +.emotion-22 span { white-space: pre; } -.emotion-30 { +.emotion-24 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -5372,14 +4746,14 @@ exports[`Storyshots Addons|Info/Options.excludedPropTypes Excludes propTypes tha padding: 8px 16px; } -.emotion-34 { +.emotion-28 { padding: 2px 6px; text-align: left; padding: 8px 16px; }
-
    -
  • - -
    • -
@@ -5533,133 +4894,133 @@ exports[`Storyshots Addons|Info/Options.excludedPropTypes Excludes propTypes tha "BaseButton" Component
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -5674,72 +5035,14 @@ exports[`Storyshots Addons|Info/Options.excludedPropTypes Excludes propTypes tha `; exports[`Storyshots Addons|Info/Options.header Shows or hides Info Addon header 1`] = ` -.emotion-78 { +.emotion-72 { 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; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; - border-top: 1px solid rgba(0,0,0,0.1); - border-left: 1px solid rgba(0,0,0,0.1); - background: rgba(255,255,255,1); - border-radius: 4px 0 0 0; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - list-style: none; - padding: 0; - height: 26px; - font-size: 11px; - -webkit-letter-spacing: 1px; - -moz-letter-spacing: 1px; - -ms-letter-spacing: 1px; - letter-spacing: 1px; - text-transform: uppercase; - border-left: 0 none; -} - .emotion-6 { - border: 0 none; - display: block; - background: none; - padding: 0 10px; - cursor: pointer; - text-transform: inherit; - -webkit-letter-spacing: inherit; - -moz-letter-spacing: inherit; - -ms-letter-spacing: inherit; - letter-spacing: inherit; - font-size: inherit; - color: inherit; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; -} - -.emotion-6:focus { - border-bottom: 2px solid #9fdaff; - outline: 0 none; -} - -.emotion-12 { position: relative; overflow: hidden; } @@ -5921,33 +5224,33 @@ exports[`Storyshots Addons|Info/Options.header Shows or hides Info Addon header opacity: 1; } -.emotion-76 { +.emotion-70 { border-collapse: collapse; margin-top: 16px; width: auto; table-layout: auto; } -.emotion-24 { +.emotion-18 { border-bottom: 1px solid rgba(0,0,0,0.1); } -.emotion-14 { +.emotion-8 { padding: 2px 6px; line-height: 18px; vertical-align: middle; padding: 8px 16px; } -.emotion-74 { +.emotion-68 { font-size: 14px; } -.emotion-36 { +.emotion-30 { border-bottom: 1px solid #eee; } -.emotion-26 { +.emotion-20 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -5956,7 +5259,7 @@ exports[`Storyshots Addons|Info/Options.header Shows or hides Info Addon header color: #774dd7; } -.emotion-28 { +.emotion-22 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -5965,15 +5268,15 @@ exports[`Storyshots Addons|Info/Options.header Shows or hides Info Addon header color: #1ea7fd; } -.emotion-28 button { +.emotion-22 button { color: #37d5d3; } -.emotion-28 span { +.emotion-22 span { white-space: pre; } -.emotion-30 { +.emotion-24 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -5981,14 +5284,14 @@ exports[`Storyshots Addons|Info/Options.header Shows or hides Info Addon header padding: 8px 16px; } -.emotion-34 { +.emotion-28 { padding: 2px 6px; text-align: left; padding: 8px 16px; }
-
    -
  • - -
    • -
@@ -6128,162 +5418,162 @@ exports[`Storyshots Addons|Info/Options.header Shows or hides Info Addon header "BaseButton" Component
Property Type Required Default Description
disabled bool - false
onClick func - onClick
style other - {}
@@ -6298,72 +5588,14 @@ exports[`Storyshots Addons|Info/Options.header Shows or hides Info Addon header `; exports[`Storyshots Addons|Info/Options.inline Inlines component inside story 1`] = ` -.emotion-78 { +.emotion-72 { 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; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; - border-top: 1px solid rgba(0,0,0,0.1); - border-left: 1px solid rgba(0,0,0,0.1); - background: rgba(255,255,255,1); - border-radius: 4px 0 0 0; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - list-style: none; - padding: 0; - height: 26px; - font-size: 11px; - -webkit-letter-spacing: 1px; - -moz-letter-spacing: 1px; - -ms-letter-spacing: 1px; - letter-spacing: 1px; - text-transform: uppercase; - border-left: 0 none; -} - .emotion-6 { - border: 0 none; - display: block; - background: none; - padding: 0 10px; - cursor: pointer; - text-transform: inherit; - -webkit-letter-spacing: inherit; - -moz-letter-spacing: inherit; - -ms-letter-spacing: inherit; - letter-spacing: inherit; - font-size: inherit; - color: inherit; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; -} - -.emotion-6:focus { - border-bottom: 2px solid #9fdaff; - outline: 0 none; -} - -.emotion-12 { position: relative; overflow: hidden; } @@ -6545,33 +5777,33 @@ exports[`Storyshots Addons|Info/Options.inline Inlines component inside story 1` opacity: 1; } -.emotion-76 { +.emotion-70 { border-collapse: collapse; margin-top: 16px; width: auto; table-layout: auto; } -.emotion-24 { +.emotion-18 { border-bottom: 1px solid rgba(0,0,0,0.1); } -.emotion-14 { +.emotion-8 { padding: 2px 6px; line-height: 18px; vertical-align: middle; padding: 8px 16px; } -.emotion-74 { +.emotion-68 { font-size: 14px; } -.emotion-36 { +.emotion-30 { border-bottom: 1px solid #eee; } -.emotion-26 { +.emotion-20 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -6580,7 +5812,7 @@ exports[`Storyshots Addons|Info/Options.inline Inlines component inside story 1` color: #774dd7; } -.emotion-28 { +.emotion-22 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -6589,15 +5821,15 @@ exports[`Storyshots Addons|Info/Options.inline Inlines component inside story 1` color: #1ea7fd; } -.emotion-28 button { +.emotion-22 button { color: #37d5d3; } -.emotion-28 span { +.emotion-22 span { white-space: pre; } -.emotion-30 { +.emotion-24 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -6605,14 +5837,14 @@ exports[`Storyshots Addons|Info/Options.inline Inlines component inside story 1` padding: 8px 16px; } -.emotion-34 { +.emotion-28 { padding: 2px 6px; text-align: left; padding: 8px 16px; }
@@ -6664,7 +5896,7 @@ exports[`Storyshots Addons|Info/Options.inline Inlines component inside story 1` Story Source
-
    -
  • - -
    • -
@@ -6754,162 +5973,162 @@ exports[`Storyshots Addons|Info/Options.inline Inlines component inside story 1` "BaseButton" Component
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -6923,72 +6142,14 @@ exports[`Storyshots Addons|Info/Options.inline Inlines component inside story 1` `; exports[`Storyshots Addons|Info/Options.propTables Shows additional component prop tables 1`] = ` -.emotion-118 { +.emotion-112 { 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; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; - border-top: 1px solid rgba(0,0,0,0.1); - border-left: 1px solid rgba(0,0,0,0.1); - background: rgba(255,255,255,1); - border-radius: 4px 0 0 0; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - list-style: none; - padding: 0; - height: 26px; - font-size: 11px; - -webkit-letter-spacing: 1px; - -moz-letter-spacing: 1px; - -ms-letter-spacing: 1px; - letter-spacing: 1px; - text-transform: uppercase; - border-left: 0 none; -} - .emotion-6 { - border: 0 none; - display: block; - background: none; - padding: 0 10px; - cursor: pointer; - text-transform: inherit; - -webkit-letter-spacing: inherit; - -moz-letter-spacing: inherit; - -ms-letter-spacing: inherit; - letter-spacing: inherit; - font-size: inherit; - color: inherit; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; -} - -.emotion-6:focus { - border-bottom: 2px solid #9fdaff; - outline: 0 none; -} - -.emotion-12 { position: relative; overflow: hidden; } @@ -7170,33 +6331,33 @@ exports[`Storyshots Addons|Info/Options.propTables Shows additional component pr opacity: 1; } -.emotion-76 { +.emotion-70 { border-collapse: collapse; margin-top: 16px; width: auto; table-layout: auto; } -.emotion-24 { +.emotion-18 { border-bottom: 1px solid rgba(0,0,0,0.1); } -.emotion-14 { +.emotion-8 { padding: 2px 6px; line-height: 18px; vertical-align: middle; padding: 8px 16px; } -.emotion-74 { +.emotion-68 { font-size: 14px; } -.emotion-36 { +.emotion-30 { border-bottom: 1px solid #eee; } -.emotion-26 { +.emotion-20 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -7205,7 +6366,7 @@ exports[`Storyshots Addons|Info/Options.propTables Shows additional component pr color: #774dd7; } -.emotion-28 { +.emotion-22 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -7214,15 +6375,15 @@ exports[`Storyshots Addons|Info/Options.propTables Shows additional component pr color: #1ea7fd; } -.emotion-28 button { +.emotion-22 button { color: #37d5d3; } -.emotion-28 span { +.emotion-22 span { white-space: pre; } -.emotion-30 { +.emotion-24 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -7230,14 +6391,14 @@ exports[`Storyshots Addons|Info/Options.propTables Shows additional component pr padding: 8px 16px; } -.emotion-34 { +.emotion-28 { padding: 2px 6px; text-align: left; padding: 8px 16px; }
-
    -
  • - -
    • -
@@ -7391,162 +6539,162 @@ exports[`Storyshots Addons|Info/Options.propTables Shows additional component pr "BaseButton" Component
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -7559,102 +6707,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 - {}
@@ -7669,72 +6817,14 @@ exports[`Storyshots Addons|Info/Options.propTables Shows additional component pr `; exports[`Storyshots Addons|Info/Options.propTablesExclude Exclude component from prop tables 1`] = ` -.emotion-78 { +.emotion-72 { 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; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; - border-top: 1px solid rgba(0,0,0,0.1); - border-left: 1px solid rgba(0,0,0,0.1); - background: rgba(255,255,255,1); - border-radius: 4px 0 0 0; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - list-style: none; - padding: 0; - height: 26px; - font-size: 11px; - -webkit-letter-spacing: 1px; - -moz-letter-spacing: 1px; - -ms-letter-spacing: 1px; - letter-spacing: 1px; - text-transform: uppercase; - border-left: 0 none; -} - .emotion-6 { - border: 0 none; - display: block; - background: none; - padding: 0 10px; - cursor: pointer; - text-transform: inherit; - -webkit-letter-spacing: inherit; - -moz-letter-spacing: inherit; - -ms-letter-spacing: inherit; - letter-spacing: inherit; - font-size: inherit; - color: inherit; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; -} - -.emotion-6:focus { - border-bottom: 2px solid #9fdaff; - outline: 0 none; -} - -.emotion-12 { position: relative; overflow: hidden; } @@ -7916,33 +7006,33 @@ exports[`Storyshots Addons|Info/Options.propTablesExclude Exclude component from opacity: 1; } -.emotion-76 { +.emotion-70 { border-collapse: collapse; margin-top: 16px; width: auto; table-layout: auto; } -.emotion-24 { +.emotion-18 { border-bottom: 1px solid rgba(0,0,0,0.1); } -.emotion-14 { +.emotion-8 { padding: 2px 6px; line-height: 18px; vertical-align: middle; padding: 8px 16px; } -.emotion-74 { +.emotion-68 { font-size: 14px; } -.emotion-36 { +.emotion-30 { border-bottom: 1px solid #eee; } -.emotion-26 { +.emotion-20 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -7951,7 +7041,7 @@ exports[`Storyshots Addons|Info/Options.propTablesExclude Exclude component from color: #774dd7; } -.emotion-28 { +.emotion-22 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -7960,15 +7050,15 @@ exports[`Storyshots Addons|Info/Options.propTablesExclude Exclude component from color: #1ea7fd; } -.emotion-28 button { +.emotion-22 button { color: #37d5d3; } -.emotion-28 span { +.emotion-22 span { white-space: pre; } -.emotion-30 { +.emotion-24 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -7976,14 +7066,14 @@ exports[`Storyshots Addons|Info/Options.propTablesExclude Exclude component from padding: 8px 16px; } -.emotion-34 { +.emotion-28 { padding: 2px 6px; text-align: left; padding: 8px 16px; }
-
    -
  • - -
    • -
@@ -8246,162 +7323,162 @@ exports[`Storyshots Addons|Info/Options.propTablesExclude Exclude component from "BaseButton" Component
Property Type Required Default Description
disabled unknown - false
onClick unknown - onClick
@@ -8730,72 +7807,14 @@ 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-78 { +.emotion-72 { 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; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; - border-top: 1px solid rgba(0,0,0,0.1); - border-left: 1px solid rgba(0,0,0,0.1); - background: rgba(255,255,255,1); - border-radius: 4px 0 0 0; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - list-style: none; - padding: 0; - height: 26px; - font-size: 11px; - -webkit-letter-spacing: 1px; - -moz-letter-spacing: 1px; - -ms-letter-spacing: 1px; - letter-spacing: 1px; - text-transform: uppercase; - border-left: 0 none; -} - .emotion-6 { - border: 0 none; - display: block; - background: none; - padding: 0 10px; - cursor: pointer; - text-transform: inherit; - -webkit-letter-spacing: inherit; - -moz-letter-spacing: inherit; - -ms-letter-spacing: inherit; - letter-spacing: inherit; - font-size: inherit; - color: inherit; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; -} - -.emotion-6:focus { - border-bottom: 2px solid #9fdaff; - outline: 0 none; -} - -.emotion-12 { position: relative; overflow: hidden; } @@ -8977,33 +7996,33 @@ exports[`Storyshots Addons|Info/Options.styles Extend info styles with an object opacity: 1; } -.emotion-76 { +.emotion-70 { border-collapse: collapse; margin-top: 16px; width: auto; table-layout: auto; } -.emotion-24 { +.emotion-18 { border-bottom: 1px solid rgba(0,0,0,0.1); } -.emotion-14 { +.emotion-8 { padding: 2px 6px; line-height: 18px; vertical-align: middle; padding: 8px 16px; } -.emotion-74 { +.emotion-68 { font-size: 14px; } -.emotion-36 { +.emotion-30 { border-bottom: 1px solid #eee; } -.emotion-26 { +.emotion-20 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -9012,7 +8031,7 @@ exports[`Storyshots Addons|Info/Options.styles Extend info styles with an object color: #774dd7; } -.emotion-28 { +.emotion-22 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -9021,15 +8040,15 @@ exports[`Storyshots Addons|Info/Options.styles Extend info styles with an object color: #1ea7fd; } -.emotion-28 button { +.emotion-22 button { color: #37d5d3; } -.emotion-28 span { +.emotion-22 span { white-space: pre; } -.emotion-30 { +.emotion-24 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -9037,14 +8056,14 @@ exports[`Storyshots Addons|Info/Options.styles Extend info styles with an object padding: 8px 16px; } -.emotion-34 { +.emotion-28 { padding: 2px 6px; text-align: left; padding: 8px 16px; }
-
    -
  • - -
    • -
@@ -9189,162 +8195,162 @@ exports[`Storyshots Addons|Info/Options.styles Extend info styles with an object "BaseButton" Component
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -9359,72 +8365,14 @@ 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-78 { +.emotion-72 { 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; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; - border-top: 1px solid rgba(0,0,0,0.1); - border-left: 1px solid rgba(0,0,0,0.1); - background: rgba(255,255,255,1); - border-radius: 4px 0 0 0; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - list-style: none; - padding: 0; - height: 26px; - font-size: 11px; - -webkit-letter-spacing: 1px; - -moz-letter-spacing: 1px; - -ms-letter-spacing: 1px; - letter-spacing: 1px; - text-transform: uppercase; - border-left: 0 none; -} - .emotion-6 { - border: 0 none; - display: block; - background: none; - padding: 0 10px; - cursor: pointer; - text-transform: inherit; - -webkit-letter-spacing: inherit; - -moz-letter-spacing: inherit; - -ms-letter-spacing: inherit; - letter-spacing: inherit; - font-size: inherit; - color: inherit; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; -} - -.emotion-6:focus { - border-bottom: 2px solid #9fdaff; - outline: 0 none; -} - -.emotion-12 { position: relative; overflow: hidden; } @@ -9606,33 +8554,33 @@ exports[`Storyshots Addons|Info/Options.styles Full control over styles using a opacity: 1; } -.emotion-76 { +.emotion-70 { border-collapse: collapse; margin-top: 16px; width: auto; table-layout: auto; } -.emotion-24 { +.emotion-18 { border-bottom: 1px solid rgba(0,0,0,0.1); } -.emotion-14 { +.emotion-8 { padding: 2px 6px; line-height: 18px; vertical-align: middle; padding: 8px 16px; } -.emotion-74 { +.emotion-68 { font-size: 14px; } -.emotion-36 { +.emotion-30 { border-bottom: 1px solid #eee; } -.emotion-26 { +.emotion-20 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -9641,7 +8589,7 @@ exports[`Storyshots Addons|Info/Options.styles Full control over styles using a color: #774dd7; } -.emotion-28 { +.emotion-22 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -9650,15 +8598,15 @@ exports[`Storyshots Addons|Info/Options.styles Full control over styles using a color: #1ea7fd; } -.emotion-28 button { +.emotion-22 button { color: #37d5d3; } -.emotion-28 span { +.emotion-22 span { white-space: pre; } -.emotion-30 { +.emotion-24 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -9666,14 +8614,14 @@ exports[`Storyshots Addons|Info/Options.styles Full control over styles using a padding: 8px 16px; } -.emotion-34 { +.emotion-28 { padding: 2px 6px; text-align: left; padding: 8px 16px; }
-
    -
  • - -
    • -
@@ -9818,162 +8753,162 @@ exports[`Storyshots Addons|Info/Options.styles Full control over styles using a "BaseButton" Component
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -10007,72 +8942,14 @@ exports[`Storyshots Addons|Info/Parameters Disable the addon entirely 1`] = ` `; exports[`Storyshots Addons|Info/Parameters Overwrite the parameters with markdown variable 1`] = ` -.emotion-78 { +.emotion-72 { 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; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; - border-top: 1px solid rgba(0,0,0,0.1); - border-left: 1px solid rgba(0,0,0,0.1); - background: rgba(255,255,255,1); - border-radius: 4px 0 0 0; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - list-style: none; - padding: 0; - height: 26px; - font-size: 11px; - -webkit-letter-spacing: 1px; - -moz-letter-spacing: 1px; - -ms-letter-spacing: 1px; - letter-spacing: 1px; - text-transform: uppercase; - border-left: 0 none; -} - .emotion-6 { - border: 0 none; - display: block; - background: none; - padding: 0 10px; - cursor: pointer; - text-transform: inherit; - -webkit-letter-spacing: inherit; - -moz-letter-spacing: inherit; - -ms-letter-spacing: inherit; - letter-spacing: inherit; - font-size: inherit; - color: inherit; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; -} - -.emotion-6:focus { - border-bottom: 2px solid #9fdaff; - outline: 0 none; -} - -.emotion-12 { position: relative; overflow: hidden; } @@ -10254,33 +9131,33 @@ exports[`Storyshots Addons|Info/Parameters Overwrite the parameters with markdow opacity: 1; } -.emotion-76 { +.emotion-70 { border-collapse: collapse; margin-top: 16px; width: auto; table-layout: auto; } -.emotion-24 { +.emotion-18 { border-bottom: 1px solid rgba(0,0,0,0.1); } -.emotion-14 { +.emotion-8 { padding: 2px 6px; line-height: 18px; vertical-align: middle; padding: 8px 16px; } -.emotion-74 { +.emotion-68 { font-size: 14px; } -.emotion-36 { +.emotion-30 { border-bottom: 1px solid #eee; } -.emotion-26 { +.emotion-20 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -10289,7 +9166,7 @@ exports[`Storyshots Addons|Info/Parameters Overwrite the parameters with markdow color: #774dd7; } -.emotion-28 { +.emotion-22 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -10298,15 +9175,15 @@ exports[`Storyshots Addons|Info/Parameters Overwrite the parameters with markdow color: #1ea7fd; } -.emotion-28 button { +.emotion-22 button { color: #37d5d3; } -.emotion-28 span { +.emotion-22 span { white-space: pre; } -.emotion-30 { +.emotion-24 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -10314,14 +9191,14 @@ exports[`Storyshots Addons|Info/Parameters Overwrite the parameters with markdow padding: 8px 16px; } -.emotion-34 { +.emotion-28 { padding: 2px 6px; text-align: left; padding: 8px 16px; }
-
    -
  • - -
    • -
@@ -10555,162 +9419,162 @@ exports[`Storyshots Addons|Info/Parameters Overwrite the parameters with markdow "BaseButton" Component
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -10725,72 +9589,14 @@ exports[`Storyshots Addons|Info/Parameters Overwrite the parameters with markdow `; exports[`Storyshots Addons|Info/Parameters Overwrite the text parameter with markdown inline 1`] = ` -.emotion-66 { +.emotion-60 { 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; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; - border-top: 1px solid rgba(0,0,0,0.1); - border-left: 1px solid rgba(0,0,0,0.1); - background: rgba(255,255,255,1); - border-radius: 4px 0 0 0; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - list-style: none; - padding: 0; - height: 26px; - font-size: 11px; - -webkit-letter-spacing: 1px; - -moz-letter-spacing: 1px; - -ms-letter-spacing: 1px; - letter-spacing: 1px; - text-transform: uppercase; - border-left: 0 none; -} - .emotion-6 { - border: 0 none; - display: block; - background: none; - padding: 0 10px; - cursor: pointer; - text-transform: inherit; - -webkit-letter-spacing: inherit; - -moz-letter-spacing: inherit; - -ms-letter-spacing: inherit; - letter-spacing: inherit; - font-size: inherit; - color: inherit; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; -} - -.emotion-6:focus { - border-bottom: 2px solid #9fdaff; - outline: 0 none; -} - -.emotion-12 { position: relative; overflow: hidden; } @@ -10972,33 +9778,33 @@ exports[`Storyshots Addons|Info/Parameters Overwrite the text parameter with mar opacity: 1; } -.emotion-64 { +.emotion-58 { border-collapse: collapse; margin-top: 16px; width: auto; table-layout: auto; } -.emotion-24 { +.emotion-18 { border-bottom: 1px solid rgba(0,0,0,0.1); } -.emotion-14 { +.emotion-8 { padding: 2px 6px; line-height: 18px; vertical-align: middle; padding: 8px 16px; } -.emotion-62 { +.emotion-56 { font-size: 14px; } -.emotion-36 { +.emotion-30 { border-bottom: 1px solid #eee; } -.emotion-26 { +.emotion-20 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -11007,7 +9813,7 @@ exports[`Storyshots Addons|Info/Parameters Overwrite the text parameter with mar color: #774dd7; } -.emotion-28 { +.emotion-22 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -11016,15 +9822,15 @@ exports[`Storyshots Addons|Info/Parameters Overwrite the text parameter with mar color: #1ea7fd; } -.emotion-28 button { +.emotion-22 button { color: #37d5d3; } -.emotion-28 span { +.emotion-22 span { white-space: pre; } -.emotion-30 { +.emotion-24 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -11032,14 +9838,14 @@ exports[`Storyshots Addons|Info/Parameters Overwrite the text parameter with mar padding: 8px 16px; } -.emotion-34 { +.emotion-28 { padding: 2px 6px; text-align: left; padding: 8px 16px; }
@@ -11091,7 +9897,7 @@ exports[`Storyshots Addons|Info/Parameters Overwrite the text parameter with mar Story Source
-
    -
  • - -
    • -
@@ -11241,133 +10034,133 @@ exports[`Storyshots Addons|Info/Parameters Overwrite the text parameter with mar "BaseButton" Component
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -11381,72 +10174,14 @@ 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-66 { +.emotion-60 { 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; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; - border-top: 1px solid rgba(0,0,0,0.1); - border-left: 1px solid rgba(0,0,0,0.1); - background: rgba(255,255,255,1); - border-radius: 4px 0 0 0; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - list-style: none; - padding: 0; - height: 26px; - font-size: 11px; - -webkit-letter-spacing: 1px; - -moz-letter-spacing: 1px; - -ms-letter-spacing: 1px; - letter-spacing: 1px; - text-transform: uppercase; - border-left: 0 none; -} - .emotion-6 { - border: 0 none; - display: block; - background: none; - padding: 0 10px; - cursor: pointer; - text-transform: inherit; - -webkit-letter-spacing: inherit; - -moz-letter-spacing: inherit; - -ms-letter-spacing: inherit; - letter-spacing: inherit; - font-size: inherit; - color: inherit; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; -} - -.emotion-6:focus { - border-bottom: 2px solid #9fdaff; - outline: 0 none; -} - -.emotion-12 { position: relative; overflow: hidden; } @@ -11628,33 +10363,33 @@ exports[`Storyshots Addons|Info/Parameters Overwriting and extending the paramet opacity: 1; } -.emotion-64 { +.emotion-58 { border-collapse: collapse; margin-top: 16px; width: auto; table-layout: auto; } -.emotion-24 { +.emotion-18 { border-bottom: 1px solid rgba(0,0,0,0.1); } -.emotion-14 { +.emotion-8 { padding: 2px 6px; line-height: 18px; vertical-align: middle; padding: 8px 16px; } -.emotion-62 { +.emotion-56 { font-size: 14px; } -.emotion-36 { +.emotion-30 { border-bottom: 1px solid #eee; } -.emotion-26 { +.emotion-20 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -11663,7 +10398,7 @@ exports[`Storyshots Addons|Info/Parameters Overwriting and extending the paramet color: #774dd7; } -.emotion-28 { +.emotion-22 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -11672,15 +10407,15 @@ exports[`Storyshots Addons|Info/Parameters Overwriting and extending the paramet color: #1ea7fd; } -.emotion-28 button { +.emotion-22 button { color: #37d5d3; } -.emotion-28 span { +.emotion-22 span { white-space: pre; } -.emotion-30 { +.emotion-24 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -11688,14 +10423,14 @@ exports[`Storyshots Addons|Info/Parameters Overwriting and extending the paramet padding: 8px 16px; } -.emotion-34 { +.emotion-28 { padding: 2px 6px; text-align: left; padding: 8px 16px; }
@@ -11747,7 +10482,7 @@ exports[`Storyshots Addons|Info/Parameters Overwriting and extending the paramet Story Source
-
    -
  • - -
    • -
@@ -11837,133 +10559,133 @@ exports[`Storyshots Addons|Info/Parameters Overwriting and extending the paramet "BaseButton" Component
Property Type Required Default Description
disabled bool - false
onClick func - onClick
style other - {}
@@ -11977,72 +10699,14 @@ exports[`Storyshots Addons|Info/Parameters Overwriting and extending the paramet `; exports[`Storyshots Addons|Info/Parameters Using paramaters across all stories 1`] = ` -.emotion-78 { +.emotion-72 { 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; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; - border-top: 1px solid rgba(0,0,0,0.1); - border-left: 1px solid rgba(0,0,0,0.1); - background: rgba(255,255,255,1); - border-radius: 4px 0 0 0; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - list-style: none; - padding: 0; - height: 26px; - font-size: 11px; - -webkit-letter-spacing: 1px; - -moz-letter-spacing: 1px; - -ms-letter-spacing: 1px; - letter-spacing: 1px; - text-transform: uppercase; - border-left: 0 none; -} - .emotion-6 { - border: 0 none; - display: block; - background: none; - padding: 0 10px; - cursor: pointer; - text-transform: inherit; - -webkit-letter-spacing: inherit; - -moz-letter-spacing: inherit; - -ms-letter-spacing: inherit; - letter-spacing: inherit; - font-size: inherit; - color: inherit; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; -} - -.emotion-6:focus { - border-bottom: 2px solid #9fdaff; - outline: 0 none; -} - -.emotion-12 { position: relative; overflow: hidden; } @@ -12224,33 +10888,33 @@ exports[`Storyshots Addons|Info/Parameters Using paramaters across all stories 1 opacity: 1; } -.emotion-76 { +.emotion-70 { border-collapse: collapse; margin-top: 16px; width: auto; table-layout: auto; } -.emotion-24 { +.emotion-18 { border-bottom: 1px solid rgba(0,0,0,0.1); } -.emotion-14 { +.emotion-8 { padding: 2px 6px; line-height: 18px; vertical-align: middle; padding: 8px 16px; } -.emotion-74 { +.emotion-68 { font-size: 14px; } -.emotion-36 { +.emotion-30 { border-bottom: 1px solid #eee; } -.emotion-26 { +.emotion-20 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -12259,7 +10923,7 @@ exports[`Storyshots Addons|Info/Parameters Using paramaters across all stories 1 color: #774dd7; } -.emotion-28 { +.emotion-22 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -12268,15 +10932,15 @@ exports[`Storyshots Addons|Info/Parameters Using paramaters across all stories 1 color: #1ea7fd; } -.emotion-28 button { +.emotion-22 button { color: #37d5d3; } -.emotion-28 span { +.emotion-22 span { white-space: pre; } -.emotion-30 { +.emotion-24 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -12284,14 +10948,14 @@ exports[`Storyshots Addons|Info/Parameters Using paramaters across all stories 1 padding: 8px 16px; } -.emotion-34 { +.emotion-28 { padding: 2px 6px; text-align: left; padding: 8px 16px; }
@@ -12343,7 +11007,7 @@ exports[`Storyshots Addons|Info/Parameters Using paramaters across all stories 1 Story Source
-
    -
  • - -
    • -
@@ -12433,162 +11084,162 @@ exports[`Storyshots Addons|Info/Parameters Using paramaters across all stories 1 "BaseButton" Component
Property Type Required Default Description
disabled bool - false
onClick func - onClick
style other - {}
@@ -12602,72 +11253,14 @@ exports[`Storyshots Addons|Info/Parameters Using paramaters across all stories 1 `; exports[`Storyshots Addons|Info/React Docgen Comments from Flow declarations 1`] = ` -.emotion-54 { +.emotion-48 { 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; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; - border-top: 1px solid rgba(0,0,0,0.1); - border-left: 1px solid rgba(0,0,0,0.1); - background: rgba(255,255,255,1); - border-radius: 4px 0 0 0; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - list-style: none; - padding: 0; - height: 26px; - font-size: 11px; - -webkit-letter-spacing: 1px; - -moz-letter-spacing: 1px; - -ms-letter-spacing: 1px; - letter-spacing: 1px; - text-transform: uppercase; - border-left: 0 none; -} - .emotion-6 { - border: 0 none; - display: block; - background: none; - padding: 0 10px; - cursor: pointer; - text-transform: inherit; - -webkit-letter-spacing: inherit; - -moz-letter-spacing: inherit; - -ms-letter-spacing: inherit; - letter-spacing: inherit; - font-size: inherit; - color: inherit; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; -} - -.emotion-6:focus { - border-bottom: 2px solid #9fdaff; - outline: 0 none; -} - -.emotion-12 { position: relative; overflow: hidden; } @@ -12849,33 +11442,33 @@ exports[`Storyshots Addons|Info/React Docgen Comments from Flow declarations 1`] opacity: 1; } -.emotion-52 { +.emotion-46 { border-collapse: collapse; margin-top: 16px; width: auto; table-layout: auto; } -.emotion-24 { +.emotion-18 { border-bottom: 1px solid rgba(0,0,0,0.1); } -.emotion-14 { +.emotion-8 { padding: 2px 6px; line-height: 18px; vertical-align: middle; padding: 8px 16px; } -.emotion-50 { +.emotion-44 { font-size: 14px; } -.emotion-36 { +.emotion-30 { border-bottom: 1px solid #eee; } -.emotion-26 { +.emotion-20 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -12884,7 +11477,7 @@ exports[`Storyshots Addons|Info/React Docgen Comments from Flow declarations 1`] color: #774dd7; } -.emotion-28 { +.emotion-22 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -12893,15 +11486,15 @@ exports[`Storyshots Addons|Info/React Docgen Comments from Flow declarations 1`] color: #1ea7fd; } -.emotion-28 button { +.emotion-22 button { color: #37d5d3; } -.emotion-28 span { +.emotion-22 span { white-space: pre; } -.emotion-30 { +.emotion-24 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -12909,14 +11502,14 @@ exports[`Storyshots Addons|Info/React Docgen Comments from Flow declarations 1`] padding: 8px 16px; } -.emotion-34 { +.emotion-28 { padding: 2px 6px; text-align: left; padding: 8px 16px; }
-
    -
  • - -
    • -
@@ -13130,102 +11710,102 @@ exports[`Storyshots Addons|Info/React Docgen Comments from Flow declarations 1`] "FlowTypeButton" Component
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -13240,72 +11820,14 @@ exports[`Storyshots Addons|Info/React Docgen Comments from Flow declarations 1`] `; exports[`Storyshots Addons|Info/React Docgen Comments from PropType declarations 1`] = ` -.emotion-186 { +.emotion-180 { 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; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; - border-top: 1px solid rgba(0,0,0,0.1); - border-left: 1px solid rgba(0,0,0,0.1); - background: rgba(255,255,255,1); - border-radius: 4px 0 0 0; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - list-style: none; - padding: 0; - height: 26px; - font-size: 11px; - -webkit-letter-spacing: 1px; - -moz-letter-spacing: 1px; - -ms-letter-spacing: 1px; - letter-spacing: 1px; - text-transform: uppercase; - border-left: 0 none; -} - .emotion-6 { - border: 0 none; - display: block; - background: none; - padding: 0 10px; - cursor: pointer; - text-transform: inherit; - -webkit-letter-spacing: inherit; - -moz-letter-spacing: inherit; - -ms-letter-spacing: inherit; - letter-spacing: inherit; - font-size: inherit; - color: inherit; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; -} - -.emotion-6:focus { - border-bottom: 2px solid #9fdaff; - outline: 0 none; -} - -.emotion-12 { position: relative; overflow: hidden; } @@ -13487,33 +12009,33 @@ exports[`Storyshots Addons|Info/React Docgen Comments from PropType declarations opacity: 1; } -.emotion-184 { +.emotion-178 { border-collapse: collapse; margin-top: 16px; width: auto; table-layout: auto; } -.emotion-24 { +.emotion-18 { border-bottom: 1px solid rgba(0,0,0,0.1); } -.emotion-14 { +.emotion-8 { padding: 2px 6px; line-height: 18px; vertical-align: middle; padding: 8px 16px; } -.emotion-182 { +.emotion-176 { font-size: 14px; } -.emotion-36 { +.emotion-30 { border-bottom: 1px solid #eee; } -.emotion-26 { +.emotion-20 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -13522,7 +12044,7 @@ exports[`Storyshots Addons|Info/React Docgen Comments from PropType declarations color: #774dd7; } -.emotion-28 { +.emotion-22 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -13531,15 +12053,15 @@ exports[`Storyshots Addons|Info/React Docgen Comments from PropType declarations color: #1ea7fd; } -.emotion-28 button { +.emotion-22 button { color: #37d5d3; } -.emotion-28 span { +.emotion-22 span { white-space: pre; } -.emotion-30 { +.emotion-24 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -13547,14 +12069,14 @@ exports[`Storyshots Addons|Info/React Docgen Comments from PropType declarations padding: 8px 16px; } -.emotion-34 { +.emotion-28 { padding: 2px 6px; text-align: left; padding: 8px 16px; }
-
    -
  • - -
    • -
@@ -14010,155 +12519,155 @@ exports[`Storyshots Addons|Info/React Docgen Comments from PropType declarations "DocgenButton" Component
Property Type Required Default Description
disabled unknown - false
onClick unknown - onClick
@@ -14591,72 +13100,14 @@ exports[`Storyshots Addons|Info/React Docgen Comments from PropType declarations `; exports[`Storyshots Addons|Info/React Docgen Comments from component declaration 1`] = ` -.emotion-78 { +.emotion-72 { 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; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; - border-top: 1px solid rgba(0,0,0,0.1); - border-left: 1px solid rgba(0,0,0,0.1); - background: rgba(255,255,255,1); - border-radius: 4px 0 0 0; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - list-style: none; - padding: 0; - height: 26px; - font-size: 11px; - -webkit-letter-spacing: 1px; - -moz-letter-spacing: 1px; - -ms-letter-spacing: 1px; - letter-spacing: 1px; - text-transform: uppercase; - border-left: 0 none; -} - .emotion-6 { - border: 0 none; - display: block; - background: none; - padding: 0 10px; - cursor: pointer; - text-transform: inherit; - -webkit-letter-spacing: inherit; - -moz-letter-spacing: inherit; - -ms-letter-spacing: inherit; - letter-spacing: inherit; - font-size: inherit; - color: inherit; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; -} - -.emotion-6:focus { - border-bottom: 2px solid #9fdaff; - outline: 0 none; -} - -.emotion-12 { position: relative; overflow: hidden; } @@ -14838,33 +13289,33 @@ exports[`Storyshots Addons|Info/React Docgen Comments from component declaration opacity: 1; } -.emotion-76 { +.emotion-70 { border-collapse: collapse; margin-top: 16px; width: auto; table-layout: auto; } -.emotion-24 { +.emotion-18 { border-bottom: 1px solid rgba(0,0,0,0.1); } -.emotion-14 { +.emotion-8 { padding: 2px 6px; line-height: 18px; vertical-align: middle; padding: 8px 16px; } -.emotion-74 { +.emotion-68 { font-size: 14px; } -.emotion-36 { +.emotion-30 { border-bottom: 1px solid #eee; } -.emotion-26 { +.emotion-20 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -14873,7 +13324,7 @@ exports[`Storyshots Addons|Info/React Docgen Comments from component declaration color: #774dd7; } -.emotion-28 { +.emotion-22 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -14882,15 +13333,15 @@ exports[`Storyshots Addons|Info/React Docgen Comments from component declaration color: #1ea7fd; } -.emotion-28 button { +.emotion-22 button { color: #37d5d3; } -.emotion-28 span { +.emotion-22 span { white-space: pre; } -.emotion-30 { +.emotion-24 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -14898,14 +13349,14 @@ exports[`Storyshots Addons|Info/React Docgen Comments from component declaration padding: 8px 16px; } -.emotion-34 { +.emotion-28 { padding: 2px 6px; text-align: left; padding: 8px 16px; }
-
    -
  • - -
    • -
@@ -15119,162 +13557,162 @@ exports[`Storyshots Addons|Info/React Docgen Comments from component declaration "BaseButton" Component
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
one other - { @@ -14175,31 +12684,31 @@ exports[`Storyshots Addons|Info/React Docgen Comments from PropType declarations
two other - { @@ -14246,31 +12755,31 @@ exports[`Storyshots Addons|Info/React Docgen Comments from PropType declarations
obj object - { @@ -14287,31 +12796,31 @@ exports[`Storyshots Addons|Info/React Docgen Comments from PropType declarations
shape other - { @@ -14372,31 +12881,31 @@ exports[`Storyshots Addons|Info/React Docgen Comments from PropType declarations
arrayOf other - [ @@ -14421,162 +12930,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
@@ -15289,72 +13727,14 @@ exports[`Storyshots Addons|Info/React Docgen Comments from component declaration `; exports[`Storyshots Addons|Info/React Docgen Comments from named export component declaration 1`] = ` -.emotion-78 { +.emotion-72 { 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; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; - border-top: 1px solid rgba(0,0,0,0.1); - border-left: 1px solid rgba(0,0,0,0.1); - background: rgba(255,255,255,1); - border-radius: 4px 0 0 0; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - list-style: none; - padding: 0; - height: 26px; - font-size: 11px; - -webkit-letter-spacing: 1px; - -moz-letter-spacing: 1px; - -ms-letter-spacing: 1px; - letter-spacing: 1px; - text-transform: uppercase; - border-left: 0 none; -} - .emotion-6 { - border: 0 none; - display: block; - background: none; - padding: 0 10px; - cursor: pointer; - text-transform: inherit; - -webkit-letter-spacing: inherit; - -moz-letter-spacing: inherit; - -ms-letter-spacing: inherit; - letter-spacing: inherit; - font-size: inherit; - color: inherit; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; -} - -.emotion-6:focus { - border-bottom: 2px solid #9fdaff; - outline: 0 none; -} - -.emotion-12 { position: relative; overflow: hidden; } @@ -15536,33 +13916,33 @@ exports[`Storyshots Addons|Info/React Docgen Comments from named export componen opacity: 1; } -.emotion-76 { +.emotion-70 { border-collapse: collapse; margin-top: 16px; width: auto; table-layout: auto; } -.emotion-24 { +.emotion-18 { border-bottom: 1px solid rgba(0,0,0,0.1); } -.emotion-14 { +.emotion-8 { padding: 2px 6px; line-height: 18px; vertical-align: middle; padding: 8px 16px; } -.emotion-74 { +.emotion-68 { font-size: 14px; } -.emotion-36 { +.emotion-30 { border-bottom: 1px solid #eee; } -.emotion-26 { +.emotion-20 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -15571,7 +13951,7 @@ exports[`Storyshots Addons|Info/React Docgen Comments from named export componen color: #774dd7; } -.emotion-28 { +.emotion-22 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -15580,15 +13960,15 @@ exports[`Storyshots Addons|Info/React Docgen Comments from named export componen color: #1ea7fd; } -.emotion-28 button { +.emotion-22 button { color: #37d5d3; } -.emotion-28 span { +.emotion-22 span { white-space: pre; } -.emotion-30 { +.emotion-24 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -15596,14 +13976,14 @@ exports[`Storyshots Addons|Info/React Docgen Comments from named export componen padding: 8px 16px; } -.emotion-34 { +.emotion-28 { padding: 2px 6px; text-align: left; padding: 8px 16px; }
-
    -
  • - -
    • -
@@ -15819,162 +14186,162 @@ exports[`Storyshots Addons|Info/React Docgen Comments from named export componen "NamedExportButton" Component
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -15989,72 +14356,14 @@ exports[`Storyshots Addons|Info/React Docgen Comments from named export componen `; exports[`Storyshots Addons|Info/Story Source Array prop 1`] = ` -.emotion-42 { +.emotion-36 { 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; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; - border-top: 1px solid rgba(0,0,0,0.1); - border-left: 1px solid rgba(0,0,0,0.1); - background: rgba(255,255,255,1); - border-radius: 4px 0 0 0; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - list-style: none; - padding: 0; - height: 26px; - font-size: 11px; - -webkit-letter-spacing: 1px; - -moz-letter-spacing: 1px; - -ms-letter-spacing: 1px; - letter-spacing: 1px; - text-transform: uppercase; - border-left: 0 none; -} - .emotion-6 { - border: 0 none; - display: block; - background: none; - padding: 0 10px; - cursor: pointer; - text-transform: inherit; - -webkit-letter-spacing: inherit; - -moz-letter-spacing: inherit; - -ms-letter-spacing: inherit; - letter-spacing: inherit; - font-size: inherit; - color: inherit; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; -} - -.emotion-6:focus { - border-bottom: 2px solid #9fdaff; - outline: 0 none; -} - -.emotion-12 { position: relative; overflow: hidden; } @@ -16236,33 +14545,33 @@ exports[`Storyshots Addons|Info/Story Source Array prop 1`] = ` opacity: 1; } -.emotion-40 { +.emotion-34 { border-collapse: collapse; margin-top: 16px; width: auto; table-layout: auto; } -.emotion-24 { +.emotion-18 { border-bottom: 1px solid rgba(0,0,0,0.1); } -.emotion-14 { +.emotion-8 { padding: 2px 6px; line-height: 18px; vertical-align: middle; padding: 8px 16px; } -.emotion-38 { +.emotion-32 { font-size: 14px; } -.emotion-36 { +.emotion-30 { border-bottom: 1px solid #eee; } -.emotion-26 { +.emotion-20 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -16271,7 +14580,7 @@ exports[`Storyshots Addons|Info/Story Source Array prop 1`] = ` color: #774dd7; } -.emotion-28 { +.emotion-22 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -16280,15 +14589,15 @@ exports[`Storyshots Addons|Info/Story Source Array prop 1`] = ` color: #1ea7fd; } -.emotion-28 button { +.emotion-22 button { color: #37d5d3; } -.emotion-28 span { +.emotion-22 span { white-space: pre; } -.emotion-30 { +.emotion-24 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -16296,14 +14605,14 @@ exports[`Storyshots Addons|Info/Story Source Array prop 1`] = ` padding: 8px 16px; } -.emotion-34 { +.emotion-28 { padding: 2px 6px; text-align: left; padding: 8px 16px; }
-
    -
  • - -
    • -
@@ -17023,71 +15319,71 @@ exports[`Storyshots Addons|Info/Story Source Array prop 1`] = ` "TableComponent" Component
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -17102,72 +15398,14 @@ exports[`Storyshots Addons|Info/Story Source Array prop 1`] = ` `; exports[`Storyshots Addons|Info/Story Source Children 1`] = ` -.emotion-78 { +.emotion-72 { 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; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; - border-top: 1px solid rgba(0,0,0,0.1); - border-left: 1px solid rgba(0,0,0,0.1); - background: rgba(255,255,255,1); - border-radius: 4px 0 0 0; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - list-style: none; - padding: 0; - height: 26px; - font-size: 11px; - -webkit-letter-spacing: 1px; - -moz-letter-spacing: 1px; - -ms-letter-spacing: 1px; - letter-spacing: 1px; - text-transform: uppercase; - border-left: 0 none; -} - .emotion-6 { - border: 0 none; - display: block; - background: none; - padding: 0 10px; - cursor: pointer; - text-transform: inherit; - -webkit-letter-spacing: inherit; - -moz-letter-spacing: inherit; - -ms-letter-spacing: inherit; - letter-spacing: inherit; - font-size: inherit; - color: inherit; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; -} - -.emotion-6:focus { - border-bottom: 2px solid #9fdaff; - outline: 0 none; -} - -.emotion-12 { position: relative; overflow: hidden; } @@ -17349,33 +15587,33 @@ exports[`Storyshots Addons|Info/Story Source Children 1`] = ` opacity: 1; } -.emotion-76 { +.emotion-70 { border-collapse: collapse; margin-top: 16px; width: auto; table-layout: auto; } -.emotion-24 { +.emotion-18 { border-bottom: 1px solid rgba(0,0,0,0.1); } -.emotion-14 { +.emotion-8 { padding: 2px 6px; line-height: 18px; vertical-align: middle; padding: 8px 16px; } -.emotion-74 { +.emotion-68 { font-size: 14px; } -.emotion-36 { +.emotion-30 { border-bottom: 1px solid #eee; } -.emotion-26 { +.emotion-20 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -17384,7 +15622,7 @@ exports[`Storyshots Addons|Info/Story Source Children 1`] = ` color: #774dd7; } -.emotion-28 { +.emotion-22 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -17393,15 +15631,15 @@ exports[`Storyshots Addons|Info/Story Source Children 1`] = ` color: #1ea7fd; } -.emotion-28 button { +.emotion-22 button { color: #37d5d3; } -.emotion-28 span { +.emotion-22 span { white-space: pre; } -.emotion-30 { +.emotion-24 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -17409,14 +15647,14 @@ exports[`Storyshots Addons|Info/Story Source Children 1`] = ` padding: 8px 16px; } -.emotion-34 { +.emotion-28 { padding: 2px 6px; text-align: left; padding: 8px 16px; }
-
    -
  • - -
    • -
@@ -17727,162 +15952,162 @@ exports[`Storyshots Addons|Info/Story Source Children 1`] = ` "BaseButton" Component
Property Type Required Default Description
propDefinitions other - []
@@ -17897,72 +16122,14 @@ exports[`Storyshots Addons|Info/Story Source Children 1`] = ` `; exports[`Storyshots Addons|Info/Story Source Many props 1`] = ` -.emotion-78 { +.emotion-72 { 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; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; - border-top: 1px solid rgba(0,0,0,0.1); - border-left: 1px solid rgba(0,0,0,0.1); - background: rgba(255,255,255,1); - border-radius: 4px 0 0 0; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - list-style: none; - padding: 0; - height: 26px; - font-size: 11px; - -webkit-letter-spacing: 1px; - -moz-letter-spacing: 1px; - -ms-letter-spacing: 1px; - letter-spacing: 1px; - text-transform: uppercase; - border-left: 0 none; -} - .emotion-6 { - border: 0 none; - display: block; - background: none; - padding: 0 10px; - cursor: pointer; - text-transform: inherit; - -webkit-letter-spacing: inherit; - -moz-letter-spacing: inherit; - -ms-letter-spacing: inherit; - letter-spacing: inherit; - font-size: inherit; - color: inherit; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; -} - -.emotion-6:focus { - border-bottom: 2px solid #9fdaff; - outline: 0 none; -} - -.emotion-12 { position: relative; overflow: hidden; } @@ -18144,33 +16311,33 @@ exports[`Storyshots Addons|Info/Story Source Many props 1`] = ` opacity: 1; } -.emotion-76 { +.emotion-70 { border-collapse: collapse; margin-top: 16px; width: auto; table-layout: auto; } -.emotion-24 { +.emotion-18 { border-bottom: 1px solid rgba(0,0,0,0.1); } -.emotion-14 { +.emotion-8 { padding: 2px 6px; line-height: 18px; vertical-align: middle; padding: 8px 16px; } -.emotion-74 { +.emotion-68 { font-size: 14px; } -.emotion-36 { +.emotion-30 { border-bottom: 1px solid #eee; } -.emotion-26 { +.emotion-20 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -18179,7 +16346,7 @@ exports[`Storyshots Addons|Info/Story Source Many props 1`] = ` color: #774dd7; } -.emotion-28 { +.emotion-22 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -18188,15 +16355,15 @@ exports[`Storyshots Addons|Info/Story Source Many props 1`] = ` color: #1ea7fd; } -.emotion-28 button { +.emotion-22 button { color: #37d5d3; } -.emotion-28 span { +.emotion-22 span { white-space: pre; } -.emotion-30 { +.emotion-24 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -18204,14 +16371,14 @@ exports[`Storyshots Addons|Info/Story Source Many props 1`] = ` padding: 8px 16px; } -.emotion-34 { +.emotion-28 { padding: 2px 6px; text-align: left; padding: 8px 16px; }
-
    -
  • - -
    • -
@@ -18424,162 +16578,162 @@ exports[`Storyshots Addons|Info/Story Source Many props 1`] = ` "BaseButton" Component
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -18594,72 +16748,14 @@ exports[`Storyshots Addons|Info/Story Source Many props 1`] = ` `; exports[`Storyshots Addons|Info/Story Source Object prop 1`] = ` -.emotion-78 { +.emotion-72 { 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; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; - border-top: 1px solid rgba(0,0,0,0.1); - border-left: 1px solid rgba(0,0,0,0.1); - background: rgba(255,255,255,1); - border-radius: 4px 0 0 0; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - list-style: none; - padding: 0; - height: 26px; - font-size: 11px; - -webkit-letter-spacing: 1px; - -moz-letter-spacing: 1px; - -ms-letter-spacing: 1px; - letter-spacing: 1px; - text-transform: uppercase; - border-left: 0 none; -} - .emotion-6 { - border: 0 none; - display: block; - background: none; - padding: 0 10px; - cursor: pointer; - text-transform: inherit; - -webkit-letter-spacing: inherit; - -moz-letter-spacing: inherit; - -ms-letter-spacing: inherit; - letter-spacing: inherit; - font-size: inherit; - color: inherit; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; -} - -.emotion-6:focus { - border-bottom: 2px solid #9fdaff; - outline: 0 none; -} - -.emotion-12 { position: relative; overflow: hidden; } @@ -18841,33 +16937,33 @@ exports[`Storyshots Addons|Info/Story Source Object prop 1`] = ` opacity: 1; } -.emotion-76 { +.emotion-70 { border-collapse: collapse; margin-top: 16px; width: auto; table-layout: auto; } -.emotion-24 { +.emotion-18 { border-bottom: 1px solid rgba(0,0,0,0.1); } -.emotion-14 { +.emotion-8 { padding: 2px 6px; line-height: 18px; vertical-align: middle; padding: 8px 16px; } -.emotion-74 { +.emotion-68 { font-size: 14px; } -.emotion-36 { +.emotion-30 { border-bottom: 1px solid #eee; } -.emotion-26 { +.emotion-20 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -18876,7 +16972,7 @@ exports[`Storyshots Addons|Info/Story Source Object prop 1`] = ` color: #774dd7; } -.emotion-28 { +.emotion-22 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -18885,15 +16981,15 @@ exports[`Storyshots Addons|Info/Story Source Object prop 1`] = ` color: #1ea7fd; } -.emotion-28 button { +.emotion-22 button { color: #37d5d3; } -.emotion-28 span { +.emotion-22 span { white-space: pre; } -.emotion-30 { +.emotion-24 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -18901,14 +16997,14 @@ exports[`Storyshots Addons|Info/Story Source Object prop 1`] = ` padding: 8px 16px; } -.emotion-34 { +.emotion-28 { padding: 2px 6px; text-align: left; padding: 8px 16px; }
-
    -
  • - -
    • -
@@ -19197,162 +17280,162 @@ exports[`Storyshots Addons|Info/Story Source Object prop 1`] = ` "BaseButton" Component
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -19367,72 +17450,14 @@ exports[`Storyshots Addons|Info/Story Source Object prop 1`] = ` `; exports[`Storyshots Addons|Info/Story Source One prop 1`] = ` -.emotion-78 { +.emotion-72 { 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; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; - border-top: 1px solid rgba(0,0,0,0.1); - border-left: 1px solid rgba(0,0,0,0.1); - background: rgba(255,255,255,1); - border-radius: 4px 0 0 0; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - list-style: none; - padding: 0; - height: 26px; - font-size: 11px; - -webkit-letter-spacing: 1px; - -moz-letter-spacing: 1px; - -ms-letter-spacing: 1px; - letter-spacing: 1px; - text-transform: uppercase; - border-left: 0 none; -} - .emotion-6 { - border: 0 none; - display: block; - background: none; - padding: 0 10px; - cursor: pointer; - text-transform: inherit; - -webkit-letter-spacing: inherit; - -moz-letter-spacing: inherit; - -ms-letter-spacing: inherit; - letter-spacing: inherit; - font-size: inherit; - color: inherit; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; -} - -.emotion-6:focus { - border-bottom: 2px solid #9fdaff; - outline: 0 none; -} - -.emotion-12 { position: relative; overflow: hidden; } @@ -19614,33 +17639,33 @@ exports[`Storyshots Addons|Info/Story Source One prop 1`] = ` opacity: 1; } -.emotion-76 { +.emotion-70 { border-collapse: collapse; margin-top: 16px; width: auto; table-layout: auto; } -.emotion-24 { +.emotion-18 { border-bottom: 1px solid rgba(0,0,0,0.1); } -.emotion-14 { +.emotion-8 { padding: 2px 6px; line-height: 18px; vertical-align: middle; padding: 8px 16px; } -.emotion-74 { +.emotion-68 { font-size: 14px; } -.emotion-36 { +.emotion-30 { border-bottom: 1px solid #eee; } -.emotion-26 { +.emotion-20 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -19649,7 +17674,7 @@ exports[`Storyshots Addons|Info/Story Source One prop 1`] = ` color: #774dd7; } -.emotion-28 { +.emotion-22 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -19658,15 +17683,15 @@ exports[`Storyshots Addons|Info/Story Source One prop 1`] = ` color: #1ea7fd; } -.emotion-28 button { +.emotion-22 button { color: #37d5d3; } -.emotion-28 span { +.emotion-22 span { white-space: pre; } -.emotion-30 { +.emotion-24 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -19674,14 +17699,14 @@ exports[`Storyshots Addons|Info/Story Source One prop 1`] = ` padding: 8px 16px; } -.emotion-34 { +.emotion-28 { padding: 2px 6px; text-align: left; padding: 8px 16px; }
-
    -
  • - -
    • -
@@ -19826,162 +17838,162 @@ exports[`Storyshots Addons|Info/Story Source One prop 1`] = ` "BaseButton" Component
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -19996,72 +18008,14 @@ exports[`Storyshots Addons|Info/Story Source One prop 1`] = ` `; exports[`Storyshots Addons|Info/deprecated Displays Markdown in description 1`] = ` -.emotion-78 { +.emotion-72 { 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; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; - border-top: 1px solid rgba(0,0,0,0.1); - border-left: 1px solid rgba(0,0,0,0.1); - background: rgba(255,255,255,1); - border-radius: 4px 0 0 0; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - list-style: none; - padding: 0; - height: 26px; - font-size: 11px; - -webkit-letter-spacing: 1px; - -moz-letter-spacing: 1px; - -ms-letter-spacing: 1px; - letter-spacing: 1px; - text-transform: uppercase; - border-left: 0 none; -} - .emotion-6 { - border: 0 none; - display: block; - background: none; - padding: 0 10px; - cursor: pointer; - text-transform: inherit; - -webkit-letter-spacing: inherit; - -moz-letter-spacing: inherit; - -ms-letter-spacing: inherit; - letter-spacing: inherit; - font-size: inherit; - color: inherit; - border-top: 2px solid transparent; - border-bottom: 2px solid transparent; -} - -.emotion-6:focus { - border-bottom: 2px solid #9fdaff; - outline: 0 none; -} - -.emotion-12 { position: relative; overflow: hidden; } @@ -20243,33 +18197,33 @@ exports[`Storyshots Addons|Info/deprecated Displays Markdown in description 1`] opacity: 1; } -.emotion-76 { +.emotion-70 { border-collapse: collapse; margin-top: 16px; width: auto; table-layout: auto; } -.emotion-24 { +.emotion-18 { border-bottom: 1px solid rgba(0,0,0,0.1); } -.emotion-14 { +.emotion-8 { padding: 2px 6px; line-height: 18px; vertical-align: middle; padding: 8px 16px; } -.emotion-74 { +.emotion-68 { font-size: 14px; } -.emotion-36 { +.emotion-30 { border-bottom: 1px solid #eee; } -.emotion-26 { +.emotion-20 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -20278,7 +18232,7 @@ exports[`Storyshots Addons|Info/deprecated Displays Markdown in description 1`] color: #774dd7; } -.emotion-28 { +.emotion-22 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -20287,15 +18241,15 @@ exports[`Storyshots Addons|Info/deprecated Displays Markdown in description 1`] color: #1ea7fd; } -.emotion-28 button { +.emotion-22 button { color: #37d5d3; } -.emotion-28 span { +.emotion-22 span { white-space: pre; } -.emotion-30 { +.emotion-24 { padding: 2px 6px; white-space: nowrap; font-family: Monaco,Consolas,"Courier New",monospace; @@ -20303,14 +18257,14 @@ exports[`Storyshots Addons|Info/deprecated Displays Markdown in description 1`] padding: 8px 16px; } -.emotion-34 { +.emotion-28 { padding: 2px 6px; text-align: left; padding: 8px 16px; }
-
    -
  • - -
    • -
@@ -20544,162 +18485,162 @@ exports[`Storyshots Addons|Info/deprecated Displays Markdown in description 1`] "BaseButton" Component
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
From e14315e33a344d55b920c9e6e6d85bb567929c19 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 21 Dec 2018 19:29:37 +0100 Subject: [PATCH 047/120] FIX linting --- .eslintrc.js | 7 ++++++- addons/storyshots/storyshots-core/README.md | 4 ++-- .../storyshots-core/src/frameworks/svelte/renderTree.js | 2 +- 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index f4e7f563d2c..319f9dca013 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -96,7 +96,12 @@ module.exports = { }, overrides: [ { - files: ['**/__tests__/**', '**/*.test.js/**', '**/*.stories.js'], + files: [ + '**/__tests__/**', + '**/*.test.js/**', + '**/*.stories.js', + '**/storyshots/**/stories/**', + ], rules: { 'import/no-extraneous-dependencies': ignore, }, diff --git a/addons/storyshots/storyshots-core/README.md b/addons/storyshots/storyshots-core/README.md index 695d2be9e0b..a9725ea5af7 100644 --- a/addons/storyshots/storyshots-core/README.md +++ b/addons/storyshots/storyshots-core/README.md @@ -325,7 +325,7 @@ initStoryshots({ }) => { const converter = new Stories2SnapsConverter(); const snapshotFilename = converter.getSnapshotFileName(context); - const storyElement = story.render(context); + const storyElement = story.render(); // mount the story const tree = mount(storyElement); @@ -612,7 +612,7 @@ import toJson from 'enzyme-to-json'; initStoryshots({ test: ({ story, context }) => { const snapshotFileName = getSnapshotFileName(context); - const storyElement = story.render(context); + const storyElement = story.render(); const shallowTree = shallow(storyElement); if (snapshotFileName) { diff --git a/addons/storyshots/storyshots-core/src/frameworks/svelte/renderTree.js b/addons/storyshots/storyshots-core/src/frameworks/svelte/renderTree.js index 64107966bd0..9c4db814632 100644 --- a/addons/storyshots/storyshots-core/src/frameworks/svelte/renderTree.js +++ b/addons/storyshots/storyshots-core/src/frameworks/svelte/renderTree.js @@ -11,7 +11,7 @@ import { document } from 'global'; * If we don't render to HTML, we will get a snapshot of the raw story * i.e. ({ Component, data }). */ -function getRenderedTree(story, context) { +function getRenderedTree(story) { const { Component, data } = story.render(); // We need to create a target to mount onto. From 810e24eb9fda2e66a7477ec0cf77e8e09df1386d Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 21 Dec 2018 20:11:08 +0100 Subject: [PATCH 048/120] FIX lockfile for docs --- docs/yarn.lock | 220 +++++++++++++++++++++++++------------------------ 1 file changed, 112 insertions(+), 108 deletions(-) diff --git a/docs/yarn.lock b/docs/yarn.lock index 930fc765e25..f723f4f185d 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -1032,17 +1032,17 @@ resolved "https://registry.yarnpkg.com/@snyk/gemfile/-/gemfile-1.1.0.tgz#8c254dfc7739b2e8513c44c976fc41872d5f6af0" integrity sha512-mLwF+ccuvRZMS0SxUAxA3dAp8mB3m2FxIsBIUWFTYvzxl+E4XTZb8uFrUqXHbcxhZH1Z8taHohNTbzXZn3M8ag== -"@storybook/addon-actions@4.2.0-alpha.3": - version "4.2.0-alpha.3" - resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-4.2.0-alpha.3.tgz#ba5ef5d8379338e870583f80b5d3b8782ab7886b" - integrity sha512-7wqhaM/yDxKZeasQqjTsEjcDKWsJrkCKYx/1gzvQi3NqpctvdOzFyAKKDB0LDbEUPNdOdXUsPV5zm+jlXzw98g== +"@storybook/addon-actions@4.2.0-alpha.6": + version "4.2.0-alpha.6" + resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-4.2.0-alpha.6.tgz#1d20cdad5cc2d6406ef0065340428cbcf36d54ea" + integrity sha512-856R5qDW8PGIvLiLnggdQyiEMgx5BWuaSxFkd5oqE1hKYKGoUsivbX2jraPFhtB7/6OJ3mhVV7k9MLChyF3i/A== dependencies: "@emotion/core" "^0.13.1" "@emotion/provider" "^0.11.2" "@emotion/styled" "^0.10.6" - "@storybook/addons" "4.2.0-alpha.3" - "@storybook/components" "4.2.0-alpha.3" - "@storybook/core-events" "4.2.0-alpha.3" + "@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" @@ -1052,51 +1052,51 @@ react-inspector "^2.3.0" uuid "^3.3.2" -"@storybook/addon-links@4.2.0-alpha.3": - version "4.2.0-alpha.3" - resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-4.2.0-alpha.3.tgz#932991d3fefe5a8ed976c9312770e2567dbfb292" - integrity sha512-oVM+Fztj2fgEkRjJGw+MenuoOisO4tKws452DAD7US7lqtQqE9Wto2SOci8+hcXOgw5846HQ4F4A/SNjqDwQ7w== +"@storybook/addon-links@4.2.0-alpha.6": + version "4.2.0-alpha.6" + resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-4.2.0-alpha.6.tgz#cd0e74193a4e5284a973e13aed58a9f91a1a2f9f" + integrity sha512-Ria1j/y6zC4fPAPqMkhDFBzjD08Aq2g6vNzBsJgLtPr7h1juKwz6kp+5ZodipaVv6SllYmUuAZ0fb1rPZD+IIg== dependencies: - "@storybook/addons" "4.2.0-alpha.3" - "@storybook/components" "4.2.0-alpha.3" - "@storybook/core-events" "4.2.0-alpha.3" + "@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" -"@storybook/addons@4.2.0-alpha.3": - version "4.2.0-alpha.3" - resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-4.2.0-alpha.3.tgz#cadd8162bcc0e5b0e741f81024c8156d1caac985" - integrity sha512-FV6faHMhp15R4jM7AEvPsxPlmKzhaiHvNjoEnRccAEBc5FCc2S92Dcehl87SKB+hBCU8VAcKphm8miDTFeNi7g== +"@storybook/addons@4.2.0-alpha.6": + version "4.2.0-alpha.6" + resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-4.2.0-alpha.6.tgz#f5cd9bb728167e2cf0226992b8fdd39fc00a849c" + integrity sha512-t9hG6qobSyEZwKFdGGUYeZJ3Gl5rpu/W9WM6Zq4UAhoKAPZh2j2IcIHLZ4VX6OaFvwXo6XpgMf8VLl16BO3AAQ== dependencies: - "@storybook/channels" "4.2.0-alpha.3" - "@storybook/components" "4.2.0-alpha.3" + "@storybook/channels" "4.2.0-alpha.6" + "@storybook/components" "4.2.0-alpha.6" global "^4.3.2" util-deprecate "^1.0.2" -"@storybook/channel-postmessage@4.2.0-alpha.3": - version "4.2.0-alpha.3" - resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-4.2.0-alpha.3.tgz#5cccc6a43aac260e449cedd4248d1b2723e5dfe3" - integrity sha512-apuYJ7oIx1jwzM/aKFT1bMQBp08H6BFsedp5ZQkl1QFC9yorTuRrtAc/B25FVp1E0jjQO3yl91Joh8V9ctrvvA== +"@storybook/channel-postmessage@4.2.0-alpha.6": + version "4.2.0-alpha.6" + resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-4.2.0-alpha.6.tgz#c26e80a416cc92d5e3dd8ce94a69c1f5d997e32f" + integrity sha512-yh4spt88LdgLHfYpJCcyu1IQHSGwM3uSpFCvRfumDHP67JJutSyvEFl0TWXQmNSwDS/w+XIqbBYUt/ky8abpdg== dependencies: - "@storybook/channels" "4.2.0-alpha.3" + "@storybook/channels" "4.2.0-alpha.6" global "^4.3.2" json-stringify-safe "^5.0.1" -"@storybook/channels@4.2.0-alpha.3": - version "4.2.0-alpha.3" - resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-4.2.0-alpha.3.tgz#79a0154121e3dafcccd6d121f152a6ec31fec62a" - integrity sha512-QpotHBGO5kXpvHIFDotkInjXNiAPsGjCTVFXHg7Veu4DLnbebO5URhioe3i6Ig8Y7uxB/9EyFtuxZIH0GXImQw== +"@storybook/channels@4.2.0-alpha.6": + version "4.2.0-alpha.6" + resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-4.2.0-alpha.6.tgz#f49e91d76ad8b214d73fc8be12e637630b8a2768" + integrity sha512-Rdr+1G7B3dih/4ZLftyU++yt4QFwX/HUUvkZYnxT2Kx2BaxdFaAVaXFawDmUjnOXMyIlMEadgqt25QiP4XUDqg== -"@storybook/client-logger@4.2.0-alpha.3": - version "4.2.0-alpha.3" - resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-4.2.0-alpha.3.tgz#362f8c62ae92f8b301c1ef2038c2aab122be5ea3" - integrity sha512-Tdt7LGOXU73mYkbaeCt6qXvcoT98QBbKh46Y9+6maWgvSVb8uFm93QA4H5A3QlowM65tar7y7M3MvLCCAnQGgg== +"@storybook/client-logger@4.2.0-alpha.6": + version "4.2.0-alpha.6" + resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-4.2.0-alpha.6.tgz#e239ef4aa6f569844e5338df764257c3fa81129c" + integrity sha512-a5lNA+aeP13kUT75mGYS5vOTf3xcczG3AkVFI1CIuL15DXYki69hXcrfpRvjN9NlYAeoO7NsVWRyjUW6X79Nhg== -"@storybook/components@4.2.0-alpha.3": - version "4.2.0-alpha.3" - resolved "https://registry.yarnpkg.com/@storybook/components/-/components-4.2.0-alpha.3.tgz#5ce306fee8c4f086de13b8a0840b034ffdc62773" - integrity sha512-Rd+y5c0IbkWy/Siuk7Pe79RpZRkKG12r/Fv5CGVaafg8tk/c/WmwBvGtpOFxnm3cIOvg4NluV2BU5bRfhUaMPQ== +"@storybook/components@4.2.0-alpha.6": + version "4.2.0-alpha.6" + resolved "https://registry.yarnpkg.com/@storybook/components/-/components-4.2.0-alpha.6.tgz#5b240139f61bb6f9def0e779ddc4191b8fe51fea" + integrity sha512-Xd0I+zWvxBaNm2p8N0bn2JQBNIHxynbXrMJ81eEvaEAsqyFN+Jh9CggIBV4+EZ/N788bCeS6OLMI+11/OBJTbA== dependencies: "@emotion/core" "^0.13.1" "@emotion/provider" "^0.11.2" @@ -1109,30 +1109,30 @@ react-textarea-autosize "^7.0.4" render-fragment "^0.1.1" -"@storybook/core-events@4.2.0-alpha.3": - version "4.2.0-alpha.3" - resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-4.2.0-alpha.3.tgz#3a84bfda57810b4f649965b1deb85247e591601d" - integrity sha512-s09UMgBESy+xSG5ngLGW0o3WKfzCWZ+DPnYRJ78EQUnslMPewsTjPTo8MsVdD27ngVpndMvQq/qTmlcGzrEDnw== +"@storybook/core-events@4.2.0-alpha.6": + version "4.2.0-alpha.6" + resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-4.2.0-alpha.6.tgz#12fef4ddbca833a4815868a208a7d876d6ee23ce" + integrity sha512-FVUN8+a8Wvg7ufJTVX26eP/p9K+LcLGNsuDHECNJT/08Kr/gr/c8rDYA32y05JBLo5hR59plR7CKyQBF/JwWKA== -"@storybook/core@4.2.0-alpha.3": - version "4.2.0-alpha.3" - resolved "https://registry.yarnpkg.com/@storybook/core/-/core-4.2.0-alpha.3.tgz#42e35076eb92eb2f65336e09ffdf362d1a728424" - integrity sha512-wnpJnw3JCEyE4vVi0fHfp7O4Bqjmf747ushWhxqUx9v0PHJ69x4pI77Ck8qF1xOo+TAn39ZSA3vQoFgKHWwdng== +"@storybook/core@4.2.0-alpha.6": + version "4.2.0-alpha.6" + resolved "https://registry.yarnpkg.com/@storybook/core/-/core-4.2.0-alpha.6.tgz#937d8328267c61c3e56727eb7670b3a86998ed86" + integrity sha512-flwvUVoIRQSDkJ01VPW4ifXojUibiXJjZ8oxvmMf0lFjTNvUwVPo+yhndmmTJhwA1LECVyL3i5GxkHO9lGGcuQ== dependencies: "@babel/plugin-proposal-class-properties" "^7.2.0" "@babel/preset-env" "^7.2.0" "@emotion/core" "^0.13.1" "@emotion/provider" "^0.11.2" "@emotion/styled" "^0.10.6" - "@storybook/addons" "4.2.0-alpha.3" - "@storybook/channel-postmessage" "4.2.0-alpha.3" - "@storybook/client-logger" "4.2.0-alpha.3" - "@storybook/core-events" "4.2.0-alpha.3" - "@storybook/node-logger" "4.2.0-alpha.3" - "@storybook/ui" "4.2.0-alpha.3" + "@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.3.1" - babel-plugin-macros "^2.4.2" + autoprefixer "^9.4.3" + babel-plugin-macros "^2.4.3" babel-preset-minify "^0.5.0 || 0.6.0-alpha.5" boxen "^2.0.0" case-sensitive-paths-webpack-plugin "^2.1.2" @@ -1192,10 +1192,10 @@ "@storybook/react-simple-di" "^1.2.1" babel-runtime "6.x.x" -"@storybook/node-logger@4.2.0-alpha.3": - version "4.2.0-alpha.3" - resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-4.2.0-alpha.3.tgz#5fb0308a842ca2d2ec94aaf2d7706d30b07ebfd9" - integrity sha512-20pATvWEz2AToWKC9MbKYveZnuxCROHSovDPIBejWdb88HXU6v4Pub9eX9wiLjPzOS620HbB4E7OevqAZdMUsQ== +"@storybook/node-logger@4.2.0-alpha.6": + version "4.2.0-alpha.6" + resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-4.2.0-alpha.6.tgz#833af96c351b99197c3e6641abccf48ba5670758" + integrity sha512-Mnp9t6fY2LcNFvPnodoz7j1AxihnfMsx6HZObq0J7HrH8LHPpFKwiLN+xnz5QIS4l/gEnKdgqCs39TZQDfmVGw== dependencies: chalk "^2.4.1" core-js "^2.5.7" @@ -1250,17 +1250,17 @@ dependencies: babel-runtime "^6.5.0" -"@storybook/react@4.2.0-alpha.3": - version "4.2.0-alpha.3" - resolved "https://registry.yarnpkg.com/@storybook/react/-/react-4.2.0-alpha.3.tgz#8c11d85d7df44a97ef0e2707bc9ab9acbb06ee67" - integrity sha512-6yFmp7Jo8CRzmM7ZTGU8zQbAMniWuoMuAv5Vq+0amOycLN8MEgxEGBZ5CAg66T6HCTFnhLxXFlVsGPQP5r04Yw== +"@storybook/react@4.2.0-alpha.6": + version "4.2.0-alpha.6" + resolved "https://registry.yarnpkg.com/@storybook/react/-/react-4.2.0-alpha.6.tgz#d592fa5b832175835faff3eb8c854d66ab6c373b" + integrity sha512-HZpfRMcBH8MyRm/G3yt/BkV4nW9DnuaHa09Zes2qHxM/UYybukNu3c/4RfvEJRhGF+VHF0t1Nny8eEdV/YdKDg== dependencies: "@babel/plugin-transform-react-constant-elements" "^7.2.0" "@babel/preset-flow" "^7.0.0" "@babel/preset-react" "^7.0.0" "@emotion/styled" "^0.10.6" - "@storybook/core" "4.2.0-alpha.3" - "@storybook/node-logger" "4.2.0-alpha.3" + "@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" @@ -1271,23 +1271,21 @@ lodash "^4.17.11" mini-css-extract-plugin "^0.4.4" prop-types "^15.6.2" - react "^16.6.0" react-dev-utils "^6.1.0" - react-dom "^16.6.0" regenerator-runtime "^0.12.1" semver "^5.6.0" webpack "^4.23.1" -"@storybook/ui@4.2.0-alpha.3": - version "4.2.0-alpha.3" - resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-4.2.0-alpha.3.tgz#ecf65f4f8a709ce065c9e4e2d00b8fc1415ad4b3" - integrity sha512-YZovifHWFe8Ce4GvH/mXt6HIjSEqesLNnIk5+NXNeYoMMIAI7+/P+gQ0+EHg2AlOn84jjuTCOYgVc4qo8gSrGg== +"@storybook/ui@4.2.0-alpha.6": + version "4.2.0-alpha.6" + resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-4.2.0-alpha.6.tgz#141f1c35b5a0c15f4d28db7414baf003def0476f" + integrity sha512-nARz1WabXK54QsUcP4mSCqPvHaur+bboZeSCJZO/iCb8MXOtyifzLSLbArspEE5AfxLWl7bfnOiPQckL9pQRGw== dependencies: "@emotion/core" "^0.13.1" "@emotion/provider" "^0.11.2" "@emotion/styled" "^0.10.6" - "@storybook/components" "4.2.0-alpha.3" - "@storybook/core-events" "4.2.0-alpha.3" + "@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" @@ -2196,13 +2194,13 @@ autoprefixer@^6.0.2, autoprefixer@^6.3.1: postcss "^5.2.16" postcss-value-parser "^3.2.3" -autoprefixer@^9.3.1: - version "9.4.2" - resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.4.2.tgz#0234d20900684fc4bfb67926493deb68384067f5" - integrity sha512-tYQYJvZvqlJCzF+BLC//uAcdT/Yy4ik9bwZRXr/EehUJ/bjjpTthsWTy8dpowdoIE1sLCDf1ch4Eb2cOSzZC9w== +autoprefixer@^9.4.3: + version "9.4.3" + resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.4.3.tgz#c97384a8fd80477b78049163a91bbc725d9c41d9" + integrity sha512-/XSnzDepRkAU//xLcXA/lUWxpsBuw0WiriAHOqnxkuCtzLhaz+fL4it4gp20BQ8n5SyLzK/FOc7A0+u/rti2FQ== dependencies: - browserslist "^4.3.5" - caniuse-lite "^1.0.30000914" + browserslist "^4.3.6" + caniuse-lite "^1.0.30000921" normalize-range "^0.1.2" num2fraction "^1.2.2" postcss "^7.0.6" @@ -2510,7 +2508,7 @@ babel-plugin-dynamic-import-node@2.2.0: dependencies: object.assign "^4.1.0" -babel-plugin-macros@2.4.2, babel-plugin-macros@^2.4.2: +babel-plugin-macros@2.4.2: version "2.4.2" resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.4.2.tgz#21b1a2e82e2130403c5ff785cba6548e9b644b28" integrity sha512-NBVpEWN4OQ/bHnu1fyDaAaTPAjnhXCEPqr1RwqxrU7b6tZ2hypp+zX4hlNfmVGfClD5c3Sl6Hfj5TJNF5VG5aA== @@ -2518,6 +2516,14 @@ babel-plugin-macros@2.4.2, babel-plugin-macros@^2.4.2: cosmiconfig "^5.0.5" resolve "^1.8.1" +babel-plugin-macros@^2.4.3: + version "2.4.3" + resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.4.3.tgz#870345aa538d85f04b4614fea5922b55c45dd551" + integrity sha512-M8cE1Rx0zgfKYBWAS+T6ZVCLGuTKdBI5Rn3fu9q6iVdH0UjaXdmF501/VEYn7kLHCgguhGNk5JBzOn64e2xDEA== + dependencies: + cosmiconfig "^5.0.5" + resolve "^1.8.1" + babel-plugin-minify-builtins@^0.5.0: version "0.5.0" resolved "https://registry.yarnpkg.com/babel-plugin-minify-builtins/-/babel-plugin-minify-builtins-0.5.0.tgz#31eb82ed1a0d0efdc31312f93b6e4741ce82c36b" @@ -3841,7 +3847,7 @@ browserslist@^3.2.6: caniuse-lite "^1.0.30000844" electron-to-chromium "^1.3.47" -browserslist@^4.1.0, browserslist@^4.3.4, browserslist@^4.3.5: +browserslist@^4.1.0, browserslist@^4.3.4: version "4.3.5" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.3.5.tgz#1a917678acc07b55606748ea1adf9846ea8920f7" integrity sha512-z9ZhGc3d9e/sJ9dIx5NFXkKoaiQTnrvrMsN3R1fGb1tkWWNSz12UewJn9TNxGo1l7J23h0MRaPmk7jfeTZYs1w== @@ -3850,6 +3856,15 @@ browserslist@^4.1.0, browserslist@^4.3.4, browserslist@^4.3.5: electron-to-chromium "^1.3.86" node-releases "^1.0.5" +browserslist@^4.3.6: + version "4.3.6" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.3.6.tgz#0f9d9081afc66b36f477c6bdf3813f784f42396a" + integrity sha512-kMGKs4BTzRWviZ8yru18xBpx+CyHG9eqgRbj9XbE3IMgtczf4aiA0Y1YCpVdvUieKGZ03kolSPXqTcscBCb9qw== + dependencies: + caniuse-lite "^1.0.30000921" + electron-to-chromium "^1.3.92" + node-releases "^1.1.1" + bser@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/bser/-/bser-2.0.0.tgz#9ac78d3ed5d915804fd87acb158bc797147a1719" @@ -4068,11 +4083,16 @@ caniuse-lite@^1.0.30000844: resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000890.tgz#86a18ffcc65d79ec6a437e985761b8bf1c4efeaf" integrity sha512-4NI3s4Y6ROm+SgZN5sLUG4k7nVWQnedis3c/RWkynV5G6cHSY7+a8fwFyn2yoBDE3E6VswhTNNwR3PvzGqlTkg== -caniuse-lite@^1.0.30000884, caniuse-lite@^1.0.30000912, caniuse-lite@^1.0.30000914: +caniuse-lite@^1.0.30000884, caniuse-lite@^1.0.30000912: version "1.0.30000921" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000921.tgz#7a607c1623444b22351d834e093aedda3c42fbe8" integrity sha512-Bu09ciy0lMWLgpYC77I0YGuI8eFRBPPzaSOYJK1jTI64txCphYCqnWbxJYjHABYVt/TYX/p3jNjLBR87u1Bfpw== +caniuse-lite@^1.0.30000921: + version "1.0.30000923" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000923.tgz#148f9bda508024b5ce957b463ae2e8302b451bb2" + integrity sha512-j5ur7eeluOFjjPUkydtXP4KFAsmH3XaQNch5tvWSO+dLHYt5PE+VgJZLWtbVOodfWij6m6zas28T4gB/cLYq1w== + capture-stack-trace@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz#a6c0bbe1f38f3aa0b92238ecb6ff42c344d4135d" @@ -5823,6 +5843,11 @@ electron-to-chromium@^1.3.62, electron-to-chromium@^1.3.86: resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.91.tgz#d74437a753b122aa6eca7c722055004d3627635d" integrity sha512-wOWwM4vQpmb97VNkExnwE5e/sUMUb7NXurlEnhE89JOarUp6FOOMKjtTGgj9bmqskZkeRA7u+p0IztJ/y2OP5Q== +electron-to-chromium@^1.3.92: + version "1.3.96" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.96.tgz#25770ec99b8b07706dedf3a5f43fa50cb54c4f9a" + integrity sha512-ZUXBUyGLeoJxp4Nt6G/GjBRLnyz8IKQGexZ2ndWaoegThgMGFO1tdDYID5gBV32/1S83osjJHyfzvanE/8HY4Q== + element-resize-detector@^1.1.12: version "1.1.14" resolved "https://registry.yarnpkg.com/element-resize-detector/-/element-resize-detector-1.1.14.tgz#af064a0a618a820ad570a95c5eec5b77be0128c1" @@ -10866,6 +10891,13 @@ node-releases@^1.0.0-alpha.11, node-releases@^1.0.5: dependencies: semver "^5.3.0" +node-releases@^1.1.1: + version "1.1.2" + resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.2.tgz#93c17fba5eec8650ad908de5433fa8763baebe4d" + integrity sha512-j1gEV/zX821yxdWp/1vBMN0pSUjuH9oGUdLCb4PfUko6ZW7KdRs3Z+QGGwDUhYtSpQvdVVyLd2V0YvLsmdg5jQ== + dependencies: + semver "^5.3.0" + node-status-codes@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/node-status-codes/-/node-status-codes-1.0.0.tgz#5ae5541d024645d32a58fcddc9ceecea7ae3ac2f" @@ -12933,16 +12965,6 @@ react-dom@^15.6.0, react-dom@^15.6.2: object-assign "^4.1.0" prop-types "^15.5.10" -react-dom@^16.6.0: - version "16.6.3" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.6.3.tgz#8fa7ba6883c85211b8da2d0efeffc9d3825cccc0" - integrity sha512-8ugJWRCWLGXy+7PmNh8WJz3g1TaTUt1XyoIcFN+x0Zbkoz+KKdUyx1AQLYJdbFXjuF41Nmjn5+j//rxvhFjgSQ== - dependencies: - loose-envify "^1.1.0" - object-assign "^4.1.1" - prop-types "^15.6.2" - scheduler "^0.11.2" - react-error-overlay@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-3.0.0.tgz#c2bc8f4d91f1375b3dad6d75265d51cd5eeaf655" @@ -13142,16 +13164,6 @@ react@^15.6.0, react@^15.6.2: object-assign "^4.1.0" prop-types "^15.5.10" -react@^16.6.0: - version "16.6.3" - resolved "https://registry.yarnpkg.com/react/-/react-16.6.3.tgz#25d77c91911d6bbdd23db41e70fb094cc1e0871c" - integrity sha512-zCvmH2vbEolgKxtqXL2wmGCUxUyNheYn/C+PD1YAjfxHC54+MhdruyhO7QieQrYsYeTxrn93PM2y0jRH1zEExw== - dependencies: - loose-envify "^1.1.0" - object-assign "^4.1.1" - prop-types "^15.6.2" - scheduler "^0.11.2" - read-all-stream@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/read-all-stream/-/read-all-stream-3.1.0.tgz#35c3e177f2078ef789ee4bfafa4373074eaef4fa" @@ -14048,14 +14060,6 @@ sc-formatter@^3.0.1: resolved "https://registry.yarnpkg.com/sc-formatter/-/sc-formatter-3.0.2.tgz#9abdb14e71873ce7157714d3002477bbdb33c4e6" integrity sha512-9PbqYBpCq+OoEeRQ3QfFIGE6qwjjBcd2j7UjgDlhnZbtSnuGgHdcRklPKYGuYFH82V/dwd+AIpu8XvA1zqTd+A== -scheduler@^0.11.2: - version "0.11.3" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.11.3.tgz#b5769b90cf8b1464f3f3cfcafe8e3cd7555a2d6b" - integrity sha512-i9X9VRRVZDd3xZw10NY5Z2cVMbdYg6gqFecfj79USv1CFN+YrJ3gIPRKf1qlY+Sxly4djoKdfx1T+m9dnRB8kQ== - dependencies: - loose-envify "^1.1.0" - object-assign "^4.1.1" - schema-utils@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.3.0.tgz#f5877222ce3e931edae039f17eb3716e7137f8cf" From 0e905b5cb05380035c56216c15d10e10d895772a Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Sat, 22 Dec 2018 00:08:44 +0100 Subject: [PATCH 049/120] REMOVE a ton of cruft from snapshots (reset & divs) --- .../components/NamedExportButton.js | 6 +- examples/official-storybook/config.js | 32 +- .../addon-a11y.stories.storyshot | 405 +- .../addon-actions.stories.storyshot | 1424 +- .../addon-backgrounds.stories.storyshot | 95 +- .../addon-centered.stories.storyshot | 23 +- .../addon-cssresources.stories.storyshot | 40 +- .../addon-events.stories.storyshot | 46 +- .../addon-graphql.stories.storyshot | 297 +- .../addon-info.stories.storyshot | 25861 ++++++++-------- .../addon-jest.stories.storyshot | 19 +- .../addon-knobs.stories.storyshot | 396 +- .../addon-links.stories.storyshot | 257 +- .../addon-notes.stories.storyshot | 76 +- .../addon-options.stories.storyshot | 30 +- .../addon-storyshots.stories.storyshot | 94 +- .../addon-viewport.stories.storyshot | 61 +- .../app-acceptance.stories.storyshot | 189 +- .../__snapshots__/core.stories.storyshot | 63 +- .../other-demo.stories.storyshot | 231 +- .../other-dirname.stories.storyshot | 38 +- .../stories/addon-actions.stories.js | 16 +- .../stories/addon-info.stories.js | 18 +- .../stories/addon-jest.stories.js | 10 +- .../stories/addon-knobs.stories.js | 10 +- .../stories/core.stories.js | 6 +- .../form/__snapshots__/form.stories.storyshot | 736 +- .../grid/__snapshots__/grid.stories.storyshot | 320 +- lib/components/src/grid/grid.stories.js | 22 +- .../__snapshots__/heading.stories.storyshot | 225 +- .../icon/__snapshots__/icon.stories.storyshot | 10740 ++++--- .../logo/__snapshots__/logo.stories.storyshot | 206 +- .../menu/__snapshots__/menu.stories.storyshot | 127 +- .../RoutedLink.stories.storyshot | 42 +- .../panel_actionbar.stories.storyshot | 94 +- .../placeholder.stories.storyshot | 19 +- .../__snapshots__/preview.stories.storyshot | 47 +- .../syntaxhighlighter.stories.storyshot | 2757 +- .../syntaxhighlighter.stories.js | 55 +- .../tabs/__snapshots__/tabs.stories.storyshot | 1056 +- .../__snapshots__/treeview.stories.storyshot | 1055 +- .../__snapshots__/layout.stories.storyshot | 677 +- .../nav/__snapshots__/nav.stories.storyshot | 377 +- .../__snapshots__/panel.stories.storyshot | 164 +- .../__snapshots__/about.stories.storyshot | 13 +- 45 files changed, 23489 insertions(+), 24986 deletions(-) diff --git a/examples/official-storybook/components/NamedExportButton.js b/examples/official-storybook/components/NamedExportButton.js index b272e35b2b5..354bb42fc99 100644 --- a/examples/official-storybook/components/NamedExportButton.js +++ b/examples/official-storybook/components/NamedExportButton.js @@ -2,11 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import BaseButton from './BaseButton'; -const NamedExportButton = props => ( -
- -
-); +const NamedExportButton = props => ; NamedExportButton.defaultProps = { disabled: false, diff --git a/examples/official-storybook/config.js b/examples/official-storybook/config.js index 86df91977be..979818b8314 100644 --- a/examples/official-storybook/config.js +++ b/examples/official-storybook/config.js @@ -1,8 +1,9 @@ import React from 'react'; -import { ThemeProvider } from 'emotion-theming'; -import styled from '@emotion/styled'; +import { ThemeProvider, withTheme } from 'emotion-theming'; +// import styled from '@emotion/styled'; import { configure, addDecorator, addParameters } from '@storybook/react'; import { themes } from '@storybook/components'; +import { Global } from '@emotion/core'; import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; import { withCssResources } from '@storybook/addon-cssresources'; @@ -33,17 +34,26 @@ addHeadWarning('Dotenv file not loaded', 'dotenv-file-not-loaded'); addDecorator(withCssResources); addDecorator(withA11Y); -const Reset = styled.div(({ theme }) => ({ - fontFamily: theme.mainTextFace, - color: theme.mainTextColor, - WebkitFontSmoothing: 'antialiased', - fontSize: theme.mainTextSize, -})); - -addDecorator((story, { kind }) => (kind === 'Core|Errors' ? story() : {story()})); +const Reset = withTheme(({ theme }) => ( + +)); addDecorator((story, { kind }) => - kind === 'Core|Errors' ? story() : {story()} + kind === 'Core|Errors' ? ( + story() + ) : ( + + + {story()} + + ) ); addParameters({ diff --git a/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot index 73bf91cfe2a..569015b20e4 100644 --- a/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot +++ b/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot @@ -1,397 +1,162 @@ // 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; -} - -
- -
+ Testing the a11y addon + `; 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; -} - -
- -
+ null + `; 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; -} - -
- -
+ Testing the a11y addon + `; 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; -} - -
- -
+ Testing the a11y addon + `; 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; -} - -
- -
+ null + `; 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; - color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; -} - -
-
- - -
+
+ +
`; exports[`Storyshots Addons|A11y/Form With placeholder 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 Without 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/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 -
+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; -} - -
+Array [

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 Heading 1`] = `

`; 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 Empty Paragraph 1`] = `

`; 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... - -
+ + 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; -} - -
-
+ -

+ Testing the a11y addon + `; 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; -} - -
- -
+ Testing the a11y addon + `; 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; -} - -
- -
+ Testing the a11y addon + `; -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; -} - -
-
-
-`; +exports[`Storyshots Addons|a11y delayed render 1`] = `
`; diff --git a/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot index e976623e748..1e5a124ab61 100644 --- a/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot +++ b/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot @@ -1,450 +1,1246 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Addons|Actions All types 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; +Array [ + .emotion-0 { + padding: 0 10px; color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; + 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; +} + +, +] `; exports[`Storyshots Addons|Actions Basic example 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; + padding: 0 10px; color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; + 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; } -
- -
+ Hello World + `; exports[`Storyshots Addons|Actions Circular Payload 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; + padding: 0 10px; color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; + 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; } -
- -
+ Circular Payload + `; exports[`Storyshots Addons|Actions Decorated action + config 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; + padding: 0 10px; color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; + 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; } -
- -
+ Moving away from this story will persist the action logger + `; exports[`Storyshots Addons|Actions Decorated action 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; + padding: 0 10px; color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; + 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; } -
- -
+ Native Event + `; exports[`Storyshots Addons|Actions Decorated actions + config 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; + padding: 0 10px; color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; + 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; } -
- -
+ Moving away from this story will persist the action logger + `; exports[`Storyshots Addons|Actions Decorated actions 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; + padding: 0 10px; color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; + 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; } -
- -
+ Native Event + `; exports[`Storyshots Addons|Actions Limit Action Output 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; +Array [ + .emotion-0 { + padding: 0 10px; color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; + 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; +} + +, +] `; exports[`Storyshots Addons|Actions Multiple actions + config 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; + padding: 0 10px; color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; + 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; } -
- -
+ Moving away from this story will persist the action logger + `; exports[`Storyshots Addons|Actions Multiple actions 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; + padding: 0 10px; color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; + 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; } -
- -
+ Hello World + `; exports[`Storyshots Addons|Actions Multiple actions as object 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; + padding: 0 10px; color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; + 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; } -
- -
+ Hello World + `; exports[`Storyshots Addons|Actions Multiple actions, object + config 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; + padding: 0 10px; color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; + 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; } -
- -
+ Moving away from this story will persist the action logger + `; exports[`Storyshots Addons|Actions Persisting the action logger 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; +Array [ +

+ Moving away from this story will persist the action logger +

, + .emotion-0 { + padding: 0 10px; color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; + 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; } -
-
-

- Moving away from this story will persist the action logger -

- -
-
+.emotion-0:focus { + outline: 0 none; + border-bottom-color: #9fdaff; +} + +, +] `; exports[`Storyshots Addons|Actions Reserved keyword as name 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; + padding: 0 10px; color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; + 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; } -
- -
+ Delete + `; exports[`Storyshots Addons|Actions configureActionsDepth 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; + padding: 0 10px; color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; + 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; } -
- -
+ Object (configured depth: 2) + `; exports[`Storyshots Addons|Actions.deprecated Decorated Action 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; + padding: 0 10px; color: #444; - -webkit-font-smoothing: antialiased; - font-size: 13px; + 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; } -
- -
+ Native Event + `; diff --git a/examples/official-storybook/stories/__snapshots__/addon-backgrounds.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-backgrounds.stories.storyshot index 3c28a1b4199..0f182034951 100644 --- a/examples/official-storybook/stories/__snapshots__/addon-backgrounds.stories.storyshot +++ b/examples/official-storybook/stories/__snapshots__/addon-backgrounds.stories.storyshot @@ -1,96 +1,41 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Addons|Backgrounds disabled via [] 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; -} - -
- -
+ This one should not use backgrounds + `; exports[`Storyshots Addons|Backgrounds overriden 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; -} - -
- -
+ This one should have different backgrounds + `; exports[`Storyshots Addons|Backgrounds skipped via disable:true 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; -} - -
- -
+ This one should not use backgrounds either + `; exports[`Storyshots Addons|Backgrounds story 1 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; -} - -
- -
+ You should be able to switch backgrounds for this story + `; exports[`Storyshots Addons|Backgrounds story 2 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; -} - -
- -
+ This one too! + `; diff --git a/examples/official-storybook/stories/__snapshots__/addon-centered.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-centered.stories.storyshot index 0713d452186..e3f36b7bdf7 100644 --- a/examples/official-storybook/stories/__snapshots__/addon-centered.stories.storyshot +++ b/examples/official-storybook/stories/__snapshots__/addon-centered.stories.storyshot @@ -1,28 +1,17 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Addons|Centered story 1 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; -} -
-
- -
+ This story should be centered +
`; diff --git a/examples/official-storybook/stories/__snapshots__/addon-cssresources.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-cssresources.stories.storyshot index fb42ec83b9c..77298e639d4 100644 --- a/examples/official-storybook/stories/__snapshots__/addon-cssresources.stories.storyshot +++ b/examples/official-storybook/stories/__snapshots__/addon-cssresources.stories.storyshot @@ -1,40 +1,18 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Addons|Cssresources Camera Icon 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; -} - -
- - Camera Icon - -
+ Camera Icon + `; exports[`Storyshots Addons|Cssresources Primary Large Button 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; -} - -
- -
+ Primary Large Button + `; diff --git a/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot index b3861e51005..eb2b3abf049 100644 --- a/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot +++ b/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot @@ -1,13 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Addons|Events Logger 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-2 { padding: 20px; } @@ -17,29 +10,18 @@ exports[`Storyshots Addons|Events Logger 1`] = ` }
-
-

- Logger -

-
-
+ Logger + +
`; exports[`Storyshots Addons|Events.deprecated Logger 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-2 { padding: 20px; } @@ -49,17 +31,13 @@ exports[`Storyshots Addons|Events.deprecated Logger 1`] = ` }
-
-

- Logger -

-
-
+ Logger + +
`; diff --git a/examples/official-storybook/stories/__snapshots__/addon-graphql.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-graphql.stories.storyshot index 34b386688e1..1305de935f2 100644 --- a/examples/official-storybook/stories/__snapshots__/addon-graphql.stories.storyshot +++ b/examples/official-storybook/stories/__snapshots__/addon-graphql.stories.storyshot @@ -1,195 +1,184 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Addons|GraphQL get Pickachu 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; -} -
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Property - - Type - - Required - - Default - - Description -
- disabled - - - bool - - - - - - - false - - -
- label - - - string - - - yes - - - - -
- onClick - - - func - - - - - - - onClick - - -
- style - - - other - - - - - - - {} - - -
-
-
-
-
-
-
-
-`; - -exports[`Storyshots Addons|Info/ForwardRef Displays forwarded ref components correctly 1`] = ` -.emotion-72 { - 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; -} - -.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/GitHub issues #1814 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; -} - -.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; -} - -
-
-
-
- - -
-
+
+
+ -
-
+
+
+ -
+ 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 0d9a3383da8..d34ad5fdb00 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" + > -
- - - -
-
-
-`; - -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 { + +
, + .emotion-0 { background: silver; display: inline-block; padding: 20px; } -.emotion-2 { +, +] +`; + +exports[`Storyshots Components|Grid col outer 1`] = ` +Array [ + .emotion-0 { + background: silver; + display: inline-block; + padding: 20px; +} + +, + .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; -} - -.emotion-8 > * { - margin-top: 10px; -} - -.emotion-8 > *:nth-child(0) { - margin-top: 0; -} - -.emotion-0 { +Array [ + .emotion-0 { background: silver; padding: 20px; } -.emotion-2 { +
, + .emotion-6 > * { + margin-top: 10px; +} + +.emotion-6 > *:nth-child(0) { + margin-top: 0; +} + +.emotion-0 { background: hotpink; padding: 20px; }
-
+ class="emotion-6 emotion-7" + >
-
-
-
-
-
-
-
-`; - -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 { +
+
, + .emotion-0 { background: silver; padding: 20px; } -.emotion-2 { +
, +] +`; + +exports[`Storyshots Components|Grid row multiply 1`] = ` +Array [ + .emotion-0 { + background: silver; + padding: 20px; +} + +
, + .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" + >
-
-
-
-
-
-
-
-`; - -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 { +
+
, + .emotion-0 { background: silver; padding: 20px; } -.emotion-2 { +
, +] +`; + +exports[`Storyshots Components|Grid row outer 1`] = ` +Array [ + .emotion-0 { + background: silver; + padding: 20px; +} + +
, + .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" + >
-
-
-
-
-
-
-
+
+
, + .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 41bf39f5efe..32ca1ebe94b 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 eb640200fd5..4cad06025af 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 9b5f18f0495..32cf91bafbd 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,3152 +50,3141 @@ 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 -
+ + + + +
+ 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; } @@ -3261,2246 +3243,2242 @@ exports[`Storyshots Components|Icon no labels 1`] = ` }
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + +
`; diff --git a/lib/components/src/logo/__snapshots__/logo.stories.storyshot b/lib/components/src/logo/__snapshots__/logo.stories.storyshot index 04509c22da9..6887b2c47d4 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 cf76b6971c5..4e7edad02a6 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 4d57e66bdd7..2ec98bcf0bf 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 ea9c36aa9ca..6d521532b7d 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 8d1910140f0..75a0744a623 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 812e13ff505..f250b1ad0d9 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 0bd7ab93b17..2b55d4b8c7c 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'
+        
+        
+          ;
+        
+        
+
+
+        
+          const
+        
+         
+        
+          result
+        
+         
+        
+          =
+        
+         
+        
+          (
+        
+        
+          )
+        
+         
+        
+          =>
+        
+         
+        
-          
-            import
-          
-           
-          
-            {
-          
-           Good
-          
-            ,
-          
-           Things 
-          
-            }
-          
-           
-          
-            from
-          
-           
-          
-            'life'
-          
-          
-            ;
-          
-          
-
-
-          
-            const
-          
-           
-          
-            result
-          
-           
-          
-            =
-          
-           
-          
-            (
-          
-          
-            )
-          
-           
-          
-            =>
-          
-           
           
-            
-              
-                <
-              
-              Good
-            
             
-              >
-            
-          
-          
-            
-              
-                <
-              
-              Things
-            
-             
-            
-              />
-            
-          
-          
-            
-              
-                </
-              
-              Good
-            
-            
-              >
+              <
             
+            Good
           
           
-            ;
+            >
           
-          
-
-
-          
-            export
-          
-           
-          
-            {
-          
-           result 
-          
-            as
-          
-           
-          
-            default
-          
-           
-          
-            }
-          
-          
-            ;
-          
-          
-
-        
-
-
-
    -
  • - -
    • -
+ + + < + + Things + + + + /> + + + + + + </ + + Good + + + > + + + + ; + + + + + + export + + + + { + + result + + as + + + + default + + + + } + + + ; + + + + +
+
    +
  • + +
    • +
`; 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'
+        
+        
+          ;
+        
+        
+
+
+        
+          const
+        
+         
+        
+          result
+        
+         
+        
+          =
+        
+         
+        
+          (
+        
+        
+          )
+        
+         
+        
+          =>
+        
+         
+        
           
-            import
-          
-           
-          
-            {
-          
-           Good
-          
-            ,
-          
-           Things 
-          
-            }
-          
-           
-          
-            from
-          
-           
-          
-            'life'
+            
+              <
+            
+            Good
           
           
-            ;
+            >
           
-          
-
-
-          
-            const
-          
-           
-          
-            result
-          
-           
-          
-            =
-          
-           
-          
-            (
-          
-          
-            )
-          
-           
-          
-            =>
-          
-           
+        
+        
           
             
-              
-                <
-              
-              Good
+              <
+            
+            Things
+          
+           
+          
+            all
+          
+          
+            
+              =
             
             
-              >
+              {
+            
+            
+              true
+            
+            
+              }
             
           
+           
+          
+            />
+          
+        
+        
           
-            
-              
-                <
-              
-              Things
-            
-             
-            
-              all
-            
-            
-              
-                =
-              
-              
-                {
-              
-              
-                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
+
+        
+        
+          2
+
+        
+        
+          3
+
+        
+        
+          4
+
+        
+        
+          5
+
+        
+      
+      
-        
-          
-            1
+        
+          import
+        
+         
+        
+          {
+        
+         Good
+        
+          ,
+        
+         Things 
+        
+          }
+        
+         
+        
+          from
+        
+         
+        
+          'life'
+        
+        
+          ;
+        
+        
 
-          
-          
-            2
 
-          
-          
-            3
-
-          
-          
-            4
-
-          
-          
-            5
-
-          
-        
-        
+          const
+        
+         
+        
+          result
+        
+         
+        
+          =
+        
+         
+        
+          (
+        
+        
+          )
+        
+         
+        
+          =>
+        
+         
+        
           
-            import
-          
-           
-          
-            {
-          
-           Good
-          
-            ,
-          
-           Things 
-          
-            }
-          
-           
-          
-            from
-          
-           
-          
-            'life'
+            
+              <
+            
+            Good
           
           
-            ;
+            >
           
-          
-
-
-          
-            const
-          
-           
-          
-            result
-          
-           
-          
-            =
-          
-           
-          
-            (
-          
-          
-            )
-          
-           
-          
-            =>
-          
-           
+        
+        
           
-            
-              
-                <
-              
-              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
-          
-           React 
-          
-            from
-          
-           
-          
-            'react'
-          
-          
-            ;
-          
-          
-
-          
-            import
-          
-           
-          
-            {
-          
-           storiesOf 
-          
-            }
-          
-           
-          
-            from
-          
-           
-          
-            '@storybook/react'
-          
-          
-            ;
-          
-          
-
-          
-            import
-          
-           styled 
-          
-            from
-          
-           
-          
-            '@emotion/styled'
-          
-          
-            ;
-          
-          
-
-
-          
-            import
-          
-           Heading 
-          
-            from
-          
-           
-          
-            './heading'
-          
-          
-            ;
-          
-          
-
-
-          
-            const
-          
-           Holder 
-          
-            =
-          
-           styled
-          
-            .
-          
-          
+            
+              <
+            
             div
           
           
-            (
-          
-          
-            {
+            >
           
+        
+        
           
-  margin
+            
+        
+        
+          
+            
+              <
+            
+            Holder
+          
           
-            :
+            >
+          
+        
+        
+          
+              
+        
+        
+          
+            
+              <
+            
+            Heading
+          
+          
+            >
+          
+        
+        
+          DEFAULT WITH ALL CAPS
+        
+        
+          
+            
+              </
+            
+            Heading
+          
+          
+            >
+          
+        
+        
+          
+            
+        
+        
+          
+            
+              </
+            
+            Holder
+          
+          
+            >
+          
+        
+        
+          
+            
+        
+        
+          
+            
+              <
+            
+            Holder
+          
+          
+            >
+          
+        
+        
+          
+              
+        
+        
+          
+            
+              <
+            
+            Heading
           
            
           
-            10
+            sub
+          
+          
+            
+              =
+            
+            
+              "
+            
+            With a great sub
+            
+              "
+            
           
           
-            ,
+            >
           
+        
+        
+          THIS LONG DEFAULT WITH ALL CAPS & SUB
+        
+        
+          
+            
+              </
+            
+            Heading
+          
+          
+            >
+          
+        
+        
           
-  border
+            
+        
+        
+          
+            
+              </
+            
+            Holder
+          
           
-            :
+            >
+          
+        
+        
+          
+            
+        
+        
+          
+            
+              <
+            
+            Holder
+          
+          
+            >
+          
+        
+        
+          
+              
+        
+        
+          
+            
+              <
+            
+            Heading
           
            
           
-            '1px dashed deepskyblue'
+            type
+          
+          
+            
+              =
+            
+            
+              "
+            
+            page
+            
+              "
+            
           
           
-            ,
+            >
           
+        
+        
+          page type
+        
+        
+          
+            
+              </
+            
+            Heading
+          
+          
+            >
+          
+        
+        
           
-  
+            
+        
+        
           
-            // overflow: 'hidden',
+            
+              </
+            
+            Holder
           
+          
+            >
+          
+        
+        
           
-
+            
+        
+        
           
-            }
+            
+              <
+            
+            Holder
           
           
-            )
-          
-          
-            ;
+            >
           
+        
+        
           
-
-
+              
+        
+        
           
-            storiesOf
-          
-          
-            (
-          
-          
-            'Components|Heading'
-          
-          
-            ,
-          
-           module
-          
-            )
-          
-          
-            .
-          
-          
-            add
-          
-          
-            (
-          
-          
-            'types'
-          
-          
-            ,
+            
+              <
+            
+            Heading
           
            
           
-            (
+            type
           
           
-            )
+            
+              =
+            
+            
+              "
+            
+            page
+            
+              "
+            
           
            
           
-            =>
+            sub
+          
+          
+            
+              =
+            
+            
+              "
+            
+            With a sub
+            
+              "
+            
           
-           
           
-            (
+            >
           
+        
+        
           
-  
+                page type
+              
+        
+        
           
-            
-              
-                <
-              
-              div
-            
             
-              >
+              </
             
+            Heading
           
           
-            
-    
-          
-          
-            
-              
-                <
-              
-              Holder
-            
-            
-              >
-            
-          
-          
-            
-      
-          
-          
-            
-              
-                <
-              
-              Heading
-            
-            
-              >
-            
-          
-          
-            DEFAULT WITH ALL CAPS
-          
-          
-            
-              
-                </
-              
-              Heading
-            
-            
-              >
-            
-          
-          
-            
-    
-          
-          
-            
-              
-                </
-              
-              Holder
-            
-            
-              >
-            
-          
-          
-            
-    
-          
-          
-            
-              
-                <
-              
-              Holder
-            
-            
-              >
-            
-          
-          
-            
-      
-          
-          
-            
-              
-                <
-              
-              Heading
-            
-             
-            
-              sub
-            
-            
-              
-                =
-              
-              
-                "
-              
-              With a great sub
-              
-                "
-              
-            
-            
-              >
-            
-          
-          
-            THIS LONG DEFAULT WITH ALL CAPS & SUB
-          
-          
-            
-              
-                </
-              
-              Heading
-            
-            
-              >
-            
-          
-          
-            
-    
-          
-          
-            
-              
-                </
-              
-              Holder
-            
-            
-              >
-            
-          
-          
-            
-    
-          
-          
-            
-              
-                <
-              
-              Holder
-            
-            
-              >
-            
-          
-          
-            
-      
-          
-          
-            
-              
-                <
-              
-              Heading
-            
-             
-            
-              type
-            
-            
-              
-                =
-              
-              
-                "
-              
-              page
-              
-                "
-              
-            
-            
-              >
-            
-          
-          
-            page type
-          
-          
-            
-              
-                </
-              
-              Heading
-            
-            
-              >
-            
-          
-          
-            
-    
-          
-          
-            
-              
-                </
-              
-              Holder
-            
-            
-              >
-            
-          
-          
-            
-    
-          
-          
-            
-              
-                <
-              
-              Holder
-            
-            
-              >
-            
-          
-          
-            
-      
-          
-          
-            
-              
-                <
-              
-              Heading
-            
-             
-            
-              type
-            
-            
-              
-                =
-              
-              
-                "
-              
-              page
-              
-                "
-              
-            
-             
-            
-              sub
-            
-            
-              
-                =
-              
-              
-                "
-              
-              With a sub
-              
-                "
-              
-            
-            
-              >
-            
-          
-          
-            
-        page type
-      
-          
-          
-            
-              
-                </
-              
-              Heading
-            
-            
-              >
-            
-          
-          
-            
-    
-          
-          
-            
-              
-                </
-              
-              Holder
-            
-            
-              >
-            
-          
-          
-            
-  
-          
-          
-            
-              
-                </
-              
-              div
-            
-            
-              >
-            
+            >
           
+        
+        
           
+            
+        
+        
+          
+            
+              </
+            
+            Holder
+          
+          
+            >
+          
+        
+        
+          
+          
+        
+        
+          
+            
+              </
+            
+            div
+          
+          
+            >
+          
+        
+        
 
-          
-            )
-          
-          
-            )
-          
-          
-            ;
-          
-          
+        
+          )
+        
+        
+          )
+        
+        
+          ;
+        
+        
 
-        
-
-
+ +
`; diff --git a/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.js b/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.js index 01c8bfb79a1..cc04311a2d8 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 0af1e9ce2e9..158eb93b648 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 cdbf59113d6..311aaf77674 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 15163bf3c33..e0484dba068 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 +

+ 
+            {
+  "hidden": true
+}
+
+
+
+
+
`; diff --git a/lib/ui/src/components/nav/__snapshots__/nav.stories.storyshot b/lib/ui/src/components/nav/__snapshots__/nav.stories.storyshot index 99d8c434ad6..a7c9c930b41 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 10d0825db27..86838e9b1df 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 -
+ 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 5ef28a26288..62dca652e2a 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 | 8882 ++--------------- .../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, 2721 insertions(+), 16905 deletions(-) diff --git a/addons/info/src/__snapshots__/index.test.js.snap b/addons/info/src/__snapshots__/index.test.js.snap index f25c10f5c4a..3a5b9950bcc 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 00b2b446903..6b780d80bf0 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 1e5a124ab61..9a9a0acf432 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 eb2b3abf049..2d1c3b89623 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 4135c0fa3d5..e5f8156ece4 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
                     
                   
                   
                 

               

@@ -6957,254 +4047,6 @@ 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;
-}
-
 

   

           

             

               
                 
                   
             

               
                 

                   
                     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
                     
                   
                   
                     -
                   
                   
                     
                       {}
                     
                   
                   
                 

               

@@ -13383,254 +7993,6 @@ 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;
-}
-
 

   

           

             

               
                 
                   
             

               
                 

                   
                     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 5ad349309e8..1b8f3818d40 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 856f526a52f..46c2fc8a91b 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 e082d1369a5..7dd56096035 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 b12e7214965..256d81f7c02 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 763c9f19c40..33e04c4c7f7 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 cad94608d23..ff1e1c598eb 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 2fc0807a245..385b8f1447e 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 1
       

-    

-    

-      

       
+      

         

-          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 a7592902cdc..f8fbd7092ff 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 1fb72f7dac0..00000000000
--- 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 18cbf8d8af9..afc72013a0b 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 70b0869a0b2..4cc9bceef29 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
+                
+                  -
+                
+