feat: add launch darkly flag for dark mode toggle

[gidjin]

SC-774

Proposed changes

Configure LaunchDarkly Federal edition and setup ThemeToggle to use the first feature flag.

Reviewer notes

I setup 4 environments (localhost, dev, staging, and production). Localhost is what should be setup for developer boxes. See the readme changes for how to get it working locally.

I didn't add unit tests for the flag code in ThemeToggle because I figured we remove that code once the feature is fully released. But if you feel differently I'm happy to add a couple.

TODO add the environment variable for dev to the AWS dev environment.

Setup

Start everything normally

yarn cms:up
yarn dev

See that the ThemeToggle is show or hidden depending on the setting in the localhost environment in launch darkly dashboard. If you toggle it there you will see the button hide and show automatically!

---

Code review steps

As the original developer, I have

• Met the acceptance criteria, or will meet them in subsequent PRs or stories
• Created new stories in Storybook if applicable
  • Checked that all Storybook accessibility checks are passing
• Created/modified automated E2E tests in Cypress
  • Including cypress-axe checks when UI changes
  • Checked that the E2E test build is not failing

As code reviewer(s), I have

• Pulled this branch locally and tested it
• Reviewed this code and left comments
• Checked that all code is adequately covered by tests
  • Checked that the E2E test build is not failing
• Made it clear which comments need to be addressed before this work is merged
• Considered marking this as accepted even if there are small changes needed
• Performed a11y testing:
  • Checked responsiveness in mobile, tablet, and desktop
  • Checked keyboard navigability
  • Tested with VoiceOver in Safari
  • Checked VO's rotor menu for landmarks, page heading structure and links
  • Used a browser a11y tool to check for issues (WAVE, axe, ANDI or Accessibility addon tab for Storybook)

As a designer reviewer, I have

• Checked in the design translated visually
• Checked behavior
• Checked different states (empty, one, some, error)
• Checked for landmarks, page heading structure, and links
• Tried to break the intended flow
• Performed a11y testing:
  • Checked responsiveness in mobile, tablet, and desktop
  • Checked keyboard navigability
  • Tested with VoiceOver in Safari
  • Checked VO's rotor menu for landmarks, page heading structure and links
  • Used a browser a11y tool to check for issues (WAVE, axe, ANDI or Accessibility addon tab for Storybook)

As a test user, I have

• Run through the Test Script:
  • On commercial internet in IE11
  • On commercial internet in Edge
  • On commercial internet in Firefox
  • On commercial internet in Chrome
  • On commercial internet in Safari
  • On NIPR in IE11
  • On NIPR in Firefox
  • On NIPR in Chrome
  • On NIPR in Safari
  • On a mobile device in Firefox
  • On a mobile device in Chrome
  • On a mobile device in Safari
• Added any anomalous behavior to this PR

[shortcut-integration]

This pull request has been linked to Shortcut Story #774: Implement Launch Darkly flags for Dark Mode.

[jbecker01]

I noticed that the dark mode setting isn't persistent across all the pages of the portal. Is that something that would be covered under #778 ?

[jcbcapps]

Awesome!

[jbecker01]

Looks good!

[abbyoung]

i love typescript 😭 😂

[abbyoung]

works great, very exciting!