Updated with comments.

packages/module/package.json

@@ -5,9 +5,8 @@
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "scripts": {
-    "build": "npm run build:index && npm run build:js && npm run build:esm && npm run build:fed:packages && npm run build:css && npm run transform:scss",
-    "build:css": "node ../../scripts/build-styles.js", 
-    "build:watch": "npm run build:js && npm run build:esm -- --watch && npm run build:fed:packages -- --watch && npm run build:css && npm run transform:scss",
+    "build": "npm run build:index && npm run build:js && npm run build:esm && npm run build:fed:packages",
+    "build:watch": "npm run build:js && npm run build:esm -- --watch && npm run build:fed:packages -- --watch",
     "build:esm": "tsc --build --verbose ./tsconfig.json",
     "build:fed:packages": "node generate-fed-package-json.js",
     "build:js": "tsc -p tsconfig.cjs.json",
@@ -18,8 +17,7 @@
     "docs:serve": "pf-docs-framework serve public --port 5001",
     "docs:screenshots": "pf-docs-framework screenshots --urlPrefix http://localhost:5001",
     "serve:a11y": "serve coverage",
-    "test:a11y": "patternfly-a11y --config patternfly-a11y.config",
-    "transform:scss": "node ../../scripts/transform-scss.js"
+    "test:a11y": "patternfly-a11y --config patternfly-a11y.config"
   },
   "repository": "git+https://github.com/patternfly/react-component-groups.git",
   "author": "Red Hat",
@@ -48,7 +46,6 @@
     "@patternfly/patternfly": "^5.0.0",
     "@patternfly/react-table": "^5.0.0",
     "@patternfly/react-code-editor": "^5.0.0",
-    "@redhat-cloud-services/frontend-components-utilities": "^4.0.2",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/react-router-dom": "^5.3.3",

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

@@ -0,0 +1,17 @@
+---
+section: extensions
+subsection: Component groups
+id: ExpandableText
+source: react
+propComponents: ['ExpandableText']
+---
+
+import ExpandableText from "@patternfly/react-component-groups/dist/dynamic/ExpandableText";
+
+## Component usage
+
+### Truncate component
+
+```js file="./ExpandableTextExample.tsx"
+
+```

packages/module/patternfly-docs/content/extensions/component-groups/examples/ExpandableText/ExpandableTextExample.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import ExpandableText from "@patternfly/react-component-groups/dist/dynamic/ExpandableText";
+
+
+export const BasicExample: React.FunctionComponent = () => <ExpandableText text="This is a long string that will be truncated" length={10} />;
+

packages/module/src/ExpandableText/ExpandableText.test.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ExpandableText from './ExpandableText';
+
+const text = `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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+laborum.`;
+
+describe('ExpandableText component', () => {
+  describe('should render correctly', () => {
+    [true, false].forEach((isInline) => {
+      describe(isInline ? 'inline' : 'block', () => {
+        it('without length specified', () => {
+          const wrapper = render(<ExpandableText text={text} inline={isInline} />);
+          expect(wrapper).toMatchSnapshot();
+        });
+
+        it('with short length', () => {
+          const wrapper = render(<ExpandableText text={text} length={2} />);
+          expect(wrapper).toMatchSnapshot();
+        });
+
+        it('clicking on expand toggles to collapse', () => {
+          const wrapper = render(<ExpandableText text={text} inline={isInline} expandText="Custom expand" collapseText="Custom collapse" />);
+          // wrapper.find('.ins-c-expand-button').first().simulate('click');
+          expect(wrapper).toMatchSnapshot();
+        });
+
+        it('custom expande button', () => {
+          const wrapper = render(<ExpandableText text={text} inline={isInline} expandText="Custom expand" collapseText="Custom collapse" />);
+          expect(wrapper).toMatchSnapshot();
+        });
+
+        it('custom button titles', () => {
+          const wrapper = render(<ExpandableText text={text} inline={isInline} expandText="Custom expand" collapseText="Custom collapse" />);
+          // wrapper.find('.ins-c-expand-button').first().simulate('click');
+          expect(wrapper).toMatchSnapshot();
+        });
+
+        it('clicking on expand toggles to collapse', () => {
+          const wrapper = render(<ExpandableText text={text} inline={isInline} expandText="Custom expand" collapseText="Custom collapse" />);
+          // wrapper.find('.ins-c-expand-button').first().simulate('click');
+          expect(wrapper).toMatchSnapshot();
+        });
+
+        it('custom expande button', () => {
+          const wrapper = render(<ExpandableText text={text} inline={isInline} expandText="Custom expand" collapseText="Custom collapse" />);
+          expect(wrapper).toMatchSnapshot();
+        });
+
+        it('custom button titles', () => {
+          const wrapper = render(<ExpandableText text={text} inline={isInline} expandText="Custom expand" collapseText="Custom collapse" />);
+          // wrapper.find('.ins-c-expand-button').first().simulate('click');
+          expect(wrapper).toMatchSnapshot();
+        });
+
+        it('when text length is less than user specified length', () => {
+          const wrapper = render(<ExpandableText text={text} inline={isInline} length={1000} />);
+          expect(wrapper).toMatchSnapshot();
+        });
+
+        it('hovering over toggles to collapse', () => {
+          const wrapper = render(<ExpandableText length={50} inline={isInline} text={text} expandOnMouseOver hideExpandText />);
+          // const eventElement = isInline ? wrapper.find('.ins-c-ExpandableText').first() : wrapper.find('.ins-c-ExpandableText').first().children().first();
+
+          expect(wrapper).toMatchSnapshot();
+
+          // eventElement.simulate('mouseenter');
+          expect(wrapper).toMatchSnapshot();
+
+          // eventElement.simulate('mouseleave');
+          expect(wrapper).toMatchSnapshot();
+        });
+      });
+    });
+  });
+});

packages/module/src/Truncate/Truncate.tsx → packages/module/src/ExpandableText/ExpandableText.tsx

@@ -1,18 +1,26 @@
+/* eslint-disable react/no-unknown-property */
 import React, { useState } from 'react';
 import classNames from 'classnames';
 import { Button, Stack, StackItem } from '@patternfly/react-core';
 import sanitizeHtml from 'sanitize-html';
+import { createUseStyles } from 'react-jss'
 
-import './truncate.scss';
+const useStyles = createUseStyles({
+  expandableText: {
+    "& button": {
+      padding: "0"
+    },
+    "& is-inline": { marginRight: [ "10px", "0.625rem" ] }
+  } });
 
 const dangerousHtml = (html: string) => ({ __html: sanitizeHtml(html) });
 
-export interface TruncateProps {
-  /** Additional classes added to the Truncate */
+export interface ExpandableTextProps {
+  /** Additional classes added to the ExpandableText */
   className?: string;
-  /** Text to display inside the Truncate component */
+  /** Text to display pfcgide the ExpandableText component */
   text?: string;
-  /** A set length for the truncate component. */
+  /** A set length for the ExpandableText component. */
   length?: number;
   /** Indicates if the component is expanded to show the entire text */
   expandText?: React.ReactNode;
@@ -25,7 +33,7 @@ export interface TruncateProps {
   expandOnMouseOver?: boolean;
 }
 
-const Truncate: React.FunctionComponent<TruncateProps> = ({
+const ExpandableText: React.FunctionComponent<ExpandableTextProps> = ({
   text = '',
   length = 150,
   expandText = 'Read more',
@@ -35,8 +43,9 @@ const Truncate: React.FunctionComponent<TruncateProps> = ({
   className,
   inline,
   spaceBetween,
-}: TruncateProps) => {
-  const truncateClasses = classNames('ins-c-truncate', className, { [`is-inline`]: inline }, { [`is-block`]: !inline });
+}: ExpandableTextProps) => {
+  const classes = useStyles();
+  const expandableTextClasses = classNames(classes.expandableText, className, { [`is-inline`]: inline }, { [`is-block`]: !inline });
   const trimmedText = text.substring(0, length);
   const textOverflow = text.length > length;
   const [showText, setShowText] = useState(false);
@@ -46,12 +55,12 @@ const Truncate: React.FunctionComponent<TruncateProps> = ({
   };
 
   const expandButton = (
-    <Button className="ins-c-expand-button" variant="link" onClick={toggleText}>
+    <Button className="pfcg-c-expand-button" variant="link" onClick={toggleText}>
       {expandText}
     </Button>
   );
   const collapseButton = (
-    <Button className="ins-c-collapse-button" variant="link" onClick={toggleText}>
+    <Button className="pfcg-c-collapse-button" variant="link" onClick={toggleText}>
       {collapseText}
     </Button>
   );
@@ -64,13 +73,13 @@ const Truncate: React.FunctionComponent<TruncateProps> = ({
 
   return inline ? (
     <React.Fragment>
-      <span className={truncateClasses} widget-type="InsightsTruncateInline" dangerouslySetInnerHTML={html} {...mouseOverHandler} />
+      <span className={expandableTextClasses} widget-type="PFComponentGroupExpandableTextInline" dangerouslySetInnerHTML={html} {...mouseOverHandler} />
       {!hideExpandText && textOverflow && (showText === false ? expandButton : collapseButton)}
     </React.Fragment>
   ) : (
-    <Stack className={truncateClasses}>
+    <Stack className={expandableTextClasses}>
       <StackItem {...mouseOverHandler}>
-        <span widget-type="InsightsTruncateBlock" dangerouslySetInnerHTML={html} />
+        <span widget-type="PFComponentGroupExpandableTextBlock" dangerouslySetInnerHTML={html} />
       </StackItem>
       {!hideExpandText && textOverflow && (
         <StackItem
@@ -85,4 +94,4 @@ const Truncate: React.FunctionComponent<TruncateProps> = ({
   );
 };
 
-export default Truncate;
+export default ExpandableText;

packages/module/src/ExpandableText/index.ts

@@ -0,0 +1,3 @@
+export { default } from './ExpandableText';
+export { default as ExpandableText } from './ExpandableText';
+export * from './ExpandableText';