From 12d85ecdd11918de2fe45c776d4ed913d0e10cc3 Mon Sep 17 00:00:00 2001 From: Wenche Tollevsen Date: Mon, 19 Oct 2020 07:34:11 +0200 Subject: [PATCH] Snackbar types (#687) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 🚧 Rename to ts * 🏷️ Add types for snackbar --- .../{Snackbar.test.jsx => Snackbar.test.tsx} | 1 - ...{Snackbar.tokens.js => Snackbar.tokens.ts} | 22 +++++++- .../Snackbar/{Snackbar.jsx => Snackbar.tsx} | 53 ++++++++----------- ...{SnackbarAction.jsx => SnackbarAction.tsx} | 13 ++--- libraries/core-react/src/Snackbar/index.js | 9 ---- libraries/core-react/src/Snackbar/index.ts | 12 +++++ 6 files changed, 58 insertions(+), 52 deletions(-) rename libraries/core-react/src/Snackbar/{Snackbar.test.jsx => Snackbar.test.tsx} (99%) rename libraries/core-react/src/Snackbar/{Snackbar.tokens.js => Snackbar.tokens.ts} (67%) rename libraries/core-react/src/Snackbar/{Snackbar.jsx => Snackbar.tsx} (62%) rename libraries/core-react/src/Snackbar/{SnackbarAction.jsx => SnackbarAction.tsx} (60%) delete mode 100644 libraries/core-react/src/Snackbar/index.js create mode 100644 libraries/core-react/src/Snackbar/index.ts diff --git a/libraries/core-react/src/Snackbar/Snackbar.test.jsx b/libraries/core-react/src/Snackbar/Snackbar.test.tsx similarity index 99% rename from libraries/core-react/src/Snackbar/Snackbar.test.jsx rename to libraries/core-react/src/Snackbar/Snackbar.test.tsx index 338decb31f..816d052b80 100644 --- a/libraries/core-react/src/Snackbar/Snackbar.test.jsx +++ b/libraries/core-react/src/Snackbar/Snackbar.test.tsx @@ -1,5 +1,4 @@ /* eslint-disable no-undef */ - import React from 'react' import { render, diff --git a/libraries/core-react/src/Snackbar/Snackbar.tokens.js b/libraries/core-react/src/Snackbar/Snackbar.tokens.ts similarity index 67% rename from libraries/core-react/src/Snackbar/Snackbar.tokens.js rename to libraries/core-react/src/Snackbar/Snackbar.tokens.ts index b4a84e93a0..3c7df76d61 100644 --- a/libraries/core-react/src/Snackbar/Snackbar.tokens.js +++ b/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, diff --git a/libraries/core-react/src/Snackbar/Snackbar.jsx b/libraries/core-react/src/Snackbar/Snackbar.tsx similarity index 62% rename from libraries/core-react/src/Snackbar/Snackbar.jsx rename to libraries/core-react/src/Snackbar/Snackbar.tsx index ef87f45263..94d94147dd 100644 --- a/libraries/core-react/src/Snackbar/Snackbar.jsx +++ b/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 + const StyledSnackbar = styled.div.attrs(() => ({ role: 'alert', -}))` - +}))` 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 + 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, -} diff --git a/libraries/core-react/src/Snackbar/SnackbarAction.jsx b/libraries/core-react/src/Snackbar/SnackbarAction.tsx similarity index 60% rename from libraries/core-react/src/Snackbar/SnackbarAction.jsx rename to libraries/core-react/src/Snackbar/SnackbarAction.tsx index 60e992b1cc..1860fd48b9 100644 --- a/libraries/core-react/src/Snackbar/SnackbarAction.jsx +++ b/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 {Children.only(children)} +type Props = { + children: ReactNode } -SnackbarAction.propTypes = { - /** @ignore */ - children: PropTypes.node.isRequired, +export const SnackbarAction = ({ children }: Props): JSX.Element => { + return {Children.only(children)} } diff --git a/libraries/core-react/src/Snackbar/index.js b/libraries/core-react/src/Snackbar/index.js deleted file mode 100644 index 918f3db52c..0000000000 --- a/libraries/core-react/src/Snackbar/index.js +++ /dev/null @@ -1,9 +0,0 @@ -// @ts-nocheck -import { SnackbarAction } from './SnackbarAction' -import { Snackbar } from './Snackbar' - -Snackbar.SnackbarAction = SnackbarAction - -export { Snackbar } - -/* export { useSnackbars } from './snackbar-hook' */ diff --git a/libraries/core-react/src/Snackbar/index.ts b/libraries/core-react/src/Snackbar/index.ts new file mode 100644 index 0000000000..9b05ad5f2a --- /dev/null +++ b/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 }