feat: add toast component

README.md

@@ -64,6 +64,7 @@ npm run build
 
 ### TODOLIST
 
+- [] 样式前缀名
 - [] 按需加载
 - [] 组件支持SSR
 - [] 浏览器引入 [案例](https://ant.design/docs/react/introduce-cn#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%BC%95%E5%85%A5)

src/components/Toast/_style.scss

@@ -0,0 +1,77 @@
+.btn {
+  position: relative;
+  display: inline-block;
+  font-weight: $btn-font-weight;
+  line-height: $btn-line-height;
+  color: $body-color;
+  white-space: nowrap;
+  text-align: center;
+  vertical-align: middle;
+  background-image: none;
+  border: $btn-border-width solid transparent;
+  @include button-size($btn-padding-x, $btn-padding-y, $btn-font-size, $border-radius);
+  box-shadow: $btn-box-shadow;
+  cursor: pointer;
+  transition: $btn-transition;
+  &.disabled,
+  &[disabled] {
+    cursor: not-allowed;
+    opacity: $btn-disabled-opacity;
+    box-shadow: none;
+    > * {
+      pointer-events: none;
+    }
+  }
+}
+
+.btn-lg {
+  @include button-size(
+    $btn-padding-y-lg,
+    $btn-padding-x-lg,
+    $btn-font-size-lg,
+    $btn-border-radius-lg
+  );
+}
+.btn-sm {
+  @include button-size(
+    $btn-padding-y-sm,
+    $btn-padding-x-sm,
+    $btn-font-size-sm,
+    $btn-border-radius-sm
+  );
+}
+
+.btn-primary {
+  @include button-style($primary, $primary, $white);
+}
+.btn-danger {
+  @include button-style($danger, $danger, $white);
+}
+
+.btn-default {
+  @include button-style($white, $gray-400, $body-color, $white, $primary, $primary);
+}
+
+.btn-link {
+  font-weight: $font-weight-normal;
+  color: $btn-link-color;
+  text-decoration: $link-decoration;
+  box-shadow: none;
+  &:hover {
+    color: $btn-link-hover-color;
+    text-decoration: $link-hover-decoration;
+  }
+  &:focus,
+  &.focus {
+    text-decoration: $link-hover-decoration;
+    box-shadow: none;
+  }
+  &:disabled,
+  &.disabled {
+    color: $btn-link-disabled-color;
+    pointer-events: none;
+  }
+}
+.btn-round {
+  border-radius: 999px;
+}

src/components/Toast/toast.stories.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import Button, { ButtonType, ButtonSize } from './button'
+import '../../styles/index.scss'
+
+const defaultButton = () => <Button onClick={action('clicked')}>Default button</Button>
+
+const buttonWithSize = () => (
+  <>
+    <Button size={ButtonSize.Large}>Large button</Button>
+    <Button size={ButtonSize.Small}>Small button</Button>
+  </>
+)
+
+const buttonWithType = () => (
+  <>
+    <Button btnType={ButtonType.Primary}>Primary button</Button>
+    <Button btnType={ButtonType.Default}>Default Button</Button>
+    <Button btnType={ButtonType.Danger}>Danger button</Button>
+    <Button btnType={ButtonType.Link} href="https://google.com">
+      Link button
+    </Button>
+  </>
+)
+
+storiesOf('Button Component', module)
+  .add('Button', defaultButton)
+  .add('不同尺寸的 Button', buttonWithSize)
+  .add('不同类型的 Button', buttonWithType)

src/components/Toast/toast.test.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import Button, { ButtonProps, ButtonSize, ButtonType } from './button'
+
+const defaultProps = {
+  onClick: jest.fn(),
+}
+
+const testProps: ButtonProps = {
+  btnType: ButtonType.Primary,
+  size: ButtonSize.Large,
+  className: 'klass',
+}
+
+const disabledProps: ButtonProps = {
+  disabled: true,
+  onClick: jest.fn(),
+}
+
+const roundProps: ButtonProps = {
+  round: true,
+}
+
+describe('test button components', () => {
+  it('should render default button', () => {
+    const wrapper = render(<Button {...defaultProps}>Click</Button>)
+    const element = wrapper.getByText('Click') as HTMLButtonElement
+    expect(element).toBeInTheDocument()
+    expect(element.tagName).toEqual('BUTTON')
+    expect(element.disabled).toBeFalsy()
+    expect(element).toHaveClass('btn btn-default')
+    fireEvent.click(element)
+    expect(defaultProps.onClick).toHaveBeenCalled()
+  })
+  it('should render the components based on different props', () => {
+    const wrapper = render(<Button {...testProps}>Click</Button>)
+    const element = wrapper.getByText('Click')
+    expect(element).toBeInTheDocument()
+    expect(element).toHaveClass('btn-primary btn-lg klass')
+  })
+  it('should render a link when btnType equals link and href is provided', () => {
+    const wrapper = render(
+      <Button btnType={ButtonType.Link} href="https://baidu.com">
+        Link
+      </Button>,
+    )
+    const element = wrapper.getByText('Link')
+    expect(element).toBeInTheDocument()
+    expect(element.tagName).toEqual('A')
+    expect(element).toHaveClass('btn btn-link')
+  })
+  it('should render disabled button when disabled set to true', () => {
+    const wrapper = render(<Button {...disabledProps}>Click</Button>)
+    const element = wrapper.getByText('Click') as HTMLButtonElement
+    expect(element).toBeInTheDocument()
+    expect(element.disabled).toBeTruthy()
+    fireEvent.click(element)
+    expect(disabledProps.onClick).not.toHaveBeenCalled()
+  })
+  it('should render round button when round set to true', () => {
+    const wrapper = render(<Button {...roundProps}>Click</Button>)
+    const element = wrapper.getByText('Click') as HTMLButtonElement
+    expect(element).toBeInTheDocument()
+    expect(element).toHaveClass('btn-round')
+  })
+})

src/components/Toast/toast.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+interface BaseToastProps {
+  message?: string
+  duration?: number
+}
+
+type AnchorToastProps = BaseToastProps & React.AnchorHTMLAttributes<HTMLElement>
+export type ToastProps = Partial<AnchorToastProps>
+
+const Toast: React.FC<ToastProps> = (props) => {
+  const { message, duration } = props
+
+  return <div className="toast">{message}</div>
+}
+
+Toast.defaultProps = {
+  message: '',
+  duration: 3000,
+}
+
+export default Toast

src/main.tsx

@@ -1,2 +1,5 @@
 export { default as Button } from './components/Button/button'
 export type { ButtonProps } from './components/Button/button'
+
+export { default as Toast } from './components/Toast/toast'
+export type { ToastProps } from './components/Toast/toast'