Refactor Card to typescript

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

@@ -1,10 +1,9 @@
-/* eslint-disable no-undef */
 import React from 'react'
 import { render, cleanup } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import 'jest-styled-components'
 import styled from 'styled-components'
-import { Typography } from '..'
+import { Typography } from '../Typography'
 
 import { Card } from '.'
 

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

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

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

@@ -1,13 +1,21 @@
-// @ts-nocheck
 import React, { forwardRef } from 'react'
-import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { card as tokens } from './Card.tokens'
 import { spacingsTemplate } from '../_common/templates'
 
 const { spacings, shape } = tokens
 
-const StyledCard = styled.div`
+type StyledCardProps = {
+  background: string
+  cursor: string
+} & React.HTMLAttributes<HTMLDivElement>
+
+type Props = {
+  /** Variant */
+  variant?: 'default' | 'info' | 'warning' | 'danger'
+} & React.HTMLAttributes<HTMLDivElement>
+
+const StyledCard = styled.div<StyledCardProps>`
   height: fit-content;
   width: 100%;
   min-width: ${shape.minWidth};
@@ -26,8 +34,8 @@ const StyledCard = styled.div`
   ${spacingsTemplate(spacings)}
 `
 
-export const Card = forwardRef(function EdsCard(
-  { children, className, variant, onClick, ...rest },
+export const Card = forwardRef<HTMLDivElement, Props>(function EdsCard(
+  { children, className, variant = 'default', onClick, ...rest },
   ref,
 ) {
   const cursor = onClick ? 'pointer' : 'default'
@@ -48,21 +56,3 @@ export const Card = forwardRef(function EdsCard(
 })
 
 Card.displayName = 'eds-card'
-
-Card.propTypes = {
-  // Background color:
-  variant: PropTypes.oneOf(['default', 'info', 'warning', 'danger']),
-  // Onclick function (for clickable cards)
-  onClick: PropTypes.func,
-  /** @ignore */
-  className: PropTypes.string,
-  /** @ignore */
-  children: PropTypes.node,
-}
-
-Card.defaultProps = {
-  variant: 'default',
-  onClick: undefined,
-  className: '',
-  children: undefined,
-}

libraries/core-react/src/Card/CardActions.tsx

@@ -0,0 +1,41 @@
+import React, { forwardRef } from 'react'
+import styled from 'styled-components'
+import { Typography } from '../Typography'
+
+type Props = {
+  alignRight?: boolean
+  meta?: string
+} & React.HTMLAttributes<HTMLDivElement>
+
+const StyledCardActions = styled.div<React.CSSProperties>`
+  display: grid;
+  grid-gap: 8px;
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
+  align-items: center;
+  justify-content: ${({ justifyContent }) => justifyContent};
+`
+
+export const CardActions = forwardRef<HTMLDivElement, Props>(
+  function EdsCardActions(
+    { children, className = '', alignRight = false, meta = '', ...rest },
+    ref,
+  ) {
+    const justifyContent = alignRight ? 'flex-end' : 'flex-start'
+    const props = {
+      ...rest,
+      className,
+      ref,
+      justifyContent,
+    }
+
+    return (
+      <StyledCardActions {...props}>
+        {children}
+        {meta !== '' && <Typography variant="caption">{meta}</Typography>}
+      </StyledCardActions>
+    )
+  },
+)
+
+CardActions.displayName = 'eds-card-actions'

libraries/core-react/src/Card/CardHeader.tsx

@@ -0,0 +1,30 @@
+import React, { forwardRef } from 'react'
+import styled from 'styled-components'
+
+import { card as tokens } from './Card.tokens'
+
+type Props = React.HTMLAttributes<HTMLDivElement>
+
+const StyledCardHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  > :not(:first-child) {
+    margin-left: ${tokens.spacings.left};
+  }
+`
+
+export const CardHeader = forwardRef<HTMLDivElement, Props>(
+  function EdsCardHeader({ children, className = '', ...rest }, ref) {
+    const props = {
+      ...rest,
+      className,
+      ref,
+    }
+
+    return <StyledCardHeader {...props}>{children}</StyledCardHeader>
+  },
+)
+
+CardHeader.displayName = 'eds-card-header'

libraries/core-react/src/Card/CardHeaderTitle.tsx

@@ -0,0 +1,24 @@
+import React, { forwardRef } from 'react'
+import styled from 'styled-components'
+
+type Props = React.HTMLAttributes<HTMLDivElement>
+
+const StyledCardHeaderTitle = styled.div`
+  display: grid;
+  flex-grow: 2;
+  grid-auto-columns: auto;
+`
+
+export const CardHeaderTitle = forwardRef<HTMLDivElement, Props>(
+  function EdsCardHeaderTitle({ children, className = '', ...rest }, ref) {
+    const props = {
+      ...rest,
+      className,
+      ref,
+    }
+
+    return <StyledCardHeaderTitle {...props}>{children}</StyledCardHeaderTitle>
+  },
+)
+
+CardHeaderTitle.displayName = 'eds-card-header-title'

libraries/core-react/src/Card/CardMedia.jsx → libraries/core-react/src/Card/CardMedia.tsx

@@ -1,11 +1,14 @@
-// @ts-nocheck
 import React, { forwardRef } from 'react'
-import PropTypes from 'prop-types'
 import styled, { css } from 'styled-components'
 
 import { card as tokens } from './Card.tokens'
 
-const StyledCardMedia = styled.div`
+type Props = {
+  fullWidth?: boolean
+  spacing?: typeof tokens.spacings.left
+} & React.HTMLAttributes<HTMLDivElement>
+
+const StyledCardMedia = styled.div<Props>`
   display: flex;
   width: 100%;
   &:last-child {
@@ -36,34 +39,21 @@ const StyledCardMedia = styled.div`
         `}
 `
 
-export const CardMedia = forwardRef(function EdsCardMedia(
-  { children, className, fullWidth, ...rest },
-  ref,
-) {
-  const props = {
-    ...rest,
-    className,
+export const CardMedia = forwardRef<HTMLDivElement, Props>(
+  function EdsCardMedia(
+    { children, className = '', fullWidth = false, ...rest },
     ref,
-    fullWidth,
-    spacing: tokens.spacings.left,
-  }
-
-  return <StyledCardMedia {...props}>{children}</StyledCardMedia>
-})
+  ) {
+    const props = {
+      ...rest,
+      className,
+      ref,
+      fullWidth,
+      spacing: tokens.spacings.left,
+    }
+
+    return <StyledCardMedia {...props}>{children}</StyledCardMedia>
+  },
+)
 
 CardMedia.displayName = 'eds-card-media'
-
-CardMedia.propTypes = {
-  // Full width ignores Card padding
-  fullWidth: PropTypes.bool,
-  /** @ignore */
-  children: PropTypes.node,
-  /** @ignore */
-  className: PropTypes.string,
-}
-
-CardMedia.defaultProps = {
-  fullWidth: false,
-  className: '',
-  children: undefined,
-}

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

@@ -1,10 +1,18 @@
-// @ts-nocheck
-import { Card } from './Card'
+import { Card as CardWrapper } from './Card'
 import { CardActions } from './CardActions'
 import { CardMedia } from './CardMedia'
 import { CardHeader } from './CardHeader'
 import { CardHeaderTitle } from './CardHeaderTitle'
 
+type CardType = typeof CardWrapper & {
+  CardActions: typeof CardActions
+  CardHeader: typeof CardHeader
+  CardMedia: typeof CardMedia
+  CardHeaderTitle: typeof CardHeaderTitle
+}
+
+const Card = CardWrapper as CardType
+
 Card.CardActions = CardActions
 Card.CardHeader = CardHeader
 Card.CardMedia = CardMedia