From 396840a7a4331c3f3ad5abc1b8cedb0a08498c39 Mon Sep 17 00:00:00 2001 From: jaebradley Date: Wed, 23 May 2018 10:57:06 -0400 Subject: [PATCH 1/2] docs(table): update add-ons for Table stories --- .../__snapshots__/Storyshots.test.js.snap | 9811 +++++++++++++++-- src/Table/Table.stories.jsx | 7 + 2 files changed, 8861 insertions(+), 957 deletions(-) diff --git a/.storybook/__snapshots__/Storyshots.test.js.snap b/.storybook/__snapshots__/Storyshots.test.js.snap index 500869312d..d214bb1e77 100644 --- a/.storybook/__snapshots__/Storyshots.test.js.snap +++ b/.storybook/__snapshots__/Storyshots.test.js.snap @@ -27932,972 +27932,8869 @@ exports[`Storyshots StatusAlert success alert 1`] = ` `; exports[`Storyshots Table default heading 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Famous Internet Cats -
- Name - - Famous For - +
- - Coat Color - -
- Lil Bub - - weird tongue - - brown tabby -
- Grumpy Cat - - serving moods - - siamese -
- Smoothie - - modeling - - orange tabby -
- Maru - - being a lovable oaf - - brown tabby -
- Keyboard Cat - - piano virtuoso - - orange tabby -
- Long Cat - - being loooooooooooooooooooooooooooooooooooooooooooooooooooooong - - russian white -
-`; - -exports[`Storyshots Table fixed 1`] = ` - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
- Famous Internet Cats -
- Name - + Famous Internet Cats + +
+ Name + + Famous For + + + Coat Color + +
+ Lil Bub + + weird tongue + + brown tabby +
+ Grumpy Cat + + serving moods + + siamese +
+ Smoothie + + modeling + + orange tabby +
+ Maru + + being a lovable oaf + + brown tabby +
+ Keyboard Cat + + piano virtuoso + + orange tabby +
+ Long Cat + + being loooooooooooooooooooooooooooooooooooooooooooooooooooooong + + russian white +
+ + + + +
+

+ Prop Types +

+
+

+ " + Table + " Component +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ property + + propType + + required + + default + + description +
+ caption + + + + - + + + { + + null + + } + + +
+ className + + + + - + + + { + + [ + ] + + } + + +
+ data + + + + yes + + - + +
+ columns + + + + yes + + - + +
+ headingClassName + + + + - + + + { + + [ + ] + + } + + +
+ tableSortable + + + + - + + + { + + false + + } + + +
+ hasFixedColumnWidths + + + + - + + + { + + false + + } + + +
+ defaultSortedColumn + + + + yes + + - + +
+ defaultSortDirection + + + + yes + + - + +
+ sortButtonsScreenReaderText + + + + yes + + + { + + { + + asc + + : + + " + sort ascending + " + + , + + desc + + : + + " + sort descending + " + + , + + defaultText + + : + + " + click to sort + " + + } + + } + + +
+
+
+ + + + + + +`; + +exports[`Storyshots Table fixed 1`] = ` +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Famous Internet Cats +
+ Name + + Famous For + + + Coat Color + +
+ Lil Bub + + weird tongue + + brown tabby +
+ Grumpy Cat + + serving moods + + siamese +
+ Smoothie + + modeling + + orange tabby +
+ Maru + + being a lovable oaf + + brown tabby +
+ Keyboard Cat + + piano virtuoso + + orange tabby +
+ Long Cat + + being loooooooooooooooooooooooooooooooooooooooooooooooooooooong + + russian white +
+
+ +
+ +
+
+
+

+ Table +

+

+ fixed +

+
+ +
+

+ Story Source +

+ 
+                

+                  

+                    
+                      <
+                      Table
+                    
+                    
+                      
+                        
+                          

+                            
+                        
+                        
+                          data
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                [
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      name
+                                    
+                                    : 
+                                    
+                                      "
+                                      Lil Bub
+                                      "
+                                    
+                                    , 
+                                    
+                                      color
+                                    
+                                    : 
+                                    
+                                      "
+                                      brown tabby
+                                      "
+                                    
+                                    , 
+                                    
+                                      famous_for
+                                    
+                                    : 
+                                    
+                                      "
+                                      weird tongue
+                                      "
+                                    
+                                    }
+                                  
+                                  }
+                                
+                                , 
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      name
+                                    
+                                    : 
+                                    
+                                      "
+                                      Grumpy Cat
+                                      "
+                                    
+                                    , 
+                                    
+                                      color
+                                    
+                                    : 
+                                    
+                                      "
+                                      siamese
+                                      "
+                                    
+                                    , 
+                                    
+                                      famous_for
+                                    
+                                    : 
+                                    
+                                      "
+                                      serving moods
+                                      "
+                                    
+                                    }
+                                  
+                                  }
+                                
+                                , 
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      name
+                                    
+                                    : 
+                                    
+                                      "
+                                      Smoothie
+                                      "
+                                    
+                                    , 
+                                    
+                                      color
+                                    
+                                    : 
+                                    
+                                      "
+                                      orange tabby
+                                      "
+                                    
+                                    , 
+                                    
+                                      famous_for
+                                    
+                                    : 
+                                    
+                                      "
+                                      modeling
+                                      "
+                                    
+                                    }
+                                  
+                                  }
+                                
+                                , 
+                                …
+                                ]
+                              
+                              }
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          columns
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                [
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      label
+                                    
+                                    : 
+                                    
+                                      "
+                                      Name
+                                      "
+                                    
+                                    , 
+                                    
+                                      key
+                                    
+                                    : 
+                                    
+                                      "
+                                      name
+                                      "
+                                    
+                                    , 
+                                    
+                                      columnSortable
+                                    
+                                    : 
+                                    
+                                      {
+                                      
+                                        true
+                                      
+                                      }
+                                    
+                                    , 
+                                    …
+                                    }
+                                  
+                                  }
+                                
+                                , 
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      label
+                                    
+                                    : 
+                                    
+                                      "
+                                      Famous For
+                                      "
+                                    
+                                    , 
+                                    
+                                      key
+                                    
+                                    : 
+                                    
+                                      "
+                                      famous_for
+                                      "
+                                    
+                                    , 
+                                    
+                                      columnSortable
+                                    
+                                    : 
+                                    
+                                      {
+                                      
+                                        false
+                                      
+                                      }
+                                    
+                                    , 
+                                    …
+                                    }
+                                  
+                                  }
+                                
+                                , 
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      label
+                                    
+                                    : 
+                                    
+                                      "
+                                      Coat Color
+                                      "
+                                    
+                                    , 
+                                    
+                                      key
+                                    
+                                    : 
+                                    
+                                      "
+                                      color
+                                      "
+                                    
+                                    , 
+                                    
+                                      columnSortable
+                                    
+                                    : 
+                                    
+                                      {
+                                      
+                                        false
+                                      
+                                      }
+                                    
+                                    , 
+                                    …
+                                    }
+                                  
+                                  }
+                                
+                                ]
+                              
+                              }
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          caption
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              Famous Internet Cats
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          hasFixedColumnWidths
+                        
+                        

+                      
+                    
+                    
+                      />
+                    
+                  

+                

+                
+
+
+
+

+ Prop Types +

+
+

+ " + Table + " Component +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ property + + propType + + required + + default + + description +
+ caption + + + + - + + + { + + null + + } + + +
+ className + + + + - + + + { + + [ + ] + + } + + +
+ data + + + + yes + + - + +
+ columns + + + + yes + + - + +
+ headingClassName + + + + - + + + { + + [ + ] + + } + + +
+ tableSortable + + + + - + + + { + + false + + } + + +
+ hasFixedColumnWidths + + + + - + + + { + + false + + } + + +
+ defaultSortedColumn + + + + yes + + - + +
+ defaultSortDirection + + + + yes + + - + +
+ sortButtonsScreenReaderText + + + + yes + + + { + + { + + asc + + : + + " + sort ascending + " + + , + + desc + + : + + " + sort descending + " + + , + + defaultText + + : + + " + click to sort + " + + } + + } + + +
+
+
+
+
+
+
+
+
+`; + +exports[`Storyshots Table responsive 1`] = ` +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Famous Internet Cats +
+ Name + + Famous For + + + Coat Color + +
+ Lil Bub + + weird tongue + + brown tabby +
+ Grumpy Cat + + serving moods + + siamese +
+ Smoothie + + modeling + + orange tabby +
+ Maru + + being a lovable oaf + + brown tabby +
+ Keyboard Cat + + piano virtuoso + + orange tabby +
+ Long Cat + + being loooooooooooooooooooooooooooooooooooooooooooooooooooooong + + russian white +
+
+ +
+ +
+
+
+

+ Table +

+

+ responsive +

+
+ +
+

+ Story Source +

+ 
+                

+                  

+                    
+                      <
+                      Table
+                    
+                    
+                      
+                        
+                          

+                            
+                        
+                        
+                          data
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                [
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      name
+                                    
+                                    : 
+                                    
+                                      "
+                                      Lil Bub
+                                      "
+                                    
+                                    , 
+                                    
+                                      color
+                                    
+                                    : 
+                                    
+                                      "
+                                      brown tabby
+                                      "
+                                    
+                                    , 
+                                    
+                                      famous_for
+                                    
+                                    : 
+                                    
+                                      "
+                                      weird tongue
+                                      "
+                                    
+                                    }
+                                  
+                                  }
+                                
+                                , 
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      name
+                                    
+                                    : 
+                                    
+                                      "
+                                      Grumpy Cat
+                                      "
+                                    
+                                    , 
+                                    
+                                      color
+                                    
+                                    : 
+                                    
+                                      "
+                                      siamese
+                                      "
+                                    
+                                    , 
+                                    
+                                      famous_for
+                                    
+                                    : 
+                                    
+                                      "
+                                      serving moods
+                                      "
+                                    
+                                    }
+                                  
+                                  }
+                                
+                                , 
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      name
+                                    
+                                    : 
+                                    
+                                      "
+                                      Smoothie
+                                      "
+                                    
+                                    , 
+                                    
+                                      color
+                                    
+                                    : 
+                                    
+                                      "
+                                      orange tabby
+                                      "
+                                    
+                                    , 
+                                    
+                                      famous_for
+                                    
+                                    : 
+                                    
+                                      "
+                                      modeling
+                                      "
+                                    
+                                    }
+                                  
+                                  }
+                                
+                                , 
+                                …
+                                ]
+                              
+                              }
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          columns
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                [
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      label
+                                    
+                                    : 
+                                    
+                                      "
+                                      Name
+                                      "
+                                    
+                                    , 
+                                    
+                                      key
+                                    
+                                    : 
+                                    
+                                      "
+                                      name
+                                      "
+                                    
+                                    , 
+                                    
+                                      columnSortable
+                                    
+                                    : 
+                                    
+                                      {
+                                      
+                                        true
+                                      
+                                      }
+                                    
+                                    , 
+                                    …
+                                    }
+                                  
+                                  }
+                                
+                                , 
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      label
+                                    
+                                    : 
+                                    
+                                      "
+                                      Famous For
+                                      "
+                                    
+                                    , 
+                                    
+                                      key
+                                    
+                                    : 
+                                    
+                                      "
+                                      famous_for
+                                      "
+                                    
+                                    , 
+                                    
+                                      columnSortable
+                                    
+                                    : 
+                                    
+                                      {
+                                      
+                                        false
+                                      
+                                      }
+                                    
+                                    , 
+                                    …
+                                    }
+                                  
+                                  }
+                                
+                                , 
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      label
+                                    
+                                    : 
+                                    
+                                      "
+                                      Coat Color
+                                      "
+                                    
+                                    , 
+                                    
+                                      key
+                                    
+                                    : 
+                                    
+                                      "
+                                      color
+                                      "
+                                    
+                                    , 
+                                    
+                                      columnSortable
+                                    
+                                    : 
+                                    
+                                      {
+                                      
+                                        false
+                                      
+                                      }
+                                    
+                                    , 
+                                    …
+                                    }
+                                  
+                                  }
+                                
+                                ]
+                              
+                              }
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          caption
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              Famous Internet Cats
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          className
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                [
+                                
+                                  "
+                                  table-responsive
+                                  "
+                                
+                                ]
+                              
+                              }
+                            
+                          
+                        
+                        

+                      
+                    
+                    
+                      />
+                    
+                  

+                

+                
+
+
+
+

+ Prop Types +

+
+

+ " + Table + " Component +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ property + + propType + + required + + default + + description +
+ caption + + + + - + + + { + + null + + } + + +
+ className + + + + - + + + { + + [ + ] + + } + + +
+ data + + + + yes + + - + +
+ columns + + + + yes + + - + +
+ headingClassName + + + + - + + + { + + [ + ] + + } + + +
+ tableSortable + + + + - + + + { + + false + + } + + +
+ hasFixedColumnWidths + + + + - + + + { + + false + + } + + +
+ defaultSortedColumn + + + + yes + + - + +
+ defaultSortDirection + + + + yes + + - + +
+ sortButtonsScreenReaderText + + + + yes + + + { + + { + + asc + + : + + " + sort ascending + " + + , + + desc + + : + + " + sort descending + " + + , + + defaultText + + : + + " + click to sort + " + + } + + } + + +
+
+
+
+
+
+
+
+
+`; + +exports[`Storyshots Table sortable 1`] = ` +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Famous Internet Cats +
+ + + Famous For + + + Coat Color + +
+ Smoothie + + modeling + + orange tabby +
+ Maru + + being a lovable oaf + + brown tabby +
+ Long Cat + + being loooooooooooooooooooooooooooooooooooooooooooooooooooooong + + russian white +
+ Lil Bub + + weird tongue + + brown tabby +
+ Keyboard Cat + + piano virtuoso + + orange tabby +
+ Grumpy Cat + + serving moods + + siamese +
+
+ +
+ +
+
+
+

+ Table +

+

+ sortable +

+
+ +
+

+ Story Source +

+ 
+                

+                  

+                    
+                      <
+                      Table
+                    
+                    
+                      
+                        
+                          

+                            
+                        
+                        
+                          data
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                [
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      name
+                                    
+                                    : 
+                                    
+                                      "
+                                      Smoothie
+                                      "
+                                    
+                                    , 
+                                    
+                                      color
+                                    
+                                    : 
+                                    
+                                      "
+                                      orange tabby
+                                      "
+                                    
+                                    , 
+                                    
+                                      famous_for
+                                    
+                                    : 
+                                    
+                                      "
+                                      modeling
+                                      "
+                                    
+                                    }
+                                  
+                                  }
+                                
+                                , 
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      name
+                                    
+                                    : 
+                                    
+                                      "
+                                      Maru
+                                      "
+                                    
+                                    , 
+                                    
+                                      color
+                                    
+                                    : 
+                                    
+                                      "
+                                      brown tabby
+                                      "
+                                    
+                                    , 
+                                    
+                                      famous_for
+                                    
+                                    : 
+                                    
+                                      "
+                                      being a lovable oaf
+                                      "
+                                    
+                                    }
+                                  
+                                  }
+                                
+                                , 
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      name
+                                    
+                                    : 
+                                    
+                                      "
+                                      Long Cat
+                                      "
+                                    
+                                    , 
+                                    
+                                      color
+                                    
+                                    : 
+                                    
+                                      "
+                                      russian white
+                                      "
+                                    
+                                    , 
+                                    
+                                      famous_for
+                                    
+                                    : 
+                                    
+                                      "
+                                      being looooooooooooooooooooooooooooooooooooooooooo…
+                                      "
+                                    
+                                    }
+                                  
+                                  }
+                                
+                                , 
+                                …
+                                ]
+                              
+                              }
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          columns
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                [
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      label
+                                    
+                                    : 
+                                    
+                                      "
+                                      Name
+                                      "
+                                    
+                                    , 
+                                    
+                                      key
+                                    
+                                    : 
+                                    
+                                      "
+                                      name
+                                      "
+                                    
+                                    , 
+                                    
+                                      columnSortable
+                                    
+                                    : 
+                                    
+                                      {
+                                      
+                                        true
+                                      
+                                      }
+                                    
+                                    , 
+                                    …
+                                    }
+                                  
+                                  }
+                                
+                                , 
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      label
+                                    
+                                    : 
+                                    
+                                      "
+                                      Famous For
+                                      "
+                                    
+                                    , 
+                                    
+                                      key
+                                    
+                                    : 
+                                    
+                                      "
+                                      famous_for
+                                      "
+                                    
+                                    , 
+                                    
+                                      columnSortable
+                                    
+                                    : 
+                                    
+                                      {
+                                      
+                                        false
+                                      
+                                      }
+                                    
+                                    , 
+                                    …
+                                    }
+                                  
+                                  }
+                                
+                                , 
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      label
+                                    
+                                    : 
+                                    
+                                      "
+                                      Coat Color
+                                      "
+                                    
+                                    , 
+                                    
+                                      key
+                                    
+                                    : 
+                                    
+                                      "
+                                      color
+                                      "
+                                    
+                                    , 
+                                    
+                                      columnSortable
+                                    
+                                    : 
+                                    
+                                      {
+                                      
+                                        false
+                                      
+                                      }
+                                    
+                                    , 
+                                    …
+                                    }
+                                  
+                                  }
+                                
+                                ]
+                              
+                              }
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          caption
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              Famous Internet Cats
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          tableSortable
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          defaultSortedColumn
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              name
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          defaultSortDirection
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              desc
+                              "
+                            
+                          
+                        
+                        

+                      
+                    
+                    
+                      />
+                    
+                  

+                

+                
+
+
+
+

+ Prop Types +

+
+

+ " + Table + " Component +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ property + + propType + + required + + default + + description +
+ caption + + + + - + + + { + + null + + } + + +
+ className + + + + - + + + { + + [ + ] + + } + + +
+ data + + + + yes + + - + +
+ columns + + + + yes + + - + +
+ headingClassName + + + + - + + + { + + [ + ] + + } + + +
+ tableSortable + + + + - + + + { + + false + + } + + +
+ hasFixedColumnWidths + + + + - + + + { + + false + + } + + +
+ defaultSortedColumn + + + + yes + + - + +
+ defaultSortDirection + + + + yes + + - + +
+ sortButtonsScreenReaderText + + + + yes + + + { + + { + + asc + + : + + " + sort ascending + " + + , + + desc + + : + + " + sort descending + " + + , + + defaultText + + : + + " + click to sort + " + + } + + } + + +
+
+
+
+
+
+
+
+
+`; + +exports[`Storyshots Table table-striped 1`] = ` +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Famous Internet Cats +
+ Name + + Famous For + + + Coat Color + +
+ Lil Bub + + weird tongue + + brown tabby +
+ Grumpy Cat + + serving moods + + siamese +
+ Smoothie + + modeling + + orange tabby +
+ Maru + + being a lovable oaf + + brown tabby +
+ Keyboard Cat + + piano virtuoso + + orange tabby +
+ Long Cat + + being loooooooooooooooooooooooooooooooooooooooooooooooooooooong + + russian white +
+
+ +
+ +
+
+
+

+ Table +

+

+ table-striped +

+
+ +
+

+ Story Source +

+ 
+                

+                  

+                    
+                      <
+                      Table
+                    
+                    
+                      
+                        
+                          

+                            
+                        
+                        
+                          data
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                [
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      name
+                                    
+                                    : 
+                                    
+                                      "
+                                      Lil Bub
+                                      "
+                                    
+                                    , 
+                                    
+                                      color
+                                    
+                                    : 
+                                    
+                                      "
+                                      brown tabby
+                                      "
+                                    
+                                    , 
+                                    
+                                      famous_for
+                                    
+                                    : 
+                                    
+                                      "
+                                      weird tongue
+                                      "
+                                    
+                                    }
+                                  
+                                  }
+                                
+                                , 
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      name
+                                    
+                                    : 
+                                    
+                                      "
+                                      Grumpy Cat
+                                      "
+                                    
+                                    , 
+                                    
+                                      color
+                                    
+                                    : 
+                                    
+                                      "
+                                      siamese
+                                      "
+                                    
+                                    , 
+                                    
+                                      famous_for
+                                    
+                                    : 
+                                    
+                                      "
+                                      serving moods
+                                      "
+                                    
+                                    }
+                                  
+                                  }
+                                
+                                , 
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      name
+                                    
+                                    : 
+                                    
+                                      "
+                                      Smoothie
+                                      "
+                                    
+                                    , 
+                                    
+                                      color
+                                    
+                                    : 
+                                    
+                                      "
+                                      orange tabby
+                                      "
+                                    
+                                    , 
+                                    
+                                      famous_for
+                                    
+                                    : 
+                                    
+                                      "
+                                      modeling
+                                      "
+                                    
+                                    }
+                                  
+                                  }
+                                
+                                , 
+                                …
+                                ]
+                              
+                              }
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          columns
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                [
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      label
+                                    
+                                    : 
+                                    
+                                      "
+                                      Name
+                                      "
+                                    
+                                    , 
+                                    
+                                      key
+                                    
+                                    : 
+                                    
+                                      "
+                                      name
+                                      "
+                                    
+                                    , 
+                                    
+                                      columnSortable
+                                    
+                                    : 
+                                    
+                                      {
+                                      
+                                        true
+                                      
+                                      }
+                                    
+                                    , 
+                                    …
+                                    }
+                                  
+                                  }
+                                
+                                , 
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      label
+                                    
+                                    : 
+                                    
+                                      "
+                                      Famous For
+                                      "
+                                    
+                                    , 
+                                    
+                                      key
+                                    
+                                    : 
+                                    
+                                      "
+                                      famous_for
+                                      "
+                                    
+                                    , 
+                                    
+                                      columnSortable
+                                    
+                                    : 
+                                    
+                                      {
+                                      
+                                        false
+                                      
+                                      }
+                                    
+                                    , 
+                                    …
+                                    }
+                                  
+                                  }
+                                
+                                , 
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      label
+                                    
+                                    : 
+                                    
+                                      "
+                                      Coat Color
+                                      "
+                                    
+                                    , 
+                                    
+                                      key
+                                    
+                                    : 
+                                    
+                                      "
+                                      color
+                                      "
+                                    
+                                    , 
+                                    
+                                      columnSortable
+                                    
+                                    : 
+                                    
+                                      {
+                                      
+                                        false
+                                      
+                                      }
+                                    
+                                    , 
+                                    …
+                                    }
+                                  
+                                  }
+                                
+                                ]
+                              
+                              }
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          caption
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              Famous Internet Cats
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          className
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                [
+                                
+                                  "
+                                  table-striped
+                                  "
+                                
+                                ]
+                              
+                              }
+                            
+                          
+                        
+                        

+                      
+                    
+                    
+                      />
+                    
+                  

+                

+                
+
+
+
+

+ Prop Types +

+
+

+ " + Table + " Component +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ property + + propType + + required + + default + + description +
+ caption + + + + - + + + { + + null + + } + + +
+ className + + + + - + + + { + + [ + ] + + } + + +
+ data + + + + yes + + - + +
+ columns + + + + yes + + - + +
+ headingClassName + + + + - + + + { + + [ + ] + + } + + +
+ tableSortable + + + + - + + + { + + false + + } + + +
+ hasFixedColumnWidths + + + + - + + + { + + false + + } + + +
+ defaultSortedColumn + + + + yes + + - + +
+ defaultSortDirection + + + + yes + + - + +
+ sortButtonsScreenReaderText + + + + yes + + + { + + { + + asc + + : + + " + sort ascending + " + + , + + desc + + : + + " + sort descending + " + + , + + defaultText + + : + + " + click to sort + " + + } + + } + + +
+
+
+
+
+
+
+
+
+`; + +exports[`Storyshots Table unstyled 1`] = ` +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Famous Internet Cats +
+ Name + + Famous For + + + Coat Color + +
+ Lil Bub + + weird tongue + + brown tabby +
+ Grumpy Cat + + serving moods + + siamese +
+ Smoothie + + modeling + + orange tabby +
+ Maru + + being a lovable oaf + + brown tabby +
+ Keyboard Cat + + piano virtuoso + + orange tabby +
+ Long Cat + + being loooooooooooooooooooooooooooooooooooooooooooooooooooooong + + russian white +
+
+ +
+ +
+
+
+

+ Table +

+

+ unstyled +

+
+ +
+

+ Story Source +

+ 
+                

+                  

+                    
+                      <
+                      Table
+                    
+                    
+                      
+                         
+                        
+                          data
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                [
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      name
+                                    
+                                    : 
+                                    
+                                      "
+                                      Lil Bub
+                                      "
+                                    
+                                    , 
+                                    
+                                      color
+                                    
+                                    : 
+                                    
+                                      "
+                                      brown tabby
+                                      "
+                                    
+                                    , 
+                                    
+                                      famous_for
+                                    
+                                    : 
+                                    
+                                      "
+                                      weird tongue
+                                      "
+                                    
+                                    }
+                                  
+                                  }
+                                
+                                , 
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      name
+                                    
+                                    : 
+                                    
+                                      "
+                                      Grumpy Cat
+                                      "
+                                    
+                                    , 
+                                    
+                                      color
+                                    
+                                    : 
+                                    
+                                      "
+                                      siamese
+                                      "
+                                    
+                                    , 
+                                    
+                                      famous_for
+                                    
+                                    : 
+                                    
+                                      "
+                                      serving moods
+                                      "
+                                    
+                                    }
+                                  
+                                  }
+                                
+                                , 
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      name
+                                    
+                                    : 
+                                    
+                                      "
+                                      Smoothie
+                                      "
+                                    
+                                    , 
+                                    
+                                      color
+                                    
+                                    : 
+                                    
+                                      "
+                                      orange tabby
+                                      "
+                                    
+                                    , 
+                                    
+                                      famous_for
+                                    
+                                    : 
+                                    
+                                      "
+                                      modeling
+                                      "
+                                    
+                                    }
+                                  
+                                  }
+                                
+                                , 
+                                …
+                                ]
+                              
+                              }
+                            
+                          
+                        
+                      
+                      
+                         
+                        
+                          columns
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                [
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      label
+                                    
+                                    : 
+                                    
+                                      "
+                                      Name
+                                      "
+                                    
+                                    , 
+                                    
+                                      key
+                                    
+                                    : 
+                                    
+                                      "
+                                      name
+                                      "
+                                    
+                                    , 
+                                    
+                                      columnSortable
+                                    
+                                    : 
+                                    
+                                      {
+                                      
+                                        true
+                                      
+                                      }
+                                    
+                                    , 
+                                    …
+                                    }
+                                  
+                                  }
+                                
+                                , 
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      label
+                                    
+                                    : 
+                                    
+                                      "
+                                      Famous For
+                                      "
+                                    
+                                    , 
+                                    
+                                      key
+                                    
+                                    : 
+                                    
+                                      "
+                                      famous_for
+                                      "
+                                    
+                                    , 
+                                    
+                                      columnSortable
+                                    
+                                    : 
+                                    
+                                      {
+                                      
+                                        false
+                                      
+                                      }
+                                    
+                                    , 
+                                    …
+                                    }
+                                  
+                                  }
+                                
+                                , 
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      label
+                                    
+                                    : 
+                                    
+                                      "
+                                      Coat Color
+                                      "
+                                    
+                                    , 
+                                    
+                                      key
+                                    
+                                    : 
+                                    
+                                      "
+                                      color
+                                      "
+                                    
+                                    , 
+                                    
+                                      columnSortable
+                                    
+                                    : 
+                                    
+                                      {
+                                      
+                                        false
+                                      
+                                      }
+                                    
+                                    , 
+                                    …
+                                    }
+                                  
+                                  }
+                                
+                                ]
+                              
+                              }
+                            
+                          
+                        
+                      
+                      
+                         
+                        
+                          caption
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              Famous Internet Cats
+                              "
+                            
+                          
+                        
+                         
+                      
+                    
+                    
+                      />
+                    
+                  

+                

+                
+
+
+
+

+ Prop Types +

+
+

+ " + Table + " Component +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ property + + propType + + required + + default + + description +
+ caption + + + + - + + + { + + null + + } + + +
+ className + + + + - + + + { + + [ + ] + + } + + +
+ data + + + + yes + + - + +
+ columns + + + + yes + + - + +
+ headingClassName + + + + - + + + { + + [ + ] + + } + + +
+ tableSortable + + + + - + + + { + + false + + } + + +
+ hasFixedColumnWidths + + + + - + + + { + + false + + } + + +
+ defaultSortedColumn + + + + yes + + - + +
+ defaultSortDirection + + + + yes + + - + +
+ sortButtonsScreenReaderText + + + + yes + + + { + + { + + asc + + : + + " + sort ascending + " + + , + + desc + + : + + " + sort descending + " + + , + + defaultText + + : + + " + click to sort + " + + } + + } + + +
+
+
+
+
+
+
+
+
`; exports[`Storyshots Tabs basic usage 1`] = ` diff --git a/src/Table/Table.stories.jsx b/src/Table/Table.stories.jsx index 7bf8f7af0b..655db2c8ab 100644 --- a/src/Table/Table.stories.jsx +++ b/src/Table/Table.stories.jsx @@ -1,7 +1,11 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; +import centered from '@storybook/addon-centered'; +import { checkA11y } from '@storybook/addon-a11y'; +import { withInfo } from '@storybook/addon-info'; import Table from './index'; +import README from './README.md'; const catData = [ { @@ -73,6 +77,9 @@ const sort = function sort(firstElement, secondElement, key, direction) { }; storiesOf('Table', module) + .addDecorator((story, context) => withInfo({}, README)(story)(context)) + .addDecorator(centered) + .addDecorator(checkA11y) .add('unstyled', () => ( Date: Wed, 23 May 2018 17:53:07 -0400 Subject: [PATCH 2/2] docs(with-readme-addon): add withReadme addon --- .storybook/addons.js | 1 + package-lock.json | 70 +++++++++++++++++++++++++++++++++++++ package.json | 1 + src/Table/Table.stories.jsx | 4 ++- 4 files changed, 75 insertions(+), 1 deletion(-) diff --git a/.storybook/addons.js b/.storybook/addons.js index adb0cdad6c..b212a9e5e3 100644 --- a/.storybook/addons.js +++ b/.storybook/addons.js @@ -1,3 +1,4 @@ import '@storybook/addon-options/register'; import '@storybook/addon-actions/register'; import '@storybook/addon-a11y/register'; +import 'storybook-readme/register'; diff --git a/package-lock.json b/package-lock.json index 96100178bf..34a52286b3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4393,6 +4393,18 @@ "integrity": "sha1-pNKT72frt7iNSk1CwMzwDE0eNm0=", "dev": true }, + "clipboard": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.1.tgz", + "integrity": "sha512-7yhQBmtN+uYZmfRjjVjKa0dZdWuabzpSKGtyQZN+9C8xlC788SSJjOHWh7tzurfwTqTD5UDYAhIv5fRJg3sHjQ==", + "dev": true, + "optional": true, + "requires": { + "good-listener": "1.2.2", + "select": "1.1.2", + "tiny-emitter": "2.0.2" + } + }, "cliui": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz", @@ -5572,6 +5584,13 @@ "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", "dev": true }, + "delegate": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz", + "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==", + "dev": true, + "optional": true + }, "delegates": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", @@ -8857,6 +8876,16 @@ "minimatch": "3.0.4" } }, + "good-listener": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz", + "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=", + "dev": true, + "optional": true, + "requires": { + "delegate": "3.2.0" + } + }, "got": { "version": "8.3.0", "resolved": "https://registry.npmjs.org/got/-/got-8.3.0.tgz", @@ -15325,6 +15354,15 @@ } } }, + "prismjs": { + "version": "1.14.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.14.0.tgz", + "integrity": "sha512-sa2s4m60bXs+kU3jcuUwx3ZCrUH7o0kuqnOOINbODqlRrDB7KY8SRx+xR/D7nHLlgfDdG7zXbRO8wJ+su5Ls0A==", + "dev": true, + "requires": { + "clipboard": "2.0.1" + } + }, "private": { "version": "0.1.8", "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz", @@ -16716,6 +16754,13 @@ } } }, + "select": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz", + "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=", + "dev": true, + "optional": true + }, "select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", @@ -17664,6 +17709,18 @@ "integrity": "sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=", "dev": true }, + "storybook-readme": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/storybook-readme/-/storybook-readme-3.3.0.tgz", + "integrity": "sha512-SxaprEbFxEcRwXLPWKvL8uD3/NL41qTabKtLpI7O4v6UMbgRMg3IqWkOBJazxNtKOlEw7i4CTY76OZ7jOqU0WA==", + "dev": true, + "requires": { + "babel-plugin-transform-es2015-modules-commonjs": "6.26.0", + "lodash": "4.17.4", + "prismjs": "1.14.0", + "string-raw": "1.0.1" + } + }, "stream-browserify": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.1.tgz", @@ -17745,6 +17802,12 @@ } } }, + "string-raw": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/string-raw/-/string-raw-1.0.1.tgz", + "integrity": "sha1-Ab4mZaHPosV1IMkQaY9sonakxyY=", + "dev": true + }, "string-width": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", @@ -18240,6 +18303,13 @@ "setimmediate": "1.0.5" } }, + "tiny-emitter": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.0.2.tgz", + "integrity": "sha512-2NM0auVBGft5tee/OxP4PI3d8WItkDM+fPnaRAVo6xTDI2knbz9eC5ArWGqtGlYqiH3RU5yMpdyTTO7MguC4ow==", + "dev": true, + "optional": true + }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", diff --git a/package.json b/package.json index d4b9d7d780..0e9f9c9989 100644 --- a/package.json +++ b/package.json @@ -86,6 +86,7 @@ "sass-loader": "^6.0.5", "semantic-release": "^15.1.7", "source-map-loader": "^0.2.1", + "storybook-readme": "^3.3.0", "style-loader": "^0.21.0", "travis-deploy-once": "^5.0.0", "uglifyjs-webpack-plugin": "^1.1.8", diff --git a/src/Table/Table.stories.jsx b/src/Table/Table.stories.jsx index 655db2c8ab..15a008b804 100644 --- a/src/Table/Table.stories.jsx +++ b/src/Table/Table.stories.jsx @@ -3,6 +3,7 @@ import { storiesOf } from '@storybook/react'; import centered from '@storybook/addon-centered'; import { checkA11y } from '@storybook/addon-a11y'; import { withInfo } from '@storybook/addon-info'; +import { withReadme } from 'storybook-readme'; import Table from './index'; import README from './README.md'; @@ -77,9 +78,10 @@ const sort = function sort(firstElement, secondElement, key, direction) { }; storiesOf('Table', module) - .addDecorator((story, context) => withInfo({}, README)(story)(context)) + .addDecorator((story, context) => withInfo()(story)(context)) .addDecorator(centered) .addDecorator(checkA11y) + .addDecorator(withReadme(README)) .add('unstyled', () => (