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

package/src/demos/{Card/Card.md → CardView/CardView.md}

@@ -16,7 +16,7 @@ import swaggerIcon from '../assets/camel-swagger-java_200x150.png';
 import azureIcon from '../assets/FuseConnector_Icons_AzureServices.png';
 import restIcon from '../assets/FuseConnector_Icons_REST.png';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import { data } from '@patternfly/react-core/src/demos/Card/examples/CardData.jsx';
+import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx';
 
 ## Demos
 

package/src/demos/{Card → CardView}/examples/CardView.tsx

@@ -52,7 +52,7 @@ import azureIcon from './assets/FuseConnector_Icons_AzureServices.png';
 import restIcon from './assets/FuseConnector_Icons_REST.png';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
-import { data } from '@patternfly/react-core/src/demos/Card/examples/CardData.jsx';
+import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx';
 
 export const CardViewBasic: React.FunctionComponent = () => {
   const totalItemCount = 10;

package/src/demos/CustomMenus/CustomMenus.md

@@ -24,6 +24,7 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import avatarImg from '../assets/avatarImg.svg';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';
+import text from '@patternfly/react-styles/css/utilities/Text/text';
 
 ## Examples
 

package/src/demos/CustomMenus/examples/ComposableDateSelect.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { MenuToggle, Menu, MenuContent, MenuList, MenuItem, Popper } from '@patternfly/react-core';
+import text from '@patternfly/react-styles/css/utilities/Text/text';
 
 export const ComposableSimpleDropdown: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -72,19 +73,19 @@ export const ComposableSimpleDropdown: React.FunctionComponent = () => {
   };
 
   const dateText = {
-    0: <small className="pf-v5-u-color-200">({dateString(date)})</small>,
+    0: <small className={text.color_200}>({dateString(date)})</small>,
     1: (
-      <small className="pf-v5-u-color-200">
+      <small className={text.color_200}>
         ({dateString(new Date(new Date().setDate(date.getDate() - 1)))} - {dateString(date)})
       </small>
     ),
     2: (
-      <small className="pf-v5-u-color-200">
+      <small className={text.color_200}>
         ({dateString(new Date(new Date().setDate(date.getDate() - 7)))} - {dateString(date)})
       </small>
     ),
     3: (
-      <small className="pf-v5-u-color-200">
+      <small className={text.color_200}>
         ({dateString(new Date(new Date().setDate(date.getDate() - 14)))} - {dateString(date)})
       </small>
     )

package/src/demos/CustomMenus/examples/DateSelectDemo.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { MenuToggle, Select, SelectList, SelectOption } from '@patternfly/react-core';
+import text from '@patternfly/react-styles/css/utilities/Text/text';
 
 export const DateSelectDemo: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -37,19 +38,19 @@ export const DateSelectDemo: React.FunctionComponent = () => {
   };
 
   const dateText = {
-    0: <small className="pf-v5-u-color-200">({dateString(date)})</small>,
+    0: <small className={text.color_200}>({dateString(date)})</small>,
     1: (
-      <small className="pf-v5-u-color-200">
+      <small className={text.color_200}>
         ({dateString(new Date(new Date().setDate(date.getDate() - 1)))} - {dateString(date)})
       </small>
     ),
     2: (
-      <small className="pf-v5-u-color-200">
+      <small className={text.color_200}>
         ({dateString(new Date(new Date().setDate(date.getDate() - 7)))} - {dateString(date)})
       </small>
     ),
     3: (
-      <small className="pf-v5-u-color-200">
+      <small className={text.color_200}>
         ({dateString(new Date(new Date().setDate(date.getDate() - 14)))} - {dateString(date)})
       </small>
     )

package/src/demos/JumpLinks.md

@@ -3,6 +3,8 @@ id: Jump links
 section: components
 ---
 
+import mastheadStyles from '@patternfly/react-styles/css/components/Masthead/masthead';
+
 ## Demos
 
 JumpLinks has a scrollspy built-in to make your implementation easier. When implementing JumpLinks be sure to:
@@ -32,6 +34,7 @@ import {
   getResizeObserver
 } from '@patternfly/react-core';
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import mastheadStyles from '@patternfly/react-styles/css/components/Masthead/masthead';
 
 ScrollspyH2 = () => {
   const headings = [1, 2, 3, 4, 5];
@@ -41,7 +44,7 @@ ScrollspyH2 = () => {
 
   // Update offset based on the masthead and jump links nav heights.
   React.useEffect(() => {
-    const masthead = document.getElementsByClassName('pf-v5-c-masthead')[0];
+    const masthead = document.getElementsByClassName(mastheadStyles.masthead)[0];
     const offsetForPadding = 10;
 
     getResizeObserver(

package/src/demos/PasswordStrength.md

@@ -7,6 +7,7 @@ import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import formStyles from '@patternfly/react-styles/css/components/Form/form';
 
 ## Demos
 

package/src/demos/PrimaryDetail.md

@@ -23,7 +23,7 @@ import swaggerIcon from './assets/camel-swagger-java_200x150.png';
 import azureIcon from './assets/FuseConnector_Icons_AzureServices.png';
 import restIcon from './assets/FuseConnector_Icons_REST.png';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import { data } from '@patternfly/react-core/src/demos/Card/examples/CardData.jsx';
+import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx';
 
 ## Demos
 
@@ -89,7 +89,7 @@ import azureIcon from './assets/FuseConnector_Icons_AzureServices.png';
 import restIcon from './assets/FuseConnector_Icons_REST.png';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
-import { data } from '@patternfly/react-core/src/demos/Card/examples/CardData.jsx';
+import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx';
 
 class PrimaryDetailCardView extends React.Component {
   constructor(props) {

package/src/demos/ProgressDemo.md

@@ -14,7 +14,7 @@ import { Progress, Button, Stack, StackItem } from '@patternfly/react-core';
 ProgressStepperDemo = () => {
   const [currentValue, setCurrentValue] = React.useState(0);
 
-  const onProgressUpdate = nextValue => {
+  const onProgressUpdate = (nextValue) => {
     setCurrentValue(nextValue);
   };
 
@@ -52,7 +52,7 @@ import { Progress, Button, Stack, StackItem } from '@patternfly/react-core';
 ProgressStepperDemo = () => {
   const [currentValue, setCurrentValue] = React.useState(0);
 
-  const onProgressUpdate = nextValue => {
+  const onProgressUpdate = (nextValue) => {
     if (nextValue > currentValue) {
       setCurrentValue(nextValue);
     }

package/src/demos/Tabs.md

@@ -11,6 +11,7 @@ import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 ## Demos
 
@@ -41,8 +42,10 @@ import {
 } 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/src/demos/DashboardWrapper';
 
+
 TabsOpenDemo = () => {
   const [activeTabKey, setActiveTabKey] = React.useState(0);
 
@@ -66,7 +69,7 @@ TabsOpenDemo = () => {
   const tabContent = (
     <Flex direction={{ default: 'column' }}>
       <FlexItem spacer={{ default: 'spacerLg' }}>
-        <Title headingLevel="h2" size="lg" className="pf-v5-u-mt-sm" id="open-tabs-example-tabs-list-details-title">
+        <Title headingLevel="h2" size="lg" className={spacing.mtSm} id="open-tabs-example-tabs-list-details-title">
           Pod details
         </Title>
       </FlexItem>
@@ -231,6 +234,7 @@ import {
 } 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/src/demos/DashboardWrapper';
 
 TabsOpenWithSecondaryTabsDemo = () => {
@@ -262,7 +266,7 @@ TabsOpenWithSecondaryTabsDemo = () => {
   const tabContent = (
     <Flex direction={{ default: 'column' }}>
       <FlexItem spacer={{ default: 'spacerLg' }}>
-        <Title headingLevel="h2" size="lg" className="pf-v5-u-mt-sm" id="open-tabs-example-tabs-list-details-title">
+        <Title headingLevel="h2" size="lg" className={spacing.mtSm} id="open-tabs-example-tabs-list-details-title">
           Pod details
         </Title>
       </FlexItem>

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