diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-badge/img/badge-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-badge/img/badge-elements.svg new file mode 100644 index 0000000000..b09e2ad57f --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-badge/img/badge-elements.svg @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-badge/notification-badge.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-badge/notification-badge.md index b3fea7400f..8b1f7ce9a8 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-badge/notification-badge.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-badge/notification-badge.md @@ -4,13 +4,17 @@ section: components related: ['Notification drawer', 'Page'] --- +import '../components.css'; + ## Elements -basic notification drawer +
+![Elements of a notification badge.](./img/badge-elements.svg) +
1. **Icon:** The notification badge will be located in the masthead and display the 'fa-bell' icon in it's default state. Clicking the icon (or anywhere within the badge) will toggle the notification drawer open and closed. -2. **Background:** In the default state, the background will change color to indicate that the notification drawer is opened. Optionally the background color can also convey status. +2. **Border:** In the default state, the border will change color to indicate that the notification drawer is opened. 3. **Unread status (optional):** Setting the background color to blue will indicate that one or more unread notifications are present in the drawer. diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/img/drawer-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/img/drawer-elements.svg new file mode 100644 index 0000000000..1dd0357f56 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/img/drawer-elements.svg @@ -0,0 +1,118 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/img/drawer-placement.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/img/drawer-placement.svg new file mode 100644 index 0000000000..4117b8d2e1 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/img/drawer-placement.svg @@ -0,0 +1,98 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/img/grouped-drawer-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/img/grouped-drawer-elements.svg new file mode 100644 index 0000000000..ee9a149aa7 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/img/grouped-drawer-elements.svg @@ -0,0 +1,131 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/notification-drawer.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/notification-drawer.md index 53fad81d5a..2d0cbc332b 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/notification-drawer.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/notification-drawer.md @@ -4,11 +4,15 @@ section: components related: ['Notification drawer', 'Notification badge', 'Drawer'] --- +import '../components.css'; + ## Elements ### Basic notification drawer -basic notification drawer +
+![Elements of a basic notification drawer.](./img/drawer-elements.svg) +
1. **Header:** The header contains the title of the drawer (default to “Notifications”). @@ -32,7 +36,9 @@ related: ['Notification drawer', 'Notification badge', 'Drawer'] ### Grouped notification drawer If you want to sort notifications by category, collapsible headers may be used to group content. The grouped notification drawer utilizes an accordion pattern where only one category will be opened at a time. By default, the first category will be opened, although if the drawer is closed and reopened, the prior state should persist. -grouped notification drawer +
+![Elements of a grouped notification drawer.](./img/grouped-drawer-elements.svg) +
1. **Notification group:** Notifications can be grouped by category. You may have any number of categories, however more than 3-4 categories is not recommended. Each category header will have a name. Clicking on the header will expand the category (and collapse the current category). @@ -79,8 +85,9 @@ In cases where it makes sense to immediately notify the user about a change in s ## Placement -grouped notification drawer - +
+![Example showing the placement of a notification drawer.](./img/drawer-placement.svg) +
1. **Notification badge:** Whenever the notification drawer is used, a [notification badge](/components/notification-badge) must be placed in the masthead. Clicking on the badge will toggle the drawer open or closed. Depending on options supported in the application, the badge can also be used to display the number of notifications in the drawer and whether there are unread or critical notifications needing attention. See the [notification badge](/components/notification-badge) usage guidelines for more information about these options.