add ServiceCard component by InsaneZein · Pull Request #200 · patternfly/react-component-groups

InsaneZein · 2024-07-18T21:30:54Z

RHCLOUD-31482 Adds Service Card component

patternfly-build · 2024-07-18T21:32:44Z

Preview: https://react-component-groups-pr-component-groups-200.surge.sh

A11y report: https://react-component-groups-pr-component-groups-200-a11y.surge.sh

fhlavac · 2024-07-31T06:54:33Z

+A **Service Card** component allows
+
+## Examples
+
+### Service Card
+
+```js file="./ServiceCardExample.tsx"
+
+```
+
+### Service Card with Gallery example
+
+```js file="./ServiceCardGalleryExample.tsx"
+
+```


@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.

fhlavac · 2024-07-31T06:55:31Z

+    description='This is a basic ServiceCard Example'
+    icon={<img src={contentHeaderIcon} alt="content-header-icon" />}
+    showDisabledButton={false}
+    helperText=''


I would either provide some text or remove the prop from this example

fhlavac · 2024-07-31T07:00:39Z

+
+const useStyles = createUseStyles({
+  card: {
+    height: ('var(--pf-v5-u-h-100)')


Suggested change

height: ('var(--pf-v5-u-h-100)')

height: 'var(--pf-v5-u-h-100)'

fhlavac · 2024-07-31T07:00:49Z

+    height: ('var(--pf-v5-u-h-100)')
+  },
+  image: {
+    marginRight: ('var(--pf-v5-global--spacer--md)'),


Suggested change

marginRight: ('var(--pf-v5-global--spacer--md)'),

marginRight: 'var(--pf-v5-global--spacer--md)',

fhlavac · 2024-07-31T07:02:11Z

+    width: 48
+  },
+  launchButton: {
+    marginRight: ('var(--pf-v5-global--spacer--sm)')


Suggested change

marginRight: ('var(--pf-v5-global--spacer--sm)')

marginRight: 'var(--pf-v5-global--spacer--md)'

I think this one should be md

fhlavac · 2024-07-31T07:04:15Z

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)

fhlavac · 2024-07-31T07:05:11Z

We should preferably use cypress

fhlavac · 2024-07-31T07:50:21Z

@InsaneZein thank you! Overall looks good. Just some minor comments

* add ServiceCard component (patternfly#200) * fix(readme): Update README.md (patternfly#257) * chore(deps-dev): bump @babel/preset-env from 7.24.8 to 7.25.3 (patternfly#254) Bumps [@babel/preset-env](https://github.com/babel/babel/tree/HEAD/packages/babel-preset-env) from 7.24.8 to 7.25.3. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.25.3/packages/babel-preset-env) --- updated-dependencies: - dependency-name: "@babel/preset-env" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump eslint from 8.41.0 to 8.57.0 (patternfly#253) Bumps [eslint](https://github.com/eslint/eslint) from 8.41.0 to 8.57.0. - [Release notes](https://github.com/eslint/eslint/releases) - [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md) - [Commits](eslint/eslint@v8.41.0...v8.57.0) --- updated-dependencies: - dependency-name: eslint dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump readable-stream from 1.0.34 to 2.3.8 (patternfly#251) Bumps [readable-stream](https://github.com/nodejs/readable-stream) from 1.0.34 to 2.3.8. - [Release notes](https://github.com/nodejs/readable-stream/releases) - [Commits](nodejs/readable-stream@v1.0.34...v2.3.8) --- updated-dependencies: - dependency-name: readable-stream dependency-type: indirect update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump sax from 1.2.4 to 1.4.1 (patternfly#250) Bumps [sax](https://github.com/isaacs/sax-js) from 1.2.4 to 1.4.1. - [Commits](isaacs/sax-js@v1.2.4...v1.4.1) --- updated-dependencies: - dependency-name: sax dependency-type: indirect update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump fast-glob from 3.2.12 to 3.3.2 (patternfly#249) Bumps [fast-glob](https://github.com/mrmlnc/fast-glob) from 3.2.12 to 3.3.2. - [Release notes](https://github.com/mrmlnc/fast-glob/releases) - [Commits](mrmlnc/fast-glob@3.2.12...3.3.2) --- updated-dependencies: - dependency-name: fast-glob dependency-type: indirect update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @jridgewell/sourcemap-codec from 1.4.15 to 1.5.0 (patternfly#248) Bumps [@jridgewell/sourcemap-codec](https://github.com/jridgewell/sourcemap-codec) from 1.4.15 to 1.5.0. - [Release notes](https://github.com/jridgewell/sourcemap-codec/releases) - [Changelog](https://github.com/jridgewell/sourcemap-codec/blob/main/CHANGELOG.md) - [Commits](jridgewell/sourcemap-codec@v1.4.15...v1.5.0) --- updated-dependencies: - dependency-name: "@jridgewell/sourcemap-codec" dependency-type: indirect update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump launch-editor from 2.8.0 to 2.8.1 (patternfly#247) Bumps [launch-editor](https://github.com/yyx990803/launch-editor) from 2.8.0 to 2.8.1. - [Commits](vitejs/launch-editor@v2.8.0...v2.8.1) --- updated-dependencies: - dependency-name: launch-editor dependency-type: indirect update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @types/eslint-scope from 3.7.4 to 3.7.7 (patternfly#246) Bumps [@types/eslint-scope](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/eslint-scope) from 3.7.4 to 3.7.7. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/eslint-scope) --- updated-dependencies: - dependency-name: "@types/eslint-scope" dependency-type: indirect update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Update to PatternFly 6 (patternfly#145) * Update to the latest PF versions (patternfly#224) * Update PF dependencies * Fix MCC colors * Replace not existing PF Text components * Update snapshots * fix(v6): Fix generated files * fix(v6): Fix TagCount styling (patternfly#237) * fix(v6): Fix TagCount styling * Update tokens * Update snapshots * fix(pf6): Update generated files * Remove extra padding * Remove unused import * Update README.md --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: InsaneZein <zsleiman@redhat.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

add ServiceCard component

6f60bd3

InsaneZein added 6 commits July 19, 2024 15:29

fix props

4ce6b3a

remove comments and unused imports

a941a0d

update footer prop

8e545e2

fix styling

c9d1e10

use right spacing var

d183eb0

add Service Card with Gallery example

5f42d55

InsaneZein marked this pull request as ready for review July 24, 2024 20:06

InsaneZein added 4 commits July 29, 2024 15:57

add service-card tests

2b74087

fix icon issue

e8d285f

update snapshot

afac096

fix example

b8723cc

InsaneZein requested review from dlabaj and fhlavac July 30, 2024 18:52

fhlavac reviewed Jul 31, 2024

View reviewed changes

Comment thread packages/module/src/ServiceCard/ServiceCard.test.tsx

fhlavac Jul 31, 2024

Copy link
Copy Markdown

Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should preferably use cypress

fhlavac reviewed Jul 31, 2024

View reviewed changes

Comment thread packages/module/src/ServiceCard/ServiceCard.tsx

fhlavac reviewed Jul 31, 2024

View reviewed changes

Comment thread packages/module/src/ServiceCard/ServiceCard.tsx

InsaneZein added 4 commits July 31, 2024 10:29

remove default button props

9541df0

remove unused import

6899a73

update snapshot

8b0207c

update props description

241e44f

fhlavac reviewed Jul 31, 2024

View reviewed changes

Comment thread ...dule/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md Outdated

github-actions Bot mentioned this pull request Apr 21, 2025

The automated release is failing 🚨 #692

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add ServiceCard component#200

add ServiceCard component#200
fhlavac merged 24 commits into
mainfrom
add-servicecard

InsaneZein commented Jul 18, 2024 •

edited

Loading

Uh oh!

patternfly-build commented Jul 18, 2024 •

edited

Loading

Uh oh!

fhlavac Jul 31, 2024

Uh oh!

fhlavac Jul 31, 2024

Uh oh!

fhlavac Jul 31, 2024

Uh oh!

fhlavac Jul 31, 2024

Uh oh!

fhlavac Jul 31, 2024

Uh oh!

fhlavac Jul 31, 2024 •

edited

Loading

Uh oh!

fhlavac Jul 31, 2024

Uh oh!

Uh oh!

Uh oh!

fhlavac commented Jul 31, 2024

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	height: ('var(--pf-v5-u-h-100)')
	height: 'var(--pf-v5-u-h-100)'

	marginRight: ('var(--pf-v5-global--spacer--md)'),
	marginRight: 'var(--pf-v5-global--spacer--md)',

Conversation

InsaneZein commented Jul 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

patternfly-build commented Jul 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fhlavac Jul 31, 2024

Choose a reason for hiding this comment

Uh oh!

fhlavac Jul 31, 2024

Choose a reason for hiding this comment

Uh oh!

fhlavac Jul 31, 2024

Choose a reason for hiding this comment

Uh oh!

fhlavac Jul 31, 2024

Choose a reason for hiding this comment

Uh oh!

fhlavac Jul 31, 2024

Choose a reason for hiding this comment

Uh oh!

fhlavac Jul 31, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

fhlavac Jul 31, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

fhlavac commented Jul 31, 2024

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

InsaneZein commented Jul 18, 2024 •

edited

Loading

patternfly-build commented Jul 18, 2024 •

edited

Loading

fhlavac Jul 31, 2024 •

edited

Loading