feat(theme): add high contrast theme poc

[mcoker]

This PR was replaced with #11954

The new demo URL is https://patternfly-react-pr-11954.surge.sh/patterns/high-contrast/react-demos/high-contrast/

---

High contrast POC. You can find it under "Patterns" -> "High Contrast", or click this handy-dandy link

https://patternfly-react-pr-11911.surge.sh/patterns/high-contrast/react-demos/high-contrast/

To enable theme, turn on high contrast on your OS or you can use forced-colors mode in dev tools (below)

Core styles are in this branch - https://github.com/mcoker/patternfly/tree/hc-theme-poc-styles. To hook up to this POC, I make the changes in core, then compile and copy/paste them into the react docs dir as additional stylesheets using the command below.

yarn build-patternfly && for i in dist/base/patternfly-variables.css dist/components/Button/button.css dist/components/Drawer/drawer.css dist/components/Nav/nav.css dist/components/Page/page.css dist/components/Tabs/tabs.css; do cp $i ../patternfly-react/packages/react-docs/patternfly-docs/; done

[patternfly-build]

Preview: https://patternfly-react-pr-11911.surge.sh

A11y report: https://patternfly-react-pr-11911-a11y.surge.sh

[lboehling]

Hi @mcoker & @melissaing For the HC POC demo — would it be possible to make the following updates so the POC fits with the research tasks?

1. Can we make the POC form have real validation after submission? We’d like the default form page to have no error states at first. The user will then be asked to input an incorrect email address (e.g., “name@email” without the “.com” suffix). Once they submit, we’d like the field to display an error message, “Invalid email address,” as currently shown in the POC. The inline alert could read “Please provide a valid email address.”
2. Currently, all three masthead actions open the drawer. Could we limit this to just the notification badge, and have a notification drawer show here instead of the default drawer? Alternatively, we could have the settings icon open the drawer, and have some dummy Settings placed in the drawer instead. Like a “Language” selector, “Theme” selector, and possible “Time Zone” selector. Whichever is easiest for implementation purposes.

If these updates sound doable to you, could you also give me an estimate to communicate back to research on how long the following updates would take? Thank you sm!

[rebeccaalpert]

@lboehling - I'm going to pitch in. I should be able to knock the button/drawer change out in like 20 minutes unless you have specific things you want in the notifications. Just let me know - this estimate is based on pulling in this sample code here: https://www.patternfly.org/components/notification-drawer#basic. I'll get you an estimate for form validation once I'm done with this.

[rebeccaalpert]

Form looks similar time-wise to me (I haven't been in Form in a few years). I won't make the email matching more robust than your use case needs if that works.

[rebeccaalpert]

I did some extra stuff - wired up cancel to clear it and added validation for name, but not the other fields. There is no message on a successful submit but I wired it up to clear. Let me know if you want something different here.

[rebeccaalpert]

Just popping out name validation since it's not needed + clearing out controlled checkbox + description on submit for funsies.