React Component and Storybook Template - 2020

button.stories.tsx

import React from 'react'
import Button from './Button'

/**
 * The following is a story.
 *
 * It follows the "Component Story Format" (CSF), an open standard
 * based on ES6 modules which is portable beyond Storybook. This is
 * version 2 of that standard and uses args.
 *
 * @see https://storybook.js.org/docs/react/api/csf
 * @see https://storybook.js.org/docs/react/writing-stories/introduction
 * @see https://medium.com/storybookjs/introducing-storybook-args-2dadcdb777cc
 */

export default {
  title: 'Design System/Atoms/Button',
  component: Button,
  parameters: {
    docs: {
      description: {
        component: 'A <button> element.'
      }
    }
  }
}

// @ts-ignore
const Template = (args: Record<string, unknown>) => <Button {...args} />

export const Default = Template.bind({})

Default.args = {
  isDisabled: false,
  text: 'Learn More'
}

button.tsx

import React from 'react'
import Link from 'next/link'
import cn from 'classnames'

export interface ButtonProps {
  /**
   * Required. Checks if the button should be disabled.
   */
  isDisabled: boolean
  /**
   * Required. The display content of the button.
   */
  text: string
  /**
   * Optional. Additional CSS classes.
   */
  classes?: string
}

const Button: React.FC<ButtonProps> = ({
  isDisabled = false,
  text = 'Learn More',
  classes
}: ButtonProps) => {
  return (
    <button
      type="button"
      disabled={isDisabled}
      className={cn(defaultStyles, classes)}
    >
      {text}
    </button>
  )
}

export default Button