diff --git a/ui/src/components/toggle/index-old.js b/ui/src/components/toggle/index-old.js
new file mode 100644
index 00000000..559ccd5d
--- /dev/null
+++ b/ui/src/components/toggle/index-old.js
@@ -0,0 +1,136 @@
+const constants = require('../../shared/constants');
+const composers = require('../../shared/composers');
+const fns = require('../../shared/functions');
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+ boxes,
+ colors,
+ typography
+} = constants;
+
+const {
+ pseudoEl
+} = composers;
+
+const {
+ remcalc,
+ rndId
+} = fns;
+
+const {
+ default: styled
+} = Styled;
+
+const classNames = {
+ label: rndId()
+};
+
+const StyledLabel = styled.label`
+ border-radius: ${boxes.borderRadius};
+ color: #464646;
+ height: 2.5rem;
+ width: ${remcalc(110)};
+`;
+
+const StyledToggleLabel = styled.div`
+ background-color: #E6E6E6;
+ border: solid 1px #D8D8D8;
+ border-radius: ${boxes.borderRadius};
+ color: #000000;
+ height: ${remcalc(54)};
+ margin: 0.125rem;
+ padding-left: ${remcalc(12)};
+ position: relative;
+ text-align: right;
+ width: ${remcalc(106)};
+
+ &::before {
+ content: "${props => props.labelRight}";
+ font-family: ${typography.fontPrimary};
+ font-size: inherit;
+ font-weight: bold;
+ position: absolute;
+ right: 24px;
+ top: 19px;
+ }
+
+ &::after {
+ content: "${props => props.labelLeft}";
+ background-color: #FFFFFF;
+ border-radius: ${boxes.borderRadius};
+ height: ${remcalc(46)};
+ width: ${remcalc(46)};
+
+ ${pseudoEl({
+ top: '3px',
+ left: '3px',
+ })}
+ }
+`;
+
+const StyledInput = styled.input`
+ display: none;
+
+ &:checked {
+ & + .${classNames.label} {
+ background: ${colors.confirmation};
+ border: ${boxes.border.confirmed};
+ color: #FFFFFF;
+ padding-left: 0;
+ padding-right: ${remcalc(12)};
+ text-align: left;
+
+ &::before {
+ content: "${props => props.labelLeft}";
+
+ left: 20px;
+ right: auto;
+ }
+
+ &::after {
+ left: auto;
+ right: 3px;
+ }
+ }
+ }
+`;
+
+const Toggle = ({
+ checked,
+ className,
+ defaultChecked,
+ labelLeft = "On",
+ labelRight = "Off",
+ id = rndId(),
+ style
+}) => {
+ return (
+
+
+
+
+ );
+};
+
+Toggle.propTypes = {
+ checked: React.PropTypes.bool,
+ className: React.PropTypes.string,
+ defaultChecked: React.PropTypes.bool,
+ id: React.PropTypes.string,
+ style: React.PropTypes.object
+};
+
+module.exports = Toggle;
diff --git a/ui/src/components/toggle/index.js b/ui/src/components/toggle/index.js
index 28f69630..50bb449d 100644
--- a/ui/src/components/toggle/index.js
+++ b/ui/src/components/toggle/index.js
@@ -11,7 +11,8 @@ const {
} = constants;
const {
- pseudoEl
+ pseudoEl,
+ baseBox
} = composers;
const {
@@ -20,100 +21,118 @@ const {
} = fns;
const {
- default: styled
+ default: styled,
+ keyframes
} = Styled;
const classNames = {
label: rndId()
};
-const StyledLabel = styled.label`
- border-radius: ${boxes.borderRadius};
- color: #464646;
- height: 2.5rem;
- width: ${remcalc(110)};
+const slide = (
+ direction = 'left'
+) => {
+ keyframes`
+ from {
+ left: 0;
+ }
+
+ to {
+ left: 100%;
+ }
+ `;
+}
+
+const backgroundGradient = (index) => {
+ const colorDefault = index === 1 ? 'red' : 'blue';
+ const colorAlt = index === 1 ? 'blue' : 'red';
+ debugger
+ return css`
+ background: linear-gradient(to right, ${colorDefault} 50%, ${colorAlt} 50%);
+ `;
+}
+
+
+const StyledText = styled.span`
+ padding: 1rem;
+ display: inline-block;
`;
-const StyledToggleLabel = styled.div`
- background-color: #E6E6E6;
- border: solid 1px #D8D8D8;
- border-radius: ${boxes.borderRadius};
- color: #000000;
- height: ${remcalc(54)};
- margin: 0.125rem;
- padding-left: ${remcalc(12)};
- position: relative;
- text-align: right;
- width: ${remcalc(106)};
-
- &::before {
- content: "Off";
- font-family: ${typography.fontPrimary};
- font-size: inherit;
- font-weight: bold;
- position: absolute;
- right: 24px;
- top: 19px;
- }
-
- &::after {
- background-color: #FFFFFF;
- border-radius: ${boxes.borderRadius};
- height: ${remcalc(46)};
- width: ${remcalc(46)};
-
- ${pseudoEl({
- top: '3px',
- left: '3px',
- })}
- }
+const StyledDiv = styled.div`
+ display: inline-block;
+ background-color: ${colors.brandInactive};
+ animation: ${slide} 0.5s forwards;
+
+ ${baseBox()}
`;
-const StyledInput = styled.input`
+
+const StyledInput_1 = styled.input`
display: none;
+ & + span {
+ background: #ff3232;
+ background: linear-gradient(to right, red 50%, blue 50%);
+ background-size: 200% 100%;
+ background-position:left bottom;
+ transition:all .5s ease;
+ }
+
&:checked {
- & + .${classNames.label} {
- background: ${colors.confirmation};
- border: ${boxes.border.confirmed};
- color: #FFFFFF;
- padding-left: 0;
- padding-right: ${remcalc(12)};
- text-align: left;
-
- &::before {
- content: "On";
- left: 20px;
- right: auto;
- }
-
- &::after {
- left: auto;
- right: 3px;
- }
+
+
+ & + span {
+ background-position: right bottom;
}
}
`;
+const StyledInput_2 = styled.input`
+ display: none;
+
+ & + span {
+ background: #ff3232;
+ background: linear-gradient(to right, blue 50%, red 50%);
+ background-size: 200% 100%;
+ background-position:right bottom;
+ transition:all .5s ease;
+ }
+
+ &:checked {
+
+
+ & + span {
+ background-position: left bottom;
+ }
+ }
+`;
+
+const StyledLabel = styled.label`
+`;
+
+
const Toggle = ({
checked,
className,
defaultChecked,
+ options = [
+ "On",
+ "Off"
+ ],
id = rndId(),
style
}) => {
return (
-
-
-
-
+
+
+
+ {options[0]}
+
+
+
+ {options[1]}
+
+
);
};
diff --git a/ui/src/components/toggle/readme.md b/ui/src/components/toggle/readme.md
index ef30ac9c..a6e55ccd 100644
--- a/ui/src/components/toggle/readme.md
+++ b/ui/src/components/toggle/readme.md
@@ -16,7 +16,11 @@ nmodule.exports = ReactDOM.renderToString(
-
+
diff --git a/ui/stories/index.js b/ui/stories/index.js
index 6c6db31e..25723fc7 100644
--- a/ui/stories/index.js
+++ b/ui/stories/index.js
@@ -333,17 +333,22 @@ storiesOf('Tabs', module)
));
storiesOf('Toggle', module)
- .add('checked', () => (
+ .add('default', () => (
))
- .add('unchecked', () => (
-
- ))
- .add('defaultChecked', () => (
-
+ .add('checked', () => (
+
))
.add('no props', () => (
-
+
));
storiesOf('Tooltip', module)