Breadcrumbs Types (#700)

* changed to tsx

* Breadcrumb to typescript

* Breadcrumbs to typescript

* index to typescript

* Small typo change

* Removed blank line

* Removed another empty linke

* Another empty line

libraries/core-react/src/Breadcrumbs/Breadcrumb.jsx → libraries/core-react/src/Breadcrumbs/Breadcrumb.tsx

@@ -1,12 +1,12 @@
-// @ts-nocheck
 import React, { forwardRef } from 'react'
-import PropTypes from 'prop-types'
 import styled, { css } from 'styled-components'
 import { Typography } from '../Typography'
 import { Tooltip } from '../Tooltip'
 import { breadcrumbs as tokens } from './Breadcrumbs.tokens'
 
-const StyleTypography = styled(Typography)`
+type StyledProps = Pick<Props, 'maxWidth'>
+
+const StyledTypography = styled(Typography)<StyledProps>`
   &:hover {
     text-decoration: underline;
     color: ${tokens.colors.hover};
@@ -27,13 +27,24 @@ const StyleTypography = styled(Typography)`
   ${({ maxWidth }) => css({ maxWidth })}
 `
 
-export const Breadcrumb = forwardRef(function Breadcrumb(
-  { className, children, maxWidth, ...rest },
+type Props = {
+  /* Max label width in pixels,
+   * truncate long labels based on this width */
+  maxWidth?: number
+  /* click handler function */
+  onClick?: () => void
+  /** Children is breadcrumb text */
+  children: string
+  /** Classname  */
+  className?: string
+}
+
+export const Breadcrumb = forwardRef<HTMLDivElement, Props>(function Breadcrumb(
+  { children, maxWidth, ...other },
   ref,
 ) {
   const props = {
-    ...rest,
-    className,
+    ...other,
     ref,
     maxWidth: maxWidth,
   }
@@ -42,39 +53,19 @@ export const Breadcrumb = forwardRef(function Breadcrumb(
 
   const WithTooltip = (
     <Tooltip title={children}>
-      <StyleTypography link variant="body_short" {...props}>
+      <StyledTypography link variant="body_short" {...props}>
         {children}
-      </StyleTypography>
+      </StyledTypography>
     </Tooltip>
   )
 
   return tooltip ? (
     WithTooltip
   ) : (
-    <StyleTypography link variant="body_short" {...props}>
+    <StyledTypography link variant="body_short" {...props}>
       {children}
-    </StyleTypography>
+    </StyledTypography>
   )
 })
 
 Breadcrumb.displayName = 'eds-breadcrumb'
-
-Breadcrumb.propTypes = {
-  /*
-   * Max label width in pixels,
-   * truncate long labels based on this width
-   */
-  maxWidth: PropTypes.number,
-  // click handler function
-  onClick: PropTypes.func,
-  // Breadcrumb children
-  children: PropTypes.node.isRequired,
-  /** @ignore */
-  className: PropTypes.string,
-}
-
-Breadcrumb.defaultProps = {
-  maxWidth: undefined,
-  className: '',
-  onClick: () => {},
-}

libraries/core-react/src/Breadcrumbs/Breadcrumbs.tokens.js → libraries/core-react/src/Breadcrumbs/Breadcrumbs.tokens.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { tokens } from '@equinor/eds-tokens'
 
 const {

libraries/core-react/src/Breadcrumbs/Breadcrumbs.jsx → libraries/core-react/src/Breadcrumbs/Breadcrumbs.tsx

@@ -1,6 +1,4 @@
-// @ts-nocheck
 import React, { forwardRef, useState, Fragment } from 'react'
-import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { breadcrumbs as tokens } from './Breadcrumbs.tokens'
 import { Typography } from '../Typography'
@@ -38,13 +36,18 @@ const Collapsed = styled(Typography)`
   text-decoration: none;
 `
 
-export const Breadcrumbs = forwardRef(function Breadcrumbs(
-  { className, children, collapse, ...rest },
+type Props = {
+  /* Collapses the list of breadcrumbs so that only the first
+   * and last breadcrumb will be shown, with an ellipsis in between.  */
+  collapse?: boolean
+} & JSX.IntrinsicElements['nav']
+
+export const Breadcrumbs = forwardRef<HTMLElement, Props>(function Breadcrumbs(
+  { children, collapse, ...rest },
   ref,
 ) {
   const props = {
     ...rest,
-    className,
     ref,
   }
 
@@ -103,20 +106,3 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
 })
 
 Breadcrumbs.displayName = 'eds-breadcrumbs'
-
-Breadcrumbs.propTypes = {
-  /*
-   * Collapses the list of breadcrumbs so that only the first
-   * and last breadcrumb will be shown, with an ellipsis in between.
-   */
-  collapse: PropTypes.bool,
-  // Breadcrumbs children
-  children: PropTypes.node.isRequired,
-  /** @ignore */
-  className: PropTypes.string,
-}
-
-Breadcrumbs.defaultProps = {
-  className: '',
-  collapse: false,
-}

libraries/core-react/src/Breadcrumbs/index.ts

@@ -0,0 +1,12 @@
+import { Breadcrumbs as BaseComponent } from './Breadcrumbs'
+import { Breadcrumb } from './Breadcrumb'
+
+type BreadcrumbsTypes = typeof BaseComponent & {
+  Breadcrumb: typeof Breadcrumb
+}
+
+const Breadcrumbs = BaseComponent as BreadcrumbsTypes
+
+Breadcrumbs.Breadcrumb = Breadcrumb
+
+export { Breadcrumbs }