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
patternfly · Oct 9, 2023 · e243aa0 · e243aa0
1 parent d5c7c53
commit e243aa0
Show file tree

Hide file tree

Showing 20 changed files with 2,923 additions and 2,911 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
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
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/examples/Card/CardAggregateStatus.tsx b/packages/react-core/src/demos/examples/Card/CardAggregateStatus.tsx
@@ -0,0 +1,244 @@
+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';
+
+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="var(--pf-v5-global--success-color--100)" />
+        }
+      ],
+      layout: 'icon'
+    },
+    {
+      title: '15 Clusters',
+      content: [
+        {
+          icon: <ExclamationTriangleIcon color="var(--pf-v5-global--warning-color--100)" />
+        }
+      ],
+      layout: 'icon'
+    },
+    {
+      title: '3 Clusters',
+      content: [
+        {
+          icon: <TimesCircleIcon color="var(--pf-v5-global--danger-color--100)" />
+        }
+      ],
+      layout: 'icon'
+    }
+  ],
+  iconWithCount: [
+    {
+      title: '10 Hosts',
+      content: [
+        {
+          icon: <ExclamationCircleIcon color="var(--pf-v5-global--success-color--100)" />,
+          count: 2
+        },
+        {
+          icon: <ExclamationTriangleIcon color="var(--pf-v5-global--warning-color--100)" />,
+          count: 1
+        }
+      ],
+      layout: 'multiIcon'
+    },
+    {
+      title: '50 Hosts',
+      content: [
+        {
+          icon: <CheckCircleIcon color="var(--pf-v5-global--success-color--100)" />,
+          count: 5
+        },
+        {
+          icon: <TimesCircleIcon color="var(--pf-v5-global--danger-color--100)" />,
+          count: 12
+        }
+      ],
+      layout: 'multiIcon'
+    },
+    {
+      title: '12 Hosts',
+      content: [
+        {
+          icon: <ExclamationTriangleIcon color="var(--pf-v5-global--warning-color--100)" />,
+          count: 3
+        },
+        {
+          icon: <TimesCircleIcon color="var(--pf-v5-global--danger-color--100)" />,
+          count: 7
+        }
+      ],
+      layout: 'multiIcon'
+    }
+  ],
+  withSubtitle: [
+    {
+      title: '13 Hosts',
+      content: [
+        {
+          icon: <TimesCircleIcon color="var(--pf-v5-global--danger-color--100)" />,
+          status: '2 errors',
+          subtitle: 'subtitle'
+        },
+        {
+          icon: <ExclamationTriangleIcon color="var(--pf-v5-global--warning-color--100)" />,
+          status: '1 warning',
+          subtitle: 'subtitle'
+        }
+      ],
+      layout: 'withSubtitle'
+    },
+    {
+      title: '3 Hosts',
+      content: [
+        {
+          icon: <CheckCircleIcon color="var(--pf-v5-global--success-color--100)" />,
+          status: '2 successes',
+          subtitle: 'subtitle'
+        },
+        {
+          icon: <ExclamationTriangleIcon color="var(--pf-v5-global--warning-color--100)" />,
+          status: '3 warnings',
+          subtitle: 'subtitle'
+        }
+      ],
+      layout: 'withSubtitle'
+    },
+    {
+      title: '50 Hosts',
+      content: [
+        {
+          icon: <ExclamationTriangleIcon color="var(--pf-v5-global--warning-color--100)" />,
+          status: '7 warnings',
+          subtitle: 'subtitle'
+        },
+        {
+          icon: <TimesCircleIcon color="var(--pf-v5-global--danger-color--100)" />,
+          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={{ '--pf-v5-l-gallery--GridTemplateColumns--min': 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>
+  );
+};
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,93 @@
+import React from 'react';
+import {
+  Card,
+  CardTitle,
+  CardBody,
+  CardFooter,
+  Gallery,
+  Title,
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  DescriptionListDescription,
+  Divider
+} from '@patternfly/react-core';
+
+export const CardDetailsDemo: React.FunctionComponent = () => (
+  <Gallery hasGutter style={{ '--pf-v5-l-gallery--GridTemplateColumns--min': '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>
+);