feat(Truncate): Added the truncate component.

Updated build:watch to build css and perform transform.

Updated with comments.

Fixed broken tests.

fixed broken tests.

fixed broken tests.

Fixed export.

Updated with review comments.

Updated examples.

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,53 @@
+---
+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 display long text to users via a tooltip. It builds off of the [tooltip component](https://www.patternfly.org/components/tooltip) to truncate UI text in an element and display the truncated text in a tooltip.
+
+### Basic ExpandableText component
+
+This is an example of a basic ExpandableText component. It will truncate the text and display the full text in a tooltip. The button will be display under the text and will toggle the text.
+
+```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 in a tooltip. The button will be display inline with the text and will toggle the text.
+
+```js file="./ExpandableTextInlineExample.tsx"
+
+```
+
+### ExpandableText component with custom button text
+
+This is an example of a ExpandableText component with custom button text. It will truncate the text and display the full text in a tooltip.
+
+```js file="./ExpandableTextCustomButtonExample.tsx"
+
+```
+
+### ExpandableText component with custom button
+
+This is an example of a ExpandableText component with a custom button. It will truncate the text and display the full text in a tooltip.
+
+```js file="./ExpandableTextCustomButtonExample.tsx"
+
+```
+
+### ExpandableText component with no button
+
+This is an example of a ExpandableText component with no button. It will truncate the text and display the full text in a tooltip. The text will be displayed on hover.
+
+```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 />;