From 6f60bd3ce27de6372e04b682c3891d1e1f733385 Mon Sep 17 00:00:00 2001 From: Zein Sleiman Date: Thu, 18 Jul 2024 16:30:24 -0500 Subject: [PATCH 01/23] add ServiceCard component --- .../examples/ServiceCard/ServiceCard.md | 21 ++++ .../ServiceCard/ServiceCardExample.tsx | 6 + .../src/ServiceCard/ServiceCard.test.tsx | 0 .../module/src/ServiceCard/ServiceCard.tsx | 115 ++++++++++++++++++ packages/module/src/ServiceCard/index.ts | 2 + packages/module/src/index.ts | 99 +++++++-------- 6 files changed, 195 insertions(+), 48 deletions(-) create mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md create mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardExample.tsx create mode 100644 packages/module/src/ServiceCard/ServiceCard.test.tsx create mode 100644 packages/module/src/ServiceCard/ServiceCard.tsx create mode 100644 packages/module/src/ServiceCard/index.ts diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md new file mode 100644 index 00000000..981c7b22 --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md @@ -0,0 +1,21 @@ +--- +section: extensions +subsection: Component groups +id: Service card +source: react +propComponents: ['ServiceCard'] +sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md +--- + +import ServiceCard from "@patternfly/react-component-groups/dist/dynamic/ServiceCard"; + +A **Service Card** component allows + +## Examples + +### Service Card + +```js file="./ServiceCardExample.tsx" + +``` + diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardExample.tsx new file mode 100644 index 00000000..0a7cd15d --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardExample.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import ServiceCard from "@patternfly/react-component-groups/dist/dynamic/ServiceCard"; + +export const BasicExample: React.FunctionComponent = () => { + ; +} diff --git a/packages/module/src/ServiceCard/ServiceCard.test.tsx b/packages/module/src/ServiceCard/ServiceCard.test.tsx new file mode 100644 index 00000000..e69de29b diff --git a/packages/module/src/ServiceCard/ServiceCard.tsx b/packages/module/src/ServiceCard/ServiceCard.tsx new file mode 100644 index 00000000..dcb1c356 --- /dev/null +++ b/packages/module/src/ServiceCard/ServiceCard.tsx @@ -0,0 +1,115 @@ +import React from 'react'; +import { Button, ButtonVariant, ButtonProps, Card, CardBody, CardFooter, CardHeader, Text, TextContent, TextVariants } from '@patternfly/react-core'; +import { createUseStyles } from 'react-jss'; + +export interface AnalyticsProps { + event: string; + properties: { name: string; url: string; }; +} + +export interface ServiceCardButtonProps extends ButtonProps { + /** Label for the button */ + label: string; + /** button url */ + url: string; + analytics: AnalyticsProps +} + + +export interface ServiceCardProps { + title: string; + subtitle: string; + description: string; + iconUrl: string; + learnMoreUrl: string; + launchUrl?: string; + showDisabledButton?: boolean; + helperText?: React.ReactElement; + learnMoreButtonProps?: ServiceCardButtonProps; + launchButtonProps: ServiceCardButtonProps; + /** Custom OUIA ID */ + ouiaId?: string | number; +} + +const useStyles = createUseStyles({ + card: { + height: ('--pf-v5-u-h-100') + }, + image: { + marginRight: ('--pf-v5-u-mr-md'), + width: 48 + } +}) + +const ServiceCard: React.FunctionComponent = ({ + title, + subtitle, + description, + iconUrl, + learnMoreUrl, + launchUrl, + helperText, + learnMoreButtonProps, + launchButtonProps, + ouiaId='ServiceCard' +}: ServiceCardProps) => { + const classes = useStyles(); + + return ( + + + + + {title} + {subtitle} + + + {description} + + {helperText} + + + + {launchButtonProps && + } + + {/* + Learn more + */} + + + ) + +} + +export default ServiceCard; \ No newline at end of file diff --git a/packages/module/src/ServiceCard/index.ts b/packages/module/src/ServiceCard/index.ts new file mode 100644 index 00000000..57b00957 --- /dev/null +++ b/packages/module/src/ServiceCard/index.ts @@ -0,0 +1,2 @@ +export { default } from './ServiceCard' +export * from './ServiceCard' diff --git a/packages/module/src/index.ts b/packages/module/src/index.ts index eefe1ab4..2f8003bb 100644 --- a/packages/module/src/index.ts +++ b/packages/module/src/index.ts @@ -1,76 +1,79 @@ // this file is autogenerated by generate-index.js, modifying it manually will have no effect -export { default as ActionButton } from './ActionButton'; -export * from './ActionButton'; +export { default as WarningModal } from './WarningModal'; +export * from './WarningModal'; -export { default as ActionMenu } from './ActionMenu'; -export * from './ActionMenu'; +export { default as UnavailableContent } from './UnavailableContent'; +export * from './UnavailableContent'; -export { default as Ansible } from './Ansible'; -export * from './Ansible'; +export { default as TagCount } from './TagCount'; +export * from './TagCount'; -export { default as Battery } from './Battery'; -export * from './Battery'; +export { default as SkeletonTable } from './SkeletonTable'; +export * from './SkeletonTable'; -export { default as BulkSelect } from './BulkSelect'; -export * from './BulkSelect'; +export { default as ShortcutGrid } from './ShortcutGrid'; +export * from './ShortcutGrid'; -export { default as CloseButton } from './CloseButton'; -export * from './CloseButton'; +export { default as Shortcut } from './Shortcut'; +export * from './Shortcut'; -export { default as ColumnManagementModal } from './ColumnManagementModal'; -export * from './ColumnManagementModal'; +export { default as ServiceCard } from './ServiceCard'; +export * from './ServiceCard'; -export { default as ContentHeader } from './ContentHeader'; -export * from './ContentHeader'; +export { default as NotFoundIcon } from './NotFoundIcon'; +export * from './NotFoundIcon'; -export { default as DetailsPage } from './DetailsPage'; -export * from './DetailsPage'; +export { default as NotAuthorized } from './NotAuthorized'; +export * from './NotAuthorized'; -export { default as DetailsPageHeader } from './DetailsPageHeader'; -export * from './DetailsPageHeader'; +export { default as MultiContentCard } from './MultiContentCard'; +export * from './MultiContentCard'; -export { default as ErrorBoundary } from './ErrorBoundary'; -export * from './ErrorBoundary'; +export { default as LogSnippet } from './LogSnippet'; +export * from './LogSnippet'; -export { default as ErrorStack } from './ErrorStack'; -export * from './ErrorStack'; +export { default as InvalidObject } from './InvalidObject'; +export * from './InvalidObject'; + +export { default as HorizontalNav } from './HorizontalNav'; +export * from './HorizontalNav'; export { default as ErrorState } from './ErrorState'; export * from './ErrorState'; -export { default as HorizontalNav } from './HorizontalNav'; -export * from './HorizontalNav'; +export { default as ErrorStack } from './ErrorStack'; +export * from './ErrorStack'; -export { default as InvalidObject } from './InvalidObject'; -export * from './InvalidObject'; +export { default as ErrorBoundary } from './ErrorBoundary'; +export * from './ErrorBoundary'; -export { default as LogSnippet } from './LogSnippet'; -export * from './LogSnippet'; +export { default as DetailsPageHeader } from './DetailsPageHeader'; +export * from './DetailsPageHeader'; -export { default as MultiContentCard } from './MultiContentCard'; -export * from './MultiContentCard'; +export { default as DetailsPage } from './DetailsPage'; +export * from './DetailsPage'; -export { default as NotAuthorized } from './NotAuthorized'; -export * from './NotAuthorized'; +export { default as ContentHeader } from './ContentHeader'; +export * from './ContentHeader'; -export { default as NotFoundIcon } from './NotFoundIcon'; -export * from './NotFoundIcon'; +export { default as ColumnManagementModal } from './ColumnManagementModal'; +export * from './ColumnManagementModal'; -export { default as Shortcut } from './Shortcut'; -export * from './Shortcut'; +export { default as CloseButton } from './CloseButton'; +export * from './CloseButton'; -export { default as ShortcutGrid } from './ShortcutGrid'; -export * from './ShortcutGrid'; +export { default as BulkSelect } from './BulkSelect'; +export * from './BulkSelect'; -export { default as SkeletonTable } from './SkeletonTable'; -export * from './SkeletonTable'; +export { default as Battery } from './Battery'; +export * from './Battery'; -export { default as TagCount } from './TagCount'; -export * from './TagCount'; +export { default as Ansible } from './Ansible'; +export * from './Ansible'; -export { default as UnavailableContent } from './UnavailableContent'; -export * from './UnavailableContent'; +export { default as ActionMenu } from './ActionMenu'; +export * from './ActionMenu'; -export { default as WarningModal } from './WarningModal'; -export * from './WarningModal'; +export { default as ActionButton } from './ActionButton'; +export * from './ActionButton'; From 4ce6b3a9276e4b87c879fdd576fb26f466947146 Mon Sep 17 00:00:00 2001 From: Zein Sleiman Date: Fri, 19 Jul 2024 15:29:53 -0500 Subject: [PATCH 02/23] fix props --- .../examples/ServiceCard/ServiceCard.md | 1 - .../ServiceCard/ServiceCardExample.tsx | 32 +++++++- .../module/src/ServiceCard/ServiceCard.tsx | 77 +++++++++---------- 3 files changed, 64 insertions(+), 46 deletions(-) diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md index 981c7b22..61567ffc 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md @@ -18,4 +18,3 @@ A **Service Card** component allows ```js file="./ServiceCardExample.tsx" ``` - diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardExample.tsx index 0a7cd15d..f4e0afb0 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardExample.tsx @@ -1,6 +1,32 @@ import React from 'react'; import ServiceCard from "@patternfly/react-component-groups/dist/dynamic/ServiceCard"; +import { Button, ButtonVariant } from '@patternfly/react-core'; -export const BasicExample: React.FunctionComponent = () => { - ; -} +export const BasicExample: React.FunctionComponent = () => + Learn More + + } + launchButton={ + + } + +/> diff --git a/packages/module/src/ServiceCard/ServiceCard.tsx b/packages/module/src/ServiceCard/ServiceCard.tsx index dcb1c356..8a3ddb75 100644 --- a/packages/module/src/ServiceCard/ServiceCard.tsx +++ b/packages/module/src/ServiceCard/ServiceCard.tsx @@ -1,5 +1,7 @@ import React from 'react'; import { Button, ButtonVariant, ButtonProps, Card, CardBody, CardFooter, CardHeader, Text, TextContent, TextVariants } from '@patternfly/react-core'; +import { HelperText } from '@patternfly/react-core/dist/dynamic/components/HelperText'; +import { HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText'; import { createUseStyles } from 'react-jss'; export interface AnalyticsProps { @@ -17,16 +19,22 @@ export interface ServiceCardButtonProps extends ButtonProps { export interface ServiceCardProps { + /** Title for card */ title: string; + /** Subtitle for card */ subtitle: string; + /** Custom description */ description: string; + /** URL for service card icon */ iconUrl: string; - learnMoreUrl: string; - launchUrl?: string; + /** Whether to show if button is disabled */ showDisabledButton?: boolean; - helperText?: React.ReactElement; - learnMoreButtonProps?: ServiceCardButtonProps; - launchButtonProps: ServiceCardButtonProps; + /** Helper text for card */ + helperText?: string; + /** Props to customize learn more Button */ + learnMoreButton:React.ReactElement ; + /** Optional launch */ + launchButton?: React.ReactElement; /** Custom OUIA ID */ ouiaId?: string | number; } @@ -46,17 +54,15 @@ const ServiceCard: React.FunctionComponent = ({ subtitle, description, iconUrl, - learnMoreUrl, - launchUrl, helperText, - learnMoreButtonProps, - launchButtonProps, + learnMoreButton, + launchButton, ouiaId='ServiceCard' }: ServiceCardProps) => { const classes = useStyles(); return ( - + @@ -66,9 +72,13 @@ const ServiceCard: React.FunctionComponent = ({ {description} - {helperText} - - + */} - {launchButtonProps && - } - - {/* - Learn more - */} + {launchButton ? ( launchButton ) : null + // + } ) From a941a0d6823ffe6cada44dd450b89506d546029c Mon Sep 17 00:00:00 2001 From: Zein Sleiman Date: Fri, 19 Jul 2024 15:44:43 -0500 Subject: [PATCH 03/23] remove comments and unused imports --- .../module/src/ServiceCard/ServiceCard.tsx | 37 +------------------ 1 file changed, 2 insertions(+), 35 deletions(-) diff --git a/packages/module/src/ServiceCard/ServiceCard.tsx b/packages/module/src/ServiceCard/ServiceCard.tsx index 8a3ddb75..805559d9 100644 --- a/packages/module/src/ServiceCard/ServiceCard.tsx +++ b/packages/module/src/ServiceCard/ServiceCard.tsx @@ -1,23 +1,9 @@ import React from 'react'; -import { Button, ButtonVariant, ButtonProps, Card, CardBody, CardFooter, CardHeader, Text, TextContent, TextVariants } from '@patternfly/react-core'; +import { Card, CardBody, CardFooter, CardHeader, Text, TextContent, TextVariants } from '@patternfly/react-core'; import { HelperText } from '@patternfly/react-core/dist/dynamic/components/HelperText'; import { HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText'; import { createUseStyles } from 'react-jss'; -export interface AnalyticsProps { - event: string; - properties: { name: string; url: string; }; -} - -export interface ServiceCardButtonProps extends ButtonProps { - /** Label for the button */ - label: string; - /** button url */ - url: string; - analytics: AnalyticsProps -} - - export interface ServiceCardProps { /** Title for card */ title: string; @@ -78,27 +64,8 @@ const ServiceCard: React.FunctionComponent = ({ {learnMoreButton} - {/* */} - {launchButton ? ( launchButton ) : null - // - } + {launchButton ? ( launchButton ) : null} ) From 8e545e2179ea564ec6457adcf423b16a204914f1 Mon Sep 17 00:00:00 2001 From: Zein Sleiman Date: Wed, 24 Jul 2024 08:40:43 -0500 Subject: [PATCH 04/23] update footer prop --- .../ServiceCard/ServiceCardExample.tsx | 22 +------- .../module/src/ServiceCard/ServiceCard.tsx | 50 ++++++++++++++----- 2 files changed, 40 insertions(+), 32 deletions(-) diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardExample.tsx index f4e0afb0..254e24e6 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardExample.tsx @@ -9,24 +9,6 @@ export const BasicExample: React.FunctionComponent = () => - Learn More - - } - launchButton={ - - } - + learnMoreUrl='/' + launchUrl='/' /> diff --git a/packages/module/src/ServiceCard/ServiceCard.tsx b/packages/module/src/ServiceCard/ServiceCard.tsx index 805559d9..77f10cfc 100644 --- a/packages/module/src/ServiceCard/ServiceCard.tsx +++ b/packages/module/src/ServiceCard/ServiceCard.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Card, CardBody, CardFooter, CardHeader, Text, TextContent, TextVariants } from '@patternfly/react-core'; +import { Button, ButtonVariant, Card, CardBody, CardFooter, CardHeader, Text, TextContent, TextVariants } from '@patternfly/react-core'; import { HelperText } from '@patternfly/react-core/dist/dynamic/components/HelperText'; import { HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText'; import { createUseStyles } from 'react-jss'; @@ -17,11 +17,13 @@ export interface ServiceCardProps { showDisabledButton?: boolean; /** Helper text for card */ helperText?: string; - /** Props to customize learn more Button */ - learnMoreButton:React.ReactElement ; - /** Optional launch */ - launchButton?: React.ReactElement; - /** Custom OUIA ID */ + /** learn more button url*/ + learnMoreUrl: string; + /** Optional launch button url*/ + launchUrl?: string; + /** Optional foot to override default Learn More and Launch buttons */ + footer?: React.ReactElement + /** Optional custom OUIA ID */ ouiaId?: string | number; } @@ -32,8 +34,11 @@ const useStyles = createUseStyles({ image: { marginRight: ('--pf-v5-u-mr-md'), width: 48 + }, + launchButton: { + marginRight: ('--pf-v5-u-mr-md') } -}) +}); const ServiceCard: React.FunctionComponent = ({ title, @@ -41,8 +46,9 @@ const ServiceCard: React.FunctionComponent = ({ description, iconUrl, helperText, - learnMoreButton, - launchButton, + learnMoreUrl, + launchUrl, + footer, ouiaId='ServiceCard' }: ServiceCardProps) => { const classes = useStyles(); @@ -63,9 +69,29 @@ const ServiceCard: React.FunctionComponent = ({ {helperText} - {learnMoreButton} - - {launchButton ? ( launchButton ) : null} + { + footer ? + ( footer ) : + ( <> + { launchUrl && + } + + ) + } ) From c9d1e1093d500ca3effc845a32daa45f7af5b554 Mon Sep 17 00:00:00 2001 From: Zein Sleiman Date: Wed, 24 Jul 2024 14:40:15 -0500 Subject: [PATCH 05/23] fix styling --- packages/module/src/ServiceCard/ServiceCard.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/module/src/ServiceCard/ServiceCard.tsx b/packages/module/src/ServiceCard/ServiceCard.tsx index 77f10cfc..faf3193d 100644 --- a/packages/module/src/ServiceCard/ServiceCard.tsx +++ b/packages/module/src/ServiceCard/ServiceCard.tsx @@ -29,14 +29,14 @@ export interface ServiceCardProps { const useStyles = createUseStyles({ card: { - height: ('--pf-v5-u-h-100') + height: ('var(--pf-v5-u-h-100)') }, image: { - marginRight: ('--pf-v5-u-mr-md'), + marginRight: ('var(--pf-v5-u-mr-md)'), width: 48 }, launchButton: { - marginRight: ('--pf-v5-u-mr-md') + marginRight: ('var(--pf-v5-global--spacer--sm)') } }); From d183eb0f69e7212e4547cef156492e3b9062960d Mon Sep 17 00:00:00 2001 From: Zein Sleiman Date: Wed, 24 Jul 2024 14:41:10 -0500 Subject: [PATCH 06/23] use right spacing var --- packages/module/src/ServiceCard/ServiceCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/module/src/ServiceCard/ServiceCard.tsx b/packages/module/src/ServiceCard/ServiceCard.tsx index faf3193d..8182b001 100644 --- a/packages/module/src/ServiceCard/ServiceCard.tsx +++ b/packages/module/src/ServiceCard/ServiceCard.tsx @@ -32,7 +32,7 @@ const useStyles = createUseStyles({ height: ('var(--pf-v5-u-h-100)') }, image: { - marginRight: ('var(--pf-v5-u-mr-md)'), + marginRight: ('var(--pf-v5-global--spacer--md)'), width: 48 }, launchButton: { From 5f42d55fc5fbaf1843d14196834758e08059cbdb Mon Sep 17 00:00:00 2001 From: Zein Sleiman Date: Wed, 24 Jul 2024 15:05:40 -0500 Subject: [PATCH 07/23] add Service Card with Gallery example --- .../examples/ServiceCard/ServiceCard.md | 6 ++++ .../ServiceCard/ServiceCardExample.tsx | 1 - .../ServiceCard/ServiceCardGalleryExample.tsx | 34 +++++++++++++++++++ .../module/src/ServiceCard/ServiceCard.tsx | 19 +++++------ 4 files changed, 49 insertions(+), 11 deletions(-) create mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardGalleryExample.tsx diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md index 61567ffc..54a5536b 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md @@ -18,3 +18,9 @@ A **Service Card** component allows ```js file="./ServiceCardExample.tsx" ``` + +### Service Card with Gallery example + +```js file="./ServiceCardGalleryExample.tsx" + +``` diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardExample.tsx index 254e24e6..9f288bdc 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardExample.tsx @@ -1,6 +1,5 @@ import React from 'react'; import ServiceCard from "@patternfly/react-component-groups/dist/dynamic/ServiceCard"; -import { Button, ButtonVariant } from '@patternfly/react-core'; export const BasicExample: React.FunctionComponent = () => ( + + + + + + + + +) \ No newline at end of file diff --git a/packages/module/src/ServiceCard/ServiceCard.tsx b/packages/module/src/ServiceCard/ServiceCard.tsx index 8182b001..e8c84699 100644 --- a/packages/module/src/ServiceCard/ServiceCard.tsx +++ b/packages/module/src/ServiceCard/ServiceCard.tsx @@ -73,15 +73,15 @@ const ServiceCard: React.FunctionComponent = ({ footer ? ( footer ) : ( <> - { launchUrl && - } + { launchUrl && + } } + + } /> ); \ No newline at end of file diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardGalleryExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardGalleryExample.tsx index 181edab2..490a7b2c 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardGalleryExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardGalleryExample.tsx @@ -2,20 +2,21 @@ import React from 'react'; import ServiceCard from "@patternfly/react-component-groups/dist/dynamic/ServiceCard"; import { Gallery } from '@patternfly/react-core/dist/dynamic/layouts/Gallery'; import { GalleryItem } from '@patternfly/react-core/dist/dynamic/layouts/Gallery'; - +import { Button, ButtonVariant } from '@patternfly/react-core'; +import contentHeaderIcon from '../../assets/icons/content-header-icon.svg'; +import { createUseStyles } from 'react-jss'; export const ServiceCardGalleryExample: React.FunctionComponent = () => ( } showDisabledButton={false} helperText='' - learnMoreUrl='/' - launchUrl='/' + /> @@ -23,11 +24,26 @@ export const ServiceCardGalleryExample: React.FunctionComponent = () => ( title='Example2' subtitle='A second example' description='This is another basic ServiceCard Example' - iconUrl='/' + icon={content-header-icon} showDisabledButton={false} helperText='' - learnMoreUrl='/' - launchUrl='/' + footer={<> + + + } /> diff --git a/packages/module/src/ServiceCard/ServiceCard.test.tsx b/packages/module/src/ServiceCard/ServiceCard.test.tsx index 4d7a3088..a8591cd0 100644 --- a/packages/module/src/ServiceCard/ServiceCard.test.tsx +++ b/packages/module/src/ServiceCard/ServiceCard.test.tsx @@ -11,8 +11,6 @@ describe('LogSnippet component', () => { icon='/' showDisabledButton={false} helperText='' - learnMoreUrl='/' - launchUrl='/' />)).toMatchSnapshot(); }); }); \ No newline at end of file diff --git a/packages/module/src/ServiceCard/ServiceCard.tsx b/packages/module/src/ServiceCard/ServiceCard.tsx index 4ef0c7d5..83f93ced 100644 --- a/packages/module/src/ServiceCard/ServiceCard.tsx +++ b/packages/module/src/ServiceCard/ServiceCard.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Button, ButtonVariant, Card, CardBody, CardFooter, CardHeader, Text, TextContent, TextVariants } from '@patternfly/react-core'; +import { Card, CardBody, CardFooter, CardHeader, Text, TextContent, TextVariants } from '@patternfly/react-core'; import { HelperText } from '@patternfly/react-core/dist/dynamic/components/HelperText'; import { HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText'; import { createUseStyles } from 'react-jss'; @@ -17,11 +17,7 @@ export interface ServiceCardProps { showDisabledButton?: boolean; /** Helper text for card */ helperText?: string; - /** learn more button url*/ - learnMoreUrl: string; - /** Optional launch button url*/ - launchUrl?: string; - /** Optional foot to override default Learn More and Launch buttons */ + /** Optional footer */ footer?: React.ReactElement /** Optional custom OUIA ID */ ouiaId?: string | number; @@ -29,14 +25,11 @@ export interface ServiceCardProps { const useStyles = createUseStyles({ card: { - height: ('var(--pf-v5-u-h-100)') + height: 'var(--pf-v5-u-h-100)' }, image: { - marginRight: ('var(--pf-v5-global--spacer--md)'), + marginRight: 'var(--pf-v5-global--spacer--md)', width: 48 - }, - launchButton: { - marginRight: ('var(--pf-v5-global--spacer--sm)') } }); @@ -46,8 +39,6 @@ const ServiceCard: React.FunctionComponent = ({ description, icon, helperText, - learnMoreUrl, - launchUrl, footer, ouiaId='ServiceCard' }: ServiceCardProps) => { @@ -66,34 +57,14 @@ const ServiceCard: React.FunctionComponent = ({ {description} - - - {helperText} - - - { - footer ? - ( footer ) : - ( <> - { launchUrl && - } - - ) + { helperText ? + ( + + {helperText} + + ) : null } + { footer ? ( footer ) : null } ) From 6899a73e5a4552012d35704131e93d963115ef1d Mon Sep 17 00:00:00 2001 From: Zein Sleiman Date: Wed, 31 Jul 2024 11:12:30 -0500 Subject: [PATCH 13/23] remove unused import --- .../examples/ServiceCard/ServiceCardGalleryExample.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardGalleryExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardGalleryExample.tsx index 490a7b2c..ed3a37c7 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardGalleryExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardGalleryExample.tsx @@ -4,7 +4,6 @@ import { Gallery } from '@patternfly/react-core/dist/dynamic/layouts/Gallery'; import { GalleryItem } from '@patternfly/react-core/dist/dynamic/layouts/Gallery'; import { Button, ButtonVariant } from '@patternfly/react-core'; import contentHeaderIcon from '../../assets/icons/content-header-icon.svg'; -import { createUseStyles } from 'react-jss'; export const ServiceCardGalleryExample: React.FunctionComponent = () => ( From 8b0207c5161607836530ee969d8dff98fa3773f8 Mon Sep 17 00:00:00 2001 From: Zein Sleiman Date: Wed, 31 Jul 2024 11:16:09 -0500 Subject: [PATCH 14/23] update snapshot --- .../__snapshots__/ServiceCard.test.tsx.snap | 68 +------------------ 1 file changed, 2 insertions(+), 66 deletions(-) diff --git a/packages/module/src/ServiceCard/__snapshots__/ServiceCard.test.tsx.snap b/packages/module/src/ServiceCard/__snapshots__/ServiceCard.test.tsx.snap index 507d5597..f80bd4b8 100644 --- a/packages/module/src/ServiceCard/__snapshots__/ServiceCard.test.tsx.snap +++ b/packages/module/src/ServiceCard/__snapshots__/ServiceCard.test.tsx.snap @@ -46,39 +46,7 @@ exports[`LogSnippet component should render LogSnippet component 1`] = `
-
-
- -
-
- - Launch - - - Learn More - -
+ /> , @@ -124,39 +92,7 @@ exports[`LogSnippet component should render LogSnippet component 1`] = `
-
-
- -
-
- - Launch - - - Learn More - -
+ /> , "debug": [Function], From 241e44fa68eed20d4dc999f678486de3d217aca2 Mon Sep 17 00:00:00 2001 From: Zein Sleiman Date: Wed, 31 Jul 2024 11:30:58 -0500 Subject: [PATCH 15/23] update props description --- packages/module/src/ServiceCard/ServiceCard.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/module/src/ServiceCard/ServiceCard.tsx b/packages/module/src/ServiceCard/ServiceCard.tsx index 83f93ced..3847cb91 100644 --- a/packages/module/src/ServiceCard/ServiceCard.tsx +++ b/packages/module/src/ServiceCard/ServiceCard.tsx @@ -5,17 +5,17 @@ import { HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/H import { createUseStyles } from 'react-jss'; export interface ServiceCardProps { - /** Title for card */ + /** Service card title */ title: string; - /** Subtitle for card */ + /** Service card subtitle */ subtitle: string; - /** Custom description */ + /** Service card description */ description: string; - /** icon for service card */ + /** Service card icon */ icon: React.ReactNode; /** Whether to show if button is disabled */ showDisabledButton?: boolean; - /** Helper text for card */ + /** Optional Service card helper text*/ helperText?: string; /** Optional footer */ footer?: React.ReactElement From 948231b747fff0ba17adbe4180cb000c5c44e5d3 Mon Sep 17 00:00:00 2001 From: Filip Hlavac <50696716+fhlavac@users.noreply.github.com> Date: Wed, 31 Jul 2024 19:56:16 +0200 Subject: [PATCH 16/23] Update packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md --- .../component-groups/examples/ServiceCard/ServiceCard.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md index 3f7d1b87..56317b7e 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md @@ -11,7 +11,7 @@ import ServiceCard from "@patternfly/react-component-groups/dist/dynamic/Service import { EllipsisVIcon } from '@patternfly/react-icons'; import contentHeaderIcon from '../../assets/icons/content-header-icon.svg' -A **Service Card** component displays a card with an icon, title, description, and an optional customized footer +The **service card** component displays a card representing a service with an icon, title, description, and an optional customized footer ## Examples From eb895bb2f04d8f547a63d326688075aa9458d2b8 Mon Sep 17 00:00:00 2001 From: Filip Hlavac <50696716+fhlavac@users.noreply.github.com> Date: Wed, 31 Jul 2024 19:56:47 +0200 Subject: [PATCH 17/23] Update packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md --- .../component-groups/examples/ServiceCard/ServiceCard.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md index 56317b7e..ea37f265 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md @@ -17,7 +17,7 @@ The **service card** component displays a card representing a service with an ic ### Service Card -This shows a basic service card with a `icon`, `title`, `description`, and optional footer passed in. +This shows a basic service card with an `icon`, `title`, `description`, and optional footer passed in. ```js file="./ServiceCardExample.tsx" From a6c3ae1c3214c92af1cdb95913b087186fc51b8b Mon Sep 17 00:00:00 2001 From: Filip Hlavac <50696716+fhlavac@users.noreply.github.com> Date: Wed, 31 Jul 2024 19:58:48 +0200 Subject: [PATCH 18/23] Update packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md --- .../component-groups/examples/ServiceCard/ServiceCard.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md index ea37f265..ddb45061 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md @@ -25,7 +25,7 @@ This shows a basic service card with an `icon`, `title`, `description`, and opti ### Service Card with Gallery example -This shows how cards will look side by side in a `Gallery` component +This shows how cards can look side by side in a [gallery layout](/layouts/gallery). ```js file="./ServiceCardGalleryExample.tsx" From c119f00ea4794941fc139a57d487e60770fe4c0c Mon Sep 17 00:00:00 2001 From: Zein Sleiman Date: Wed, 31 Jul 2024 13:15:01 -0500 Subject: [PATCH 19/23] remove unused prop --- packages/module/src/ServiceCard/ServiceCard.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/module/src/ServiceCard/ServiceCard.tsx b/packages/module/src/ServiceCard/ServiceCard.tsx index 3847cb91..af8ec06e 100644 --- a/packages/module/src/ServiceCard/ServiceCard.tsx +++ b/packages/module/src/ServiceCard/ServiceCard.tsx @@ -13,12 +13,10 @@ export interface ServiceCardProps { description: string; /** Service card icon */ icon: React.ReactNode; - /** Whether to show if button is disabled */ - showDisabledButton?: boolean; /** Optional Service card helper text*/ helperText?: string; /** Optional footer */ - footer?: React.ReactElement + footer?: React.ReactElement | null; /** Optional custom OUIA ID */ ouiaId?: string | number; } @@ -39,7 +37,7 @@ const ServiceCard: React.FunctionComponent = ({ description, icon, helperText, - footer, + footer = null, ouiaId='ServiceCard' }: ServiceCardProps) => { const classes = useStyles(); @@ -64,7 +62,7 @@ const ServiceCard: React.FunctionComponent = ({ ) : null } - { footer ? ( footer ) : null } + { footer } ) From 49d6e4a1509a3acff4d73e64c2673adf29c5cca6 Mon Sep 17 00:00:00 2001 From: Zein Sleiman Date: Wed, 31 Jul 2024 13:16:07 -0500 Subject: [PATCH 20/23] fix test --- packages/module/src/ServiceCard/ServiceCard.test.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/module/src/ServiceCard/ServiceCard.test.tsx b/packages/module/src/ServiceCard/ServiceCard.test.tsx index a8591cd0..8550afae 100644 --- a/packages/module/src/ServiceCard/ServiceCard.test.tsx +++ b/packages/module/src/ServiceCard/ServiceCard.test.tsx @@ -9,7 +9,6 @@ describe('LogSnippet component', () => { subtitle='A basic example' description='This is a basic ServiceCard Example' icon='/' - showDisabledButton={false} helperText='' />)).toMatchSnapshot(); }); From d972e5e5d04fb312e6046462fee98506d37e35dd Mon Sep 17 00:00:00 2001 From: Zein Sleiman Date: Wed, 31 Jul 2024 15:48:15 -0500 Subject: [PATCH 21/23] add ouia-ids --- .../examples/ServiceCard/ServiceCardExample.tsx | 1 - .../examples/ServiceCard/ServiceCardGalleryExample.tsx | 2 -- packages/module/src/ServiceCard/ServiceCard.tsx | 8 ++++---- 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardExample.tsx index 20fd6577..ea81007c 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardExample.tsx @@ -10,7 +10,6 @@ export const BasicExample: React.FunctionComponent = () => ( subtitle='A basic example' description='This is a basic ServiceCard Example' icon={content-header-icon} - showDisabledButton={false} helperText='Here is helper text' footer={<> + + } + />) + cy.get('[data-ouia-component-id="Example-footer"]').should('exist'); + }) +}); \ No newline at end of file