♻️ Scrim story to Typescript (#802)

* ♻️ JSX to TSX * ♻️ Export Scrim props * ♻️ Simplified Story * ♻️ Changed React.HTMLAttributes to HTMLAttributes and it fixed the Proptable Yay
equinor · Nov 13, 2020 · 266443a · 266443a
1 parent 2b99731
commit 266443a
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 41 deletions.
diff --git a/...storybook-react/stories/Scrim.stories.jsx → ...storybook-react/stories/Scrim.stories.tsx b/...storybook-react/stories/Scrim.stories.jsx → ...storybook-react/stories/Scrim.stories.tsx
@@ -1,17 +1,9 @@
 import React, { useState } from 'react'
-import { Scrim, Button, Typography } from '@equinor/eds-core-react'
+import { Scrim, Button, Typography, ScrimProps } from '@equinor/eds-core-react'
+import { Story, Meta } from '@storybook/react'
 
 import styled from 'styled-components'
 
-const Body = styled.div`
-  height: calc(100vh - 64px);
-  background: #ebebeb;
-  display: grid;
-  grid-template-rows: 1fr auto 1fr;
-  padding: 32px;
-  grid-gap: 32px;
-`
-
 const TestContent = styled.div`
   background: rgba(255, 146, 0, 0.5);
   border: 1px dashed #ff9200;
@@ -26,9 +18,9 @@ const TestContent = styled.div`
 export default {
   title: 'Components/Scrim',
   component: Scrim,
-}
+} as Meta
 
-export const Page = () => {
+export const Default: Story<ScrimProps> = (args) => {
   const [visibleScrim, setVisibleScrim] = useState(false)
   const handleClose = (event, closed) => {
     if (closed) {
@@ -39,23 +31,18 @@ export const Page = () => {
   }
 
   return (
-    <Body>
-      <Typography variant="body_short">Top of page</Typography>
-      <Typography variant="body_short">Center page.</Typography>
-      <div>
-        <Button onClick={() => setVisibleScrim(true)}>Trigger Scrim</Button>
-      </div>
-      <Typography variant="body_short">Bottom of page</Typography>
+    <>
+      <Button onClick={() => setVisibleScrim(true)}>Trigger Scrim</Button>
       {visibleScrim && (
-        <Scrim onClose={handleClose} isDismissable>
+        <Scrim {...args} onClose={handleClose}>
           <TestContent>
             <Typography variant="body_short">
               Press close or hit “ESC” to close scrim.
             </Typography>
-            <Button onClick={() => setVisibleScrim(false)}>OK</Button>
+            <Button onClick={() => setVisibleScrim(false)}>Close</Button>
           </TestContent>
         </Scrim>
       )}
-    </Body>
+    </>
   )
 }
diff --git a/libraries/core-react/src/Scrim/Scrim.test.tsx b/libraries/core-react/src/Scrim/Scrim.test.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable no-undef */
-import React, { KeyboardEvent, useState } from 'react'
+import React, { useState } from 'react'
 import { render, cleanup, screen, fireEvent } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import 'jest-styled-components'

diff --git a/libraries/core-react/src/Scrim/Scrim.tsx b/libraries/core-react/src/Scrim/Scrim.tsx
@@ -1,17 +1,10 @@
-import React, { forwardRef, useEffect, MouseEvent } from 'react'
+import React, { forwardRef, useEffect, MouseEvent, HTMLAttributes } from 'react'
 import styled from 'styled-components'
 import { scrim as tokens } from './Scrim.tokens'
 
 const { height, width, background } = tokens
 
-type Props = {
-  /** Whether scrim can be dismissed with esc key */
-  isDismissable?: boolean
-  /** function to handle closing scrim */
-  onClose?: (event: MouseEvent | KeyboardEvent, open: boolean) => void
-} & React.HTMLAttributes<HTMLElement>
-
-const StyledScrim = styled.div<Props>`
+const StyledScrim = styled.div`
   width: ${width};
   height: ${height};
   background: ${background};
@@ -29,10 +22,23 @@ const ScrimContent = styled.div`
   height: auto;
 `
 
-export const Scrim = forwardRef<HTMLDivElement, Props>(function EdsScrim(
+export type ScrimProps = {
+  /** Whether scrim can be dismissed with esc key and outside click
+   */
+  isDismissable?: boolean
+  /** function to handle closing scrim */
+  onClose?: (event: MouseEvent | KeyboardEvent, open: boolean) => void
+} & HTMLAttributes<HTMLDivElement>
+
+export const Scrim = forwardRef<HTMLDivElement, ScrimProps>(function Scrim(
   { children, onClose, isDismissable = false, ...rest },
   ref,
 ) {
+  const props = {
+    ...rest,
+    isDismissable,
+    ref,
+  }
   const handleKeyboardClose = (event: KeyboardEvent) => {
     if (event) {
       if (event.key === 'Escape' && isDismissable) {
@@ -65,12 +71,7 @@ export const Scrim = forwardRef<HTMLDivElement, Props>(function EdsScrim(
   }, [])
 
   return (
-    <StyledScrim
-      onClick={handleMouseClose}
-      isDismissable={isDismissable}
-      {...rest}
-      ref={ref}
-    >
+    <StyledScrim onClick={handleMouseClose} {...props}>
       <ScrimContent onClick={handleContentClick}>{children}</ScrimContent>
     </StyledScrim>
   )

diff --git a/libraries/core-react/src/Scrim/index.ts b/libraries/core-react/src/Scrim/index.ts
@@ -1 +1 @@
-export { Scrim } from './Scrim'
+export * from './Scrim'
diff --git a/libraries/core-react/src/index.ts b/libraries/core-react/src/index.ts
@@ -12,7 +12,7 @@ export { Tabs } from './Tabs'
 export * from './Card'
 export * from './TopBar'
 export { Dialog } from './Dialog'
-export { Scrim } from './Scrim'
+export * from './Scrim'
 export { TableOfContents } from './TableOfContents'
 export { SideSheet } from './SideSheet'
 export * from './Chip'