From 138bb67e3d4d785df5fbbbe8d721f7b6880d90a6 Mon Sep 17 00:00:00 2001 From: Adam Stankiewicz Date: Tue, 8 May 2018 17:46:05 -0400 Subject: [PATCH] feat(search-field): new search field component --- .../__snapshots__/Storyshots.test.js.snap | 4906 +++++++++++++++-- src/InputText/index.jsx | 1 + src/SearchField/README.md | 45 + src/SearchField/SearchField.scss | 77 + src/SearchField/SearchField.stories.jsx | 50 + src/SearchField/SearchField.test.jsx | 193 + src/SearchField/index.jsx | 196 + src/asInput/README.md | 4 +- src/asInput/asInput.test.jsx | 12 + src/asInput/index.jsx | 24 +- 10 files changed, 4942 insertions(+), 566 deletions(-) create mode 100644 src/SearchField/README.md create mode 100644 src/SearchField/SearchField.scss create mode 100644 src/SearchField/SearchField.stories.jsx create mode 100644 src/SearchField/SearchField.test.jsx create mode 100644 src/SearchField/index.jsx diff --git a/.storybook/__snapshots__/Storyshots.test.js.snap b/.storybook/__snapshots__/Storyshots.test.js.snap index d368fc367f..500869312d 100644 --- a/.storybook/__snapshots__/Storyshots.test.js.snap +++ b/.storybook/__snapshots__/Storyshots.test.js.snap @@ -697,11 +697,7 @@ exports[`Storyshots CheckBox basic usage 1`] = ` } >
`; -exports[`Storyshots StatusAlert Non-dismissible alert 1`] = ` +exports[`Storyshots SearchField basic usage 1`] = ` -`; - -exports[`Storyshots StatusAlert alert invoked via a button 1`] = ` -
- +
+
+ +
+ + + + +
+ +
+
+
+

+ SearchField +

+

+ basic usage +

+
+ +
+

+ Story Source +

+ 
+                

+                  

+                    
+                      <
+                      SearchField
+                    
+                    
+                      
+                         
+                        
+                          onSubmit
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                search-submitted()
+                              
+                              }
+                            
+                          
+                        
+                         
+                      
+                    
+                    
+                      />
+                    
+                  

+                

+                
+
+
+
+

+ Prop Types +

+
+

+ " + SearchField + " Component +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ property + + propType + + required + + default + + description +
+ onSubmit + + + + yes + + - + +
+ inputLabel + + + + - + + + " + Search: + " + + +
+ onBlur + + + + - + + + { + + onBlur() + + } + + +
+ onChange + + + + - + + + { + + onChange() + + } + + +
+ onFocus + + + + - + + + { + + onFocus() + + } + + +
+ placeholder + + + + - + + + " + + " + + +
+ screenReaderText + + + + - + + + { + + { + + clearButton + + : + + " + Clear search + " + + , + + searchButton + + : + + " + Submit search + " + + } + + } + + +
+ value + + + + - + + + " + + " + + +
+
+
+
+
+
+ + + +`; + +exports[`Storyshots SearchField with callbacks 1`] = ` +
+
+
+
+
+
+ +
+
+ +
+ +
+
+
+ +
+
+
+
+ +
+ +
+
+
+

+ SearchField +

+

+ with callbacks +

+
+ +
+

+ Story Source +

+ 
+                

+                  

+                    
+                      <
+                      SearchField
+                    
+                    
+                      
+                        
+                          

+                            
+                        
+                        
+                          onSubmit
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                search-submitted()
+                              
+                              }
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          onChange
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                value-changed()
+                              
+                              }
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          onFocus
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                search-focused()
+                              
+                              }
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          onBlur
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                search-blurred()
+                              
+                              }
+                            
+                          
+                        
+                        

+                      
+                    
+                    
+                      />
+                    
+                  

+                

+                
+
+
+
+

+ Prop Types +

+
+

+ " + SearchField + " Component +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ property + + propType + + required + + default + + description +
+ onSubmit + + + + yes + + - + +
+ inputLabel + + + + - + + + " + Search: + " + + +
+ onBlur + + + + - + + + { + + onBlur() + + } + + +
+ onChange + + + + - + + + { + + onChange() + + } + + +
+ onFocus + + + + - + + + { + + onFocus() + + } + + +
+ placeholder + + + + - + + + " + + " + + +
+ screenReaderText + + + + - + + + { + + { + + clearButton + + : + + " + Clear search + " + + , + + searchButton + + : + + " + Submit search + " + + } + + } + + +
+ value + + + + - + + + " + + " + + +
+
+
+
+
+
+
+
+
+`; + +exports[`Storyshots SearchField with custom label and screenreader text 1`] = ` +
+
+
+
+
+
+ +
+
+ +
+ +
+
+
+ +
+
+
+
+ +
+ +
+
+
+

+ SearchField +

+

+ with custom label and screenreader text +

+
+ +
+

+ Story Source +

+ 
+                

+                  

+                    
+                      <
+                      SearchField
+                    
+                    
+                      
+                         
+                        
+                          onSubmit
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                search-submitted()
+                              
+                              }
+                            
+                          
+                        
+                      
+                      
+                         
+                        
+                          inputLabel
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              Buscar:
+                              "
+                            
+                          
+                        
+                      
+                      
+                         
+                        
+                          screenReaderText
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                {
+                                
+                                  clearButton
+                                
+                                : 
+                                
+                                  "
+                                  Borrar búsqueda
+                                  "
+                                
+                                , 
+                                
+                                  searchButton
+                                
+                                : 
+                                
+                                  "
+                                  Enviar búsqueda
+                                  "
+                                
+                                }
+                              
+                              }
+                            
+                          
+                        
+                         
+                      
+                    
+                    
+                      />
+                    
+                  

+                

+                
+
+
+
+

+ Prop Types +

+
+

+ " + SearchField + " Component +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ property + + propType + + required + + default + + description +
+ onSubmit + + + + yes + + - + +
+ inputLabel + + + + - + + + " + Search: + " + + +
+ onBlur + + + + - + + + { + + onBlur() + + } + + +
+ onChange + + + + - + + + { + + onChange() + + } + + +
+ onFocus + + + + - + + + { + + onFocus() + + } + + +
+ placeholder + + + + - + + + " + + " + + +
+ screenReaderText + + + + - + + + { + + { + + clearButton + + : + + " + Clear search + " + + , + + searchButton + + : + + " + Submit search + " + + } + + } + + +
+ value + + + + - + + + " + + " + + +
+
+
+
+
+
+
+
+
+`; + +exports[`Storyshots SearchField with placeholder 1`] = ` +
+
+
+
+
+
+ +
+
+ +
+ +
+
+
+ +
+
+
+
+ +
+ +
+
+
+

+ SearchField +

+

+ with placeholder +

+
+ +
+

+ Story Source +

+ 
+                

+                  

+                    
+                      <
+                      SearchField
+                    
+                    
+                      
+                         
+                        
+                          onSubmit
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                search-submitted()
+                              
+                              }
+                            
+                          
+                        
+                      
+                      
+                         
+                        
+                          placeholder
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              Search
+                              "
+                            
+                          
+                        
+                         
+                      
+                    
+                    
+                      />
+                    
+                  

+                

+                
+
+
+
+

+ Prop Types +

+
+

+ " + SearchField + " Component +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ property + + propType + + required + + default + + description +
+ onSubmit + + + + yes + + - + +
+ inputLabel + + + + - + + + " + Search: + " + + +
+ onBlur + + + + - + + + { + + onBlur() + + } + + +
+ onChange + + + + - + + + { + + onChange() + + } + + +
+ onFocus + + + + - + + + { + + onFocus() + + } + + +
+ placeholder + + + + - + + + " + + " + + +
+ screenReaderText + + + + - + + + { + + { + + clearButton + + : + + " + Clear search + " + + , + + searchButton + + : + + " + Submit search + " + + } + + } + + +
+ value + + + + - + + + " + + " + + +
+
+
+
+
+
+
+
+
+`; + +exports[`Storyshots SearchField with value 1`] = ` +
+
+
+
+
+
+ +
+
+ +
+ + +
+
+
+ +
+
+
+
+ +
+ +
+
+
+

+ SearchField +

+

+ with value +

+
+ +
+

+ Story Source +

+ 
+                

+                  

+                    
+                      <
+                      SearchField
+                    
+                    
+                      
+                         
+                        
+                          onSubmit
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                search-submitted()
+                              
+                              }
+                            
+                          
+                        
+                      
+                      
+                         
+                        
+                          placeholder
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              Search
+                              "
+                            
+                          
+                        
+                      
+                      
+                         
+                        
+                          value
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              foobar
+                              "
+                            
+                          
+                        
+                         
+                      
+                    
+                    
+                      />
+                    
+                  

+                

+                
+
+
+
+

+ Prop Types +

+
+

+ " + SearchField + " Component +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ property + + propType + + required + + default + + description +
+ onSubmit + + + + yes + + - + +
+ inputLabel + + + + - + + + " + Search: + " + + +
+ onBlur + + + + - + + + { + + onBlur() + + } + + +
+ onChange + + + + - + + + { + + onChange() + + } + + +
+ onFocus + + + + - + + + { + + onFocus() + + } + + +
+ placeholder + + + + - + + + " + + " + + +
+ screenReaderText + + + + - + + + { + + { + + clearButton + + : + + " + Clear search + " + + , + + searchButton + + : + + " + Submit search + " + + } + + } + + +
+ value + + + + - + + + " + + " + + +
+
+
+
+
+
+
+
+
+`; + +exports[`Storyshots StatusAlert Non-dismissible alert 1`] = ` + +`; + +exports[`Storyshots StatusAlert alert invoked via a button 1`] = ` +
+