Refactor Sidesheet to typescript. (#706)

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

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

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

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

libraries/core-react/src/SideSheet/SideSheet.tsx

@@ -0,0 +1,94 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import { clear } from '@equinor/eds-icons'
+import { spacingsTemplate } from '../_common/templates'
+import { Typography } from '../Typography'
+import { Button } from '../Button'
+import { Icon } from '../Icon'
+import { sidesheet as tokens } from './SideSheet.tokens'
+
+const icons = {
+  clear,
+}
+
+Icon.add(icons)
+
+const { background, spacings, border } = tokens
+
+type StyleProps = {
+  width: string
+}
+
+type Props = {
+  /** Title for Side Sheet */
+  title?: string
+  /** Variant controls width of Side Sheet */
+  variant?: 'small' | 'medium' | 'large' | 'xlarge'
+  /** OnClick function (close) */
+  onClose?: (Event) => void
+  /** Open / close Side Sheet */
+  open?: boolean
+} & React.HTMLAttributes<HTMLDivElement>
+
+const StyledSideSheet = styled.div<StyleProps>`
+  height: 100%;
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  box-sizing: border-box;
+  border-left: ${border.left.width} solid ${border.left.color};
+  background: ${background};
+  width: ${({ width }) => width};
+
+  ${spacingsTemplate(spacings)};
+`
+
+const Header = styled.div`
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 24px;
+  padding-right: 10px;
+`
+
+export const SideSheet = forwardRef<HTMLDivElement, Props>(
+  function EdsSideSheet(
+    {
+      variant = 'medium',
+      title = '',
+      children,
+      className = '',
+      open = true,
+      onClose,
+      ...rest
+    },
+    ref,
+  ) {
+    const props = {
+      ...rest,
+      className,
+      ref,
+      width: tokens.width[variant],
+    }
+
+    // Controller must set open={false} when pressing the close button
+    return (
+      open && (
+        <StyledSideSheet {...props} id="side-sheet">
+          <Header>
+            <Typography variant="h2">{title}</Typography>
+            <Button variant="ghost_icon" onClick={onClose} title="Close">
+              <Icon name="clear" title="Close" />
+            </Button>
+          </Header>
+          {children}
+        </StyledSideSheet>
+      )
+    )
+  },
+)
+
+SideSheet.displayName = 'eds-sidesheet'

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

@@ -1,2 +1 @@
-// @ts-nocheck
 export { SideSheet } from './SideSheet'