♻️ Sidesheet story to Typescript (#803)

* ♻️ JSX to TSX

* Fixed merge conflict

* ♻️ Added controls to story

* 🔥 Removed useless code (control select is automatic!)

apps/storybook-react/stories/SideSheet.stories.tsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { SideSheet, SideSheetProps, Button } from '@equinor/eds-core-react'
+import { Story, Meta } from '@storybook/react'
+
+const Child = styled.div`
+  padding: 6px;
+  background-color: rgba(255, 146, 0, 0.15);
+  box-sizing: border-box;
+  border: 1px dashed #ff9200;
+  border-radius: 4px;
+`
+
+export default {
+  title: 'Components/SideSheet',
+  component: SideSheet,
+  argTypes: {
+    title: {
+      defaultValue: 'Title',
+    },
+  },
+} as Meta
+
+export const Default: Story<SideSheetProps> = (args) => {
+  const [toggle, setToggle] = useState(true)
+
+  return (
+    <div style={{ height: '400px' }}>
+      <Button variant="outlined" onClick={() => setToggle(!toggle)}>
+        Click me!
+      </Button>
+      <SideSheet {...args} open={toggle} onClose={() => setToggle(!toggle)}>
+        <Child>Children</Child>
+      </SideSheet>
+    </div>
+  )
+}

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

@@ -1,5 +1,4 @@
-import React, { forwardRef } from 'react'
-import PropTypes from 'prop-types'
+import React, { forwardRef, HTMLAttributes } from 'react'
 import styled from 'styled-components'
 import { clear } from '@equinor/eds-icons'
 import { spacingsTemplate } from '../_common/templates'
@@ -20,7 +19,7 @@ type StyleProps = {
   width: string
 }
 
-type Props = {
+export type SideSheetProps = {
   /** Title for Side Sheet */
   title?: string
   /** Variant controls width of Side Sheet */
@@ -29,7 +28,7 @@ type Props = {
   onClose?: (Event) => void
   /** Open / close Side Sheet */
   open?: boolean
-} & React.HTMLAttributes<HTMLDivElement>
+} & HTMLAttributes<HTMLDivElement>
 
 const StyledSideSheet = styled.div<StyleProps>`
   height: 100%;
@@ -54,8 +53,8 @@ const Header = styled.div`
   padding-right: 10px;
 `
 
-export const SideSheet = forwardRef<HTMLDivElement, Props>(
-  function EdsSideSheet(
+export const SideSheet = forwardRef<HTMLDivElement, SideSheetProps>(
+  function SideSheet(
     {
       variant = 'medium',
       title = '',

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

@@ -1 +1 @@
-export { SideSheet } from './SideSheet'
+export * from './SideSheet'

libraries/core-react/src/index.ts

@@ -14,8 +14,8 @@ export * from './TopBar'
 export { Dialog } from './Dialog'
 export * from './Scrim'
 export { TableOfContents } from './TableOfContents'
-export { SideSheet } from './SideSheet'
-export * from './Chip'
+export * from './SideSheet'
+export { Chip } from './Chip'
 export * from './Avatar'
 export * from './Search'
 export { Slider } from './Slider'