add ServiceCard component

packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md

@@ -0,0 +1,28 @@
+---
+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";
+import { EllipsisVIcon } from '@patternfly/react-icons';
+import contentHeaderIcon from '../../assets/icons/content-header-icon.svg'
+
+A **Service Card** component allows
+
+## Examples
+
+### Service Card
+
+```js file="./ServiceCardExample.tsx"
+
+```
+
+### Service Card with Gallery example
+
+```js file="./ServiceCardGalleryExample.tsx"
+
+```

packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardExample.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ServiceCard from "@patternfly/react-component-groups/dist/dynamic/ServiceCard";
+import contentHeaderIcon from '../../assets/icons/content-header-icon.svg';
+
+export const BasicExample: React.FunctionComponent = () => (
+  <ServiceCard 
+    title='Example'
+    subtitle='A basic example'
+    description='This is a basic ServiceCard Example'
+    icon={<img src={contentHeaderIcon} alt="content-header-icon" />}
+    showDisabledButton={false}
+    helperText=''
+    learnMoreUrl='/'
+    launchUrl='/'
+  />
+);

packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardGalleryExample.tsx

@@ -0,0 +1,34 @@
+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';
+
+
+export const ServiceCardGalleryExample: React.FunctionComponent = () => (
+  <Gallery hasGutter minWidths={{ default: '330px' }}>
+    <GalleryItem>
+      <ServiceCard 
+        title='Example2'
+        subtitle='A basic example'
+        description='This is a basic ServiceCard Example'
+        iconUrl='/'
+        showDisabledButton={false}
+        helperText=''
+        learnMoreUrl='/'
+        launchUrl='/'
+      />
+    </GalleryItem>
+    <GalleryItem>
+      <ServiceCard 
+        title='Example2'
+        subtitle='A second example'
+        description='This is another basic ServiceCard Example'
+        iconUrl='/'
+        showDisabledButton={false}
+        helperText=''
+        learnMoreUrl='/'
+        launchUrl='/'
+      />
+    </GalleryItem>
+  </Gallery>
+)

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ServiceCard from './ServiceCard';
+
+describe('LogSnippet component', () => {
+  it('should render LogSnippet component', () => {
+    expect(render(<ServiceCard 
+      title='Example'
+      subtitle='A basic example'
+      description='This is a basic ServiceCard Example'
+      icon='/'
+      showDisabledButton={false}
+      helperText=''
+      learnMoreUrl='/'
+      launchUrl='/'
+    />)).toMatchSnapshot();
+  });
+});

packages/module/src/ServiceCard/ServiceCard.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+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';
+
+export interface ServiceCardProps {
+  /** Title for card */
+  title: string;
+  /** Subtitle for card */
+  subtitle: string;
+  /** Custom description */
+  description: string;
+  /** icon for service card */
+  icon: React.ReactNode;
+  /** Whether to show if button is disabled */
+  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 */
+  footer?: React.ReactElement
+  /** Optional custom OUIA ID */
+  ouiaId?: string | number;
+}
+
+const useStyles = createUseStyles({
+  card: {
+    height: ('var(--pf-v5-u-h-100)')
+  },
+  image: {
+    marginRight: ('var(--pf-v5-global--spacer--md)'),
+    width: 48
+  },
+  launchButton: {
+    marginRight: ('var(--pf-v5-global--spacer--sm)')
+  }
+});
+
+const ServiceCard: React.FunctionComponent<ServiceCardProps> = ({
+  title,
+  subtitle,
+  description,
+  icon,
+  helperText,
+  learnMoreUrl,
+  launchUrl,
+  footer,
+  ouiaId='ServiceCard'
+}: ServiceCardProps) => {
+  const classes = useStyles();
+
+  return (
+    <Card className={classes.card} ouiaId={`${ouiaId}-card`}>
+      <CardHeader>
+        <div className={classes.image}>
+          {icon}
+        </div>
+        <TextContent>
+          <Text component={TextVariants.h2}>{title}</Text>
+          {subtitle}
+        </TextContent>
+      </CardHeader>
+      <CardBody>{description}</CardBody>
+      <CardFooter>
+        <HelperText>
+          <HelperTextItem variant="indeterminate" className="pf-v5-u-mb-lg">
+            {helperText}
+          </HelperTextItem>
+        </HelperText>
+        {
+          footer ?
+            ( footer ) :
+            ( <>
+              { launchUrl &&  
+                <Button
+                  variant={ButtonVariant.secondary}
+                  isInline
+                  className={classes.launchButton}
+                  component="a"
+                  href={launchUrl}>
+                    Launch
+                </Button> }
+              <Button
+                variant={ButtonVariant.link}
+                component="a"
+                isInline
+                href={learnMoreUrl}
+              >
+                Learn More
+              </Button>
+            </> )
+        }
+      </CardFooter>
+    </Card>
+  )
+}
+
+export default ServiceCard;