Rebase to latest main

package.json

@@ -59,7 +59,7 @@
     "eslint-plugin-markdown": "^1.0.2",
     "eslint-plugin-n": "^15.0.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-promise": "^6.4.0",
+    "eslint-plugin-promise": "^6.6.0",
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "fs-extra": "^11.2.0",
@@ -71,7 +71,7 @@
     "prettier": "3.3.2",
     "react": "^18",
     "react-dom": "^18",
-    "rimraf": "^5.0.7",
+    "rimraf": "^5.0.10",
     "sass": "^1.77.6",
     "sass-loader": "^14.2.1",
     "serve": "^14.2.3",

packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExample.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import MultiContentCard from "@patternfly/react-component-groups/dist/dynamic/MultiContentCard";
-import { Button, Card, CardHeader, CardBody, Content, ContentVariants, List, ListItem, Icon, CardFooter } from '@patternfly/react-core';
+import { Button, Card, CardHeader, CardBody, CardFooter, List, ListItem, Content, ContentVariants, Icon } from '@patternfly/react-core';
 import { ArrowRightIcon, BellIcon, CogIcon, LockIcon } from '@patternfly/react-icons';
 import { createUseStyles } from 'react-jss';
 import clsx from 'clsx';
 
 const useStyles = createUseStyles({
   action: {
     color: 'var(--pf-t--global--text--color--brand--default)',
-    fontSize: 'var(-pf-t--global--font--size--sm)',
+    fontSize: 'var(--pf-t--global--font--size--sm)',
   },
   actionIcon: {
     color: 'var(--pf-t--global--icon--color--regular)',
@@ -17,9 +17,9 @@ const useStyles = createUseStyles({
     color: 'var(--pf-t--global--color--brand--default)',
   },
 });
+
 export const BasicExample: React.FunctionComponent = () => {
   const classes = useStyles();
-
   const cards = [
     <Card isFullHeight isPlain key="card-1">
       <CardHeader>
@@ -30,10 +30,10 @@ export const BasicExample: React.FunctionComponent = () => {
           <Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
             <CogIcon className={classes.actionIcon} />
           </Icon>
-            Configure application
+          Configure application
         </Content>
         <Content className="pf-v6-u-font-size-sm">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         </Content>
       </CardBody>
       <CardFooter>
@@ -51,21 +51,22 @@ export const BasicExample: React.FunctionComponent = () => {
       </CardFooter>
     </Card>,
     <Card isFullHeight isPlain key="card-2">
+      <CardHeader style={{ visibility: 'hidden' }}>-</CardHeader>
       <CardBody>
         <Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
           <Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
             <LockIcon className={classes.actionIcon} />
           </Icon>
-            Configure access
+          Configure access
         </Content>
-        <Content>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        <Content className="pf-v6-u-font-size-sm">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         </Content>
       </CardBody>
       <CardFooter>
         <Content>
           <Button variant="link" isInline>
-              Learn more  
+            Learn more  
             <Icon className="pf-v6-u-ml-sm" isInline>
               <ArrowRightIcon />
             </Icon>
@@ -82,16 +83,16 @@ export const BasicExample: React.FunctionComponent = () => {
           <Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
             <BellIcon className={classes.actionIcon} />
           </Icon>
-            Configure notifications
+          Configure notifications
         </Content>
-        <Content>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        <Content className="pf-v6-u-font-size-sm">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         </Content>
       </CardBody>
       <CardFooter>
         <Content>
           <Button variant="link" isInline>
-              Learn more  
+            Learn more  
             <Icon className="pf-v6-u-ml-sm" isInline>
               <ArrowRightIcon />
             </Icon>
@@ -101,5 +102,5 @@ export const BasicExample: React.FunctionComponent = () => {
     </Card>
   ];
 
-  return(<MultiContentCard cards={cards} />)
-};
+  return(<MultiContentCard cards={cards} />);
+}

packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableActionsExample.tsx

@@ -1,14 +1,12 @@
 import React from 'react';
 import MultiContentCard from "@patternfly/react-component-groups/dist/dynamic/MultiContentCard";
+import { EllipsisVIcon } from '@patternfly/react-icons';
 import { Button, Card, CardHeader, CardBody, CardFooter, Content, ContentVariants, List, ListItem, Icon, Divider, Dropdown, DropdownItem, DropdownList, MenuToggle, MenuToggleElement, Label } from '@patternfly/react-core';
-import { ArrowRightIcon, BellIcon, CogIcon, LockIcon, EllipsisVIcon } from '@patternfly/react-icons';
+import { ArrowRightIcon, BellIcon, CogIcon, LockIcon } from '@patternfly/react-icons';
 import { createUseStyles } from 'react-jss';
 import clsx from 'clsx';
 
 const useStyles = createUseStyles({
-  cardHeaderTitle: {
-    fontSize: 'var(--pf-t--global--font--size--heading--h4)',
-  },
   bulletPoints: {
     color: 'var(--pf-t--global--color--brand--default)',
   },
@@ -20,11 +18,11 @@ export const BasicExample: React.FunctionComponent = () => {
 
   const cards = [
     <Card isFullHeight isPlain key="card-1">
-      <CardHeader className="pf-v6-u-pt-0">
-        <Content component={ContentVariants.h3} className={classes.cardHeaderTitle}>Getting Started</Content>
+      <CardHeader  className="pf-v6-u-pt-0">
+        <Content component={ContentVariants.h4}>Getting Started</Content>
       </CardHeader>
       <CardBody>
-        <Label className='pf-v6-u-mb-sm' icon={<CogIcon />} color="blue">
+        <Label className="pf-v6-u-mb-sm" icon={<CogIcon />} color="blue">
           Configure application
         </Label>
         <Content className="pf-v6-u-font-size-sm">
@@ -46,9 +44,9 @@ export const BasicExample: React.FunctionComponent = () => {
       </CardFooter>
     </Card>,
     <Card isFullHeight isPlain key="card-2">
-      <CardHeader/>
+      <CardHeader className="pf-v6-u-pt-0" style={{ visibility: 'hidden' }}>-</CardHeader>
       <CardBody>
-        <Label className='pf-v6-u-mb-sm' icon={<LockIcon />} color="green">
+        <Label className="pf-v6-u-mb-sm" icon={<LockIcon />} color="green">
           Configure access
         </Label>
         <Content className="pf-v6-u-font-size-sm">
@@ -68,10 +66,10 @@ export const BasicExample: React.FunctionComponent = () => {
     </Card>,
     <Card isFullHeight isPlain key="card-3">
       <CardHeader className="pf-v6-u-pt-0">
-        <Content component={ContentVariants.h3} className={classes.cardHeaderTitle}>Next Steps</Content>
+        <Content component={ContentVariants.h4}>Next Steps</Content>
       </CardHeader>
       <CardBody>
-        <Label className='pf-v6-u-mb-sm' icon={<BellIcon />} color="orange">
+        <Label className="pf-v6-u-mb-sm" icon={<BellIcon />} color="orange">
           Configure notifications
         </Label>
         <Content className="pf-v6-u-font-size-sm">

packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableDividerExample.tsx

@@ -8,7 +8,7 @@ import clsx from 'clsx';
 const useStyles = createUseStyles({
   action: {
     color: 'var(--pf-t--global--text--color--brand--default)',
-    fontSize: 'var(-pf-t--global--font--size--sm)',
+    fontSize: 'var(--pf-t--global--font--size--sm)',
   },
   actionIcon: {
     color: 'var(--pf-t--global--icon--color--regular)',
@@ -52,7 +52,7 @@ export const BasicExample: React.FunctionComponent = () => {
       </CardFooter>
     </Card>,
     <Card isFullHeight isPlain key="card-2">
-      <CardHeader/>
+      <CardHeader className='pf-v6-u-pt-0' style={{ visibility: 'hidden' }}>-</CardHeader>
       <CardBody>
         <Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
           <Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">

packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableExample.tsx

@@ -51,7 +51,7 @@ export const BasicExample: React.FunctionComponent = () => {
       </CardFooter>
     </Card>,
     <Card isFullHeight isPlain key="card-2">
-      <CardHeader/>
+      <CardHeader className='pf-v6-u-pt-0' style={{ visibility: 'hidden' }}>-</CardHeader>
       <CardBody>
         <Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
           <Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">

packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableSingleDividerExample.tsx

@@ -8,7 +8,7 @@ import clsx from 'clsx';
 const useStyles = createUseStyles({
   action: {
     color: 'var(--pf-t--global--text--color--brand--default)',
-    fontSize: 'var(-pf-t--global--font--size--sm)',
+    fontSize: 'var(--pf-t--global--font--size--sm)',
   },
   actionIcon: {
     color: 'var(--pf-t--global--icon--color--regular)',
@@ -52,7 +52,7 @@ export const BasicExample: React.FunctionComponent = () => {
       </CardFooter>
     </Card>,
     <Card isFullHeight isPlain key="card-2">
-      <CardHeader/>
+      <CardHeader className='pf-v6-u-pt-0' style={{ visibility: 'hidden' }}>-</CardHeader>
       <CardBody>
         <Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
           <Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">

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

@@ -15,17 +15,25 @@ The **service card** component displays a card representing a service with an ic
 
 ## Examples
 
-### Service Card
+### Basic service card
 
-This shows a basic service card with an `icon`, `title`, `description`, and optional footer passed in.
+This shows a basic service card with an `icon`, `title`, `description`, and optional footer passed in. You can also pass all props of the [card component](/components/card).
 
 ```js file="./ServiceCardExample.tsx"
 
 ```
 
-### Service Card in gallery example
+### Stacked service card
 
-This shows how cards can look side by side in a [gallery layout](/layouts/gallery).
+If you set `isStacked` property to `true`, the header layout changes to stacked.
+
+```js file="./ServiceCardStackedExample.tsx"
+
+```
+
+### Service card in a gallery
+
+This shows how cards can look side by side in a [gallery layout](/layouts/gallery). If you set `isFullHeight` property to `true`, the card height will fill the available space.
 
 ```js file="./ServiceCardGalleryExample.tsx"
 

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

@@ -8,7 +8,8 @@ import contentHeaderIcon from '../../assets/icons/content-header-icon.svg';
 export const ServiceCardGalleryExample: React.FunctionComponent = () => (
   <Gallery hasGutter minWidths={{ default: '330px' }}>
     <GalleryItem>
-      <ServiceCard 
+      <ServiceCard
+        isStacked
         title='Example1'
         subtitle='A basic example'
         description='This is a basic ServiceCard example'
@@ -17,7 +18,8 @@ export const ServiceCardGalleryExample: React.FunctionComponent = () => (
       />
     </GalleryItem>
     <GalleryItem>
-      <ServiceCard 
+      <ServiceCard
+        isStacked
         title='Example2'
         subtitle='A second example'
         description='This is another basic ServiceCard example'

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import ServiceCard from "@patternfly/react-component-groups/dist/dynamic/ServiceCard";
+import contentHeaderIcon from '../../assets/icons/content-header-icon.svg';
+import { Button, ButtonVariant } from '@patternfly/react-core';
+
+
+export const BasicExample: React.FunctionComponent = () => (
+  <ServiceCard
+    isStacked
+    title='Example'
+    subtitle='A basic example'
+    description='This is a basic ServiceCard Example'
+    icon={<img src={contentHeaderIcon} alt="content-header-icon" />}
+    helperText='Here is helper text'
+    footer={<>
+      <Button
+        variant={ButtonVariant.secondary}
+        className='pf-v6-u-mr-md'
+        component="a"
+        href='www.patternfly.org'>
+          Launch
+      </Button>
+      <Button
+        variant={ButtonVariant.link}
+        component="a"
+        href='www.patternfly.org'
+      >
+          Learn More
+      </Button></>
+    }
+  />
+);

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

@@ -2,8 +2,8 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import ServiceCard from './ServiceCard';
 
-describe('LogSnippet component', () => {
-  it('should render LogSnippet component', () => {
+describe('ServiceCard component', () => {
+  it('should render ServiceCard component', () => {
     expect(render(<ServiceCard 
       title='Example'
       subtitle='A basic example'