@patternfly/react-core 5.1.1-prerelease.9 → 5.2.0-prerelease.1

package/src/demos/DashboardHeader.tsx

@@ -0,0 +1,198 @@
+import React, { useState } from 'react';
+import {
+  Avatar,
+  Brand,
+  Button,
+  ButtonVariant,
+  Divider,
+  Dropdown,
+  DropdownGroup,
+  DropdownItem,
+  DropdownList,
+  Masthead,
+  MastheadToggle,
+  MastheadMain,
+  MastheadBrand,
+  MastheadContent,
+  MenuToggle,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+  PageToggleButton
+} from '../components';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
+
+interface DashboardHeaderProps {
+  /** Render custom notification badge */
+  notificationBadge?: React.ReactNode;
+}
+
+export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBadge }) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
+
+  const kebabDropdownItems = (
+    <>
+      <DropdownItem>
+        <CogIcon /> Settings
+      </DropdownItem>
+      <DropdownItem>
+        <HelpIcon /> Help
+      </DropdownItem>
+    </>
+  );
+
+  const userDropdownItems = (
+    <>
+      <DropdownItem key="group 2 profile">My profile</DropdownItem>
+      <DropdownItem key="group 2 user">User management</DropdownItem>
+      <DropdownItem key="group 2 logout">Logout</DropdownItem>
+    </>
+  );
+
+  const onDropdownToggle = () => {
+    setIsDropdownOpen(!isDropdownOpen);
+  };
+
+  const onDropdownSelect = () => {
+    setIsDropdownOpen(false);
+  };
+
+  const onKebabDropdownToggle = () => {
+    setIsKebabDropdownOpen(!isKebabDropdownOpen);
+  };
+
+  const onKebabDropdownSelect = () => {
+    setIsKebabDropdownOpen(false);
+  };
+
+  const onFullKebabToggle = () => {
+    setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);
+  };
+
+  const onFullKebabSelect = () => {
+    setIsFullKebabDropdownOpen(false);
+  };
+
+  return (
+    <Masthead>
+      <MastheadToggle>
+        <PageToggleButton variant="plain" aria-label="Global navigation">
+          <BarsIcon />
+        </PageToggleButton>
+      </MastheadToggle>
+      <MastheadMain>
+        <MastheadBrand>
+          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+        </MastheadBrand>
+      </MastheadMain>
+      <MastheadContent>
+        <Toolbar id="toolbar" isFullHeight isStatic>
+          <ToolbarContent>
+            <ToolbarGroup
+              variant="icon-button-group"
+              align={{ default: 'alignRight' }}
+              spacer={{ default: 'spacerNone', md: 'spacerMd' }}
+            >
+              {notificationBadge ?? (
+                <ToolbarItem>
+                  <Button
+                    aria-label="Notifications"
+                    variant={ButtonVariant.plain}
+                    icon={<BellIcon />}
+                    onClick={() => {}}
+                  />
+                </ToolbarItem>
+              )}
+              <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
+                <ToolbarItem>
+                  <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
+                </ToolbarItem>
+                <ToolbarItem>
+                  <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
+                </ToolbarItem>
+              </ToolbarGroup>
+              <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
+                <Dropdown
+                  isOpen={isKebabDropdownOpen}
+                  onSelect={onKebabDropdownSelect}
+                  onOpenChange={setIsKebabDropdownOpen}
+                  popperProps={{ position: 'right' }}
+                  toggle={(toggleRef: React.RefObject<any>) => (
+                    <MenuToggle
+                      ref={toggleRef}
+                      isExpanded={isKebabDropdownOpen}
+                      onClick={onKebabDropdownToggle}
+                      variant="plain"
+                      aria-label="Settings and help"
+                    >
+                      <EllipsisVIcon aria-hidden="true" />
+                    </MenuToggle>
+                  )}
+                >
+                  <DropdownList>{kebabDropdownItems}</DropdownList>
+                </Dropdown>
+              </ToolbarItem>
+              <ToolbarItem visibility={{ md: 'hidden' }}>
+                <Dropdown
+                  isOpen={isFullKebabDropdownOpen}
+                  onSelect={onFullKebabSelect}
+                  onOpenChange={setIsFullKebabDropdownOpen}
+                  popperProps={{ position: 'right' }}
+                  toggle={(toggleRef: React.RefObject<any>) => (
+                    <MenuToggle
+                      ref={toggleRef}
+                      isExpanded={isFullKebabDropdownOpen}
+                      onClick={onFullKebabToggle}
+                      variant="plain"
+                      aria-label="Toolbar menu"
+                    >
+                      <EllipsisVIcon aria-hidden="true" />
+                    </MenuToggle>
+                  )}
+                >
+                  <DropdownGroup key="group 2" aria-label="User actions">
+                    <DropdownList>{userDropdownItems}</DropdownList>
+                  </DropdownGroup>
+                  <Divider />
+                  <DropdownList>{kebabDropdownItems}</DropdownList>
+                </Dropdown>
+              </ToolbarItem>
+            </ToolbarGroup>
+            <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
+              <Dropdown
+                isOpen={isDropdownOpen}
+                onSelect={onDropdownSelect}
+                onOpenChange={setIsDropdownOpen}
+                popperProps={{ position: 'right' }}
+                toggle={(toggleRef: React.RefObject<any>) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    isExpanded={isDropdownOpen}
+                    onClick={onDropdownToggle}
+                    icon={<Avatar src={imgAvatar} alt="" />}
+                    isFullHeight
+                  >
+                    Ned Username
+                  </MenuToggle>
+                )}
+              >
+                <DropdownList>{userDropdownItems}</DropdownList>
+              </Dropdown>
+            </ToolbarItem>
+          </ToolbarContent>
+        </Toolbar>
+      </MastheadContent>
+    </Masthead>
+  );
+};
+DashboardHeader.displayName = 'DashboardHeader';

package/src/demos/DashboardWrapper.tsx

@@ -0,0 +1,128 @@
+import React, { useState } from 'react';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  Nav,
+  NavItem,
+  NavList,
+  Page,
+  PageProps,
+  PageSection,
+  PageSidebar,
+  PageSidebarBody,
+  SkipToContent,
+  Text,
+  TextContent
+} from '../components';
+import { DashboardHeader } from './DashboardHeader';
+
+interface DashboardWrapperProps extends Omit<PageProps, 'ref'> {
+  /** Programmatically manage if the sidebar nav is shown */
+  sidebarNavOpen?: boolean;
+  /** Flag to render sample breadcrumb if custom breadcrumb not passed */
+  hasDefaultBreadcrumb?: boolean;
+  /** Flag to render sample page title if custom title not passed */
+  hasPageTemplateTitle?: boolean;
+}
+
+export const DashboardBreadcrumb = (
+  <Breadcrumb>
+    <BreadcrumbItem>Section home</BreadcrumbItem>
+    <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+    <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+    <BreadcrumbItem to="#" isActive>
+      Section landing
+    </BreadcrumbItem>
+  </Breadcrumb>
+);
+
+const PageTemplateTitle = (
+  <PageSection variant="light">
+    <TextContent>
+      <Text component="h1">Main title</Text>
+      <Text component="p">This is a full page demo.</Text>
+    </TextContent>
+  </PageSection>
+);
+
+export const DashboardWrapper: React.FC<DashboardWrapperProps> = ({
+  children,
+  mainContainerId,
+  breadcrumb,
+  header,
+  sidebar,
+  sidebarNavOpen,
+  onPageResize,
+  hasDefaultBreadcrumb,
+  notificationDrawer,
+  isNotificationDrawerExpanded,
+  hasPageTemplateTitle,
+  ...pageProps
+}: DashboardWrapperProps) => {
+  const [activeItem, setActiveItem] = useState(1);
+
+  const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, result: any) => {
+    setActiveItem(result.itemId);
+  };
+
+  let renderedBreadcrumb;
+  if (!hasDefaultBreadcrumb) {
+    renderedBreadcrumb = breadcrumb ?? DashboardBreadcrumb;
+  }
+
+  const PageNav = (
+    <Nav onSelect={onNavSelect} aria-label="Nav">
+      <NavList>
+        <NavItem itemId={0} isActive={activeItem === 0} to="#system-panel">
+          System panel
+        </NavItem>
+        <NavItem itemId={1} isActive={activeItem === 1} to="#policy">
+          Policy
+        </NavItem>
+        <NavItem itemId={2} isActive={activeItem === 2} to="#auth">
+          Authentication
+        </NavItem>
+        <NavItem itemId={3} isActive={activeItem === 3} to="#network">
+          Network services
+        </NavItem>
+        <NavItem itemId={4} isActive={activeItem === 4} to="#server">
+          Server
+        </NavItem>
+      </NavList>
+    </Nav>
+  );
+
+  const _sidebar = (
+    <PageSidebar isSidebarOpen={sidebarNavOpen || false}>
+      <PageSidebarBody>{PageNav}</PageSidebarBody>
+    </PageSidebar>
+  );
+
+  const PageSkipToContent = (
+    <SkipToContent href={`#${mainContainerId ?? 'main-content-page-layout-default-nav'}`}>
+      Skip to content
+    </SkipToContent>
+  );
+
+  return (
+    <Page
+      header={header ?? <DashboardHeader />}
+      sidebar={sidebar ?? _sidebar}
+      isManagedSidebar
+      skipToContent={PageSkipToContent}
+      breadcrumb={renderedBreadcrumb}
+      mainContainerId={mainContainerId ?? 'main-content-page-layout-default-nav'}
+      notificationDrawer={notificationDrawer}
+      isNotificationDrawerExpanded={isNotificationDrawerExpanded}
+      {...(typeof onPageResize === 'function' && {
+        onPageResize: (event: MouseEvent | TouchEvent | React.KeyboardEvent<Element>, resizeObject: any) =>
+          onPageResize(event, resizeObject)
+      })}
+      {...pageProps}
+    >
+      {hasPageTemplateTitle && PageTemplateTitle}
+      {children}
+    </Page>
+  );
+};
+DashboardWrapper.displayName = 'DashboardWrapper';

package/src/demos/DataListDemo.md

@@ -35,7 +35,8 @@ import {
   ToolbarExpandIconWrapper,
   ToolbarContent,
   SearchInput,
-  Tooltip
+  Tooltip,
+  Icon
 } from '@patternfly/react-core';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
@@ -123,9 +124,11 @@ class ExpandableDataList extends React.Component {
                     variant="plain"
                     aria-label={this.state.allExpanded ? 'Collapse all rows' : 'Expand all rows'}
                   >
-                    <ToolbarExpandIconWrapper>
-                      <AngleRightIcon />
-                    </ToolbarExpandIconWrapper>
+                    <Icon shouldMirrorRTL>
+                      <ToolbarExpandIconWrapper>
+                        <AngleRightIcon />
+                      </ToolbarExpandIconWrapper>
+                    </Icon>
                   </Button>
                 </Tooltip>
               </ToolbarItem>

package/src/demos/JumpLinks.md

@@ -3,8 +3,6 @@ id: Jump links
 section: components
 ---
 
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-
 ## Demos
 
 JumpLinks has a scrollspy built-in to make your implementation easier. When implementing JumpLinks be sure to:
@@ -33,7 +31,7 @@ import {
   TextContent,
   getResizeObserver
 } from '@patternfly/react-core';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 ScrollspyH2 = () => {
   const headings = [1, 2, 3, 4, 5];

package/src/demos/Nav.md

@@ -3,8 +3,6 @@ id: Navigation
 section: components
 ---
 
-import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -37,8 +35,8 @@ import {
   TextContent,
   Text
 } from '@patternfly/react-core';
-import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
+import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
 
 class PageLayoutDefaultNav extends React.Component {
   constructor(props) {
@@ -141,7 +139,7 @@ import {
   TextContent,
   Text
 } from '@patternfly/react-core';
-import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
+import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
 
 class PageLayoutGroupsNav extends React.Component {
   constructor(props) {
@@ -255,8 +253,8 @@ import {
   TextContent,
   Text
 } from '@patternfly/react-core';
-import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
+import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
 
 class PageLayoutExpandableNav extends React.Component {
   constructor(props) {
@@ -400,7 +398,6 @@ import {
   ToolbarGroup,
   ToolbarItem
 } from '@patternfly/react-core';
-import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -408,6 +405,7 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
+import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 class PageLayoutHorizontalNav extends React.Component {
   constructor(props) {
@@ -659,8 +657,8 @@ import {
   TextContent,
   Text
 } from '@patternfly/react-core';
-import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
+import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
 
 class VerticalNavWithSubnav extends React.Component {
   constructor(props) {
@@ -822,7 +820,6 @@ import {
   ToolbarGroup,
   ToolbarItem
 } from '@patternfly/react-core';
-import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -831,6 +828,7 @@ import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
+import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 class HorizontalNavWithSubnav extends React.Component {
   constructor(props) {
@@ -1127,8 +1125,8 @@ import {
   TextContent,
   Text
 } from '@patternfly/react-core';
-import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
+import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
 
 class PageLayoutTertiaryNav extends React.Component {
   constructor(props) {
@@ -1231,7 +1229,7 @@ import {
   TextContent,
   Text
 } from '@patternfly/react-core';
-import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
+import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
 
 class PageLayoutLightNav extends React.Component {
   constructor(props) {
@@ -1648,7 +1646,7 @@ import {
   MenuList,
   MenuItem
 } from '@patternfly/react-core';
-import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
+import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
 
 class VerticalPage extends React.Component {
   constructor(props) {

package/src/demos/PrimaryDetail.md

@@ -23,15 +23,13 @@ import swaggerIcon from './assets/camel-swagger-java_200x150.png';
 import azureIcon from './assets/FuseConnector_Icons_AzureServices.png';
 import restIcon from './assets/FuseConnector_Icons_REST.png';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import { data } from '@patternfly/react-core/src/demos/Card/CardData.jsx';
-import DashboardWrapper from './examples/DashboardWrapper';
+import { data } from '@patternfly/react-core/src/demos/Card/examples/CardData.jsx';
 
 ## Demos
 
 ### Primary-detail full page
 
 ```js file="./examples/PrimaryDetail/PrimaryDetailFullPage.tsx" isFullscreen
-
 ```
 
 ### Primary-detail content padding
@@ -78,7 +76,6 @@ import {
   ToolbarItem,
   ToolbarContent
 } from '@patternfly/react-core';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
 import pfIcon from './assets/pf-logo-small.svg';
 import activeMQIcon from './assets/activemq-core_200x150.png';
@@ -91,7 +88,8 @@ import swaggerIcon from './assets/camel-swagger-java_200x150.png';
 import azureIcon from './assets/FuseConnector_Icons_AzureServices.png';
 import restIcon from './assets/FuseConnector_Icons_REST.png';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import { data } from '@patternfly/react-core/src/demos/Card/CardData.jsx';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { data } from '@patternfly/react-core/src/demos/Card/examples/CardData.jsx';
 
 class PrimaryDetailCardView extends React.Component {
   constructor(props) {
@@ -663,7 +661,7 @@ import {
   TextInput,
   Title
 } from '@patternfly/react-core';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 class PrimaryDetailSimpleListInCard extends React.Component {
   constructor(props) {
@@ -825,7 +823,7 @@ import {
   TextContent,
   Title
 } from '@patternfly/react-core';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 class PrimaryDetailDataListInCard extends React.Component {
   constructor(props) {

package/src/demos/Tabs.md

@@ -3,7 +3,6 @@ id: Tabs
 section: components
 ---
 
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
@@ -40,9 +39,9 @@ import {
   Flex,
   FlexItem
 } from '@patternfly/react-core';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 TabsOpenDemo = () => {
   const [activeTabKey, setActiveTabKey] = React.useState(0);
@@ -230,9 +229,9 @@ import {
   Flex,
   FlexItem
 } from '@patternfly/react-core';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 TabsOpenWithSecondaryTabsDemo = () => {
   const [activeTabKey, setActiveTabKey] = React.useState(0);

package/src/demos/Toolbar.md

@@ -3,7 +3,6 @@ id: Toolbar
 section: components
 ---
 
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import PauseIcon from '@patternfly/react-icons/dist/esm/icons/pause-icon';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
@@ -43,8 +42,6 @@ import {
   DropdownList,
   Divider
 } from '@patternfly/react-core';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-
 import PauseIcon from '@patternfly/react-icons/dist/esm/icons/pause-icon';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
@@ -53,6 +50,7 @@ import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 class ConsoleLogViewerToolbar extends React.Component {
   constructor(props) {

package/src/demos/Wizard/WizardDemo.md

@@ -6,7 +6,6 @@ source: react-demos
 
 import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
 ## Demos
 
@@ -26,7 +25,7 @@ import {
   WizardHeader,
   WizardStep
 } from '@patternfly/react-core';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 class WizardInModalDemo extends React.Component {
   constructor(props) {
@@ -353,7 +352,7 @@ class WizardModalWithDrawerInfoStepDemo extends React.Component {
 ```js isFullscreen
 import React from 'react';
 import { PageSection, PageSectionTypes, PageSectionVariants, Wizard, WizardStep } from '@patternfly/react-core';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 class WizardFullPage extends React.Component {
   constructor(props) {

package/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx

@@ -33,8 +33,8 @@ import {
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import DashboardWrapper from '../DashboardWrapper';
-import DashboardHeader from '../DashboardHeader';
+import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 interface NotificationProps {
   title: string;

package/src/demos/examples/BackToTop/BackToTopNameDemo.tsx

@@ -12,7 +12,7 @@ import {
   Page,
   Switch
 } from '@patternfly/react-core';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 export const Name = () => {
   const [isAlwaysVisible, setIsAlwaysVisible] = React.useState(false);

package/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js

@@ -19,7 +19,7 @@ import {
   TextContent,
   getResizeObserver
 } from '@patternfly/react-core';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
 export const JumpLinksWithDrawer = () => {
   const headings = ['First', 'Second', 'Third', 'Fourth', 'Fifth'];

package/src/demos/examples/Nav/NavDrilldown.tsx

@@ -12,9 +12,7 @@ import {
   Menu,
   PageSection
 } from '@patternfly/react-core';
-
-import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
-
+import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
 interface MenuHeights {
   [menuId: string]: number;
 }

package/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx

@@ -40,7 +40,7 @@ import {
   SelectOptionProps,
   MenuToggle
 } from '@patternfly/react-core';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';