From b3bfc273d376bb15776757774288080ed004863b Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Wed, 13 Dec 2023 10:39:23 -0500 Subject: [PATCH 1/4] chore(expandablesection): Added a demo to show how to use expandable section to create an expandable text component. --- .../ExpandableSection/ExpandableSection.md | 14 +++++++++ .../examples/ExpandableTextDemo.tsx | 30 +++++++++++++++++++ 2 files changed, 44 insertions(+) create mode 100644 packages/react-core/src/demos/ExpandableSection/ExpandableSection.md create mode 100644 packages/react-core/src/demos/ExpandableSection/examples/ExpandableTextDemo.tsx diff --git a/packages/react-core/src/demos/ExpandableSection/ExpandableSection.md b/packages/react-core/src/demos/ExpandableSection/ExpandableSection.md new file mode 100644 index 00000000000..f8cce354a37 --- /dev/null +++ b/packages/react-core/src/demos/ExpandableSection/ExpandableSection.md @@ -0,0 +1,14 @@ +--- +id: Expandable section +section: components +--- + +## Demos + +- The following demo shows how to use the ExpandableSection to create an expandable text component. + +### Expandable Text Component + +```ts file='./examples/ExpandableTextDemo.tsx' + +``` diff --git a/packages/react-core/src/demos/ExpandableSection/examples/ExpandableTextDemo.tsx b/packages/react-core/src/demos/ExpandableSection/examples/ExpandableTextDemo.tsx new file mode 100644 index 00000000000..9b7134c1adf --- /dev/null +++ b/packages/react-core/src/demos/ExpandableSection/examples/ExpandableTextDemo.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { ExpandableSection, ExpandableSectionVariant, Truncate } from '@patternfly/react-core'; + +export const ExpandableTextDemo: React.FunctionComponent = () => { + const [isExpanded, setIsExpanded] = React.useState(false); + + const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => { + setIsExpanded(isExpanded); + }; + + const content = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec dignissim turpis, et tristique purus. + Phasellus efficitur ante quis dolor viverra imperdiet. Orci varius natoque penatibus et magnis dis parturient + montes, nascetur ridiculus mus. Pellentesque laoreet, sem ac elementum semper, lectus mauris vestibulum nulla, + eget volutpat massa neque vel turpis. Donec finibus enim eu leo accumsan consectetur. Praesent massa diam, + tincidunt eu dui ac, ullamcorper elementum est. Phasellus metus felis, venenatis vitae semper nec, porta a metus. + Vestibulum justo nisi, imperdiet id eleifend at, varius nec lorem. Fusce porttitor mollis nibh, ut elementum ante + commodo tincidunt. Integer tincidunt at ipsum non aliquet.`; + + return ( + + {isExpanded ? content : } + + ); +}; From 1d28334391089c486bccf327a4970e4f38c69afa Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Wed, 13 Dec 2023 12:44:04 -0500 Subject: [PATCH 2/4] Update packages/react-core/src/demos/ExpandableSection/ExpandableSection.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- .../react-core/src/demos/ExpandableSection/ExpandableSection.md | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-core/src/demos/ExpandableSection/ExpandableSection.md b/packages/react-core/src/demos/ExpandableSection/ExpandableSection.md index f8cce354a37..66eac9de941 100644 --- a/packages/react-core/src/demos/ExpandableSection/ExpandableSection.md +++ b/packages/react-core/src/demos/ExpandableSection/ExpandableSection.md @@ -5,7 +5,6 @@ section: components ## Demos -- The following demo shows how to use the ExpandableSection to create an expandable text component. ### Expandable Text Component From 31e40b38cbd7025dce645ff601a4bca4be2b2853 Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Wed, 13 Dec 2023 12:44:09 -0500 Subject: [PATCH 3/4] Update packages/react-core/src/demos/ExpandableSection/ExpandableSection.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- .../src/demos/ExpandableSection/ExpandableSection.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/react-core/src/demos/ExpandableSection/ExpandableSection.md b/packages/react-core/src/demos/ExpandableSection/ExpandableSection.md index 66eac9de941..9db68bbda4a 100644 --- a/packages/react-core/src/demos/ExpandableSection/ExpandableSection.md +++ b/packages/react-core/src/demos/ExpandableSection/ExpandableSection.md @@ -6,7 +6,11 @@ section: components ## Demos -### Expandable Text Component +### Expandable text with truncation + +You can truncate long sections of text and add a "Show more" link that allows users to expand and view the full text content. + +To specify the number of characters shown prior to truncation, use a `` component and pass a `maxWidth` to the `style` attribute. ```ts file='./examples/ExpandableTextDemo.tsx' From e06a518beddf42d9b4440e31212c6af23cf80c3f Mon Sep 17 00:00:00 2001 From: Titani Labaj <39532947+tlabaj@users.noreply.github.com> Date: Wed, 3 Jan 2024 16:11:32 -0500 Subject: [PATCH 4/4] Update packages/react-core/src/demos/ExpandableSection/ExpandableSection.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- .../react-core/src/demos/ExpandableSection/ExpandableSection.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/demos/ExpandableSection/ExpandableSection.md b/packages/react-core/src/demos/ExpandableSection/ExpandableSection.md index 9db68bbda4a..440a7ade1ff 100644 --- a/packages/react-core/src/demos/ExpandableSection/ExpandableSection.md +++ b/packages/react-core/src/demos/ExpandableSection/ExpandableSection.md @@ -6,7 +6,7 @@ section: components ## Demos -### Expandable text with truncation +### Expandable text with character truncation You can truncate long sections of text and add a "Show more" link that allows users to expand and view the full text content.