Test PR

package.json

@@ -38,6 +38,7 @@
     "@babel/preset-flow": "^7.25.9",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.26.0",
+    "@emotion/babel-plugin": "^11.13.5",
     "@octokit/rest": "^21.1.0",
     "@swc/core": "1.7.42",
     "@testing-library/dom": "^10.3.2",
@@ -83,6 +84,7 @@
     "whatwg-fetch": "^3.6.20"
   },
   "dependencies": {
+    "@emotion/cache": "^11.14.0",
     "@patternfly/react-tokens": "^6.0.0",
     "sharp": "^0.33.5"
   }

packages/module/package.json

@@ -34,6 +34,7 @@
     "@patternfly/react-core": "^6.0.0",
     "@patternfly/react-icons": "^6.0.0",
     "@patternfly/react-table": "^6.0.0",
+    "@emotion/react": "^11.14.0",
     "react-jss": "^10.10.0",
     "clsx": "^2.1.1"
   },

packages/module/src/MultiContentCard/MultiContentCard.tsx

@@ -1,15 +1,15 @@
+import { css } from '@emotion/react';
 import React from 'react';
 import {
   Card,
   CardExpandableContent,
-  CardHeader,
+  CardHeader, 
   CardProps,
   CardTitle,
   Divider,
   Flex,
   FlexItem,
 } from '@patternfly/react-core';
-import { createUseStyles } from 'react-jss';
 
 export const MultiContentCardDividerVariant = {
   left: 'left',
@@ -51,11 +51,11 @@ export const isCardWithProps = (
   card: React.ReactElement | MutliContentCardProps
 ): card is MutliContentCardProps => !!card && !React.isValidElement(card);
 
-const useStyles = createUseStyles({
-  cardTitle: {
-    fontSize: 'var(--pf-t--global--font--size--heading--h3)',
-  }
-});
+const styles = {
+  cardTitle: css`
+    font-size: var(--pf-t--global--font--size--heading--h3);
+  `
+};
 
 const MultiContentCard: React.FunctionComponent<MultiContentCardProps> = ({
   cards = [],
@@ -70,7 +70,7 @@ const MultiContentCard: React.FunctionComponent<MultiContentCardProps> = ({
   ...props
 }: MultiContentCardProps) => {
   const [ isExpanded, setIsExpanded ] = React.useState(defaultExpanded);
-  const classes = useStyles();
+
   const onExpand = () => {
     setIsExpanded(!isExpanded);
   };
@@ -88,7 +88,7 @@ const MultiContentCard: React.FunctionComponent<MultiContentCardProps> = ({
           <FlexItem key={`card-${index}`} flex={{ default: 'flex_1' }} data-ouia-component-id={`${ouiaId}-content-${index}`}>
             {isCardWithProps(card) ? card.content : card}
           </FlexItem>
-          {(index + 1 < cards.length && (withDividers || isCardWithProps(card) && card.dividerVariant === MultiContentCardDividerVariant.right)) && (
+          {(index + 1 < cards.length && (withDividers || (isCardWithProps(card) && card.dividerVariant === MultiContentCardDividerVariant.right))) && (
             <Divider 
               orientation={{ md: 'vertical' }} 
               inset={{ default: 'inset3xl' }}
@@ -112,12 +112,12 @@ const MultiContentCard: React.FunctionComponent<MultiContentCardProps> = ({
           }}
           actions={{ actions }}
         >
-          {toggleText ? <CardTitle component="h3" className={classes.cardTitle} data-ouia-component-id={`${ouiaId}-title`}>{toggleText}</CardTitle> : toggleContent}
+          {toggleText ? <CardTitle component="h3" css={styles.cardTitle} data-ouia-component-id={`${ouiaId}-title`}>{toggleText}</CardTitle> : toggleContent}
         </CardHeader>
       )}
       {isExpandable ? <CardExpandableContent data-ouia-component-id={`${ouiaId}-expandable-content`}>{renderCards(cards, withDividers)}</CardExpandableContent> : renderCards(cards, withDividers)}
     </Card>
-  );}
-
+  );
+};
 
 export default MultiContentCard;

packages/module/src/MultiContentCard/__snapshots__/MultiContentCard.test.tsx.snap

@@ -445,7 +445,7 @@ exports[`MultiContentCard component should render expandable multi-content card
         class="pf-v6-c-card__title"
       >
         <h3
-          class="pf-v6-c-card__title-text cardTitle-0-2-1"
+          class="pf-v6-c-card__title-text css-18li09f"
           data-ouia-component-id="MultiContentCard-title"
         >
           Expandable card toggle text
@@ -514,7 +514,7 @@ exports[`MultiContentCard component should render expandable multi-content card
         class="pf-v6-c-card__title"
       >
         <h3
-          class="pf-v6-c-card__title-text cardTitle-0-2-1"
+          class="pf-v6-c-card__title-text css-18li09f"
           data-ouia-component-id="MultiContentCard-title"
         >
           Expandable card toggle text
@@ -992,7 +992,7 @@ exports[`MultiContentCard component should render expandable multi-content card
         class="pf-v6-c-card__title"
       >
         <h3
-          class="pf-v6-c-card__title-text cardTitle-0-2-1"
+          class="pf-v6-c-card__title-text css-18li09f"
           data-ouia-component-id="MultiContentCard-title"
         >
           Expandable card toggle text

packages/module/src/ServiceCard/ServiceCard.tsx

@@ -1,8 +1,7 @@
+import { css } from '@emotion/react';
 import React from 'react';
 import { Card, CardBody, CardFooter, CardHeader, CardProps, Content, ContentVariants, Flex, FlexItem } 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';
+import { HelperText, HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText';
 import clsx from 'clsx';
 
 /** extends CardProps */
@@ -27,15 +26,15 @@ export interface ServiceCardProps extends CardProps {
   isFullHeight?: boolean;
 }
 
-const useStyles = createUseStyles({
-  fullHeightCard: {
-    height: '100%'
-  },
-  image: {
-    marginRight: 'var(--pf-t--global--spacer--md)',
-    width: 48
-  }
-});
+const styles = {
+  fullHeightCard: css`
+    height: 100%;
+  `,
+  image: css`
+    margin-right: var(--pf-t--global--spacer--md);
+    width: 48px;
+  `
+};
 
 const ServiceCard: React.FunctionComponent<ServiceCardProps> = ({
   title,
@@ -48,38 +47,34 @@ const ServiceCard: React.FunctionComponent<ServiceCardProps> = ({
   isStacked = false,
   isFullHeight = false,
   ...props
-}: ServiceCardProps) => {
-  const classes = useStyles();
-
-  return (
-    <Card className={clsx({ [classes.fullHeightCard]: isFullHeight })} ouiaId={`${ouiaId}-card`} {...props}>
-      <CardHeader>
-        <Flex direction={{ default: isStacked ? 'column' : 'row' }} alignItems={{ default: isStacked ? 'alignItemsFlexStart' : 'alignItemsCenter' }}>
-          <FlexItem className={classes.image}>
-            {icon}
-          </FlexItem>
-          <FlexItem>
-            <Content>
-              <Content component={ContentVariants.h2} ouiaId={`${ouiaId}-title`}>{title}</Content>
-              {subtitle ?? null}
-            </Content>
-          </FlexItem>
-        </Flex>
-      </CardHeader>
-      <CardBody data-ouia-component-id={`${ouiaId}-description`}>{description}</CardBody>
-      { footer || helperText ? (
-        <CardFooter data-ouia-component-id={`${ouiaId}-footer`}>
-          { helperText ?
-            ( <HelperText data-ouia-component-id={`${ouiaId}-helper-text`}>
-              <HelperTextItem className="pf-v6-u-mb-lg">
-                {helperText}
-              </HelperTextItem>
-            </HelperText>) : null
-          }
-          { footer }
-        </CardFooter>) : null}
-    </Card>
-  )
-}
+}: ServiceCardProps) => (
+  <Card className={clsx({ [styles.fullHeightCard.toString()]: isFullHeight })} ouiaId={`${ouiaId}-card`} {...props}>
+    <CardHeader>
+      <Flex direction={{ default: isStacked ? 'column' : 'row' }} alignItems={{ default: isStacked ? 'alignItemsFlexStart' : 'alignItemsCenter' }}>
+        <FlexItem css={styles.image}>
+          {icon}
+        </FlexItem>
+        <FlexItem>
+          <Content>
+            <Content component={ContentVariants.h2} ouiaId={`${ouiaId}-title`}>{title}</Content>
+            {subtitle ?? null}
+          </Content>
+        </FlexItem>
+      </Flex>
+    </CardHeader>
+    <CardBody data-ouia-component-id={`${ouiaId}-description`}>{description}</CardBody>
+    { footer || helperText ? (
+      <CardFooter data-ouia-component-id={`${ouiaId}-footer`}>
+        { helperText ?
+          ( <HelperText data-ouia-component-id={`${ouiaId}-helper-text`}>
+            <HelperTextItem className="pf-v6-u-mb-lg">
+              {helperText}
+            </HelperTextItem>
+          </HelperText>) : null
+        }
+        { footer }
+      </CardFooter>) : null}
+  </Card>
+);
 
 export default ServiceCard;

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

@@ -22,7 +22,7 @@ exports[`ServiceCard component should render ServiceCard component 1`] = `
               class="pf-v6-l-flex pf-m-row pf-m-align-items-center"
             >
               <div
-                class="image-0-2-2"
+                class="css-1g8hpot"
               >
                 /
               </div>
@@ -78,7 +78,7 @@ exports[`ServiceCard component should render ServiceCard component 1`] = `
             class="pf-v6-l-flex pf-m-row pf-m-align-items-center"
           >
             <div
-              class="image-0-2-2"
+              class="css-1g8hpot"
             >
               /
             </div>

packages/module/tsconfig.json

@@ -9,7 +9,8 @@
     // "lib": [],                                   /* Specify library files to be included in the compilation. */
     // "allowJs": true,                             /* Allow javascript files to be compiled. */
     // "checkJs": true,                             /* Report errors in .js files. */
-    "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */,
+    "jsx": "react-jsx" /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */,
+    "jsxImportSource": "@emotion/react",
     "declaration": true /* Generates corresponding '.d.ts' file. */,
     // "declarationMap": true,                      /* Generates a sourcemap for each corresponding '.d.ts' file. */
     // "sourceMap": true,                           /* Generates corresponding '.map' file. */