-
Notifications
You must be signed in to change notification settings - Fork 72
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
UI tabs for fides-js #3782
Merged
Merged
UI tabs for fides-js #3782
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Passing run #3183 ↗︎
Details:
This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. |
eastandwestwind
approved these changes
Jul 14, 2023
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks great @allisonking , especially following A11y guidelines for tabs here!
2 minor suggestions, nothing blocking, so will go ahead and approve 👍
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
One part of #3723
Description Of Changes
The designs for the TCF modal have a new "tabs" component. This PR adds a new
TcfTabs
component so that we can be prepared when that line of work comes in. The original ticket requires more than just the tabs, but this seemed like a good chunk of work to get reviewed first.Features accessibility features such as tabbing and using arrow keys to move around the tabs 👍 (see a11y spec here: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/)
Screen.Recording.2023-07-13.at.5.05.16.PM.mov
Code Changes
TcfTabs
component, with accessible tabsFIDES_PRIVACY_CENTER__TCF_ENABLED
which we can use to see the tab view for now. In the future, we can use this to determine what bundle to return in fides-js too!Steps to Confirm
Two options, the first:
fides-js-demo-components.html
file to have the optiontcfEnabled: true
hereturbo dev
in privacy-center, then visit localhost:3000/fides-js-demo-components.html. Open the modal, and you should see the tabsSecond option:
FIDES_PRIVACY_CENTER__TCF_ENABLED=true turbo dev
Pre-Merge Checklist
CHANGELOG.md