Snackbar types (equinor#687)

* 🚧 Rename to ts

* 🏷️ Add types for snackbar

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

@@ -1,5 +1,4 @@
 /* eslint-disable no-undef */
-
 import React from 'react'
 import {
   render,

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

@@ -1,5 +1,5 @@
-// @ts-nocheck
 import { tokens } from '@equinor/eds-tokens'
+import type { Typography } from '@equinor/eds-tokens'
 
 const {
   typography: {
@@ -23,7 +23,25 @@ const {
   clickbounds: { default__base: clickbounds },
 } = tokens
 
-export const snackbar = {
+type Snackbar = {
+  background: string
+  boxShadow: string
+  minHeight: string
+  spacings: {
+    left: string
+    bottom: string
+    padding: string
+    actionSpace: string
+  }
+  text: {
+    color: string
+    typography: Typography
+  }
+  borderRadius: string
+  buttonColor: string
+}
+
+export const snackbar: Snackbar = {
   background,
   boxShadow,
   minHeight: clickbounds,

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

@@ -1,14 +1,15 @@
-// @ts-nocheck
-import React, { useState, useEffect } from 'react'
-import PropTypes from 'prop-types'
+import React, { useState, useEffect, HTMLAttributes } from 'react'
 import styled from 'styled-components'
 import { snackbar as tokens } from './Snackbar.tokens'
 import { typographyTemplate } from '../_common/templates'
 
+type StyledProps = {
+  leftAlignFrom: string
+} & HTMLAttributes<HTMLDivElement>
+
 const StyledSnackbar = styled.div.attrs(() => ({
   role: 'alert',
-}))`
-
+}))<StyledProps>`
   position: fixed;
   left: ${tokens.spacings.left};
   bottom: ${tokens.spacings.bottom};
@@ -33,14 +34,25 @@ const StyledSnackbar = styled.div.attrs(() => ({
   }
 `
 
+type Props = {
+  /* Controls the visibility of the snackbar */
+  open?: boolean
+  /* How long will the message be visible in milliseconds */
+  autoHideDuration?: number
+  /* Callback fired when the snackbar is closed by auto hide duration timeout */
+  onClose?: () => void
+  /* Media query from which the snackbar will be horizontal centered */
+  leftAlignFrom?: string
+} & HTMLAttributes<HTMLDivElement>
+
 export const Snackbar = ({
-  open,
-  autoHideDuration,
+  open = false,
+  autoHideDuration = 7000,
   onClose,
-  leftAlignFrom,
+  leftAlignFrom = '1200px',
   children,
   className,
-}) => {
+}: Props): JSX.Element => {
   const [visible, setVisible] = useState(open)
   useEffect(() => {
     setVisible(open)
@@ -64,26 +76,3 @@ export const Snackbar = ({
 }
 
 Snackbar.displayName = 'eds-snackbar'
-
-Snackbar.propTypes = {
-  /** Controls the visibility of the snackbar */
-  open: PropTypes.bool,
-  /** How long will the message be visible in milliseconds */
-  autoHideDuration: PropTypes.number,
-  /** @ignore */
-  children: PropTypes.node.isRequired,
-  /** @ignore */
-  className: PropTypes.string,
-  /** Callback fired when the snackbar is closed by auto hide duration timeout */
-  onClose: PropTypes.func,
-  /** Media query from which the snackbar will be horizontal centered */
-  leftAlignFrom: PropTypes.string,
-}
-
-Snackbar.defaultProps = {
-  autoHideDuration: 7000,
-  onClose: undefined,
-  open: false,
-  leftAlignFrom: '1200px',
-  className: undefined,
-}

libraries/core-react/src/Snackbar/SnackbarAction.jsx → libraries/core-react/src/Snackbar/SnackbarAction.tsx

@@ -1,6 +1,4 @@
-// @ts-nocheck
-import React, { Children } from 'react'
-import PropTypes from 'prop-types'
+import React, { Children, ReactNode } from 'react'
 import styled from 'styled-components'
 import { snackbar as tokens } from './Snackbar.tokens'
 
@@ -11,11 +9,10 @@ const StyledSnackbarAction = styled.div`
   margin-bottom: -10px;
 `
 
-export const SnackbarAction = ({ children }) => {
-  return <StyledSnackbarAction>{Children.only(children)}</StyledSnackbarAction>
+type Props = {
+  children: ReactNode
 }
 
-SnackbarAction.propTypes = {
-  /** @ignore */
-  children: PropTypes.node.isRequired,
+export const SnackbarAction = ({ children }: Props): JSX.Element => {
+  return <StyledSnackbarAction>{Children.only(children)}</StyledSnackbarAction>
 }

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

@@ -0,0 +1,12 @@
+import { SnackbarAction } from './SnackbarAction'
+import { Snackbar as BaseComponent } from './Snackbar'
+
+type SnackbarTypes = typeof BaseComponent & {
+  SnackbarAction: typeof SnackbarAction
+}
+
+const Snackbar = BaseComponent as SnackbarTypes
+
+Snackbar.SnackbarAction = SnackbarAction
+
+export { Snackbar }