@patternfly/react-core 5.2.0-prerelease.5 → 5.2.0-prerelease.7

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

@@ -0,0 +1,154 @@
+/* eslint-disable camelcase */
+import React from 'react';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardBody,
+  CardFooter,
+  Gallery,
+  Flex,
+  FlexItem,
+  Title,
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  DescriptionListDescription,
+  Spinner,
+  Select,
+  SelectList,
+  SelectOption,
+  Divider,
+  MenuToggle
+} from '@patternfly/react-core';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import flex from '@patternfly/react-styles/css/utilities/Flex/flex';
+import text from '@patternfly/react-styles/css/utilities/Text/text';
+import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
+
+export const CardEventsView: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const selectItems = (
+    <SelectList>
+      <SelectOption value="Success" key="option1">
+        Success
+      </SelectOption>
+      <SelectOption value="Error" key="option2">
+        Error
+      </SelectOption>
+      <SelectOption value="Warning" key="option3">
+        Error
+      </SelectOption>
+    </SelectList>
+  );
+
+  const toggle = (toggleRef) => (
+    <MenuToggle ref={toggleRef} onClick={() => setIsOpen(!isOpen)} isExpanded={isOpen} variant="plainText">
+      Status
+    </MenuToggle>
+  );
+
+  const headerActions = (
+    <Select onSelect={() => setIsOpen(!isOpen)} onOpenChange={setIsOpen} isOpen={isOpen} toggle={toggle}>
+      {selectItems}
+    </Select>
+  );
+  return (
+    <React.Fragment>
+      <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}
+      <code>baseline</code> alignment.
+      <br />
+      <br />
+      <Gallery hasGutter style={{ [l_gallery_GridTemplateColumns_min.name]: '360px' } as React.CSSProperties}>
+        <Card id="card-events-view-example">
+          <CardHeader className={flex.alignItemsFlexStart} actions={{ actions: headerActions, hasNoOffset: true }}>
+            <CardTitle>
+              <Title headingLevel="h4" size="xl" style={{ paddingTop: '3px' }}>
+                Events
+              </Title>
+            </CardTitle>
+          </CardHeader>
+          <CardBody>
+            <DescriptionList>
+              <DescriptionListGroup>
+                <DescriptionListTerm>
+                  <Flex flexWrap={{ default: 'nowrap' }}>
+                    <FlexItem>
+                      <ExclamationCircleIcon className={text.dangerColor_100} aria-hidden="true" />
+                    </FlexItem>
+                    <FlexItem>
+                      <span>Readiness probe failed</span>
+                    </FlexItem>
+                  </Flex>
+                </DescriptionListTerm>
+                <DescriptionListDescription>
+                  Readiness probe failed: Get https://10.131.0.7:5000/healthz: dial tcp 10.131.0.7:5000: connect:
+                  connection refused
+                </DescriptionListDescription>
+                <DescriptionListDescription>
+                  <time className={`${text.color_200} ${text.fontSizeSm}`}>Jun 17, 11:02 am</time>
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+              <DescriptionListGroup>
+                <DescriptionListTerm>
+                  <Flex flexWrap={{ default: 'nowrap' }}>
+                    <FlexItem>
+                      <CheckCircleIcon className={text.successColor_100} aria-hidden="true" />
+                    </FlexItem>
+                    <FlexItem>
+                      <span>Successful assignment</span>
+                    </FlexItem>
+                  </Flex>
+                </DescriptionListTerm>
+                <DescriptionListDescription>
+                  Successfully assigned default/example to ip-10-0-130-149.ec2.internal
+                </DescriptionListDescription>
+                <DescriptionListDescription>
+                  <time className={`${text.color_200} ${text.fontSizeSm}`}>Jun 17, 11:13 am</time>
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+              <DescriptionListGroup>
+                <DescriptionListTerm>
+                  <Flex flexWrap={{ default: 'nowrap' }}>
+                    <FlexItem>
+                      <Spinner size="md" aria-label="loading spinner" />
+                    </FlexItem>
+                    <FlexItem>
+                      <span>Pulling image</span>
+                    </FlexItem>
+                  </Flex>
+                </DescriptionListTerm>
+                <DescriptionListDescription>Pulling image "openshift/hello-openshift"</DescriptionListDescription>
+                <DescriptionListDescription>
+                  <time className={`${text.color_200} ${text.fontSizeSm}`}>Jun 17, 10:59 am</time>
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+              <DescriptionListGroup>
+                <DescriptionListTerm>
+                  <Flex flexWrap={{ default: 'nowrap' }}>
+                    <FlexItem>
+                      <CheckCircleIcon className={text.successColor_100} aria-hidden="true" />
+                    </FlexItem>
+                    <FlexItem>
+                      <span>Created container</span>
+                    </FlexItem>
+                  </Flex>
+                </DescriptionListTerm>
+                <DescriptionListDescription>Created container hello-openshift</DescriptionListDescription>
+                <DescriptionListDescription>
+                  <time className={`${text.color_200} ${text.fontSizeSm}`}>Jun 17, 10:45 am</time>
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+            </DescriptionList>
+          </CardBody>
+          <Divider />
+          <CardFooter>
+            <a href="#">View all events</a>
+          </CardFooter>
+        </Card>
+      </Gallery>
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,240 @@
+import React from 'react';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardBody,
+  CardExpandableContent,
+  Level,
+  LabelGroup,
+  Label,
+  Grid,
+  Flex,
+  List,
+  ListItem,
+  Button,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement
+} from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+
+export const CardHorizontalGrid: React.FunctionComponent = () => {
+  const [isCardExpanded, setIsCardExpanded] = React.useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+
+  const onCardExpand = () => {
+    setIsCardExpanded(!isCardExpanded);
+  };
+
+  const onActionToggle = () => {
+    setIsDropdownOpen(!isDropdownOpen);
+  };
+
+  const onActionSelect = () => {
+    setIsDropdownOpen(false);
+  };
+
+  const dropdownItems = (
+    <>
+      <DropdownItem key="action1">Action 1</DropdownItem>
+      <DropdownItem key="action2">Action 2</DropdownItem>
+      <DropdownItem key="disabled action3" isDisabled>
+        Disabled Action 3
+      </DropdownItem>
+      <DropdownItem key="action4">Action 4</DropdownItem>
+    </>
+  );
+  const headerActions = (
+    <Dropdown
+      onSelect={onActionSelect}
+      isOpen={isDropdownOpen}
+      popperProps={{ position: 'right' }}
+      onOpenChange={(isOpen: boolean) => setIsDropdownOpen(isOpen)}
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        <MenuToggle
+          ref={toggleRef}
+          isExpanded={isDropdownOpen}
+          onClick={onActionToggle}
+          variant="plain"
+          aria-label="Horizontal card grid demo kebab toggle"
+        >
+          <EllipsisVIcon aria-hidden="true" />
+        </MenuToggle>
+      )}
+    >
+      <DropdownList>{dropdownItems}</DropdownList>
+    </Dropdown>
+  );
+
+  return (
+    <Card id="horizontal card" isExpanded={isCardExpanded}>
+      <CardHeader
+        actions={{ actions: headerActions }}
+        onExpand={onCardExpand}
+        toggleButtonProps={{
+          id: 'toggle-button',
+          'aria-label': 'Actions',
+          'aria-labelledby': 'titleId toggle-button',
+          'aria-expanded': isCardExpanded
+        }}
+      >
+        {isCardExpanded && <CardTitle id="titleId">Getting Started</CardTitle>}
+        {!isCardExpanded && (
+          <Level hasGutter>
+            <CardTitle id="titleId">Getting Started</CardTitle>
+            <LabelGroup isCompact>
+              <Label isCompact icon={<InfoCircleIcon />} color="blue">
+                Set up your cluster
+              </Label>
+              <Label isCompact icon={<InfoCircleIcon />} color="purple">
+                Guided tours
+              </Label>
+              <Label isCompact icon={<InfoCircleIcon />} color="green">
+                Quick starts
+              </Label>
+              <Label isCompact icon={<InfoCircleIcon />} color="orange">
+                Learning resources
+              </Label>
+            </LabelGroup>
+          </Level>
+        )}
+      </CardHeader>
+      <CardExpandableContent>
+        <CardBody>
+          <Grid md={6} lg={3} hasGutter>
+            <Flex
+              spaceItems={{ default: 'spaceItemsLg' }}
+              alignItems={{ default: 'alignItemsFlexStart' }}
+              direction={{ default: 'column' }}
+            >
+              <Flex
+                spaceItems={{ default: 'spaceItemsSm' }}
+                alignItems={{ default: 'alignItemsFlexStart' }}
+                direction={{ default: 'column' }}
+                grow={{ default: 'grow' }}
+              >
+                <Label icon={<InfoCircleIcon />} color="blue">
+                  Set up your cluster
+                </Label>
+                <p>Continue setting up your cluster to access all you cain in the Console</p>
+                <List isPlain>
+                  <ListItem>
+                    <a href="#">Add identity provider</a>
+                  </ListItem>
+                  <ListItem>
+                    <a href="#">Configure alert receivers</a>
+                  </ListItem>
+                  <ListItem>
+                    <a href="#">Configure default ingress certificate</a>
+                  </ListItem>
+                </List>
+              </Flex>
+              <Button href="#" component="a" variant="link" isInline icon={<ArrowRightIcon />} iconPosition="right">
+                View all set up cluster steps
+              </Button>
+            </Flex>
+            <Flex
+              spaceItems={{ default: 'spaceItemsLg' }}
+              alignItems={{ default: 'alignItemsFlexStart' }}
+              direction={{ default: 'column' }}
+            >
+              <Flex
+                spaceItems={{ default: 'spaceItemsSm' }}
+                alignItems={{ default: 'alignItemsFlexStart' }}
+                direction={{ default: 'column' }}
+                grow={{ default: 'grow' }}
+              >
+                <Label icon={<InfoCircleIcon />} color="purple">
+                  Guided tours
+                </Label>
+                <p>Tour some of the key features around the console</p>
+                <List isPlain>
+                  <ListItem>
+                    <a href="#">Tour the console</a>
+                  </ListItem>
+                  <ListItem>
+                    <a href="#">Getting started with Serverless</a>
+                  </ListItem>
+                </List>
+              </Flex>
+              <Button href="#" component="a" variant="link" isInline icon={<ArrowRightIcon />} iconPosition="right">
+                View all guided tours
+              </Button>
+            </Flex>
+            <Flex
+              spaceItems={{ default: 'spaceItemsLg' }}
+              alignItems={{ default: 'alignItemsFlexStart' }}
+              direction={{ default: 'column' }}
+            >
+              <Flex
+                spaceItems={{ default: 'spaceItemsSm' }}
+                alignItems={{ default: 'alignItemsFlexStart' }}
+                direction={{ default: 'column' }}
+                grow={{ default: 'grow' }}
+              >
+                <Label icon={<InfoCircleIcon />} color="green">
+                  Quick starts
+                </Label>
+                <p>Get started with features using our step-by-step documentation</p>
+                <List isPlain>
+                  <ListItem>
+                    <a href="#">Getting started with Serverless</a>
+                  </ListItem>
+                  <ListItem>
+                    <a href="#">Explore virtualization</a>
+                  </ListItem>
+                  <ListItem>
+                    <a href="#">Build pipelines</a>
+                  </ListItem>
+                </List>
+              </Flex>
+              <Button href="#" component="a" variant="link" isInline icon={<ArrowRightIcon />} iconPosition="right">
+                View all quick starts
+              </Button>
+            </Flex>
+            <Flex
+              spaceItems={{ default: 'spaceItemsLg' }}
+              alignItems={{ default: 'alignItemsFlexStart' }}
+              direction={{ default: 'column' }}
+            >
+              <Flex
+                spaceItems={{ default: 'spaceItemsSm' }}
+                alignItems={{ default: 'alignItemsFlexStart' }}
+                direction={{ default: 'column' }}
+                grow={{ default: 'grow' }}
+              >
+                <Label icon={<InfoCircleIcon />} color="orange">
+                  Learning resources
+                </Label>
+                <p>Learn about new features within the Console and get started with demo apps</p>
+                <List isPlain>
+                  <ListItem>
+                    <a href="#">See what's possible with the Explore page</a>
+                  </ListItem>
+                  <ListItem>
+                    <a href="#">
+                      OpenShift 4.5: Top Tasks
+                      <ExternalLinkAltIcon />
+                    </a>
+                  </ListItem>
+                  <ListItem>
+                    <a href="#">Try a demo app</a>
+                  </ListItem>
+                </List>
+              </Flex>
+              <Button href="#" component="a" variant="link" isInline icon={<ArrowRightIcon />} iconPosition="right">
+                View all learning resources
+              </Button>
+            </Flex>
+          </Grid>
+        </CardBody>
+      </CardExpandableContent>
+    </Card>
+  );
+};

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Card, CardTitle, CardBody, CardFooter, Grid, GridItem, Button } from '@patternfly/react-core';
+
+export const CardHorizontalSplitDemo: React.FunctionComponent = () => (
+  <Card id="card-demo-horizontal-split-example" isFlat>
+    <Grid md={6}>
+      <GridItem
+        style={{
+          minHeight: '200px',
+          backgroundPosition: 'center',
+          backgroundSize: 'cover',
+          backgroundImage:
+            'url(https://raw.githubusercontent.com/patternfly/patternfly-react/main/packages/react-integration/demo-app-ts/src/assets/images/pfbg_992.jpg)'
+        }}
+      />
+      <GridItem>
+        <CardTitle>Headline</CardTitle>
+        <CardBody>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu purus, lobortis nec euismod eu,
+          tristique ut sapien. Nullam turpis lectus, aliquet sit amet volutpat eu, semper eget quam. Maecenas in tempus
+          diam. Aenean interdum velit sed massa aliquet, sit amet malesuada nulla hendrerit. Aenean non faucibus odio.
+          Etiam non metus turpis. Praesent sollicitudin elit neque, id ullamcorper nibh faucibus eget.
+        </CardBody>
+        <CardFooter>
+          <Button variant="tertiary">Call to action</Button>
+        </CardFooter>
+      </GridItem>
+    </Grid>
+  </Card>
+);

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

@@ -0,0 +1,118 @@
+/* eslint-disable camelcase */
+import React from 'react';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardBody,
+  CardFooter,
+  Gallery,
+  Title,
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  DescriptionListDescription,
+  Select,
+  SelectList,
+  SelectOption,
+  Divider,
+  MenuToggle,
+  MenuToggleElement
+} from '@patternfly/react-core';
+import text from '@patternfly/react-styles/css/utilities/Text/text';
+import flex from '@patternfly/react-styles/css/utilities/Flex/flex';
+import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
+
+export const CardLogView: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const selectItems = (
+    <SelectList>
+      <SelectOption key="option1" value="Last hour">
+        Last hour
+      </SelectOption>
+      <SelectOption key="option2" value="Last 6 hours">
+        Last 6 hours
+      </SelectOption>
+      <SelectOption key="option3" value="Last 24 hours">
+        Last 24 hours
+      </SelectOption>
+      <SelectOption key="option4" value="Last 7 days">
+        Last 7 days
+      </SelectOption>
+    </SelectList>
+  );
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle ref={toggleRef} onClick={() => setIsOpen(!isOpen)} isExpanded={isOpen} variant="plainText">
+      Filter
+    </MenuToggle>
+  );
+
+  const headerActions = (
+    <Select onSelect={() => setIsOpen(!isOpen)} onOpenChange={setIsOpen} isOpen={isOpen} toggle={toggle}>
+      {selectItems}
+    </Select>
+  );
+
+  return (
+    <React.Fragment>
+      <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}
+      <code>baseline</code> alignment.
+      <br />
+      <br />
+      <Gallery hasGutter style={{ [l_gallery_GridTemplateColumns_min.name]: '360px' } as React.CSSProperties}>
+        <Card id="card-log-view-example">
+          <CardHeader className={flex.alignItemsFlexStart} actions={{ actions: headerActions, hasNoOffset: true }}>
+            <CardTitle>
+              <Title headingLevel="h4" size="xl" style={{ paddingTop: '3px' }}>
+                Activity
+              </Title>
+            </CardTitle>
+          </CardHeader>
+          <CardBody>
+            <DescriptionList>
+              <DescriptionListGroup>
+                <DescriptionListTerm>Readiness probe failed</DescriptionListTerm>
+                <DescriptionListDescription>
+                  Readiness probe failed: Get https://10.131.0.7:5000/healthz: dial tcp 10.131.0.7:5000: connect:
+                  connection refused
+                </DescriptionListDescription>
+                <DescriptionListDescription>
+                  <time className={`${text.color_200} ${text.fontSizeSm}`}>Jun 17, 11:02 am</time>
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+              <DescriptionListGroup>
+                <DescriptionListTerm>Successful assignment</DescriptionListTerm>
+                <DescriptionListDescription>
+                  Successfully assigned default/example to ip-10-0-130-149.ec2.internal
+                </DescriptionListDescription>
+                <DescriptionListDescription>
+                  <time className={`${text.color_200} ${text.fontSizeSm}`}>Jun 17, 11:13 am</time>
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+              <DescriptionListGroup>
+                <DescriptionListTerm>Pulling image</DescriptionListTerm>
+                <DescriptionListDescription>Pulling image "openshift/hello-openshift"</DescriptionListDescription>
+                <DescriptionListDescription>
+                  <time className={`${text.color_200} ${text.fontSizeSm}`}>Jun 17, 10:59 am</time>
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+              <DescriptionListGroup>
+                <DescriptionListTerm>Created container</DescriptionListTerm>
+                <DescriptionListDescription>Created container hello-openshift</DescriptionListDescription>
+                <DescriptionListDescription>
+                  <time className={`${text.color_200} ${text.fontSizeSm}`}>Jun 17, 10:45 am</time>
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+            </DescriptionList>
+          </CardBody>
+          <Divider />
+          <CardFooter>
+            <a href="#">View all activity</a>
+          </CardFooter>
+        </Card>
+      </Gallery>
+    </React.Fragment>
+  );
+};