diff --git a/packages/module/package.json b/packages/module/package.json
index 0b560b22..ecc8a105 100644
--- a/packages/module/package.json
+++ b/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",
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ExpandableText/ExpandableText.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ExpandableText/ExpandableText.md
new file mode 100644
index 00000000..618aec21
--- /dev/null
+++ b/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"
+
+```
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ExpandableText/ExpandableTextExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ExpandableText/ExpandableTextExample.tsx
new file mode 100644
index 00000000..8e205065
--- /dev/null
+++ b/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 = () => ;
+
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Truncate/Truncate.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Truncate/Truncate.md
deleted file mode 100644
index a83da642..00000000
--- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Truncate/Truncate.md
+++ /dev/null
@@ -1,17 +0,0 @@
----
-section: extensions
-subsection: Component groups
-id: Truncate
-source: react
-propComponents: ['Truncate']
----
-
-import Truncate from "@patternfly/react-component-groups/dist/dynamic/Truncate";
-
-## Component usage
-
-### Truncate component
-
-```js file="./TruncateExample.tsx"
-
-```
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Truncate/TruncateExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Truncate/TruncateExample.tsx
deleted file mode 100644
index 3ebedc2e..00000000
--- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Truncate/TruncateExample.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react';
-import Truncate from "@patternfly/react-component-groups/dist/dynamic/Truncate";
-
-
-export const BasicExample: React.FunctionComponent = () => ;
-
diff --git a/packages/module/src/ExpandableText/ExpandableText.test.tsx b/packages/module/src/ExpandableText/ExpandableText.test.tsx
new file mode 100644
index 00000000..835a2992
--- /dev/null
+++ b/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();
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ it('with short length', () => {
+ const wrapper = render();
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ it('clicking on expand toggles to collapse', () => {
+ const wrapper = render();
+ // wrapper.find('.ins-c-expand-button').first().simulate('click');
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ it('custom expande button', () => {
+ const wrapper = render();
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ it('custom button titles', () => {
+ const wrapper = render();
+ // wrapper.find('.ins-c-expand-button').first().simulate('click');
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ it('clicking on expand toggles to collapse', () => {
+ const wrapper = render();
+ // wrapper.find('.ins-c-expand-button').first().simulate('click');
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ it('custom expande button', () => {
+ const wrapper = render();
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ it('custom button titles', () => {
+ const wrapper = render();
+ // 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();
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ it('hovering over toggles to collapse', () => {
+ const wrapper = render();
+ // 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();
+ });
+ });
+ });
+ });
+});
diff --git a/packages/module/src/Truncate/Truncate.tsx b/packages/module/src/ExpandableText/ExpandableText.tsx
similarity index 62%
rename from packages/module/src/Truncate/Truncate.tsx
rename to packages/module/src/ExpandableText/ExpandableText.tsx
index ce6c86cf..b91bb6b5 100644
--- a/packages/module/src/Truncate/Truncate.tsx
+++ b/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 = ({
+const ExpandableText: React.FunctionComponent = ({
text = '',
length = 150,
expandText = 'Read more',
@@ -35,8 +43,9 @@ const Truncate: React.FunctionComponent = ({
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 = ({
};
const expandButton = (
-