From 1eb7c61481581cdd76855ba585a86876fb4e2dd6 Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Wed, 22 Dec 2021 15:58:45 -0500
Subject: [PATCH 1/3] chore(Accordion): convert examples to
 typescript/functional components

---
 .../Accordion/examples/Accordion.md           | 473 +-----------------
 .../examples/AccordionDefinitionList.tsx      | 107 ++++
 .../AccordionSingleExpandBehavior.tsx         | 107 ++++
 .../Accordion/examples/BorderedAccordion.tsx  | 134 +++++
 ...xedAccordionWithMultipleExpandBehavior.tsx |  92 ++++
 5 files changed, 444 insertions(+), 469 deletions(-)
 create mode 100644 packages/react-core/src/components/Accordion/examples/AccordionDefinitionList.tsx
 create mode 100644 packages/react-core/src/components/Accordion/examples/AccordionSingleExpandBehavior.tsx
 create mode 100644 packages/react-core/src/components/Accordion/examples/BorderedAccordion.tsx
 create mode 100644 packages/react-core/src/components/Accordion/examples/FixedAccordionWithMultipleExpandBehavior.tsx

diff --git a/packages/react-core/src/components/Accordion/examples/Accordion.md b/packages/react-core/src/components/Accordion/examples/Accordion.md
index 3642fa65fdf..e23f2b30bde 100644
--- a/packages/react-core/src/components/Accordion/examples/Accordion.md
+++ b/packages/react-core/src/components/Accordion/examples/Accordion.md
@@ -11,485 +11,20 @@ import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-i
 
 ### Definition list
 
-```js
-import React from 'react';
-import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
-
-class SimpleAccordion extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      expanded: 'ex-toggle2'
-    };
-  }
-
-  render() {
-    const onToggle = id => {
-      if (id === this.state.expanded) {
-        this.setState({ expanded: '' });
-      } else {
-        this.setState({ expanded: id });
-      }
-    };
-    return (
-      <Accordion asDefinitionList>
-        <AccordionItem>
-          <AccordionToggle
-            onClick={() => {
-              onToggle('ex-toggle1');
-            }}
-            isExpanded={this.state.expanded === 'ex-toggle1'}
-            id="ex-toggle1"
-          >
-            Item one
-          </AccordionToggle>
-          <AccordionContent id="ex-expand1" isHidden={this.state.expanded !== 'ex-toggle1'}>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
-              dolore magna aliqua.
-            </p>
-          </AccordionContent>
-        </AccordionItem>
-
-        <AccordionItem>
-          <AccordionToggle
-            onClick={() => {
-              onToggle('ex-toggle2');
-            }}
-            isExpanded={this.state.expanded === 'ex-toggle2'}
-            id="ex-toggle2"
-          >
-            Item two
-          </AccordionToggle>
-          <AccordionContent id="ex-expand2" isHidden={this.state.expanded !== 'ex-toggle2'}>
-            <p>
-              Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
-              ultrices, faucibus erat id, maximus nunc.
-            </p>
-          </AccordionContent>
-        </AccordionItem>
-
-        <AccordionItem>
-          <AccordionToggle
-            onClick={() => {
-              onToggle('ex-toggle3');
-            }}
-            isExpanded={this.state.expanded === 'ex-toggle3'}
-            id="ex-toggle3"
-          >
-            Item three
-          </AccordionToggle>
-          <AccordionContent id="ex-expand3" isHidden={this.state.expanded !== 'ex-toggle3'}>
-            <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
-          </AccordionContent>
-        </AccordionItem>
-
-        <AccordionItem>
-          <AccordionToggle
-            onClick={() => {
-              onToggle('ex-toggle4');
-            }}
-            isExpanded={this.state.expanded === 'ex-toggle4'}
-            id="ex-toggle4"
-          >
-            Item four
-          </AccordionToggle>
-          <AccordionContent id="ex-expand4" isHidden={this.state.expanded !== 'ex-toggle4'}>
-            <p>
-              Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
-              sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
-              posuere cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper
-              eleifend non quis tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis
-              parturient montes, nascetur ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris,
-              pellentesque imperdiet libero convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus.
-              Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.
-            </p>
-          </AccordionContent>
-        </AccordionItem>
-
-        <AccordionItem>
-          <AccordionToggle
-            onClick={() => {
-              onToggle('ex-toggle5');
-            }}
-            isExpanded={this.state.expanded === 'ex-toggle5'}
-            id="ex-toggle5"
-          >
-            Item five
-          </AccordionToggle>
-          <AccordionContent id="ex-expand5" isHidden={this.state.expanded !== 'ex-toggle5'}>
-            <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    );
-  }
-}
+```ts file="./AccordionDefinitionList.tsx"
 ```
 
 ### Single expand behavior
 
-```js
-import React from 'react';
-import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
-
-class SimpleAccordion extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      expanded: 'ex-toggle2'
-    };
-  }
-
-  render() {
-    const onToggle = id => {
-      if (id === this.state.expanded) {
-        this.setState({ expanded: '' });
-      } else {
-        this.setState({ expanded: id });
-      }
-    };
-    return (
-      <Accordion asDefinitionList={false}>
-        <AccordionItem>
-          <AccordionToggle
-            onClick={() => {
-              onToggle('ex-toggle1');
-            }}
-            isExpanded={this.state.expanded === 'ex-toggle1'}
-            id="ex-toggle1"
-          >
-            Item one
-          </AccordionToggle>
-          <AccordionContent id="ex-expand1" isHidden={this.state.expanded !== 'ex-toggle1'}>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
-              dolore magna aliqua.
-            </p>
-          </AccordionContent>
-        </AccordionItem>
-
-        <AccordionItem>
-          <AccordionToggle
-            onClick={() => {
-              onToggle('ex-toggle2');
-            }}
-            isExpanded={this.state.expanded === 'ex-toggle2'}
-            id="ex-toggle2"
-          >
-            Item two
-          </AccordionToggle>
-          <AccordionContent id="ex-expand2" isHidden={this.state.expanded !== 'ex-toggle2'}>
-            <p>
-              Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
-              ultrices, faucibus erat id, maximus nunc.
-            </p>
-          </AccordionContent>
-        </AccordionItem>
-
-        <AccordionItem>
-          <AccordionToggle
-            onClick={() => {
-              onToggle('ex-toggle3');
-            }}
-            isExpanded={this.state.expanded === 'ex-toggle3'}
-            id="ex-toggle3"
-          >
-            Item three
-          </AccordionToggle>
-          <AccordionContent id="ex-expand3" isHidden={this.state.expanded !== 'ex-toggle3'}>
-            <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
-          </AccordionContent>
-        </AccordionItem>
-
-        <AccordionItem>
-          <AccordionToggle
-            onClick={() => {
-              onToggle('ex-toggle4');
-            }}
-            isExpanded={this.state.expanded === 'ex-toggle4'}
-            id="ex-toggle4"
-          >
-            Item four
-          </AccordionToggle>
-          <AccordionContent id="ex-expand4" isHidden={this.state.expanded !== 'ex-toggle4'}>
-            <p>
-              Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
-              sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
-              posuere cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper
-              eleifend non quis tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis
-              parturient montes, nascetur ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris,
-              pellentesque imperdiet libero convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus.
-              Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.
-            </p>
-          </AccordionContent>
-        </AccordionItem>
-
-        <AccordionItem>
-          <AccordionToggle
-            onClick={() => {
-              onToggle('ex-toggle5');
-            }}
-            isExpanded={this.state.expanded === 'ex-toggle5'}
-            id="ex-toggle5"
-          >
-            Item five
-          </AccordionToggle>
-          <AccordionContent id="ex-expand5" isHidden={this.state.expanded !== 'ex-toggle5'}>
-            <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    );
-  }
-}
+```ts file="./AccordionSingleExpandBehavior.tsx"
 ```
 
 ### Fixed with multiple expand behavior
 
-```js
-import React from 'react';
-import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
-
-class FixedAccordion extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      expanded: ['ex2-toggle4']
-    };
-  }
-
-  render() {
-    const toggle = id => {
-      const expanded = this.state.expanded;
-      const index = expanded.indexOf(id);
-      const newExpanded =
-        index >= 0 ? [...expanded.slice(0, index), ...expanded.slice(index + 1, expanded.length)] : [...expanded, id];
-      this.setState(() => ({ expanded: newExpanded }));
-    };
-
-    return (
-      <Accordion asDefinitionList={false}>
-        <AccordionItem>
-          <AccordionToggle
-            onClick={() => toggle('ex2-toggle1')}
-            isExpanded={this.state.expanded.includes('ex2-toggle1')}
-            id="ex2-toggle1"
-          >
-            Item one
-          </AccordionToggle>
-          <AccordionContent id="ex2-expand1" isHidden={!this.state.expanded.includes('ex2-toggle1')} isFixed>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
-              dolore magna aliqua.
-            </p>
-          </AccordionContent>
-        </AccordionItem>
-        <AccordionItem>
-          <AccordionToggle
-            onClick={() => toggle('ex2-toggle2')}
-            isExpanded={this.state.expanded.includes('ex2-toggle2')}
-            id="ex2-toggle2"
-          >
-            Item two
-          </AccordionToggle>
-          <AccordionContent id="ex2-expand2" isHidden={!this.state.expanded.includes('ex2-toggle2')} isFixed>
-            <p>
-              Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
-              ultrices, faucibus erat id, maximus nunc.
-            </p>
-          </AccordionContent>
-        </AccordionItem>
-        <AccordionItem>
-          <AccordionToggle
-            onClick={() => toggle('ex2-toggle3')}
-            isExpanded={this.state.expanded.includes('ex2-toggle3')}
-            id="ex2-toggle3"
-          >
-            Item three
-          </AccordionToggle>
-          <AccordionContent id="ex2-expand3" isHidden={!this.state.expanded.includes('ex2-toggle3')} isFixed>
-            <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
-          </AccordionContent>
-        </AccordionItem>
-        <AccordionItem>
-          <AccordionToggle
-            onClick={() => toggle('ex2-toggle4')}
-            isExpanded={this.state.expanded.includes('ex2-toggle4')}
-            id="ex2-toggle4"
-          >
-            Item four
-          </AccordionToggle>
-          <AccordionContent id="ex2-expand4" isHidden={!this.state.expanded.includes('ex2-toggle4')} isFixed>
-            <p>
-              Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
-              sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
-              posuere cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper
-              eleifend non quis tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis
-              parturient montes, nascetur ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris,
-              pellentesque imperdiet libero convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus.
-              Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.
-            </p>
-          </AccordionContent>
-        </AccordionItem>
-        <AccordionItem>
-          <AccordionToggle
-            onClick={() => toggle('ex2-toggle5')}
-            isExpanded={this.state.expanded.includes('ex2-toggle5')}
-            id="ex2-toggle5"
-          >
-            Item five
-          </AccordionToggle>
-          <AccordionContent id="ex2-expand5" isHidden={!this.state.expanded.includes('ex2-toggle5')} isFixed>
-            <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    );
-  }
-}
+```ts file="./FixedAccordionWithMultipleExpandBehavior.tsx"
 ```
 
 ### Bordered
 
-```js
-import React from 'react';
-import { Accordion, AccordionItem, AccordionContent, AccordionToggle, AccordionExpandedContentBody, Button, Checkbox } from '@patternfly/react-core';
-import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
-
-class BorderedAccordion extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      expanded: 'ex-toggle4',
-      isDisplayLarge: false
-    };
-
-  this.toggleDisplayLarge = checked => {
-      this.setState({
-        isDisplayLarge: checked
-      });
-    };
-  }
-
-  render() {
-    const {expanded, isDisplayLarge} = this.state;
-    const displaySize = isDisplayLarge ? 'large' : 'default';
-    const onToggle = id => {
-      if (id === expanded) {
-        this.setState({ expanded: '' });
-      } else {
-        this.setState({ expanded: id });
-      }
-    };
-    return (
-      <>
-        <Accordion isBordered displaySize={displaySize}>
-          <AccordionItem>
-            <AccordionToggle
-              onClick={() => {
-                onToggle('ex-toggle1');
-              }}
-              isExpanded={expanded === 'ex-toggle1'}
-              id="ex-toggle1"
-            >
-              Item one
-            </AccordionToggle>
-            <AccordionContent id="ex-expand1" isHidden={expanded !== 'ex-toggle1'}>
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
-                dolore magna aliqua.
-              </p>
-            </AccordionContent>
-          </AccordionItem>
-
-          <AccordionItem>
-            <AccordionToggle
-              onClick={() => {
-                onToggle('ex-toggle2');
-              }}
-              isExpanded={expanded === 'ex-toggle2'}
-              id="ex-toggle2"
-            >
-              Item two
-            </AccordionToggle>
-            <AccordionContent id="ex-expand2" isHidden={expanded !== 'ex-toggle2'}>
-              <p>
-                Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
-                ultrices, faucibus erat id, maximus nunc.
-              </p>
-            </AccordionContent>
-          </AccordionItem>
-
-          <AccordionItem>
-            <AccordionToggle
-              onClick={() => {
-                onToggle('ex-toggle3');
-              }}
-              isExpanded={expanded === 'ex-toggle3'}
-              id="ex-toggle3"
-            >
-              Item three
-            </AccordionToggle>
-            <AccordionContent id="ex-expand3" isHidden={expanded !== 'ex-toggle3'}>
-              <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
-            </AccordionContent>
-          </AccordionItem>
-
-          <AccordionItem>
-            <AccordionToggle
-              onClick={() => {
-                onToggle('ex-toggle4');
-              }}
-              isExpanded={expanded === 'ex-toggle4'}
-              id="ex-toggle4"
-            >
-              Item four
-            </AccordionToggle>
-            <AccordionContent id="ex-expand4" isHidden={expanded !== 'ex-toggle4'} isCustomContent>
-              <AccordionExpandedContentBody>
-                Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
-                sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
-                posuere cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper
-                eleifend non quis tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis
-                parturient montes, nascetur ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris,
-                pellentesque imperdiet libero convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus.
-                Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.
-              </AccordionExpandedContentBody>
-              <AccordionExpandedContentBody>
-                <Button variant="link" isLarge isInline> 
-                  Call to action <ArrowRightIcon />
-                </Button>
-              </AccordionExpandedContentBody>
-            </AccordionContent>
-          </AccordionItem>
-          <AccordionItem>
-            <AccordionToggle
-              onClick={() => {
-                onToggle('ex-toggle5');
-              }}
-              isExpanded={expanded === 'ex-toggle5'}
-              id="ex-toggle5"
-            >
-              Item five
-            </AccordionToggle>
-            <AccordionContent id="ex-expand5" isHidden={expanded !== 'ex-toggle5'}>
-              <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
-        <div style={{ marginTop: '30px' }}>
-          <Checkbox
-            label="Display size large"
-            isChecked={isDisplayLarge}
-            onChange={this.toggleDisplayLarge}
-            aria-label="show displlay large variation checkbox"
-            id="toggle-display-lg"
-            name="toggle-display-lg"
-          />
-        </div>
-      </>
-    );
-  }
-}
+```ts file="./BorderedAccordion.tsx"
 ```
diff --git a/packages/react-core/src/components/Accordion/examples/AccordionDefinitionList.tsx b/packages/react-core/src/components/Accordion/examples/AccordionDefinitionList.tsx
new file mode 100644
index 00000000000..e9f2b3b5090
--- /dev/null
+++ b/packages/react-core/src/components/Accordion/examples/AccordionDefinitionList.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
+
+export const AccordionDefinitionList = () => {
+  const [expanded, setExpanded] = React.useState('ex-toggle2');
+
+  const onToggle = (id: string) => {
+    if (id === expanded) {
+      setExpanded('');
+    } else {
+      setExpanded(id);
+    }
+  };
+
+  return (
+    <Accordion asDefinitionList>
+      <AccordionItem>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('ex-toggle1');
+          }}
+          isExpanded={expanded === 'ex-toggle1'}
+          id="ex-toggle1"
+        >
+          Item one
+        </AccordionToggle>
+        <AccordionContent id="ex-expand1" isHidden={expanded !== 'ex-toggle1'}>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua.
+          </p>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('ex-toggle2');
+          }}
+          isExpanded={expanded === 'ex-toggle2'}
+          id="ex-toggle2"
+        >
+          Item two
+        </AccordionToggle>
+        <AccordionContent id="ex-expand2" isHidden={expanded !== 'ex-toggle2'}>
+          <p>
+            Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
+            ultrices, faucibus erat id, maximus nunc.
+          </p>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('ex-toggle3');
+          }}
+          isExpanded={expanded === 'ex-toggle3'}
+          id="ex-toggle3"
+        >
+          Item three
+        </AccordionToggle>
+        <AccordionContent id="ex-expand3" isHidden={expanded !== 'ex-toggle3'}>
+          <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('ex-toggle4');
+          }}
+          isExpanded={expanded === 'ex-toggle4'}
+          id="ex-toggle4"
+        >
+          Item four
+        </AccordionToggle>
+        <AccordionContent id="ex-expand4" isHidden={expanded !== 'ex-toggle4'}>
+          <p>
+            Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
+            sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
+            cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis
+            tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
+            ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero
+            convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis
+            dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.
+          </p>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('ex-toggle5');
+          }}
+          isExpanded={expanded === 'ex-toggle5'}
+          id="ex-toggle5"
+        >
+          Item five
+        </AccordionToggle>
+        <AccordionContent id="ex-expand5" isHidden={expanded !== 'ex-toggle5'}>
+          <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+};
diff --git a/packages/react-core/src/components/Accordion/examples/AccordionSingleExpandBehavior.tsx b/packages/react-core/src/components/Accordion/examples/AccordionSingleExpandBehavior.tsx
new file mode 100644
index 00000000000..9f5e75e1a04
--- /dev/null
+++ b/packages/react-core/src/components/Accordion/examples/AccordionSingleExpandBehavior.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
+
+export const AccordionSingleExpandBehavior = () => {
+  const [expanded, setExpanded] = React.useState('ex-toggle2');
+
+  const onToggle = (id: string) => {
+    if (id === expanded) {
+      setExpanded('');
+    } else {
+      setExpanded(id);
+    }
+  };
+
+  return (
+    <Accordion asDefinitionList={false}>
+      <AccordionItem>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('ex-toggle1');
+          }}
+          isExpanded={expanded === 'ex-toggle1'}
+          id="ex-toggle1"
+        >
+          Item one
+        </AccordionToggle>
+        <AccordionContent id="ex-expand1" isHidden={expanded !== 'ex-toggle1'}>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua.
+          </p>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('ex-toggle2');
+          }}
+          isExpanded={expanded === 'ex-toggle2'}
+          id="ex-toggle2"
+        >
+          Item two
+        </AccordionToggle>
+        <AccordionContent id="ex-expand2" isHidden={expanded !== 'ex-toggle2'}>
+          <p>
+            Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
+            ultrices, faucibus erat id, maximus nunc.
+          </p>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('ex-toggle3');
+          }}
+          isExpanded={expanded === 'ex-toggle3'}
+          id="ex-toggle3"
+        >
+          Item three
+        </AccordionToggle>
+        <AccordionContent id="ex-expand3" isHidden={expanded !== 'ex-toggle3'}>
+          <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('ex-toggle4');
+          }}
+          isExpanded={expanded === 'ex-toggle4'}
+          id="ex-toggle4"
+        >
+          Item four
+        </AccordionToggle>
+        <AccordionContent id="ex-expand4" isHidden={expanded !== 'ex-toggle4'}>
+          <p>
+            Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
+            sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
+            cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis
+            tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
+            ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero
+            convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis
+            dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.
+          </p>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('ex-toggle5');
+          }}
+          isExpanded={expanded === 'ex-toggle5'}
+          id="ex-toggle5"
+        >
+          Item five
+        </AccordionToggle>
+        <AccordionContent id="ex-expand5" isHidden={expanded !== 'ex-toggle5'}>
+          <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+};
diff --git a/packages/react-core/src/components/Accordion/examples/BorderedAccordion.tsx b/packages/react-core/src/components/Accordion/examples/BorderedAccordion.tsx
new file mode 100644
index 00000000000..a4b4248cc8b
--- /dev/null
+++ b/packages/react-core/src/components/Accordion/examples/BorderedAccordion.tsx
@@ -0,0 +1,134 @@
+import React from 'react';
+import {
+  Accordion,
+  AccordionItem,
+  AccordionContent,
+  AccordionToggle,
+  AccordionExpandedContentBody,
+  Button,
+  Checkbox
+} from '@patternfly/react-core';
+import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
+
+export const BorderedAccordion = () => {
+  const [expanded, setExpanded] = React.useState('ex-toggle4');
+  const [isDisplayLarge, setIsDisplayLarge] = React.useState(false);
+
+  const displaySize = isDisplayLarge ? 'large' : 'default';
+  const onToggle = (id: string) => {
+    if (id === expanded) {
+      setExpanded('');
+    } else {
+      setExpanded(id);
+    }
+  };
+
+  return (
+    <>
+      <Accordion isBordered displaySize={displaySize}>
+        <AccordionItem>
+          <AccordionToggle
+            onClick={() => {
+              onToggle('ex-toggle1');
+            }}
+            isExpanded={expanded === 'ex-toggle1'}
+            id="ex-toggle1"
+          >
+            Item one
+          </AccordionToggle>
+          <AccordionContent id="ex-expand1" isHidden={expanded !== 'ex-toggle1'}>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua.
+            </p>
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem>
+          <AccordionToggle
+            onClick={() => {
+              onToggle('ex-toggle2');
+            }}
+            isExpanded={expanded === 'ex-toggle2'}
+            id="ex-toggle2"
+          >
+            Item two
+          </AccordionToggle>
+          <AccordionContent id="ex-expand2" isHidden={expanded !== 'ex-toggle2'}>
+            <p>
+              Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
+              ultrices, faucibus erat id, maximus nunc.
+            </p>
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem>
+          <AccordionToggle
+            onClick={() => {
+              onToggle('ex-toggle3');
+            }}
+            isExpanded={expanded === 'ex-toggle3'}
+            id="ex-toggle3"
+          >
+            Item three
+          </AccordionToggle>
+          <AccordionContent id="ex-expand3" isHidden={expanded !== 'ex-toggle3'}>
+            <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem>
+          <AccordionToggle
+            onClick={() => {
+              onToggle('ex-toggle4');
+            }}
+            isExpanded={expanded === 'ex-toggle4'}
+            id="ex-toggle4"
+          >
+            Item four
+          </AccordionToggle>
+          <AccordionContent id="ex-expand4" isHidden={expanded !== 'ex-toggle4'} isCustomContent>
+            <AccordionExpandedContentBody>
+              Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
+              sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+              posuere cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper
+              eleifend non quis tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis
+              parturient montes, nascetur ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris,
+              pellentesque imperdiet libero convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus.
+              Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.
+            </AccordionExpandedContentBody>
+            <AccordionExpandedContentBody>
+              <Button variant="link" isLarge isInline>
+                Call to action <ArrowRightIcon />
+              </Button>
+            </AccordionExpandedContentBody>
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem>
+          <AccordionToggle
+            onClick={() => {
+              onToggle('ex-toggle5');
+            }}
+            isExpanded={expanded === 'ex-toggle5'}
+            id="ex-toggle5"
+          >
+            Item five
+          </AccordionToggle>
+          <AccordionContent id="ex-expand5" isHidden={expanded !== 'ex-toggle5'}>
+            <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+      <div style={{ marginTop: '30px' }}>
+        <Checkbox
+          label="Display size large"
+          isChecked={isDisplayLarge}
+          onChange={setIsDisplayLarge}
+          aria-label="show displlay large variation checkbox"
+          id="toggle-display-lg"
+          name="toggle-display-lg"
+        />
+      </div>
+    </>
+  );
+};
diff --git a/packages/react-core/src/components/Accordion/examples/FixedAccordionWithMultipleExpandBehavior.tsx b/packages/react-core/src/components/Accordion/examples/FixedAccordionWithMultipleExpandBehavior.tsx
new file mode 100644
index 00000000000..6ed5ecfea4c
--- /dev/null
+++ b/packages/react-core/src/components/Accordion/examples/FixedAccordionWithMultipleExpandBehavior.tsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
+
+export const FixedAccordionWithMultipleExpandBehavior = () => {
+  const [expanded, setExpanded] = React.useState(['ex2-toggle4']);
+
+  const toggle = id => {
+    const index = expanded.indexOf(id);
+    const newExpanded: string[] =
+      index >= 0 ? [...expanded.slice(0, index), ...expanded.slice(index + 1, expanded.length)] : [...expanded, id];
+    setExpanded(newExpanded);
+  };
+
+  return (
+    <Accordion asDefinitionList={false}>
+      <AccordionItem>
+        <AccordionToggle
+          onClick={() => toggle('ex2-toggle1')}
+          isExpanded={expanded.includes('ex2-toggle1')}
+          id="ex2-toggle1"
+        >
+          Item one
+        </AccordionToggle>
+        <AccordionContent id="ex2-expand1" isHidden={!expanded.includes('ex2-toggle1')} isFixed>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua.
+          </p>
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem>
+        <AccordionToggle
+          onClick={() => toggle('ex2-toggle2')}
+          isExpanded={expanded.includes('ex2-toggle2')}
+          id="ex2-toggle2"
+        >
+          Item two
+        </AccordionToggle>
+        <AccordionContent id="ex2-expand2" isHidden={!expanded.includes('ex2-toggle2')} isFixed>
+          <p>
+            Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
+            ultrices, faucibus erat id, maximus nunc.
+          </p>
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem>
+        <AccordionToggle
+          onClick={() => toggle('ex2-toggle3')}
+          isExpanded={expanded.includes('ex2-toggle3')}
+          id="ex2-toggle3"
+        >
+          Item three
+        </AccordionToggle>
+        <AccordionContent id="ex2-expand3" isHidden={!expanded.includes('ex2-toggle3')} isFixed>
+          <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem>
+        <AccordionToggle
+          onClick={() => toggle('ex2-toggle4')}
+          isExpanded={expanded.includes('ex2-toggle4')}
+          id="ex2-toggle4"
+        >
+          Item four
+        </AccordionToggle>
+        <AccordionContent id="ex2-expand4" isHidden={!expanded.includes('ex2-toggle4')} isFixed>
+          <p>
+            Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
+            sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
+            cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis
+            tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
+            ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero
+            convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis
+            dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.
+          </p>
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem>
+        <AccordionToggle
+          onClick={() => toggle('ex2-toggle5')}
+          isExpanded={expanded.includes('ex2-toggle5')}
+          id="ex2-toggle5"
+        >
+          Item five
+        </AccordionToggle>
+        <AccordionContent id="ex2-expand5" isHidden={!expanded.includes('ex2-toggle5')} isFixed>
+          <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+};

From 85624910faf8f789d7bfb016d04ec95dd772d993 Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Thu, 6 Jan 2022 15:42:06 -0500
Subject: [PATCH 2/3] refactors extracted example names for consistency

---
 .../react-core/src/components/Accordion/examples/Accordion.md | 4 ++--
 .../examples/{BorderedAccordion.tsx => AccordionBordered.tsx} | 2 +-
 ...avior.tsx => AccordionFixedWithMultipleExpandBehavior.tsx} | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)
 rename packages/react-core/src/components/Accordion/examples/{BorderedAccordion.tsx => AccordionBordered.tsx} (99%)
 rename packages/react-core/src/components/Accordion/examples/{FixedAccordionWithMultipleExpandBehavior.tsx => AccordionFixedWithMultipleExpandBehavior.tsx} (98%)

diff --git a/packages/react-core/src/components/Accordion/examples/Accordion.md b/packages/react-core/src/components/Accordion/examples/Accordion.md
index e23f2b30bde..e1c4fcf5af0 100644
--- a/packages/react-core/src/components/Accordion/examples/Accordion.md
+++ b/packages/react-core/src/components/Accordion/examples/Accordion.md
@@ -21,10 +21,10 @@ import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-i
 
 ### Fixed with multiple expand behavior
 
-```ts file="./FixedAccordionWithMultipleExpandBehavior.tsx"
+```ts file="./AccordionFixedWithMultipleExpandBehavior.tsx"
 ```
 
 ### Bordered
 
-```ts file="./BorderedAccordion.tsx"
+```ts file="./AccordionBordered.tsx"
 ```
diff --git a/packages/react-core/src/components/Accordion/examples/BorderedAccordion.tsx b/packages/react-core/src/components/Accordion/examples/AccordionBordered.tsx
similarity index 99%
rename from packages/react-core/src/components/Accordion/examples/BorderedAccordion.tsx
rename to packages/react-core/src/components/Accordion/examples/AccordionBordered.tsx
index a4b4248cc8b..d45460c9bf5 100644
--- a/packages/react-core/src/components/Accordion/examples/BorderedAccordion.tsx
+++ b/packages/react-core/src/components/Accordion/examples/AccordionBordered.tsx
@@ -10,7 +10,7 @@ import {
 } from '@patternfly/react-core';
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
 
-export const BorderedAccordion = () => {
+export const AccordionBordered = () => {
   const [expanded, setExpanded] = React.useState('ex-toggle4');
   const [isDisplayLarge, setIsDisplayLarge] = React.useState(false);
 
diff --git a/packages/react-core/src/components/Accordion/examples/FixedAccordionWithMultipleExpandBehavior.tsx b/packages/react-core/src/components/Accordion/examples/AccordionFixedWithMultipleExpandBehavior.tsx
similarity index 98%
rename from packages/react-core/src/components/Accordion/examples/FixedAccordionWithMultipleExpandBehavior.tsx
rename to packages/react-core/src/components/Accordion/examples/AccordionFixedWithMultipleExpandBehavior.tsx
index 6ed5ecfea4c..def0179b309 100644
--- a/packages/react-core/src/components/Accordion/examples/FixedAccordionWithMultipleExpandBehavior.tsx
+++ b/packages/react-core/src/components/Accordion/examples/AccordionFixedWithMultipleExpandBehavior.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
 
-export const FixedAccordionWithMultipleExpandBehavior = () => {
+export const AccordionFixedWithMultipleExpandBehavior = () => {
   const [expanded, setExpanded] = React.useState(['ex2-toggle4']);
 
   const toggle = id => {

From a9ace16674a2b8a6a528dcc35fe21b32be82e8c2 Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Thu, 6 Jan 2022 15:43:09 -0500
Subject: [PATCH 3/3] explicitly types function component return values

---
 .../src/components/Accordion/examples/AccordionBordered.tsx     | 2 +-
 .../components/Accordion/examples/AccordionDefinitionList.tsx   | 2 +-
 .../examples/AccordionFixedWithMultipleExpandBehavior.tsx       | 2 +-
 .../Accordion/examples/AccordionSingleExpandBehavior.tsx        | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-core/src/components/Accordion/examples/AccordionBordered.tsx b/packages/react-core/src/components/Accordion/examples/AccordionBordered.tsx
index d45460c9bf5..08db9f50487 100644
--- a/packages/react-core/src/components/Accordion/examples/AccordionBordered.tsx
+++ b/packages/react-core/src/components/Accordion/examples/AccordionBordered.tsx
@@ -10,7 +10,7 @@ import {
 } from '@patternfly/react-core';
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
 
-export const AccordionBordered = () => {
+export const AccordionBordered: React.FunctionComponent = () => {
   const [expanded, setExpanded] = React.useState('ex-toggle4');
   const [isDisplayLarge, setIsDisplayLarge] = React.useState(false);
 
diff --git a/packages/react-core/src/components/Accordion/examples/AccordionDefinitionList.tsx b/packages/react-core/src/components/Accordion/examples/AccordionDefinitionList.tsx
index e9f2b3b5090..3e011986b79 100644
--- a/packages/react-core/src/components/Accordion/examples/AccordionDefinitionList.tsx
+++ b/packages/react-core/src/components/Accordion/examples/AccordionDefinitionList.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
 
-export const AccordionDefinitionList = () => {
+export const AccordionDefinitionList: React.FunctionComponent = () => {
   const [expanded, setExpanded] = React.useState('ex-toggle2');
 
   const onToggle = (id: string) => {
diff --git a/packages/react-core/src/components/Accordion/examples/AccordionFixedWithMultipleExpandBehavior.tsx b/packages/react-core/src/components/Accordion/examples/AccordionFixedWithMultipleExpandBehavior.tsx
index def0179b309..bf03fae38e7 100644
--- a/packages/react-core/src/components/Accordion/examples/AccordionFixedWithMultipleExpandBehavior.tsx
+++ b/packages/react-core/src/components/Accordion/examples/AccordionFixedWithMultipleExpandBehavior.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
 
-export const AccordionFixedWithMultipleExpandBehavior = () => {
+export const AccordionFixedWithMultipleExpandBehavior: React.FunctionComponent = () => {
   const [expanded, setExpanded] = React.useState(['ex2-toggle4']);
 
   const toggle = id => {
diff --git a/packages/react-core/src/components/Accordion/examples/AccordionSingleExpandBehavior.tsx b/packages/react-core/src/components/Accordion/examples/AccordionSingleExpandBehavior.tsx
index 9f5e75e1a04..332282c6811 100644
--- a/packages/react-core/src/components/Accordion/examples/AccordionSingleExpandBehavior.tsx
+++ b/packages/react-core/src/components/Accordion/examples/AccordionSingleExpandBehavior.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
 
-export const AccordionSingleExpandBehavior = () => {
+export const AccordionSingleExpandBehavior: React.FunctionComponent = () => {
   const [expanded, setExpanded] = React.useState('ex-toggle2');
 
   const onToggle = (id: string) => {