FAQ deep links

[josepmartins]

Summary

This PR showcase and create a storybook example of the FAQ items using anchored links.

Tracking issue: https://github.com/github/primer/issues/1749

👀 Preview links

• https://primer-c8c173da85-26139705.drafts.github.io/storybook/iframe.html?id=components-faq--default&viewMode=story#test-1
• https://primer-c8c173da85-26139705.drafts.github.io/storybook/iframe.html?id=components-faq--default&viewMode=story#test-2

hash-FAQ.mov

List of notable changes:

What should reviewers focus on?

Steps to test:

Supporting resources (related issues, external links, etc):

Contributor checklist:

• All new and existing CI checks pass
• Tests prove that the feature works and covers both happy and unhappy paths
• Any drop in coverage, breaking changes or regressions have been documented above
• New visual snapshots have been generated / updated for any UI changes
• All developer debugging and non-functional logging has been removed
• Related issues have been referenced in the PR description

Reviewer checklist:

• Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
• Check that tests prove the feature works and covers both happy and unhappy paths
• Check that there aren't other open Pull Requests for the same update/change

Screenshots:

Please try to provide before and after screenshots or videos

Before	After

[changeset-bot]

⚠️ No Changeset found

Latest commit: 88922b2

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

🟢 No design token changes found

[github-actions]

🟢 No visual differences found

Our visual comparison tests did not find any differences in the UI.

[rezrah]

Sorry for the drive-by comment @josepmartins - this looked interesting and I was also thinking about this yesterday so hope you don't mind me dropping some feedback here? 😬

I think in practice we'd typically not want to set open attribute by default in the markup, but rather only when required via a "deeplink" url. What do you think about passing a query param, which FAQ component reads, parses and then adds the open attribute to the id of the relevant question?

We can then trigger the opening of the question via the URL like:

mywebsite.com?faq=1 which opens id="1"

[josepmartins]

I totally agree on not setting the open attribute by default (we should document this). This was more of a test to showcase how the feature "should look", that's why I forced the open attribute.

Not sure about the need for a query param here (or maybe I didn't understand your proposal lol). Wouldn't it be better to use a normal anchor link (mywebsite.com#whats-the-meaning-of-life) that scrolls down to the id of the question and the FAQ component reads, parses, and adds the open attribute to it?

[josepmartins]

To illustrate my comment above, made a commit as an example using the location.hash to adjust the open boolean in FAQ:

6b53e62

[rezrah]

🙌 I love that idea. Glad we're aligned on the optional attribute. I think your approach of doing it without query params makes total sense too. Just bear in mind that the component will need to run any window operations in a useEffect to mitigate SSR constraints, otherwise works for me 👍

[josepmartins]

I made a useHash webhook to handle the window.hash operations, which works pretty fine

hash-FAQ.mov