chore(card): convert remaining card demos to ts

WIP card demo conversion chore(card): convert all demos to ts Apply function name suggestions from Eric Co-authored-by: Eric Olkowski <[email protected]> split up demos, PR feedback from Eric revert card view location and update name fix card view data paths fix tokens imports fix tokens import paths update import style to fix build fix import path add styling updates from main
patternfly · Oct 12, 2023 · fa3de96 · fa3de96
1 parent 8c784c2
commit fa3de96
Show file tree

Hide file tree

Showing 21 changed files with 2,942 additions and 2,915 deletions.
diff --git a/packages/react-core/src/demos/CardDemos.md b/packages/react-core/src/demos/CardDemos.md
diff --git a/packages/react-core/src/demos/Card/Card.md → ...react-core/src/demos/CardView/CardView.md b/packages/react-core/src/demos/Card/Card.md → ...react-core/src/demos/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
 

diff --git a/...core/src/demos/Card/examples/CardView.tsx → .../src/demos/CardView/examples/CardView.tsx b/...core/src/demos/Card/examples/CardView.tsx → .../src/demos/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;

diff --git a/...core/src/demos/Card/examples/CardData.jsx → .../demos/CardView/examples/CardViewData.jsx b/...core/src/demos/Card/examples/CardData.jsx → .../demos/CardView/examples/CardViewData.jsx
diff --git a/packages/react-core/src/demos/PrimaryDetail.md b/packages/react-core/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) {

diff --git a/packages/react-core/src/demos/examples/Card/CardAggregateStatus.tsx b/packages/react-core/src/demos/examples/Card/CardAggregateStatus.tsx
@@ -0,0 +1,246 @@
+/* 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 any}>
+              {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>
+  );
+};
diff --git a/packages/react-core/src/demos/examples/Card/CardDetails.tsx b/packages/react-core/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' }}>
+    <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>
+);