1.0.6

* Fixing DOM error in FAQ page * Addressing #1 * Addressing #2
atomicpages · Mar 28, 2019 · 80729d5 · 80729d5
1 parent 373bfdd
commit 80729d5
Show file tree

Hide file tree

Showing 9 changed files with 3,892 additions and 2,477 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -20,19 +20,19 @@
     "license": "MIT",
     "dependencies": {
         "markdown": "^0.5.0",
-        "moize": "^5.4.1",
+        "moize": "^5.4.3",
         "pretty-checkbox": "^3.0.3",
-        "pretty-checkbox-react": "^1.0.0",
-        "react": "^16.7.0",
-        "react-dom": "^16.7.0",
+        "pretty-checkbox-react": "^1.0.5",
+        "react": "^16.8.5",
+        "react-dom": "^16.8.5",
         "react-live": "^1.12.0",
-        "react-scripts": "^2.1.3",
-        "react-syntax-highlighter": "^10.1.2"
+        "react-scripts": "^2.1.8",
+        "react-syntax-highlighter": "^10.2.1"
     },
     "devDependencies": {
         "gh-pages": "^2.0.1",
         "node-sass": "^4.11.0",
-        "react-docgen": "^3.0.0-rc.2"
+        "react-docgen": "^3.0.0"
     },
     "browserslist": [
         ">0.2%",

diff --git a/docs/src/index.js b/docs/src/index.js
@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
 import ListProps from './components/ListProps';
 import Installation from './sections/Installation';
 import BasicCheckbox from './sections/BasicCheckbox';
-import Switch from './sections/Switch';
+import SwitchPage from './sections/Switch';
 import Colors from './sections/Colors';
 import FontIcons from './sections/FontIcons';
 import SVG from './sections/SVG';
@@ -88,7 +88,7 @@ function App() {
                     <section className="section" id="basic-checkbox"><BasicCheckbox /></section>
                 </div>
                 <div className="col-md-8 mx-auto">
-                    <section className="section" id="switch"><Switch /></section>
+                    <section className="section" id="switch"><SwitchPage /></section>
                 </div>
                 <div className="col-md-8 mx-auto">
                     <section className="section" id="colors"><Colors /></section>

diff --git a/docs/src/sections/FAQ.js b/docs/src/sections/FAQ.js
@@ -31,8 +31,8 @@ const customRender = `<Checkbox>{({ className, node }) => (
 
 const QA = ({ title, children }: { title: React.Node, children: React.Node }) => (
     <li>
-        <p className="q-title">{title}</p>
-        <p className="q-resp">{children}</p>
+        <div className="q-title">{title}</div>
+        <div className="q-resp">{children}</div>
     </li>
 );
 

diff --git a/docs/src/sections/Switch.js b/docs/src/sections/Switch.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Switch as ReactSwitch } from 'pretty-checkbox-react';
+import { Switch } from 'pretty-checkbox-react';
 
 import { Title } from '../components/Title';
 import { CollapseContainer } from '../components/CollapseContainer';
@@ -12,15 +12,15 @@ import {
     LivePreview
 } from 'react-live';
 
-const scope = { ReactSwitch };
+const scope = { Switch };
 
 const basicSwitch = `<>
-    <ReactSwitch>Outline</ReactSwitch>
-    <ReactSwitch shape="fill">Fill</ReactSwitch>
-    <ReactSwitch shape="slim">Slim</ReactSwitch>
+    <Switch>Outline</Switch>
+    <Switch shape="fill">Fill</Switch>
+    <Switch shape="slim">Slim</Switch>
 </>`;
 
-function Switch() {
+function SwitchPage() {
     return (
         <>
             <Title>Switch</Title>
@@ -41,4 +41,4 @@ function Switch() {
     );
 }
 
-export default Switch;
+export default SwitchPage;
diff --git a/docs/yarn.lock b/docs/yarn.lock
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -45,40 +45,40 @@
         "react": "^16.7.0"
     },
     "devDependencies": {
-        "@babel/core": "^7.2.2",
-        "@babel/plugin-proposal-class-properties": "^7.3.0",
-        "@babel/plugin-proposal-object-rest-spread": "^7.3.1",
-        "@babel/preset-env": "^7.3.1",
+        "@babel/core": "^7.4.0",
+        "@babel/plugin-proposal-class-properties": "^7.4.0",
+        "@babel/plugin-proposal-object-rest-spread": "^7.4.0",
+        "@babel/preset-env": "^7.4.2",
         "@babel/preset-flow": "^7.0.0",
         "@babel/preset-react": "^7.0.0",
         "babel-core": "^7.0.0-bridge.0",
         "babel-eslint": "^9.0.0",
         "babel-jest": "^23.6.0",
-        "coveralls": "^3.0.2",
+        "coveralls": "^3.0.3",
         "eslint": "5.6.0",
         "eslint-config-prettier": "^3.6.0",
-        "eslint-plugin-flowtype": "^3.2.1",
+        "eslint-plugin-flowtype": "^3.4.2",
         "eslint-plugin-prettier": "^3.0.1",
         "eslint-plugin-react": "^7.12.4",
         "flow": "^0.2.3",
         "flow-bin": "^0.91.0",
-        "flow-copy-source": "^2.0.2",
+        "flow-copy-source": "^2.0.3",
         "flow-coverage-report": "^0.6.1",
         "jest": "^23.6.0",
-        "jest-dom": "^3.0.0",
-        "prettier": "^1.16.1",
+        "jest-dom": "^3.1.3",
+        "prettier": "^1.16.4",
         "pretty-checkbox": "^3.0.3",
-        "react": "^16.7.0",
-        "react-docgen": "^3.0.0-rc.2",
-        "react-dom": "^16.7.0",
-        "react-testing-library": "^5.4.4",
+        "react": "^16.8.5",
+        "react-docgen": "^3.0.0",
+        "react-dom": "^16.8.5",
+        "react-testing-library": "^5.9.0",
         "rimraf": "^2.6.3",
-        "rollup": "^1.1.2",
+        "rollup": "^1.7.3",
         "rollup-plugin-babel": "^4.3.2",
-        "rollup-plugin-commonjs": "^9.2.0",
+        "rollup-plugin-commonjs": "^9.2.2",
         "rollup-plugin-json": "^3.1.0",
-        "rollup-plugin-node-resolve": "^4.0.0",
-        "rollup-plugin-uglify": "^6.0.1"
+        "rollup-plugin-node-resolve": "^4.0.1",
+        "rollup-plugin-uglify": "^6.0.2"
     },
     "dependencies": {
         "classnames": "^2.2.6"

diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js
@@ -36,6 +36,7 @@ function Checkbox(props: CheckboxProps) {
                 props.indeterminate ? 'p-has-indeterminate' : null,
                 className
             )}
+            animation={animation}
             {...rest} />
     );
 }

diff --git a/src/components/__tests__/Checkbox.test.js b/src/components/__tests__/Checkbox.test.js
@@ -11,9 +11,7 @@ describe('Checkbox tests', function () {
     describe('Basic Checkbox usage', function () {
         it('should behave as a checkbox', function () {
             const handleChange = jest.fn();
-            const { container, debug } = render(<Checkbox className="dummy-selector" id="foo" onChange={handleChange} />);
-
-            debug();
+            const { container } = render(<Checkbox className="dummy-selector" id="foo" onChange={handleChange} />);
 
             expect(getByTestId(container, 'pcr-input')).toHaveAttribute('type', 'checkbox');
             expect(getByTestId(container, 'pcr-wrapper')).toHaveClass('dummy-selector');
@@ -48,6 +46,33 @@ describe('Checkbox tests', function () {
         });
     });
 
+    describe('Checkbox supports animations', function () {
+        it('should have the correct smooth className', function () {
+            const { container } = render(<Checkbox shape="round" color="primary" animation="smooth">Monday</Checkbox>);
+            expect(getByTestId(container, 'pcr-wrapper')).toHaveClass('p-smooth');
+        });
+
+        it('should have the correct jelly className', function () {
+            const { container } = render(<Checkbox shape="round" color="primary" icon={<i className="mdi mdi-check" />} animation="jelly">Interested</Checkbox>);
+            expect(getByTestId(container, 'pcr-wrapper')).toHaveClass('p-jelly');
+        });
+
+        it('should have the correct tada className', function () {
+            const { container } = render(<Checkbox shape="round" color="primary-o" icon={<i className="mdi mdi-heart" />} animation="tada">Good</Checkbox>);
+            expect(getByTestId(container, 'pcr-wrapper')).toHaveClass('p-tada');
+        });
+
+        it('should have the correct rotate className', function () {
+            const { container } = render(<Checkbox color="success" icon={<i className="mdi mdi-check" />} animation="rotate">Friends</Checkbox>);
+            expect(getByTestId(container, 'pcr-wrapper')).toHaveClass('p-rotate');
+        });
+
+        it('should have the correct pulse className', function () {
+            const { container } = render(<Checkbox color="warning-o" animation="pulse">Family</Checkbox>);
+            expect(getByTestId(container, 'pcr-wrapper')).toHaveClass('p-pulse');
+        });
+    });
+
     describe('Checkbox indeterminate', function () {
         it('should provide style hooks when checkbox is an indeterminate', function () {
             const { container } = render(<Checkbox indeterminate>Hello there.</Checkbox>);