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`] = ` +
+