From f355f759f393d661730e77e95476c2216b489c88 Mon Sep 17 00:00:00 2001
From: Dmitry Misharov <dmisharo@redhat.com>
Date: Thu, 19 Sep 2019 15:02:36 +0200
Subject: [PATCH] Added OUIA compatibility to Breadcrumb component

---
 .../components/Breadcrumb/Breadcrumb.test.tsx |  10 +-
 .../src/components/Breadcrumb/Breadcrumb.tsx  |  20 +-
 .../__snapshots__/Breadcrumb.test.tsx.snap    | 256 +++++--
 .../Page/__snapshots__/Page.test.tsx.snap     | 642 ++++++++++--------
 4 files changed, 599 insertions(+), 329 deletions(-)

diff --git a/packages/patternfly-4/react-core/src/components/Breadcrumb/Breadcrumb.test.tsx b/packages/patternfly-4/react-core/src/components/Breadcrumb/Breadcrumb.test.tsx
index 2238d20575c..ffbf3764b98 100644
--- a/packages/patternfly-4/react-core/src/components/Breadcrumb/Breadcrumb.test.tsx
+++ b/packages/patternfly-4/react-core/src/components/Breadcrumb/Breadcrumb.test.tsx
@@ -1,26 +1,26 @@
 import * as React from 'react';
 import { Breadcrumb } from './Breadcrumb';
 import { BreadcrumbItem } from './BreadcrumbItem';
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
 
 describe('Breadcrumb component', () => {
   test('should render default breadcrumb', () => {
-    const view = shallow(<Breadcrumb />);
+    const view = mount(<Breadcrumb />);
     expect(view).toMatchSnapshot();
   });
 
   test('should render breadcrumb with className', () => {
-    const view = shallow(<Breadcrumb className="className" />);
+    const view = mount(<Breadcrumb className="className" />);
     expect(view).toMatchSnapshot();
   });
 
   test('should render breadcrumb with aria-label', () => {
-    const view = shallow(<Breadcrumb aria-label="custom label" />);
+    const view = mount(<Breadcrumb aria-label="custom label" />);
     expect(view).toMatchSnapshot();
   });
 
   test('should render breadcrumb with children', () => {
-    const view = shallow(
+    const view = mount(
       <Breadcrumb>
         <BreadcrumbItem to="#">Item 1</BreadcrumbItem> <BreadcrumbItem to="#">Item 1</BreadcrumbItem>
       </Breadcrumb>
diff --git a/packages/patternfly-4/react-core/src/components/Breadcrumb/Breadcrumb.tsx b/packages/patternfly-4/react-core/src/components/Breadcrumb/Breadcrumb.tsx
index c42c81c287d..455ef52f1a0 100644
--- a/packages/patternfly-4/react-core/src/components/Breadcrumb/Breadcrumb.tsx
+++ b/packages/patternfly-4/react-core/src/components/Breadcrumb/Breadcrumb.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Breadcrumb/breadcrumb';
 import { css } from '@patternfly/react-styles';
+import { InjectedOuiaProps, withOuiaContext } from '../withOuia';
 
 export interface BreadcrumbProps extends React.HTMLProps<HTMLElement> {
   /** Children nodes be rendered to the BreadCrumb. Should be of type BreadCrumbItem. */
@@ -11,13 +12,26 @@ export interface BreadcrumbProps extends React.HTMLProps<HTMLElement> {
   'aria-label'?: string;
 }
 
-export const Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({
+const Breadcrumb: React.FunctionComponent<BreadcrumbProps & InjectedOuiaProps> = ({
   children = null,
   className = '',
   'aria-label': ariaLabel = 'Breadcrumb',
+  ouiaContext = null,
+  ouiaId = null,
   ...props
-}: BreadcrumbProps) => (
-  <nav {...props} aria-label={ariaLabel} className={css(styles.breadcrumb, className)}>
+}: BreadcrumbProps & InjectedOuiaProps) => (
+  <nav 
+    {...props}
+    aria-label={ariaLabel}
+    className={css(styles.breadcrumb, className)}
+    {...ouiaContext.isOuia && {
+      'data-ouia-component-type': 'Breadcrumb',
+      'data-ouia-component-id': ouiaId || ouiaContext.ouiaId
+    }}
+  >
     <ol className={css(styles.breadcrumbList)}>{children}</ol>
   </nav>
 );
+
+const  BreadcrumbWithOuiaContext = withOuiaContext(Breadcrumb);
+export { BreadcrumbWithOuiaContext as Breadcrumb };
diff --git a/packages/patternfly-4/react-core/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/packages/patternfly-4/react-core/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
index e1fdfdfdeaf..4e8fd376dee 100644
--- a/packages/patternfly-4/react-core/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
+++ b/packages/patternfly-4/react-core/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
@@ -1,57 +1,235 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Breadcrumb component should render breadcrumb with aria-label 1`] = `
-<nav
+<Component
   aria-label="custom label"
-  className="pf-c-breadcrumb"
 >
-  <ol
-    className="pf-c-breadcrumb__list"
-  />
-</nav>
+  <ComponentWithOuia
+    component={[Function]}
+    componentProps={
+      Object {
+        "aria-label": "custom label",
+      }
+    }
+    consumerContext={null}
+  >
+    <Breadcrumb
+      aria-label="custom label"
+      ouiaContext={
+        Object {
+          "isOuia": false,
+          "ouiaId": null,
+        }
+      }
+    >
+      <nav
+        aria-label="custom label"
+        className="pf-c-breadcrumb"
+      >
+        <ol
+          className="pf-c-breadcrumb__list"
+        />
+      </nav>
+    </Breadcrumb>
+  </ComponentWithOuia>
+</Component>
 `;
 
 exports[`Breadcrumb component should render breadcrumb with children 1`] = `
-<nav
-  aria-label="Breadcrumb"
-  className="pf-c-breadcrumb"
->
-  <ol
-    className="pf-c-breadcrumb__list"
+<Component>
+  <ComponentWithOuia
+    component={[Function]}
+    componentProps={
+      Object {
+        "children": Array [
+          <Unknown
+            to="#"
+          >
+            Item 1
+          </Unknown>,
+          " ",
+          <Unknown
+            to="#"
+          >
+            Item 1
+          </Unknown>,
+        ],
+      }
+    }
+    consumerContext={null}
   >
-    <Component
-      to="#"
+    <Breadcrumb
+      ouiaContext={
+        Object {
+          "isOuia": false,
+          "ouiaId": null,
+        }
+      }
     >
-      Item 1
-    </Component>
-     
-    <Component
-      to="#"
-    >
-      Item 1
-    </Component>
-  </ol>
-</nav>
+      <nav
+        aria-label="Breadcrumb"
+        className="pf-c-breadcrumb"
+      >
+        <ol
+          className="pf-c-breadcrumb__list"
+        >
+          <Component
+            to="#"
+          >
+            <li
+              className="pf-c-breadcrumb__item"
+            >
+              <a
+                className="pf-c-breadcrumb__link"
+                href="#"
+                target={null}
+              >
+                Item 1
+              </a>
+              <span
+                className="pf-c-breadcrumb__item-divider"
+              >
+                <AngleRightIcon
+                  color="currentColor"
+                  noVerticalAlign={false}
+                  size="sm"
+                  title={null}
+                >
+                  <svg
+                    aria-hidden={true}
+                    aria-labelledby={null}
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    style={
+                      Object {
+                        "verticalAlign": "-0.125em",
+                      }
+                    }
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                      transform=""
+                    />
+                  </svg>
+                </AngleRightIcon>
+              </span>
+            </li>
+          </Component>
+           
+          <Component
+            to="#"
+          >
+            <li
+              className="pf-c-breadcrumb__item"
+            >
+              <a
+                className="pf-c-breadcrumb__link"
+                href="#"
+                target={null}
+              >
+                Item 1
+              </a>
+              <span
+                className="pf-c-breadcrumb__item-divider"
+              >
+                <AngleRightIcon
+                  color="currentColor"
+                  noVerticalAlign={false}
+                  size="sm"
+                  title={null}
+                >
+                  <svg
+                    aria-hidden={true}
+                    aria-labelledby={null}
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    style={
+                      Object {
+                        "verticalAlign": "-0.125em",
+                      }
+                    }
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                      transform=""
+                    />
+                  </svg>
+                </AngleRightIcon>
+              </span>
+            </li>
+          </Component>
+        </ol>
+      </nav>
+    </Breadcrumb>
+  </ComponentWithOuia>
+</Component>
 `;
 
 exports[`Breadcrumb component should render breadcrumb with className 1`] = `
-<nav
-  aria-label="Breadcrumb"
-  className="pf-c-breadcrumb className"
+<Component
+  className="className"
 >
-  <ol
-    className="pf-c-breadcrumb__list"
-  />
-</nav>
+  <ComponentWithOuia
+    component={[Function]}
+    componentProps={
+      Object {
+        "className": "className",
+      }
+    }
+    consumerContext={null}
+  >
+    <Breadcrumb
+      className="className"
+      ouiaContext={
+        Object {
+          "isOuia": false,
+          "ouiaId": null,
+        }
+      }
+    >
+      <nav
+        aria-label="Breadcrumb"
+        className="pf-c-breadcrumb className"
+      >
+        <ol
+          className="pf-c-breadcrumb__list"
+        />
+      </nav>
+    </Breadcrumb>
+  </ComponentWithOuia>
+</Component>
 `;
 
 exports[`Breadcrumb component should render default breadcrumb 1`] = `
-<nav
-  aria-label="Breadcrumb"
-  className="pf-c-breadcrumb"
->
-  <ol
-    className="pf-c-breadcrumb__list"
-  />
-</nav>
+<Component>
+  <ComponentWithOuia
+    component={[Function]}
+    componentProps={Object {}}
+    consumerContext={null}
+  >
+    <Breadcrumb
+      ouiaContext={
+        Object {
+          "isOuia": false,
+          "ouiaId": null,
+        }
+      }
+    >
+      <nav
+        aria-label="Breadcrumb"
+        className="pf-c-breadcrumb"
+      >
+        <ol
+          className="pf-c-breadcrumb__list"
+        />
+      </nav>
+    </Breadcrumb>
+  </ComponentWithOuia>
+</Component>
 `;
diff --git a/packages/patternfly-4/react-core/src/components/Page/__snapshots__/Page.test.tsx.snap b/packages/patternfly-4/react-core/src/components/Page/__snapshots__/Page.test.tsx.snap
index cf41cd1b63a..4835ecf12cc 100644
--- a/packages/patternfly-4/react-core/src/components/Page/__snapshots__/Page.test.tsx.snap
+++ b/packages/patternfly-4/react-core/src/components/Page/__snapshots__/Page.test.tsx.snap
@@ -328,159 +328,198 @@ exports[`Check page to verify breadcrumb is created 1`] = `
       >
         <PageBreadcrumb>
           <Component>
-            <nav
-              aria-label="Breadcrumb"
-              className="pf-c-breadcrumb"
+            <ComponentWithOuia
+              component={[Function]}
+              componentProps={
+                Object {
+                  "children": Array [
+                    <Unknown>
+                      Section Home
+                    </Unknown>,
+                    <Unknown
+                      to="#"
+                    >
+                      Section Title
+                    </Unknown>,
+                    <Unknown
+                      to="#"
+                    >
+                      Section Title
+                    </Unknown>,
+                    <Unknown
+                      isActive={true}
+                      to="#"
+                    >
+                      Section Landing
+                    </Unknown>,
+                  ],
+                }
+              }
+              consumerContext={null}
             >
-              <ol
-                className="pf-c-breadcrumb__list"
+              <Breadcrumb
+                ouiaContext={
+                  Object {
+                    "isOuia": false,
+                    "ouiaId": null,
+                  }
+                }
               >
-                <Component>
-                  <li
-                    className="pf-c-breadcrumb__item"
+                <nav
+                  aria-label="Breadcrumb"
+                  className="pf-c-breadcrumb"
+                >
+                  <ol
+                    className="pf-c-breadcrumb__list"
                   >
-                    Section Home
-                    <span
-                      className="pf-c-breadcrumb__item-divider"
-                    >
-                      <AngleRightIcon
-                        color="currentColor"
-                        noVerticalAlign={false}
-                        size="sm"
-                        title={null}
+                    <Component>
+                      <li
+                        className="pf-c-breadcrumb__item"
                       >
-                        <svg
-                          aria-hidden={true}
-                          aria-labelledby={null}
-                          fill="currentColor"
-                          height="1em"
-                          role="img"
-                          style={
-                            Object {
-                              "verticalAlign": "-0.125em",
-                            }
-                          }
-                          viewBox="0 0 256 512"
-                          width="1em"
+                        Section Home
+                        <span
+                          className="pf-c-breadcrumb__item-divider"
                         >
-                          <path
-                            d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                            transform=""
-                          />
-                        </svg>
-                      </AngleRightIcon>
-                    </span>
-                  </li>
-                </Component>
-                <Component
-                  to="#"
-                >
-                  <li
-                    className="pf-c-breadcrumb__item"
-                  >
-                    <a
-                      className="pf-c-breadcrumb__link"
-                      href="#"
-                      target={null}
+                          <AngleRightIcon
+                            color="currentColor"
+                            noVerticalAlign={false}
+                            size="sm"
+                            title={null}
+                          >
+                            <svg
+                              aria-hidden={true}
+                              aria-labelledby={null}
+                              fill="currentColor"
+                              height="1em"
+                              role="img"
+                              style={
+                                Object {
+                                  "verticalAlign": "-0.125em",
+                                }
+                              }
+                              viewBox="0 0 256 512"
+                              width="1em"
+                            >
+                              <path
+                                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                                transform=""
+                              />
+                            </svg>
+                          </AngleRightIcon>
+                        </span>
+                      </li>
+                    </Component>
+                    <Component
+                      to="#"
                     >
-                      Section Title
-                    </a>
-                    <span
-                      className="pf-c-breadcrumb__item-divider"
-                    >
-                      <AngleRightIcon
-                        color="currentColor"
-                        noVerticalAlign={false}
-                        size="sm"
-                        title={null}
+                      <li
+                        className="pf-c-breadcrumb__item"
                       >
-                        <svg
-                          aria-hidden={true}
-                          aria-labelledby={null}
-                          fill="currentColor"
-                          height="1em"
-                          role="img"
-                          style={
-                            Object {
-                              "verticalAlign": "-0.125em",
-                            }
-                          }
-                          viewBox="0 0 256 512"
-                          width="1em"
+                        <a
+                          className="pf-c-breadcrumb__link"
+                          href="#"
+                          target={null}
                         >
-                          <path
-                            d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                            transform=""
-                          />
-                        </svg>
-                      </AngleRightIcon>
-                    </span>
-                  </li>
-                </Component>
-                <Component
-                  to="#"
-                >
-                  <li
-                    className="pf-c-breadcrumb__item"
-                  >
-                    <a
-                      className="pf-c-breadcrumb__link"
-                      href="#"
-                      target={null}
-                    >
-                      Section Title
-                    </a>
-                    <span
-                      className="pf-c-breadcrumb__item-divider"
+                          Section Title
+                        </a>
+                        <span
+                          className="pf-c-breadcrumb__item-divider"
+                        >
+                          <AngleRightIcon
+                            color="currentColor"
+                            noVerticalAlign={false}
+                            size="sm"
+                            title={null}
+                          >
+                            <svg
+                              aria-hidden={true}
+                              aria-labelledby={null}
+                              fill="currentColor"
+                              height="1em"
+                              role="img"
+                              style={
+                                Object {
+                                  "verticalAlign": "-0.125em",
+                                }
+                              }
+                              viewBox="0 0 256 512"
+                              width="1em"
+                            >
+                              <path
+                                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                                transform=""
+                              />
+                            </svg>
+                          </AngleRightIcon>
+                        </span>
+                      </li>
+                    </Component>
+                    <Component
+                      to="#"
                     >
-                      <AngleRightIcon
-                        color="currentColor"
-                        noVerticalAlign={false}
-                        size="sm"
-                        title={null}
+                      <li
+                        className="pf-c-breadcrumb__item"
                       >
-                        <svg
-                          aria-hidden={true}
-                          aria-labelledby={null}
-                          fill="currentColor"
-                          height="1em"
-                          role="img"
-                          style={
-                            Object {
-                              "verticalAlign": "-0.125em",
-                            }
-                          }
-                          viewBox="0 0 256 512"
-                          width="1em"
+                        <a
+                          className="pf-c-breadcrumb__link"
+                          href="#"
+                          target={null}
                         >
-                          <path
-                            d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                            transform=""
-                          />
-                        </svg>
-                      </AngleRightIcon>
-                    </span>
-                  </li>
-                </Component>
-                <Component
-                  isActive={true}
-                  to="#"
-                >
-                  <li
-                    className="pf-c-breadcrumb__item"
-                  >
-                    <a
-                      aria-current="page"
-                      className="pf-c-breadcrumb__link pf-m-current"
-                      href="#"
-                      target={null}
+                          Section Title
+                        </a>
+                        <span
+                          className="pf-c-breadcrumb__item-divider"
+                        >
+                          <AngleRightIcon
+                            color="currentColor"
+                            noVerticalAlign={false}
+                            size="sm"
+                            title={null}
+                          >
+                            <svg
+                              aria-hidden={true}
+                              aria-labelledby={null}
+                              fill="currentColor"
+                              height="1em"
+                              role="img"
+                              style={
+                                Object {
+                                  "verticalAlign": "-0.125em",
+                                }
+                              }
+                              viewBox="0 0 256 512"
+                              width="1em"
+                            >
+                              <path
+                                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                                transform=""
+                              />
+                            </svg>
+                          </AngleRightIcon>
+                        </span>
+                      </li>
+                    </Component>
+                    <Component
+                      isActive={true}
+                      to="#"
                     >
-                      Section Landing
-                    </a>
-                  </li>
-                </Component>
-              </ol>
-            </nav>
+                      <li
+                        className="pf-c-breadcrumb__item"
+                      >
+                        <a
+                          aria-current="page"
+                          className="pf-c-breadcrumb__link pf-m-current"
+                          href="#"
+                          target={null}
+                        >
+                          Section Landing
+                        </a>
+                      </li>
+                    </Component>
+                  </ol>
+                </nav>
+              </Breadcrumb>
+            </ComponentWithOuia>
           </Component>
         </PageBreadcrumb>
       </section>
@@ -653,159 +692,198 @@ exports[`Check page to verify skip to content points to main content region 1`]
         className="pf-c-page__main-breadcrumb"
       >
         <Component>
-          <nav
-            aria-label="Breadcrumb"
-            className="pf-c-breadcrumb"
+          <ComponentWithOuia
+            component={[Function]}
+            componentProps={
+              Object {
+                "children": Array [
+                  <Unknown>
+                    Section Home
+                  </Unknown>,
+                  <Unknown
+                    to="#"
+                  >
+                    Section Title
+                  </Unknown>,
+                  <Unknown
+                    to="#"
+                  >
+                    Section Title
+                  </Unknown>,
+                  <Unknown
+                    isActive={true}
+                    to="#"
+                  >
+                    Section Landing
+                  </Unknown>,
+                ],
+              }
+            }
+            consumerContext={null}
           >
-            <ol
-              className="pf-c-breadcrumb__list"
+            <Breadcrumb
+              ouiaContext={
+                Object {
+                  "isOuia": false,
+                  "ouiaId": null,
+                }
+              }
             >
-              <Component>
-                <li
-                  className="pf-c-breadcrumb__item"
+              <nav
+                aria-label="Breadcrumb"
+                className="pf-c-breadcrumb"
+              >
+                <ol
+                  className="pf-c-breadcrumb__list"
                 >
-                  Section Home
-                  <span
-                    className="pf-c-breadcrumb__item-divider"
-                  >
-                    <AngleRightIcon
-                      color="currentColor"
-                      noVerticalAlign={false}
-                      size="sm"
-                      title={null}
+                  <Component>
+                    <li
+                      className="pf-c-breadcrumb__item"
                     >
-                      <svg
-                        aria-hidden={true}
-                        aria-labelledby={null}
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        style={
-                          Object {
-                            "verticalAlign": "-0.125em",
-                          }
-                        }
-                        viewBox="0 0 256 512"
-                        width="1em"
+                      Section Home
+                      <span
+                        className="pf-c-breadcrumb__item-divider"
                       >
-                        <path
-                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                          transform=""
-                        />
-                      </svg>
-                    </AngleRightIcon>
-                  </span>
-                </li>
-              </Component>
-              <Component
-                to="#"
-              >
-                <li
-                  className="pf-c-breadcrumb__item"
-                >
-                  <a
-                    className="pf-c-breadcrumb__link"
-                    href="#"
-                    target={null}
-                  >
-                    Section Title
-                  </a>
-                  <span
-                    className="pf-c-breadcrumb__item-divider"
+                        <AngleRightIcon
+                          color="currentColor"
+                          noVerticalAlign={false}
+                          size="sm"
+                          title={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            aria-labelledby={null}
+                            fill="currentColor"
+                            height="1em"
+                            role="img"
+                            style={
+                              Object {
+                                "verticalAlign": "-0.125em",
+                              }
+                            }
+                            viewBox="0 0 256 512"
+                            width="1em"
+                          >
+                            <path
+                              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                              transform=""
+                            />
+                          </svg>
+                        </AngleRightIcon>
+                      </span>
+                    </li>
+                  </Component>
+                  <Component
+                    to="#"
                   >
-                    <AngleRightIcon
-                      color="currentColor"
-                      noVerticalAlign={false}
-                      size="sm"
-                      title={null}
+                    <li
+                      className="pf-c-breadcrumb__item"
                     >
-                      <svg
-                        aria-hidden={true}
-                        aria-labelledby={null}
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        style={
-                          Object {
-                            "verticalAlign": "-0.125em",
-                          }
-                        }
-                        viewBox="0 0 256 512"
-                        width="1em"
+                      <a
+                        className="pf-c-breadcrumb__link"
+                        href="#"
+                        target={null}
                       >
-                        <path
-                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                          transform=""
-                        />
-                      </svg>
-                    </AngleRightIcon>
-                  </span>
-                </li>
-              </Component>
-              <Component
-                to="#"
-              >
-                <li
-                  className="pf-c-breadcrumb__item"
-                >
-                  <a
-                    className="pf-c-breadcrumb__link"
-                    href="#"
-                    target={null}
-                  >
-                    Section Title
-                  </a>
-                  <span
-                    className="pf-c-breadcrumb__item-divider"
+                        Section Title
+                      </a>
+                      <span
+                        className="pf-c-breadcrumb__item-divider"
+                      >
+                        <AngleRightIcon
+                          color="currentColor"
+                          noVerticalAlign={false}
+                          size="sm"
+                          title={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            aria-labelledby={null}
+                            fill="currentColor"
+                            height="1em"
+                            role="img"
+                            style={
+                              Object {
+                                "verticalAlign": "-0.125em",
+                              }
+                            }
+                            viewBox="0 0 256 512"
+                            width="1em"
+                          >
+                            <path
+                              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                              transform=""
+                            />
+                          </svg>
+                        </AngleRightIcon>
+                      </span>
+                    </li>
+                  </Component>
+                  <Component
+                    to="#"
                   >
-                    <AngleRightIcon
-                      color="currentColor"
-                      noVerticalAlign={false}
-                      size="sm"
-                      title={null}
+                    <li
+                      className="pf-c-breadcrumb__item"
                     >
-                      <svg
-                        aria-hidden={true}
-                        aria-labelledby={null}
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        style={
-                          Object {
-                            "verticalAlign": "-0.125em",
-                          }
-                        }
-                        viewBox="0 0 256 512"
-                        width="1em"
+                      <a
+                        className="pf-c-breadcrumb__link"
+                        href="#"
+                        target={null}
                       >
-                        <path
-                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                          transform=""
-                        />
-                      </svg>
-                    </AngleRightIcon>
-                  </span>
-                </li>
-              </Component>
-              <Component
-                isActive={true}
-                to="#"
-              >
-                <li
-                  className="pf-c-breadcrumb__item"
-                >
-                  <a
-                    aria-current="page"
-                    className="pf-c-breadcrumb__link pf-m-current"
-                    href="#"
-                    target={null}
+                        Section Title
+                      </a>
+                      <span
+                        className="pf-c-breadcrumb__item-divider"
+                      >
+                        <AngleRightIcon
+                          color="currentColor"
+                          noVerticalAlign={false}
+                          size="sm"
+                          title={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            aria-labelledby={null}
+                            fill="currentColor"
+                            height="1em"
+                            role="img"
+                            style={
+                              Object {
+                                "verticalAlign": "-0.125em",
+                              }
+                            }
+                            viewBox="0 0 256 512"
+                            width="1em"
+                          >
+                            <path
+                              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                              transform=""
+                            />
+                          </svg>
+                        </AngleRightIcon>
+                      </span>
+                    </li>
+                  </Component>
+                  <Component
+                    isActive={true}
+                    to="#"
                   >
-                    Section Landing
-                  </a>
-                </li>
-              </Component>
-            </ol>
-          </nav>
+                    <li
+                      className="pf-c-breadcrumb__item"
+                    >
+                      <a
+                        aria-current="page"
+                        className="pf-c-breadcrumb__link pf-m-current"
+                        href="#"
+                        target={null}
+                      >
+                        Section Landing
+                      </a>
+                    </li>
+                  </Component>
+                </ol>
+              </nav>
+            </Breadcrumb>
+          </ComponentWithOuia>
         </Component>
       </section>
       <Component