-
Notifications
You must be signed in to change notification settings - Fork 357
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
Showing
20 changed files
with
2,923 additions
and
2,911 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
File renamed without changes.
File renamed without changes.
File renamed without changes.
244 changes: 244 additions & 0 deletions
244
packages/react-core/src/demos/examples/Card/CardAggregateStatus.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
}; |
93 changes: 93 additions & 0 deletions
93
packages/react-core/src/demos/examples/Card/CardDetails.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); |
Oops, something went wrong.