diff --git a/packages/react-core/src/demos/HighContrast.md b/packages/react-core/src/demos/HighContrast.md new file mode 100644 index 00000000000..81dd5143228 --- /dev/null +++ b/packages/react-core/src/demos/HighContrast.md @@ -0,0 +1,29 @@ +--- +id: High contrast +section: patterns +--- + +import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon'; +import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon'; +import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon'; +import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; +import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; +import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; +import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; +import display from '@patternfly/react-styles/css/utilities/Display/display'; +import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing'; +import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing'; +import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; + +import MagicIcon from '@patternfly/react-icons/dist/esm/icons/magic-icon'; +import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; +import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; +import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; +import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'; +import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; + +### High contrast +```js file='./examples/HighContrast/HighContrast.tsx' isFullscreen + +``` diff --git a/packages/react-core/src/demos/examples/HighContrast/HighContrast.tsx b/packages/react-core/src/demos/examples/HighContrast/HighContrast.tsx new file mode 100644 index 00000000000..d878165e6ee --- /dev/null +++ b/packages/react-core/src/demos/examples/HighContrast/HighContrast.tsx @@ -0,0 +1,391 @@ +import { + Alert, + PageSection, + Tabs, + Tab, + TabContent, + TabContentBody, + TabTitleText, + Title, + Content, + DrawerHead, + DrawerActions, + DrawerPanelDescription, + DrawerCloseButton, + PageSidebar, + PageSidebarBody, + Nav, + NavGroup, + NavItem, + Form, + FormGroup, + TextInput, + FormHelperText, + HelperText, + HelperTextItem, + TextArea, + Checkbox, + ActionGroup, + Button, + FormGroupLabelHelp, + Dropdown, + DropdownItem, + DropdownList, + Toolbar, + ToolbarContent, + ToolbarItem, + ToolbarGroup, + MenuToggle, + PageToggleButton, + Masthead, + MastheadMain, + MastheadToggle, + MastheadBrand, + MastheadContent, + MastheadLogo, + ButtonVariant, + DrawerPanelBody, + NotificationBadge, + NotificationBadgeVariant +} from '@patternfly/react-core'; +import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; +import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; +import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'; +import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; + +export const TabsOpenDemo = () => { + const [activeTabKey, setActiveTabKey] = React.useState(0); + const [isNavOpen, setIsNavOpen] = React.useState(true); + const [isDrawerOpen, setIsDrawerOpen] = React.useState(true); + + // Toggle currently active tab + const handleTabClick = (event, tabIndex) => { + setActiveTabKey(tabIndex); + }; + + const onCloseClick = () => { + setIsDrawerOpen(false); + }; + + const [isChecked, setIsChecked] = React.useState(true); + + const pageForm = ( +
+ + + + + Valid name + + + + + + + + Invalid email + + + + } + > + + setIsChecked(!isChecked)} + /> + + + } + > +