diff --git a/addons/info/src/__snapshots__/index.test.js.snap b/addons/info/src/__snapshots__/index.test.js.snap index ea00c1e013da..da710f1538f3 100644 --- a/addons/info/src/__snapshots__/index.test.js.snap +++ b/addons/info/src/__snapshots__/index.test.js.snap @@ -2728,3 +2728,1228 @@ 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
+                              >
+                            
+                          

+
+ +
+ + + + + + + + + + + +
+
+ + + + +`; diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js index cf3bed071a79..b6f9ef71568d 100644 --- a/addons/info/src/components/Story.js +++ b/addons/info/src/components/Story.js @@ -250,7 +250,7 @@ class Story extends Component { if (Object.keys(STORYBOOK_REACT_CLASSES).length) { Object.keys(STORYBOOK_REACT_CLASSES).forEach(key => { - if (STORYBOOK_REACT_CLASSES[key].name === context.story) { + if (STORYBOOK_REACT_CLASSES[key].name === context.kind) { retDiv =
{STORYBOOK_REACT_CLASSES[key].docgenInfo.description}
; } }); diff --git a/addons/info/src/index.test.js b/addons/info/src/index.test.js index 76a0d5070ff7..44b60bb69a20 100644 --- a/addons/info/src/index.test.js +++ b/addons/info/src/index.test.js @@ -23,6 +23,16 @@ const TestComponent = ({ func, obj, array, number, string, bool, empty }) => ( ); /* eslint-enable */ +const reactClassPath = 'some/path/TestComponent.jsx'; +const storybookReactClassMock = { + name: 'TestComponent', + path: reactClassPath, + docgenInfo: { + description: 'Awesome test component description', + name: 'TestComponent', + }, +}; + const testOptions = { propTables: false }; const testMarkdown = `# Test story @@ -63,4 +73,19 @@ describe('addon Info', () => { const Info = withInfo()(storyFn); mount(); }); + + it('should render component description', () => { + const previousReactClassesValue = global.STORYBOOK_REACT_CLASSES[reactClassPath]; + Object.assign(global.STORYBOOK_REACT_CLASSES, { [reactClassPath]: storybookReactClassMock }); + + const Info = () => + withInfo({ inline: true, propTables: false })(storyFn, { + kind: 'TestComponent', + story: 'Basic test', + }); + + expect(mount()).toMatchSnapshot(); + + Object.assign(global.STORYBOOK_REACT_CLASSES, { [reactClassPath]: previousReactClassesValue }); + }); });