diff --git a/addons/info/src/__snapshots__/index.test.js.snap b/addons/info/src/__snapshots__/index.test.js.snap index b0ad7108e2be..20cadfe57bc2 100644 --- a/addons/info/src/__snapshots__/index.test.js.snap +++ b/addons/info/src/__snapshots__/index.test.js.snap @@ -2729,7 +2729,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)" `; -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; @@ -4026,3 +4026,1301 @@ exports[`addon Info should render component description 1`] = ` `; + +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 +

+ +

+

+ with markdown support +

+ +

+

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

+
+
+

+ 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/components/Story.js b/addons/info/src/components/Story.js index a1e3e7922d69..abb4a585ccfe 100644 --- a/addons/info/src/components/Story.js +++ b/addons/info/src/components/Story.js @@ -250,12 +250,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)) { const componentDescription = STORYBOOK_REACT_CLASSES[key].docgenInfo.description; retDiv =
{this.marksy(componentDescription).tree}
; } diff --git a/addons/info/src/index.test.js b/addons/info/src/index.test.js index 8afc55d1db59..d85c99f48fc9 100644 --- a/addons/info/src/index.test.js +++ b/addons/info/src/index.test.js @@ -78,7 +78,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 }); @@ -92,4 +92,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 }); + }); });