Add OUIA IDs for some components testing page

packages/react-core/src/components/Alert/examples/Alert.md

@@ -32,11 +32,11 @@ import React from 'react';
 import { Alert } from '@patternfly/react-core';
 
 <React.Fragment>
-  <Alert title="Default alert title" />
-  <Alert variant="info" title="Info alert title" />
-  <Alert variant="success" title="Success alert title" />
-  <Alert variant="warning" title="Warning alert title" />
-  <Alert variant="danger" title="Danger alert title" />
+  <Alert title="Default alert title" ouiaId="DefaultAlert" />
+  <Alert variant="info" title="Info alert title" ouiaId="InfoAlert" />
+  <Alert variant="success" title="Success alert title" ouiaId="SuccessAlert" />
+  <Alert variant="warning" title="Warning alert title" ouiaId="WarningAlert" />
+  <Alert variant="danger" title="Danger alert title" ouiaId="DangerAlert" />
 </React.Fragment>
 ```
 

packages/react-core/src/components/Breadcrumb/examples/BreadcrumbBasic.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core';
 
 export const BreadcrumbBasic: React.FunctionComponent = () => (
-  <Breadcrumb>
+  <Breadcrumb ouiaId="BasicBreadcrumb">
     <BreadcrumbItem to="#">Section home</BreadcrumbItem>
     <BreadcrumbItem to="#">Section title</BreadcrumbItem>
     <BreadcrumbItem to="#">Section title</BreadcrumbItem>

packages/react-core/src/components/Button/examples/ButtonVariations.tsx

@@ -7,12 +7,12 @@ import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 
 export const ButtonVariations: React.FunctionComponent = () => (
   <React.Fragment>
-    <Button variant="primary">Primary</Button> <Button variant="secondary">Secondary</Button>{' '}
-    <Button variant="secondary" isDanger>
+    <Button variant="primary" ouiaId="Primary">Primary</Button> <Button variant="secondary" ouiaId="Secondary">Secondary</Button>{' '}
+    <Button variant="secondary" ouiaId="DangerSecondary" isDanger>
       Danger Secondary
     </Button>{' '}
-    <Button variant="tertiary">Tertiary</Button> <Button variant="danger">Danger</Button>{' '}
-    <Button variant="warning">Warning</Button>
+    <Button variant="tertiary" ouiaId="Tertiary">Tertiary</Button> <Button variant="danger" ouiaId="Danger">Danger</Button>{' '}
+    <Button variant="warning" ouiaId="Warning">Warning</Button>
     <br />
     <br />
     <Button variant="link" icon={<PlusCircleIcon />}>

packages/react-core/src/components/Card/examples/CardBasic.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
 
 export const CardBasic: React.FunctionComponent = () => (
-  <Card>
+  <Card ouiaId="BasicCard">
     <CardTitle>Title</CardTitle>
     <CardBody>Body</CardBody>
     <CardFooter>Footer</CardFooter>

packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx

@@ -24,6 +24,7 @@ export const DropdownBasic: React.FunctionComponent = () => {
           Dropdown
         </MenuToggle>
       )}
+      ouiaId="BasicDropdown"
     >
       <DropdownList>
         <DropdownItem itemId={0} key="link">

packages/react-core/src/components/FormSelect/examples/FormSelectBasic.tsx

@@ -19,7 +19,7 @@ export const FormSelectBasic: React.FunctionComponent = () => {
   ];
 
   return (
-    <FormSelect value={formSelectValue} onChange={onChange} aria-label="FormSelect Input">
+    <FormSelect value={formSelectValue} onChange={onChange} aria-label="FormSelect Input" ouiaId="BasicFormSelect">
       {options.map((option, index) => (
         <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
       ))}

packages/react-core/src/components/Modal/examples/ModalBasic.tsx

@@ -10,7 +10,7 @@ export const ModalBasic: React.FunctionComponent = () => {
 
   return (
     <React.Fragment>
-      <Button variant="primary" onClick={handleModalToggle}>
+      <Button variant="primary" onClick={handleModalToggle} ouiaId="ShowBasicModal">
         Show basic modal
       </Button>
       <Modal
@@ -25,6 +25,7 @@ export const ModalBasic: React.FunctionComponent = () => {
             Cancel
           </Button>
         ]}
+        ouiaId="BasicModal"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
         magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

packages/react-core/src/components/Nav/examples/NavDefault.tsx

@@ -9,7 +9,7 @@ export const NavDefault: React.FunctionComponent = () => {
   };
 
   return (
-    <Nav onSelect={onSelect} aria-label="Default global">
+    <Nav onSelect={onSelect} aria-label="Default global" ouiaId="DefaultNav">
       <NavList>
         <NavItem preventDefault id="nav-default-link1" to="#nav-default-link1" itemId={0} isActive={activeItem === 0}>
           Default Link 1

packages/react-core/src/components/Pagination/examples/PaginationTop.tsx

@@ -26,6 +26,7 @@ export const PaginationTop: React.FunctionComponent = () => {
       onSetPage={onSetPage}
       widgetId="top-example"
       onPerPageSelect={onPerPageSelect}
+      ouiaId="PaginationTop"
     />
   );
 };

packages/react-core/src/components/Select/examples/Select.md

@@ -120,6 +120,7 @@ class SingleSelectInput extends React.Component {
           aria-labelledby={titleId}
           isDisabled={isDisabled}
           direction={direction}
+          ouiaId="SingleSelect"
         >
           {this.options}
         </Select>

packages/react-core/src/components/Switch/examples/SwitchBasic.tsx

@@ -15,6 +15,7 @@ export const SwitchBasic: React.FunctionComponent = () => {
       labelOff="Message when off"
       isChecked={isChecked}
       onChange={handleChange}
+      ouiaId="BasicSwitch"
     />
   );
 };

packages/react-core/src/deprecated/components/ContextSelector/examples/ContextSelectorBasic.tsx

@@ -69,6 +69,7 @@ export const ContextSelectorBasic: React.FunctionComponent = () => {
       onSelect={onSelect}
       onSearchButtonClick={onSearchButtonClick}
       screenReaderLabel="Selected Project:"
+      ouiaId="BasicContextSelector"
     >
       {filteredItems.map((item, index) => {
         const [text = null, href = undefined, isDisabled] =

packages/react-core/src/deprecated/components/OptionsMenu/examples/OptionsMenu.md

@@ -53,7 +53,8 @@ class SingleOption extends React.Component {
         id="single-option-example" 
         menuItems={menuItems} 
         isOpen={isOpen} 
-        toggle={toggle}/>
+        toggle={toggle}
+        ouiaId="OptionsMenu"/>
     );
   }
 }

packages/react-table/src/components/Table/examples/TableSortable.tsx

@@ -79,7 +79,7 @@ export const TableSortable: React.FunctionComponent = () => {
 
   // In this example, we wrap all but the 1st column and make the 1st and 3rd columns sortable just to demonstrate.
   return (
-    <Table aria-label="Sortable table">
+    <Table aria-label="Sortable table" ouiaId="SortableTable">
       <Thead>
         <Tr>
           <Th sort={getSortParams(0)}>{columnNames.name}</Th>