Feat: Add accordion for settings form

[joperafe]

PR Checklist

• - Commit messages are descriptive, it will be used in our Release Notes
• - Unit and e2e tests for the changes that have been added (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix (fixes an issue)
• Feature (adds functionality)
• Code style update
• Refactoring (no functional changes)
• Build related changes
• CI related changes
• Documentation changes
• Other... Please describe:

What is the current behavior?

What is the new behavior?

Dropdown should be updated with new accordion style,
figma

Local screenshot:

Does this PR introduce a breaking change?

• Yes
• No

Git Issues

Closes #3786

What happens next?

Thanks for the contribution! We try to make sure all PRs are reviewed ahead of our monthly maintainers call (first Monday of the month)

If the PR is working as intended it'll be merged and included in the next platform release, if not changes will be requested and re-reviewed once updated.

If you need more immediate feedback you can try reaching out on Discord in the Community Platform development channel.

[joperafe]

I'm still wondering about the expected behaviour of the on click of the dropdown.. Should the full header row be clickable or should that only happen on the collapse button itself?

Also, would like some opinion on the flex icon for the password text 💪

I've updated the size of the icon, not sure if that's ok or not. I've checked where it's used and it seems to not have impact.

I'll need to add tests for the changes, will check on that in the coming days.

Thank you,
João Ferreira

[cypress]

onearmy-community-platform    Run #6522

Run Properties:   Failed #6522  •  d6aaa0939f: [#3786] - feat: add accordion for settings form - remove commented code

Project	onearmy-community-platform
Branch Review	pull/3988
Run status	Failed #6522
Run duration	06m 19s
Commit	d6aaa0939f: [#3786] - feat: add accordion for settings form - remove commented code
Committer	Joao Ferreira
View all properties for this run ↗︎

---

Test results
Failures	5
Flaky	1
Pending	0
Skipped	0
Passing	68
View all changes introduced in this branch ↗︎

---

Tests for review

  howto/discussions.spec.ts • 1 failed test • ci-chrome

View Output Video

Test		Artifacts
[Howto.Discussions] > allows authenticated users to contribute to discussions		Test Replay Screenshots Video

  questions/discussions.spec.ts • 1 failed test • ci-chrome

View Output Video

Test		Artifacts
[Questions.Discussions] > allows authenticated users to contribute to discussions		Test Replay Screenshots Video

  SignUp.spec.ts • 1 failed test • ci-chrome

View Output Video

Test		Artifacts
[User sign-up] > [Update existing auth details] > Updates username and password		Test Replay Screenshots Video

  research/discussions.spec.ts • 1 failed test • ci-chrome

View Output Video

Test		Artifacts
[Research.Discussions] > allows authenticated users to contribute to discussions		Test Replay Screenshots Video

  map.spec.ts • 1 failed test • ci-chrome

View Output Video

Test		Artifacts
[Map] > [Shows expected pins]		Test Replay Screenshots Video

  src/integration/research/follow.spec.ts • 1 flaky test • ci-chrome

View Output Video

Test		Artifacts
[Research] > [By Authenticated] > [Follow button]		Test Replay Screenshots Video

[benfurber]

Hey @joperafe, thanks for the contribution.

1. If you check the issue again you'll see I mentioned adding this change as a component in the component library. Have you spotted where the component library is? (Its packages/components/)
2. You can see here there's a build error. If you run yarn build locally does it build OK?