Accordion Component Standardization

[RobertaFricker]

Overview

As a part of the Dev team's efforts to standardize components throughout the website, we need to standardize the accordion component. The JavaScript code needs to be standardized, and some changes with how the JavaScript manipulates the accordion styles needs to be changed. There are also some style issues with the accordion component that need to be fixed. On the 2FA page on the website, the accordion component in the FAQ section stretches farther than the card in the tablet view range.

Action Items

• Take JavaScript code for the accordion out of getting-started.html and 2FA.html, and move the JavaScript code into the elements folder. The final result should be js code in the following file /assets/js/elements/accordion.js
• Once there is an assets/js/elements/accordion.js, you need to include it into the pages/getting-started.html and guide-pages/2FA.html via the script tag like so. <script src="/assets/js/elements/accordion.js" type="module"></script>. You will place it where the previous <script> containing the accordion logic was.
• Move any accordion related style classes from _getting-started-page.scss and 2FA.scss into a new file called _accordion.scss in the elements folder.
• Change the JavaScript code so that it adds a style class called "show" when the accordion is opened, and when closed it removes that class, rather than having the JavaScript code add the styles directly.
• As per comment Develop Updated Getting Started page #1619 (comment), the accordion arrows need to be made pink in all viewport ranges.

Resources/Instructions

Current uses of accordion on website

https://www.hackforla.org/getting-started
https://www.hackforla.org/guide-pages/2FA

Relevant files

https://github.com/hackforla/website/blob/gh-pages/_guide-pages/2FA.html
https://github.com/hackforla/website/blob/gh-pages/pages/getting-started.html
https://github.com/hackforla/website/blob/gh-pages/_sass/components/guide-pages/2FA.scss
https://github.com/hackforla/website/blob/gh-pages/_sass/components/_getting-started-page.scss
Figma Design 2FA (black border)

Below are screenshots of the behavior of the FAQ section when it's resized above 958 left-right:

[abuna1985]

@hackforla/website-merge @JackRichman and I researched Action item #5 (change to pink accordion arrow). The style guide show #fa114f ($color-red) and not pink. It is currently set to #fA114F. I think this may have been a typo/misunderstanding. Recommendation: I think we can disregard this request since the color matches the style guide.

Please see the screenshot below of the Style Guide section of the Figma file:

Click here to see the current Figma Style guide for dropdown arrows

The current color provided within the style guide is #fa114f ($color-red) which is the what it is currently

[abuna1985]

@Aveline-art but its requesting the primary button color...which is red. Which it is.

[abuna1985]

@Aveline-art And the photo I provided above was from the style guide link (Figma design system file) they provided in that issue comment. The color provided is red, not pink.

[ExperimentsInHonesty]

@abuna1985 I recommend removing the last item from this issue, please tell me if you agree.

• Fix the incorrect sizing of the accordion that appears on the 2FA page.
  Because Alyssa is almost done with the design to turn all guide pages into being markdown driven and we will be moving this helpfile to that format.

@alyssabenipayo please review the FAQ accordion shown on the 2FA page and on the getting started page, as we may want to incorporate those into the Guide template. However on the 2FA it seems unwarranted and I could probably put the info into the regular format of the guide.

[abuna1985]

@ExperimentsInHonesty I think we can either:

1. move the last item into a separate issue.
2. Remove it entirely from the 2FA page

It seems like the accordion for the Getting Started Page is nested in a card with 30px of padding. The accordion for 2FA is nested in a section-container class that has a left/right padding of 187px and top/bottom padding of 75px. The CSS for the accordion within 2FA needs to account for this. Also, the Figma design of 2FA shows the border under the text instead of under the title.
Figma Design- Guide Pages - 2FA

Click to see screenshot of the expanded accordion within 2FA Guide pages