feat(Breadcrumb): Convert Breadcrumb jsx file to tsx

packages/patternfly-4/react-core/src/components/Breadcrumb/Breadcrumb.md

@@ -1,6 +1,7 @@
 ---
 title: 'Breadcrumb'
 cssPrefix: 'pf-c-breadcrumb'
+typescript: true
 ---
 import { Breadcrumb, BreadcrumbItem, BreadcrumbHeading } from '@patternfly/react-core';
 

packages/patternfly-4/react-core/src/components/Breadcrumb/Breadcrumb.test.js → packages/patternfly-4/react-core/src/components/Breadcrumb/Breadcrumb.test.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import Breadcrumb from './Breadcrumb';
-import BreadcrumbItem from './BreadcrumbItem';
+import * as React from 'react';
+import { Breadcrumb } from './Breadcrumb';
+import { BreadcrumbItem } from './BreadcrumbItem';
 import { shallow } from 'enzyme';
 
 describe('Breadcrumb component', () => {

packages/patternfly-4/react-core/src/components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import styles from '@patternfly/patternfly/components/Breadcrumb/breadcrumb.css';
+import { css } from '@patternfly/react-styles';
+
+export interface BreadcrumbProps extends React.HTMLProps<HTMLElement> {
+  /** Children nodes be rendered to the BreadCrumb. Should be of type BreadCrumbItem. */
+  children?: React.ReactNode;
+  /** Additional classes added to the breadcrumb nav. */
+  className?: string;
+  /** Aria label added to the breadcrumb nav. */
+  'aria-label'?: string;
+}
+
+export const Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({
+  children = null,
+  className = '',
+  'aria-label': ariaLabel = 'Breadcrumb',
+  ...props
+}: BreadcrumbProps) => (
+  <nav {...props} aria-label={ariaLabel} className={css(styles.breadcrumb, className)}>
+    <ol className={css(styles.breadcrumbList)}>{children}</ol>
+  </nav>
+);

packages/patternfly-4/react-core/src/components/Breadcrumb/BreadcrumbHeading.test.js → packages/patternfly-4/react-core/src/components/Breadcrumb/BreadcrumbHeading.test.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import BreadcrumbHeading from './BreadcrumbHeading';
+import * as React from 'react';
+import { BreadcrumbHeading } from './BreadcrumbHeading';
 import { shallow } from 'enzyme';
 
 describe('BreadcrumbHeading component', () => {
@@ -18,7 +18,7 @@ describe('BreadcrumbHeading component', () => {
     expect(view).toMatchSnapshot();
   });
 
-  test('should render link breadcrumbTItle', () => {
+  test('should render link breadcrumbTitle', () => {
     const view = shallow(<BreadcrumbHeading to="/somewhere">Item</BreadcrumbHeading>);
     expect(view).toMatchSnapshot();
   });

packages/patternfly-4/react-core/src/components/Breadcrumb/BreadcrumbHeading.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import styles from '@patternfly/patternfly/components/Breadcrumb/breadcrumb.css';
+import { css } from '@patternfly/react-styles';
+
+export interface BreadcrumbHeadingProps extends React.HTMLProps<HTMLLIElement> {
+  /** Content rendered inside the breadcrumb title. */
+  children?: React.ReactNode;
+  /** Additional classes added to the breadcrumb item. */
+  className?: string;
+  /** HREF for breadcrumb link. */
+  to?: string;
+  /** Target for breadcrumb link. */
+  target?: string;
+  /** Sets the base component to render. Defaults to <a> */
+  component?: React.ReactNode;
+}
+
+export const BreadcrumbHeading: React.FunctionComponent<BreadcrumbHeadingProps> = ({
+  children = null,
+  className = '',
+  to = null,
+  target = null,
+  component = 'a',
+  ...props
+}: BreadcrumbHeadingProps) => {
+  const Component = component as any;
+  return (
+    <li {...props} className={css(styles.breadcrumbItem, className)}>
+      <h1 className={css(styles.breadcrumbHeading)}>
+        {to && (
+          <Component
+            href={to}
+            target={target}
+            className={css(styles.breadcrumbLink, styles.modifiers.current)}
+            aria-current="page"
+          >
+            {children}
+          </Component>
+        )}
+        {!to && <React.Fragment>{children}</React.Fragment>}
+      </h1>
+    </li>
+  );
+}

packages/patternfly-4/react-core/src/components/Breadcrumb/BreadcrumbItem.test.js → packages/patternfly-4/react-core/src/components/Breadcrumb/BreadcrumbItem.test.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import BreadcrumbItem from './BreadcrumbItem';
+import * as React from 'react';
+import { BreadcrumbItem } from './BreadcrumbItem';
 import { shallow } from 'enzyme';
 
 describe('BreadcrumbItem component', () => {

packages/patternfly-4/react-core/src/components/Breadcrumb/BreadcrumbItem.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { AngleRightIcon } from '@patternfly/react-icons';
+import styles from '@patternfly/patternfly/components/Breadcrumb/breadcrumb.css';
+import { css, getModifier } from '@patternfly/react-styles';
+
+export interface BreadcrumbItemProps extends React.HTMLProps<HTMLLIElement> {
+  /** Content rendered inside the breadcrumb item. */
+  children?: React.ReactNode;
+  /** Additional classes added to the breadcrumb item. */
+  className?: string;
+  /** HREF for breadcrumb link. */
+  to?: string;
+  /** Flag indicating whether the item is active. */
+  isActive?: boolean;
+  /** Target for breadcrumb link. */
+  target?: string;
+  /** Sets the base component to render. Defaults to <a> */
+  component?: React.ReactNode;
+}
+
+export const BreadcrumbItem: React.FunctionComponent<BreadcrumbItemProps> = ({
+  children = null,
+  className = '',
+  to = null,
+  isActive = false,
+  target = null,
+  component = 'a',
+  ...props
+}) => {
+  const Component = component as any;
+  return (
+    <li {...props} className={css(styles.breadcrumbItem, className)}>
+      {to && (
+        <Component
+          href={to}
+          target={target}
+          className={css(styles.breadcrumbLink, isActive ? getModifier(styles, 'current') : '')}
+          aria-current={isActive ? 'page' : undefined}
+        >
+          {children}
+        </Component>
+      )}
+      {!to && <React.Fragment>{children}</React.Fragment>}
+      {!isActive && (
+        <span className={css(styles.breadcrumbItemDivider)}>
+          <AngleRightIcon />
+        </span>
+      )}
+    </li>
+  );
+}

packages/patternfly-4/react-core/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.js.snap → packages/patternfly-4/react-core/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap

@@ -19,25 +19,17 @@ exports[`Breadcrumb component should render breadcrumb with children 1`] = `
   <ol
     className="pf-c-breadcrumb__list"
   >
-    <BreadcrumbItem
-      className=""
-      component="a"
-      isActive={false}
-      target={null}
+    <Component
       to="#"
     >
       Item 1
-    </BreadcrumbItem>
+    </Component>
 
-    <BreadcrumbItem
-      className=""
-      component="a"
-      isActive={false}
-      target={null}
+    <Component
       to="#"
     >
       Item 1
-    </BreadcrumbItem>
+    </Component>
   </ol>
 </nav>
 `;

packages/patternfly-4/react-core/src/components/Breadcrumb/__snapshots__/BreadcrumbHeading.test.js.snap → packages/patternfly-4/react-core/src/components/Breadcrumb/__snapshots__/BreadcrumbHeading.test.tsx.snap

@@ -56,7 +56,7 @@ exports[`BreadcrumbHeading component should render default breadcrumbHeading 1`]
 </li>
 `;
 
-exports[`BreadcrumbHeading component should render link breadcrumbTItle 1`] = `
+exports[`BreadcrumbHeading component should render link breadcrumbTitle 1`] = `
 <li
   className="pf-c-breadcrumb__item"
 >