Rebase to latest main (patternfly#274)

* chore(deps-dev): bump caniuse-lite from 1.0.30001643 to 1.0.30001649 (patternfly#255) Bumps [caniuse-lite](https://github.com/browserslist/caniuse-lite) from 1.0.30001643 to 1.0.30001649. - [Commits](browserslist/caniuse-lite@1.0.30001643...1.0.30001649) --- updated-dependencies: - dependency-name: caniuse-lite 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 @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 @types/connect-history-api-fallback (patternfly#252) Bumps [@types/connect-history-api-fallback](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/connect-history-api-fallback) from 1.5.0 to 1.5.4. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Changelog](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/connect-history-api-fallback/connect-history-api-fallback-tests.ts) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/connect-history-api-fallback) --- updated-dependencies: - dependency-name: "@types/connect-history-api-fallback" 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 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> * fix(ServiceCard): Add horizontal layout to the ServiceCard (patternfly#260) * Add horizontal layout to the ServiceCard * fix(ServiceCard): Update tests * fix(ServiceCard): Support isFullHeight * chore(deps-dev): bump acorn-walk from 8.2.0 to 8.3.3 (patternfly#269) * chore(deps-dev): bump rimraf from 5.0.7 to 5.0.10 (patternfly#271) * make subtitle prop optional (patternfly#261) * chore(deps-dev): bump chrome-trace-event from 1.0.3 to 1.0.4 (patternfly#270) * chore(deps-dev): bump memfs from 3.5.1 to 3.5.3 (patternfly#268) * chore(deps-dev): bump @types/eslint from 8.40.0 to 9.6.0 (patternfly#267) * chore(deps-dev): bump regenerate-unicode-properties (patternfly#266) * chore(deps-dev): bump eslint-plugin-promise from 6.4.0 to 6.6.0 (patternfly#265) * chore(deps-dev): bump nwsapi from 2.2.5 to 2.2.12 (patternfly#262) * chore(deps-dev): bump @babel/plugin-transform-typescript (patternfly#263) * chore(deps-dev): bump escodegen from 2.0.0 to 2.1.0 (patternfly#264) * 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(pf6): Rebase to the latest main (patternfly#259) * 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](yyx990803/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> * Update examples * fix(pf6): Fix MCC example --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: InsaneZein <zsleiman@redhat.com>
fhlavac · Oct 24, 2024 · 3de5724 · 3de5724
1 parent f902535
commit 3de5724
Show file tree

Hide file tree

Showing 9 changed files with 484 additions and 416 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/...content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExample.tsx b/...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} />);
+}
diff --git a/...s/component-groups/examples/MultiContentCard/MultiContentCardExpandableActionsExample.tsx b/...s/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">

diff --git a/...s/component-groups/examples/MultiContentCard/MultiContentCardExpandableDividerExample.tsx b/...s/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">

diff --git a/...tensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableExample.tsx b/...tensions/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">

diff --git a/...onent-groups/examples/MultiContentCard/MultiContentCardExpandableSingleDividerExample.tsx b/...onent-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">

diff --git a/...cs/content/extensions/component-groups/examples/ServiceCard/ServiceCardGalleryExample.tsx b/...cs/content/extensions/component-groups/examples/ServiceCard/ServiceCardGalleryExample.tsx
@@ -10,7 +10,6 @@ export const ServiceCardGalleryExample: React.FunctionComponent = () => (
     <GalleryItem>
       <ServiceCard
         isStacked
-        isFullHeight
         title='Example1'
         subtitle='A basic example'
         description='This is a basic ServiceCard example'
@@ -19,9 +18,8 @@ export const ServiceCardGalleryExample: React.FunctionComponent = () => (
       />
     </GalleryItem>
     <GalleryItem>
-      <ServiceCard 
+      <ServiceCard
         isStacked
-        isFullHeight
         title='Example2'
         subtitle='A second example'
         description='This is another basic ServiceCard example'

diff --git a/...cs/content/extensions/component-groups/examples/ServiceCard/ServiceCardStackedExample.tsx b/...cs/content/extensions/component-groups/examples/ServiceCard/ServiceCardStackedExample.tsx
@@ -14,20 +14,18 @@ export const BasicExample: React.FunctionComponent = () => (
     helperText='Here is helper text'
     footer={<>
       <Button
-        variant={ButtonVariant.primary}
-        isInline
-        className='pf-v5-u-mr-md'
+        variant={ButtonVariant.secondary}
+        className='pf-v6-u-mr-md'
         component="a"
-        href='www.google.com'>
+        href='www.patternfly.org'>
           Launch
       </Button>
       <Button
         variant={ButtonVariant.link}
         component="a"
-        isInline
-        href='www.google.com'
+        href='www.patternfly.org'
       >
-          Learn more
+          Learn More
       </Button></>
     }
   />

diff --git a/packages/module/src/ServiceCard/__snapshots__/ServiceCard.test.tsx.snap b/packages/module/src/ServiceCard/__snapshots__/ServiceCard.test.tsx.snap
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`LogSnippet component should render LogSnippet component 1`] = `
+exports[`ServiceCard component should render ServiceCard component 1`] = `
 {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
       <div
-        class="pf-v6-c-card card-0-2-1"
+        class="pf-v6-c-card"
         data-ouia-component-id="ServiceCard-card"
         data-ouia-component-type="PF6/Card"
         data-ouia-safe="true"
@@ -19,27 +19,35 @@ exports[`LogSnippet component should render LogSnippet component 1`] = `
             class="pf-v6-c-card__header-main"
           >
             <div
-              class="image-0-2-2"
+              class="pf-v6-l-flex pf-m-row pf-m-align-items-center"
             >
-              /
-            </div>
-            <div
-              class="pf-v6-c-content"
-              data-ouia-component-id="OUIA-Generated-Content-1"
-              data-ouia-component-type="PF6/Content"
-              data-ouia-safe="true"
-              data-pf-content="true"
-            >
-              <h2
-                class="pf-v6-c-content--h2"
-                data-ouia-component-id="ServiceCard-title"
-                data-ouia-component-type="PF6/Content"
-                data-ouia-safe="true"
-                data-pf-content="true"
+              <div
+                class="image-0-2-2"
+              >
+                /
+              </div>
+              <div
+                class=""
               >
-                Example
-              </h2>
-              A basic example
+                <div
+                  class="pf-v6-c-content"
+                  data-ouia-component-id="OUIA-Generated-Content-1"
+                  data-ouia-component-type="PF6/Content"
+                  data-ouia-safe="true"
+                  data-pf-content="true"
+                >
+                  <h2
+                    class="pf-v6-c-content--h2"
+                    data-ouia-component-id="ServiceCard-title"
+                    data-ouia-component-type="PF6/Content"
+                    data-ouia-safe="true"
+                    data-pf-content="true"
+                  >
+                    Example
+                  </h2>
+                  A basic example
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -49,16 +57,12 @@ exports[`LogSnippet component should render LogSnippet component 1`] = `
         >
           This is a basic ServiceCard Example
         </div>
-        <div
-          class="pf-v6-c-card__footer"
-          data-ouia-component-id="ServiceCard-footer"
-        />
       </div>
     </div>
   </body>,
   "container": <div>
     <div
-      class="pf-v6-c-card card-0-2-1"
+      class="pf-v6-c-card"
       data-ouia-component-id="ServiceCard-card"
       data-ouia-component-type="PF6/Card"
       data-ouia-safe="true"
@@ -71,27 +75,35 @@ exports[`LogSnippet component should render LogSnippet component 1`] = `
           class="pf-v6-c-card__header-main"
         >
           <div
-            class="image-0-2-2"
-          >
-            /
-          </div>
-          <div
-            class="pf-v6-c-content"
-            data-ouia-component-id="OUIA-Generated-Content-1"
-            data-ouia-component-type="PF6/Content"
-            data-ouia-safe="true"
-            data-pf-content="true"
+            class="pf-v6-l-flex pf-m-row pf-m-align-items-center"
           >
-            <h2
-              class="pf-v6-c-content--h2"
-              data-ouia-component-id="ServiceCard-title"
-              data-ouia-component-type="PF6/Content"
-              data-ouia-safe="true"
-              data-pf-content="true"
+            <div
+              class="image-0-2-2"
+            >
+              /
+            </div>
+            <div
+              class=""
             >
-              Example
-            </h2>
-            A basic example
+              <div
+                class="pf-v6-c-content"
+                data-ouia-component-id="OUIA-Generated-Content-1"
+                data-ouia-component-type="PF6/Content"
+                data-ouia-safe="true"
+                data-pf-content="true"
+              >
+                <h2
+                  class="pf-v6-c-content--h2"
+                  data-ouia-component-id="ServiceCard-title"
+                  data-ouia-component-type="PF6/Content"
+                  data-ouia-safe="true"
+                  data-pf-content="true"
+                >
+                  Example
+                </h2>
+                A basic example
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -101,10 +113,6 @@ exports[`LogSnippet component should render LogSnippet component 1`] = `
       >
         This is a basic ServiceCard Example
       </div>
-      <div
-        class="pf-v6-c-card__footer"
-        data-ouia-component-id="ServiceCard-footer"
-      />
     </div>
   </div>,
   "debug": [Function],