Separate button (#466)

* Seprate button

* Update jest

.storybook/config.tsx

@@ -1,8 +1,8 @@
 // @ts-ignore
 import { withInfo } from '@storybook/addon-info';
-import { withOptions } from '@storybook/addon-options';
 // @ts-ignore
-import { addDecorator, configure } from '@storybook/react';
+import { create } from '@storybook/theming';
+import { addParameters, configure } from '@storybook/react';
 import * as React from 'react';
 import { withThemes } from 'storybook-styled-components';
 import { createGlobalStyle, css } from 'styled-components';
@@ -35,14 +35,14 @@ const GlobalStyle = createGlobalStyle`
   ${fontFamily};
 `;
 
-addDecorator(withInfo);
-addDecorator(
-  withOptions({
-    name: 'Vital UI Kit React',
-    url: '#',
-    addonPanelInRight: false,
-    sortStoriesByKind: true,
-    sidebarAnimations: false,
+addParameters(withInfo);
+addParameters({
+  options: {
+    theme: create({
+      base: 'light',
+      brandTitle: 'Vital UI Kit React',
+      brandUrl: 'vitaluikit.com',
+    }),
     styles: stylesheet => ({
       ...stylesheet,
       button: {
@@ -54,16 +54,16 @@ addDecorator(
         },
       },
     }),
-  }),
-);
+  },
+});
 
-addDecorator(story => (
+addParameters(story => (
   <>
     <GlobalStyle />
     {story()}
   </>
 ));
-addDecorator(withThemes(vitalThemes));
+addParameters(withThemes(vitalThemes));
 // automatically import all files ending in *.stories.js
 // @ts-ignore
 const req = require.context('../packages', true, /.stories.tsx$/);

jest.config.js

@@ -6,7 +6,7 @@ module.exports = {
     '<rootDir>/examples/',
     '<rootDir>/node_modules/',
   ],
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
+  // moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
   moduleNameMapper: {
     '\\.(css|less)$': 'identity-obj-proxy',
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':

package.json

@@ -8,10 +8,10 @@
     ]
   },
   "scripts": {
-    "reset": "rimraf node_modules/ yarn.lock packages/*/node_modules",
+    "reset": "rm -rf node_modules/ yarn.lock packages/*/node_modules",
     "clean-all": "yarn cache clean && yarn run reset && yarn run clean:build",
     "bootstrap": "lerna bootstrap && yarn run build",
-    "clean:build": "lerna exec -- rimraf dist cjs",
+    "clean:build": "lerna exec -- rm -rf dist cjs",
     "build": "lerna run compile --stream",
     "prebuild": "yarn clean:build",
     "watch": "cross-env NODE_ENV=development lerna exec --parallel -- tsc-watch",
@@ -73,7 +73,7 @@
     "faker": "4.1.0",
     "husky": "1.3.1",
     "identity-obj-proxy": "3.0.0",
-    "jest": "23.6.0",
+    "jest": "24.5.0",
     "jest-specific-snapshot": "2.0.0",
     "jest-styled-components": "6.3.1",
     "lerna": "3.10.5",

packages/button/src/Button.spec.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Button } from './Button';
+import { render } from 'react-testing-library';
+
+describe('Button', () => {
+  it('should render with default styles', () => {
+    const button = render(<Button>button text</Button>);
+    expect(button).toMatchSnapshot();
+  });
+});

packages/button/src/Button.stories.tsx

@@ -8,7 +8,15 @@ import {
   select,
 } from '@storybook/addon-knobs/react';
 
-import { Button, ButtonGroup } from '.';
+import {
+  Button,
+  ButtonGroup,
+  FlatButton,
+  SubtleButton,
+  CicleButton,
+  LightButton,
+  LinkButton,
+} from '.';
 import { Star } from '../../icon/src';
 
 const StyledButton = styled(Button)`
@@ -48,8 +56,7 @@ storiesOf('Packages | Button', module)
     </Button>
   ))
   .add('Flat', () => (
-    <Button
-      flat={boolean('flat', true)}
+    <FlatButton
       nature={select(
         'Nature',
         {
@@ -64,11 +71,10 @@ storiesOf('Packages | Button', module)
       )}
     >
       {text('Label', 'Flat Button')}
-    </Button>
+    </FlatButton>
   ))
   .add('Light', () => (
-    <Button
-      light={boolean('Light', true)}
+    <LightButton
       nature={select(
         'Nature',
         {
@@ -83,29 +89,28 @@ storiesOf('Packages | Button', module)
       )}
     >
       {text('Label', 'Light Button')}
-    </Button>
+    </LightButton>
   ))
   .add('Disable', () => (
     <Button disabled={boolean('Disabled', true)}>
       {text('Label', 'Disable Button')}
     </Button>
   ))
   .add('Link', () => (
-    <Button
-      link
+    <LinkButton
       dark={boolean('Dark', false)}
       underline={boolean('Underline', false)}
     >
       {text('Label', 'Link Button')}
-    </Button>
+    </LinkButton>
   ))
   .add('Subtle', () => (
-    <Button subtle>{text('Label', 'Subtle Button')}</Button>
+    <SubtleButton>{text('Label', 'Subtle Button')}</SubtleButton>
   ))
   .add('Circular style', () => (
-    <Button circle={boolean('circle', true)}>
+    <CicleButton>
       <Star name="star" color="#3b5998" />
-    </Button>
+    </CicleButton>
   ))
   .add('ButtonGroup', () => (
     <ButtonGroup>

packages/button/src/Button.ts

@@ -0,0 +1,78 @@
+/**
+ * Copyright © 2018 Galaxy Software Services https://github.com/GSS-FED/vital-ui-kit-react
+ * MIT license
+ */
+
+import { defaultTheme } from '@vital-ui/react-theme';
+import { BoxProps } from '@vital-ui/react-utils';
+import cn from 'classnames';
+import styled from 'styled-components';
+import { BuiltinSize, ButtonSize, Nature } from './constant';
+import { natureColor } from './utils';
+import { boxStyle } from '@vital-ui/react-utils';
+
+function builtInOrTheme(
+  builtin: BuiltinSize | undefined,
+  theme: any,
+) {
+  return builtin ? builtin : theme.button;
+}
+
+export interface ButtonProps extends BoxProps {
+  builtinSize?: BuiltinSize;
+  /** 6 nature state */
+  nature?: Nature;
+  /** Button size */
+  size?: ButtonSize;
+  disabled?: boolean;
+}
+
+export const Button = styled('button').attrs(props => ({
+  type: 'button',
+  className: cn('vital__button', props.className),
+  theme: defaultTheme,
+  nature: 'default' as Nature,
+  size: 'medium' as ButtonSize,
+  selected: false,
+  disabled: false,
+}))<ButtonProps>`
+  position: relative;
+  background: ${props => props.theme.button.default.bg};
+  color: ${({ theme, nature }) => natureColor(theme)[nature]};
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${props => props.theme.borderColor};
+  font-size: ${({ builtinSize, theme, size }) =>
+    builtInOrTheme(builtinSize, theme)[size].fontSize};
+  border-radius: ${({ builtinSize, theme, size }) =>
+    builtInOrTheme(builtinSize, theme)[size].borderRadius};
+  padding: ${({ builtinSize, theme, size }) =>
+    builtInOrTheme(builtinSize, theme)[size].padding};
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  text-decoration: none;
+  &:hover {
+    background: ${props => props.theme.button.default.hoverBg};
+  }
+
+  &:active {
+    background: ${props => props.theme.button.default.activeBg};
+  }
+
+  &[disabled] {
+    color: ${({ theme }) => theme.button.disabled.color};
+    border-color: ${({ theme }) => theme.button.disabled.borderColor};
+    background: ${({ theme }) => theme.button.disabled.bg};
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  ${boxStyle};
+  ${props => props.theme.button.buttonStyle};
+`;