From 1bc7014aac4af3347615392e3738e12c0a679fcb Mon Sep 17 00:00:00 2001 From: "prateksha.u" Date: Tue, 3 Jul 2018 14:40:24 +0530 Subject: [PATCH 01/10] Switch component added --- .../app/bundles/shared/components/Switch.jsx | 36 +++++++++++ .../app/bundles/shared/components/Switch.scss | 64 +++++++++++++++++++ client/app/stories/Switch.stories.jsx | 10 +++ 3 files changed, 110 insertions(+) create mode 100644 client/app/bundles/shared/components/Switch.jsx create mode 100644 client/app/bundles/shared/components/Switch.scss create mode 100644 client/app/stories/Switch.stories.jsx diff --git a/client/app/bundles/shared/components/Switch.jsx b/client/app/bundles/shared/components/Switch.jsx new file mode 100644 index 0000000000..7e22e2becc --- /dev/null +++ b/client/app/bundles/shared/components/Switch.jsx @@ -0,0 +1,36 @@ +// @flow +import React from 'react'; +import css from './Switch.scss'; + +type Props = { + id?: string +}; + +type State = { + checked: boolean +}; + +export default class Switch extends React.Component { + constructor(props) { + super(props); + this.state = { checked: props.checked || false }; + this.handleChange = this.handleChange.bind(this); + } + + handleChange() { + this.setState({ checked: !this.state.checked }) + } + + render () { + const switchClassNames = `${css.switch}`; + const sliderClassNames = `${css.slider}`; + return ( +
+ +
+ ); + } +} diff --git a/client/app/bundles/shared/components/Switch.scss b/client/app/bundles/shared/components/Switch.scss new file mode 100644 index 0000000000..d9438561cc --- /dev/null +++ b/client/app/bundles/shared/components/Switch.scss @@ -0,0 +1,64 @@ +@import "_legacy.scss"; +@import "_base.scss"; + +.switch { + position: relative; + display: inline-block; + width: 119px; + height: 49px; +} + +.switch input { + position: absolute; + top: -99999px; + left: -99999px; +} + +.slider { + position: absolute; + font-size: $small-font; + font-family: $font-family; + text-align: center; + vertical-align: middle; + + line-height: 40px; + color: $mulberry-wood; + letter-spacing: 9.44%; + + cursor: pointer; + top: 0; left: 0; right: 0; bottom: 0; + background-color: $mulberry-wood; + border: 0px solid rgba(255, 255, 255, 0.7); + border-radius: 5px; + -webkit-transition: .2s; + transition: .2s; +} + +input:checked + .slider { + background-color: #BACF88; +} + +input:focus + .slider { + box-shadow: 0 0 1px #BACF88; +} + +.slider:after { + position: absolute; + content: "OFF"; + height: 43px; + width: 71.4px; + left: 2.3px; + top: 3.5px; + background-color: rgba(255, 255, 255, 0.7); + border: 0px solid rgba(255, 255, 255, 0.7); + border-radius: 5px; + -webkit-transition: .2s; + transition: .2s; +} + +input:checked + .slider:after { + content: 'ON'; + -webkit-transform: translateX(43.5px); + -ms-transform: translateX(43.5px); + transform: translateX(43.5px); +} diff --git a/client/app/stories/Switch.stories.jsx b/client/app/stories/Switch.stories.jsx new file mode 100644 index 0000000000..a5f87f8c19 --- /dev/null +++ b/client/app/stories/Switch.stories.jsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { withInfo } from '@storybook/addon-info'; +import { storiesOf } from '@storybook/react'; + +import Switch from 'bundles/shared/components/Switch'; + +storiesOf('Switch', module) + .add('Switch ON/OFF', withInfo({})(() => + + )); From c31b56e7702e92f72fb82b6d77be87ddbefa8833 Mon Sep 17 00:00:00 2001 From: Atibhi Agrawal Date: Tue, 3 Jul 2018 17:33:50 +0530 Subject: [PATCH 02/10] bind removed --- client/app/bundles/shared/components/Switch.jsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/client/app/bundles/shared/components/Switch.jsx b/client/app/bundles/shared/components/Switch.jsx index 7e22e2becc..7504dcdcf5 100644 --- a/client/app/bundles/shared/components/Switch.jsx +++ b/client/app/bundles/shared/components/Switch.jsx @@ -7,19 +7,19 @@ type Props = { }; type State = { - checked: boolean + checked?: boolean }; export default class Switch extends React.Component { constructor(props) { super(props); this.state = { checked: props.checked || false }; - this.handleChange = this.handleChange.bind(this); } - handleChange() { + handleChange = () => { this.setState({ checked: !this.state.checked }) - } + console.log("Hello"); + }; render () { const switchClassNames = `${css.switch}`; @@ -27,7 +27,7 @@ export default class Switch extends React.Component { return (
From a4ddfe5371737dda0295dc22b56d556067cefa4e Mon Sep 17 00:00:00 2001 From: Atibhi Agrawal Date: Tue, 3 Jul 2018 17:36:37 +0530 Subject: [PATCH 03/10] Updated the bind method --- client/app/bundles/shared/components/Switch.jsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/client/app/bundles/shared/components/Switch.jsx b/client/app/bundles/shared/components/Switch.jsx index 7e22e2becc..a5115d54ed 100644 --- a/client/app/bundles/shared/components/Switch.jsx +++ b/client/app/bundles/shared/components/Switch.jsx @@ -7,19 +7,18 @@ type Props = { }; type State = { - checked: boolean + checked?: boolean }; export default class Switch extends React.Component { - constructor(props) { + constructor(props: Props) { super(props); this.state = { checked: props.checked || false }; - this.handleChange = this.handleChange.bind(this); } - handleChange() { + handleChange = () => { this.setState({ checked: !this.state.checked }) - } + }; render () { const switchClassNames = `${css.switch}`; @@ -27,7 +26,7 @@ export default class Switch extends React.Component { return (
From 220cefc073e3133065f8ce4231792d4832164b37 Mon Sep 17 00:00:00 2001 From: Atibhi Agrawal Date: Tue, 3 Jul 2018 17:45:38 +0530 Subject: [PATCH 04/10] Update Switch.jsx --- client/app/bundles/shared/components/Switch.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/app/bundles/shared/components/Switch.jsx b/client/app/bundles/shared/components/Switch.jsx index a5115d54ed..05c3a5ae92 100644 --- a/client/app/bundles/shared/components/Switch.jsx +++ b/client/app/bundles/shared/components/Switch.jsx @@ -7,7 +7,7 @@ type Props = { }; type State = { - checked?: boolean + checked: boolean }; export default class Switch extends React.Component { From a61bb52b269b55b333533a885d43a7ada0570c9c Mon Sep 17 00:00:00 2001 From: prateksha_u <32712346+prateksha@users.noreply.github.com> Date: Tue, 3 Jul 2018 18:03:52 +0530 Subject: [PATCH 05/10] Update Switch.jsx --- client/app/bundles/shared/components/Switch.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/app/bundles/shared/components/Switch.jsx b/client/app/bundles/shared/components/Switch.jsx index 05c3a5ae92..a305e30394 100644 --- a/client/app/bundles/shared/components/Switch.jsx +++ b/client/app/bundles/shared/components/Switch.jsx @@ -13,7 +13,7 @@ type State = { export default class Switch extends React.Component { constructor(props: Props) { super(props); - this.state = { checked: props.checked || false }; + this.state = { checked: this.props.checked || false }; } handleChange = () => { From 97b3735af0ab451364e360b32815d0f1fc54eea7 Mon Sep 17 00:00:00 2001 From: Atibhi Agrawal Date: Thu, 5 Jul 2018 12:57:30 +0530 Subject: [PATCH 06/10] writing tests --- .../app/bundles/shared/components/Switch.jsx | 27 +++++++++---------- .../components/__tests__/Switch.spec.jsx | 11 ++++++++ 2 files changed, 23 insertions(+), 15 deletions(-) create mode 100644 client/app/bundles/shared/components/__tests__/Switch.spec.jsx diff --git a/client/app/bundles/shared/components/Switch.jsx b/client/app/bundles/shared/components/Switch.jsx index 7504dcdcf5..efa5ff6c90 100644 --- a/client/app/bundles/shared/components/Switch.jsx +++ b/client/app/bundles/shared/components/Switch.jsx @@ -4,33 +4,30 @@ import css from './Switch.scss'; type Props = { id?: string -}; +} type State = { - checked?: boolean + checked: boolean }; export default class Switch extends React.Component { - constructor(props) { + constructor(props: Props) { super(props); - this.state = { checked: props.checked || false }; + this.state = { checked: this.props.checked || false }; } handleChange = () => { - this.setState({ checked: !this.state.checked }) - console.log("Hello"); + this.setState({ checked: !this.state.checked }); }; - render () { - const switchClassNames = `${css.switch}`; - const sliderClassNames = `${css.slider}`; + render() { return ( -
- -
+
+ +
); } } diff --git a/client/app/bundles/shared/components/__tests__/Switch.spec.jsx b/client/app/bundles/shared/components/__tests__/Switch.spec.jsx new file mode 100644 index 0000000000..a177359b99 --- /dev/null +++ b/client/app/bundles/shared/components/__tests__/Switch.spec.jsx @@ -0,0 +1,11 @@ +// @flow +import { render } from 'enzyme'; +import React from 'react'; +import Switch from '../Switch'; + +describe('Switch', () => { + it('renders the switch', () => { + let wrapper = shallow(); + expect(wrapper.find('.')) + }); +}); From 3eb7e0acf85e7f4ae9a163abf4a826e09596086f Mon Sep 17 00:00:00 2001 From: "prateksha.u" Date: Thu, 5 Jul 2018 12:59:01 +0530 Subject: [PATCH 07/10] Fixed Lint errors --- .../app/bundles/shared/components/Switch.jsx | 20 +++++++++---------- .../app/bundles/shared/components/Switch.scss | 11 ++++------ .../bundles/shared/components/_colors.scss | 1 + 3 files changed, 14 insertions(+), 18 deletions(-) diff --git a/client/app/bundles/shared/components/Switch.jsx b/client/app/bundles/shared/components/Switch.jsx index a305e30394..7d146a5a8d 100644 --- a/client/app/bundles/shared/components/Switch.jsx +++ b/client/app/bundles/shared/components/Switch.jsx @@ -4,7 +4,7 @@ import css from './Switch.scss'; type Props = { id?: string -}; +} type State = { checked: boolean @@ -17,19 +17,17 @@ export default class Switch extends React.Component { } handleChange = () => { - this.setState({ checked: !this.state.checked }) + this.setState({ checked: !this.state.checked }); }; - render () { - const switchClassNames = `${css.switch}`; - const sliderClassNames = `${css.slider}`; + render() { return ( -
- -
+
+ +
); } } diff --git a/client/app/bundles/shared/components/Switch.scss b/client/app/bundles/shared/components/Switch.scss index d9438561cc..173b6affe7 100644 --- a/client/app/bundles/shared/components/Switch.scss +++ b/client/app/bundles/shared/components/Switch.scss @@ -10,8 +10,7 @@ .switch input { position: absolute; - top: -99999px; - left: -99999px; + display: none; } .slider { @@ -30,21 +29,20 @@ background-color: $mulberry-wood; border: 0px solid rgba(255, 255, 255, 0.7); border-radius: 5px; - -webkit-transition: .2s; transition: .2s; } input:checked + .slider { - background-color: #BACF88; + background-color: $yellow-green; } input:focus + .slider { - box-shadow: 0 0 1px #BACF88; + box-shadow: 0 0 1px $yellow-green; } .slider:after { position: absolute; - content: "OFF"; + content: 'OFF'; height: 43px; width: 71.4px; left: 2.3px; @@ -52,7 +50,6 @@ input:focus + .slider { background-color: rgba(255, 255, 255, 0.7); border: 0px solid rgba(255, 255, 255, 0.7); border-radius: 5px; - -webkit-transition: .2s; transition: .2s; } diff --git a/client/app/bundles/shared/components/_colors.scss b/client/app/bundles/shared/components/_colors.scss index a3af3cee46..75454c23b0 100644 --- a/client/app/bundles/shared/components/_colors.scss +++ b/client/app/bundles/shared/components/_colors.scss @@ -10,6 +10,7 @@ $white: #ffffff; $hampton: #e2d6a8; $mulberry-wood: #6d0839; $teak: #b4a362; +$yellow-green: #bacf88; $text-color: $black; $text-color-reverse: $white; From 2ccdf16d20b36e83cbcdc74bb934c91c144dfae4 Mon Sep 17 00:00:00 2001 From: Atibhi Agrawal Date: Thu, 5 Jul 2018 16:01:11 +0530 Subject: [PATCH 08/10] Switch test added --- client/app/bundles/shared/components/Switch.jsx | 8 +------- .../shared/components/__tests__/Switch.spec.jsx | 12 +++++++++--- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/client/app/bundles/shared/components/Switch.jsx b/client/app/bundles/shared/components/Switch.jsx index a8724ca972..7c361b95da 100644 --- a/client/app/bundles/shared/components/Switch.jsx +++ b/client/app/bundles/shared/components/Switch.jsx @@ -23,15 +23,9 @@ export default class Switch extends React.Component { render() { return (
-<<<<<<< HEAD
); diff --git a/client/app/bundles/shared/components/__tests__/Switch.spec.jsx b/client/app/bundles/shared/components/__tests__/Switch.spec.jsx index dadde193a1..f065bfbcb4 100644 --- a/client/app/bundles/shared/components/__tests__/Switch.spec.jsx +++ b/client/app/bundles/shared/components/__tests__/Switch.spec.jsx @@ -1,11 +1,17 @@ // @flow -import { render } from 'enzyme'; +import { shallow } from 'enzyme'; import React from 'react'; import Switch from '../Switch'; describe('Switch', () => { - it('renders the switch', () => { + it('always renders the switch', () => { let wrapper = shallow(); - expect(wrapper.find('.').exists()).toEqual(true); + expect(wrapper.find('input').exists()).toEqual(true); + }); + it('checks if switch toggles on click', () => { + let wrapper = shallow(); + expect(wrapper.find('input').exists()).toEqual(true); + wrapper.find('input').simulate('click'); + expect(wrapper.find('input').exists()).toEqual(true); }); }); From 889d300332b3acf93aba173fb7a9d32a30706eba Mon Sep 17 00:00:00 2001 From: Atibhi Agrawal Date: Tue, 10 Jul 2018 09:26:30 +0530 Subject: [PATCH 09/10] test updated, checked prop validated --- client/app/bundles/shared/components/Switch.jsx | 6 ++++-- .../bundles/shared/components/__tests__/Switch.spec.jsx | 8 ++++---- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/client/app/bundles/shared/components/Switch.jsx b/client/app/bundles/shared/components/Switch.jsx index 7c361b95da..1da0bbe934 100644 --- a/client/app/bundles/shared/components/Switch.jsx +++ b/client/app/bundles/shared/components/Switch.jsx @@ -3,7 +3,8 @@ import React from 'react'; import css from './Switch.scss'; type Props = { - id?: string + id?: string, + checked?: boolean } type State = { @@ -21,9 +22,10 @@ export default class Switch extends React.Component { }; render() { + const { id } = this.props; return (
-