Typescript for button story (#745)

* 🚚 Rename to .tsx * 🚧 Add a basic story * 🚧 Button story with no args table * 🎨 Brute force to make args table work * 🐛 Remove hardcoded color props * 📝 Add the rest of the stories * 📝 Use type documentation to show default value
equinor · Nov 13, 2020 · 16a11e5 · 16a11e5
1 parent 419f5c5
commit 16a11e5
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 122 deletions.
diff --git a/...torybook-react/stories/Button.stories.jsx → ...torybook-react/stories/Button.stories.tsx b/...torybook-react/stories/Button.stories.jsx → ...torybook-react/stories/Button.stories.tsx
@@ -1,38 +1,28 @@
 import React from 'react'
-import { Button, Icon } from '@equinor/eds-core-react'
+import { Button, Icon, ButtonProps } from '@equinor/eds-core-react'
 import styled from 'styled-components'
-import { withKnobs, select, text } from '@storybook/addon-knobs'
+import { Meta, Story } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
 import './../style.css'
 import './button.css'
 
-export default {
-  title: 'Components/Button',
-  component: Button,
-}
-
-const VARIANT = {
-  CONTAINED: 'contained',
-  OUTLINED: 'outlined',
-  GHOST: 'ghost',
-  GHOST_ICON: 'ghost_icon',
-}
-
-const COLOR = {
-  PRIMARY: 'primary',
-  SECONDARY: 'secondary',
-  DANGER: 'danger',
-  DISABLED: 'disabled',
-}
-
 const Wrapper = styled.div`
   margin: 32px;
   display: grid;
   grid-gap: 32px;
   grid-template-columns: repeat(4, fit-content(100%));
 `
 
-export const allButtons = () => (
+export default {
+  title: 'Components/Button',
+  component: Button,
+} as Meta
+
+export const Default: Story<ButtonProps> = (args) => (
+  <Button {...args}>You can control me</Button>
+)
+
+export const All: Story<ButtonProps> = () => (
   <Wrapper>
     <Button>Primary</Button>
     <Button color="secondary">Secondary</Button>
@@ -72,7 +62,8 @@ export const allButtons = () => (
     </Button>
   </Wrapper>
 )
-export const contained = () => (
+
+export const Contained: Story<ButtonProps> = () => (
   <Wrapper>
     <Button>Primary</Button>
     <Button color="secondary">Secondary</Button>
@@ -108,9 +99,7 @@ export const contained = () => (
   </Wrapper>
 )
 
-contained.storyName = 'Contained (default)'
-
-export const outlined = () => (
+export const Outlined: Story<ButtonProps> = () => (
   <Wrapper>
     <Button variant="outlined">Primary</Button>
     <Button variant="outlined" color="secondary">
@@ -157,7 +146,7 @@ export const outlined = () => (
   </Wrapper>
 )
 
-export const ghost = () => (
+export const Ghost: Story<ButtonProps> = () => (
   <Wrapper>
     <Button variant="ghost">Primary</Button>
     <Button variant="ghost" color="secondary">
@@ -216,57 +205,32 @@ export const ghost = () => (
   </Wrapper>
 )
 
-export const knobs = () => (
-  <Wrapper>
-    <Button
-      color={select('Color', [...Object.values(COLOR)])}
-      variant={select(
-        'Variant',
-        [...Object.values(VARIANT)],
-        VARIANT.CONTAINED,
-      )}
-    >
-      {text('Label', 'Some label')}
-    </Button>
-  </Wrapper>
-)
-
-export const form = () => {
-  const handleSubmit = (e) => {
+export const Form: Story<ButtonProps> = () => {
+  const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault() // to prevent navigation from storybook
     action('onSubmit')(e)
   }
 
   return (
     <Wrapper>
-      <form onSubmit={handleSubmit} href="/">
+      <form onSubmit={handleSubmit}>
         <Button type="submit">Submit form</Button>
       </form>
     </Wrapper>
   )
 }
 
-export const fileUpload = () => {
-  return (
-    <Wrapper>
-      <input
-        type="file"
-        id="file-upload"
-        style={{ display: 'none' }}
-        multiple
-      />
-      <label htmlFor="file-upload">
-        <Button as="span">Upload</Button>
-      </label>
-    </Wrapper>
-  )
-}
+export const FileUpload: Story<ButtonProps> = () => (
+  <Wrapper>
+    <input type="file" id="file-upload" style={{ display: 'none' }} multiple />
+    <label htmlFor="file-upload">
+      <Button as="span">Upload</Button>
+    </label>
+  </Wrapper>
+)
 
-export const link = () => (
+export const Link: Story<ButtonProps> = () => (
   <Wrapper>
     <Button href="#">Link</Button>
   </Wrapper>
 )
-
-knobs.storyName = 'With knobs'
-knobs.decorators = [withKnobs]
diff --git a/apps/storybook-react/stories/Divider.stories.tsx b/apps/storybook-react/stories/Divider.stories.tsx
@@ -9,20 +9,6 @@ import { Story, Meta } from '@storybook/react/types-6-0'
 export default {
   title: 'Components/Divider',
   component: Divider,
-  argTypes: {
-    color: {
-      control: {
-        type: 'radio',
-        options: ['lighter', 'light', 'medium'],
-      },
-    },
-    variant: {
-      control: {
-        type: 'radio',
-        options: ['medium', 'small'],
-      },
-    },
-  },
 } as Meta
 
 const Wrapper = styled.div`

diff --git a/libraries/core-react/src/Button/Button.tsx b/libraries/core-react/src/Button/Button.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, ElementType } from 'react'
+import React, { forwardRef, ElementType, ButtonHTMLAttributes } from 'react'
 import styled, { css } from 'styled-components'
 import { button, Button as ButtonType, ButtonGroups } from './Button.tokens'
 import { typographyTemplate } from '../_common/templates'
@@ -109,7 +109,7 @@ const ButtonBase = styled.button`
     content: '';
   }
 `
-type Props = {
+export type ButtonProps = {
   /**  Specifies color */
   color?: 'primary' | 'secondary' | 'danger'
   /** Specifies which variant to use */
@@ -119,50 +119,54 @@ type Props = {
    * If defined, an 'a' element is used as root instead of 'button'
    */
   href?: string
-  /** Is disabled */
+  /** Is the button disabled */
   disabled?: boolean
-  /** Change html element */
+  /** Change html element. */
   as?: ElementType
-  /** ttype */
+  /** Type of button
+   * @default 'button'
+   */
   type?: string
-} & React.HTMLAttributes<HTMLButtonElement>
-
-export const Button = forwardRef<HTMLButtonElement, Props>(function Button(
-  {
-    color = 'primary',
-    variant = 'contained',
-    children,
-    disabled,
-    href,
-    ...other
-  },
-  ref,
-) {
-  const colorBase: ButtonGroups | Partial<ButtonGroups> = colors[color] || {}
-  const token = colorBase[variant] || {}
-  const disabledToken = colors.disabled[variant] || {}
-
-  const as: ElementType = href ? 'a' : other.as ? other.as : 'button'
-  const type = href || other.as ? undefined : 'button'
-  const tabIndex = disabled ? -1 : other.tabIndex
-
-  const buttonProps = {
+} & ButtonHTMLAttributes<HTMLButtonElement>
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  function Button(
+    {
+      color = 'primary',
+      variant = 'contained',
+      children,
+      disabled = false,
+      href,
+      ...other
+    },
     ref,
-    as,
-    href,
-    type,
-    token,
-    disabledToken,
-    disabled,
-    tabIndex,
-    ...other,
-  }
+  ) {
+    const colorBase: ButtonGroups | Partial<ButtonGroups> = colors[color] || {}
+    const token = colorBase[variant] || {}
+    const disabledToken = colors.disabled[variant] || {}
+
+    const as: ElementType = href ? 'a' : other.as ? other.as : 'button'
+    const type = href || other.as ? undefined : 'button'
+    const tabIndex = disabled ? -1 : other.tabIndex
+
+    const buttonProps = {
+      ref,
+      as,
+      href,
+      type,
+      token,
+      disabledToken,
+      disabled,
+      tabIndex,
+      ...other,
+    }
 
-  return (
-    <ButtonBase {...buttonProps}>
-      <ButtonInner>{children}</ButtonInner>
-    </ButtonBase>
-  )
-})
+    return (
+      <ButtonBase {...buttonProps}>
+        <ButtonInner>{children}</ButtonInner>
+      </ButtonBase>
+    )
+  },
+)
 
 // Button.displayName = 'Button'
diff --git a/libraries/core-react/src/Button/index.ts b/libraries/core-react/src/Button/index.ts
@@ -1 +1 @@
-export { Button } from './Button'
+export * from './Button'
diff --git a/libraries/core-react/src/index.ts b/libraries/core-react/src/index.ts
@@ -1,5 +1,5 @@
 /* eslint-disable import/prefer-default-export */
-export { Button } from './Button'
+export * from './Button'
 export * from './Typography'
 export { Table } from './Table'
 export { Divider, DividerProps } from './Divider'