chore(expandablesection): Added a demo to show how to use expandable …

…section to create an expandable text component. (#9887)

* chore(expandablesection): Added a demo to show how to use expandable section to create an expandable text component.

* Update packages/react-core/src/demos/ExpandableSection/ExpandableSection.md

Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com>

* Update packages/react-core/src/demos/ExpandableSection/ExpandableSection.md

Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com>

* Update packages/react-core/src/demos/ExpandableSection/ExpandableSection.md

Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com>

---------

Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com>
Co-authored-by: Titani Labaj <39532947+tlabaj@users.noreply.github.com>

packages/react-core/src/demos/ExpandableSection/ExpandableSection.md

@@ -0,0 +1,17 @@
+---
+id: Expandable section
+section: components
+---
+
+## Demos
+
+
+### 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.
+
+To specify the number of characters shown prior to truncation, use a `<Truncate>` component and pass a `maxWidth` to the `style` attribute.
+
+```ts file='./examples/ExpandableTextDemo.tsx'
+
+```

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 (
+    <ExpandableSection
+      variant={ExpandableSectionVariant.truncate}
+      toggleText={isExpanded ? 'Show less' : 'Show more'}
+      onToggle={onToggle}
+      isExpanded={isExpanded}
+      truncateMaxLines={-1}
+    >
+      {isExpanded ? content : <Truncate content={content} style={{ maxWidth: '10ch' }} />}
+    </ExpandableSection>
+  );
+};