diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawer.md b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawer.md
index 402cc4bc0a8..a454feb4d77 100644
--- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawer.md
+++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawer.md
@@ -23,720 +23,15 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
### Basic
-```js
-import React from 'react';
-import {
- Dropdown,
- DropdownItem,
- DropdownPosition,
- DropdownDirection,
- DropdownSeparator,
- KebabToggle,
- NotificationDrawer,
- NotificationDrawerBody,
- NotificationDrawerHeader,
- NotificationDrawerList,
- NotificationDrawerListItem,
- NotificationDrawerListItemBody,
- NotificationDrawerListItemHeader,
- Title
-} from '@patternfly/react-core';
-
-class BasicNotificationDrawer extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- isOpen: new Array(6).fill(false),
- isDrawerOpen: true
- };
- this.onDrawerClose = () => {
- this.setState({
- isDrawerOpen: false
- });
- };
- this.onToggle = index => isOpen => {
- newState = [...this.state.isOpen.slice(0, index), isOpen, ...this.state.isOpen.slice(index + 1)];
- this.setState({ isOpen: newState });
- };
- this.onSelect = event => {
- this.setState({ isOpen: new Array(6).fill(false) });
- };
- }
-
- render() {
- const [isOpen0, isOpen1, isOpen2, isOpen3, isOpen4, isOpen5, isOpen6] = this.state.isOpen;
- const dropdownItems = [
- Link,
-
- Action
- ,
- ,
-
- Disabled link
-
- ];
- return (
-
-
- }
- isOpen={isOpen0}
- isPlain
- dropdownItems={dropdownItems}
- id="basic-notification-0"
- position={DropdownPosition.right}
- />
-
-
-
-
-
- }
- isOpen={isOpen1}
- isPlain
- dropdownItems={dropdownItems}
- id="basic-notification-1"
- />
-
-
- This is an info notification description.
-
-
-
-
- }
- isOpen={isOpen2}
- isPlain
- dropdownItems={dropdownItems}
- id="basic-notification-2"
- />
-
-
- This is a danger notification description. This is a long description to show how the title will wrap if
- it is long and wraps to multiple lines.
-
-
-
-
- }
- isOpen={isOpen3}
- isPlain
- dropdownItems={dropdownItems}
- id="basic-notification-3"
- />
-
-
- This is a danger notification description. This is a long description to show how the title will wrap if
- it is long and wraps to multiple lines.
-
-
-
-
- }
- isOpen={isOpen4}
- isPlain
- dropdownItems={dropdownItems}
- id="basic-notification-4"
- />
-
-
- This is a warning notification description.
-
-
-
-
- }
- isOpen={isOpen5}
- isPlain
- dropdownItems={dropdownItems}
- id="basic-notification-5"
- />
-
-
- This is a success notification description.
-
-
-
-
- }
- isOpen={isOpen6}
- isPlain
- dropdownItems={dropdownItems}
- id="basic-notification-6"
- />
-
-
- This is a default notification description.
-
-
-
-
-
- );
- }
-}
+```ts file="NotificationDrawerBasic.tsx"
```
### Groups
-```js
-import React from 'react';
-import {
- Button,
- Dropdown,
- DropdownItem,
- DropdownPosition,
- DropdownDirection,
- DropdownSeparator,
- EmptyState,
- EmptyStateBody,
- EmptyStateIcon,
- EmptyStatePrimary,
- KebabToggle,
- NotificationDrawer,
- NotificationDrawerBody,
- NotificationDrawerHeader,
- NotificationDrawerGroup,
- NotificationDrawerGroupList,
- NotificationDrawerList,
- NotificationDrawerListItem,
- NotificationDrawerListItemBody,
- NotificationDrawerListItemHeader,
- Title
-} from '@patternfly/react-core';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-
-class GroupNotificationDrawer extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- isOpenMap: null,
- firstGroupExpanded: false,
- secondGroupExpanded: false,
- thirdGroupExpanded: true
- };
- this.onToggle = (id, isOpen) => {
- this.setState({
- isOpenMap: { [id]: isOpen }
- });
- };
- this.onSelect = event => {
- this.setState({
- isOpenMap: null
- });
- };
- this.toggleFirstDrawer = (event, value) => {
- this.setState({
- firstGroupExpanded: value
- });
- };
- this.toggleSecondDrawer = (event, value) => {
- this.setState({
- secondGroupExpanded: value
- });
- };
- this.toggleThirdDrawer = (event, value) => {
- this.setState({
- thirdGroupExpanded: value
- });
- };
- }
- render() {
- const { isOpenMap, firstGroupExpanded, secondGroupExpanded, thirdGroupExpanded } = this.state;
- const dropdownItems = [
- Link,
-
- Action
- ,
- ,
-
- Disabled link
-
- ];
- return (
-
-
- this.onToggle('groups-kebab-toggle-1', isOpen)} id="groups-kebab-toggle-1" />}
- isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-1']}
- isPlain
- dropdownItems={dropdownItems}
- id="grouped-notification-1"
- position={DropdownPosition.right}
- />
-
-
-
-
-
-
-
- this.onToggle('groups-notification-kebab-toggle-2', isOpen)} id="groups-kebab-toggle-2" />
- }
- isOpen={isOpenMap && isOpenMap['groups-notification-kebab-toggle-2']}
- isPlain
- dropdownItems={dropdownItems}
- id="grouped-notification-2"
- />
-
-
- This is an info notification description.
-
-
-
-
- this.onToggle('groups-kebab-toggle-3', isOpen)} id="groups-kebab-toggle-3" />
- }
- isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-3']}
- isPlain
- dropdownItems={dropdownItems}
- id="grouped-notification-3"
- />
-
-
- This is a danger notification description. This is a long description to show how the title will
- wrap if it is long and wraps to multiple lines.
-
-
-
-
- this.onToggle('groups-kebab-toggle-4', isOpen)} id="groups-kebab-toggle-4" />
- }
- isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-4']}
- isPlain
- dropdownItems={dropdownItems}
- id="grouped-notification-4"
- />
-
-
- This is a warning notification description.
-
-
-
-
- this.onToggle('groups-kebab-toggle-5', isOpen)} id="groups-kebab-toggle-5" />
- }
- isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-5']}
- isPlain
- dropdownItems={dropdownItems}
- id="grouped-notification-5"
- />
-
-
- This is a success notification description.
-
-
-
-
-
-
-
-
-
-
- No alerts found
-
-
- There are currently no critical alerts firing. There may be firing alerts of other severities or
- silenced critical alerts however.
-
-
-
-
-
-
-
-
-
-
-
- this.onToggle('groups-kebab-toggle-6', isOpen)} id="groups-kebab-toggle-6" />
- }
- isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-6']}
- isPlain
- dropdownItems={dropdownItems}
- id="grouped-notification-6"
- />
-
-
- This is an info notification description.
-
-
-
-
- this.onToggle('groups-kebab-toggle-7', isOpen)} id="groups-kebab-toggle-7" />
- }
- isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-7']}
- isPlain
- dropdownItems={dropdownItems}
- id="grouped-notification-7"
- />
-
-
- This is a danger notification description. This is a long description to show how the title will
- wrap if it is long and wraps to multiple lines.
-
-
-
-
- this.onToggle('groups-kebab-toggle-8', isOpen)} id="groups-kebab-toggle-8" />
- }
- isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-8']}
- isPlain
- dropdownItems={dropdownItems}
- id="grouped-notification-8"
- />
-
-
- This is a warning notification description.
-
-
-
-
- this.onToggle('groups-kebab-toggle-9', isOpen)} id="groups-kebab-toggle-9" />
- }
- isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-9']}
- isPlain
- dropdownItems={dropdownItems}
- id="grouped-notification-9"
- />
-
-
- This is a success notification description.
-
-
-
-
-
-
-
- );
- }
-}
+```ts file="NotificationDrawerGroups.tsx"
```
### Lightweight
-```js
-import React from 'react';
-import {
- Button,
- EmptyState,
- EmptyStateBody,
- EmptyStateIcon,
- EmptyStatePrimary,
- EmptyStateVariant,
- NotificationDrawer,
- NotificationDrawerBody,
- NotificationDrawerHeader,
- NotificationDrawerGroup,
- NotificationDrawerGroupList,
- NotificationDrawerList,
- NotificationDrawerListItem,
- NotificationDrawerListItemBody,
- NotificationDrawerListItemHeader,
- Title
-} from '@patternfly/react-core';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-
-class LightweightNotificationDrawerDemo extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- firstGroupExpanded: false,
- secondGroupExpanded: true,
- thirdGroupExpanded: false
- };
-
- this.onFocus = id => {
- if (id) {
- const element = document.getElementById(id);
- element.focus();
- }
- };
-
- this.toggleFirstDrawer = (event, value) => {
- this.setState({
- firstGroupExpanded: value
- });
- };
-
- this.toggleSecondDrawer = (event, value) => {
- this.setState({
- secondGroupExpanded: value
- });
- };
-
- this.toggleThirdDrawer = (event, value) => {
- this.setState({
- thirdGroupExpanded: value
- });
- };
- }
-
- render() {
- const { firstGroupExpanded, secondGroupExpanded, thirdGroupExpanded } = this.state;
-
- return (
-
-
-
-
-
-
-
-
-
- This is an info notification description.
-
-
-
-
-
- This is a danger notification description. This is a long description to show how the title will
- wrap if it is long and wraps to multiple lines.
-
-
-
-
-
- This is a warning notification description.
-
-
-
-
-
- This is a success notification description.
-
-
-
-
-
-
-
-
-
-
-
- This is an info notification description.
-
-
-
-
-
- This is a danger notification description. This is a long description to show how the title will
- wrap if it is long and wraps to multiple lines.
-
-
-
-
-
- This is a warning notification description.
-
-
-
-
-
- This is a success notification description.
-
-
-
-
-
-
-
-
-
- No alerts found
-
-
- There are currently no critical alerts firing. There may be firing alerts of other severities or
- silenced critical alerts however.
-
-
-
-
-
-
-
-
-
-
- );
- }
-}
+```ts file="NotificationDrawerLightweight.tsx"
```
diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx
new file mode 100644
index 00000000000..99deac637f4
--- /dev/null
+++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx
@@ -0,0 +1,185 @@
+import React from 'react';
+import {
+ Dropdown,
+ DropdownItem,
+ DropdownPosition,
+ DropdownDirection,
+ DropdownSeparator,
+ KebabToggle,
+ NotificationDrawer,
+ NotificationDrawerBody,
+ NotificationDrawerHeader,
+ NotificationDrawerList,
+ NotificationDrawerListItem,
+ NotificationDrawerListItemBody,
+ NotificationDrawerListItemHeader
+} from '@patternfly/react-core';
+
+export const NotificationDrawerBasic: React.FunctionComponent = () => {
+ const [isOpenMap, setIsOpenMap] = React.useState(new Array(7).fill(false));
+
+ const onToggle = (index: number) => (isOpen: boolean) => {
+ const newState = [...isOpenMap.slice(0, index), isOpen, ...isOpenMap.slice(index + 1)];
+ setIsOpenMap(newState);
+ };
+
+ const onSelect = () => {
+ setIsOpenMap(new Array(7).fill(false));
+ };
+
+ const onDrawerClose = () => {
+ setIsOpenMap(new Array(7).fill(false));
+ };
+
+ const [isOpen0, isOpen1, isOpen2, isOpen3, isOpen4, isOpen5, isOpen6] = isOpenMap;
+
+ const dropdownItems = [
+ Link,
+
+ Action
+ ,
+ ,
+
+ Disabled link
+
+ ];
+ return (
+
+
+ }
+ isOpen={isOpen0}
+ isPlain
+ dropdownItems={dropdownItems}
+ id="basic-notification-0"
+ position={DropdownPosition.right}
+ />
+
+
+
+
+
+ }
+ isOpen={isOpen1}
+ isPlain
+ dropdownItems={dropdownItems}
+ id="basic-notification-1"
+ />
+
+
+ This is an info notification description.
+
+
+
+
+ }
+ isOpen={isOpen2}
+ isPlain
+ dropdownItems={dropdownItems}
+ id="basic-notification-2"
+ />
+
+
+ This is a danger notification description. This is a long description to show how the title will wrap if
+ it is long and wraps to multiple lines.
+
+
+
+
+ }
+ isOpen={isOpen3}
+ isPlain
+ dropdownItems={dropdownItems}
+ id="basic-notification-3"
+ />
+
+
+ This is a danger notification description. This is a long description to show how the title will wrap if
+ it is long and wraps to multiple lines.
+
+
+
+
+ }
+ isOpen={isOpen4}
+ isPlain
+ dropdownItems={dropdownItems}
+ id="basic-notification-4"
+ />
+
+
+ This is a warning notification description.
+
+
+
+
+ }
+ isOpen={isOpen5}
+ isPlain
+ dropdownItems={dropdownItems}
+ id="basic-notification-5"
+ />
+
+
+ This is a success notification description.
+
+
+
+
+ }
+ isOpen={isOpen6}
+ isPlain
+ dropdownItems={dropdownItems}
+ id="basic-notification-6"
+ />
+
+
+ This is a default notification description.
+
+
+
+
+
+ );
+};
diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx
new file mode 100644
index 00000000000..68fdf25a061
--- /dev/null
+++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx
@@ -0,0 +1,337 @@
+import React from 'react';
+import {
+ Button,
+ Dropdown,
+ DropdownItem,
+ DropdownPosition,
+ DropdownDirection,
+ DropdownSeparator,
+ EmptyState,
+ EmptyStateBody,
+ EmptyStateIcon,
+ EmptyStatePrimary,
+ KebabToggle,
+ NotificationDrawer,
+ NotificationDrawerBody,
+ NotificationDrawerHeader,
+ NotificationDrawerGroup,
+ NotificationDrawerGroupList,
+ NotificationDrawerList,
+ NotificationDrawerListItem,
+ NotificationDrawerListItemBody,
+ NotificationDrawerListItemHeader,
+ Title,
+ EmptyStateVariant
+} from '@patternfly/react-core';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+
+export const NotificationDrawerGroups: React.FunctionComponent = () => {
+ const [firstGroupExpanded, setFirstGroupExpanded] = React.useState(false);
+ const [secondGroupExpanded, setSecondGroupExpanded] = React.useState(true);
+ const [thirdGroupExpanded, setThirdGroupExpanded] = React.useState(false);
+ const [isOpenMap, setIsOpenMap] = React.useState({});
+
+ const onToggle = (id: string, isOpen: boolean) => {
+ setIsOpenMap({ [id]: isOpen });
+ };
+
+ const onSelect = () => {
+ setIsOpenMap({});
+ };
+
+ const toggleFirstDrawer = (_event: any, value: boolean) => {
+ setFirstGroupExpanded(value);
+ setSecondGroupExpanded(false);
+ setThirdGroupExpanded(false);
+ };
+
+ const toggleSecondDrawer = (_event: any, value: boolean) => {
+ setSecondGroupExpanded(value);
+ setFirstGroupExpanded(false);
+ setThirdGroupExpanded(false);
+ };
+
+ const toggleThirdDrawer = (_event: any, value: boolean) => {
+ setThirdGroupExpanded(value);
+ setSecondGroupExpanded(false);
+ setFirstGroupExpanded(false);
+ };
+
+ const dropdownItems = [
+ Link,
+
+ Action
+ ,
+ ,
+
+ Disabled link
+
+ ];
+
+ return (
+
+
+ onToggle('groups-kebab-toggle-1', isOpen)} id="groups-kebab-toggle-1" />
+ }
+ isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-1']}
+ isPlain
+ dropdownItems={dropdownItems}
+ id="grouped-notification-1"
+ position={DropdownPosition.right}
+ />
+
+
+
+
+
+
+
+ onToggle('groups-kebab-toggle-2', isOpen)}
+ id="groups-kebab-toggle-2"
+ />
+ }
+ isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-2']}
+ isPlain
+ dropdownItems={dropdownItems}
+ id="grouped-notification-2"
+ />
+
+
+ This is an info notification description.
+
+
+
+
+ onToggle('groups-kebab-toggle-3', isOpen)}
+ id="groups-kebab-toggle-3"
+ />
+ }
+ isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-3']}
+ isPlain
+ dropdownItems={dropdownItems}
+ id="grouped-notification-3"
+ />
+
+
+ This is a danger notification description. This is a long description to show how the title will wrap
+ if it is long and wraps to multiple lines.
+
+
+
+
+ onToggle('groups-kebab-toggle-4', isOpen)}
+ id="groups-kebab-toggle-4"
+ />
+ }
+ isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-4']}
+ isPlain
+ dropdownItems={dropdownItems}
+ id="grouped-notification-7"
+ />
+
+
+ This is a warning notification description.
+
+
+
+
+ onToggle('groups-kebab-toggle-5', isOpen)}
+ id="groups-kebab-toggle-5"
+ />
+ }
+ isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-5']}
+ isPlain
+ dropdownItems={dropdownItems}
+ id="grouped-notification-5"
+ />
+
+
+ This is a success notification description.
+
+
+
+
+
+
+
+
+ onToggle('groups-kebab-toggle-6', isOpen)}
+ id="groups-kebab-toggle-6"
+ />
+ }
+ isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-6']}
+ isPlain
+ dropdownItems={dropdownItems}
+ id="grouped-notification-6"
+ />
+
+
+ This is an info notification description.
+
+
+
+
+ onToggle('groups-kebab-toggle-7', isOpen)}
+ id="groups-kebab-toggle-7"
+ />
+ }
+ isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-7']}
+ isPlain
+ dropdownItems={dropdownItems}
+ id="gropued-notification-7"
+ />
+
+
+ This is a danger notification description. This is a long description to show how the title will wrap
+ if it is long and wraps to multiple lines.
+
+
+
+
+ onToggle('groups-kebab-toggle-8', isOpen)}
+ id="groups-kebab-toggle-8"
+ />
+ }
+ isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-8']}
+ isPlain
+ dropdownItems={dropdownItems}
+ id="grouped-notification-8"
+ />
+
+
+ This is a warning notification description.
+
+
+
+
+ onToggle('groups-kebab-toggle-9', isOpen)}
+ id="groups-kebab-toggle-9"
+ />
+ }
+ isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-9']}
+ isPlain
+ dropdownItems={dropdownItems}
+ id="grouped-notification-9"
+ />
+
+
+ This is a success notification description.
+
+
+
+
+
+
+
+
+
+ No alerts found
+
+
+ There are currently no critical alerts firing. There may be firing alerts of other severities or
+ silenced critical alerts however.
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx
new file mode 100644
index 00000000000..9da5d5324e0
--- /dev/null
+++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx
@@ -0,0 +1,185 @@
+import React from 'react';
+import {
+ Button,
+ EmptyState,
+ EmptyStateBody,
+ EmptyStateIcon,
+ EmptyStatePrimary,
+ EmptyStateVariant,
+ NotificationDrawer,
+ NotificationDrawerBody,
+ NotificationDrawerHeader,
+ NotificationDrawerGroup,
+ NotificationDrawerGroupList,
+ NotificationDrawerList,
+ NotificationDrawerListItem,
+ NotificationDrawerListItemBody,
+ NotificationDrawerListItemHeader,
+ Title
+} from '@patternfly/react-core';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+
+export const NotificationDrawerLightweight: React.FunctionComponent = () => {
+ const [firstGroupExpanded, setFirstGroupExpanded] = React.useState(false);
+ const [secondGroupExpanded, setSecondGroupExpanded] = React.useState(true);
+ const [thirdGroupExpanded, setThirdGroupExpanded] = React.useState(false);
+
+ const toggleFirstDrawer = (_event: any, value: boolean) => {
+ setFirstGroupExpanded(value);
+ setSecondGroupExpanded(false);
+ setThirdGroupExpanded(false);
+ };
+
+ const toggleSecondDrawer = (_event: any, value: boolean) => {
+ setSecondGroupExpanded(value);
+ setFirstGroupExpanded(false);
+ setThirdGroupExpanded(false);
+ };
+
+ const toggleThirdDrawer = (_event: any, value: boolean) => {
+ setThirdGroupExpanded(value);
+ setSecondGroupExpanded(false);
+ setFirstGroupExpanded(false);
+ };
+
+ const onDrawerClose = () => {
+ // do something cool in a callback
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+ This is an info notification description.
+
+
+
+
+
+ This is a danger notification description. This is a long description to show how the title will wrap
+ if it is long and wraps to multiple lines.
+
+
+
+
+
+ This is a warning notification description.
+
+
+
+
+
+ This is a success notification description.
+
+
+
+
+
+
+
+
+
+
+
+ This is an info notification description.
+
+
+
+
+
+ This is a danger notification description. This is a long description to show how the title will wrap
+ if it is long and wraps to multiple lines.
+
+
+
+
+
+ This is a warning notification description.
+
+
+
+
+
+ This is a success notification description.
+
+
+
+
+
+
+
+
+
+ No alerts found
+
+
+ There are currently no critical alerts firing. There may be firing alerts of other severities or
+ silenced critical alerts however.
+
+
+
+
+
+
+
+
+
+
+ );
+};