Add accordion element of the design system

cypress/component/ui/accordion/Accordion.spec.tsx

@@ -0,0 +1,79 @@
+import { Accordion } from '../../../../src/sections/ui/accordion/Accordion'
+import { ThemeProvider } from '../../../../src/sections/ui/theme/ThemeProvider'
+
+//TODO: remove ThemeProvider and replace with customMount()
+
+describe('Accordion', () => {
+  const section1Header = 'Section 1'
+  const section1Body = 'Content 1'
+  const section2Header = 'Section 2'
+  const section2Body = 'Content 2'
+  it('renders an accordion with defaultActiveKey prop and children', () => {
+    cy.mount(
+      <ThemeProvider>
+        <Accordion defaultActiveKey="1">
+          <Accordion.Item eventKey="1">
+            <Accordion.Header>{section1Header}</Accordion.Header>
+            <Accordion.Body>{section1Body}</Accordion.Body>
+          </Accordion.Item>
+          <Accordion.Item eventKey="2">
+            <Accordion.Header>{section2Header}</Accordion.Header>
+            <Accordion.Body>{section2Body}</Accordion.Body>
+          </Accordion.Item>
+        </Accordion>
+      </ThemeProvider>
+    )
+
+    cy.findByText(section1Header).should('be.visible')
+    cy.findByText(section1Body).should('be.visible')
+    cy.findByText(section2Header).should('be.visible')
+    cy.findByText(section2Body).should('not.be.visible')
+
+    cy.findByText(section1Header).click()
+    cy.findByText(section1Body).should('not.be.visible')
+  })
+  it('renders fully collapsed without a defaultActiveKey', () => {
+    cy.mount(
+      <ThemeProvider>
+        <Accordion alwaysOpen={true}>
+          <Accordion.Item eventKey="1">
+            <Accordion.Header>{section1Header}</Accordion.Header>
+            <Accordion.Body>{section1Body}</Accordion.Body>
+          </Accordion.Item>
+          <Accordion.Item eventKey="2">
+            <Accordion.Header>{section2Header}</Accordion.Header>
+            <Accordion.Body>{section2Body}</Accordion.Body>
+          </Accordion.Item>
+        </Accordion>
+      </ThemeProvider>
+    )
+    cy.findByText(section1Header).should('be.visible')
+    cy.findByText(section1Body).should('not.be.visible')
+    cy.findByText(section2Header).should('be.visible')
+    cy.findByText(section2Body).should('not.be.visible')
+  })
+  it('renders the always open tab correctly', () => {
+    cy.mount(
+      <ThemeProvider>
+        <Accordion defaultActiveKey={['1']} alwaysOpen={true}>
+          <Accordion.Item eventKey="1">
+            <Accordion.Header>{section1Header}</Accordion.Header>
+            <Accordion.Body>{section1Body}</Accordion.Body>
+          </Accordion.Item>
+          <Accordion.Item eventKey="2">
+            <Accordion.Header>{section2Header}</Accordion.Header>
+            <Accordion.Body>{section2Body}</Accordion.Body>
+          </Accordion.Item>
+        </Accordion>
+      </ThemeProvider>
+    )
+    cy.findByText(section1Header).should('be.visible')
+    cy.findByText(section1Body).should('be.visible')
+    cy.findByText(section2Header).should('be.visible')
+    cy.findByText(section2Body).should('not.be.visible')
+
+    cy.findByText(section2Header).click()
+    cy.findByText(section1Body).should('be.visible')
+    cy.findByText(section2Body).should('be.visible')
+  })
+})

src/sections/ui/accordion/Accordion.tsx

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react'
+import { Accordion as AccordionBS } from 'react-bootstrap'
+import { AccordionItem } from './AccordionItem'
+import { AccordionBody } from './AccordionBody'
+import { AccordionHeader } from './AccordionHeader'
+
+interface AccordionProps {
+  defaultActiveKey?: string[] | string
+  alwaysOpen?: boolean
+  children: ReactNode
+}
+
+function Accordion({ defaultActiveKey, children, alwaysOpen = false }: AccordionProps) {
+  return (
+    <AccordionBS defaultActiveKey={defaultActiveKey} alwaysOpen={alwaysOpen}>
+      {children}
+    </AccordionBS>
+  )
+}
+
+Accordion.Item = AccordionItem
+Accordion.Body = AccordionBody
+Accordion.Header = AccordionHeader
+
+export { Accordion }

src/sections/ui/accordion/AccordionBody.tsx

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react'
+import { Accordion as AccordionBS } from 'react-bootstrap'
+
+interface AccordionBodyProps {
+  children: ReactNode
+}
+
+export function AccordionBody({ children }: AccordionBodyProps) {
+  return <AccordionBS.Body>{children}</AccordionBS.Body>
+}

src/sections/ui/accordion/AccordionHeader.tsx

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react'
+import { Accordion as AccordionBS } from 'react-bootstrap'
+
+interface AccordionHeaderProps {
+  children: ReactNode
+}
+
+export function AccordionHeader({ children }: AccordionHeaderProps) {
+  return <AccordionBS.Header>{children}</AccordionBS.Header>
+}

src/sections/ui/accordion/AccordionItem.tsx

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react'
+import { Accordion as AccordionBS } from 'react-bootstrap'
+
+interface AccordionItemProps {
+  eventKey: string
+  children: ReactNode
+}
+
+export function AccordionItem({ eventKey, children }: AccordionItemProps) {
+  return <AccordionBS.Item eventKey={eventKey}>{children}</AccordionBS.Item>
+}

src/sections/ui/assets/styles/bootstrap-customized.scss

@@ -54,6 +54,9 @@ $link-hover-color: $dv-link-hover-color;
 // Badge
 @import "bootstrap/scss/badge";
 
+// Accordion
+@import "bootstrap/scss/accordion";
+
 // Modal
 @import "bootstrap/scss/modal";
 @import "bootstrap/scss/close";
@@ -69,8 +72,6 @@ $breadcrumb-divider: ">";
 // Alert
 @import "bootstrap/scss/alert";
 
-// Close button for Alert
-@import "bootstrap/scss/close";
 
 // Navbar
 

src/stories/ui/accordion/Accordion.stories.tsx

@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Accordion } from '../../../sections/ui/accordion/Accordion'
+/**
+ * ## Description
+ * The Accordion is a list of collapsable items.
+ *
+ * ## Usage guidelines
+ *
+ * - To display the Accordion fully collapsed, don't set the defaultActiveKey
+ * - When using alwaysOpen=true, the defaultActiveKey must be set in an array object ( for example: {['0']} )
+ *
+ */
+
+const meta: Meta<typeof Accordion> = {
+  title: 'UI/Accordion',
+  component: Accordion,
+  tags: ['autodocs']
+}
+
+export default meta
+type Story = StoryObj<typeof Accordion>
+
+export const Default: Story = {
+  render: () => (
+    <Accordion defaultActiveKey="0">
+      <Accordion.Item eventKey="0">
+        <Accordion.Header>Accordion Item #1</Accordion.Header>
+        <Accordion.Body>
+          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.Body>
+      </Accordion.Item>
+      <Accordion.Item eventKey="1">
+        <Accordion.Header>Accordion Item #2</Accordion.Header>
+        <Accordion.Body>
+          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.Body>
+      </Accordion.Item>
+    </Accordion>
+  )
+}
+export const FullyCollapsed: Story = {
+  render: () => (
+    <Accordion alwaysOpen={true}>
+      <Accordion.Item eventKey="0">
+        <Accordion.Header>Accordion Item #1</Accordion.Header>
+        <Accordion.Body>
+          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.Body>
+      </Accordion.Item>
+      <Accordion.Item eventKey="1">
+        <Accordion.Header>Accordion Item #2</Accordion.Header>
+        <Accordion.Body>
+          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.Body>
+      </Accordion.Item>
+    </Accordion>
+  )
+}
+export const AlwaysOpen: Story = {
+  render: () => (
+    <Accordion defaultActiveKey={['0']} alwaysOpen={true}>
+      <Accordion.Item eventKey="0">
+        <Accordion.Header>Accordion Item #1</Accordion.Header>
+        <Accordion.Body>
+          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.Body>
+      </Accordion.Item>
+      <Accordion.Item eventKey="1">
+        <Accordion.Header>Accordion Item #2</Accordion.Header>
+        <Accordion.Body>
+          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.Body>
+      </Accordion.Item>
+    </Accordion>
+  )
+}

tests/sections/ui/accordion/Accordion.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react'
+import { Accordion } from '../../../../src/sections/ui/accordion/Accordion'
+
+describe('Accordion', () => {
+  test('renders an accordion with defaultActiveKey prop and children', () => {
+    render(
+      <Accordion defaultActiveKey="1">
+        <Accordion.Item eventKey="1">
+          <Accordion.Header>Section 1</Accordion.Header>
+          <Accordion.Body>Content 1</Accordion.Body>
+        </Accordion.Item>
+        <Accordion.Item eventKey="2">
+          <Accordion.Header>Section 2</Accordion.Header>
+          <Accordion.Body>Content 2</Accordion.Body>
+        </Accordion.Item>
+      </Accordion>
+    )
+
+    const section1Header = screen.getByText('Section 1')
+    const section1Body = screen.getByText('Content 1')
+
+    const section2Header = screen.getByText('Section 2')
+    const section2Body = screen.getByText('Content 2')
+
+    expect(section1Header).toBeInTheDocument()
+    expect(section1Body).toBeInTheDocument()
+    expect(section2Header).toBeInTheDocument()
+    expect(section2Body).toBeInTheDocument()
+  })
+})

tests/sections/ui/accordion/AccordionItem.test.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react'
+import { Accordion } from '../../../../src/sections/ui/accordion/Accordion'
+
+describe('AccordionItem', () => {
+  test('renders an accordion item with eventKey and children', () => {
+    render(
+      <Accordion.Item eventKey="1">
+        <Accordion.Header>Section 1</Accordion.Header>
+        <Accordion.Body>Content 1</Accordion.Body>
+      </Accordion.Item>
+    )
+
+    const sectionHeader = screen.getByText('Section 1')
+    const sectionBody = screen.getByText('Content 1')
+
+    expect(sectionHeader).toBeInTheDocument()
+    expect(sectionBody).toBeInTheDocument()
+  })
+})