ExpandableText: Adds the expandable text component previously known as truncate component.

package.json

@@ -23,9 +23,9 @@
     "lint:md:fix": "eslint packages --ext md --no-eslintrc --config .eslintrc-md.json --cache --fix",
     "lint": "npm run lint:js && npm run lint:md",
     "lint:fix": "npm run lint:js:fix && npm run lint:md:fix",
+    "serve:a11y": "npm run serve:a11y -w @patternfly/react-component-groups",
     "test": "TZ=EST jest packages",
-    "test:a11y": "npm run test:a11y -w @patternfly/react-component-groups",
-    "serve:a11y": "npm run serve:a11y -w @patternfly/react-component-groups"
+    "test:a11y": "npm run test:a11y -w @patternfly/react-component-groups"
   },
   "devDependencies": {
     "@babel/core": "^7.19.6",

packages/module/package.json

@@ -16,8 +16,8 @@
     "docs:build": "pf-docs-framework build all --output public",
     "docs:serve": "pf-docs-framework serve public --port 5001",
     "docs:screenshots": "pf-docs-framework screenshots --urlPrefix http://localhost:5001",
-    "test:a11y": "patternfly-a11y --config patternfly-a11y.config",
-    "serve:a11y": "serve coverage"
+    "serve:a11y": "serve coverage",
+    "test:a11y": "patternfly-a11y --config patternfly-a11y.config"
   },
   "repository": "git+https://github.com/patternfly/react-component-groups.git",
   "author": "Red Hat",
@@ -33,7 +33,8 @@
   "dependencies": {
     "@patternfly/react-core": "^5.0.0",
     "@patternfly/react-icons": "^5.0.0",
-    "react-jss": "^10.9.2"
+    "react-jss": "^10.9.2",
+    "sanitize-html": "^2.3.3"
   },
   "peerDependencies": {
     "react": "^17 || ^18",

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

@@ -0,0 +1,58 @@
+---
+section: extensions
+subsection: Component groups
+id: Expandable text
+source: react
+propComponents: ['ExpandableText', 'ExpandableTextCustomButtonProps']
+---
+
+import ExpandableText from "@patternfly/react-component-groups/dist/dynamic/ExpandableText";
+
+## Component usage
+
+The **expandable text** component enables you to truncate text and allow users to display the full text by selecting a button. 
+
+### Basic ExpandableText component
+
+A basic expandable text component truncates text and displays a button below the truncated text. Users can view the full text by selecting the button, which toggles expansion.
+
+```js file="./ExpandableTextExample.tsx"
+
+```
+
+### ExpandableText component with inline text
+
+This is an example of a ExpandableText component with inline text. It will truncate the text and display the full text when the button is clicked. The button will be display inline with the text and will toggle the text.
+
+```js file="./ExpandableTextInlineExample.tsx"
+
+```
+
+### With custom button text
+
+You can customize the button text to fit your needs with the `customButton` property. 
+
+The following example customizes the text to change when expanded and collapsed.
+
+
+```js file="./ExpandableTextCustomLinkButtonExample.tsx"
+
+```
+
+### With a custom button
+
+You can use a custom button to adjust the appearance, style, and variation of the expansion toggle.
+
+```js file="./ExpandableTextCustomButtonExample.tsx"
+
+```
+
+### Without a button
+
+You can remove the button to instead allow users to toggle full text by hovering over the truncated text.
+
+To enable expansion on hover, use the `expandOnMouseOver` and `hideExpandText` properties.
+
+```js file="ExpandableTextNoButtonExample.tsx"
+
+```

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import ExpandableText from "@patternfly/react-component-groups/dist/dynamic/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.`;
+
+export const ExpandableTextCustomButtonExample: React.FunctionComponent = () => {
+  const expandButton =   <Button> Custom expand </Button>
+  const collapseButton =   <Button> Custom collapse </Button>
+  return <ExpandableText text={text} customButton={{ expand: expandButton, collapse: collapseButton }} />
+}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import ExpandableText from "@patternfly/react-component-groups/dist/dynamic/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.`;
+
+export const ExpandableTextLinkButtonExample: React.FunctionComponent = () => <ExpandableText text={text} inline={true} customButton={{ expand: "Custom expand", collapse: "Custom collapse" }} />;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import ExpandableText from "@patternfly/react-component-groups/dist/dynamic/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.`;
+
+export const BasicExample: React.FunctionComponent = () => <ExpandableText text={text} length={10} />;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import ExpandableText from "@patternfly/react-component-groups/dist/dynamic/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.`;
+
+export const InlineExample: React.FunctionComponent = () => <ExpandableText text={text} length={10} inline={true} />;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import ExpandableText from "@patternfly/react-component-groups/dist/dynamic/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.`;
+
+export const ExpandableTextNoButtonExample: React.FunctionComponent = () => <ExpandableText data-testid="expandable-text-hover" length={50} inline={true} text={text} expandOnMouseOver hideExpandText />;