Alerts are used the tell the user important information related to their current activity, or to signal a change has occurred to one of their items.
TODO/Considerations
- CDL does not specify animations, how should alerts appear?
- Probably needs to have its own state
- How to manage delay? Allow custom delay?
Props
alertType: string required
content: either element or string required
dismissable: boolean defaults to true
<Alert alertType="alert" dismissable={ true } text={ <div>Text within a div passed as a prop <a href="/">link</a></div> } /><br />
<Alert alertType="warning" dismissable={ false } text="Plain old text" /><br />
<Alert alertType="error" dismissable={ true } text={ <div>Error text <a href="/">link</a></div> } /><br />
<Alert alertType="success" dismissable={ true } text={ <div>Success text <a href="/">link</a></div> } /><br />
[IMAGE]
- Text buttons
- Button group
- Tab group
- How to use the Button Element to improve Accessibility • RachieVee: Rachel's Blog
- Building Accessible Buttons with ARIA
- Button Examples | WAI-ARIA Authoring Practices 1.1
- Add Github page for demo https://github.com/tschaub/gh-pages
Soon
How to get a development env running
npm install
cd demo
npm start
Open 0.0.0.0:8080 to view demo server
npm run test
Run the Demo locally for usage examples or view the demo online
- styled-components - For modular styling
- randomatic - For generating unique tag IDs for
ariaLabelledBy
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
- Jeff Printy - Initial work
- Phillip Jones - Contributing