Skip to content
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 14 commits into from
Jul 17, 2023
Merged

UI tabs for fides-js #3782

merged 14 commits into from
Jul 17, 2023

Conversation

allisonking
Copy link
Contributor

@allisonking allisonking commented Jul 13, 2023

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

  • New TcfTabs component, with accessible tabs
  • New option FIDES_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:

  • Edit your fides-js-demo-components.html file to have the option tcfEnabled: true here
  • turbo dev in privacy-center, then visit localhost:3000/fides-js-demo-components.html. Open the modal, and you should see the tabs

Second option:

  • Start your fides server and make sure you have all your privacy notices and experiences set up + geolocation
  • FIDES_PRIVACY_CENTER__TCF_ENABLED=true turbo dev
  • Visit localhost:3000/fides-js-demo.html. Open the modal, and you should see the tabs.

Pre-Merge Checklist

  • All CI Pipelines Succeeded
  • Issue Requirements are Met
  • Relevant Follow-Up Issues Created
  • Update CHANGELOG.md

@cypress
Copy link

cypress bot commented Jul 13, 2023

Passing run #3183 ↗︎

0 4 0 0 Flakiness 0
⚠️ You've recorded test results over your free plan limit.
Upgrade your plan to view test results.

Details:

Merge 9a56746 into dacba24...
Project: fides Commit: 0a25be3275 ℹ️
Status: Passed Duration: 00:45 💡
Started: Jul 17, 2023 1:54 PM Ended: Jul 17, 2023 1:55 PM

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.

@allisonking allisonking marked this pull request as ready for review July 14, 2023 15:17
Copy link
Contributor

@eastandwestwind eastandwestwind left a 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 👍

clients/fides-js/src/components/TcfTabs.tsx Outdated Show resolved Hide resolved
@allisonking allisonking merged commit 55acc85 into main Jul 17, 2023
@allisonking allisonking deleted the aking/3723/tcf-ui-components branch July 17, 2023 13:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants