@patternfly/patternfly-doc-core 1.5.0 → 1.7.0

package/src/styles/global.scss

@@ -1 +1,47 @@
-// custom global scss would go here
+.circle {
+  height: 1em;
+  display: inline-block;
+  aspect-ratio: 1 / 1;
+  border-radius: 50%;
+  border: var(--pf-t--global--border--width--regular) solid
+    var(--pf-t--global--background--color--inverse--default);
+  box-shadow: var(--pf-t--global--box-shadow--sm);
+}
+
+.rotate-90-deg {
+  transform: rotate(90deg);
+}
+
+.ws-heading {
+  position: relative;
+}
+
+.ws-heading-anchor {
+  color: var(--pf-t--global--icon--color--regular);
+  transform: translate(calc(-100% - var(--pf-t--global--spacer--xs)), -50%);
+  opacity: 0;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  --pf-v6-c-content--a--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v6-c-button--m-plain--PaddingInlineEnd: 0;
+  --pf-v6-c-button--m-plain--PaddingInlineStart: 0;
+  --pf-v6-c-button--MinWidth: unset;
+}
+
+.ws-heading-anchor.pf-v6-c-button:hover,
+.ws-heading-anchor.pf-v6-c-button:focus {
+  --pf-v6-c-button--hover--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v6-c-button--BackgroundColor: transparent;
+  --pf-v6-c-content--a--hover--Color: var(--pf-t--global--icon--color--regular);
+}
+
+.ws-heading-anchor-icon {
+  height: 0.75rem;
+  width: 0.75rem;
+}
+
+.ws-heading:hover .ws-heading-anchor,
+.ws-heading-anchor:focus {
+  opacity: 1;
+}

package/src/utils/index.ts

@@ -1 +1,2 @@
 export * from './capitalize'
+export * from './slugger'

package/src/utils/slugger.ts

@@ -0,0 +1,14 @@
+import React from 'react'
+
+// Should produce valid URLs and valid CSS ids
+export const slugger = (children: React.ReactNode) => {
+  const value = React.Children.toArray(children)
+    .filter((child) => typeof child === 'string' || typeof child === 'number')
+    .join('')
+  return value
+    .toLowerCase()
+    .trim()
+    .replace(/index$/, '')
+    .replace(/\s/g, '-')
+    .replace(/[^A-Za-z0-9.\-~]/g, '')
+}

package/textContent/contribute.md

@@ -3,12 +3,14 @@ id: Contribute
 title: Contribute to PatternFly
 section: get-started
 propComponents: ['Button', 'BadgeCountObject']
+cssPrefix: pf-v6-c-about-modal-box
 ---
 
-## Community contributions 
+## Community contributions
 
-Thank you for your interest in contributing to PatternFly! We depend on community contributions to help our design system grow and evolve. We encourage everyone, regardless of background, to get involved. Common contributions include (but aren't limited to): 
-- New feature ideas. 
+Thank you for your interest in contributing to PatternFly! We depend on community contributions to help our design system grow and evolve. We encourage everyone, regardless of background, to get involved. Common contributions include (but aren't limited to):
+
+- New feature ideas.
 - Bug reports.
 - Documentation updates.
 
@@ -20,29 +22,32 @@ If you have any ideas that don't fit into the projects outlined in this guide, p
 
 If you have skills in visual and interaction design, you can contribute to PatternFly's design by taking an existing issue or proposing a new feature, enhancement, or icon. If you are interested in any of these projects, [reach out on the patternfly-design Slack channel.](http://join.slack.com/t/patternfly/shared_invite/zt-1npmqswgk-bF2R1E2rglV8jz5DNTezMQ)
 
-### Existing design issues 
+### Existing design issues
 
 The PatternFly design team is composed of visual and interaction designers who define the look and feel of the PatternFly library. The team follows an agile framework, planning their work in sprints, with a backlog that is tracked and managed via [this GitHub project board.](https://github.com/orgs/patternfly/projects/7/views/30) This board contains a list issues that are currently unassigned and waiting in the queue. If you see something here that you'd like to work on, leave a comment on the issue and a member of our team will reach out with next steps.
 
 ### New feature or enhancement
+
 If you have an idea for a new design pattern, a new component type, or an existing feature improvement, we'd love to hear it. [Start by opening an issue in the patternfly-design repository.](https://github.com/patternfly/patternfly-design/issues) From there, a member of our team will reach out and work with you to plan and design a solution.
 
 ### New icons
+
 We encourage designers to work with [the existing PatternFly icon set](/design-foundations/icons), which covers most common use cases. If your use case isn't covered, you can propose a new icon.
 
 To contribute a new icon, [start by opening an issue in the patternfly-design repository](https://github.com/patternfly/patternfly-design/issues) that describes your idea and why it's needed. A member of our team will reach out to you to discuss next steps.
 
 ## Code
 
-The primary PatternFly libraries include HTML/CSS (commonly called "core") and React. If you're looking to contribute to PatternFly's codebase, these libraries are a good place to start. You can help out by taking existing issues, or creating issues for bugs and other changes. 
+The primary PatternFly libraries include HTML/CSS (commonly called "core") and React. If you're looking to contribute to PatternFly's codebase, these libraries are a good place to start. You can help out by taking existing issues, or creating issues for bugs and other changes.
 
 If you have any questions about these projects, you can reach out to us on our [patternfly-core](https://patternfly.slack.com/archives/C9Q224EFL) and [patternfly-react](https://patternfly.slack.com/archives/C4FM977N0) Slack channels.
 
-### Existing development issues 
+### Existing development issues
 
-To find work that has been approved, but not started, you can view open issues in our [patternfly](https://github.com/patternfly/patternfly/issues) (HTML/CSS) and [patternfly-react](https://github.com/patternfly/patternfly-react/issues) (React) repositories. If you find an issue that you'd like to work on, leave a comment and someone from our team will reach out to you with next steps. 
+To find work that has been approved, but not started, you can view open issues in our [patternfly](https://github.com/patternfly/patternfly/issues) (HTML/CSS) and [patternfly-react](https://github.com/patternfly/patternfly-react/issues) (React) repositories. If you find an issue that you'd like to work on, leave a comment and someone from our team will reach out to you with next steps.
 
 Be sure to view our detailed contribution instructions for both of these repositories:
+
 - [Core contribution guidelines](https://github.com/patternfly/patternfly#guidelines-for-css-development)
 - [React contribution guidelines](https://github.com/patternfly/patternfly-react/blob/main/CONTRIBUTING.md#contribution-process)
 
@@ -50,13 +55,13 @@ Be sure to view our detailed contribution instructions for both of these reposit
 
 If you believe that you've come across a PatternFly bug, alert our team, so that we can resolve the issue. To report a bug, follow these steps:
 
-1. View the documentation for the feature, to confirm that the behavior is not functioning as intended. 
+1. View the documentation for the feature, to confirm that the behavior is not functioning as intended.
 1. Search open issues in the [patternfly](https://github.com/patternfly/patternfly/issues) and [patternfly-react](https://github.com/patternfly/patternfly-react/issues) repositories to see if a related issue already exists.
-    - If the bug is present in only the React implementation of PatternFly, [create a bug issue in patternfly-react.](https://github.com/patternfly/patternfly-react/issues)
-    - If the bug can be seen on both the React and HTML/CSS side, [create a bug issue in patternfly](https://github.com/patternfly/patternfly/issues).
+   - If the bug is present in only the React implementation of PatternFly, [create a bug issue in patternfly-react.](https://github.com/patternfly/patternfly-react/issues)
+   - If the bug can be seen on both the React and HTML/CSS side, [create a bug issue in patternfly](https://github.com/patternfly/patternfly/issues).
 1. Be sure to mention which project the bug was noticed in and if there is a deadline that the fix is needed for.
 
-## Documentation 
+## Documentation
 
 Across our website, you can find PatternFly documentation that explains concepts, provides guidance, and outlines important resources for PatternFly users. Our documentation can always be improved, and we love to hear input from the people who use it.
 
@@ -64,9 +69,10 @@ If you'd like to contribute to documentation, you can refer to our [detailed con
 
 ### Existing documentation issues
 
-Our website documentation is contained in the [patternfly-org repository](https://github.com/patternfly/patternfly-org). If you find an issue that you'd like to work on, leave a comment and someone from our team will reach out to you with next steps. 
+Our website documentation is contained in the [patternfly-org repository](https://github.com/patternfly/patternfly-org). If you find an issue that you'd like to work on, leave a comment and someone from our team will reach out to you with next steps.
 
 ### Design guidelines
+
 Our design guidelines are found across our component, layout, chart, and pattern web pages. These guides clarify usage details to help designers follow best practices to create strong UI solutions.
 
-If you'd like to contribute to our design guidelines, you can open an issue in [patternfly-org](https://github.com/patternfly/patternfly-org) to propose a new page or updates to an existing page. From there, our team will work with you to author and publish your new content. 
+If you'd like to contribute to our design guidelines, you can open an issue in [patternfly-org](https://github.com/patternfly/patternfly-org) to propose a new page or updates to an existing page. From there, our team will work with you to author and publish your new content.

package/textContent/examples/Accordion/Accordion.mdx

@@ -0,0 +1,45 @@
+---
+id: Accordion
+section: components
+cssPrefix: pf-v6-c-accordion
+propComponents:
+  [
+    'Accordion',
+    'AccordionItem',
+    'AccordionContent',
+    'AccordionToggle',
+    AccordionExpandableContentBody,
+  ]
+---
+
+## Examples
+
+### Definition list
+
+import AccordionDefinitionList from './AccordionDefinitionList.tsx?raw'
+
+<LiveExample src={AccordionDefinitionList} />
+
+### Single expand behavior
+
+import AccordionSingleExpandBehavior from './AccordionSingleExpandBehavior.tsx?raw'
+
+<LiveExample src={AccordionSingleExpandBehavior} />
+
+### Fixed with multiple expand behavior
+
+import AccordionFixedWithMultipleExpandBehavior from './AccordionFixedWithMultipleExpandBehavior.tsx?raw'
+
+<LiveExample src={AccordionFixedWithMultipleExpandBehavior} />
+
+### Bordered
+
+import AccordionBordered from './AccordionBordered.tsx?raw'
+
+<LiveExample src={AccordionBordered} />
+
+### Toggle icon at start
+
+import AccordionToggleIconAtStart from './AccordionToggleIconAtStart.tsx?raw'
+
+<LiveExample src={AccordionToggleIconAtStart} />

package/textContent/examples/Accordion/AccordionBordered.tsx

@@ -0,0 +1,141 @@
+import { useState } from 'react'
+import {
+  Accordion,
+  AccordionItem,
+  AccordionContent,
+  AccordionToggle,
+  AccordionExpandableContentBody,
+  Button,
+  Checkbox,
+} from '@patternfly/react-core'
+import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon'
+
+export const AccordionBordered: React.FunctionComponent = () => {
+  const [expanded, setExpanded] = useState('bordered-toggle4')
+  const [isDisplayLarge, setIsDisplayLarge] = useState(false)
+
+  const displaySize = isDisplayLarge ? 'lg' : 'default'
+  const onToggle = (id: string) => {
+    if (id === expanded) {
+      setExpanded('')
+    } else {
+      setExpanded(id)
+    }
+  }
+
+  return (
+    <>
+      <Accordion isBordered displaySize={displaySize}>
+        <AccordionItem isExpanded={expanded === 'bordered-toggle1'}>
+          <AccordionToggle
+            onClick={() => {
+              onToggle('bordered-toggle1')
+            }}
+            id="bordered-toggle1"
+          >
+            Item one
+          </AccordionToggle>
+          <AccordionContent id="bordered-expand1">
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </p>
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem isExpanded={expanded === 'bordered-toggle2'}>
+          <AccordionToggle
+            onClick={() => {
+              onToggle('bordered-toggle2')
+            }}
+            id="bordered-toggle2"
+          >
+            Item two
+          </AccordionToggle>
+          <AccordionContent id="bordered-expand2">
+            <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 isExpanded={expanded === 'bordered-toggle3'}>
+          <AccordionToggle
+            onClick={() => {
+              onToggle('bordered-toggle3')
+            }}
+            id="bordered-toggle3"
+          >
+            Item three
+          </AccordionToggle>
+          <AccordionContent id="bordered-expand3">
+            <p>
+              Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue
+              orci quis ultricies tempus.
+            </p>
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem isExpanded={expanded === 'bordered-toggle4'}>
+          <AccordionToggle
+            onClick={() => {
+              onToggle('bordered-toggle4')
+            }}
+            id="bordered-toggle4"
+          >
+            Item four
+          </AccordionToggle>
+          <AccordionContent id="bordered-expand4" isCustomContent>
+            <AccordionExpandableContentBody>
+              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.
+            </AccordionExpandableContentBody>
+            <AccordionExpandableContentBody>
+              <Button variant="link" size="lg" isInline>
+                Call to action <ArrowRightIcon />
+              </Button>
+            </AccordionExpandableContentBody>
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem isExpanded={expanded === 'bordered-toggle5'}>
+          <AccordionToggle
+            onClick={() => {
+              onToggle('bordered-toggle5')
+            }}
+            id="bordered-toggle5"
+          >
+            Item five
+          </AccordionToggle>
+          <AccordionContent id="bordered-expand5">
+            <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={(_event, checked) => setIsDisplayLarge(checked)}
+          aria-label="show display large variation checkbox"
+          id="toggle-display-lg"
+          name="toggle-display-lg"
+        />
+      </div>
+    </>
+  )
+}

package/textContent/examples/Accordion/AccordionDefinitionList.tsx

@@ -0,0 +1,102 @@
+import { useState } from 'react';
+import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
+
+export const AccordionDefinitionList: React.FunctionComponent = () => {
+  const [expanded, setExpanded] = useState('def-list-toggle2');
+
+  const onToggle = (id: string) => {
+    if (id === expanded) {
+      setExpanded('');
+    } else {
+      setExpanded(id);
+    }
+  };
+
+  return (
+    <Accordion asDefinitionList>
+      <AccordionItem isExpanded={expanded === 'def-list-toggle1'}>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('def-list-toggle1');
+          }}
+          id="def-list-toggle1"
+        >
+          Item one
+        </AccordionToggle>
+        <AccordionContent id="def-list-expand1">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua.
+          </p>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem isExpanded={expanded === 'def-list-toggle2'}>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('def-list-toggle2');
+          }}
+          id="def-list-toggle2"
+        >
+          Item two
+        </AccordionToggle>
+        <AccordionContent id="def-list-expand2">
+          <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 isExpanded={expanded === 'def-list-toggle3'}>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('def-list-toggle3');
+          }}
+          id="def-list-toggle3"
+        >
+          Item three
+        </AccordionToggle>
+        <AccordionContent id="def-list-expand3">
+          <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem isExpanded={expanded === 'def-list-toggle4'}>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('def-list-toggle4');
+          }}
+          id="def-list-toggle4"
+        >
+          Item four
+        </AccordionToggle>
+        <AccordionContent id="def-list-expand4">
+          <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 isExpanded={expanded === 'def-list-toggle5'}>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('def-list-toggle5');
+          }}
+          id="def-list-toggle5"
+        >
+          Item five
+        </AccordionToggle>
+        <AccordionContent id="def-list-expand5">
+          <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+};

package/textContent/examples/Accordion/AccordionFixedWithMultipleExpandBehavior.tsx

@@ -0,0 +1,128 @@
+import { useState } from 'react'
+import {
+  Accordion,
+  AccordionItem,
+  AccordionContent,
+  AccordionToggle,
+} from '@patternfly/react-core'
+
+export const AccordionFixedWithMultipleExpandBehavior: React.FunctionComponent =
+  () => {
+    const [expanded, setExpanded] = useState(['ex2-toggle4'])
+
+    const toggle = (id: string) => {
+      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 isExpanded={expanded.includes('ex2-toggle1')}>
+          <AccordionToggle
+            onClick={() => toggle('ex2-toggle1')}
+            id="ex2-toggle1"
+          >
+            Item one
+          </AccordionToggle>
+          <AccordionContent id="ex2-expand1" 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 isExpanded={expanded.includes('ex2-toggle2')}>
+          <AccordionToggle
+            onClick={() => toggle('ex2-toggle2')}
+            id="ex2-toggle2"
+          >
+            Item two
+          </AccordionToggle>
+          <AccordionContent id="ex2-expand2" 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 isExpanded={expanded.includes('ex2-toggle3')}>
+          <AccordionToggle
+            onClick={() => toggle('ex2-toggle3')}
+            id="ex2-toggle3"
+          >
+            Item three
+          </AccordionToggle>
+          <AccordionContent id="ex2-expand3" isFixed>
+            <p>
+              Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue
+              orci quis ultricies tempus.
+            </p>
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem isExpanded={expanded.includes('ex2-toggle4')}>
+          <AccordionToggle
+            onClick={() => toggle('ex2-toggle4')}
+            id="ex2-toggle4"
+          >
+            Item four
+          </AccordionToggle>
+          <AccordionContent
+            aria-labelledby="ex2-toggle4"
+            id="ex2-expand4"
+            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>
+            <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 isExpanded={expanded.includes('ex2-toggle5')}>
+          <AccordionToggle
+            onClick={() => toggle('ex2-toggle5')}
+            id="ex2-toggle5"
+          >
+            Item five
+          </AccordionToggle>
+          <AccordionContent id="ex2-expand5" isFixed>
+            <p>
+              Vivamus finibus dictum ex id ultrices. Mauris dictum neque a
+              iaculis blandit.
+            </p>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    )
+  }