Drop member profile

packages/components/src/Accordion/Accordion.stories.tsx

@@ -0,0 +1,16 @@
+import { Text } from 'theme-ui'
+
+import { Accordion } from './Accordion'
+
+import type { Meta, StoryFn } from '@storybook/react'
+
+export default {
+  title: 'Components/Accordion',
+  component: Accordion,
+} as Meta<typeof Accordion>
+
+export const Default: StoryFn<typeof Accordion> = () => (
+  <Accordion title="Default">
+    <Text>Default</Text>
+  </Accordion>
+)

packages/components/src/Accordion/Accordion.test.tsx

@@ -0,0 +1,16 @@
+import '@testing-library/jest-dom/vitest'
+
+import { describe, expect, it } from 'vitest'
+
+import { render } from '../test/utils'
+import { Default } from './Accordion.stories'
+
+import type { IProps } from './Accordion'
+
+describe('Accordion', () => {
+  it('validates the component behaviour', () => {
+    const { getByText } = render(<Default {...(Default.args as IProps)} />)
+
+    expect(getByText('Accordion')).toBeInTheDocument()
+  })
+})

packages/components/src/Accordion/Accordion.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react'
+import { Flex, Heading, Text } from 'theme-ui'
+
+import { Icon } from '../Icon/Icon'
+
+import type { ThemeUIStyleObject } from 'theme-ui'
+
+export interface IProps {
+  children: React.ReactNode
+  sx?: ThemeUIStyleObject | undefined
+  title: string
+  subtitle?: string
+}
+
+export const Accordion = (props: IProps) => {
+  const [isExpanded, setIsExpanded] = useState<boolean>(false)
+  const { children, sx, title, subtitle } = props
+
+  return (
+    <Flex
+      data-cy="accordionContainer"
+      sx={{ flexDirection: 'column', gap: 2, cursor: 'pointer', ...sx }}
+    >
+      <Flex
+        sx={{
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }}
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        <Heading as="h3" variant="small">
+          {title}
+        </Heading>
+        <Icon glyph={isExpanded ? 'arrow-full-up' : 'arrow-full-down'} />
+      </Flex>
+
+      {subtitle != undefined && (
+        <Text sx={{ fontSize: 1, color: 'gray' }}>{subtitle}</Text>
+      )}
+      {isExpanded && children}
+    </Flex>
+  )
+}

packages/components/src/index.ts

@@ -76,3 +76,4 @@ export { VideoPlayer } from './VideoPlayer/VideoPlayer'
 export { CommentAvatar } from './CommentAvatar/CommentAvatar'
 export type { availableGlyphs } from './Icon/types'
 export type { ITab } from './SettingsFormWrapper/SettingsFormTab'
+export { Accordion } from './Accordion/Accordion'

packages/cypress/src/integration/SignUp.spec.ts

@@ -80,6 +80,7 @@ describe('[User sign-up]', () => {
       cy.get('[data-cy="tab-Account"]').click()
 
       cy.step('Update Email')
+      cy.get('[data-cy=changeEmailAccordion]').click()
       cy.get('[data-cy="changeEmailButton"]').click()
       cy.get('[data-cy="changeEmailForm"]')
         .contains(`Current email address: ${email}`)