From 220f7463295388e8cce6a083f7b2e733ec3e5338 Mon Sep 17 00:00:00 2001 From: Nicholas Dalhaug Date: Thu, 22 Oct 2020 13:21:42 +0200 Subject: [PATCH] Banner typescript (#716) * Make file types typescript * Typescript support for Banner * Fix prettier issues --- .../{Banner.test.jsx => Banner.test.tsx} | 2 +- .../{Banner.tokens.js => Banner.tokens.ts} | 1 - .../src/Banner/{Banner.jsx => Banner.tsx} | 39 +++++++++--------- .../{BannerActions.jsx => BannerActions.tsx} | 38 ++++++++--------- .../Banner/{BannerIcon.jsx => BannerIcon.tsx} | 41 +++++++++++-------- .../{BannerMessage.jsx => BannerMessage.tsx} | 17 ++++---- .../src/Banner/{index.js => index.ts} | 11 ++++- .../core-react/src/Typography/Typography.tsx | 3 +- 8 files changed, 82 insertions(+), 70 deletions(-) rename libraries/core-react/src/Banner/{Banner.test.jsx => Banner.test.tsx} (98%) rename libraries/core-react/src/Banner/{Banner.tokens.js => Banner.tokens.ts} (98%) rename libraries/core-react/src/Banner/{Banner.jsx => Banner.tsx} (53%) rename libraries/core-react/src/Banner/{BannerActions.jsx => BannerActions.tsx} (52%) rename libraries/core-react/src/Banner/{BannerIcon.jsx => BannerIcon.tsx} (67%) rename libraries/core-react/src/Banner/{BannerMessage.jsx => BannerMessage.tsx} (57%) rename libraries/core-react/src/Banner/{index.js => index.ts} (52%) diff --git a/libraries/core-react/src/Banner/Banner.test.jsx b/libraries/core-react/src/Banner/Banner.test.tsx similarity index 98% rename from libraries/core-react/src/Banner/Banner.test.jsx rename to libraries/core-react/src/Banner/Banner.test.tsx index e0d51d00e1..5e0979ea61 100644 --- a/libraries/core-react/src/Banner/Banner.test.jsx +++ b/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) diff --git a/libraries/core-react/src/Banner/Banner.tokens.js b/libraries/core-react/src/Banner/Banner.tokens.ts similarity index 98% rename from libraries/core-react/src/Banner/Banner.tokens.js rename to libraries/core-react/src/Banner/Banner.tokens.ts index 2a56bd3085..88bc266c7e 100644 --- a/libraries/core-react/src/Banner/Banner.tokens.js +++ b/libraries/core-react/src/Banner/Banner.tokens.ts @@ -1,5 +1,4 @@ /* eslint-disable camelcase */ -// @ts-nocheck import { tokens } from '@equinor/eds-tokens' const { diff --git a/libraries/core-react/src/Banner/Banner.jsx b/libraries/core-react/src/Banner/Banner.tsx similarity index 53% rename from libraries/core-react/src/Banner/Banner.jsx rename to libraries/core-react/src/Banner/Banner.tsx index e80f9152c5..66d0a0e029 100644 --- a/libraries/core-react/src/Banner/Banner.jsx +++ b/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` 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 + +export const Banner: FC = ({ 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 ( @@ -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, -} diff --git a/libraries/core-react/src/Banner/BannerActions.jsx b/libraries/core-react/src/Banner/BannerActions.tsx similarity index 52% rename from libraries/core-react/src/Banner/BannerActions.jsx rename to libraries/core-react/src/Banner/BannerActions.tsx index 0f0bb90d8c..8c4e57cda4 100644 --- a/libraries/core-react/src/Banner/BannerActions.jsx +++ b/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` 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 + +export const BannerActions: FC = ({ + children, + placement = 'left', + className, + ...props +}) => { return ( {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', -} diff --git a/libraries/core-react/src/Banner/BannerIcon.jsx b/libraries/core-react/src/Banner/BannerIcon.tsx similarity index 67% rename from libraries/core-react/src/Banner/BannerIcon.jsx rename to libraries/core-react/src/Banner/BannerIcon.tsx index df5238a381..ff2cdde699 100644 --- a/libraries/core-react/src/Banner/BannerIcon.jsx +++ b/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` 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 + +export const BannerIcon: FC = ({ + 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', -} diff --git a/libraries/core-react/src/Banner/BannerMessage.jsx b/libraries/core-react/src/Banner/BannerMessage.tsx similarity index 57% rename from libraries/core-react/src/Banner/BannerMessage.jsx rename to libraries/core-react/src/Banner/BannerMessage.tsx index 1efd631d71..41f915a5b4 100644 --- a/libraries/core-react/src/Banner/BannerMessage.jsx +++ b/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 + +export const BannerMessage: FC = ({ children, ...props }) => { return ( {children} @@ -15,8 +19,3 @@ export const BannerMessage = ({ children, ...props }) => { } BannerMessage.displayName = 'eds-banner-message' - -BannerMessage.propTypes = { - /** Text content */ - children: PropTypes.string.isRequired, -} diff --git a/libraries/core-react/src/Banner/index.js b/libraries/core-react/src/Banner/index.ts similarity index 52% rename from libraries/core-react/src/Banner/index.js rename to libraries/core-react/src/Banner/index.ts index 94c7dece6a..9e288505f3 100644 --- a/libraries/core-react/src/Banner/index.js +++ b/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 diff --git a/libraries/core-react/src/Typography/Typography.tsx b/libraries/core-react/src/Typography/Typography.tsx index 45ffc39911..6b1cc068c1 100644 --- a/libraries/core-react/src/Typography/Typography.tsx +++ b/libraries/core-react/src/Typography/Typography.tsx @@ -81,7 +81,8 @@ const StyledTypography = styled.p` } `} ` -type Props = { + +export type Props = { variant?: TypographyVariants group?: TypographyGroups bold?: boolean