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

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';

package/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.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';

package/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.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';

package/src/demos/examples/Tabs/ModalTabs.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 import {
   PageSection,
   TextContent,

package/src/demos/examples/Tabs/NestedTabs.tsx

@@ -16,7 +16,7 @@ import {
   Flex,
   FlexItem
 } 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 NestedTabs: React.FunctionComponent = () => {
   const [activeTabKey, setActiveTabKey] = React.useState(0);

package/src/demos/examples/Tabs/NestedUnindentedTabs.tsx

@@ -17,7 +17,7 @@ import {
   TitleSizes,
   CardTitle
 } 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 NestedUnindentedTabs: React.FunctionComponent = () => {
   const [activeTabKey, setActiveTabKey] = React.useState(1);

package/src/demos/examples/Tabs/TabsAndTable.tsx

@@ -50,13 +50,13 @@ import {
   CustomActionsToggleProps
 } from '@patternfly/react-table';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 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 { KeyTypes } from '../../../helpers';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 interface Repository {
   name: string;

package/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx

@@ -0,0 +1,472 @@
+import React from 'react';
+import {
+  Badge,
+  Button,
+  MenuToggle,
+  SearchInput,
+  Select,
+  SelectList,
+  SelectOption,
+  PageSection,
+  PageSectionVariants,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+  ToolbarToggleGroup,
+  Tooltip,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuFooter
+} from '@patternfly/react-core';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/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';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
+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';
+
+export const ConsoleLogViewerToolbar: React.FC = () => {
+  const firstOptions = {
+    'container-sample-1': { type: 'C' },
+    'container-sample-2': { type: 'D' },
+    'container-sample-3': { type: 'E' }
+  };
+
+  const [containerExpanded, setContainerExpanded] = React.useState(false);
+  const [containerExpandedMobile, setContainerExpandedMobile] = React.useState(false);
+  const [containerSelected, setContainerSelected] = React.useState(Object.keys(firstOptions)[0]);
+  const [optionExpanded, setOptionExpanded] = React.useState(false);
+  const [optionExpandedMobile, setOptionExpandedMobile] = React.useState(false);
+  const [isPaused, setIsPaused] = React.useState(false);
+  const [firstSwitchChecked, setFirstSwitchChecked] = React.useState(true);
+  const [secondSwitchChecked, setSecondSwitchChecked] = React.useState(false);
+  const [searchValue, setSearchValue] = React.useState('');
+  const [searchResultsCount, setSearchResultsCount] = React.useState(3);
+  const [currentSearchResult, setCurrentSearchResult] = React.useState(1);
+  const [externalExpanded, setExternalExpanded] = React.useState(false);
+  const [externalExpandedMobile, setExternalExpandedMobile] = React.useState(false);
+  const [downloadExpanded, setDownloadExpanded] = React.useState(false);
+  const [downloadExpandedMobile, setDownloadExpandedMobile] = React.useState(false);
+  const [mobileView, setMobileView] = React.useState(window.innerWidth >= 1450 ? false : true);
+
+  const onContainerToggle = () => {
+    setContainerExpanded((prevState) => !prevState);
+  };
+
+  const onContainerToggleMobile = () => {
+    setContainerExpandedMobile((prevState) => !prevState);
+  };
+
+  const onContainerSelect = (_event: React.MouseEvent | undefined, selection: string | number | undefined) => {
+    setContainerSelected(selection as string);
+    setContainerExpanded(false);
+  };
+
+  const onContainerSelectMobile = (_event: React.MouseEvent | undefined, selection: string | number | undefined) => {
+    setContainerSelected(selection as string);
+    setContainerExpandedMobile(false);
+  };
+
+  const onOptionSelect = (_event: React.MouseEvent | undefined) => {};
+
+  const onOptionSelectMobile = (_event: React.MouseEvent | undefined) => {};
+
+  const onOptionToggle = () => {
+    setOptionExpanded((prevState) => !prevState);
+  };
+
+  const onOptionToggleMobile = () => {
+    setOptionExpandedMobile((prevState) => !prevState);
+  };
+
+  const onExternalToggle = () => {
+    setExternalExpanded((prevState) => !prevState);
+  };
+
+  const onExternalToggleMobile = () => {
+    setExternalExpandedMobile((prevState) => !prevState);
+  };
+
+  const onExternalSelect = () => {
+    setExternalExpanded(false);
+  };
+
+  const onExternalSelectMobile = () => {
+    setExternalExpandedMobile(false);
+  };
+
+  const onDownloadToggle = () => {
+    setDownloadExpanded((prevState) => !prevState);
+  };
+
+  const onDownloadToggleMobile = () => {
+    setDownloadExpandedMobile((prevState) => !prevState);
+  };
+
+  const onDownloadSelect = () => {
+    setDownloadExpanded(false);
+  };
+
+  const onDownloadSelectMobile = () => {
+    setDownloadExpandedMobile(false);
+  };
+
+  const onExternalClick = (_event: React.MouseEvent<HTMLButtonElement>) => {
+    // eslint-disable-next-line no-console
+    console.log('External logs opened!');
+  };
+
+  const onDownloadClick = (_event: React.MouseEvent<HTMLButtonElement>) => {
+    // eslint-disable-next-line no-console
+    console.log('Download action clicked!');
+  };
+
+  const pauseOrStart = (_event: React.MouseEvent<HTMLButtonElement>) => {
+    setIsPaused((prevState) => !prevState);
+  };
+
+  const handleFirstSwitchChange = () => {
+    setFirstSwitchChecked((prevState) => !prevState);
+  };
+
+  const handleSecondSwitchChange = () => {
+    setSecondSwitchChecked((prevState) => !prevState);
+  };
+
+  const onClearLogs = () => {
+    setOptionExpanded(false);
+    // eslint-disable-next-line no-console
+    console.log('Logs cleared!');
+  };
+
+  const onSearchChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
+    setSearchValue(value);
+    setSearchResultsCount(3);
+  };
+
+  const onSearchClear = (_event: React.SyntheticEvent<HTMLButtonElement, Event>) => {
+    setSearchValue('');
+    setSearchResultsCount(0);
+    setCurrentSearchResult(1);
+  };
+
+  const onSearchNext = (_event: React.SyntheticEvent<HTMLButtonElement, Event>) => {
+    setCurrentSearchResult((prevState) => {
+      const newCurrentResult = prevState + 1;
+
+      return newCurrentResult <= searchResultsCount ? newCurrentResult : searchResultsCount;
+    });
+  };
+
+  const onSearchPrevious = (_event: React.SyntheticEvent<HTMLButtonElement, Event>) => {
+    setCurrentSearchResult((prevState) => {
+      const newCurrentResult = prevState - 1;
+      return newCurrentResult > 0 ? newCurrentResult : 1;
+    });
+  };
+
+  const onPageResize = (_event: React.SyntheticEvent, { windowSize }: { windowSize: number }) => {
+    if (windowSize >= 1450) {
+      setMobileView(false);
+    } else {
+      setMobileView(true);
+    }
+  };
+
+  const externalDropdownItems = (
+    <>
+      <DropdownItem key="action-1" onClick={onExternalClick}>
+        External logs 1
+      </DropdownItem>
+      <DropdownItem key="action-2" onClick={onExternalClick}>
+        External logs 2
+      </DropdownItem>
+      <DropdownItem key="action-3" onClick={onExternalClick}>
+        External logs 3
+      </DropdownItem>
+    </>
+  );
+
+  const downloadDropdownItems = (
+    <>
+      <DropdownItem key="action-4" onClick={onDownloadClick}>
+        Current container logs
+      </DropdownItem>
+      <DropdownItem key="action-5" onClick={onDownloadClick}>
+        All container logs
+      </DropdownItem>
+    </>
+  );
+
+  const optionSelectItems = (
+    <>
+      <SelectOption key="switch-1" hasCheckbox isSelected={firstSwitchChecked} onClick={handleFirstSwitchChange}>
+        Display timestamp
+      </SelectOption>
+      <SelectOption key="switch-2" hasCheckbox isSelected={secondSwitchChecked} onClick={handleSecondSwitchChange}>
+        Wrap lines
+      </SelectOption>
+      <MenuFooter key="clear-log" onClick={onClearLogs}>
+        <Button variant="link" isInline>
+          Clear logs
+        </Button>
+      </MenuFooter>
+    </>
+  );
+
+  const selectDropdownContent = (
+    <SelectList>
+      {Object.entries(firstOptions).map(([value, { type }]) => (
+        <SelectOption key={value} hasCheckbox value={value} isSelected={containerSelected === value}>
+          <Badge key={value}>{type}</Badge>
+          {` ${value}`}
+        </SelectOption>
+      ))}
+    </SelectList>
+  );
+
+  const selectToggleContent = ({ showText }: { showText: boolean }) => {
+    if (!containerSelected) {
+      return 'Select';
+    }
+    return (
+      <React.Fragment>
+        <Badge>{firstOptions[containerSelected].type}</Badge>
+        {showText && ` ${containerSelected}`}
+      </React.Fragment>
+    );
+  };
+
+  const LogsSearchInput = (
+    <ToolbarToggleGroup toggleIcon={<SearchIcon />} breakpoint="lg">
+      <ToolbarItem>
+        <SearchInput
+          placeholder="Search logs"
+          value={searchValue}
+          onChange={onSearchChange}
+          onClear={onSearchClear}
+          resultsCount={`${currentSearchResult} / ${searchResultsCount}`}
+          onNextClick={onSearchNext}
+          onPreviousClick={onSearchPrevious}
+        />
+      </ToolbarItem>
+    </ToolbarToggleGroup>
+  );
+
+  const leftAlignedItemsDesktop = (
+    <React.Fragment>
+      <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
+        <Select
+          toggle={(toggleRef) => (
+            <MenuToggle
+              ref={toggleRef}
+              onClick={onContainerToggle}
+              isExpanded={containerExpanded}
+              style={{ width: '250px' }}
+            >
+              {selectToggleContent({ showText: true })}
+            </MenuToggle>
+          )}
+          onSelect={onContainerSelect}
+          onOpenChange={(isOpen) => setContainerExpanded(isOpen)}
+          selected={containerSelected}
+          isOpen={containerExpanded}
+        >
+          {selectDropdownContent}
+        </Select>
+      </ToolbarItem>
+      <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
+        <Select
+          isOpen={optionExpanded}
+          onOpenChange={(isOpen) => setOptionExpanded(isOpen)}
+          onSelect={onOptionSelect}
+          toggle={(toggleRef) => (
+            <MenuToggle ref={toggleRef} isExpanded={optionExpanded} onClick={onOptionToggle} icon={<CogIcon />}>
+              Options
+            </MenuToggle>
+          )}
+        >
+          <SelectList>{optionSelectItems}</SelectList>
+        </Select>
+      </ToolbarItem>
+      <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
+        <Button variant={isPaused ? 'plain' : 'link'} onClick={pauseOrStart}>
+          {isPaused ? <PlayIcon /> : <PauseIcon />}
+          {isPaused ? ` Resume Log` : ` Pause Log`}
+        </Button>
+      </ToolbarItem>
+    </React.Fragment>
+  );
+
+  const leftAlignedItemsMobile = (
+    <React.Fragment>
+      <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>
+        <Tooltip position="top" content={<div>Select container</div>}>
+          <Select
+            role="menu"
+            toggle={(toggleRef) => (
+              <MenuToggle ref={toggleRef} onClick={onContainerToggleMobile} isExpanded={containerExpandedMobile}>
+                {selectToggleContent({ showText: false })}
+              </MenuToggle>
+            )}
+            onSelect={onContainerSelectMobile}
+            onOpenChange={(isOpen) => setContainerExpandedMobile(isOpen)}
+            selected={containerSelected}
+            isOpen={containerExpandedMobile}
+          >
+            {selectDropdownContent}
+          </Select>
+        </Tooltip>
+      </ToolbarItem>
+      <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>
+        <Tooltip position="top" content={<div>Options</div>}>
+          <Select
+            isOpen={optionExpandedMobile}
+            onOpenChange={(isOpen) => setOptionExpandedMobile(isOpen)}
+            onSelect={onOptionSelectMobile}
+            toggle={(toggleRef) => (
+              <MenuToggle
+                ref={toggleRef}
+                isExpanded={optionExpandedMobile}
+                onClick={onOptionToggleMobile}
+                icon={<CogIcon />}
+                aria-label="Options"
+              />
+            )}
+          >
+            <SelectList>{optionSelectItems}</SelectList>
+          </Select>
+        </Tooltip>
+      </ToolbarItem>
+      <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>
+        <Tooltip position="top" content={<div>{isPaused ? 'Resume log' : 'Pause log'}</div>}>
+          <Button variant="plain" onClick={pauseOrStart} aria-label={isPaused ? 'Play' : 'Paused'}>
+            {isPaused ? <PlayIcon /> : <PauseIcon />}
+          </Button>
+        </Tooltip>
+      </ToolbarItem>
+    </React.Fragment>
+  );
+
+  const leftAlignedItems = (
+    <React.Fragment>
+      {leftAlignedItemsDesktop}
+      {leftAlignedItemsMobile}
+    </React.Fragment>
+  );
+
+  const rightAlignedItemsDesktop = (
+    <React.Fragment>
+      <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
+        <Dropdown
+          isOpen={externalExpanded}
+          onOpenChange={(isOpen) => setExternalExpanded(isOpen)}
+          onSelect={onExternalSelect}
+          toggle={(toggleRef) => (
+            <MenuToggle ref={toggleRef} isExpanded={externalExpanded} onClick={onExternalToggle}>
+              External logs
+            </MenuToggle>
+          )}
+        >
+          <DropdownList>{externalDropdownItems}</DropdownList>
+        </Dropdown>
+      </ToolbarItem>
+      <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
+        <Dropdown
+          isOpen={downloadExpanded}
+          onOpenChange={(isOpen) => setDownloadExpanded(isOpen)}
+          onSelect={onDownloadSelect}
+          toggle={(toggleRef) => (
+            <MenuToggle ref={toggleRef} isExpanded={downloadExpanded} onClick={onDownloadToggle}>
+              Download
+            </MenuToggle>
+          )}
+        >
+          <DropdownList>{downloadDropdownItems}</DropdownList>
+        </Dropdown>
+      </ToolbarItem>
+    </React.Fragment>
+  );
+
+  const rightAlignedItemsMobile = (
+    <React.Fragment>
+      <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>
+        <Tooltip position="top" content={<div>External logs</div>}>
+          <Dropdown
+            isOpen={externalExpandedMobile}
+            onOpenChange={(isOpen) => setExternalExpandedMobile(isOpen)}
+            onSelect={onExternalSelectMobile}
+            toggle={(toggleRef) => (
+              <MenuToggle
+                ref={toggleRef}
+                isExpanded={externalExpandedMobile}
+                onClick={onExternalToggleMobile}
+                icon={<ExternalLinkAltIcon />}
+                aria-label="External logs"
+              />
+            )}
+          >
+            <DropdownList>{externalDropdownItems}</DropdownList>
+          </Dropdown>
+        </Tooltip>
+      </ToolbarItem>
+      <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>
+        <Tooltip position="top" content={<div>Download</div>}>
+          <Dropdown
+            isOpen={downloadExpandedMobile}
+            onOpenChange={(isOpen) => setDownloadExpandedMobile(isOpen)}
+            onSelect={onDownloadSelectMobile}
+            popperProps={{ position: 'right' }}
+            toggle={(toggleRef) => (
+              <MenuToggle
+                ref={toggleRef}
+                isExpanded={downloadExpandedMobile}
+                onClick={onDownloadToggleMobile}
+                icon={<DownloadIcon />}
+                aria-label="Download"
+              />
+            )}
+          >
+            <DropdownList>{downloadDropdownItems}</DropdownList>
+          </Dropdown>
+        </Tooltip>
+      </ToolbarItem>
+    </React.Fragment>
+  );
+
+  const rightAlignedItems = (
+    <React.Fragment>
+      <ToolbarItem>{LogsSearchInput}</ToolbarItem>
+      {rightAlignedItemsDesktop}
+      {rightAlignedItemsMobile}
+      <ToolbarItem>
+        <Tooltip position="top" content={<div>Expand</div>}>
+          <Button variant="plain" aria-label="expand">
+            <ExpandIcon />
+          </Button>
+        </Tooltip>
+      </ToolbarItem>
+    </React.Fragment>
+  );
+
+  const items = (
+    <React.Fragment>
+      <ToolbarGroup align={{ default: 'alignLeft' }}>{leftAlignedItems}</ToolbarGroup>
+      <ToolbarGroup align={{ default: 'alignRight' }}>{rightAlignedItems}</ToolbarGroup>
+    </React.Fragment>
+  );
+
+  return (
+    <DashboardWrapper sidebarNavOpen={!mobileView} onPageResize={onPageResize}>
+      <PageSection variant={PageSectionVariants.light}>
+        <Toolbar id="log-viewer-toolbar" inset={{ default: 'insetNone' }}>
+          <ToolbarContent>{items}</ToolbarContent>
+        </Toolbar>
+      </PageSection>
+    </DashboardWrapper>
+  );
+};

package/src/demos/index.ts

@@ -0,0 +1,2 @@
+export * from './DashboardHeader';
+export * from './DashboardWrapper';

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from './components';
+export * from './demos';
 export * from './layouts';
 export * from './helpers';
 export { BaseSizes, DeviceSizes } from './styles/sizes';