Banner typescript (#716)

* Make file types typescript

* Typescript support for Banner

* Fix prettier issues

libraries/core-react/src/Banner/Banner.test.jsx → libraries/core-react/src/Banner/Banner.test.tsx

@@ -18,7 +18,7 @@ const StyledBanner = styled(Banner)`
 
 const { enabled } = tokens
 
-const rgbaTrim = (x) => x.split(' ').join('')
+const rgbaTrim = (x: string) => x.split(' ').join('')
 
 afterEach(cleanup)
 

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

@@ -1,5 +1,4 @@
 /* eslint-disable camelcase */
-// @ts-nocheck
 import { tokens } from '@equinor/eds-tokens'
 
 const {

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

@@ -1,15 +1,18 @@
-// @ts-nocheck
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, { FC, HTMLAttributes, ReactNode } from 'react'
 import styled from 'styled-components'
 import { banner as tokens } from './Banner.tokens'
 import { Divider } from '../Divider'
+import { BannerIcon } from './BannerIcon'
 
 const { enabled } = tokens
 
 const StyledBanner = styled.div``
 
-const Content = styled.div`
+type ContentProps = {
+  hasIcon: boolean
+}
+
+const Content = styled.div<ContentProps>`
   padding: ${enabled.spacings};
   display: grid;
   grid-template-columns: ${({ hasIcon }) =>
@@ -22,11 +25,18 @@ const NonMarginDivider = styled(Divider)`
   height: 2px;
 `
 
-export const Banner = ({ children, className, ...props }) => {
-  const displayNames = React.Children.map(children, (child) => {
-    return child.type && child.type.displayName
-  })
-  const hasIcon = displayNames.includes('eds-banner-icon')
+type Props = {
+  children: ReactNode
+} & HTMLAttributes<HTMLDivElement>
+
+export const Banner: FC<Props> = ({ children, className, ...props }) => {
+  const childrenWhereBannerIcon: boolean[] = React.Children.map(
+    children,
+    (child) => {
+      return React.isValidElement(child) && child.type === BannerIcon
+    },
+  )
+  const hasIcon = childrenWhereBannerIcon.some((bool) => bool)
 
   return (
     <StyledBanner {...props} className={className}>
@@ -37,14 +47,3 @@ export const Banner = ({ children, className, ...props }) => {
 }
 
 Banner.displayName = 'eds-banner'
-
-Banner.propTypes = {
-  /** @ignore */
-  className: PropTypes.string,
-  /** @ignore */
-  children: PropTypes.node.isRequired,
-}
-
-Banner.defaultProps = {
-  className: undefined,
-}

libraries/core-react/src/Banner/BannerActions.jsx → libraries/core-react/src/Banner/BannerActions.tsx

@@ -1,12 +1,16 @@
-// @ts-nocheck
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, { FC, HTMLAttributes, ReactNode } from 'react'
 import styled from 'styled-components'
 import { banner as tokens } from './Banner.tokens'
 
 const { enabled } = tokens
 
-const StyledBannerActions = styled.div`
+type BannerActionsPlacement = 'bottom' | 'left'
+
+type StyledBannerActionsProps = {
+  placement: BannerActionsPlacement
+}
+
+const StyledBannerActions = styled.div<StyledBannerActionsProps>`
   margin-left: ${enabled.spacings};
   grid-column: ${({ placement }) => (placement === 'bottom' ? '1/-1' : 'auto')};
   ${({ placement }) =>
@@ -16,7 +20,17 @@ const StyledBannerActions = styled.div`
     }}
 `
 
-export const BannerActions = ({ children, placement, className, ...props }) => {
+type Props = {
+  children: ReactNode
+  placement?: BannerActionsPlacement
+} & HTMLAttributes<HTMLDivElement>
+
+export const BannerActions: FC<Props> = ({
+  children,
+  placement = 'left',
+  className,
+  ...props
+}) => {
   return (
     <StyledBannerActions {...props} placement={placement} className={className}>
       {children}
@@ -25,17 +39,3 @@ export const BannerActions = ({ children, placement, className, ...props }) => {
 }
 
 BannerActions.displayName = 'eds-banner-actions'
-
-BannerActions.propTypes = {
-  /** @ignore */
-  className: PropTypes.string,
-  /** Placement of the action button/s */
-  placement: PropTypes.oneOf(['bottom', 'left']),
-  /** @ignore */
-  children: PropTypes.node.isRequired,
-}
-
-BannerActions.defaultProps = {
-  className: undefined,
-  placement: 'left',
-}

libraries/core-react/src/Banner/BannerIcon.jsx → libraries/core-react/src/Banner/BannerIcon.tsx

@@ -1,11 +1,17 @@
-// @ts-nocheck
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, { FC, HTMLAttributes, ReactNode } from 'react'
 import styled from 'styled-components'
 import { banner as tokens } from './Banner.tokens'
+import { Icon } from '../Icon'
 
 const { enabled } = tokens
-const StyledBannerIcon = styled.span`
+
+type BannerIconVariant = 'info' | 'warning'
+
+type StyledBannerIconProps = {
+  variant: BannerIconVariant
+}
+
+const StyledBannerIcon = styled.span<StyledBannerIconProps>`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -20,14 +26,26 @@ const StyledBannerIcon = styled.span`
   margin-right: ${enabled.spacings};
 `
 
-export const BannerIcon = ({ children, variant, ...props }) => {
+type Props = {
+  /** Which icon background and fill color to use. Info = green, warning = red */
+  variant?: BannerIconVariant
+  /** @ignore */
+  children: ReactNode
+} & HTMLAttributes<HTMLSpanElement>
+
+export const BannerIcon: FC<Props> = ({
+  children,
+  variant = 'info',
+  ...props
+}) => {
   const childrenWithColor = React.Children.map(children, (child) => {
     const color =
       variant === 'warning'
         ? enabled.icon.warning.color
         : enabled.icon.info.color
     return (
-      (child.type.displayName === 'eds-icon' &&
+      (React.isValidElement(child) &&
+        child.type === Icon &&
         React.cloneElement(child, {
           color,
         })) ||
@@ -42,14 +60,3 @@ export const BannerIcon = ({ children, variant, ...props }) => {
 }
 
 BannerIcon.displayName = 'eds-banner-icon'
-
-BannerIcon.propTypes = {
-  /** Which icon background and fill color to use. Info = green, warning = red */
-  variant: PropTypes.oneOf(['info', 'warning']),
-  /** @ignore */
-  children: PropTypes.node.isRequired,
-}
-
-BannerIcon.defaultProps = {
-  variant: 'info',
-}

libraries/core-react/src/Banner/BannerMessage.jsx → libraries/core-react/src/Banner/BannerMessage.tsx

@@ -1,12 +1,16 @@
-// @ts-nocheck
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, { FC } from 'react'
 import styled from 'styled-components'
 import { Typography } from '../Typography'
+import { Props as TypographyProps } from '../Typography/Typography'
 
 const StyledBannerMessage = styled(Typography)``
 
-export const BannerMessage = ({ children, ...props }) => {
+type Props = {
+  /** Text content */
+  children: string
+} & Omit<TypographyProps, 'children'>
+
+export const BannerMessage: FC<Props> = ({ children, ...props }) => {
   return (
     <StyledBannerMessage variant="body_long" {...props}>
       {children}
@@ -15,8 +19,3 @@ export const BannerMessage = ({ children, ...props }) => {
 }
 
 BannerMessage.displayName = 'eds-banner-message'
-
-BannerMessage.propTypes = {
-  /** Text content */
-  children: PropTypes.string.isRequired,
-}

libraries/core-react/src/Banner/index.js → libraries/core-react/src/Banner/index.ts

@@ -1,9 +1,16 @@
-// @ts-nocheck
-import { Banner } from './Banner'
+import { Banner as BaseBanner } from './Banner'
 import { BannerIcon } from './BannerIcon'
 import { BannerMessage } from './BannerMessage'
 import { BannerActions } from './BannerActions'
 
+type BannerProps = typeof BaseBanner & {
+  BannerIcon: typeof BannerIcon
+  BannerMessage: typeof BannerMessage
+  BannerActions: typeof BannerActions
+}
+
+const Banner = BaseBanner as BannerProps
+
 Banner.BannerIcon = BannerIcon
 Banner.BannerMessage = BannerMessage
 Banner.BannerActions = BannerActions

libraries/core-react/src/Typography/Typography.tsx

@@ -81,7 +81,8 @@ const StyledTypography = styled.p<StyledProps>`
       }
     `}
 `
-type Props = {
+
+export type Props = {
   variant?: TypographyVariants
   group?: TypographyGroups
   bold?: boolean