@patternfly/react-core 5.2.0-prerelease.2 → 5.2.0-prerelease.21

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

@@ -0,0 +1,514 @@
+import React from 'react';
+import {
+  Card,
+  CardTitle,
+  CardBody,
+  CardHeader,
+  Title,
+  Accordion,
+  AccordionItem,
+  AccordionToggle,
+  AccordionContent,
+  Divider,
+  Grid,
+  GridItem,
+  Flex,
+  FlexItem
+} from '@patternfly/react-core';
+import { ChartArea, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts';
+import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
+import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
+
+export const CardWithAccordion: React.FunctionComponent = () => {
+  const [openCPU, setOpenCPU] = React.useState('cpu1');
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>
+          <Title headingLevel="h4" size="lg">
+            Hardware Monitor
+          </Title>
+        </CardTitle>
+      </CardHeader>
+      <CardBody>
+        <Accordion>
+          <AccordionItem>
+            <AccordionToggle
+              id="cpu1-toggle"
+              onClick={() => {
+                if (openCPU === 'cpu1') {
+                  setOpenCPU(null);
+                } else {
+                  setOpenCPU('cpu1');
+                }
+              }}
+              isExpanded={openCPU === 'cpu1'}
+            >
+              CPU 1
+            </AccordionToggle>
+            <AccordionContent isHidden={openCPU !== 'cpu1'}>
+              <Grid hasGutter>
+                <Grid hasGutter>
+                  <GridItem md={4}>
+                    <Flex
+                      className={sizing.h_100OnMd}
+                      direction={{ md: 'column' }}
+                      spaceItems={{ md: 'spaceItemsNone' }}
+                      justifyContent={{ md: 'justifyContentCenter' }}
+                    >
+                      <FlexItem>
+                        <b>Temperature</b>
+                      </FlexItem>
+                      <Divider
+                        className={accessibility.hiddenOnMd}
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
+                      <FlexItem>
+                        <span>64C</span>
+                      </FlexItem>
+                    </Flex>
+                  </GridItem>
+                  <GridItem md={8}>
+                    <Grid hasGutter>
+                      <GridItem span={2}>
+                        <Flex
+                          direction={{ default: 'column' }}
+                          spaceItems={{ default: 'spaceItemsNone' }}
+                          alignItems={{ md: 'alignItemsFlexEnd' }}
+                        >
+                          <FlexItem>100C</FlexItem>
+                          <FlexItem>50C</FlexItem>
+                          <FlexItem>0C</FlexItem>
+                        </Flex>
+                      </GridItem>
+                      <GridItem span={10}>
+                        <ChartGroup
+                          ariaDesc="Mock CPU temperature"
+                          ariaTitle="Mock CPU temperature sparkline chart"
+                          containerComponent={
+                            <ChartVoronoiContainer
+                              labels={({ datum }) => `${datum.name}: ${datum.y}`}
+                              constrainToVisibleArea
+                            />
+                          }
+                          height={60}
+                          maxDomain={{ y: 100 }}
+                          padding={0}
+                          width={400}
+                        >
+                          <ChartArea
+                            data={[
+                              { name: 'Temp', x: '1', y: 25 },
+                              { name: 'Temp', x: '2', y: 40 },
+                              { name: 'Temp', x: '3', y: 20 },
+                              { name: 'Temp', x: '4', y: 60 },
+                              { name: 'Temp', x: '5', y: 20 },
+                              { name: 'Temp', x: '6', y: 41 },
+                              { name: 'Temp', x: '7', y: 45 },
+                              { name: 'Temp', x: '8', y: 41 },
+                              { name: 'Temp', x: '9', y: 62 }
+                            ]}
+                          />
+                        </ChartGroup>
+                      </GridItem>
+                    </Grid>
+                  </GridItem>
+                </Grid>
+                <Divider className={accessibility.hiddenOnMd} />
+                <Grid hasGutter>
+                  <GridItem md={4}>
+                    <Flex
+                      className={sizing.h_100OnMd}
+                      direction={{ md: 'column' }}
+                      spaceItems={{ md: 'spaceItemsNone' }}
+                      justifyContent={{ md: 'justifyContentCenter' }}
+                    >
+                      <FlexItem>
+                        <b>Speed</b>
+                      </FlexItem>
+                      <Divider
+                        className={accessibility.hiddenOnMd}
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
+                      <FlexItem>
+                        <span>2.3Ghz</span>
+                      </FlexItem>
+                    </Flex>
+                  </GridItem>
+                  <GridItem md={8}>
+                    <Grid hasGutter>
+                      <GridItem span={2}>
+                        <Flex
+                          direction={{ default: 'column' }}
+                          spaceItems={{ default: 'spaceItemsNone' }}
+                          alignItems={{ md: 'alignItemsFlexEnd' }}
+                        >
+                          <FlexItem>3.6Ghz</FlexItem>
+                          <FlexItem>1.5Ghz</FlexItem>
+                          <FlexItem>0GHZ</FlexItem>
+                        </Flex>
+                      </GridItem>
+                      <GridItem span={10}>
+                        <ChartGroup
+                          ariaDesc="Mock CPU speed"
+                          ariaTitle="Mock CPU speed sparkline chart"
+                          containerComponent={
+                            <ChartVoronoiContainer
+                              labels={({ datum }) => `${datum.name}: ${datum.y}`}
+                              constrainToVisibleArea
+                            />
+                          }
+                          height={60}
+                          maxDomain={{ y: 3.6 }}
+                          padding={0}
+                          width={400}
+                        >
+                          <ChartArea
+                            data={[
+                              { name: 'Temp', x: '1', y: 0.9 },
+                              { name: 'Temp', x: '2', y: 1.44 },
+                              { name: 'Temp', x: '3', y: 0.72 },
+                              { name: 'Temp', x: '4', y: 2.16 },
+                              { name: 'Temp', x: '5', y: 0.72 },
+                              { name: 'Temp', x: '6', y: 1.48 },
+                              { name: 'Temp', x: '7', y: 1.62 },
+                              { name: 'Temp', x: '8', y: 1.48 },
+                              { name: 'Temp', x: '9', y: 2.23 }
+                            ]}
+                          />
+                        </ChartGroup>
+                      </GridItem>
+                    </Grid>
+                  </GridItem>
+                </Grid>
+              </Grid>
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem>
+            <AccordionToggle
+              id="cpu2-toggle"
+              onClick={() => {
+                if (openCPU === 'cpu2') {
+                  setOpenCPU(null);
+                } else {
+                  setOpenCPU('cpu2');
+                }
+              }}
+              isExpanded={openCPU === 'cpu2'}
+            >
+              CPU 2
+            </AccordionToggle>
+            <AccordionContent isHidden={openCPU !== 'cpu2'}>
+              <Grid hasGutter>
+                <Grid hasGutter>
+                  <GridItem md={4}>
+                    <Flex
+                      className={sizing.h_100OnMd}
+                      direction={{ md: 'column' }}
+                      spaceItems={{ md: 'spaceItemsNone' }}
+                      justifyContent={{ md: 'justifyContentCenter' }}
+                    >
+                      <FlexItem>
+                        <b>Temperature</b>
+                      </FlexItem>
+                      <Divider
+                        className={accessibility.hiddenOnMd}
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
+                      <FlexItem>
+                        <span>64C</span>
+                      </FlexItem>
+                    </Flex>
+                  </GridItem>
+                  <GridItem md={8}>
+                    <Grid hasGutter>
+                      <GridItem span={2}>
+                        <Flex
+                          direction={{ default: 'column' }}
+                          spaceItems={{ default: 'spaceItemsNone' }}
+                          alignItems={{ md: 'alignItemsFlexEnd' }}
+                        >
+                          <FlexItem>100C</FlexItem>
+                          <FlexItem>50C</FlexItem>
+                          <FlexItem>0C</FlexItem>
+                        </Flex>
+                      </GridItem>
+                      <GridItem span={10}>
+                        <ChartGroup
+                          ariaDesc="Mock CPU temperature"
+                          ariaTitle="Mock CPU temperature sparkline chart"
+                          containerComponent={
+                            <ChartVoronoiContainer
+                              labels={({ datum }) => `${datum.name}: ${datum.y}`}
+                              constrainToVisibleArea
+                            />
+                          }
+                          height={60}
+                          maxDomain={{ y: 100 }}
+                          padding={0}
+                          width={400}
+                        >
+                          <ChartArea
+                            data={[
+                              { name: 'Temp', x: '1', y: 25 },
+                              { name: 'Temp', x: '2', y: 40 },
+                              { name: 'Temp', x: '3', y: 20 },
+                              { name: 'Temp', x: '4', y: 60 },
+                              { name: 'Temp', x: '5', y: 20 },
+                              { name: 'Temp', x: '6', y: 41 },
+                              { name: 'Temp', x: '7', y: 45 },
+                              { name: 'Temp', x: '8', y: 41 },
+                              { name: 'Temp', x: '9', y: 62 }
+                            ]}
+                          />
+                        </ChartGroup>
+                      </GridItem>
+                    </Grid>
+                  </GridItem>
+                </Grid>
+                <Divider className={accessibility.hiddenOnMd} />
+                <Grid hasGutter>
+                  <GridItem md={4}>
+                    <Flex
+                      className={sizing.h_100OnMd}
+                      direction={{ md: 'column' }}
+                      spaceItems={{ md: 'spaceItemsNone' }}
+                      justifyContent={{ md: 'justifyContentCenter' }}
+                    >
+                      <FlexItem>
+                        <b>Speed</b>
+                      </FlexItem>
+                      <Divider
+                        className={accessibility.hiddenOnMd}
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
+                      <FlexItem>
+                        <span>2.3Ghz</span>
+                      </FlexItem>
+                    </Flex>
+                  </GridItem>
+                  <GridItem md={8}>
+                    <Grid hasGutter>
+                      <GridItem span={2}>
+                        <Flex
+                          direction={{ default: 'column' }}
+                          spaceItems={{ default: 'spaceItemsNone' }}
+                          alignItems={{ md: 'alignItemsFlexEnd' }}
+                        >
+                          <FlexItem>3.6Ghz</FlexItem>
+                          <FlexItem>1.5Ghz</FlexItem>
+                          <FlexItem>0GHZ</FlexItem>
+                        </Flex>
+                      </GridItem>
+                      <GridItem span={10}>
+                        <ChartGroup
+                          ariaDesc="Mock CPU speed"
+                          ariaTitle="Mock CPU speed sparkline chart"
+                          containerComponent={
+                            <ChartVoronoiContainer
+                              labels={({ datum }) => `${datum.name}: ${datum.y}`}
+                              constrainToVisibleArea
+                            />
+                          }
+                          height={60}
+                          maxDomain={{ y: 3.6 }}
+                          padding={0}
+                          width={400}
+                        >
+                          <ChartArea
+                            data={[
+                              { name: 'Temp', x: '1', y: 0.9 },
+                              { name: 'Temp', x: '2', y: 1.44 },
+                              { name: 'Temp', x: '3', y: 0.72 },
+                              { name: 'Temp', x: '4', y: 2.16 },
+                              { name: 'Temp', x: '5', y: 0.72 },
+                              { name: 'Temp', x: '6', y: 1.48 },
+                              { name: 'Temp', x: '7', y: 1.62 },
+                              { name: 'Temp', x: '8', y: 1.48 },
+                              { name: 'Temp', x: '9', y: 2.23 }
+                            ]}
+                          />
+                        </ChartGroup>
+                      </GridItem>
+                    </Grid>
+                  </GridItem>
+                </Grid>
+              </Grid>
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem>
+            <AccordionToggle
+              id="cpu3-toggle"
+              onClick={() => {
+                if (openCPU === 'cpu3') {
+                  setOpenCPU(null);
+                } else {
+                  setOpenCPU('cpu3');
+                }
+              }}
+              isExpanded={openCPU === 'cpu3'}
+            >
+              CPU 3
+            </AccordionToggle>
+            <AccordionContent isHidden={openCPU !== 'cpu3'}>
+              <Grid hasGutter>
+                <Grid hasGutter>
+                  <GridItem md={4}>
+                    <Flex
+                      className={sizing.h_100OnMd}
+                      direction={{ md: 'column' }}
+                      spaceItems={{ md: 'spaceItemsNone' }}
+                      justifyContent={{ md: 'justifyContentCenter' }}
+                    >
+                      <FlexItem>
+                        <b>Temperature</b>
+                      </FlexItem>
+                      <Divider
+                        className={accessibility.hiddenOnMd}
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
+                      <FlexItem>
+                        <span>64C</span>
+                      </FlexItem>
+                    </Flex>
+                  </GridItem>
+                  <GridItem md={8}>
+                    <Grid hasGutter>
+                      <GridItem span={2}>
+                        <Flex
+                          direction={{ default: 'column' }}
+                          spaceItems={{ default: 'spaceItemsNone' }}
+                          alignItems={{ md: 'alignItemsFlexEnd' }}
+                        >
+                          <FlexItem>100C</FlexItem>
+                          <FlexItem>50C</FlexItem>
+                          <FlexItem>0C</FlexItem>
+                        </Flex>
+                      </GridItem>
+                      <GridItem span={10}>
+                        <ChartGroup
+                          ariaDesc="Mock CPU temperature"
+                          ariaTitle="Mock CPU temperature sparkline chart"
+                          containerComponent={
+                            <ChartVoronoiContainer
+                              labels={({ datum }) => `${datum.name}: ${datum.y}`}
+                              constrainToVisibleArea
+                            />
+                          }
+                          height={60}
+                          maxDomain={{ y: 100 }}
+                          padding={0}
+                          width={400}
+                        >
+                          <ChartArea
+                            data={[
+                              { name: 'Temp', x: '1', y: 25 },
+                              { name: 'Temp', x: '2', y: 40 },
+                              { name: 'Temp', x: '3', y: 20 },
+                              { name: 'Temp', x: '4', y: 60 },
+                              { name: 'Temp', x: '5', y: 20 },
+                              { name: 'Temp', x: '6', y: 41 },
+                              { name: 'Temp', x: '7', y: 45 },
+                              { name: 'Temp', x: '8', y: 41 },
+                              { name: 'Temp', x: '9', y: 62 }
+                            ]}
+                          />
+                        </ChartGroup>
+                      </GridItem>
+                    </Grid>
+                  </GridItem>
+                </Grid>
+                <Divider className={accessibility.hiddenOnMd} />
+                <Grid hasGutter>
+                  <GridItem md={4}>
+                    <Flex
+                      className={sizing.h_100OnMd}
+                      direction={{ md: 'column' }}
+                      spaceItems={{ md: 'spaceItemsNone' }}
+                      justifyContent={{ md: 'justifyContentCenter' }}
+                    >
+                      <FlexItem>
+                        <b>Speed</b>
+                      </FlexItem>
+                      <Divider
+                        className={accessibility.hiddenOnMd}
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
+                      <FlexItem>
+                        <span>2.3Ghz</span>
+                      </FlexItem>
+                    </Flex>
+                  </GridItem>
+                  <GridItem md={8}>
+                    <Grid hasGutter>
+                      <GridItem span={2}>
+                        <Flex
+                          direction={{ default: 'column' }}
+                          spaceItems={{ default: 'spaceItemsNone' }}
+                          alignItems={{ md: 'alignItemsFlexEnd' }}
+                        >
+                          <FlexItem>3.6Ghz</FlexItem>
+                          <FlexItem>1.5Ghz</FlexItem>
+                          <FlexItem>0GHZ</FlexItem>
+                        </Flex>
+                      </GridItem>
+                      <GridItem span={10}>
+                        <ChartGroup
+                          ariaDesc="Mock CPU speed"
+                          ariaTitle="Mock CPU speed sparkline chart"
+                          containerComponent={
+                            <ChartVoronoiContainer
+                              labels={({ datum }) => `${datum.name}: ${datum.y}`}
+                              constrainToVisibleArea
+                            />
+                          }
+                          height={60}
+                          maxDomain={{ y: 3.6 }}
+                          padding={0}
+                          width={400}
+                        >
+                          <ChartArea
+                            data={[
+                              { name: 'Temp', x: '1', y: 0.9 },
+                              { name: 'Temp', x: '2', y: 1.44 },
+                              { name: 'Temp', x: '3', y: 0.72 },
+                              { name: 'Temp', x: '4', y: 2.16 },
+                              { name: 'Temp', x: '5', y: 0.72 },
+                              { name: 'Temp', x: '6', y: 1.48 },
+                              { name: 'Temp', x: '7', y: 1.62 },
+                              { name: 'Temp', x: '8', y: 1.48 },
+                              { name: 'Temp', x: '9', y: 2.23 }
+                            ]}
+                          />
+                        </ChartGroup>
+                      </GridItem>
+                    </Grid>
+                  </GridItem>
+                </Grid>
+              </Grid>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </CardBody>
+    </Card>
+  );
+};

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

@@ -19,7 +19,8 @@ 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';
+import mastheadStyles from '@patternfly/react-styles/css/components/Masthead/masthead';
 
 export const JumpLinksWithDrawer = () => {
   const headings = ['First', 'Second', 'Third', 'Fourth', 'Fifth'];
@@ -29,7 +30,7 @@ export const JumpLinksWithDrawer = () => {
   const drawerRef = React.useRef();
 
   React.useEffect(() => {
-    const masthead = document.getElementsByClassName('pf-v5-c-masthead')[0];
+    const masthead = document.getElementsByClassName(mastheadStyles.masthead)[0];
     const drawerToggleSection = document.getElementById('drawer-toggle');
 
     getResizeObserver(

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

@@ -0,0 +1,98 @@
+import React from 'react';
+import {
+  Card,
+  CardBody,
+  Gallery,
+  GalleryItem,
+  Nav,
+  NavItem,
+  NavList,
+  Page,
+  PageSection,
+  PageSectionVariants,
+  PageSidebar,
+  PageSidebarBody,
+  SkipToContent,
+  TextContent,
+  Text
+} from '@patternfly/react-core';
+import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
+
+export const NavDefault: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState<number | string>(0);
+
+  const onNavSelect = (
+    _event: React.FormEvent<HTMLInputElement>,
+    selectedItem: {
+      groupId: number | string;
+      itemId: number | string;
+      to: string;
+    }
+  ) => setActiveItem(selectedItem.itemId);
+
+  const PageNav = (
+    <Nav onSelect={onNavSelect} aria-label="Nav">
+      <NavList>
+        {/* Preventing default click behavior on each NavItem for demo purposes only */}
+        <NavItem preventDefault itemId={0} isActive={activeItem === 0} to="#">
+          System Panel
+        </NavItem>
+        <NavItem preventDefault itemId={1} isActive={activeItem === 1} to="#">
+          Policy
+        </NavItem>
+        <NavItem preventDefault itemId={2} isActive={activeItem === 2} to="#">
+          Authentication
+        </NavItem>
+        <NavItem preventDefault itemId={3} isActive={activeItem === 3} to="#">
+          Network Services
+        </NavItem>
+        <NavItem preventDefault itemId={4} isActive={activeItem === 4} to="#">
+          Server
+        </NavItem>
+      </NavList>
+    </Nav>
+  );
+
+  const Sidebar = (
+    <PageSidebar>
+      <PageSidebarBody>{PageNav}</PageSidebarBody>
+    </PageSidebar>
+  );
+  const pageId = 'main-content-page-layout-default-nav';
+  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
+
+  return (
+    <>
+      <Page
+        header={<DashboardHeader />}
+        sidebar={Sidebar}
+        isManagedSidebar
+        skipToContent={PageSkipToContent}
+        breadcrumb={DashboardBreadcrumb}
+        mainContainerId={pageId}
+      >
+        <PageSection variant={PageSectionVariants.light}>
+          <TextContent>
+            <Text component="h1">Main title</Text>
+            <Text component="p">
+              Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
+              of its relative line height of 1.5.
+            </Text>
+          </TextContent>
+        </PageSection>
+        <PageSection>
+          <Gallery hasGutter>
+            {Array.from({ length: 10 }, (_value: any, index: React.Key) => (
+              <GalleryItem key={index}>
+                <Card>
+                  <CardBody>This is a card</CardBody>
+                </Card>
+              </GalleryItem>
+            ))}
+          </Gallery>
+        </PageSection>
+      </Page>
+    </>
+  );
+};

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

@@ -13,6 +13,7 @@ import {
   PageSection
 } from '@patternfly/react-core';
 import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
+
 interface MenuHeights {
   [menuId: string]: number;
 }
@@ -26,6 +27,7 @@ function getNavLayer(menuId: string): number {
     case 'subMenu-2':
       return 3;
   }
+  return 1;
 }
 
 const subMenuTwo: JSX.Element = (