diff --git a/packages/react-core/src/demos/HighContrast.md b/packages/react-core/src/demos/HighContrast.md new file mode 100644 index 00000000000..d0939ead922 --- /dev/null +++ b/packages/react-core/src/demos/HighContrast.md @@ -0,0 +1,32 @@ +--- +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'; +import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; +import { useState } from 'react'; + +### 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..5c67c5b5015 --- /dev/null +++ b/packages/react-core/src/demos/examples/HighContrast/HighContrast.tsx @@ -0,0 +1,667 @@ +import { + Alert, + PageSection, + Tabs, + Tab, + TabContent, + TabContentBody, + TabTitleText, + Title, + Content, + PageSidebar, + PageSidebarBody, + Nav, + NavGroup, + NavItem, + Form, + FormGroup, + TextInput, + FormHelperText, + HelperText, + HelperTextItem, + TextArea, + Checkbox, + ActionGroup, + Button, + FormGroupLabelHelp, + Dropdown, + DropdownList, + Toolbar, + ToolbarContent, + ToolbarItem, + ToolbarGroup, + MenuToggle, + PageToggleButton, + Masthead, + MastheadMain, + MastheadToggle, + MastheadBrand, + MastheadContent, + MastheadLogo, + ButtonVariant, + NotificationBadge, + NotificationBadgeVariant, + NotificationDrawer, + NotificationDrawerBody, + NotificationDrawerHeader, + NotificationDrawerList, + NotificationDrawerListItem, + NotificationDrawerListItemBody, + NotificationDrawerListItemHeader, + MenuToggleElement, + DropdownItem +} from '@patternfly/react-core'; +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'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; +import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; +import { Ref, RefObject, useState, MouseEvent as ReactMouseEvent, FormEvent } from 'react'; +import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; + +type Validate = 'success' | 'warning' | 'error' | 'default'; +const emailRegex = /^[^@]+@[^@]+\.[a-zA-Z]+$/i; + +export const TabsOpenDemo = () => { + const [activeTabKey, setActiveTabKey] = useState(0); + const [isNavOpen, setIsNavOpen] = useState(true); + const [isDrawerOpen, setIsDrawerOpen] = useState(true); + const [isOpenMap, setIsOpenMap] = useState(new Array(7).fill(false)); + const [email, setEmail] = useState(''); + const [name, setName] = useState(''); + const [description, setDescription] = useState(''); + const [validatedEmail, setValidatedEmail] = useState('default'); + const [emailHelperText, setEmailHelperText] = useState('Enter your email to continue'); + const [isChecked, setIsChecked] = useState(true); + + const onToggle = (index: number) => () => { + const newState = [...isOpenMap.slice(0, index), !isOpenMap[index], ...isOpenMap.slice(index + 1)]; + setIsOpenMap(newState); + }; + + const onSelect = () => { + setIsOpenMap(new Array(7).fill(false)); + }; + + const onDrawerClose = (_event: ReactMouseEvent | KeyboardEvent) => { + setIsOpenMap(new Array(7).fill(false)); + setIsDrawerOpen(false); + }; + + const [isOpen0, isOpen1, isOpen2, isOpen3, isOpen4, isOpen5, isOpen6] = isOpenMap; + const dropdownItems = ( + <> + Action + ev.preventDefault()} + > + Link + + Disabled Action + + Disabled Link + + + ); + + // Toggle currently active tab + const handleTabClick = (event, tabIndex) => { + setActiveTabKey(tabIndex); + }; + + const handleEmailChange = (_event, newEmail: string) => { + setEmail(newEmail); + }; + + const handleNameChange = (_event, newName: string) => { + setName(newName); + }; + + const handleDescriptionChange = (_event, newDesc: string) => { + setDescription(newDesc); + }; + + const invalidateEmail = () => { + setEmailHelperText('Invalid email address'); + setValidatedEmail('error'); + }; + + const resetForm = () => { + setEmail(''); + setName(''); + setDescription(''); + setIsChecked(false); + setValidatedEmail('default'); + setEmailHelperText('Enter your email to continue'); + }; + + const handleSubmit = (_event) => { + if (emailRegex.test(email)) { + resetForm(); + } else { + invalidateEmail(); + } + }; + + const handleCancel = () => { + resetForm(); + }; + + const generateAlertContent = () => { + if (validatedEmail === 'error') { + return 'Please provide a valid email address'; + } + }; + + const pageForm = ( +
+ + + + + + + + })} + > + {emailHelperText} + + + + + } + > + + setIsChecked(!isChecked)} + /> + + + } + > +