@patternfly/react-core 6.0.0-alpha.50 → 6.0.0-alpha.51

package/src/demos/RTL/examples/PaginatedTable.tsx

@@ -0,0 +1,533 @@
+import * as React from 'react';
+
+import {
+  Avatar,
+  Brand,
+  Breadcrumb,
+  BreadcrumbItem,
+  Button,
+  ButtonVariant,
+  Card,
+  Divider,
+  Dropdown,
+  DropdownGroup,
+  DropdownItem,
+  DropdownList,
+  Icon,
+  Label,
+  Masthead,
+  MastheadBrand,
+  MastheadContent,
+  MastheadMain,
+  MastheadToggle,
+  MenuToggle,
+  Nav,
+  NavItem,
+  NavList,
+  Page,
+  PageBreadcrumb,
+  PageSection,
+  PageSidebar,
+  PageSidebarBody,
+  PageToggleButton,
+  Pagination,
+  PaginationVariant,
+  Text,
+  TextContent,
+  TextVariants,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+  Truncate
+} from '@patternfly/react-core';
+
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import translationsEn from './examples/translations.en.json';
+import translationsHe from './examples/translations.he.json';
+import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';
+import ToolsIcon from '@patternfly/react-icons/dist/esm/icons/tools-icon';
+import ClockIcon from '@patternfly/react-icons/dist/esm/icons/clock-icon';
+import WalkingIcon from '@patternfly/react-icons/dist/esm/icons/walking-icon';
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import HandPaperIcon from '@patternfly/react-icons/dist/esm/icons/hand-paper-icon';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
+
+interface Row {
+  name: string;
+  status: string;
+  location: string;
+  lastModified: string;
+  url: string;
+}
+
+interface Translation {
+  [key: string]: any;
+}
+
+export const PaginatedTableAction: React.FunctionComponent = () => {
+  const [translation, setTranslation] = React.useState<Translation>(translationsEn);
+  const [page, setPage] = React.useState<number>(1);
+  const [perPage, setPerPage] = React.useState<number>(10);
+
+  const columns = [
+    translation.table.columns.servers,
+    translation.table.columns.status,
+    translation.table.columns.location,
+    translation.table.columns.modified,
+    translation.table.columns.url
+  ];
+
+  const numRows: number = 25;
+  const getRandomInteger = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min;
+  const createRows = () => {
+    const rows: Row[] = [];
+    for (let i = 0; i < numRows; i++) {
+      const num = i + 1;
+      const rowObj: Row = {
+        name: translation.table.rows.node + num,
+        status: [
+          translation.table.rows.status.stopped,
+          translation.table.rows.status.running,
+          translation.table.rows.status.down,
+          translation.table.rows.status.needsMaintenance
+        ][getRandomInteger(0, 3)],
+        location: [
+          translation.table.rows.locations.raleigh,
+          translation.table.rows.locations.boston,
+          translation.table.rows.locations.atlanta,
+          translation.table.rows.locations.sanFrancisco
+        ][getRandomInteger(0, 3)],
+        lastModified: [
+          translation.table.rows.lastModified.oneHr,
+          translation.table.rows.lastModified.threeHrs,
+          translation.table.rows.lastModified.fiveHrs,
+          translation.table.rows.lastModified.sevenMins,
+          translation.table.rows.lastModified.fortyTwoMins,
+          translation.table.rows.lastModified.twoDays,
+          translation.table.rows.lastModified.oneMonth
+        ][getRandomInteger(0, 6)],
+        url: 'http://www.redhat.com/en/office-locations/node' + num
+      };
+      rows.push(rowObj);
+    }
+
+    return rows;
+  };
+
+  const rows = createRows();
+  const [managedRows, setManagedRows] = React.useState(rows);
+  const [paginatedRows, setPaginatedRows] = React.useState<Row[]>(rows.slice(0, 10));
+  const [isDirRTL, setIsDirRTL] = React.useState<boolean>(false);
+
+  const capitalize = (input: string) => input[0].toUpperCase() + input.substring(1);
+
+  const switchTranslation = () => {
+    setIsDirRTL((prevIsDirRTL) => !prevIsDirRTL);
+    setTranslation((prevTranslation: string) => (prevTranslation === translationsEn ? translationsHe : translationsEn));
+  };
+
+  React.useEffect(() => {
+    const newRows = createRows();
+    setManagedRows(newRows);
+    setPaginatedRows(newRows.slice((page - 1) * perPage, page * perPage));
+  }, [translation]);
+
+  React.useEffect(() => {
+    const html = document.querySelector('html');
+    html.dir = isDirRTL ? 'rtl' : 'ltr';
+  }, [isDirRTL]);
+
+  // Pagination logic
+
+  const handleSetPage = (
+    _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPage: number,
+    _perPage: number | undefined,
+    startIdx: number | undefined,
+    endIdx: number | undefined
+  ) => {
+    setPaginatedRows(managedRows.slice(startIdx, endIdx));
+    setPage(newPage);
+  };
+
+  const handlePerPageSelect = (
+    _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPerPage: number,
+    _newPage: number,
+    startIdx: number | undefined,
+    endIdx: number | undefined
+  ) => {
+    setPaginatedRows(managedRows.slice(startIdx, endIdx));
+    setPerPage(newPerPage);
+  };
+
+  const renderPagination = (variant: PaginationVariant) => {
+    const { pagination } = translation;
+
+    return (
+      <Pagination
+        itemCount={managedRows.length}
+        page={page}
+        perPage={perPage}
+        onSetPage={handleSetPage}
+        onPerPageSelect={handlePerPageSelect}
+        variant={variant}
+        titles={{
+          paginationAriaLabel: pagination?.[`${variant}VariantAriaLabel`] || `${variant} pagination`,
+          ofWord: pagination?.ofWord,
+          items: pagination?.items,
+          perPageSuffix: pagination?.perPageSuffix,
+          toNextPageAriaLabel: pagination?.toNextPageAriaLabel,
+          toPreviousPageAriaLabel: pagination?.toPreviousPageAriaLabel,
+          toFirstPageAriaLabel: pagination?.toFirstPageAriaLabel,
+          toLastPageAriaLabel: pagination?.perPageSuffix,
+          currPageAriaLabel: pagination?.currPageAriaLabel
+        }}
+      />
+    );
+  };
+
+  const breadcrumbItems = {
+    home: {
+      url: '#home'
+    },
+    category: {
+      url: '#category'
+    },
+    subCategory: {
+      url: 'sub-category'
+    }
+  };
+
+  const renderLabel = (labelText: string) => {
+    switch (labelText) {
+      case 'Running':
+      case 'רץ':
+        return (
+          <Label
+            color="green"
+            icon={
+              <Icon shouldMirrorRTL>
+                <WalkingIcon />
+              </Icon>
+            }
+          >
+            {translation.table.rows.status.running}
+          </Label>
+        );
+      case 'Stopped':
+      case 'עצר':
+        return (
+          <Label
+            icon={
+              <Icon shouldMirrorRTL>
+                <HandPaperIcon />
+              </Icon>
+            }
+            color="red"
+          >
+            {translation.table.rows.status.stopped}
+          </Label>
+        );
+      case 'Needs maintenance':
+      case 'זקוק לתחזוקה':
+        return (
+          <Label icon={<ToolsIcon />} color="blue">
+            {translation.table.rows.status.needsMaintenance}
+          </Label>
+        );
+      case 'Down':
+      case 'מטה':
+        return (
+          <Label icon={<ClockIcon />} color="orange">
+            {translation.table.rows.status.down}
+          </Label>
+        );
+    }
+  };
+
+  const toolbarItems = (
+    <React.Fragment>
+      <Toolbar id="rtl-paginated-table">
+        <ToolbarContent>
+          <ToolbarItem>
+            <Button
+              variant="primary"
+              icon={
+                <Icon shouldMirrorRTL>
+                  <AlignRightIcon />
+                </Icon>
+              }
+              iconPosition="end"
+              onClick={switchTranslation}
+            >
+              {translation.switchBtn}
+            </Button>
+          </ToolbarItem>
+          <ToolbarItem variant="pagination">{renderPagination(PaginationVariant.top)}</ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+    </React.Fragment>
+  );
+
+  const pageNav = (
+    <Nav aria-label={translation.nav.ariaLabel || undefined}>
+      <NavList>
+        <NavItem itemId={0} isActive to="#system-panel">
+          {translation.nav.systemPanel}
+        </NavItem>
+        <NavItem itemId={1} to="#policy">
+          {translation.nav.policy}
+        </NavItem>
+        <NavItem itemId={2} to="#auth">
+          {translation.nav.authentication}
+        </NavItem>
+        <NavItem itemId={3} to="#network">
+          {translation.nav.networkServices}
+        </NavItem>
+        <NavItem itemId={4} to="#server">
+          {translation.nav.server}
+        </NavItem>
+      </NavList>
+    </Nav>
+  );
+
+  const sidebar = (
+    <PageSidebar>
+      <PageSidebarBody>{pageNav}</PageSidebarBody>
+    </PageSidebar>
+  );
+
+  const [isDropdownOpen, setIsDropdownOpen] = React.useState<boolean>(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState<boolean>(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState<boolean>(false);
+
+  const kebabDropdownItems = (
+    <>
+      <DropdownItem icon={<CogIcon />}>{translation.kebabDropdown.settings}</DropdownItem>
+      <DropdownItem icon={<HelpIcon />}>{translation.kebabDropdown.help}</DropdownItem>
+    </>
+  );
+
+  const userDropdownItems = (
+    <>
+      <DropdownItem key="group 2 profile">{translation.userDropdown.myProfile}</DropdownItem>
+      <DropdownItem key="group 2 user">{translation.userDropdown.userManagement}</DropdownItem>
+      <DropdownItem key="group 2 logout">{translation.userDropdown.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);
+  };
+
+  const masthead = (
+    <Masthead>
+      <MastheadToggle>
+        <PageToggleButton variant="plain" aria-label={translation.mastheadToggleAriaLabel}>
+          <BarsIcon />
+        </PageToggleButton>
+      </MastheadToggle>
+      <MastheadMain>
+        <MastheadBrand dir="ltr">
+          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          {translation.brandLanguage && <span className="brand-language">{translation.brandLanguage}</span>}
+        </MastheadBrand>
+      </MastheadMain>
+      <MastheadContent>
+        <Toolbar id="toolbar" isFullHeight isStatic>
+          <ToolbarContent>
+            <ToolbarGroup
+              variant="icon-button-group"
+              align={{ default: 'alignRight' }}
+              spacer={{ default: 'spacerNone', md: 'spacerMd' }}
+            >
+              <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
+                <ToolbarItem>
+                  <Button
+                    aria-label={translation.kebabDropdown.settings}
+                    variant={ButtonVariant.plain}
+                    icon={<CogIcon />}
+                  />
+                </ToolbarItem>
+                <ToolbarItem>
+                  <Button
+                    aria-label={translation.kebabDropdown.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) => (
+                    <MenuToggle
+                      ref={toggleRef}
+                      isExpanded={isKebabDropdownOpen}
+                      onClick={onKebabDropdownToggle}
+                      variant="plain"
+                      aria-label={translation.kebabDropdown.settingsAndHelp}
+                    >
+                      <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) => (
+                    <MenuToggle
+                      ref={toggleRef}
+                      isExpanded={isFullKebabDropdownOpen}
+                      onClick={onFullKebabToggle}
+                      variant="plain"
+                      aria-label={translation.kebabAndUserDropdown.toolbarMenuAriaLabel}
+                    >
+                      <EllipsisVIcon aria-hidden="true" />
+                    </MenuToggle>
+                  )}
+                >
+                  <DropdownGroup key="group 2" aria-label={translation.kebabAndUserDropdown.groupAriaLabel}>
+                    <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) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    isExpanded={isDropdownOpen}
+                    onClick={onDropdownToggle}
+                    icon={<Avatar src={imgAvatar} alt="" />}
+                    isFullHeight
+                  >
+                    {translation.username}
+                  </MenuToggle>
+                )}
+              >
+                <DropdownList>{userDropdownItems}</DropdownList>
+              </Dropdown>
+            </ToolbarItem>
+          </ToolbarContent>
+        </Toolbar>
+      </MastheadContent>
+    </Masthead>
+  );
+
+  const breadcrumbItemsLength = Object.keys(breadcrumbItems).length;
+
+  return (
+    <React.Fragment>
+      <Page sidebar={sidebar} header={masthead} isManagedSidebar>
+        <PageBreadcrumb>
+          <Breadcrumb aria-label={translation.breadcrumbs.ariaLabel || undefined}>
+            {Object.keys(breadcrumbItems).map((key: string, idx: number, arr: string[]) => (
+              <BreadcrumbItem key={idx} isActive={arr.length - 1 === idx} to={`${breadcrumbItems[key].url}`}>
+                {translation.breadcrumbs[key]}
+                {breadcrumbItemsLength}
+              </BreadcrumbItem>
+            ))}
+          </Breadcrumb>
+        </PageBreadcrumb>
+        <PageSection variant="light">
+          <TextContent>
+            <Text component={TextVariants.h1}>{translation.title}</Text>
+            <Text component={TextVariants.p}>{translation.body}</Text>
+          </TextContent>
+        </PageSection>
+        <PageSection>
+          <Card>
+            {toolbarItems}
+            <Table variant="compact" aria-label={translation.table.ariaLabel}>
+              <Thead>
+                <Tr>
+                  {columns.map((column, columnIndex) => (
+                    <Th key={columnIndex}>{column}</Th>
+                  ))}
+                </Tr>
+              </Thead>
+              <Tbody>
+                {paginatedRows.map((row: Row, rowIndex: number) => (
+                  <Tr key={rowIndex}>
+                    <>
+                      {Object.entries(row).map(([key, value]) => {
+                        if (key === 'status') {
+                          return (
+                            <Td key={key} width={15} dataLabel="Status">
+                              {renderLabel(value)}
+                            </Td>
+                          );
+                        } else if (key === 'url') {
+                          return (
+                            // Passing dir="rtl" forces truncation at the start of the URL,
+                            // resulting in the unique portion being visible regardless of language
+                            <Td key={key} dataLabel="URL" width={15}>
+                              <a href="#">
+                                <Truncate content={row.url} position={isDirRTL ? 'end' : 'start'} />
+                              </a>
+                            </Td>
+                          );
+                        } else {
+                          return (
+                            <Td key={key} dataLabel={key === 'lastModified' ? 'Last modified' : capitalize(key)}>
+                              {value}
+                            </Td>
+                          );
+                        }
+                      })}
+                    </>
+                  </Tr>
+                ))}
+              </Tbody>
+            </Table>
+            {renderPagination(PaginationVariant.bottom)}
+          </Card>
+        </PageSection>
+      </Page>
+    </React.Fragment>
+  );
+};

package/src/demos/Tabs.md

@@ -11,7 +11,10 @@ import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import display from '@patternfly/react-styles/css/utilities/Display/display';
+import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
 import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 ## Demos
 
@@ -42,7 +45,7 @@ import {
 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 spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 
 TabsOpenDemo = () => {
@@ -233,7 +236,7 @@ import {
 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 spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 TabsOpenWithSecondaryTabsDemo = () => {
   const [activeTabKey, setActiveTabKey] = React.useState(0);

package/src/demos/Toolbar.md

@@ -11,6 +11,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/dist/js/demos/DashboardWrapper';
 
 ## Demos
 

package/src/demos/Wizard/WizardDemo.md

@@ -6,6 +6,7 @@ source: react-demos
 
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 ## Demos
 

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

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

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

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

package/src/demos/examples/Card/CardStatus.tsx

@@ -94,7 +94,7 @@ export const CardStatus: React.FunctionComponent = () => {
       <Table variant="compact">
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row expansion" />
             {columns.map((column, columnIndex) => (
               <Th key={columnIndex} modifier="fitContent">
                 {column}

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

@@ -19,7 +19,7 @@ import {
   getResizeObserver,
   DrawerContext
 } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import mastheadStyles from '@patternfly/react-styles/css/components/Masthead/masthead';
 
 const JumpLinksWrapper = ({ offsetHeight, headings }) => {

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

@@ -15,7 +15,7 @@ import {
   TextContent,
   Text
 } from '@patternfly/react-core';
-import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
 
 export const NavDefault: React.FunctionComponent = () => {

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

@@ -16,7 +16,7 @@ import {
   TextContent,
   Text
 } from '@patternfly/react-core';
-import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
 
 export const NavExpandableDemo: React.FunctionComponent = () => {

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

@@ -16,7 +16,7 @@ import {
   TextContent,
   Text
 } from '@patternfly/react-core';
-import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
 
 export const NavWithSubnav: React.FunctionComponent = () => {

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

@@ -39,7 +39,7 @@ import {
   SelectOptionProps,
   MenuToggle
 } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/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';

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

@@ -39,7 +39,7 @@ import {
   SelectOptionProps,
   MenuToggle
 } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/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';

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

@@ -39,7 +39,7 @@ import {
   SelectOptionProps,
   MenuToggle
 } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/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';