-
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 fix import path add styling updates from main
- Loading branch information
Showing
21 changed files
with
2,942 additions
and
2,915 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
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
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
File renamed without changes.
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
246 changes: 246 additions & 0 deletions
246
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,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> | ||
); | ||
}; |
95 changes: 95 additions & 0 deletions
95
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,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> | ||
); |
Oops, something went wrong.