@patternfly/react-core 6.5.0-prerelease.3 → 6.5.0-prerelease.31

package/src/demos/Tabs.md

@@ -21,447 +21,36 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 
 ### Open tabs
 
-```js isFullscreen
-import { useState } from 'react';
-import {
-  PageSection,
-  PageBreadcrumb,
-  Breadcrumb,
-  BreadcrumbItem,
-  Tabs,
-  Tab,
-  TabContent,
-  TabContentBody,
-  TabTitleText,
-  Title,
-  DescriptionList,
-  DescriptionListGroup,
-  DescriptionListTerm,
-  DescriptionListDescription,
-  Label,
-  LabelGroup,
-  Flex,
-  FlexItem
-} from '@patternfly/react-core';
-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/dist/js/demos/DashboardWrapper';
-
-TabsOpenDemo = () => {
-  const [activeTabKey, setActiveTabKey] = useState(0);
+```ts file="examples/Tabs/TabsOpen.tsx" isFullscreen
 
-  // Toggle currently active tab
-  const handleTabClick = (event, tabIndex) => {
-    setActiveTabKey(tabIndex);
-  };
-
-  const tabsBreadcrumb = (
-    <PageBreadcrumb isWidthLimited>
-      <Breadcrumb>
-        <BreadcrumbItem to="#">Overview</BreadcrumbItem>
-        <BreadcrumbItem to="#">Pods</BreadcrumbItem>
-        <BreadcrumbItem to="#" isActive>
-          Pod details{' '}
-        </BreadcrumbItem>
-      </Breadcrumb>
-    </PageBreadcrumb>
-  );
-
-  const tabContent = (
-    <Flex direction={{ default: 'column' }}>
-      <FlexItem spacer={{ default: 'spacerLg' }}>
-        <Title headingLevel="h2" size="lg" className={spacing.mtSm} id="open-tabs-example-tabs-list-details-title">
-          Pod details
-        </Title>
-      </FlexItem>
-      <FlexItem>
-        <DescriptionList columnModifier={{ lg: '2Col' }} aria-labelledby="open-tabs-example-tabs-list-details-title">
-          <DescriptionListGroup>
-            <DescriptionListTerm>Name</DescriptionListTerm>
-            <DescriptionListDescription>3scale-control-fccb6ddb9-phyqv9</DescriptionListDescription>
-          </DescriptionListGroup>
-          <DescriptionListGroup>
-            <DescriptionListTerm>Status</DescriptionListTerm>
-            <DescriptionListDescription>
-              <Flex spacer={{ default: 'spacerLg' }}>
-                <FlexItem>
-                  <CheckCircleIcon />
-                </FlexItem>
-                <FlexItem>Running</FlexItem>
-              </Flex>
-            </DescriptionListDescription>
-          </DescriptionListGroup>
-          <DescriptionListGroup>
-            <DescriptionListTerm>Namespace</DescriptionListTerm>
-            <DescriptionListDescription>
-              <Flex spaceItems={{ default: 'spaceItemsSm' }}>
-                <FlexItem>
-                  <Label color="teal">NS</Label>
-                </FlexItem>
-                <FlexItem>
-                  <a href="#">knative-serving-ingress</a>
-                </FlexItem>
-              </Flex>
-            </DescriptionListDescription>
-          </DescriptionListGroup>
-          <DescriptionListGroup>
-            <DescriptionListTerm>Restart policy</DescriptionListTerm>
-            <DescriptionListDescription>Always restart</DescriptionListDescription>
-          </DescriptionListGroup>
-          <DescriptionListGroup>
-            <DescriptionListTerm>Labels</DescriptionListTerm>
-            <DescriptionListDescription>
-              <LabelGroup>
-                <Label>app=3scale-gateway</Label>
-                <Label>pod-template-has=6747686899</Label>
-              </LabelGroup>
-            </DescriptionListDescription>
-          </DescriptionListGroup>
-          <DescriptionListGroup>
-            <DescriptionListTerm>Active deadline seconds</DescriptionListTerm>
-            <DescriptionListDescription>Not configured</DescriptionListDescription>
-          </DescriptionListGroup>
-          <DescriptionListGroup>
-            <DescriptionListTerm>Tolerations</DescriptionListTerm>
-            <DescriptionListDescription>stuff</DescriptionListDescription>
-          </DescriptionListGroup>
-          <DescriptionListGroup>
-            <DescriptionListTerm>Pod IP</DescriptionListTerm>
-            <DescriptionListDescription>10..345.2.197</DescriptionListDescription>
-          </DescriptionListGroup>
-          <DescriptionListGroup>
-            <DescriptionListTerm>Annotations</DescriptionListTerm>
-            <DescriptionListDescription>stuff</DescriptionListDescription>
-          </DescriptionListGroup>
-          <DescriptionListGroup>
-            <DescriptionListTerm>Node</DescriptionListTerm>
-            <DescriptionListDescription>
-              <Flex spaceItems={{ default: 'spaceItemsSm' }}>
-                <FlexItem>
-                  <Label color="purple">N</Label>
-                </FlexItem>
-                <FlexItem>ip-10-0-233-118.us-east-2.computer.external</FlexItem>
-              </Flex>
-            </DescriptionListDescription>
-          </DescriptionListGroup>
-          <DescriptionListGroup>
-            <DescriptionListTerm>Created at</DescriptionListTerm>
-            <DescriptionListDescription>
-              <time>Oct 15, 1:51 pm</time>
-            </DescriptionListDescription>
-          </DescriptionListGroup>
-        </DescriptionList>
-      </FlexItem>
-    </Flex>
-  );
-
-  return (
-    <DashboardWrapper hasNoBreadcrumb>
-      {tabsBreadcrumb}
-      <PageSection isWidthLimited aria-label='Pod header'>
-        <Flex
-          spaceItems={{ default: 'spaceItemsMd' }}
-          alignItems={{ default: 'alignItemsFlexStart' }}
-          flexWrap={{ default: 'noWrap' }}
-        >
-          <FlexItem>
-            <Label color="blue">N</Label>
-          </FlexItem>
-          <FlexItem>
-            <Title headingLevel="h1" size="2xl">
-              3scale-control-fccb6ddb9-phyqv9
-            </Title>
-          </FlexItem>
-          <FlexItem flex={{ default: 'flexNone' }}>
-            <Label icon={<InfoCircleIcon />}>Running</Label>
-          </FlexItem>
-        </Flex>
-      </PageSection>
-      <PageSection type="tabs" isWidthLimited aria-label='Pod navigation tabs'>
-        <Tabs activeKey={activeTabKey} onSelect={handleTabClick} usePageInsets id="open-tabs-example-tabs-list">
-          <Tab eventKey={0} title={<TabTitleText>Details</TabTitleText>} tabContentId={`tabContent${0}`} />
-          <Tab eventKey={1} title={<TabTitleText>YAML</TabTitleText>} tabContentId={`tabContent${1}`} />
-          <Tab eventKey={2} title={<TabTitleText>Environment</TabTitleText>} tabContentId={`tabContent${2}`} />
-          <Tab eventKey={3} title={<TabTitleText>Events</TabTitleText>} tabContentId={`tabContent${3}`} />
-          <Tab eventKey={4} title={<TabTitleText>Terminal</TabTitleText>} tabContentId={`tabContent${4}`} />
-        </Tabs>
-      </PageSection>
-      <PageSection isWidthLimited aria-label='Pod content'>
-        <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
-          <TabContentBody>{tabContent}</TabContentBody>
-        </TabContent>
-        <TabContent key={1} eventKey={1} id={`tabContent${1}`} activeKey={activeTabKey} hidden={1 !== activeTabKey}>
-          <TabContentBody>YAML panel</TabContentBody>
-        </TabContent>
-        <TabContent key={2} eventKey={2} id={`tabContent${2}`} activeKey={activeTabKey} hidden={2 !== activeTabKey}>
-          <TabContentBody>Environment panel</TabContentBody>
-        </TabContent>
-        <TabContent key={3} eventKey={3} id={`tabContent${3}`} activeKey={activeTabKey} hidden={3 !== activeTabKey}>
-          <TabContentBody>Events panel</TabContentBody>
-        </TabContent>
-        <TabContent key={4} eventKey={4} id={`tabContent${4}`} activeKey={activeTabKey} hidden={4 !== activeTabKey}>
-          <TabContentBody>Terminal panel</TabContentBody>
-        </TabContent>
-      </PageSection>
-    </DashboardWrapper>
-  );
-};
 ```
 
 ### Open tabs with secondary tabs
 
-```js isFullscreen
-import { useState } from 'react';
-import {
-  PageSection,
-  PageBreadcrumb,
-  Breadcrumb,
-  BreadcrumbItem,
-  Tabs,
-  Tab,
-  TabContent,
-  TabContentBody,
-  TabTitleText,
-  Title,
-  DescriptionList,
-  DescriptionListGroup,
-  DescriptionListTerm,
-  DescriptionListDescription,
-  Label,
-  LabelGroup,
-  Flex,
-  FlexItem
-} from '@patternfly/react-core';
-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/dist/js/demos/DashboardWrapper';
-
-TabsOpenWithSecondaryTabsDemo = () => {
-  const [activeTabKey, setActiveTabKey] = useState(0);
-  const [activeTabKeySecondary, setActiveTabKeySecondary] = useState(10);
-
-  // Toggle currently active tab
-  const handleTabClick = (event, tabIndex) => {
-    setActiveTabKey(tabIndex);
-  };
-
-  // Toggle currently active secondary tab
-  const handleTabClickSecondary = (event, tabIndex) => {
-    setActiveTabKeySecondary(tabIndex);
-  };
-
-  const tabsBreadcrumb = (
-    <PageBreadcrumb isWidthLimited>
-      <Breadcrumb>
-        <BreadcrumbItem to="#">Overview</BreadcrumbItem>
-        <BreadcrumbItem to="#">Pods</BreadcrumbItem>
-        <BreadcrumbItem to="#" isActive>
-          Pod details{' '}
-        </BreadcrumbItem>
-      </Breadcrumb>
-    </PageBreadcrumb>
-  );
-
-  const tabContent = (
-    <Flex direction={{ default: 'column' }}>
-      <FlexItem spacer={{ default: 'spacerLg' }}>
-        <Title headingLevel="h2" size="lg" className={spacing.mtSm} id="open-tabs-example-tabs-list-details-title">
-          Pod details
-        </Title>
-      </FlexItem>
-      <FlexItem>
-        <DescriptionList columnModifier={{ lg: '2Col' }} aria-labelledby="open-tabs-example-tabs-list-details-title">
-          <DescriptionListGroup>
-            <DescriptionListTerm>Name</DescriptionListTerm>
-            <DescriptionListDescription>3scale-control-fccb6ddb9-phyqv9</DescriptionListDescription>
-          </DescriptionListGroup>
-          <DescriptionListGroup>
-            <DescriptionListTerm>Status</DescriptionListTerm>
-            <DescriptionListDescription>
-              <Flex spacer={{ default: 'spacerLg' }}>
-                <FlexItem>
-                  <CheckCircleIcon />
-                </FlexItem>
-                <FlexItem>Running</FlexItem>
-              </Flex>
-            </DescriptionListDescription>
-          </DescriptionListGroup>
-          <DescriptionListGroup>
-            <DescriptionListTerm>Namespace</DescriptionListTerm>
-            <DescriptionListDescription>
-              <Flex spaceItems={{ default: 'spaceItemsSm' }}>
-                <FlexItem>
-                  <Label color="teal">NS</Label>
-                </FlexItem>
-                <FlexItem>
-                  <a href="#">knative-serving-ingress</a>
-                </FlexItem>
-              </Flex>
-            </DescriptionListDescription>
-          </DescriptionListGroup>
-          <DescriptionListGroup>
-            <DescriptionListTerm>Restart policy</DescriptionListTerm>
-            <DescriptionListDescription>Always restart</DescriptionListDescription>
-          </DescriptionListGroup>
-          <DescriptionListGroup>
-            <DescriptionListTerm>Labels</DescriptionListTerm>
-            <DescriptionListDescription>
-              <LabelGroup>
-                <Label>app=3scale-gateway</Label>
-                <Label>pod-template-has=6747686899</Label>
-              </LabelGroup>
-            </DescriptionListDescription>
-          </DescriptionListGroup>
-          <DescriptionListGroup>
-            <DescriptionListTerm>Active deadline seconds</DescriptionListTerm>
-            <DescriptionListDescription>Not configured</DescriptionListDescription>
-          </DescriptionListGroup>
-          <DescriptionListGroup>
-            <DescriptionListTerm>Tolerations</DescriptionListTerm>
-            <DescriptionListDescription>stuff</DescriptionListDescription>
-          </DescriptionListGroup>
-          <DescriptionListGroup>
-            <DescriptionListTerm>Pod IP</DescriptionListTerm>
-            <DescriptionListDescription>10..345.2.197</DescriptionListDescription>
-          </DescriptionListGroup>
-          <DescriptionListGroup>
-            <DescriptionListTerm>Annotations</DescriptionListTerm>
-            <DescriptionListDescription>stuff</DescriptionListDescription>
-          </DescriptionListGroup>
-          <DescriptionListGroup>
-            <DescriptionListTerm>Node</DescriptionListTerm>
-            <DescriptionListDescription>
-              <Flex spaceItems={{ default: 'spaceItemsSm' }}>
-                <FlexItem>
-                  <Label color="purple">N</Label>
-                </FlexItem>
-                <FlexItem>ip-10-0-233-118.us-east-2.computer.external</FlexItem>
-              </Flex>
-            </DescriptionListDescription>
-          </DescriptionListGroup>
-          <DescriptionListGroup>
-            <DescriptionListTerm>Created at</DescriptionListTerm>
-            <DescriptionListDescription>
-              <time>Oct 15, 1:51 pm</time>
-            </DescriptionListDescription>
-          </DescriptionListGroup>
-        </DescriptionList>
-      </FlexItem>
-    </Flex>
-  );
+```ts file="examples/Tabs/TabsOpenWithSecondaryTabs.tsx" isFullscreen
 
-  return (
-    <DashboardWrapper hasNoBreadcrumb>
-      {tabsBreadcrumb}
-      <PageSection isWidthLimited aria-label='Pod header'>
-        <Flex
-          spaceItems={{ default: 'spaceItemsMd' }}
-          alignItems={{ default: 'alignItemsFlexStart' }}
-          flexWrap={{ default: 'noWrap' }}
-        >
-          <FlexItem>
-            <Label color="blue">N</Label>
-          </FlexItem>
-          <FlexItem>
-            <Title headingLevel="h1" size="2xl">
-              3scale-control-fccb6ddb9-phyqv9
-            </Title>
-          </FlexItem>
-          <FlexItem flex={{ default: 'flexNone' }}>
-            <Label icon={<InfoCircleIcon />}>Running</Label>
-          </FlexItem>
-        </Flex>
-      </PageSection>
-      <PageSection type="tabs" isWidthLimited aria-label='Pod navigation tabs'>
-        <Tabs activeKey={activeTabKey} onSelect={handleTabClick} usePageInsets id="open-tabs-example-tabs-list">
-          <Tab eventKey={0} title={<TabTitleText>Details</TabTitleText>} tabContentId={`tabContent${0}`} />
-          <Tab eventKey={1} title={<TabTitleText>YAML</TabTitleText>} tabContentId={`tabContent${1}`} />
-          <Tab eventKey={2} title={<TabTitleText>Environment</TabTitleText>} tabContentId={`tabContent${2}`} />
-          <Tab eventKey={3} title={<TabTitleText>Events</TabTitleText>} tabContentId={`tabContent${3}`} />
-          <Tab eventKey={4} title={<TabTitleText>Terminal</TabTitleText>} tabContentId={`tabContent${4}`} />
-        </Tabs>
-      </PageSection>
-      <PageSection isWidthLimited padding={{ default: 'noPadding' }} aria-label='Pod content'>
-        <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
-          <TabContentBody>
-            <Tabs
-              isSecondary
-              activeKey={activeTabKeySecondary}
-              onSelect={handleTabClickSecondary}
-              usePageInsets
-              id="open-with-secondary-tabs-example-tabs-list-secondary"
-            >
-              <Tab
-                eventKey={10}
-                title={<TabTitleText>Pod information</TabTitleText>}
-                tabContentId={`tabContent${10}`}
-              />
-              <Tab
-                eventKey={11}
-                title={<TabTitleText>Editable aspects</TabTitleText>}
-                tabContentId={`tabContent${11}`}
-              />
-            </Tabs>
-            <TabContent
-              key={10}
-              eventKey={10}
-              id={`tabContent${10}`}
-              activeKey={activeTabKeySecondary}
-              hidden={10 !== activeTabKeySecondary}
-            >
-              <TabContentBody hasPadding>{tabContent}</TabContentBody>
-            </TabContent>
-            <TabContent
-              key={11}
-              eventKey={11}
-              id={`tabContent${11}`}
-              activeKey={activeTabKeySecondary}
-              hidden={11 !== activeTabKeySecondary}
-            >
-              <TabContentBody>Editable aspects</TabContentBody>
-            </TabContent>
-          </TabContentBody>
-        </TabContent>
-        <TabContent key={1} eventKey={1} id={`tabContent${1}`} activeKey={activeTabKey} hidden={1 !== activeTabKey}>
-          <TabContentBody>YAML panel</TabContentBody>
-        </TabContent>
-        <TabContent key={2} eventKey={2} id={`tabContent${2}`} activeKey={activeTabKey} hidden={2 !== activeTabKey}>
-          <TabContentBody>Environment panel</TabContentBody>
-        </TabContent>
-        <TabContent key={3} eventKey={3} id={`tabContent${3}`} activeKey={activeTabKey} hidden={3 !== activeTabKey}>
-          <TabContentBody>Events panel</TabContentBody>
-        </TabContent>
-        <TabContent key={4} eventKey={4} id={`tabContent${4}`} activeKey={activeTabKey} hidden={4 !== activeTabKey}>
-          <TabContentBody>Terminal panel</TabContentBody>
-        </TabContent>
-      </PageSection>
-    </DashboardWrapper>
-  );
-};
 ```
 
 ### Nested tabs
 
-```js isFullscreen file="./examples/Tabs/NestedTabs.tsx"
+```ts isFullscreen file="examples/Tabs/NestedTabs.tsx"
 
 ```
 
 ### Nested, unindented tabs
 
-```js isFullscreen file="./examples/Tabs/NestedUnindentedTabs.tsx"
+```ts isFullscreen file="examples/Tabs/NestedUnindentedTabs.tsx"
 
 ```
 
 ### Tables and tabs
 
-```js isFullscreen file="./examples/Tabs/TabsAndTable.tsx"
+```ts isFullscreen file="examples/Tabs/TabsAndTable.tsx"
 
 ```
 
 ### Modal tabs
 
-```js isFullscreen file="./examples/Tabs/ModalTabs.tsx"
+```ts isFullscreen file="examples/Tabs/ModalTabs.tsx"
 
 ```

package/src/demos/Wizard/WizardDemo.md

@@ -14,30 +14,30 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 
 ### In modal
 
-```js file="../examples/Wizard/InModal.tsx" isFullscreen
+```ts file="../examples/Wizard/InModal.tsx" isFullscreen
 ```
 
 ### In modal, with drawer
 
-```js file="../examples/Wizard/InModalWithDrawer.tsx" isFullscreen
+```ts file="../examples/Wizard/InModalWithDrawer.tsx" isFullscreen
 ```
 
 ### In modal, with drawer and informational step
 
-```js file="../examples/Wizard/InModalWithDrawerInformationalStep.tsx" isFullscreen
+```ts file="../examples/Wizard/InModalWithDrawerInformationalStep.tsx" isFullscreen
 ```
 
 ### In page
 
-```js file="../examples/Wizard/InPage.tsx" isFullscreen
+```ts file="../examples/Wizard/InPage.tsx" isFullscreen
 ```
 
 ### In page, with drawer
 
-```js file="../examples/Wizard/InPageWithDrawer.tsx" isFullscreen
+```ts file="../examples/Wizard/InPageWithDrawer.tsx" isFullscreen
 ```
 
 ### In page, with drawer and informational step
 
-```js file="../examples/Wizard/InPageWithDrawerInformationalStep.tsx" isFullscreen
+```ts file="../examples/Wizard/InPageWithDrawerInformationalStep.tsx" isFullscreen
 ```

package/src/demos/assets/PF-IconLogo-color.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="158px" height="158px" viewBox="0 0 158 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>PF-IconLogo-color </title>
+    <defs>
+        <linearGradient x1="68%" y1="2.25860997e-13%" x2="32%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#2B9AF3" offset="0%"></stop>
+            <stop stop-color="#73BCF7" stop-opacity="0.502212631" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="PF-IconLogo-color" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Logo">
+            <path d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z" id="Rectangle-Copy-17" fill="#0066CC"></path>
+            <path d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z" id="Path-2" fill="url(#linearGradient-1)"></path>
+            <path d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z" id="Path-2" fill="url(#linearGradient-1)" transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "></path>
+        </g>
+    </g>
+</svg>

package/src/demos/examples/Banner/BannerBasicSticky.tsx

@@ -0,0 +1,55 @@
+import { Fragment } from 'react';
+import { Banner, Card, CardBody, Flex, Gallery, GalleryItem, PageSection, Content } from '@patternfly/react-core';
+
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import { css } from '@patternfly/react-styles';
+import display from '@patternfly/react-styles/css/utilities/Display/display';
+
+export const BannerBasicSticky: React.FunctionComponent = () => {
+  const banner = (
+    <Banner isSticky>
+      <Flex
+        justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
+        flexWrap={{ default: 'nowrap' }}
+      >
+        <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
+
+        <div className={css(display.displayNone, display.displayBlockOnLg)}>
+          This message is sticky to the top of the page.
+        </div>
+
+        <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
+
+        <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
+      </Flex>
+    </Banner>
+  );
+
+  return (
+    <Fragment>
+      <DashboardWrapper banner={banner} breadcrumb={null}>
+        <PageSection aria-labelledby="main-title">
+          <Content>
+            <h1 id="main-title">Main title</h1>
+            <p>
+              Body text should be Red Hat Text at 1rem (16px). It should have leading of 1.5rem (24px) because <br />
+              of its relative line height of 1.5.
+            </p>
+          </Content>
+        </PageSection>
+
+        <PageSection aria-label="Cards gallery">
+          <Gallery hasGutter>
+            {Array.from({ length: 30 }).map((_value, index) => (
+              <GalleryItem key={index}>
+                <Card>
+                  <CardBody>This is a card</CardBody>
+                </Card>
+              </GalleryItem>
+            ))}
+          </Gallery>
+        </PageSection>
+      </DashboardWrapper>
+    </Fragment>
+  );
+};

package/src/demos/examples/Banner/BannerTopBottom.tsx

@@ -0,0 +1,81 @@
+import { Fragment } from 'react';
+import {
+  Banner,
+  Card,
+  CardBody,
+  Flex,
+  FlexItem,
+  Gallery,
+  GalleryItem,
+  PageSection,
+  Content
+} from '@patternfly/react-core';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import { css } from '@patternfly/react-styles';
+import display from '@patternfly/react-styles/css/utilities/Display/display';
+
+export const BannerTopBottom: React.FunctionComponent = () => (
+  <Fragment>
+    <Flex
+      direction={{ default: 'column' }}
+      flexWrap={{ default: 'nowrap' }}
+      spaceItems={{ default: 'spaceItemsNone' }}
+      style={{ height: '100%' }}
+    >
+      <FlexItem>
+        <Banner isSticky>
+          <Flex
+            justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
+            flexWrap={{ default: 'nowrap' }}
+          >
+            <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
+            <div className={css(display.displayNone, display.displayBlockOnLg)}>
+              This message is sticky to the top of the page.
+            </div>
+            <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
+            <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
+          </Flex>
+        </Banner>
+      </FlexItem>
+      <FlexItem grow={{ default: 'grow' }} style={{ minHeight: 0 }}>
+        <DashboardWrapper breadcrumb={null}>
+          <PageSection aria-labelledby="main-title">
+            <Content>
+              <h1 id="main-title">Main title</h1>
+              <p>
+                Body text should be Red Hat Text at 1rem (16px). It should have leading of 1.5rem(24px) because <br />
+                of it's relative line height of 1.5.
+              </p>
+            </Content>
+          </PageSection>
+          <PageSection aria-label="Cards gallery">
+            <Gallery hasGutter>
+              {Array.from({ length: 30 }).map((_value, index) => (
+                <GalleryItem key={index}>
+                  <Card key={index}>
+                    <CardBody>This is a card</CardBody>
+                  </Card>
+                </GalleryItem>
+              ))}
+            </Gallery>
+          </PageSection>
+        </DashboardWrapper>
+      </FlexItem>
+      <FlexItem>
+        <Banner isSticky>
+          <Flex
+            justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
+            flexWrap={{ default: 'nowrap' }}
+          >
+            <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
+            <div className={css(display.displayNone, display.displayBlockOnLg)}>
+              This message is sticky to the bottom of the page.
+            </div>
+            <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
+            <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
+          </Flex>
+        </Banner>
+      </FlexItem>
+    </Flex>
+  </Fragment>
+);