Convert Dialog to typescript (#683)

* Change suffix to ts(x)

* Change suffix to tsx

* add types for tokens

* typify Dialog

* fix stuff

libraries/core-react/src/Dialog/Actions.tsx

@@ -0,0 +1,33 @@
+import React, { forwardRef } from 'react'
+import styled, { css } from 'styled-components'
+import { dialog as tokens } from './Dialog.tokens'
+
+const { spacingsMedium } = tokens
+
+const StyledActions = styled.div<Props>`
+  min-height: 48px;
+  padding: 0 ${spacingsMedium};
+  align-self: end;
+  justify-self: start;
+
+  ${({ children }) =>
+    !children &&
+    css`
+      min-height: initial;
+      height: 8px;
+    `}
+`
+
+type Props = React.HTMLAttributes<HTMLDivElement>
+
+export const Actions = forwardRef<HTMLDivElement, Props>(
+  function EdsDialogActions({ children, ...props }, ref) {
+    return (
+      <StyledActions ref={ref} {...props}>
+        {children}
+      </StyledActions>
+    )
+  },
+)
+
+Actions.displayName = 'eds-dialog-actions'

libraries/core-react/src/Dialog/CustomContent.tsx

@@ -0,0 +1,63 @@
+import React, { forwardRef, Fragment } from 'react'
+import styled, { css } from 'styled-components'
+import { Divider } from '../Divider'
+import { typographyTemplate } from '../_common/templates'
+
+import { dialog as tokens } from './Dialog.tokens'
+
+const { description, spacingsMedium } = tokens
+
+const StyledCustomContent = styled.div<Props>`
+  ${typographyTemplate(description)}
+  min-height: 80px;
+  margin-bottom: ${spacingsMedium};
+  align-self: stretch;
+  justify-self: stretch;
+  padding: 0 ${spacingsMedium};
+
+  ${({ scrollable }) =>
+    scrollable &&
+    css`
+      min-height: initial;
+      height: 104px;
+      overflow-y: auto;
+    `}
+`
+
+const StyledDivider = styled(Divider)`
+  width: 100%;
+  margin-top: 0;
+  margin-bottom: ${spacingsMedium};
+`
+
+type Props = {
+  /** @ignore */
+  scrollable?: boolean
+} & React.HTMLAttributes<HTMLDivElement>
+
+export const CustomContent = forwardRef<HTMLDivElement, Props>(
+  function EdsDialogCustomContent(
+    { children, className = '', scrollable = false, ...rest },
+    ref,
+  ) {
+    return (
+      <Fragment>
+        <StyledCustomContent
+          className={className}
+          scrollable={scrollable}
+          id="eds-dialog-customcontent"
+          ref={ref}
+          {...rest}
+        >
+          {children}
+        </StyledCustomContent>
+
+        {children && scrollable && (
+          <StyledDivider color="medium" variant="small" />
+        )}
+      </Fragment>
+    )
+  },
+)
+
+CustomContent.displayName = 'eds-dialog-customcontent'

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

@@ -1,5 +1,5 @@
 /* eslint-disable no-undef */
-import React from 'react'
+import * as React from 'react'
 import { render, cleanup } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import 'jest-styled-components'

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

@@ -1,10 +1,14 @@
 import { tokens } from '@equinor/eds-tokens'
+import type { Typography } from '@equinor/eds-tokens'
 
 const {
   spacings: {
     comfortable: { medium: spacingMedium },
   },
-  typography: { ui, paragraph },
+  typography: {
+    ui: { accordion_header },
+    paragraph: { body_long },
+  },
   elevation: { above_scrim: boxShadow },
   colors: {
     ui: {
@@ -16,13 +20,24 @@ const {
   },
 } = tokens
 
-export const dialog = {
+type Dialog = {
+  width: string
+  minHeight: string
+  background: string
+  borderRadius: string
+  spacingsMedium: string
+  title: Typography
+  description: Typography
+  boxShadow: string
+}
+
+export const dialog: Dialog = {
   width: '252px',
   minHeight: '165px',
   background,
   borderRadius,
   spacingsMedium: spacingMedium,
-  title: { typography: ui.accordion_header },
-  description: { typography: paragraph.body_long },
+  title: accordion_header,
+  description: body_long,
   boxShadow,
 }

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

@@ -1,21 +1,19 @@
-// @ts-nocheck
 import React, { forwardRef } from 'react'
-import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { typographyTemplate } from '../_common/templates'
 import { dialog as tokens } from './Dialog.tokens'
 
 const {
   minHeight,
   width,
-  title: { text },
+  title,
   boxShadow,
   background,
   borderRadius,
   spacingsMedium,
 } = tokens
 
-const StyledDialog = styled.div.attrs(() => ({
+const StyledDialog = styled.div.attrs<Props>(() => ({
   tabIndex: 0,
   role: 'dialog',
   'aria-labelledby': 'eds-dialog-title',
@@ -30,10 +28,12 @@ const StyledDialog = styled.div.attrs(() => ({
   display: grid;
   padding-top: ${spacingsMedium};
 
-  ${typographyTemplate(text)}
+  ${typographyTemplate(title)}
 `
 
-export const Dialog = forwardRef(function EdsDialog(
+type Props = React.HTMLAttributes<HTMLDivElement>
+
+export const Dialog = forwardRef<HTMLDivElement, Props>(function EdsDialog(
   { children, ...props },
   ref,
 ) {
@@ -45,15 +45,3 @@ export const Dialog = forwardRef(function EdsDialog(
 })
 
 Dialog.displayName = 'eds-dialog'
-
-Dialog.propTypes = {
-  /** @ignore */
-  className: PropTypes.string,
-  /** @ignore */
-  children: PropTypes.node,
-}
-
-Dialog.defaultProps = {
-  className: '',
-  children: undefined,
-}

libraries/core-react/src/Dialog/Title.jsx → libraries/core-react/src/Dialog/Title.tsx

@@ -1,19 +1,13 @@
-// @ts-nocheck
-import React, { forwardRef, Fragment } from 'react'
-import PropTypes from 'prop-types'
+import React, { forwardRef, Fragment, FunctionComponent } from 'react'
 import styled, { css } from 'styled-components'
 import { Divider } from '../Divider'
 import { typographyTemplate } from '../_common/templates'
 import { dialog as tokens } from './Dialog.tokens'
 
-const {
-  title: { typography },
-  spacingsMedium,
-} = tokens
+const { title, spacingsMedium } = tokens
 
 const StyledTitle = styled.div`
-  ${typographyTemplate(typography)}
-
+  ${typographyTemplate(title)}
   min-height: 24px;
   align-self: end;
   justify-self: start;
@@ -32,13 +26,20 @@ const StyledDivider = styled(Divider)`
   margin-bottom: ${spacingsMedium};
 `
 
-export const Title = forwardRef(function EdsDialogTitle(
-  { children, ...props },
-  ref,
-) {
+type Props = React.HTMLAttributes<HTMLDivElement>
+
+export const Title: FunctionComponent<Props> = forwardRef<
+  HTMLDivElement,
+  Props
+>(function EdsDialogTitle({ children, className = '', ...props }, ref) {
   return (
     <Fragment>
-      <StyledTitle id="eds-dialog-title" ref={ref} {...props}>
+      <StyledTitle
+        className={className}
+        id="eds-dialog-title"
+        ref={ref}
+        {...props}
+      >
         {children}
       </StyledTitle>
       {children && <StyledDivider color="medium" variant="small" />}
@@ -47,15 +48,3 @@ export const Title = forwardRef(function EdsDialogTitle(
 })
 
 Title.displayName = 'eds-dialog-title'
-
-Title.propTypes = {
-  /** @ignore */
-  children: PropTypes.node,
-  /** @ignore */
-  className: PropTypes.string,
-}
-
-Title.defaultProps = {
-  className: undefined,
-  children: undefined,
-}