feat: Add Typescript typings to Breadcrumb, BreadcrumbItems, and Brea…

…dcrumbSkeleton (#15033)

* feat: add types for Breadcrumbs

* revert: undo PropType changes and supress TS error instead

---------

Co-authored-by: Andrea N. Cardona <[email protected]>

.all-contributorsrc

@@ -1314,6 +1314,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "Tresau-IBM",
+      "name": "Tresau-IBM",
+      "avatar_url": "https://avatars.githubusercontent.com/u/148357638?v=4",
+      "profile": "https://github.com/Tresau-IBM",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"

README.md

@@ -261,6 +261,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/Nirajsah"><img src="https://avatars.githubusercontent.com/u/51414373?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Niraj Sah</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Nirajsah" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/allisonishida"><img src="https://avatars.githubusercontent.com/u/22247062?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Allison Ishida</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=allisonishida" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/alewitt2"><img src="https://avatars.githubusercontent.com/u/48691328?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Alex Lewitt</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=alewitt2" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/Tresau-IBM"><img src="https://avatars.githubusercontent.com/u/148357638?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Tresau-IBM</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Tresau-IBM" title="Code">💻</a></td>
   </tr>
 </table>
 

packages/react/src/components/Breadcrumb/Breadcrumb.Skeleton.js → packages/react/src/components/Breadcrumb/Breadcrumb.Skeleton.tsx

@@ -10,6 +10,14 @@ import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
 
+export interface BreadcrumbSkeletonProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Specify an optional className to add.
+   */
+  className?: string;
+}
+
 function Item() {
   const prefix = usePrefix();
 
@@ -20,7 +28,7 @@ function Item() {
   );
 }
 
-function BreadcrumbSkeleton({ className, ...rest }) {
+function BreadcrumbSkeleton({ className, ...rest }: BreadcrumbSkeletonProps) {
   const prefix = usePrefix();
   const classes = cx(`${prefix}--breadcrumb`, `${prefix}--skeleton`, className);
 

packages/react/src/components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,82 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import PropTypes from 'prop-types';
+import React, { PropsWithChildren } from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix';
+import { ForwardRefReturn } from '../../types/common';
+
+export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
+  /**
+   * Specify the label for the breadcrumb container
+   */
+  'aria-label'?: string;
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className?: string;
+
+  /**
+   * Optional prop to omit the trailing slash for the breadcrumbs
+   */
+  noTrailingSlash?: boolean;
+}
+
+const Breadcrumb: ForwardRefReturn<HTMLElement, BreadcrumbProps> =
+  React.forwardRef(function Breadcrumb(
+    {
+      'aria-label': ariaLabel,
+      children,
+      className: customClassNameNav,
+      noTrailingSlash,
+      ...rest
+    }: PropsWithChildren<BreadcrumbProps>,
+    ref: React.Ref<HTMLElement>
+  ) {
+    const prefix = usePrefix();
+    const className = cx({
+      [`${prefix}--breadcrumb`]: true,
+      [`${prefix}--breadcrumb--no-trailing-slash`]: noTrailingSlash,
+    });
+
+    return (
+      <nav
+        className={customClassNameNav}
+        aria-label={ariaLabel ? ariaLabel : 'Breadcrumb'}
+        ref={ref}
+        {...rest}>
+        <ol className={className}>{children}</ol>
+      </nav>
+    );
+  });
+
+Breadcrumb.displayName = 'Breadcrumb';
+Breadcrumb.propTypes = {
+  /**
+   * Specify the label for the breadcrumb container
+   */
+  'aria-label': PropTypes.string,
+
+  /**
+   * Pass in the BreadcrumbItem's for your Breadcrumb
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Optional prop to omit the trailing slash for the breadcrumbs
+   */
+  noTrailingSlash: PropTypes.bool,
+};
+
+export default Breadcrumb;