Typescript migration of snackbar stories (#808)

* 🚚 Rename to tsx

* ♻️ Use typescript in Snackbar story

* 📝 Add SnackbarAction as a subcomponent

* ♻️ Refactor to named function

* ♻️ Code with typescript error in story. Use FC for  some alignment with components without refs

* ♻️ Export only the type of the Snackbar itself for the Story

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

@@ -0,0 +1,64 @@
+import React, { useState } from 'react'
+import { Snackbar, SnackbarProps, Button } from '@equinor/eds-core-react'
+import { Story, Meta } from '@storybook/react'
+
+const { SnackbarAction } = Snackbar
+
+export default {
+  title: 'Components/Snackbar',
+  component: Snackbar,
+  subcomponents: { SnackbarAction },
+} as Meta
+
+export const Default: Story<SnackbarProps> = (args) => {
+  const { open } = args
+  const [visible, setVisible] = useState(open)
+  return (
+    <>
+      <Button type="button" onClick={() => setVisible(true)}>
+        Show a simple snackbar with default options
+      </Button>
+      <Snackbar {...args} open={visible} onClose={() => setVisible(false)}>
+        Play with me
+      </Snackbar>
+    </>
+  )
+}
+export const Simple: Story<SnackbarProps> = () => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <Button type="button" onClick={() => setOpen(true)}>
+        Show a simple snackbar for 5 seconds
+      </Button>
+      <Snackbar
+        open={open}
+        onClose={() => setOpen(false)}
+        autoHideDuration={5000}
+        leftAlignFrom="1500px"
+      >
+        Message goes here
+      </Snackbar>
+    </>
+  )
+}
+
+export const WithAction: Story<SnackbarProps> = () => {
+  const [withActionOpen, setWithActionOpen] = useState(false)
+  return (
+    <>
+      <Button type="button" onClick={() => setWithActionOpen(true)}>
+        Show a snackbar with action for the default 7 seconds
+      </Button>
+      <Snackbar open={withActionOpen} onClose={() => setWithActionOpen(false)}>
+        Your changes was saved
+        <SnackbarAction>
+          <Button variant="ghost">Undo</Button>
+        </SnackbarAction>
+      </Snackbar>
+    </>
+  )
+}
+
+WithAction.storyName = 'With action'

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, HTMLAttributes } from 'react'
+import React, { useState, useEffect, HTMLAttributes, FC } from 'react'
 import styled from 'styled-components'
 import { snackbar as tokens } from './Snackbar.tokens'
 import { typographyTemplate } from '../_common/templates'
@@ -23,6 +23,7 @@ const StyledSnackbar = styled.div.attrs(() => ({
   box-sizing: border-box;
   left: 50%;
   transform: translateX(-50%);
+  z-index: 10;
   @media (min-width: ${({ leftAlignFrom }) => leftAlignFrom}) {
     left: auto;
     transform: none;
@@ -34,25 +35,25 @@ const StyledSnackbar = styled.div.attrs(() => ({
   }
 `
 
-type Props = {
-  /* Controls the visibility of the snackbar */
+export type SnackbarProps = {
+  /**  Controls the visibility of the snackbar */
   open?: boolean
-  /* How long will the message be visible in milliseconds */
+  /** How long will the message be visible in milliseconds */
   autoHideDuration?: number
-  /* Callback fired when the snackbar is closed by auto hide duration timeout */
+  /** Callback fired when the snackbar is closed by auto hide duration timeout */
   onClose?: () => void
-  /* Media query from which the snackbar will be horizontal centered */
+  /** Media query from which the snackbar will be horizontal centered */
   leftAlignFrom?: string
 } & HTMLAttributes<HTMLDivElement>
 
-export const Snackbar = ({
+export const Snackbar: FC<SnackbarProps> = ({
   open = false,
   autoHideDuration = 7000,
   onClose,
   leftAlignFrom = '1200px',
   children,
   className,
-}: Props): JSX.Element => {
+}) => {
   const [visible, setVisible] = useState(open)
   useEffect(() => {
     setVisible(open)
@@ -75,4 +76,4 @@ export const Snackbar = ({
   )
 }
 
-// Snackbar.displayName = 'eds-snackbar'
+// Snackbar.displayName = 'Snackbar'

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

@@ -9,10 +9,12 @@ const StyledSnackbarAction = styled.div`
   margin-bottom: -10px;
 `
 
-type Props = {
+type SnackbarActionProps = {
   children: ReactNode
 }
 
-export const SnackbarAction = ({ children }: Props): JSX.Element => {
+export const SnackbarAction = ({
+  children,
+}: SnackbarActionProps): JSX.Element => {
   return <StyledSnackbarAction>{Children.only(children)}</StyledSnackbarAction>
 }

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

@@ -1,5 +1,5 @@
 import { SnackbarAction } from './SnackbarAction'
-import { Snackbar as BaseComponent } from './Snackbar'
+import { Snackbar as BaseComponent, SnackbarProps } from './Snackbar'
 
 type SnackbarTypes = typeof BaseComponent & {
   SnackbarAction: typeof SnackbarAction
@@ -10,3 +10,4 @@ const Snackbar = BaseComponent as SnackbarTypes
 Snackbar.SnackbarAction = SnackbarAction
 
 export { Snackbar }
+export type { SnackbarProps }

libraries/core-react/src/index.ts

@@ -20,7 +20,7 @@ export * from './Avatar'
 export * from './Search'
 export * from './Slider'
 export * from './Tooltip'
-export { Snackbar } from './Snackbar'
+export * from './Snackbar'
 export * from './Popover'
 export * from './Banner'
 export * from './SelectionControls'