Update Pricing FAQ functionality to use details elements for all questions, add deep linking
Why is this change being made?
Related to https://gitlab.com/gitlab-com/marketing/inbound-marketing/marketing-website/-/issues/176
The goal is to make it easier for users to see all the FAQ questions without clicking anything so potential customers can more easily find the questions they're looking for.
This MR:
- Expands all the FAQ questions to their own
detailselements on the page, with asummaryelement to list the question part of it. - Adds a
show/hide allbutton to each category to toggle groups open/closed - Adds anchors to each answer that point to their corresponding question, for quick reference. @jhalloran - we initially talked about adding this on hover, which I can do, but I think it might be clearer to users to have it visible by default, which we were planning on doing on mobile anyway. What do you think?
- Adds JavaScript to open specific
detailselements if their corresponding ID exists in the URL hash (i.e. /pricing#how-much-space-can-i-have-for-my-repo-on-gitlab-saas). So we can deep link to the item, scroll to it, and open it for quick reference. - Preserves the
leap.jsfunctionality - Preserves the Google Analytics
"data-inbound-analytics" => "pricing-leap-target"metadata from !87650 (merged)
QA
- Visit the review app pricing page
- Confirm it matches the Figma file
- Confirm appropriate functionality (show/hide all toggles, deep linking via anchor links, etc.)
- Let me know if you want me to make the anchor icons hover-dependent on desktop. It's a quick change, I just thought this might be clearer for users.
Author Checklist
-
Provided a concise title for the MR -
Added a description to this MR explaining the reasons for the proposed change, per say-why-not-just-what - Copy/paste the Slack conversation to document it for later, or upload screenshots. Verify that no confidential data is added.
-
Assign reviewers for this change to the correct DRI(s) - If the DRI for the page/s being updated isn’t immediately clear, then assign it to one of the people listed in the "Maintained by" section in on the page being edited.
- If your manager does not have merge rights, please ask someone to merge it AFTER it has been approved by your manager in #mr-buddies.
-
If the changes affect team members, or warrant an announcement in another way, please consider posting an update in #whats-happening-at-gitlab linking to this MR. - If this is a change that directly impacts the majority of global team members, it should be a candidate for #company-fyi. Please work with internal communications and check the handbook for examples.
Edited by Tyler Williams