@dhasdk/simple-ui 1.0.7 → 1.0.8

package/{index.d.ts → src/index.ts}

@@ -1,3 +1,4 @@
+import './styles.css';
 export { Accordion, AccordionParent } from './lib/Accordion';
 export type { AccordionProps, AccordionParentProps } from './lib/Accordion';
 export { AppointmentPicker } from './lib/AppointmentPicker';
@@ -12,19 +13,19 @@ export { Card } from './lib/Card';
 export { CharacterCounter } from './lib/CharacterCounter';
 export type { CharacterCounterProps } from './lib/CharacterCounter';
 export { CheckBox, CheckBoxGroup } from './lib/CheckBox';
-export type { CheckBoxProps, CheckBoxGroupProps } from './lib/CheckBox';
+export type { CheckBoxProps, CheckBoxGroupProps } from './lib/CheckBox'
 export { DatePicker } from './lib/DatePicker';
 export type { DatePickerProps } from './lib/DatePicker';
 export { IconPosition } from './lib/Tabs';
 export { Input } from './lib/Input';
-export { List, ListItem } from './lib/List';
+export { List, ListItem } from  './lib/List';
 export { Modal } from './lib/Modal';
 export { Pill } from './lib/Pill';
 export type { PillProps } from './lib/Pill';
 export { ProgressBar } from './lib/ProgressBar';
 export type { ProgressBarProps } from './lib/ProgressBar';
-export { RadioGroup } from './lib/RadioGroup';
-export type { RadioOption } from './lib/RadioGroup';
+export { RadioGroup } from  './lib/RadioGroup';
+export type { RadioOption } from './lib/RadioGroup'
 export { Search } from './lib/Search';
 export type { DataSearchResults, SearchDataItem, SearchProps } from './lib/Search';
 export { SectionHeader } from './lib/SectionHeader';
@@ -32,7 +33,7 @@ export type { SectionHeaderProps } from './lib/SectionHeader';
 export { Select } from './lib/Select';
 export type { SelectProps } from './lib/Select';
 export { Shield } from './lib/Shield';
-export type { ShieldProps } from './lib/Shield';
+export type { ShieldProps } from './lib/Shield'
 export { SideBarNav } from './lib/SideBarNav';
 export { Skeleton, SkelCircle, SkelLine, SkelRow, SkelSection } from './lib/Skeleton';
 export type { SkeletonProps, SkelProps } from './lib/Skeleton';
@@ -46,3 +47,10 @@ export { Toggle } from './lib/Toggle';
 export type { ToggleProps } from './lib/Toggle';
 export { Tooltip, TooltipContent } from './lib/Tooltip';
 export type { TooltipProps, TooltipContentProps } from './lib/Tooltip';
+
+// export * from './lib/Card';
+// export * from './lib/Badge';
+// export * from './lib/Button';
+// export * from './lib/Input';
+// export * from './lib/Select';
+// export * from './lib/Toggle';

package/src/lib/Accordian--Accordian.stories.tsx

@@ -0,0 +1,312 @@
+// Badge.stories.tsx
+
+import { Meta, StoryContext} from '@storybook/react';
+import { expect, fn, userEvent, within, waitFor } from 'storybook/test';
+import { screen } from 'storybook/test'
+import { Accordion, AccordionProps, AccordionParent, AccordionParentProps } from './Accordion';
+import open from '../assets/img/open.svg';
+import close from '../assets/img/close.svg';
+
+export default {
+  title: 'Components/Accordion',
+  component: Accordion,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'blank', 'outline']
+      }
+  },
+  parameters: {
+    backgrounds: { default: 'light' },
+    // viewport: { defaultViewport: 'full' },
+    // viewport: { defaultViewport: 'full' },
+
+  },
+} as Meta<typeof Accordion>;
+
+// Default Accordion story
+export const AccordionDefault = ({variant, label, children}: AccordionProps) => {
+
+  return (
+    <Accordion variant='default' label='Content Example'>
+      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.
+    </Accordion>
+  )
+};
+
+// Default Accordion story
+export const useBackgroundFalse = ({variant, label, children}: AccordionProps) => {
+
+  return (
+    <Accordion variant='default' label='Content Example' useBackground={false}>
+      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.
+    </Accordion>
+  )
+};
+
+// Default Accordion story
+export const hrFalse = ({variant, label, children}: AccordionProps) => {
+
+  return (
+    <Accordion variant='default' label='Content Example' hr={false}>
+      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.
+    </Accordion>
+  )
+};
+
+// Default Accordion story
+export const AccordionParentDefault = ({variant, label, children}: AccordionProps) => {
+
+  return (
+    <AccordionParent variant='default' chevron
+      classNameChildHeading='bg-blue-300'
+      classNameChildContent='bg-blue-100 ps-6 pt-2'
+      hr = {false}
+      >
+      <Accordion label='Content Example'>
+        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.
+      </Accordion>
+      <Accordion label='Second Example'>
+        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.
+      </Accordion>
+    </AccordionParent>
+  )
+};
+
+// play:async ({ canvasElement }: StoryContext) => {
+AccordionParentDefault.play = async ({ canvasElement }: StoryContext) => {
+  const canvas = within(canvasElement);
+
+  // Find both accordion buttons
+  const firstAccordionButton = await canvas.findByRole('button', { name: /content example/i });
+  const secondAccordionButton = await canvas.findByRole('button', { name: /second example/i });
+
+  // Click the first accordion button to open it
+  await userEvent.click(firstAccordionButton);
+  expect(firstAccordionButton).toHaveAttribute('aria-expanded', 'true');
+
+  // Click the second accordion button to open it
+  await userEvent.click(secondAccordionButton);
+
+  // Verify the first accordion is now closed
+  expect(firstAccordionButton).toHaveAttribute('aria-expanded', 'false');
+
+  // Verify the second accordion is open
+  expect(secondAccordionButton).toHaveAttribute('aria-expanded', 'true');
+
+
+  // ✅ Keyboard accessibility tests
+
+  // Focus the first accordion button
+  firstAccordionButton.focus();
+  expect(firstAccordionButton).toHaveFocus();
+
+  // Press "Enter" to toggle the first accordion
+  await userEvent.keyboard('{Enter}');
+
+  // pause 500ms
+  await new Promise((resolve) => setTimeout(resolve, 500));
+
+  expect(firstAccordionButton).toHaveAttribute('aria-expanded', 'true');
+
+  // pause 500ms
+  await new Promise((resolve) => setTimeout(resolve, 500));
+
+  // Press "Space" to toggle the first accordion
+  await userEvent.keyboard(' ');    // TODO - change back to 'Space'
+
+  // pause 1500ms
+  await new Promise((resolve) => setTimeout(resolve, 1500));
+
+  expect(firstAccordionButton).toHaveAttribute('aria-expanded', 'false');
+
+  // Press "Enter" again to re-open the first accordion
+  await userEvent.keyboard('{Enter}');
+
+  // pause 1500ms
+  await new Promise((resolve) => setTimeout(resolve, 1500));
+
+  // pause 500ms
+  await new Promise((resolve) => setTimeout(resolve, 500));
+
+  expect(firstAccordionButton).toHaveAttribute('aria-expanded', 'true');
+
+  // Verify the second accordion is closed (closes when 1st one opened)
+  expect(secondAccordionButton).toHaveAttribute('aria-expanded', 'false');
+
+};
+
+// Accordion Chevron False story
+export const AccordionChevronTrue = ({variant, label, children}: AccordionProps) => {
+
+  return (
+    // <div className="w-full border-4 border-red-500">
+    <Accordion variant='default' label='Content Example' chevron={true}>
+      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.
+    </Accordion>
+    // </div>
+  )
+};
+
+
+// Accordion Custom Icons story
+export const AccordionCustomIcons = ({variant, label, children}: AccordionProps) => {
+
+  return (
+    // <div className="w-full border-4 border-red-500">
+    <Accordion variant='default' label='Content Example'
+      iconAccordionOpened={<img src={close} alt="Close Icon" />}
+      iconAccordionClosed={<img src={open} alt="Open Icon" />}
+      >
+      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.
+    </Accordion>
+    // </div>
+  )
+};
+
+
+// Default Accordion story
+export const AccordionReturnChild = ({variant, label, children}: AccordionProps) => {
+
+  return (
+    <AccordionParent variant='default' chevron
+      classNameChildHeading='bg-blue-300'
+      classNameChildContent='bg-blue-100 ps-6 pt-2'
+      >
+      <Accordion label='Content Example'>
+        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.
+      </Accordion>
+      Return child test
+      <Accordion label='Second Example'>
+        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.
+      </Accordion>
+    </AccordionParent>
+  )
+};
+
+// Default Accordion story
+export const AccordionPlusMinus = ({variant, label, children}: AccordionProps) => {
+
+  return (
+    <AccordionParent variant='default' chevron={false}
+      classNameChildHeading='bg-blue-300'
+      classNameChildContent='bg-blue-100 ps-6 pt-2'
+      >
+      <Accordion label='Content Example'>
+        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.
+      </Accordion>
+      <Accordion label='Second Example'>
+        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.
+      </Accordion>
+    </AccordionParent>
+  )
+};
+
+
+// Custom Classes Accordion story
+export const CustomClassesAccordion = ({variant, label, children}: AccordionProps) => {
+
+  return (
+    // <div className="w-full border-4 border-red-500">
+    <Accordion variant='default' label='Content Example'
+      classNameHeading='font-bold bg-slate-800 text-white border-b-0'
+      classNameContent='text-[0.9em] bg-slate-800 text-white font-sans'
+    >
+      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.
+    </Accordion>
+    // </div>
+  )
+};
+
+// Multi Accordion Rounded Default story
+export const MultiAccordionNoParent = ({variant, label, children}: AccordionProps) => {
+
+  return (
+    <>
+      <Accordion label='Content Example'>
+        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.
+      </Accordion>
+      <Accordion label='Second Example'>
+        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.
+      </Accordion>
+      <Accordion label='Third Example'>
+        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.
+      </Accordion>
+    </>
+  )
+};
+
+// Multi Accordion Default story
+export const MultiAccordionDefault = ({variant, label, children}: AccordionProps) => {
+
+  return (
+
+    <AccordionParent variant='default'>
+      <Accordion label='Content Example'>
+        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.
+      </Accordion>
+      <Accordion label='Second Example'>
+        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.
+      </Accordion>
+      <Accordion label='Third Example'>
+        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.
+      </Accordion>
+    </AccordionParent>
+  )
+};
+
+// Multi Accordion Rounded Default story
+export const MultiSingleOpenFalse = ({variant, label, children}: AccordionProps) => {
+
+  return (
+
+    <AccordionParent variant='default' className="" singleOpen={false}>
+      <Accordion label='Content Example'>
+        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.
+      </Accordion>
+      <Accordion label='Second Example'>
+        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.
+      </Accordion>
+      <Accordion label='Third Example'>
+        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.
+      </Accordion>
+    </AccordionParent>
+  )
+};
+
+// Multi Accordion Rounded Default story
+export const SingleUseBackgroundHr = ({variant, label, children}: AccordionProps) => {
+
+  return (
+
+    <AccordionParent variant='default' className="" singleOpen={false}>
+      <Accordion label='Content Example'>
+        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.
+      </Accordion>
+      <Accordion label='hr = {false}' hr={false}>
+        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.
+      </Accordion>
+      <Accordion label='useBackground = {false}' useBackground={false}>
+        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.
+      </Accordion>
+    </AccordionParent>
+  )
+};
+
+// Multi Accordion Rounded Default story
+export const MultiAccordionCustomClasses = ({variant, label, children}: AccordionProps) => {
+
+  return (
+    <AccordionParent variant='default' classNameChildHeading="bg-slate-500 text-white" classNameChildContent='font-bold' hr={false}>
+      <Accordion label='Content Example' classNameHeading="bg-slate-300 text-black" classNameContent='font-normal'>
+        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.
+      </Accordion>
+      <Accordion label='Second Example'>
+        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.
+      </Accordion>
+      <Accordion label='Third Example'>
+        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.
+      </Accordion>
+    </AccordionParent>
+  )
+};