From fe46486e79f66d2e3bf848355b1877a27dbadd82 Mon Sep 17 00:00:00 2001 From: jaebradley Date: Wed, 23 May 2018 09:52:14 -0400 Subject: [PATCH] docs(input-select): add Storybook add-on to input-select --- .../__snapshots__/Storyshots.test.js.snap | 6735 ++++++++++++++++- src/InputSelect/InputSelect.stories.jsx | 9 + 2 files changed, 6408 insertions(+), 336 deletions(-) diff --git a/.storybook/__snapshots__/Storyshots.test.js.snap b/.storybook/__snapshots__/Storyshots.test.js.snap index d214bb1e77..60b8a46f07 100644 --- a/.storybook/__snapshots__/Storyshots.test.js.snap +++ b/.storybook/__snapshots__/Storyshots.test.js.snap @@ -14527,348 +14527,6411 @@ exports[`Storyshots Icon with screenreader text 1`] = ` exports[`Storyshots InputSelect basic usage 1`] = `
- - -
- -
-
-`; - -exports[`Storyshots InputSelect disabled usage 1`] = ` -
- - -
- -
-
-`; - -exports[`Storyshots InputSelect separate labels and values 1`] = ` -
- -
- -
-
-`; - -exports[`Storyshots InputSelect separate option groups 1`] = ` -
- - + + + + + +
+ +
+
+ + +
+
+
+

+ InputSelect +

+

+ basic usage +

+
+ +
+

+ Story Source +

+ 
+                

+                  

+                    
+                      <
+                      asInput(Select)
+                    
+                    
+                      
+                        
+                          

+                            
+                        
+                        
+                          name
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              fruits
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          label
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              Fruits
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          value
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              strawberry
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          options
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                [
+                                
+                                  "
+                                  apple
+                                  "
+                                
+                                , 
+                                
+                                  "
+                                  orange
+                                  "
+                                
+                                , 
+                                
+                                  "
+                                  strawberry
+                                  "
+                                
+                                , 
+                                …
+                                ]
+                              
+                              }
+                            
+                          
+                        
+                        

+                      
+                    
+                    
+                      />
+                    
+                  

+                

+                
+
+
+
+

+ Prop Types +

+
+

+ " + asInput(Select) + " Component +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ property + + propType + + required + + default + + description +
+ label + + + + yes + + - + +
+ name + + + + yes + + - + +
+ id + + + + - + + - + +
+ value + + + + - + + + " + + " + + +
+ dangerIconDescription + + + + - + + + " + + " + + +
+ description + + + + - + + - + +
+ disabled + + + + - + + + { + + false + + } + + +
+ required + + + + - + + + { + + false + + } + + +
+ onChange + + + + - + + + { + + onChange() + + } + + +
+ onKeyPress + + + + - + + + { + + onKeyPress() + + } + + +
+ onBlur + + + + - + + + { + + onBlur() + + } + + +
+ validator + + + + - + + - + +
+ isValid + + + + - + + + { + + true + + } + + +
+ validationMessage + + + + - + + + " + + " + + +
+ className + + + + - + + + { + + [ + ] + + } + + +
+ themes + + + + - + + + { + + [ + ] + + } + + +
+ inline + + + + - + + + { + + false + + } + + +
+ inputGroupPrepend + + + + - + + - + +
+ inputGroupAppend + + + + - + + - + +
+ options + + + + yes + + - + +
+
+
+
+
+ + + + +`; + +exports[`Storyshots InputSelect disabled usage 1`] = ` +
+
+
+
+
+ + +
+ +
+
+
+ +
+ +
+
+
+

+ InputSelect +

+

+ disabled usage +

+
+ +
+

+ Story Source +

+ 
+                

+                  

+                    
+                      <
+                      asInput(Select)
+                    
+                    
+                      
+                        
+                          

+                            
+                        
+                        
+                          name
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              fruits
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          label
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              Fruits
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          value
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              strawberry
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          options
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                [
+                                
+                                  "
+                                  apple
+                                  "
+                                
+                                , 
+                                
+                                  "
+                                  orange
+                                  "
+                                
+                                , 
+                                
+                                  "
+                                  strawberry
+                                  "
+                                
+                                , 
+                                …
+                                ]
+                              
+                              }
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          disabled
+                        
+                        

+                      
+                    
+                    
+                      />
+                    
+                  

+                

+                
+
+
+
+

+ Prop Types +

+
+

+ " + asInput(Select) + " Component +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ property + + propType + + required + + default + + description +
+ label + + + + yes + + - + +
+ name + + + + yes + + - + +
+ id + + + + - + + - + +
+ value + + + + - + + + " + + " + + +
+ dangerIconDescription + + + + - + + + " + + " + + +
+ description + + + + - + + - + +
+ disabled + + + + - + + + { + + false + + } + + +
+ required + + + + - + + + { + + false + + } + + +
+ onChange + + + + - + + + { + + onChange() + + } + + +
+ onKeyPress + + + + - + + + { + + onKeyPress() + + } + + +
+ onBlur + + + + - + + + { + + onBlur() + + } + + +
+ validator + + + + - + + - + +
+ isValid + + + + - + + + { + + true + + } + + +
+ validationMessage + + + + - + + + " + + " + + +
+ className + + + + - + + + { + + [ + ] + + } + + +
+ themes + + + + - + + + { + + [ + ] + + } + + +
+ inline + + + + - + + + { + + false + + } + + +
+ inputGroupPrepend + + + + - + + - + +
+ inputGroupAppend + + + + - + + - + +
+ options + + + + yes + + - + +
+
+
+
+
+
+
+
+
+`; + +exports[`Storyshots InputSelect separate labels and values 1`] = ` +
+
+
+
+
+ + +
+ +
+
+
+ +
+ +
+
+
+

+ InputSelect +

+

+ separate labels and values +

+
+ +
+

+ Story Source +

+ 
+                

+                  

+                    
+                      <
+                      asInput(Select)
+                    
+                    
+                      
+                        
+                          

+                            
+                        
+                        
+                          name
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              new-england-states
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          label
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              New England States
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          value
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              RI
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          options
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                [
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      label
+                                    
+                                    : 
+                                    
+                                      "
+                                      Connecticut
+                                      "
+                                    
+                                    , 
+                                    
+                                      value
+                                    
+                                    : 
+                                    
+                                      "
+                                      CN
+                                      "
+                                    
+                                    }
+                                  
+                                  }
+                                
+                                , 
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      label
+                                    
+                                    : 
+                                    
+                                      "
+                                      Maine
+                                      "
+                                    
+                                    , 
+                                    
+                                      value
+                                    
+                                    : 
+                                    
+                                      "
+                                      ME
+                                      "
+                                    
+                                    }
+                                  
+                                  }
+                                
+                                , 
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      label
+                                    
+                                    : 
+                                    
+                                      "
+                                      Massachusetts
+                                      "
+                                    
+                                    , 
+                                    
+                                      value
+                                    
+                                    : 
+                                    
+                                      "
+                                      MA
+                                      "
+                                    
+                                    }
+                                  
+                                  }
+                                
+                                , 
+                                …
+                                ]
+                              
+                              }
+                            
+                          
+                        
+                        

+                      
+                    
+                    
+                      />
+                    
+                  

+                

+                
+
+
+
+

+ Prop Types +

+
+

+ " + asInput(Select) + " Component +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ property + + propType + + required + + default + + description +
+ label + + + + yes + + - + +
+ name + + + + yes + + - + +
+ id + + + + - + + - + +
+ value + + + + - + + + " + + " + + +
+ dangerIconDescription + + + + - + + + " + + " + + +
+ description + + + + - + + - + +
+ disabled + + + + - + + + { + + false + + } + + +
+ required + + + + - + + + { + + false + + } + + +
+ onChange + + + + - + + + { + + onChange() + + } + + +
+ onKeyPress + + + + - + + + { + + onKeyPress() + + } + + +
+ onBlur + + + + - + + + { + + onBlur() + + } + + +
+ validator + + + + - + + - + +
+ isValid + + + + - + + + { + + true + + } + + +
+ validationMessage + + + + - + + + " + + " + + +
+ className + + + + - + + + { + + [ + ] + + } + + +
+ themes + + + + - + + + { + + [ + ] + + } + + +
+ inline + + + + - + + + { + + false + + } + + +
+ inputGroupPrepend + + + + - + + - + +
+ inputGroupAppend + + + + - + + - + +
+ options + + + + yes + + - + +
+
+
+
+
+
+
+
+
+`; + +exports[`Storyshots InputSelect separate option groups 1`] = ` +
+
+
+
+
+ + +
+ +
+
+
+ +
+ +
+
+
+

+ InputSelect +

+

+ separate option groups +

+
+ +
+

+ Story Source +

+ 
+                

+                  

+                    
+                      <
+                      asInput(Select)
+                    
+                    
+                      
+                        
+                          

+                            
+                        
+                        
+                          name
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              northeast-states
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          label
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              Northeast States
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          value
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              MD
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          options
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                [
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      label
+                                    
+                                    : 
+                                    
+                                      "
+                                      New England States
+                                      "
+                                    
+                                    , 
+                                    
+                                      options
+                                    
+                                    : 
+                                    
+                                      {
+                                      
+                                        [
+                                        
+                                          {
+                                          
+                                            {
+                                            
+                                              label
+                                            
+                                            : 
+                                            
+                                              "
+                                              Connecticut
+                                              "
+                                            
+                                            , 
+                                            
+                                              value
+                                            
+                                            : 
+                                            
+                                              "
+                                              CN
+                                              "
+                                            
+                                            }
+                                          
+                                          }
+                                        
+                                        , 
+                                        
+                                          {
+                                          
+                                            {
+                                            
+                                              label
+                                            
+                                            : 
+                                            
+                                              "
+                                              Maine
+                                              "
+                                            
+                                            , 
+                                            
+                                              value
+                                            
+                                            : 
+                                            
+                                              "
+                                              ME
+                                              "
+                                            
+                                            }
+                                          
+                                          }
+                                        
+                                        , 
+                                        
+                                          {
+                                          
+                                            {
+                                            
+                                              label
+                                            
+                                            : 
+                                            
+                                              "
+                                              Massachusetts
+                                              "
+                                            
+                                            , 
+                                            
+                                              value
+                                            
+                                            : 
+                                            
+                                              "
+                                              MA
+                                              "
+                                            
+                                            }
+                                          
+                                          }
+                                        
+                                        , 
+                                        …
+                                        ]
+                                      
+                                      }
+                                    
+                                    }
+                                  
+                                  }
+                                
+                                , 
+                                
+                                  {
+                                  
+                                    {
+                                    
+                                      label
+                                    
+                                    : 
+                                    
+                                      "
+                                      Mid Atlantic States
+                                      "
+                                    
+                                    , 
+                                    
+                                      options
+                                    
+                                    : 
+                                    
+                                      {
+                                      
+                                        [
+                                        
+                                          {
+                                          
+                                            {
+                                            
+                                              label
+                                            
+                                            : 
+                                            
+                                              "
+                                              Delaware
+                                              "
+                                            
+                                            , 
+                                            
+                                              value
+                                            
+                                            : 
+                                            
+                                              "
+                                              DE
+                                              "
+                                            
+                                            }
+                                          
+                                          }
+                                        
+                                        , 
+                                        
+                                          {
+                                          
+                                            {
+                                            
+                                              label
+                                            
+                                            : 
+                                            
+                                              "
+                                              Maryland
+                                              "
+                                            
+                                            , 
+                                            
+                                              value
+                                            
+                                            : 
+                                            
+                                              "
+                                              MD
+                                              "
+                                            
+                                            }
+                                          
+                                          }
+                                        
+                                        , 
+                                        
+                                          {
+                                          
+                                            {
+                                            
+                                              label
+                                            
+                                            : 
+                                            
+                                              "
+                                              New Jersey
+                                              "
+                                            
+                                            , 
+                                            
+                                              value
+                                            
+                                            : 
+                                            
+                                              "
+                                              NJ
+                                              "
+                                            
+                                            }
+                                          
+                                          }
+                                        
+                                        , 
+                                        …
+                                        ]
+                                      
+                                      }
+                                    
+                                    }
+                                  
+                                  }
+                                
+                                ]
+                              
+                              }
+                            
+                          
+                        
+                        

+                      
+                    
+                    
+                      />
+                    
+                  

+                

+                
+
+
+
+

+ Prop Types +

+
+

+ " + asInput(Select) + " Component +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ property + + propType + + required + + default + + description +
+ label + + + + yes + + - + +
+ name + + + + yes + + - + +
+ id + + + + - + + - + +
+ value + + + + - + + + " + + " + + +
+ dangerIconDescription + + + + - + + + " + + " + + +
+ description + + + + - + + - + +
+ disabled + + + + - + + + { + + false + + } + + +
+ required + + + + - + + + { + + false + + } + + +
+ onChange + + + + - + + + { + + onChange() + + } + + +
+ onKeyPress + + + + - + + + { + + onKeyPress() + + } + + +
+ onBlur + + + + - + + + { + + onBlur() + + } + + +
+ validator + + + + - + + - + +
+ isValid + + + + - + + + { + + true + + } + + +
+ validationMessage + + + + - + + + " + + " + + +
+ className + + + + - + + + { + + [ + ] + + } + + +
+ themes + + + + - + + + { + + [ + ] + + } + + +
+ inline + + + + - + + + { + + false + + } + + +
+ inputGroupPrepend + + + + - + + - + +
+ inputGroupAppend + + + + - + + - + +
+ options + + + + yes + + - + +
+
+
+
+
+
+
+
+
+`; + +exports[`Storyshots InputSelect with validation 1`] = ` +
+
+
+
+
+ + +
+ +
+
+
+ +
+ +
+
+
+

+ InputSelect +

+

+ with validation +

+
+ +
+

+ Story Source +

+ 
+                

+                  

+                    
+                      <
+                      asInput(Select)
+                    
+                    
+                      
+                        
+                          

+                            
+                        
+                        
+                          name
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              color
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          label
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              Favorite Color
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          options
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                [
+                                
+                                  "
+                                  
+                                  "
+                                
+                                , 
+                                
+                                  "
+                                  red
+                                  "
+                                
+                                , 
+                                
+                                  "
+                                  orange
+                                  "
+                                
+                                , 
+                                …
+                                ]
+                              
+                              }
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          validator
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                validator()
+                              
+                              }
+                            
+                          
+                        
+                        

+                      
+                    
+                    
+                      />
+                    
+                  

+                

+                
+
+
+
+

+ Prop Types +

+
+

+ " + asInput(Select) + " Component +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ property + + propType + + required + + default + + description +
+ label + + + + yes + + - + +
+ name + + + + yes + + - + +
+ id + + + + - + + - + +
+ value + + + + - + + + " + + " + + +
+ dangerIconDescription + + + + - + + + " + + " + + +
+ description + + + + - + + - + +
+ disabled + + + + - + + + { + + false + + } + + +
+ required + + + + - + + + { + + false + + } + + +
+ onChange + + + + - + + + { + + onChange() + + } + + +
+ onKeyPress + + + + - + + + { + + onKeyPress() + + } + + +
+ onBlur + + + + - + + + { + + onBlur() + + } + + +
+ validator + + + + - + + - + +
+ isValid + + + + - + + + { + + true + + } + + +
+ validationMessage + + + + - + + + " + + " + + +
+ className + + + + - + + + { + + [ + ] + + } + + +
+ themes + + + + - + + + { + + [ + ] + + } + + +
+ inline + + + + - + + + { + + false + + } + + +
+ inputGroupPrepend + + + + - + + - + +
+ inputGroupAppend + + + + - + + - + +
+ options + + + + yes + + - + +
+
+
+
+
+
+
`; diff --git a/src/InputSelect/InputSelect.stories.jsx b/src/InputSelect/InputSelect.stories.jsx index 7d154761b9..b595c45502 100644 --- a/src/InputSelect/InputSelect.stories.jsx +++ b/src/InputSelect/InputSelect.stories.jsx @@ -1,10 +1,19 @@ /* eslint-disable import/no-extraneous-dependencies */ 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 { withReadme } from 'storybook-readme'; import InputSelect from './index'; +import README from './README.md'; storiesOf('InputSelect', module) + .addDecorator((story, context) => withInfo()(story)(context)) + .addDecorator(centered) + .addDecorator(checkA11y) + .addDecorator(withReadme(README)) .add('basic usage', () => (