add ServiceCard component #200
Conversation
| A **Service Card** component allows | ||
|
|
||
| ## Examples | ||
|
|
||
| ### Service Card | ||
|
|
||
| ```js file="./ServiceCardExample.tsx" | ||
|
|
||
| ``` | ||
|
|
||
| ### Service Card with Gallery example | ||
|
|
||
| ```js file="./ServiceCardGalleryExample.tsx" | ||
|
|
||
| ``` |
There was a problem hiding this comment.
@InsaneZein can you please add some texts to the docs? It would also be nice to create an example with the custom footer. Let me know if you need help with the texts.
| description='This is a basic ServiceCard Example' | ||
| icon={<img src={contentHeaderIcon} alt="content-header-icon" />} | ||
| showDisabledButton={false} | ||
| helperText='' |
There was a problem hiding this comment.
I would either provide some text or remove the prop from this example
|
|
||
| const useStyles = createUseStyles({ | ||
| card: { | ||
| height: ('var(--pf-v5-u-h-100)') |
There was a problem hiding this comment.
| height: ('var(--pf-v5-u-h-100)') | |
| height: 'var(--pf-v5-u-h-100)' |
| height: ('var(--pf-v5-u-h-100)') | ||
| }, | ||
| image: { | ||
| marginRight: ('var(--pf-v5-global--spacer--md)'), |
There was a problem hiding this comment.
| marginRight: ('var(--pf-v5-global--spacer--md)'), | |
| marginRight: 'var(--pf-v5-global--spacer--md)', |
| width: 48 | ||
| }, | ||
| launchButton: { | ||
| marginRight: ('var(--pf-v5-global--spacer--sm)') |
There was a problem hiding this comment.
| marginRight: ('var(--pf-v5-global--spacer--sm)') | |
| marginRight: 'var(--pf-v5-global--spacer--md)' |
I think this one should be md
There was a problem hiding this comment.
Can you please add icons to these cards and show a helper text in one of the cards? Just to show the features.
For the footers we could hardcode the default one in the example and another with something like this
<Button variant="link" isInline>
Learn more
<Icon className="pf-u-ml-sm" isInline>
<ArrowRightIcon />
</Icon>
</Button>
(another already known use case of this component)
There was a problem hiding this comment.
We should preferably use cypress
|
@InsaneZein thank you! Overall looks good. Just some minor comments |
RHCLOUD-31482 Adds Service Card component