From 49612769da71c6b2625436d877408b67173b071f Mon Sep 17 00:00:00 2001
From: JUDIT GRESKOVITS <juditgreskovits@gmail.com>
Date: Fri, 24 Feb 2017 17:10:44 +0000
Subject: [PATCH] Toggle

---
 ui/src/components/form/checkbox/index.js      |   4 +-
 ui/src/components/form/radio/index.js         |   4 +-
 ui/src/components/form/radio/story.js         |  13 +-
 .../form/{toggle.js => toggle-base.js}        |  32 ++-
 ui/src/components/form/toggle/index.js        | 131 ++++++++++++
 ui/src/components/form/toggle/story.js        | 190 ++++++++++++++++++
 ui/src/components/toggle/story.js             |   4 +-
 7 files changed, 352 insertions(+), 26 deletions(-)
 rename ui/src/components/form/{toggle.js => toggle-base.js} (82%)
 create mode 100644 ui/src/components/form/toggle/index.js
 create mode 100644 ui/src/components/form/toggle/story.js

diff --git a/ui/src/components/form/checkbox/index.js b/ui/src/components/form/checkbox/index.js
index c64d9e62..8e09a2e1 100644
--- a/ui/src/components/form/checkbox/index.js
+++ b/ui/src/components/form/checkbox/index.js
@@ -1,8 +1,8 @@
 import { Baseline } from '../../../shared/composers';
 import BaseInput from '../base-input';
-import Toggle from '../toggle';
+import ToggleBase from '../toggle-base';
 
-const Checkbox = Toggle({
+const Checkbox = ToggleBase({
   type: 'checkbox'
 });
 
diff --git a/ui/src/components/form/radio/index.js b/ui/src/components/form/radio/index.js
index fd83bb2f..ccee7b9a 100644
--- a/ui/src/components/form/radio/index.js
+++ b/ui/src/components/form/radio/index.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Toggle from '../toggle';
+import ToggleBase from '../toggle-base';
 import { Baseline } from '../../../shared/composers';
 import BaseInput from '../base-input';
 
@@ -12,7 +12,7 @@ const StyledUl = styled.ul`
   padding: 0;
 `;
 
-const Radio = Toggle({
+const Radio = ToggleBase({
   container: RadioItem,
   type: 'radio'
 });
diff --git a/ui/src/components/form/radio/story.js b/ui/src/components/form/radio/story.js
index eff48311..e2695682 100644
--- a/ui/src/components/form/radio/story.js
+++ b/ui/src/components/form/radio/story.js
@@ -4,15 +4,22 @@ import Legend from '../legend';
 import Radio, { RadioList } from '../radio';
 import FormGroup from '../group';
 import FormMeta from '../meta';
+import FormLabel from '../label';
 
 storiesOf('Radio', module)
   .add('Default', () => (
     <FormGroup name='who-killed'>
       <Legend>Who killed the radio star?</Legend>
       <RadioList>
-        <Radio value='video'>Video</Radio>
-        <Radio value='tv'>TV</Radio>
-        <Radio value='netflix'>Netflix</Radio>
+        <Radio value='video' checked>
+          <FormLabel>Video</FormLabel>
+        </Radio>
+        <Radio value='tv'>
+          <FormLabel>TV</FormLabel>
+        </Radio>
+        <Radio value='netflix'>
+          <FormLabel>Netflix</FormLabel>
+        </Radio>
       </RadioList>
     </FormGroup>
   ))
diff --git a/ui/src/components/form/toggle.js b/ui/src/components/form/toggle-base.js
similarity index 82%
rename from ui/src/components/form/toggle.js
rename to ui/src/components/form/toggle-base.js
index bada8a75..e50a902c 100644
--- a/ui/src/components/form/toggle.js
+++ b/ui/src/components/form/toggle-base.js
@@ -1,4 +1,4 @@
-import { remcalc, is } from '../../shared/functions';
+import { remcalc, unitcalc, is } from '../../shared/functions';
 import { Subscriber } from 'react-broadcast';
 import { boxes, colors } from '../../shared/constants';
 import BaseInput from './base-input';
@@ -61,14 +61,12 @@ const Label = styled.label`
       opacity: 0;
       content: '';
       position: absolute;
-      width: ${remcalc(8)};
-      height: ${remcalc(8)};
-      border-radius: ${remcalc(4)};
-      background-color: ${colors.base.secondaryDark};
-      border-top: none;
-      border-right: none;
-      top: ${remcalc(8)};
-      left: ${remcalc(8)};
+      width: ${remcalc(10)};
+      height: ${remcalc(10)};
+      border-radius: ${remcalc(5)};
+      background-color: ${colors.base.secondaryActive};
+      top: ${remcalc(6)};
+      left: ${remcalc(6)};
     }
   `};
 
@@ -77,12 +75,12 @@ const Label = styled.label`
       opacity: 0;
       content: '';
       position: absolute;
-      width: ${remcalc(9)};
+      width: ${unitcalc(1.5)};
       height: ${remcalc(4)};
       background: transparent;
       top: ${remcalc(7)};
       left: ${remcalc(7)};
-      border: ${remcalc(3)} solid #333;
+      border: ${unitcalc(0.5)} solid ${colors.base.secondaryActive};
       border-top: none;
       border-right: none;
       transform: rotate(-45deg);
@@ -98,14 +96,14 @@ const Label = styled.label`
 
 const InnerContainer = styled.div`
   display: inline-block;
-  margin-right: ${remcalc(12)}
   vertical-align: text-bottom;
-  width: ${remcalc(24)};
-  height: ${remcalc(24)};
+  margin-right: ${unitcalc(2)};
+  width: ${unitcalc(4)};
+  height: ${unitcalc(4)};
   position: relative;
 `;
 
-const Toggle = ({
+const ToggleBase = ({
   container = null,
   type = 'radio'
 }) => BaseInput(({
@@ -122,7 +120,7 @@ const Toggle = ({
 
   const render = (value) => {
     const toggle = (
-      <InnerContainer type={type}>
+      <InnerContainer {...types} type={type}>
         <Input
           {...props}
           {...value}
@@ -156,4 +154,4 @@ const Toggle = ({
   );
 });
 
-export default Toggle;
+export default ToggleBase;
diff --git a/ui/src/components/form/toggle/index.js b/ui/src/components/form/toggle/index.js
new file mode 100644
index 00000000..6fe99d5f
--- /dev/null
+++ b/ui/src/components/form/toggle/index.js
@@ -0,0 +1,131 @@
+import React from 'react';
+import styled from 'styled-components';
+import { remcalc, unitcalc, is } from '../../../shared/functions';
+import { Subscriber } from 'react-broadcast';
+import { Baseline } from '../../../shared/composers';
+import BaseInput from '../base-input';
+import { boxes, colors } from '../../../shared/constants';
+
+const Input = styled.input`
+  display: none;
+
+  &:checked + label {
+    border-radius: ${remcalc(4)};
+    background-color: ${colors.base.white};
+    box-shadow: ${boxes.bottomShaddow};
+    color: ${colors.base.secondary};
+  }
+
+  &:selected + label {
+    border-radius: ${remcalc(4)};
+    background-color: ${colors.base.white};
+    box-shadow: ${boxes.bottomShaddow};
+    color: ${colors.base.secondary};
+  }
+
+  &:disabled + label {
+    color: ${colors.base.grey};
+  }
+`;
+
+const Label = styled.label`
+  position: absolute;
+  box-sizing: border-box;
+  width: ${unitcalc(20)};
+  height: ${unitcalc(8)};
+  top: 0;
+  left: 0;
+  text-align: center;
+  padding-top: ${unitcalc(2)};
+  color: ${colors.base.text};
+
+  ${is('error')`
+    border-color: ${colors.inputError}
+  `};
+
+  ${is('warning')`
+    border-color: ${colors.inputWarning}
+  `};
+
+  ${is('success')`
+    border-color: ${colors.base.green}
+  `};
+
+  &:hover {
+    color: ${colors.base.secondaryHover};
+  }
+`;
+
+const InputContainer = styled.div`
+  position: relative;
+  vertical-align: text-bottom;
+  width: ${unitcalc(20)};
+  height: ${unitcalc(8)};
+`;
+
+const StyledLi = BaseInput(styled.li`
+  display: inline-block;
+  list-style-type: none;
+  vertical-align: text-bottom;
+  border-top: ${boxes.border.unchecked};
+  border-bottom: ${boxes.border.unchecked};
+  border-left: ${boxes.border.unchecked};
+  &:first-of-type {
+    border-radius: ${boxes.borderRadius} 0 0 ${boxes.borderRadius};
+  }
+  &:last-of-type {
+    border-radius: 0 ${boxes.borderRadius} ${boxes.borderRadius} 0;
+    border-right: ${boxes.border.unchecked};
+  }
+`);
+
+const StyledUl = styled.ul`
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  box-shadow: ${boxes.bottomShaddow};
+`;
+
+const Toggle = BaseInput(({
+  children,
+  ...props
+}) => {
+  const render = (value) => {
+    return (
+      <StyledLi>
+        <InputContainer>
+          <Input
+            {...props}
+            {...value}
+            type='radio'
+          />
+          <Label
+            htmlFor={value.id}
+            // eslint-disable-next-line react/prop-types
+            error={props.error}
+            // eslint-disable-next-line react/prop-types
+            warning={props.warning}
+            // eslint-disable-next-line react/prop-types
+            success={props.success}
+          >
+            {children}
+          </Label>
+        </InputContainer>
+      </StyledLi>
+    );
+  };
+
+  return (
+    <Subscriber channel='input-group'>
+      {render}
+    </Subscriber>
+  );
+});
+
+export default Baseline(
+  Toggle
+);
+
+export const ToggleList = Baseline(
+  StyledUl
+);
diff --git a/ui/src/components/form/toggle/story.js b/ui/src/components/form/toggle/story.js
new file mode 100644
index 00000000..90039d6c
--- /dev/null
+++ b/ui/src/components/form/toggle/story.js
@@ -0,0 +1,190 @@
+import { storiesOf } from '@kadira/storybook';
+import React from 'react';
+import Legend from '../legend';
+import Toggle, { ToggleList } from '../toggle';
+import FormGroup from '../group';
+import FormMeta from '../meta';
+
+storiesOf('Toggle', module)
+.add('Default', () => (
+  <FormGroup name='who-killed'>
+    <Legend>Who killed the radio star?</Legend>
+    <ToggleList>
+      <Toggle value='video'>Video</Toggle>
+      <Toggle value='tv'>TV</Toggle>
+      <Toggle value='netflix'>Netflix</Toggle>
+    </ToggleList>
+  </FormGroup>
+  ))
+  .add('Selected', () => (
+    <FormGroup name='who-killed'>
+      <Legend>Who killed the radio star?</Legend>
+      <ToggleList>
+        <Toggle value='video' checked>Video</Toggle>
+        <Toggle value='tv'>TV</Toggle>
+        <Toggle value='netflix'>Netflix</Toggle>
+      </ToggleList>
+    </FormGroup>
+  ))
+  .add('Two items', () => (
+    <FormGroup name='who-killed'>
+      <Legend>Who killed the radio star?</Legend>
+      <ToggleList>
+        <Toggle value='tv' checked>TV</Toggle>
+        <Toggle value='netflix'>Netflix</Toggle>
+      </ToggleList>
+    </FormGroup>
+  ))
+  .add('Disabled', () => (
+    <FormGroup name='who-killed' disabled>
+      <Legend>Who killed the radio star?</Legend>
+      <ToggleList>
+        <Toggle value='video'>Video</Toggle>
+        <Toggle value='tv'>TV</Toggle>
+        <Toggle value='netflix'>Netflix</Toggle>
+      </ToggleList>
+    </FormGroup>
+  ))
+  .add('Error', () => (
+    <div>
+      <FormGroup name='who-killed'>
+        <Legend>Who killed the radio star?</Legend>
+        <FormMeta error='Unexpected inline error!' left />
+        <ToggleList>
+          <Toggle value='video'>Video</Toggle>
+          <Toggle value='tv'>TV</Toggle>
+          <Toggle value='netflix'>Netflix</Toggle>
+        </ToggleList>
+      </FormGroup>
+      <FormGroup name='who-killed' error='Unexpected group error!'>
+        <Legend>Who killed the radio star?</Legend>
+        <FormMeta left />
+        <ToggleList>
+          <Toggle value='video'>Video</Toggle>
+          <Toggle value='tv'>TV</Toggle>
+          <Toggle value='netflix'>Netflix</Toggle>
+        </ToggleList>
+      </FormGroup>
+      {/* eslint-disable object-curly-newline */}
+      <FormGroup name='who-killed' meta={{error: 'Unexpected meta error!'}}>
+        {/* eslint-enable object-curly-newline */}
+        <Legend>Who killed the radio star?</Legend>
+        <FormMeta left />
+        <ToggleList>
+          <Toggle value='video'>Video</Toggle>
+          <Toggle value='tv'>TV</Toggle>
+          <Toggle value='netflix'>Netflix</Toggle>
+        </ToggleList>
+      </FormGroup>
+      <FormGroup name='who-killed'>
+        <Legend>Who killed the radio star?</Legend>
+        <FormMeta error left>
+          Unexpected children error!
+        </FormMeta>
+        <ToggleList>
+          <Toggle value='video'>Video</Toggle>
+          <Toggle value='tv'>TV</Toggle>
+          <Toggle value='netflix'>Netflix</Toggle>
+        </ToggleList>
+      </FormGroup>
+    </div>
+  ))
+  .add('Warning', () => (
+    <div>
+      <FormGroup name='who-killed'>
+        <Legend>Who killed the radio star?</Legend>
+        <FormMeta warning='Unexpected inline warning!' left />
+        <ToggleList>
+          <Toggle value='video'>Video</Toggle>
+          <Toggle value='tv'>TV</Toggle>
+          <Toggle value='netflix'>Netflix</Toggle>
+        </ToggleList>
+      </FormGroup>
+      <FormGroup name='who-killed' warning='Unexpected group warning!'>
+        <Legend>Who killed the radio star?</Legend>
+        <FormMeta left />
+        <ToggleList>
+          <Toggle value='video'>Video</Toggle>
+          <Toggle value='tv'>TV</Toggle>
+          <Toggle value='netflix'>Netflix</Toggle>
+        </ToggleList>
+      </FormGroup>
+      {/* eslint-disable object-curly-newline */}
+      <FormGroup name='who-killed' meta={{warning: 'Unexpected meta warning!'}}>
+        {/* eslint-enable object-curly-newline */}
+        <Legend>Who killed the radio star?</Legend>
+        <FormMeta left />
+        <ToggleList>
+          <Toggle value='video'>Video</Toggle>
+          <Toggle value='tv'>TV</Toggle>
+          <Toggle value='netflix'>Netflix</Toggle>
+        </ToggleList>
+      </FormGroup>
+      <FormGroup name='who-killed'>
+        <Legend>Who killed the radio star?</Legend>
+        <FormMeta left warning>
+          Unexpected children warning!
+        </FormMeta>
+        <ToggleList>
+          <Toggle value='video'>Video</Toggle>
+          <Toggle value='tv'>TV</Toggle>
+          <Toggle value='netflix'>Netflix</Toggle>
+        </ToggleList>
+      </FormGroup>
+    </div>
+  ))
+  .add('Success', () => (
+    <div>
+      <FormGroup name='who-killed'>
+        <Legend>Who killed the radio star?</Legend>
+        <FormMeta success='Unexpected inline success!' left />
+        <ToggleList>
+          <Toggle value='video'>Video</Toggle>
+          <Toggle value='tv'>TV</Toggle>
+          <Toggle value='netflix'>Netflix</Toggle>
+        </ToggleList>
+      </FormGroup>
+      <FormGroup name='who-killed' success='Unexpected group success!'>
+        <Legend>Who killed the radio star?</Legend>
+        <FormMeta left />
+        <ToggleList>
+          <Toggle value='video'>Video</Toggle>
+          <Toggle value='tv'>TV</Toggle>
+          <Toggle value='netflix'>Netflix</Toggle>
+        </ToggleList>
+      </FormGroup>
+      {/* eslint-disable object-curly-newline */}
+      <FormGroup name='who-killed' meta={{success: 'Unexpected meta success!'}}>
+        {/* eslint-enable object-curly-newline */}
+        <Legend>Who killed the radio star?</Legend>
+        <FormMeta left />
+        <ToggleList>
+          <Toggle value='video'>Video</Toggle>
+          <Toggle value='tv'>TV</Toggle>
+          <Toggle value='netflix'>Netflix</Toggle>
+        </ToggleList>
+      </FormGroup>
+      <FormGroup name='who-killed'>
+        <Legend>Who killed the radio star?</Legend>
+        <FormMeta left success>
+          Unexpected children success!
+        </FormMeta>
+        <ToggleList>
+          <Toggle value='video'>Video</Toggle>
+          <Toggle value='tv'>TV</Toggle>
+          <Toggle value='netflix'>Netflix</Toggle>
+        </ToggleList>
+      </FormGroup>
+    </div>
+  ))
+  .add('Base meta', () => (
+    <FormGroup name='who-killed'>
+      <Legend>Who killed the radio star?</Legend>
+      <FormMeta left>I&#39;m a children of meta</FormMeta>
+      <ToggleList>
+        <Toggle value='video'>Video</Toggle>
+        <Toggle value='tv'>TV</Toggle>
+        <Toggle value='netflix'>Netflix</Toggle>
+      </ToggleList>
+    </FormGroup>
+  ));
diff --git a/ui/src/components/toggle/story.js b/ui/src/components/toggle/story.js
index 6c685ab0..05b28bc5 100644
--- a/ui/src/components/toggle/story.js
+++ b/ui/src/components/toggle/story.js
@@ -1,4 +1,4 @@
-import React from 'react';
+/*import React from 'react';
 import { storiesOf } from '@kadira/storybook';
 import Toggle from './';
 
@@ -20,4 +20,4 @@ storiesOf('Toggle', module)
   ))
   .add('no props', () => (
     <Toggle />
-  ));
+  ));*/