diff --git a/.storybook/__snapshots__/Storyshots.test.js.snap b/.storybook/__snapshots__/Storyshots.test.js.snap index 0e035912d5..bd490cf23c 100644 --- a/.storybook/__snapshots__/Storyshots.test.js.snap +++ b/.storybook/__snapshots__/Storyshots.test.js.snap @@ -22272,517 +22272,6 @@ exports[`Storyshots InputSelect with validation 1`] = ` `; exports[`Storyshots InputText different textual input types 1`] = ` -
-
-
-
- - - -
-
- - -
- -
-
-
- - -
- -
-
-
- - -
- -
-
-
- - -
- -
-
-
- - -
- -
-
-
- - -
- -
-
-
- - -
- -
-
-
- - -
- -
-
-
- - -
- -
-
-
- - -
- -
-
-
- - -
- -
-
-
-
-
-`; - -exports[`Storyshots InputText displayed inline 1`] = ` -
-
-
- - -
- -
-
-
-
-`; - -exports[`Storyshots InputText focus test 1`] = `
-
- - -
- -
-
-
-
- -`; - -exports[`Storyshots InputText label as element 1`] = ` -
-
-
- - -
- -
-
-
-
-`; - -exports[`Storyshots InputText minimal usage 1`] = ` -
-
-
- - -
- -
-
-
-
-`; - -exports[`Storyshots InputText validation 1`] = ` -
-
-
- - -
- -
- - The unique name that identifies you throughout the site. - -
-
-
-`; - -exports[`Storyshots InputText validation with danger theme 1`] = ` -
-
-
- - -
- -
- - The unique name that identifies you throughout the site. - -
-
-
-`; - -exports[`Storyshots InputText with input group addons 1`] = ` -
-
-
-
- -
+ + + +
+ +
- @ +
- -
-
-
- -
-
-
- -
-
-
+ +
- @example.com +
-
-
- -
-
-
- -
+ +
- $ +
-
+ +
- .00 +
-
-
- -
-
-
- -
- + className="form-group" + > + + +
+ +
+
- + +
-
-
- -
-
-
- -
- + className="form-group" + > + + +
+ +
+
+ +
-
- - - Checkmark - -
+
- + +
-
-
- -
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+
- + × +
- -
-
-
- - - Checkmark - + style={ + Object { + "WebkitFontSmoothing": "antialiased", + "backgroundColor": "#fff", + "border": "1px solid #eee", + "borderRadius": "2px", + "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)", + "color": "#444", + "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif", + "fontSize": "15px", + "fontWeight": 300, + "lineHeight": 1.45, + "marginBottom": "20px", + "marginTop": "20px", + "padding": "20px 40px 40px", + } + } + > +
+

+ InputText +

+

+ different textual input types +

+
+ +
+

+ Story Source +

+ 
+                

+                  

+                    

+                      
+                        <
+                        form
+                      
+                      
+                      
+                        >
+                      
+                    

+                    

+                      
+                        <
+                        asInput(Text)
+                      
+                      
+                        
+                          
+                            

+                              
+                          
+                          
+                            name
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                search
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            label
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                Search
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            value
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                what is paragon
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            type
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                search
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            id
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                input-search
+                                "
+                              
+                            
+                          
+                          

+                        
+                      
+                      
+                        />
+                      
+                    

+                    

+                      
+                        <
+                        asInput(Text)
+                      
+                      
+                        
+                          
+                            

+                              
+                          
+                          
+                            name
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                email
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            label
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                Email
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            value
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                paragon@edx.org
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            type
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                email
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            id
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                input-email
+                                "
+                              
+                            
+                          
+                          

+                        
+                      
+                      
+                        />
+                      
+                    

+                    

+                      
+                        <
+                        asInput(Text)
+                      
+                      
+                        
+                          
+                            

+                              
+                          
+                          
+                            name
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                url
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            label
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                Url
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            value
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                https://edx.github.io/paragon
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            type
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                url
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            id
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                input-url
+                                "
+                              
+                            
+                          
+                          

+                        
+                      
+                      
+                        />
+                      
+                    

+                    

+                      
+                        <
+                        asInput(Text)
+                      
+                      
+                        
+                          
+                            

+                              
+                          
+                          
+                            name
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                telephone
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            label
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                Telephone
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            value
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                1-(555)-555-5555
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            type
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                tel
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            id
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                input-tel
+                                "
+                              
+                            
+                          
+                          

+                        
+                      
+                      
+                        />
+                      
+                    

+                    

+                      
+                        <
+                        asInput(Text)
+                      
+                      
+                        
+                          
+                            

+                              
+                          
+                          
+                            name
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                password
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            label
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                Password
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            value
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                hunter2
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            type
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                password
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            id
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                input-password
+                                "
+                              
+                            
+                          
+                          

+                        
+                      
+                      
+                        />
+                      
+                    

+                    

+                      
+                        <
+                        asInput(Text)
+                      
+                      
+                        
+                          
+                            

+                              
+                          
+                          
+                            name
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                number
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            label
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                Number
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            value
+                          
+                          
+                            =
+                            
+                              
+                                {
+                                
+                                  42
+                                
+                                }
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            type
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                number
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            id
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                input-number
+                                "
+                              
+                            
+                          
+                          

+                        
+                      
+                      
+                        />
+                      
+                    

+                    

+                      
+                        <
+                        asInput(Text)
+                      
+                      
+                        
+                          
+                            

+                              
+                          
+                          
+                            name
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                datetime-local
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            label
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                Date and time
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            value
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                2017-04-27T13:45:00
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            type
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                datetime-local
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            id
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                input-datetime-local
+                                "
+                              
+                            
+                          
+                          

+                        
+                      
+                      
+                        />
+                      
+                    

+                    

+                      
+                        <
+                        asInput(Text)
+                      
+                      
+                        
+                          
+                            

+                              
+                          
+                          
+                            name
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                date
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            label
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                Date
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            value
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                2017-04-27
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            type
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                date
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            id
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                input-date
+                                "
+                              
+                            
+                          
+                          

+                        
+                      
+                      
+                        />
+                      
+                    

+                    

+                      
+                        <
+                        asInput(Text)
+                      
+                      
+                        
+                          
+                            

+                              
+                          
+                          
+                            name
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                month
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            label
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                Month
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            value
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                2017-04
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            type
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                month
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            id
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                input-month
+                                "
+                              
+                            
+                          
+                          

+                        
+                      
+                      
+                        />
+                      
+                    

+                    

+                      
+                        <
+                        asInput(Text)
+                      
+                      
+                        
+                          
+                            

+                              
+                          
+                          
+                            name
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                week
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            label
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                Week
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            value
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                2017-W33
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            type
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                week
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            id
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                input-week
+                                "
+                              
+                            
+                          
+                          

+                        
+                      
+                      
+                        />
+                      
+                    

+                    

+                      
+                        <
+                        asInput(Text)
+                      
+                      
+                        
+                          
+                            

+                              
+                          
+                          
+                            name
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                time
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            label
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                Time
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            value
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                13:45:00
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            type
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                time
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            id
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                input-time
+                                "
+                              
+                            
+                          
+                          

+                        
+                      
+                      
+                        />
+                      
+                    

+                    

+                      
+                        <
+                        asInput(Text)
+                      
+                      
+                        
+                          
+                            

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

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

+                              
+                          
+                          
+                            value
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                #BF472C
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            type
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                color
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            id
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                input-color
+                                "
+                              
+                            
+                          
+                          

+                        
+                      
+                      
+                        />
+                      
+                    

+                    

+                      
+                        </
+                        form
+                        >
+                      
+                    

+                  

+                

+                
+
+
+
+

+ Prop Types +

+
+

+ " + asInput(Text) + " 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 + + + + - + + - + +
+
+
+
+
+
+
+
+
+`; + +exports[`Storyshots InputText displayed inline 1`] = ` +
+
+
+
+
+ + +
+ +
+
+
+ +
+ +
+
+
+

+ InputText +

+

+ displayed inline +

+
+ +
+

+ Story Source +

+ 
+                

+                  

+                    
+                      <
+                      asInput(Text)
+                    
+                    
+                      
+                        
+                          

+                            
+                        
+                        
+                          name
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              username
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          label
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              Username
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          value
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              foobar
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          inline
+                        
+                        

+                      
+                    
+                    
+                      />
+                    
+                  

+                

+                
+
+
+
+

+ Prop Types +

+
+

+ " + asInput(Text) + " 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 + + + + - + + - + +
+
+
+
+
+
+
+
+
+`; + +exports[`Storyshots InputText focus test 1`] = ` +
+
+
+
+
+ +
+ + +
+ +
+
+
+
+ +
+ +
+
+
+

+ InputText +

+

+ focus test +

+
+ +
+

+ Story Source +

+ 
+                

+                  

+                    
+                      <
+                      FocusInputWrapper
+                    
+                    
+                    
+                      />
+                    
+                  

+                

+                
+
+
+
+

+ Prop Types +

+
+

+ " + FocusInputWrapper + " Component +

+ + No propTypes defined! + +
+
+
+
+
+
+
+
+`; + +exports[`Storyshots InputText label as element 1`] = ` +
+
+
+
+
+ + +
+ +
+
+
+ +
+ +
+
+
+

+ InputText +

+

+ label as element +

+
+ +
+

+ Story Source +

+ 
+                

+                  

+                    
+                      <
+                      asInput(Text)
+                    
+                    
+                      
+                         
+                        
+                          name
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              username
+                              "
+                            
+                          
+                        
+                      
+                      
+                         
+                        
+                          label
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                <span />
+                              
+                              }
+                            
+                          
+                        
+                      
+                      
+                         
+                        
+                          value
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              Label is wrapped in language span
+                              "
+                            
+                          
+                        
+                         
+                      
+                    
+                    
+                      />
+                    
+                  

+                

+                
+
+
+
+

+ Prop Types +

+
+

+ " + asInput(Text) + " 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 + + + + - + + - + +
+
+
+
+
+
+
+
+
+`; + +exports[`Storyshots InputText minimal usage 1`] = ` +
+
+
+
+
+ + +
+ +
+
+
+ +
+ +
+
+
+

+ InputText +

+

+ minimal usage +

+
+ +
+

+ Story Source +

+ 
+                

+                  

+                    
+                      <
+                      asInput(Text)
+                    
+                    
+                      
+                         
+                        
+                          name
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              name
+                              "
+                            
+                          
+                        
+                      
+                      
+                         
+                        
+                          label
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              First Name
+                              "
+                            
+                          
+                        
+                      
+                      
+                         
+                        
+                          value
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              Foo Bar
+                              "
+                            
+                          
+                        
+                         
+                      
+                    
+                    
+                      />
+                    
+                  

+                

+                
+
+
+
+

+ Prop Types +

+
+

+ " + asInput(Text) + " 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 + + + + - + + - + +
+
+
+
+
+
+
+
+
+`; + +exports[`Storyshots InputText validation 1`] = ` +
+
+
+
+
+ + +
+ +
+ + The unique name that identifies you throughout the site. + +
+
+ +
+ +
+
+
+

+ InputText +

+

+ validation +

+
+ +
+

+ Story Source +

+ 
+                

+                  

+                    
+                      <
+                      asInput(Text)
+                    
+                    
+                      
+                        
+                          

+                            
+                        
+                        
+                          id
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              username
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          name
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              username
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          label
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              Username
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          description
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              The unique name that identifies you throughout the…
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

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

+                      
+                    
+                    
+                      />
+                    
+                  

+                

+                
+
+
+
+

+ Prop Types +

+
+

+ " + asInput(Text) + " 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 + + + + - + + - + +
+
+
+
+
+
+
+
+
+`; + +exports[`Storyshots InputText validation with danger theme 1`] = ` +
+
+
+
+
+ + +
+ +
+ + The unique name that identifies you throughout the site. + +
+
+ +
+ +
+
+
+

+ InputText +

+

+ validation with danger theme +

+
+ +
+

+ Story Source +

+ 
+                

+                  

+                    
+                      <
+                      asInput(Text)
+                    
+                    
+                      
+                        
+                          

+                            
+                        
+                        
+                          name
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              username
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          label
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              Username
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          description
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              The unique name that identifies you throughout the…
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

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

+                            
+                        
+                        
+                          themes
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                [
+                                
+                                  "
+                                  danger
+                                  "
+                                
+                                ]
+                              
+                              }
+                            
+                          
+                        
+                        

+                      
+                    
+                    
+                      />
+                    
+                  

+                

+                
+
+
+
+

+ Prop Types +

+
+

+ " + asInput(Text) + " 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 + + + + - + + - + +
+
+
+
+
+
+
+
+
+`; + +exports[`Storyshots InputText with input group addons 1`] = ` +
+
+
+
+
+
+ +
+
+
+ @ +
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+
+ @example.com +
+
+
+
+ +
+
+
+ +
+
+
+ $ +
+
+ +
+
+ .00 +
+
+
+
+ +
+
+
+ +
+
+ +
+ +
+
+
+ +
+
+
+ +
+
+ +
+
+
+ + + Checkmark + +
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+
+
+ + + Checkmark + +
+
+
+
+
+ +
+
+ +
+ +
+ +
+
+
+

+ InputText +

+

+ with input group addons +

+
+ +
+

+ Story Source +

+ 
+                

+                  

+                    

+                      
+                        <
+                        form
+                      
+                      
+                      
+                        >
+                      
+                    

+                    

+                      
+                        <
+                        asInput(Text)
+                      
+                      
+                        
+                          
+                            

+                              
+                          
+                          
+                            name
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                username
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            label
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                Username
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            value
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                foobar
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            inputGroupPrepend
+                          
+                          
+                            =
+                            
+                              
+                                {
+                                
+                                  <div />
+                                
+                                }
+                              
+                            
+                          
+                          

+                        
+                      
+                      
+                        />
+                      
+                    

+                    

+                      
+                        <
+                        asInput(Text)
+                      
+                      
+                        
+                          
+                            

+                              
+                          
+                          
+                            name
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                username
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            label
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                Username
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            value
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                foobar
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            inputGroupAppend
+                          
+                          
+                            =
+                            
+                              
+                                {
+                                
+                                  <div />
+                                
+                                }
+                              
+                            
+                          
+                          

+                        
+                      
+                      
+                        />
+                      
+                    

+                    

+                      
+                        <
+                        asInput(Text)
+                      
+                      
+                        
+                          
+                            

+                              
+                          
+                          
+                            name
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                money
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            label
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                Money
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            type
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                number
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            value
+                          
+                          
+                            =
+                            
+                              
+                                {
+                                
+                                  1000
+                                
+                                }
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            inputGroupPrepend
+                          
+                          
+                            =
+                            
+                              
+                                {
+                                
+                                  <div />
+                                
+                                }
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            inputGroupAppend
+                          
+                          
+                            =
+                            
+                              
+                                {
+                                
+                                  <div />
+                                
+                                }
+                              
+                            
+                          
+                          

+                        
+                      
+                      
+                        />
+                      
+                    

+                    

+                      
+                        <
+                        asInput(Text)
+                      
+                      
+                        
+                          
+                            

+                              
+                          
+                          
+                            name
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                search
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            label
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                Search
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            value
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                what is paragon
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            inputGroupAppend
+                          
+                          
+                            =
+                            
+                              
+                                {
+                                
+                                  <Button />
+                                
+                                }
+                              
+                            
+                          
+                          

+                        
+                      
+                      
+                        />
+                      
+                    

+                    

+                      
+                        <
+                        asInput(Text)
+                      
+                      
+                        
+                          
+                            

+                              
+                          
+                          
+                            name
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                username
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            label
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                Username
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            value
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                foobar
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            inputGroupAppend
+                          
+                          
+                            =
+                            
+                              
+                                {
+                                
+                                  [
+                                  
+                                    {
+                                    
+                                      <div />
+                                    
+                                    }
+                                  
+                                  , 
+                                  
+                                    {
+                                    
+                                      <Button />
+                                    
+                                    }
+                                  
+                                  ]
+                                
+                                }
+                              
+                            
+                          
+                          

+                        
+                      
+                      
+                        />
+                      
+                    

+                    

+                      
+                        <
+                        asInput(Text)
+                      
+                      
+                        
+                          
+                            

+                              
+                          
+                          
+                            name
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                password
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            label
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                Password
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            value
+                          
+                          
+                            =
+                            
+                              
+                                "
+                                secret
+                                "
+                              
+                            
+                          
+                        
+                        
+                          
+                            

+                              
+                          
+                          
+                            inputGroupAppend
+                          
+                          
+                            =
+                            
+                              
+                                {
+                                
+                                  <div />
+                                
+                                }
+                              
+                            
+                          
+                          

+                        
+                      
+                      
+                        />
+                      
+                    

+                    

+                      
+                        </
+                        form
+                        >
+                      
+                    

+                  

+                

+                
+
+
+
+

+ Prop Types +

+
+

+ " + asInput(Text) + " 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 + + + + - + + - + +
-
- -
- +
`; diff --git a/src/InputText/InputText.stories.jsx b/src/InputText/InputText.stories.jsx index 0dfb8a84be..719820e96a 100644 --- a/src/InputText/InputText.stories.jsx +++ b/src/InputText/InputText.stories.jsx @@ -2,12 +2,17 @@ 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 FontAwesomeStyles from 'font-awesome/css/font-awesome.min.css'; import Button from '../Button'; import Icon from '../Icon'; import InputText from './index'; import StatusAlert from '../StatusAlert'; +import README from './README.md'; class FocusInputWrapper extends React.Component { constructor(props) { @@ -44,7 +49,10 @@ class FocusInputWrapper extends React.Component { storiesOf('InputText', module) + .addDecorator((story, context) => withInfo()(story)(context)) .addDecorator(centered) + .addDecorator(checkA11y) + .addDecorator(withReadme(README)) .add('minimal usage', () => (