diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 000000000..1171d2113 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,9 @@ +language: node_js + +before_install: + - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.15.2 + - export PATH="$HOME/.yarn/bin:$PATH" + +cache: yarn + +script: yarn run ci diff --git a/package.json b/package.json index ce80d3abf..ffb5c7204 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,6 @@ "@commitlint/cli": "^7.5.2", "@commitlint/config-conventional": "^7.5.0", "husky": "^1.3.1", - "lerna": "^3.13.0" + "lerna": "^3.13.1" } } diff --git a/packages/configs/package.json b/packages/configs/package.json index e6a0fcd78..743c4eeab 100644 --- a/packages/configs/package.json +++ b/packages/configs/package.json @@ -7,7 +7,7 @@ "@bigcommerce/tslint-config": "^3.0.2", "lint-staged": "^8.1.5", "prettier": "^1.16.4", - "tslint": "^5.13.1", + "tslint": "^5.14.0", "tslint-config-prettier": "^1.18.0", "typescript": "^3.3.3333", "typescript-styled-plugin": "^0.14.0" diff --git a/packages/plab/.svgrrc.js b/packages/plab/.svgrrc.js index f40ffa41d..dbfa08a68 100644 --- a/packages/plab/.svgrrc.js +++ b/packages/plab/.svgrrc.js @@ -18,8 +18,7 @@ module.exports = { export default class COMPONENT_NAME extends Icon { render() { - const props = this.props; - const { title } = props; + const { title, theme, ...props } = this.props; const size = this.getSize(); BREAK diff --git a/packages/plab/babel.config.js b/packages/plab/babel.config.js index 4243cf475..da273cffc 100644 --- a/packages/plab/babel.config.js +++ b/packages/plab/babel.config.js @@ -6,9 +6,11 @@ module.exports = { [ '@babel/preset-env', { - targets: { - browsers: ['last 2 versions', 'not ie < 11', 'not Baidu > 0', 'not QQAndroid > 0', 'not Android < 62'], - }, + targets: isTestEnv + ? { node: 'current' } + : { + browsers: ['last 2 versions', 'not ie < 11', 'not Baidu > 0', 'not QQAndroid > 0', 'not Android < 62'], + }, modules: isTestEnv ? 'auto' : false, }, ], diff --git a/packages/plab/jest.config.js b/packages/plab/jest.config.js index a73702c5e..38753e62a 100644 --- a/packages/plab/jest.config.js +++ b/packages/plab/jest.config.js @@ -1,11 +1,9 @@ module.exports = { - transform: { - '.[jt]sx?$': '/node_modules/babel-jest', - }, testRegex: '(/(tests|src)/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$', moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], moduleNameMapper: { '@src/(.*)': '/src/$1', }, coverageDirectory: '/coverage', + setupFilesAfterEnv: ['/setupTests.ts', 'react-testing-library/cleanup-after-each'], }; diff --git a/packages/plab/package.json b/packages/plab/package.json index 3d557a2fe..9de79ffa3 100644 --- a/packages/plab/package.json +++ b/packages/plab/package.json @@ -4,7 +4,7 @@ "sideEffects": false, "main": "dist/plab.cjs.js", "module": "dist/plab.es.js", - "typings": "dist/index.d.ts", + "typings": "dist/src/index.d.ts", "author": "BigCommerce Inc", "repository": "git@github.com:bigcommerce-labs/plab-playground.git", "license": "UNLICENSED", @@ -32,13 +32,15 @@ ] }, "dependencies": { - "downshift": "^3.2.6", + "downshift": "^3.2.7", "hoist-non-react-statics": "^3.3.0", "polished": "^3.0.3", - "react": "^16.8.4", - "react-dom": "^16.8.4", - "react-popper": "^1.3.3", - "styled-components": "^4.1.3" + "react-popper": "^1.3.3" + }, + "peerDependencies": { + "react": ">= 16.3.0 < 17", + "react-dom": ">= 16.3.0 < 17", + "styled-components": "4.x" }, "devDependencies": { "@babel/core": "^7.1.5", @@ -50,18 +52,21 @@ "@svgr/cli": "^4.1.0", "@types/hoist-non-react-statics": "^3.3.0", "@types/jest": "^24.0.11", - "@types/react": "^16.8.7", + "@types/react": "^16.8.8", "@types/react-dom": "^16.8.0", "@types/react-test-renderer": "^16.0.2", "@types/styled-components": "^4.1.12", "babel-core": "^7.0.0-0", - "babel-jest": "^24.3.1", + "babel-jest": "^24.5.0", "babel-loader": "^8.0.4", "babel-plugin-styled-components": "^1.10.0", "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2", - "jest": "^24.3.1", + "jest": "^24.5.0", + "jest-dom": "^3.1.3", "jest-styled-components": "^6.3.1", - "react-test-renderer": "^16.8.4", + "react": "^16.8.4", + "react-dom": "^16.8.4", + "react-testing-library": "^6.0.1", "rimraf": "^2.6.3", "rollup": "^1.6.0", "rollup-plugin-babel": "^4.3.2", @@ -70,6 +75,7 @@ "rollup-plugin-node-resolve": "^4.0.1", "rollup-plugin-replace": "^2.1.0", "rollup-plugin-sourcemaps": "^0.4.2", - "rollup-plugin-typescript2": "^0.19.3" + "rollup-plugin-typescript2": "^0.20.1", + "styled-components": "^4.1.3" } } diff --git a/packages/plab/setupTests.ts b/packages/plab/setupTests.ts new file mode 100644 index 000000000..50f892d6d --- /dev/null +++ b/packages/plab/setupTests.ts @@ -0,0 +1 @@ +import 'jest-dom/extend-expect'; diff --git a/packages/plab/src/components/Button/Button.tsx b/packages/plab/src/components/Button/Button.tsx index bae2073b1..315b6bb21 100644 --- a/packages/plab/src/components/Button/Button.tsx +++ b/packages/plab/src/components/Button/Button.tsx @@ -1,4 +1,4 @@ -import React, { Ref, RefObject } from 'react'; +import React, { Ref } from 'react'; import { ThemeInterface } from '../../theme'; import { Spinner } from '../Spinner'; @@ -6,7 +6,7 @@ import { Spinner } from '../Spinner'; import { ContentWrapper, StyledButton } from './styled'; interface PrivateProps { - forwardedRef: RefObject | Ref; + forwardedRef: Ref; } export interface ButtonProps extends React.ButtonHTMLAttributes { @@ -46,14 +46,23 @@ class RawButton extends React.PureComponent { }; } -export const Button = React.forwardRef((props, ref) => ( +export const StyleableButton = React.forwardRef((props, ref) => ( )); -Button.displayName = 'Button'; -Button.defaultProps = { - actionType: 'normal', +export const Button = React.forwardRef(({ className, ...props }, ref) => ( + +)); + +const defaultProps = { + actionType: 'normal' as 'normal', isLoading: false, spinner: , - variant: 'primary', + variant: 'primary' as 'primary', }; + +Button.displayName = 'Button'; +Button.defaultProps = { ...defaultProps }; + +StyleableButton.displayName = 'StyleableButton'; +StyleableButton.defaultProps = { ...defaultProps }; diff --git a/packages/plab/src/components/Button/__snapshots__/spec.tsx.snap b/packages/plab/src/components/Button/__snapshots__/spec.tsx.snap index 4950bd0b7..fdb3b7ee8 100644 --- a/packages/plab/src/components/Button/__snapshots__/spec.tsx.snap +++ b/packages/plab/src/components/Button/__snapshots__/spec.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`sample test 1`] = ` +exports[`render default button 1`] = ` .c1 { -webkit-align-items: center; -webkit-box-align: center; @@ -96,13 +96,2142 @@ exports[`sample test 1`] = ` } +`; + +exports[`render destructive button 1`] = ` +.c3 + .c0 { + margin-left: 1rem; +} + +.c1 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 0.25rem; + border-style: solid; + border-width: 1px; + color: #FFFFFF; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: none; + -ms-flex: none; + flex: none; + font-weight: 400; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 2.25rem; + line-height: 2rem; + outline: none; + padding: 0 1rem; + pointer-events: auto; + position: relative; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + white-space: nowrap; + width: 100%; + background-color: #DB3643; + border-color: #DB3643; + font-weight: 600; +} + +.c1:focus { + outline: none; +} + +.c1[disabled] { + border-color: #D9DCE9; + pointer-events: none; +} + +.c1 + .c0 { + margin-left: 1rem; +} + +.c1:active { + background-color: #AD0000; +} + +.c1:focus { + box-shadow: 0 0 0 4px #FEDBDE; +} + +.c1:hover:not(:active) { + background-color: #CC1F1F; +} + +.c1[disabled] { + background-color: #D9DCE9; +} + +.c2 { + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: inline-grid; + grid-auto-flow: column; + grid-gap: 0.5rem; + visibility: visible; +} + +@media (min-width:720px) { + .c1 { + width: auto; + } +} + + +`; + +exports[`render destructive disabled button 1`] = ` +.c3 + .c0 { + margin-left: 1rem; +} + +.c1 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 0.25rem; + border-style: solid; + border-width: 1px; + color: #FFFFFF; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: none; + -ms-flex: none; + flex: none; + font-weight: 400; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 2.25rem; + line-height: 2rem; + outline: none; + padding: 0 1rem; + pointer-events: auto; + position: relative; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + white-space: nowrap; + width: 100%; + background-color: #DB3643; + border-color: #DB3643; + font-weight: 600; +} + +.c1:focus { + outline: none; +} + +.c1[disabled] { + border-color: #D9DCE9; + pointer-events: none; +} + +.c1 + .c0 { + margin-left: 1rem; +} + +.c1:active { + background-color: #AD0000; +} + +.c1:focus { + box-shadow: 0 0 0 4px #FEDBDE; +} + +.c1:hover:not(:active) { + background-color: #CC1F1F; +} + +.c1[disabled] { + background-color: #D9DCE9; +} + +.c2 { + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: inline-grid; + grid-auto-flow: column; + grid-gap: 0.5rem; + visibility: visible; +} + +@media (min-width:720px) { + .c1 { + width: auto; + } +} + + +`; + +exports[`render disabled button 1`] = ` +.c1 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 0.25rem; + border-style: solid; + border-width: 1px; + color: #FFFFFF; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: none; + -ms-flex: none; + flex: none; + font-weight: 400; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 2.25rem; + line-height: 2rem; + outline: none; + padding: 0 1rem; + pointer-events: auto; + position: relative; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + white-space: nowrap; + width: 100%; + background-color: #3C64F4; + border-color: #3C64F4; + font-weight: 600; +} + +.c1:focus { + outline: none; +} + +.c1[disabled] { + border-color: #D9DCE9; + pointer-events: none; +} + +.c1 + .c0 { + margin-left: 1rem; +} + +.c1:active { + background-color: #0B38D9; +} + +.c1:focus { + box-shadow: 0 0 0 4px #DBE3FE; +} + +.c1:hover:not(:active) { + background-color: #2852EB; +} + +.c1[disabled] { + background-color: #D9DCE9; +} + +.c2 { + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: inline-grid; + grid-auto-flow: column; + grid-gap: 0.5rem; + visibility: visible; +} + +@media (min-width:720px) { + .c1 { + width: auto; + } +} + + +`; + +exports[`render icon left and right button 1`] = ` +.c3 + .c0 { + margin-left: 1rem; +} + +.c4 + .c0 { + margin-left: 1rem; +} + +.c5 + .c0 { + margin-left: 1rem; +} + +.c6 + .c0 { + margin-left: 1rem; +} + +.c7 + .c0 { + margin-left: 1rem; +} + +.c8 + .c0 { + margin-left: 1rem; +} + +.c9 + .c0 { + margin-left: 1rem; +} + +.c10 + .c0 { + margin-left: 1rem; +} + +.c11 + .c0 { + margin-left: 1rem; +} + +.c12 + .c0 { + margin-left: 1rem; +} + +.c1 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 0.25rem; + border-style: solid; + border-width: 1px; + color: #FFFFFF; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: none; + -ms-flex: none; + flex: none; + font-weight: 400; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 2.25rem; + line-height: 2rem; + outline: none; + padding: 0 1rem; + pointer-events: auto; + position: relative; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + white-space: nowrap; + width: 100%; + padding-left: 0.5rem; + padding-right: 0.5rem; + background-color: #3C64F4; + border-color: #3C64F4; + font-weight: 600; +} + +.c1:focus { + outline: none; +} + +.c1[disabled] { + border-color: #D9DCE9; + pointer-events: none; +} + +.c1 + .c0 { + margin-left: 1rem; +} + +.c1:active { + background-color: #0B38D9; +} + +.c1:focus { + box-shadow: 0 0 0 4px #DBE3FE; +} + +.c1:hover:not(:active) { + background-color: #2852EB; +} + +.c1[disabled] { + background-color: #D9DCE9; +} + +.c2 { + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: inline-grid; + grid-auto-flow: column; + grid-gap: 0.5rem; + visibility: visible; +} + +@media (min-width:720px) { + .c1 { + width: auto; + } +} + + +`; + +exports[`render icon left button 1`] = ` +.c3 + .c0 { + margin-left: 1rem; +} + +.c4 + .c0 { + margin-left: 1rem; +} + +.c5 + .c0 { + margin-left: 1rem; +} + +.c6 + .c0 { + margin-left: 1rem; +} + +.c7 + .c0 { + margin-left: 1rem; +} + +.c8 + .c0 { + margin-left: 1rem; +} + +.c9 + .c0 { + margin-left: 1rem; +} + +.c10 + .c0 { + margin-left: 1rem; +} + +.c1 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 0.25rem; + border-style: solid; + border-width: 1px; + color: #FFFFFF; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: none; + -ms-flex: none; + flex: none; + font-weight: 400; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 2.25rem; + line-height: 2rem; + outline: none; + padding: 0 1rem; + pointer-events: auto; + position: relative; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + white-space: nowrap; + width: 100%; + padding-left: 0.5rem; + background-color: #3C64F4; + border-color: #3C64F4; + font-weight: 600; +} + +.c1:focus { + outline: none; +} + +.c1[disabled] { + border-color: #D9DCE9; + pointer-events: none; +} + +.c1 + .c0 { + margin-left: 1rem; +} + +.c1:active { + background-color: #0B38D9; +} + +.c1:focus { + box-shadow: 0 0 0 4px #DBE3FE; +} + +.c1:hover:not(:active) { + background-color: #2852EB; +} + +.c1[disabled] { + background-color: #D9DCE9; +} + +.c2 { + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: inline-grid; + grid-auto-flow: column; + grid-gap: 0.5rem; + visibility: visible; +} + +@media (min-width:720px) { + .c1 { + width: auto; + } +} + + +`; + +exports[`render icon only button 1`] = ` +.c3 + .c0 { + margin-left: 1rem; +} + +.c4 + .c0 { + margin-left: 1rem; +} + +.c5 + .c0 { + margin-left: 1rem; +} + +.c6 + .c0 { + margin-left: 1rem; +} + +.c7 + .c0 { + margin-left: 1rem; +} + +.c8 + .c0 { + margin-left: 1rem; +} + +.c9 + .c0 { + margin-left: 1rem; +} + +.c1 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 0.25rem; + border-style: solid; + border-width: 1px; + color: #FFFFFF; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: none; + -ms-flex: none; + flex: none; + font-weight: 400; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 2.25rem; + line-height: 2rem; + outline: none; + padding: 0 1rem; + pointer-events: auto; + position: relative; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + white-space: nowrap; + width: 100%; + padding: 0 0.5rem; + background-color: #3C64F4; + border-color: #3C64F4; + font-weight: 600; +} + +.c1:focus { + outline: none; +} + +.c1[disabled] { + border-color: #D9DCE9; + pointer-events: none; +} + +.c1 + .c0 { + margin-left: 1rem; +} + +.c1:active { + background-color: #0B38D9; +} + +.c1:focus { + box-shadow: 0 0 0 4px #DBE3FE; +} + +.c1:hover:not(:active) { + background-color: #2852EB; +} + +.c1[disabled] { + background-color: #D9DCE9; +} + +.c2 { + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: inline-grid; + grid-auto-flow: column; + grid-gap: 0.5rem; + visibility: visible; +} + +@media (min-width:720px) { + .c1 { + width: auto; + } +} + + +`; + +exports[`render icon right button 1`] = ` +.c3 + .c0 { + margin-left: 1rem; +} + +.c4 + .c0 { + margin-left: 1rem; +} + +.c5 + .c0 { + margin-left: 1rem; +} + +.c6 + .c0 { + margin-left: 1rem; +} + +.c7 + .c0 { + margin-left: 1rem; +} + +.c8 + .c0 { + margin-left: 1rem; +} + +.c9 + .c0 { + margin-left: 1rem; +} + +.c10 + .c0 { + margin-left: 1rem; +} + +.c11 + .c0 { + margin-left: 1rem; +} + +.c1 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 0.25rem; + border-style: solid; + border-width: 1px; + color: #FFFFFF; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: none; + -ms-flex: none; + flex: none; + font-weight: 400; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 2.25rem; + line-height: 2rem; + outline: none; + padding: 0 1rem; + pointer-events: auto; + position: relative; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + white-space: nowrap; + width: 100%; + padding-right: 0.5rem; + background-color: #3C64F4; + border-color: #3C64F4; + font-weight: 600; +} + +.c1:focus { + outline: none; +} + +.c1[disabled] { + border-color: #D9DCE9; + pointer-events: none; +} + +.c1 + .c0 { + margin-left: 1rem; +} + +.c1:active { + background-color: #0B38D9; +} + +.c1:focus { + box-shadow: 0 0 0 4px #DBE3FE; +} + +.c1:hover:not(:active) { + background-color: #2852EB; +} + +.c1[disabled] { + background-color: #D9DCE9; +} + +.c2 { + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: inline-grid; + grid-auto-flow: column; + grid-gap: 0.5rem; + visibility: visible; +} + +@media (min-width:720px) { + .c1 { + width: auto; + } +} + + +`; + +exports[`render loading button 1`] = ` +.c2 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 100%; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + position: absolute; + top: 0; + -webkit-transition: all 250ms ease-in-out; + transition: all 250ms ease-in-out; + width: 100%; +} + +.c3 { + -webkit-animation: iVXCSc 1s linear infinite; + animation: iVXCSc 1s linear infinite; + position: absolute; +} + +.c5 + .c0 { + margin-left: 1rem; +} + +.c6 + .c0 { + margin-left: 1rem; +} + +.c7 + .c0 { + margin-left: 1rem; +} + +.c8 + .c0 { + margin-left: 1rem; +} + +.c9 + .c0 { + margin-left: 1rem; +} + +.c10 + .c0 { + margin-left: 1rem; +} + +.c1 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 0.25rem; + border-style: solid; + border-width: 1px; + color: #FFFFFF; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: none; + -ms-flex: none; + flex: none; + font-weight: 400; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 2.25rem; + line-height: 2rem; + outline: none; + padding: 0 1rem; + pointer-events: none; + position: relative; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + white-space: nowrap; + width: 100%; + background-color: #3C64F4; + border-color: #3C64F4; + font-weight: 600; +} + +.c1:focus { + outline: none; +} + +.c1[disabled] { + border-color: #D9DCE9; + pointer-events: none; +} + +.c1 + .c0 { + margin-left: 1rem; +} + +.c1:active { + background-color: #0B38D9; +} + +.c1:focus { + box-shadow: 0 0 0 4px #DBE3FE; +} + +.c1:hover:not(:active) { + background-color: #2852EB; +} + +.c1[disabled] { + background-color: #D9DCE9; +} + +.c4 { + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: inline-grid; + grid-auto-flow: column; + grid-gap: 0.5rem; + visibility: hidden; +} + +@media (min-width:720px) { + .c1 { + width: auto; + } +} + + +`; + +exports[`render secondary button 1`] = ` +.c3 + .c0 { + margin-left: 1rem; +} + +.c4 + .c0 { + margin-left: 1rem; +} + +.c1 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 0.25rem; + border-style: solid; + border-width: 1px; + color: #FFFFFF; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: none; + -ms-flex: none; + flex: none; + font-weight: 400; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 2.25rem; + line-height: 2rem; + outline: none; + padding: 0 1rem; + pointer-events: auto; + position: relative; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + white-space: nowrap; + width: 100%; + background-color: transparent; + border-color: #3C64F4; + color: #3C64F4; +} + +.c1:focus { + outline: none; +} + +.c1[disabled] { + border-color: #D9DCE9; + pointer-events: none; +} + +.c1 + .c0 { + margin-left: 1rem; +} + +.c1:active { + background-color: #DBE3FE; +} + +.c1:focus { + box-shadow: 0 0 0 4px #DBE3FE; +} + +.c1:hover:not(:active) { + background-color: #F0F3FF; +} + +.c1[disabled] { + color: #D9DCE9; +} + +.c2 { + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: inline-grid; + grid-auto-flow: column; + grid-gap: 0.5rem; + visibility: visible; +} + +@media (min-width:720px) { + .c1 { + width: auto; + } +} + + +`; + +exports[`render secondary destructive button 1`] = ` +.c3 + .c0 { + margin-left: 1rem; +} + +.c4 + .c0 { + margin-left: 1rem; +} + +.c5 + .c0 { + margin-left: 1rem; +} + +.c1 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 0.25rem; + border-style: solid; + border-width: 1px; + color: #FFFFFF; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: none; + -ms-flex: none; + flex: none; + font-weight: 400; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 2.25rem; + line-height: 2rem; + outline: none; + padding: 0 1rem; + pointer-events: auto; + position: relative; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + white-space: nowrap; + width: 100%; + background-color: transparent; + border-color: #DB3643; + color: #DB3643; +} + +.c1:focus { + outline: none; +} + +.c1[disabled] { + border-color: #D9DCE9; + pointer-events: none; +} + +.c1 + .c0 { + margin-left: 1rem; +} + +.c1:active { + background-color: #FEDBDE; +} + +.c1:focus { + box-shadow: 0 0 0 4px #FEDBDE; +} + +.c1:hover:not(:active) { + background-color: #FFF0F1; +} + +.c1[disabled] { + color: #D9DCE9; +} + +.c2 { + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: inline-grid; + grid-auto-flow: column; + grid-gap: 0.5rem; + visibility: visible; +} + +@media (min-width:720px) { + .c1 { + width: auto; + } +} + + +`; + +exports[`render secondary destructive disabled button 1`] = ` +.c3 + .c0 { + margin-left: 1rem; +} + +.c4 + .c0 { + margin-left: 1rem; +} + +.c5 + .c0 { + margin-left: 1rem; +} + +.c1 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 0.25rem; + border-style: solid; + border-width: 1px; + color: #FFFFFF; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: none; + -ms-flex: none; + flex: none; + font-weight: 400; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 2.25rem; + line-height: 2rem; + outline: none; + padding: 0 1rem; + pointer-events: auto; + position: relative; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + white-space: nowrap; + width: 100%; + background-color: transparent; + border-color: #DB3643; + color: #DB3643; +} + +.c1:focus { + outline: none; +} + +.c1[disabled] { + border-color: #D9DCE9; + pointer-events: none; +} + +.c1 + .c0 { + margin-left: 1rem; +} + +.c1:active { + background-color: #FEDBDE; +} + +.c1:focus { + box-shadow: 0 0 0 4px #FEDBDE; +} + +.c1:hover:not(:active) { + background-color: #FFF0F1; +} + +.c1[disabled] { + color: #D9DCE9; +} + +.c2 { + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: inline-grid; + grid-auto-flow: column; + grid-gap: 0.5rem; + visibility: visible; +} + +@media (min-width:720px) { + .c1 { + width: auto; + } +} + + +`; + +exports[`render secondary disabled button 1`] = ` +.c3 + .c0 { + margin-left: 1rem; +} + +.c4 + .c0 { + margin-left: 1rem; +} + +.c1 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 0.25rem; + border-style: solid; + border-width: 1px; + color: #FFFFFF; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: none; + -ms-flex: none; + flex: none; + font-weight: 400; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 2.25rem; + line-height: 2rem; + outline: none; + padding: 0 1rem; + pointer-events: auto; + position: relative; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + white-space: nowrap; + width: 100%; + background-color: transparent; + border-color: #3C64F4; + color: #3C64F4; +} + +.c1:focus { + outline: none; +} + +.c1[disabled] { + border-color: #D9DCE9; + pointer-events: none; +} + +.c1 + .c0 { + margin-left: 1rem; +} + +.c1:active { + background-color: #DBE3FE; +} + +.c1:focus { + box-shadow: 0 0 0 4px #DBE3FE; +} + +.c1:hover:not(:active) { + background-color: #F0F3FF; +} + +.c1[disabled] { + color: #D9DCE9; +} + +.c2 { + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: inline-grid; + grid-auto-flow: column; + grid-gap: 0.5rem; + visibility: visible; +} + +@media (min-width:720px) { + .c1 { + width: auto; + } +} + + +`; + +exports[`render subtle button 1`] = ` +.c3 + .c0 { + margin-left: 1rem; +} + +.c4 + .c0 { + margin-left: 1rem; +} + +.c5 + .c0 { + margin-left: 1rem; +} + +.c6 + .c0 { + margin-left: 1rem; +} + +.c1 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 0.25rem; + border-style: solid; + border-width: 1px; + color: #FFFFFF; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: none; + -ms-flex: none; + flex: none; + font-weight: 400; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 2.25rem; + line-height: 2rem; + outline: none; + padding: 0 1rem; + pointer-events: auto; + position: relative; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + white-space: nowrap; + width: 100%; + background-color: transparent; + border-color: transparent; + color: #3C64F4; +} + +.c1:focus { + outline: none; +} + +.c1[disabled] { + border-color: #D9DCE9; + pointer-events: none; +} + +.c1 + .c0 { + margin-left: 1rem; +} + +.c1:active { + background-color: #DBE3FE; +} + +.c1:focus { + box-shadow: 0 0 0 4px #DBE3FE; +} + +.c1:hover:not(:active) { + background-color: #F0F3FF; +} + +.c1[disabled] { + border-color: transparent; + color: #D9DCE9; +} + +.c2 { + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: inline-grid; + grid-auto-flow: column; + grid-gap: 0.5rem; + visibility: visible; +} + +@media (min-width:720px) { + .c1 { + width: auto; + } +} + + +`; + +exports[`render subtle destructive button 1`] = ` +.c3 + .c0 { + margin-left: 1rem; +} + +.c4 + .c0 { + margin-left: 1rem; +} + +.c5 + .c0 { + margin-left: 1rem; +} + +.c6 + .c0 { + margin-left: 1rem; +} + +.c7 + .c0 { + margin-left: 1rem; +} + +.c1 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 0.25rem; + border-style: solid; + border-width: 1px; + color: #FFFFFF; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: none; + -ms-flex: none; + flex: none; + font-weight: 400; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 2.25rem; + line-height: 2rem; + outline: none; + padding: 0 1rem; + pointer-events: auto; + position: relative; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + white-space: nowrap; + width: 100%; + background-color: transparent; + border-color: transparent; + color: #DB3643; +} + +.c1:focus { + outline: none; +} + +.c1[disabled] { + border-color: #D9DCE9; + pointer-events: none; +} + +.c1 + .c0 { + margin-left: 1rem; +} + +.c1:active { + background-color: #FEDBDE; +} + +.c1:focus { + box-shadow: 0 0 0 4px #FEDBDE; +} + +.c1:hover:not(:active) { + background-color: #FFF0F1; +} + +.c1[disabled] { + border-color: transparent; + color: #D9DCE9; +} + +.c2 { + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: inline-grid; + grid-auto-flow: column; + grid-gap: 0.5rem; + visibility: visible; +} + +@media (min-width:720px) { + .c1 { + width: auto; + } +} + + +`; + +exports[`render subtle destructive disabled button 1`] = ` +.c3 + .c0 { + margin-left: 1rem; +} + +.c4 + .c0 { + margin-left: 1rem; +} + +.c5 + .c0 { + margin-left: 1rem; +} + +.c6 + .c0 { + margin-left: 1rem; +} + +.c7 + .c0 { + margin-left: 1rem; +} + +.c1 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 0.25rem; + border-style: solid; + border-width: 1px; + color: #FFFFFF; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: none; + -ms-flex: none; + flex: none; + font-weight: 400; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 2.25rem; + line-height: 2rem; + outline: none; + padding: 0 1rem; + pointer-events: auto; + position: relative; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + white-space: nowrap; + width: 100%; + background-color: transparent; + border-color: transparent; + color: #DB3643; +} + +.c1:focus { + outline: none; +} + +.c1[disabled] { + border-color: #D9DCE9; + pointer-events: none; +} + +.c1 + .c0 { + margin-left: 1rem; +} + +.c1:active { + background-color: #FEDBDE; +} + +.c1:focus { + box-shadow: 0 0 0 4px #FEDBDE; +} + +.c1:hover:not(:active) { + background-color: #FFF0F1; +} + +.c1[disabled] { + border-color: transparent; + color: #D9DCE9; +} + +.c2 { + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: inline-grid; + grid-auto-flow: column; + grid-gap: 0.5rem; + visibility: visible; +} + +@media (min-width:720px) { + .c1 { + width: auto; + } +} + + +`; + +exports[`render subtle disabled button 1`] = ` +.c3 + .c0 { + margin-left: 1rem; +} + +.c4 + .c0 { + margin-left: 1rem; +} + +.c5 + .c0 { + margin-left: 1rem; +} + +.c6 + .c0 { + margin-left: 1rem; +} + +.c1 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 0.25rem; + border-style: solid; + border-width: 1px; + color: #FFFFFF; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: none; + -ms-flex: none; + flex: none; + font-weight: 400; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 2.25rem; + line-height: 2rem; + outline: none; + padding: 0 1rem; + pointer-events: auto; + position: relative; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + white-space: nowrap; + width: 100%; + background-color: transparent; + border-color: transparent; + color: #3C64F4; +} + +.c1:focus { + outline: none; +} + +.c1[disabled] { + border-color: #D9DCE9; + pointer-events: none; +} + +.c1 + .c0 { + margin-left: 1rem; +} + +.c1:active { + background-color: #DBE3FE; +} + +.c1:focus { + box-shadow: 0 0 0 4px #DBE3FE; +} + +.c1:hover:not(:active) { + background-color: #F0F3FF; +} + +.c1[disabled] { + border-color: transparent; + color: #D9DCE9; +} + +.c2 { + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: inline-grid; + grid-auto-flow: column; + grid-gap: 0.5rem; + visibility: visible; +} + +@media (min-width:720px) { + .c1 { + width: auto; + } +} + + `; diff --git a/packages/plab/src/components/Button/index.ts b/packages/plab/src/components/Button/index.ts index 8b166a86e..4acfb5749 100644 --- a/packages/plab/src/components/Button/index.ts +++ b/packages/plab/src/components/Button/index.ts @@ -1 +1 @@ -export * from './Button'; +export { Button, ButtonProps } from './Button'; diff --git a/packages/plab/src/components/Button/private.ts b/packages/plab/src/components/Button/private.ts new file mode 100644 index 000000000..981ba3f88 --- /dev/null +++ b/packages/plab/src/components/Button/private.ts @@ -0,0 +1 @@ +export { StyleableButton } from './Button'; diff --git a/packages/plab/src/components/Button/spec.tsx b/packages/plab/src/components/Button/spec.tsx index 6a62025d9..6e1bd11fe 100644 --- a/packages/plab/src/components/Button/spec.tsx +++ b/packages/plab/src/components/Button/spec.tsx @@ -1,11 +1,174 @@ import 'jest-styled-components'; import React from 'react'; -import renderer from 'react-test-renderer'; +import { fireEvent, render } from 'react-testing-library'; -import { Button } from './Button'; +import { PlusIcon } from '../Icons'; -test('sample test', () => { - const tree = renderer.create(); + + expect(container.firstChild).toMatchSnapshot(); +}); + +test('render disabled button', () => { + const { container } = render(); + + expect(container.firstChild).toMatchSnapshot(); +}); + +test('render destructive button', () => { + const { container } = render(); + + expect(container.firstChild).toMatchSnapshot(); +}); + +test('render destructive disabled button', () => { + const { container } = render( + , + ); + + expect(container.firstChild).toMatchSnapshot(); +}); + +test('render secondary button', () => { + const { container } = render(); + + expect(container.firstChild).toMatchSnapshot(); +}); + +test('render secondary disabled button', () => { + const { container } = render( + , + ); + + expect(container.firstChild).toMatchSnapshot(); +}); + +test('render secondary destructive button', () => { + const { container } = render( + , + ); + + expect(container.firstChild).toMatchSnapshot(); +}); + +test('render secondary destructive disabled button', () => { + const { container } = render( + , + ); + + expect(container.firstChild).toMatchSnapshot(); +}); + +test('render subtle button', () => { + const { container } = render(); + + expect(container.firstChild).toMatchSnapshot(); +}); + +test('render subtle disabled button', () => { + const { container } = render( + , + ); + + expect(container.firstChild).toMatchSnapshot(); +}); + +test('render subtle destructive button', () => { + const { container } = render( + , + ); + + expect(container.firstChild).toMatchSnapshot(); +}); + +test('render subtle destructive disabled button', () => { + const { container } = render( + , + ); + + expect(container.firstChild).toMatchSnapshot(); +}); + +test('render loading button', () => { + const { container } = render(); + + expect(container.firstChild).toMatchSnapshot(); +}); + +test('render icon only button', () => { + const { container } = render(); + + expect(container.firstChild).toMatchSnapshot(); +}); + +test('render icon left button', () => { + const { container } = render(); + + expect(container.firstChild).toMatchSnapshot(); +}); + +test('render icon right button', () => { + const { container } = render(); + + expect(container.firstChild).toMatchSnapshot(); +}); + +test('render icon left and right button', () => { + const { container } = render( + , + ); + + expect(container.firstChild).toMatchSnapshot(); +}); + +test('forwards ref', () => { + const ref = React.createRef(); + + const { container } = render(