diff --git a/.storybook/__snapshots__/Storyshots.test.js.snap b/.storybook/__snapshots__/Storyshots.test.js.snap index 817297dcc9..4f8de5d1fa 100644 --- a/.storybook/__snapshots__/Storyshots.test.js.snap +++ b/.storybook/__snapshots__/Storyshots.test.js.snap @@ -45298,232 +45298,4995 @@ exports[`Storyshots SearchField with value 1`] = ` exports[`Storyshots StatusAlert Non-dismissible alert 1`] = ` -`; - -exports[`Storyshots StatusAlert alert invoked via a button 1`] = ` -
- - -
-`; - -exports[`Storyshots StatusAlert alert with a custom aria-label on the close button 1`] = ` - -`; - -exports[`Storyshots StatusAlert alert with a link 1`] = ` - -`; - -exports[`Storyshots StatusAlert basic usage 1`] = ` - -`; - -exports[`Storyshots StatusAlert danger alert 1`] = ` - -`; - -exports[`Storyshots StatusAlert informational alert 1`] = ` - -`; - -exports[`Storyshots StatusAlert success alert 1`] = ` - + + +`; + +exports[`Storyshots StatusAlert alert invoked via a button 1`] = ` +
+
+
+
+
+ + +
+
+ +
+ +
+
+
+

+ StatusAlert +

+

+ alert invoked via a button +

+
+ +
+

+ Story Source +

+ 
+                

+                  

+                    
+                      <
+                      StatusAlertWrapper
+                    
+                    
+                      
+                         
+                        
+                          alertType
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              success
+                              "
+                            
+                          
+                        
+                      
+                      
+                         
+                        
+                          dialog
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              Success! You triggered the alert!
+                              "
+                            
+                          
+                        
+                         
+                      
+                    
+                    
+                      />
+                    
+                  

+                

+                
+
+
+
+

+ Prop Types +

+
+

+ " + StatusAlertWrapper + " Component +

+ + + + + + + + + + + + + + + + + + + + + + + + +
+ property + + propType + + required + + default + + description +
+ alertType + + + + - + + + " + warning + " + + +
+ dialog + + + + yes + + - + +
+
+
+
+
+
+
+
+
+`; + +exports[`Storyshots StatusAlert alert with a custom aria-label on the close button 1`] = ` +
+
+
+
+ +
+ +
+ +
+
+
+

+ StatusAlert +

+

+ alert with a custom aria-label on the close button +

+
+ +
+

+ Story Source +

+ 
+                

+                  

+                    
+                      <
+                      StatusAlert
+                    
+                    
+                      
+                        
+                          

+                            
+                        
+                        
+                          alertType
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              info
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          dialog
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              Some very specific information.
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          onClose
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                onClose()
+                              
+                              }
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          open
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          closeButtonAriaLabel
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              Dismiss this very specific information.
+                              "
+                            
+                          
+                        
+                        

+                      
+                    
+                    
+                      />
+                    
+                  

+                

+                
+
+
+
+

+ Prop Types +

+
+

+ " + StatusAlert + " Component +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ property + + propType + + required + + default + + description +
+ alertType + + + + - + + + " + warning + " + + +
+ className + + + + - + + + { + + [ + ] + + } + + +
+ dialog + + + + yes + + - + +
+ dismissible + + + + - + + + { + + true + + } + + +
+ closeButtonAriaLabel + + + + - + + + " + Close + " + + +
+ onClose + + + + yes + + - + +
+ open + + + + - + + + { + + false + + } + + +
+
+
+
+
+
+
+
+
+`; + +exports[`Storyshots StatusAlert alert with a link 1`] = ` +
+
+
+
+ +
+ +
+ +
+
+
+

+ StatusAlert +

+

+ alert with a link +

+
+ +
+

+ Story Source +

+ 
+                

+                  

+                    
+                      <
+                      StatusAlert
+                    
+                    
+                      
+                        
+                          

+                            
+                        
+                        
+                          alertType
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              info
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

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

+                            
+                        
+                        
+                          onClose
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                onClose()
+                              
+                              }
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          open
+                        
+                        

+                      
+                    
+                    
+                      />
+                    
+                  

+                

+                
+
+
+
+

+ Prop Types +

+
+

+ " + StatusAlert + " Component +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ property + + propType + + required + + default + + description +
+ alertType + + + + - + + + " + warning + " + + +
+ className + + + + - + + + { + + [ + ] + + } + + +
+ dialog + + + + yes + + - + +
+ dismissible + + + + - + + + { + + true + + } + + +
+ closeButtonAriaLabel + + + + - + + + " + Close + " + + +
+ onClose + + + + yes + + - + +
+ open + + + + - + + + { + + false + + } + + +
+
+
+
+
+
+
+
+
+`; + +exports[`Storyshots StatusAlert basic usage 1`] = ` +
+
+
+
+ +
+ +
+ +
+
+
+

+ StatusAlert +

+

+ basic usage +

+
+ +
+

+ Story Source +

+ 
+                

+                  

+                    
+                      <
+                      StatusAlert
+                    
+                    
+                      
+                         
+                        
+                          dialog
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              You have a status alert!
+                              "
+                            
+                          
+                        
+                      
+                      
+                         
+                        
+                          onClose
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                onClose()
+                              
+                              }
+                            
+                          
+                        
+                      
+                      
+                         
+                        
+                          open
+                        
+                         
+                      
+                    
+                    
+                      />
+                    
+                  

+                

+                
+
+
+
+

+ Prop Types +

+
+

+ " + StatusAlert + " Component +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ property + + propType + + required + + default + + description +
+ alertType + + + + - + + + " + warning + " + + +
+ className + + + + - + + + { + + [ + ] + + } + + +
+ dialog + + + + yes + + - + +
+ dismissible + + + + - + + + { + + true + + } + + +
+ closeButtonAriaLabel + + + + - + + + " + Close + " + + +
+ onClose + + + + yes + + - + +
+ open + + + + - + + + { + + false + + } + + +
+
+
+
+
+
+
+
+
+`; + +exports[`Storyshots StatusAlert danger alert 1`] = ` +
+
+
+
+ +
+ +
+ +
+
+
+

+ StatusAlert +

+

+ danger alert +

+
+ +
+

+ Story Source +

+ 
+                

+                  

+                    
+                      <
+                      StatusAlert
+                    
+                    
+                      
+                        
+                          

+                            
+                        
+                        
+                          alertType
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              danger
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          dialog
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              Error!
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          onClose
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                onClose()
+                              
+                              }
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          open
+                        
+                        

+                      
+                    
+                    
+                      />
+                    
+                  

+                

+                
+
+
+
+

+ Prop Types +

+
+

+ " + StatusAlert + " Component +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ property + + propType + + required + + default + + description +
+ alertType + + + + - + + + " + warning + " + + +
+ className + + + + - + + + { + + [ + ] + + } + + +
+ dialog + + + + yes + + - + +
+ dismissible + + + + - + + + { + + true + + } + + +
+ closeButtonAriaLabel + + + + - + + + " + Close + " + + +
+ onClose + + + + yes + + - + +
+ open + + + + - + + + { + + false + + } + + +
+
+
+
+
+
+
+
+
+`; + +exports[`Storyshots StatusAlert informational alert 1`] = ` +
+
+
+
+ +
+ +
+ +
+
+
+

+ StatusAlert +

+

+ informational alert +

+
+ +
+

+ Story Source +

+ 
+                

+                  

+                    
+                      <
+                      StatusAlert
+                    
+                    
+                      
+                        
+                          

+                            
+                        
+                        
+                          alertType
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              info
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          dialog
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              Get some info here!
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          onClose
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                onClose()
+                              
+                              }
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          open
+                        
+                        

+                      
+                    
+                    
+                      />
+                    
+                  

+                

+                
+
+
+
+

+ Prop Types +

+
+

+ " + StatusAlert + " Component +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ property + + propType + + required + + default + + description +
+ alertType + + + + - + + + " + warning + " + + +
+ className + + + + - + + + { + + [ + ] + + } + + +
+ dialog + + + + yes + + - + +
+ dismissible + + + + - + + + { + + true + + } + + +
+ closeButtonAriaLabel + + + + - + + + " + Close + " + + +
+ onClose + + + + yes + + - + +
+ open + + + + - + + + { + + false + + } + + +
+
+
+
+
+
+
+
+
+`; + +exports[`Storyshots StatusAlert success alert 1`] = ` +
+
+
+
+ +
+ +
+ +
+
+
+

+ StatusAlert +

+

+ success alert +

+
+ +
+

+ Story Source +

+ 
+                

+                  

+                    
+                      <
+                      StatusAlert
+                    
+                    
+                      
+                        
+                          

+                            
+                        
+                        
+                          alertType
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              success
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          dialog
+                        
+                        
+                          =
+                          
+                            
+                              "
+                              Success!
+                              "
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          onClose
+                        
+                        
+                          =
+                          
+                            
+                              {
+                              
+                                onClose()
+                              
+                              }
+                            
+                          
+                        
+                      
+                      
+                        
+                          

+                            
+                        
+                        
+                          open
+                        
+                        

+                      
+                    
+                    
+                      />
+                    
+                  

+                

+                
+
+
+
+

+ Prop Types +

+
+

+ " + StatusAlert + " Component +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ property + + propType + + required + + default + + description +
+ alertType + + + + - + + + " + warning + " + + +
+ className + + + + - + + + { + + [ + ] + + } + + +
+ dialog + + + + yes + + - + +
+ dismissible + + + + - + + + { + + true + + } + + +
+ closeButtonAriaLabel + + + + - + + + " + Close + " + + +
+ onClose + + + + yes + + - + +
+ open + + + + - + + + { + + false + + } + + +
+
+
+
+
+
+
`; diff --git a/src/StatusAlert/StatusAlert.stories.jsx b/src/StatusAlert/StatusAlert.stories.jsx index 196bd7405c..7823fab912 100644 --- a/src/StatusAlert/StatusAlert.stories.jsx +++ b/src/StatusAlert/StatusAlert.stories.jsx @@ -3,10 +3,16 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import PropTypes from 'prop-types'; +import centered from '@storybook/addon-centered'; +import { checkA11y } from '@storybook/addon-a11y'; +import { withInfo } from '@storybook/addon-info'; +import { withReadme } from 'storybook-readme'; import StatusAlert from './index'; import Button from '../Button'; +import README from './README.md'; + class StatusAlertWrapper extends React.Component { constructor(props) { super(props); @@ -57,6 +63,10 @@ StatusAlertWrapper.defaultProps = { }; storiesOf('StatusAlert', module) + .addDecorator((story, context) => withInfo()(story)(context)) + .addDecorator(centered) + .addDecorator(checkA11y) + .addDecorator(withReadme(README)) .add('basic usage', () => (