Theme update

.circleci/config.yml

@@ -21,25 +21,25 @@ jobs:
       # Download and cache dependencies
       - restore_cache:
           keys:
-            - yarn-cache-{{ checksum "yarn.lock" }}
-            - yarn-cache-
+            - yarn-cache-v2-{{ checksum "yarn.lock" }}
+            - yarn-cache-v2
       - restore_cache:
           keys:
-            - dependency-cache-{{ checksum "yarn.lock" }}
-            - dependency-cache-
+            - dependency-cache-v2-{{ checksum "yarn.lock" }}
+            - dependency-cache-v2
       - run:
           name: Install Dependencies
           command: |
             sudo npm install -g yarn
-            sudo yarn config set cache-folder .yarn-cache
+            sudo yarn config set cache-folder .yarn-cache-v2
             sudo yarn install --pure-lockfile
       - run: yarn cache dir
       - save_cache:
-          key: yarn-cache-{{ checksum "yarn.lock" }}
+          key: yarn-cache-v2-{{ checksum "yarn.lock" }}
           paths:
-            - .yarn-cache
+            - .yarn-cache-v2
       - save_cache:
-          key: dependency-cache-{{ checksum "yarn.lock" }}
+          key: dependency-cache-v2-{{ checksum "yarn.lock" }}
           paths:
             - node_modules
       - run:

jest.config.js

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

package.json

@@ -69,6 +69,7 @@
     "cross-env": "5.2.0",
     "faker": "4.1.0",
     "husky": "1.0.0-rc.13",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "23.5.0",
     "jest-specific-snapshot": "1.0.0",
     "jest-styled-components": "5.0.1",

packages/button/package.json

@@ -18,7 +18,8 @@
   "dependencies": {
     "@vital-ui/react-theme": "^0.8.6",
     "classnames": "^2.2.6",
-    "polished": "^2.0.0"
+    "polished": "^2.0.0",
+    "styled-map": "^3.0.0"
   },
   "devDependencies": {
     "typescript": "^3.0.1"

packages/button/src/Button.tsx

@@ -5,8 +5,10 @@
 
 import * as React from 'react';
 import cn from 'classnames';
-
-import ButtonElement from './styled';
+import styled, { css } from 'styled-components';
+import { darken, lighten } from 'polished';
+import { defaultTheme } from '@vital-ui/react-theme';
+import { size as SIZE } from './constant';
 
 export type Nature =
   | 'default'
@@ -18,6 +20,173 @@ export type Nature =
 
 export type Size = 'xlarge' | 'large' | 'medium' | 'small' | 'xsmall';
 
+type StyledButtonProps = {
+  nature: Nature;
+  size: Size;
+  subtle?: boolean;
+  selected?: boolean;
+  flat?: boolean;
+  light?: boolean;
+  link?: boolean;
+  dark?: boolean;
+  underline?: boolean;
+  circle?: boolean;
+};
+
+export const natureColor = (theme: typeof defaultTheme) => ({
+  default: theme.colors.secondary700,
+  primary: theme.colors.primary,
+  success: theme.colors.success,
+  info: theme.colors.info,
+  alarm: theme.colors.alarm,
+  warning: theme.colors.warning,
+});
+
+const ButtonElement = styled<StyledButtonProps, 'button'>('button')`
+  position: relative;
+  background: ${({ theme }) => theme.button.default.bg};
+  color: ${({ theme, nature }) => natureColor(theme)[nature]};
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${({ theme }) => theme.borderColor};
+  font-size: ${({ size }) => SIZE[size].fontSize};
+  border-radius: ${({ size }) => SIZE[size].borderRadius};
+  padding: ${({ size }) => SIZE[size].padding};
+  line-height: 1;
+  font-weight: normal;
+  margin: 0;
+  outline: none;
+  padding: ${({ size }) => SIZE[size].padding};
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  text-decoration: none;
+
+  &:hover {
+    background: ${({ theme }) => theme.button.default.hoverBg};
+  }
+
+  &:active {
+    background: ${({ theme }) => theme.button.default.activeBg};
+  }
+
+  ${({ subtle, selected, theme, nature }) =>
+    subtle &&
+    css`
+      background: ${selected
+        ? theme.button.subtle.bg
+        : 'transparent'};
+      color: ${nature === 'default'
+        ? theme.button.subtle.color
+        : natureColor(theme)[nature]};
+      border: 1px solid transparent;
+
+      &:hover {
+        background: ${theme.button.subtle.hoverBg};
+      }
+    `};
+
+  ${({ flat, nature, theme }) =>
+    flat &&
+    css`
+      background: ${nature === 'default'
+        ? theme.button.flat.bg
+        : natureColor(theme)[nature]};
+      color: ${nature === 'default'
+        ? natureColor(theme).default
+        : theme.button.flat.color};
+      border-color: ${nature === 'default'
+        ? theme.button.flat.bg
+        : natureColor(theme)[nature]};
+
+      &:hover {
+        background: ${nature === 'default'
+          ? theme.button.flat.hoverBg
+          : lighten(0.1, natureColor(theme)[nature])};
+        border-color: ${nature === 'default'
+          ? theme.borderColor
+          : lighten(0.1, natureColor(theme)[nature])};
+      }
+      &:active {
+        background: ${nature === 'default'
+          ? theme.button.flat.activeBg
+          : darken(0.12, natureColor(theme)[nature])};
+        border-color: ${nature === 'default'
+          ? theme.button.flat.activeBorderColor
+          : darken(0.12, natureColor(theme)[nature])};
+      }
+    `};
+
+  ${({ light, theme, nature }) =>
+    light &&
+    css`
+      background: ${theme.button.light.bg};
+      color: ${natureColor(theme)[nature]};
+
+      &:hover {
+        background: ${theme.button.light.hoverBg};
+      }
+    `}
+
+  ${({ link, theme }) =>
+    link &&
+    css`
+      background: ${theme.button.link.bg};
+      color: ${theme.button.link.color};
+      border: 1px solid transparent;
+
+      &:hover {
+        background: ${theme.button.link.hoverBg};
+        color: ${theme.button.link.hoverColor};
+      }
+    `}
+
+   ${({ link, dark, theme }) =>
+     link &&
+     dark &&
+     css`
+       color: ${theme.button.link.darkColor};
+
+       &:hover {
+         color: ${theme.button.link.hoverDarkColor};
+       }
+     `}
+
+   ${({ underline }) =>
+     underline &&
+     css`
+       &:hover {
+         text-decoration: underline;
+       }
+     `}
+
+   ${({ circle }) =>
+     circle &&
+     css`
+       display: flex;
+       justify-content: center;
+       align-items: center;
+       padding: 0;
+       border-radius: 100%;
+       width: 2.066rem;
+       line-height: 2.066rem;
+       height: 2.066rem;
+     `}
+
+  &[disabled] {
+    color: ${({ theme }) => theme.button.disabled.color};
+    border-color: ${({ theme }) => theme.button.disabled.borderColor};
+    background-color: ${({ theme }) => theme.button.disabled.bg};
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+`;
+
+ButtonElement.defaultProps = {
+  theme: defaultTheme,
+};
+
 export interface ButtonProps {
   /** `vital_button` */
   className?: string;

packages/button/src/constant.ts

@@ -30,12 +30,3 @@ export const size = {
     height: '3rem',
   },
 };
-
-export const natureColor = (colors: any) => ({
-  default: colors.secondary700,
-  primary: colors.primary,
-  success: colors.success,
-  info: colors.info,
-  alarm: colors.alarm,
-  warning: colors.warning,
-});