@patternfly/react-core 6.0.0-alpha.1 → 6.0.0-alpha.2

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

@@ -15,7 +15,6 @@ import {
   NotificationDrawerListItemBody,
   NotificationDrawerListItemHeader,
   PageSection,
-  PageSectionVariants,
   TextContent,
   Text,
   EmptyStateVariant,
@@ -33,8 +32,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;
@@ -318,7 +317,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
       notificationDrawer={notificationDrawer}
       isNotificationDrawerExpanded={isDrawerExpanded}
     >
-      <PageSection variant={PageSectionVariants.light}>
+      <PageSection>
         <TextContent>
           <Text component="h1">Alert Group with Notification Drawer demo</Text>
           <Text component="p">
@@ -330,7 +329,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
         </TextContent>
       </PageSection>
 
-      <PageSection variant={PageSectionVariants.light}>
+      <PageSection>
         <Button variant="secondary" onClick={() => addNewNotification('success')} style={alertButtonStyle}>
           Add toast success alert
         </Button>
@@ -350,7 +349,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
         </Button>
       </PageSection>
 
-      <PageSection variant={PageSectionVariants.light}>
+      <PageSection>
         <TextContent>
           <br />
           <Text component="h2">Max displayed alerts</Text>
@@ -370,7 +369,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
           style={{ margin: '12px 0' }}
         />
       </PageSection>
-      <PageSection variant={PageSectionVariants.light}>
+      <PageSection>
         <AlertGroup isToast isLiveRegion onOverflowClick={onAlertGroupOverflowClick} overflowMessage={overflowMessage}>
           {alerts.slice(0, maxDisplayed)}
         </AlertGroup>

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

@@ -6,13 +6,12 @@ import {
   Gallery,
   GalleryItem,
   PageSection,
-  PageSectionVariants,
   TextContent,
   Text,
   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);
@@ -24,7 +23,7 @@ export const Name = () => {
   return (
     <DashboardWrapper breadcrumb={null}>
       <Page>
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection>
           <TextContent>
             <Text component="h1">Main title</Text>
             <Text component="p">

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

@@ -0,0 +1,249 @@
+/* eslint-disable camelcase */
+import * as React from 'react';
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  Divider,
+  Flex,
+  FlexItem,
+  Gallery,
+  Grid,
+  GridItem,
+  Stack
+} from '@patternfly/react-core';
+import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+import TimesCircleIcon from '@patternfly/react-icons/dist/js/icons/times-circle-icon';
+import global_success_color_100 from '@patternfly/react-tokens/dist/esm/global_success_color_100';
+import global_warning_color_100 from '@patternfly/react-tokens/dist/esm/global_warning_color_100';
+import global_danger_color_100 from '@patternfly/react-tokens/dist/esm/global_danger_color_100';
+import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
+
+interface ContentType {
+  icon?: React.ReactNode;
+  count?: number;
+  status?: string;
+  subtitle?: string;
+}
+interface CardData {
+  [attribute: string]: {
+    title: string;
+    content: {
+      icon: JSX.Element;
+      count?: number;
+      status?: string;
+      subtitle?: string;
+    }[];
+    layout: string;
+  }[];
+}
+
+const cardData: CardData = {
+  iconOnly: [
+    {
+      title: '5 Clusters',
+      content: [
+        {
+          icon: <CheckCircleIcon color={global_success_color_100.var} />
+        }
+      ],
+      layout: 'icon'
+    },
+    {
+      title: '15 Clusters',
+      content: [
+        {
+          icon: <ExclamationTriangleIcon color={global_warning_color_100.var} />
+        }
+      ],
+      layout: 'icon'
+    },
+    {
+      title: '3 Clusters',
+      content: [
+        {
+          icon: <TimesCircleIcon color={global_danger_color_100.var} />
+        }
+      ],
+      layout: 'icon'
+    }
+  ],
+  iconWithCount: [
+    {
+      title: '10 Hosts',
+      content: [
+        {
+          icon: <ExclamationCircleIcon color={global_success_color_100.var} />,
+          count: 2
+        },
+        {
+          icon: <ExclamationTriangleIcon color={global_warning_color_100.var} />,
+          count: 1
+        }
+      ],
+      layout: 'multiIcon'
+    },
+    {
+      title: '50 Hosts',
+      content: [
+        {
+          icon: <CheckCircleIcon color={global_success_color_100.var} />,
+          count: 5
+        },
+        {
+          icon: <TimesCircleIcon color={global_danger_color_100.var} />,
+          count: 12
+        }
+      ],
+      layout: 'multiIcon'
+    },
+    {
+      title: '12 Hosts',
+      content: [
+        {
+          icon: <ExclamationTriangleIcon color={global_warning_color_100.var} />,
+          count: 3
+        },
+        {
+          icon: <TimesCircleIcon color={global_danger_color_100.var} />,
+          count: 7
+        }
+      ],
+      layout: 'multiIcon'
+    }
+  ],
+  withSubtitle: [
+    {
+      title: '13 Hosts',
+      content: [
+        {
+          icon: <TimesCircleIcon color={global_danger_color_100.var} />,
+          status: '2 errors',
+          subtitle: 'subtitle'
+        },
+        {
+          icon: <ExclamationTriangleIcon color={global_warning_color_100.var} />,
+          status: '1 warning',
+          subtitle: 'subtitle'
+        }
+      ],
+      layout: 'withSubtitle'
+    },
+    {
+      title: '3 Hosts',
+      content: [
+        {
+          icon: <CheckCircleIcon color={global_success_color_100.var} />,
+          status: '2 successes',
+          subtitle: 'subtitle'
+        },
+        {
+          icon: <ExclamationTriangleIcon color={global_warning_color_100.var} />,
+          status: '3 warnings',
+          subtitle: 'subtitle'
+        }
+      ],
+      layout: 'withSubtitle'
+    },
+    {
+      title: '50 Hosts',
+      content: [
+        {
+          icon: <ExclamationTriangleIcon color={global_warning_color_100.var} />,
+          status: '7 warnings',
+          subtitle: 'subtitle'
+        },
+        {
+          icon: <TimesCircleIcon color={global_danger_color_100.var} />,
+          status: '1 error',
+          subtitle: 'subtitle'
+        }
+      ],
+      layout: 'withSubtitle'
+    }
+  ]
+};
+
+export const CardAggregateStatus: React.FunctionComponent = () => {
+  const renderContent = (content: ContentType[], layout: string) => {
+    if (layout === 'icon') {
+      return content[0].icon;
+    }
+    if (layout === 'multiIcon') {
+      return (
+        <Flex display={{ default: 'inlineFlex' }}>
+          {content.map(({ icon, count }, index: number) => (
+            <React.Fragment key={index}>
+              <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                <FlexItem>{icon}</FlexItem>
+                <FlexItem>
+                  <a href="#">{count}</a>
+                </FlexItem>
+              </Flex>
+              {content.length > 1 && index === 0 && (
+                <Divider
+                  key={`${index}_d`}
+                  orientation={{
+                    default: 'vertical'
+                  }}
+                />
+              )}
+            </React.Fragment>
+          ))}
+        </Flex>
+      );
+    }
+    if (layout === 'withSubtitle') {
+      return (
+        <Flex justifyContent={{ default: 'justifyContentSpaceAround' }}>
+          {content.map(({ icon, status, subtitle }, index: number) => (
+            <Flex key={index}>
+              <FlexItem>{icon}</FlexItem>
+              <Stack>
+                <a href="#">{status}</a>
+                <span>{subtitle}</span>
+              </Stack>
+            </Flex>
+          ))}
+        </Flex>
+      );
+    }
+  };
+  return (
+    <Grid hasGutter>
+      {Object.keys(cardData).map((cardGroup, groupIndex) => {
+        let galleryWidth: string = '';
+        let cardAlign: string;
+        let titleAlign: string;
+        if (cardGroup === 'withSubtitle') {
+          galleryWidth = '260px';
+          cardAlign = '';
+          titleAlign = 'center';
+        } else {
+          cardAlign = 'center';
+        }
+        return (
+          <GridItem key={groupIndex}>
+            <Gallery
+              hasGutter
+              style={{ [l_gallery_GridTemplateColumns_min.name]: galleryWidth } as React.CSSProperties}
+            >
+              {cardData[cardGroup].map(({ title, content, layout }, cardIndex: number) => (
+                <Card
+                  style={{ textAlign: cardAlign } as React.CSSProperties}
+                  key={`${groupIndex}${cardIndex}`}
+                  component="div"
+                >
+                  <CardTitle style={{ textAlign: titleAlign } as React.CSSProperties}>{title}</CardTitle>
+                  <CardBody>{renderContent(content, layout)}</CardBody>
+                </Card>
+              ))}
+            </Gallery>
+          </GridItem>
+        );
+      })}
+    </Grid>
+  );
+};

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

@@ -0,0 +1,95 @@
+/* eslint-disable camelcase */
+import React from 'react';
+import {
+  Card,
+  CardTitle,
+  CardBody,
+  CardFooter,
+  Gallery,
+  Title,
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  DescriptionListDescription,
+  Divider
+} from '@patternfly/react-core';
+import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
+
+export const CardDetailsDemo: React.FunctionComponent = () => (
+  <Gallery hasGutter style={{ [l_gallery_GridTemplateColumns_min.name]: '260px' } as React.CSSProperties}>
+    <Card>
+      <CardTitle>
+        <Title headingLevel="h4" size="xl">
+          Details
+        </Title>
+      </CardTitle>
+      <CardBody>
+        <DescriptionList>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Cluster API Address</DescriptionListTerm>
+            <DescriptionListDescription>
+              <a href="#">https://api1.devcluster.openshift.com</a>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Cluster ID</DescriptionListTerm>
+            <DescriptionListDescription>63b97ac1-b850-41d9-8820-239becde9e86</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Provide</DescriptionListTerm>
+            <DescriptionListDescription>AWS</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>OpenShift Version</DescriptionListTerm>
+            <DescriptionListDescription>4.5.0.ci-2020-06-16-015028</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Update Channel</DescriptionListTerm>
+            <DescriptionListDescription>stable-4.5</DescriptionListDescription>
+          </DescriptionListGroup>
+        </DescriptionList>
+      </CardBody>
+      <Divider />
+      <CardFooter>
+        <a href="#">View Settings</a>
+      </CardFooter>
+    </Card>
+    <Card>
+      <CardTitle>
+        <Title headingLevel="h4" size="xl">
+          Details
+        </Title>
+      </CardTitle>
+      <CardBody>
+        <DescriptionList>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Cluster API Address</DescriptionListTerm>
+            <DescriptionListDescription>
+              <a href="#">https://api2.devcluster.openshift.com</a>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Cluster ID</DescriptionListTerm>
+            <DescriptionListDescription>08908908-b850-41d9-8820-239becde9e86</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Provider</DescriptionListTerm>
+            <DescriptionListDescription>Azure</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>OpenShift Version</DescriptionListTerm>
+            <DescriptionListDescription>4.5.0.ci-2020-06-16-015026</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Update Channel</DescriptionListTerm>
+            <DescriptionListDescription>stable-4.4</DescriptionListDescription>
+          </DescriptionListGroup>
+        </DescriptionList>
+      </CardBody>
+      <Divider />
+      <CardFooter>
+        <a href="#">View Settings</a>
+      </CardFooter>
+    </Card>
+  </Gallery>
+);

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>
+  );
+};