diff --git a/src/components/Notification/Notification.jsx b/src/components/Notification/Notification.jsx index 4c67d51597..fcb1f0ad46 100644 --- a/src/components/Notification/Notification.jsx +++ b/src/components/Notification/Notification.jsx @@ -10,6 +10,9 @@ const ErrorIcon = () => ( ); +/** + * A banner to highlight important notices. + */ const Notification = ({ className, variant, children, ...rest }) => { if (className) { warn('Notification', 'Custom CSS classes are deprecated. This component does not support custom styling.'); @@ -37,13 +40,23 @@ const Notification = ({ className, variant, children, ...rest }) => { }; Notification.propTypes = { + /** + * (DEPRECATED) Additional css classes + */ className: PropTypes.string, + /** + * Adds a background color variation to the component + */ variant: PropTypes.oneOf([ 'instructional', 'branded', 'success', 'error' ]), + /** + * Content to be displayed within the Notification banner. Can be text, any HTML element, + * or any component. + */ children: PropTypes.node.isRequired }; diff --git a/src/components/Notification/Notification.md b/src/components/Notification/Notification.md new file mode 100644 index 0000000000..53a8a8ad63 --- /dev/null +++ b/src/components/Notification/Notification.md @@ -0,0 +1,38 @@ + +## Minimal usage + +``` +Lorem ipsum dolor sit amer. +``` +## Branded + +``` +Lorem ipsum dolor sit amer. +``` + +## Success + +Use to denote a successful transaction. + +``` +Lorem ipsum dolor sit amer. +``` + +## Error + +Use to denote an error or a failed transaction. + +``` + +

Looks like our registration system is temporarily down. You'll need to come back another time to register for My Account.

+

Lorem ipsum dolor sit amer.

+
+``` + +## Instructional + +This is the same styling as default. + +``` +Lorem ipsum dolor sit amer. +```