Accordion component

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="Accordion Title">
+    <Text>Now you see me!</Text>
+  </Accordion>
+)

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

@@ -0,0 +1,21 @@
+import '@testing-library/jest-dom/vitest'
+
+import { screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { render } from '../test/utils'
+import { Default } from './Accordion.stories'
+
+import type { IProps } from './Accordion'
+
+describe('Accordion', () => {
+  it('displays the accordion body on click', () => {
+    const { getByText } = render(<Default {...(Default.args as IProps)} />)
+    const accordionTitle = getByText('Accordion Title')
+    expect(screen.queryByText('Now you see me!')).not.toBeInTheDocument()
+
+    accordionTitle.click()
+
+    expect(getByText('Now you see me!')).toBeInTheDocument()
+  })
+})

packages/components/src/Accordion/Accordion.tsx

@@ -0,0 +1,49 @@
+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 }}
+      onClick={() => {
+        if (!isExpanded) {
+          setIsExpanded(true)
+        }
+      }}
+    >
+      <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

@@ -1,3 +1,4 @@
+export { Accordion } from './Accordion/Accordion'
 export { ArticleCallToAction } from './ArticleCallToAction/ArticleCallToAction'
 export { Banner } from './Banner/Banner'
 export { BlockedRoute } from './BlockedRoute/BlockedRoute'
@@ -15,6 +16,7 @@ export { ContentStatistics } from './ContentStatistics/ContentStatistics'
 export { CommentItem } from './CommentItem/CommentItem'
 export { CommentList } from './CommentList/CommentList'
 export { CreateReply } from './CreateReply/CreateReply'
+export { CommentAvatar } from './CommentAvatar/CommentAvatar'
 export { ConfirmModal } from './ConfirmModal/ConfirmModal'
 export { CreateComment } from './CreateComment/CreateComment'
 export { DiscussionContainer } from './DiscussionContainer/DiscussionContainer'
@@ -31,10 +33,10 @@ export { ElWithBeforeIcon } from './ElWithBeforeIcon/ElWithBeforeIcon'
 export { ExternalLink } from './ExternalLink/ExternalLink'
 export { FieldInput } from './FieldInput/FieldInput'
 export { FieldTextarea } from './FieldTextarea/FieldTextarea'
-export { Guidelines } from './Guidelines/Guidelines'
 export { FlagIcon, FlagIconLibrary, FlagIconEvents } from './FlagIcon/FlagIcon'
 export { FollowButton } from './FollowButton/FollowButton'
 export { GlobalStyles } from './GlobalStyles/GlobalStyles'
+export { Guidelines } from './Guidelines/Guidelines'
 export { HeroBanner } from './HeroBanner/HeroBanner'
 export { Icon } from './Icon/Icon'
 export { IconCountWithTooltip } from './IconCountWithTooltip/IconCountWithTooltip'
@@ -73,6 +75,5 @@ export { Username } from './Username/Username'
 export { UserStatistics } from './UserStatistics/UserStatistics'
 export { VerticalList } from './VerticalList/VerticalList.client'
 export { VideoPlayer } from './VideoPlayer/VideoPlayer'
-export { CommentAvatar } from './CommentAvatar/CommentAvatar'
 export type { availableGlyphs } from './Icon/types'
 export type { ITab } from './SettingsFormWrapper/SettingsFormTab'

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

@@ -80,8 +80,8 @@ describe('[User sign-up]', () => {
       cy.get('[data-cy="tab-Account"]').click()
 
       cy.step('Update Email')
-      cy.get('[data-cy="changeEmailButton"]').click()
-      cy.get('[data-cy="changeEmailForm"]')
+      cy.get('[data-cy="accordionContainer"]').click({ multiple: true })
+      cy.get('[data-cy="changeEmailContainer"]')
         .contains(`Current email address: ${email}`)
         .should('be.visible')
       cy.get('[data-cy="newEmail"]').clear().type(newEmail)
@@ -92,7 +92,7 @@ describe('[User sign-up]', () => {
         .should('be.visible')
 
       cy.step('Update Password')
-      cy.get('[data-cy="changePasswordButton"]').click()
+      cy.get('[data-cy="accordionContainer"]').click({ multiple: true })
       cy.get('[data-cy="oldPassword"]').clear().type(password)
       cy.get('[data-cy="newPassword"]').clear().type(newPassword)
       cy.get('[data-cy="repeatNewPassword"]').clear().type(newPassword)

src/pages/UserSettings/SettingsPageAccount.tsx

@@ -31,8 +31,8 @@ export const SettingsPageAccount = observer(() => {
       </Flex>
 
       <PatreonIntegration user={userStore.activeUser} />
-      <ChangeEmailForm />
       <ChangePasswordForm />
+      <ChangeEmailForm />
 
       <Text variant="body">
         {title}

src/pages/UserSettings/content/sections/ChangeEmail.form.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react'
 import { Field, Form } from 'react-final-form'
-import { Button, FieldInput, Icon } from 'oa-components'
+import { Accordion, Button, FieldInput } from 'oa-components'
 import { PasswordField } from 'src/common/Form/PasswordField'
 import { useCommonStores } from 'src/common/hooks/useCommonStores'
 import { FormFieldWrapper } from 'src/pages/common/FormFieldWrapper'
 import { UserContactError } from 'src/pages/User/contact/UserContactError'
-import { buttons, fields, headings } from 'src/pages/UserSettings/labels'
-import { Flex, Heading, Text } from 'theme-ui'
+import { buttons, fields } from 'src/pages/UserSettings/labels'
+import { Flex } from 'theme-ui'
 
 import type { SubmitResults } from 'src/pages/User/contact/UserContactError'
 
@@ -16,13 +16,11 @@ interface IFormValues {
 }
 
 export const ChangeEmailForm = () => {
-  const [isExpanded, setIsExpanded] = useState<boolean>(false)
   const [submitResults, setSubmitResults] = useState<SubmitResults | null>(null)
   const [currentEmail, setCurrentEmail] = useState<string | null>(null)
 
   const { userStore } = useCommonStores().stores
   const formId = 'changeEmail'
-  const glyph = isExpanded ? 'arrow-full-up' : 'arrow-full-down'
 
   useEffect(() => {
     getUserEmail()
@@ -36,7 +34,6 @@ export const ChangeEmailForm = () => {
         type: 'success',
         message: `Email changed to ${newEmail}. You've been sent two emails now(!) One to your old email address to check this was you and the other to your new address to verify it.`,
       })
-      setIsExpanded(false)
       getUserEmail()
     } catch (error) {
       setSubmitResults({ type: 'error', message: error.message })
@@ -54,8 +51,10 @@ export const ChangeEmailForm = () => {
       sx={{ flexDirection: 'column', gap: 2 }}
     >
       <UserContactError submitResults={submitResults} />
-
-      {isExpanded && currentEmail && (
+      <Accordion
+        title="Change Email"
+        subtitle={`${fields.email.title}: ${currentEmail}`}
+      >
         <Form
           onSubmit={onSubmit}
           id={formId}
@@ -69,14 +68,6 @@ export const ChangeEmailForm = () => {
                 data-cy="changeEmailForm"
                 sx={{ flexDirection: 'column', gap: 2 }}
               >
-                <Heading as="h3" variant="small">
-                  {headings.changeEmail}
-                </Heading>
-
-                <Text sx={{ fontSize: 1 }}>
-                  {fields.email.title}: <strong>{currentEmail}</strong>
-                </Text>
-
                 <FormFieldWrapper
                   text={fields.newEmail.title}
                   htmlFor="newEmail"
@@ -124,22 +115,7 @@ export const ChangeEmailForm = () => {
             )
           }}
         />
-      )}
-
-      <Button
-        type="button"
-        data-cy="changeEmailButton"
-        onClick={() => setIsExpanded(!isExpanded)}
-        variant="secondary"
-        sx={{
-          alignSelf: 'flex-start',
-        }}
-      >
-        <Flex sx={{ gap: 2 }}>
-          <Text>{buttons.changeEmail}</Text>
-          <Icon glyph={glyph} />
-        </Flex>
-      </Button>
+      </Accordion>
     </Flex>
   )
 }

src/pages/UserSettings/content/sections/ChangePassword.form.tsx

@@ -1,12 +1,12 @@
 import { useState } from 'react'
 import { Form } from 'react-final-form'
-import { Button, FieldInput, Icon } from 'oa-components'
+import { Accordion, Button, FieldInput } from 'oa-components'
 import { PasswordField } from 'src/common/Form/PasswordField'
 import { useCommonStores } from 'src/common/hooks/useCommonStores'
 import { FormFieldWrapper } from 'src/pages/common/FormFieldWrapper'
 import { UserContactError } from 'src/pages/User/contact/UserContactError'
-import { buttons, fields, headings } from 'src/pages/UserSettings/labels'
-import { Flex, Heading, Text } from 'theme-ui'
+import { buttons, fields } from 'src/pages/UserSettings/labels'
+import { Flex } from 'theme-ui'
 
 import type { SubmitResults } from 'src/pages/User/contact/UserContactError'
 
@@ -17,12 +17,10 @@ interface IFormValues {
 }
 
 export const ChangePasswordForm = () => {
-  const [isExpanded, setIsExpanded] = useState<boolean>(false)
   const [submitResults, setSubmitResults] = useState<SubmitResults | null>(null)
 
   const { userStore } = useCommonStores().stores
   const formId = 'changePassword'
-  const glyph = isExpanded ? 'arrow-full-up' : 'arrow-full-down'
 
   const onSubmit = async (values: IFormValues) => {
     const { oldPassword, newPassword } = values
@@ -33,7 +31,6 @@ export const ChangePasswordForm = () => {
         type: 'success',
         message: `Password changed.`,
       })
-      setIsExpanded(false)
     } catch (error) {
       setSubmitResults({ type: 'error', message: error.message })
     }
@@ -46,7 +43,10 @@ export const ChangePasswordForm = () => {
     >
       <UserContactError submitResults={submitResults} />
 
-      {isExpanded && (
+      <Accordion
+        title="Change Password"
+        subtitle="Here you can change your password to a stronger one."
+      >
         <Form
           onSubmit={onSubmit}
           id={formId}
@@ -64,10 +64,6 @@ export const ChangePasswordForm = () => {
                 data-cy="changePasswordForm"
                 sx={{ flexDirection: 'column', gap: 1 }}
               >
-                <Heading as="h3" variant="small">
-                  {headings.changePassword}
-                </Heading>
-
                 <FormFieldWrapper
                   text={fields.oldPassword.title}
                   htmlFor="oldPassword"
@@ -129,22 +125,7 @@ export const ChangePasswordForm = () => {
             )
           }}
         />
-      )}
-
-      <Button
-        type="button"
-        data-cy="changePasswordButton"
-        onClick={() => setIsExpanded(!isExpanded)}
-        variant="secondary"
-        sx={{
-          alignSelf: 'flex-start',
-        }}
-      >
-        <Flex sx={{ gap: 2 }}>
-          <Text>{buttons.changePassword}</Text>
-          <Icon glyph={glyph} />
-        </Flex>
-      </Button>
+      </Accordion>
     </Flex>
   )
 }