Accordion Component Standardization

RobertaFricker commented 3 years ago

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

[x] 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
[x] 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.
[x] 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.
[x] 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.
[x] ~~As per comment https://github.com/hackforla/website/issues/1619#issuecomment-897769443, 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:

akibrhast commented 3 years ago

Roberta's Comment Danielle's Comment

@daniellex0 @RobertaFricker Though I'm not sure I completely followed Roberta's comment, from what I saw, the min-width is creating an issue and I don't think min-width needs to be there at all—nothing else changed at other screen sizes when min-with was taken out.

Note: I did not take into account any other pages, as I worked it out via dev tools on the live site, and not through a locally hosted site.

Live site _with_ min-width: 835px
https://user-images.githubusercontent.com/67438372/114829069-7f795e80-9d7f-11eb-8b66-51888b7118d3.mov

Live site _without_ min-width
https://user-images.githubusercontent.com/67438372/114829129-8d2ee400-9d7f-11eb-8e20-6cbc53c40991.mov

@erikaBell - https://github.com/hackforla/website/pull/1406#issuecomment-820183092

akibrhast commented 3 years ago

I believe @erikaBell is correct that min-width: 835px is not necessary. However, this specific styling is coming from _getting-started-page.scss, and not from 2FA.scss. I am not 100% sure if removing this min-width would mess anything up from the getting-started page - @averdin2 https://github.com/hackforla/website/pull/1406#issuecomment-820685412

akibrhast commented 3 years ago

@averdin2 @erikaBell Really sorry about the delay- hmmm this is so strange, earlier when I was checking and disabled min-width the accordion seemed to get messed up, but now that I'm testing it everything seems fine... So do you think min-width is not serving any purpose at all?

I will say, it does seem strange that it's min-width. If anything, I'd expect a max-width.. - @daniellex0 https://github.com/hackforla/website/pull/1406#issuecomment-821943465

akibrhast commented 3 years ago

The comments above are a continuation of the discussion regarding an issue found during this PR between @averdin2 , @erikaBell , @daniellex0 -> https://github.com/hackforla/website/pull/1406

ExperimentsInHonesty commented 3 years ago

This issue needs clearer direction. It has two labels that are conflicting (design and front end).

averdin2 commented 3 years ago

@ExperimentsInHonesty I am not sure why a design label was put on this in the first place. This is mostly a front end issue fix. I will take off the design label.

averdin2 commented 3 years ago

@averdin2 Make a new comment about making the arrows pink from issue #1619

sheltoG commented 3 years ago

@averdin2 please rewrite the overview to be a user story.

We need to do x for y reason

JackRichman commented 3 years ago

@averdin2 Bonnie said she will rewrite this issue so that I can start working on it now.

abuna1985 commented 3 years ago

@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

Aveline-art commented 3 years ago

@abuna1985 the pink arrows come from this design requirement.

abuna1985 commented 3 years ago

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

abuna1985 commented 3 years ago

@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.

Aveline-art commented 3 years ago

Sorry, was meant to be information about where the pink comes from. I actually talked to design about colors a while back and they have internal (and informal) color names that are different from ours. I think the color provided should match the figma.

github-actions[bot] commented 3 years ago

@JackRichman

Please add update using this template (even if you have a pull request)

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, August 24, 2021 at 12:03 AM PST.}

ExperimentsInHonesty commented 3 years ago

@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 commented 3 years ago

@ExperimentsInHonesty I think we can either:

move the last item into a separate issue.
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

github-actions[bot] commented 3 years ago

@JackRichman

Please add update using this template (even if you have a pull request)

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, August 31, 2021 at 12:02 AM PST.}

github-actions[bot] commented 3 years ago

@JackRichman

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, September 7, 2021 at 12:02 AM PST.}

hackforla / website