Merge branch 'master' of https://github.com/yldio/joyent-portal

ui/src/components/input/index.js

@@ -11,7 +11,7 @@ const {
 } = constants;
 
 const {
-  remcalc
+  remcalc,
 } = fns;
 
 const {
@@ -19,23 +19,37 @@ const {
 } = composers;
 
 const {
-  default: styled
+  default: styled,
+  css
 } = Styled;
 
+const successBakcground = css`
+  background-color: ${colors.brandSecondary};
+  background-image: url("./input-confirm.svg");
+  background-repeat: no-repeat;
+  background-position: 98% 20px;
+`;
+
+const defaultBackground = css`
+  background-color: ${colors.brandSecondary};
+`;
+
 const Label = styled.label`
   color: ${props => props.error ? colors.alert : colors.fonts.regular}
 `;
 
 const InputField = styled.input`
-  background: ${colors.brandSecondary};
+  ${baseBox()};
+  
+  ${props => props.success ? successBakcground : defaultBackground }
+  
+  border-color: ${props => props.error ? colors.alert : 'auto'}
   color: ${props => props.error ? colors.alert : colors.fonts.semibold}
   display: block;
   font-size: 16px;
   padding: ${remcalc('15 18')};
   visibility: visible;
   width: 100%;
-  ${baseBox()};
-  border-color: ${props => props.error ? colors.alert : ''};
   
   &:focus {
     border-color: ${boxes.border.checked};
@@ -71,6 +85,7 @@ const Input = ({
   selectionDirection,
   spellCheck,
   style,
+  success,
   tabIndex,
   type,
   value
@@ -106,6 +121,7 @@ const Input = ({
         required={required}
         selectionDirection={selectionDirection}
         spellCheck={spellCheck}
+        success={success}
         tabIndex={tabIndex}
         type={type}
         value={value}
@@ -137,6 +153,7 @@ Input.propTypes = {
   selectionDirection: React.PropTypes.string,
   spellCheck: React.PropTypes.bool,
   style: React.PropTypes.object,
+  success: React.PropTypes.bool,
   tabIndex: React.PropTypes.string,
   type: React.PropTypes.string,
   value: React.PropTypes.string

ui/src/components/input/story.js

@@ -28,8 +28,15 @@ storiesOf('Input', module)
     <Base>
       <Input
         error="Somethings missing"
-        placeholder="There was an error"
         value="alexw/makeusproud.com"
       />
     </Base>
+  ))
+  .add('Success', () => (
+    <Base>
+      <Input
+        success
+        value="alexw@makeusproud.com"
+      />
+    </Base>
   ));

ui/src/components/tabs/story.js

@@ -6,15 +6,18 @@ const {
 
 const Tabs = require('./');
 const Tab = require('./tab');
+const Base = require('../base');
 
 storiesOf('Tabs', module)
   .add('Default', () => (
-    <Tabs name='my-tab-group'>
+    <Base>
-      <Tab title='Containers'>
+      <Tabs name='my-tab-group'>
-        <h1>Containers</h1>
+        <Tab title='Your Dashboard'>
-      </Tab>
+          <h1>Containers</h1>
-      <Tab title='Users'>
+        </Tab>
-        <h1>User</h1>
+        <Tab title='YLD'>
-      </Tab>
+          <h1>User</h1>
-    </Tabs>
+        </Tab>
+      </Tabs>
+    </Base>
   ));

ui/src/components/tabs/tab/index.js

@@ -10,7 +10,8 @@ const {
 } = composers;
 
 const {
-  boxes
+  boxes,
+  colors
 } = constants;
 
 const {
@@ -44,9 +45,8 @@ const StyledRadio = styled.input`
 
   &:checked {
     & + .${classNames.label} {
-      background: #FAFAFA;
+      background: ${colors.brandInactive};
       border-bottom-width: 0;
-      padding-bottom: ${remcalc(11)};
 
       ${moveZ({
         amount: 1
@@ -60,16 +60,12 @@ const StyledRadio = styled.input`
 `;
 
 const StyledLabel = styled.label`
-  background: #F2F2F2;
+  background: transparent;
-  border: ${boxes.border.unchecked};
+  border: 1px solid #D8D8D8;
-  color: #646464;
   display: inline-block;
   font-size: ${remcalc(20)};
-  left: 1px;
+  padding: ${remcalc('12 25')};
-  margin-left: -1px;
+  margin-right: 0.5rem;
-  margin-bottom: 0;
-  padding: ${remcalc(10)};
-  position: relative;
   vertical-align: bottom;
 `;
 
@@ -82,14 +78,15 @@ const StyledPanel = styled.div`
 `;
 
 const StyledContent = styled.div`
-  background: #FAFAFA;
+  background: ${colors.brandInactive};
   border: ${boxes.border.unchecked};
   box-sizing: border-box;
+  box-shadow: 0 -1px 26px 0 rgba(0, 0, 0, 0.2);
   display: block;
   float: left;
   font-size: ${remcalc(16)};
   margin-top: ${remcalc(-9)};
-  padding: ${remcalc('0 20')};
+  padding: ${remcalc('20 25')};
   width: 100%;
 `;
 

ui/src/components/toggle/index.js

@@ -83,6 +83,13 @@ const StyledInput1 = styled.input`
   }
 `;
 
+/*
+TODO: Remove !important - it is used to overirde a global style
+ */
+const StyledLabel = styled.label`
+  margin-bottom: 0 !important;
+`;
+
 const Toggle = ({
   checked,
   className,
@@ -120,13 +127,13 @@ const Toggle = ({
         };
 
         return (
-          <label
+          <StyledLabel
             htmlFor={customProps.id}
             key={index}
           >
             {InputVarients[`input_${index}`]}
             <StyledText>{option.label}</StyledText>
-          </label>
+          </StyledLabel>
         );
       })}
     </StyledDiv>

ui/src/components/toggle/story.js

@@ -4,27 +4,34 @@ const {
   storiesOf
 } = require('@kadira/storybook');
 
+const Base = require('../base');
 const Toggle = require('./');
 
 storiesOf('Toggle', module)
   .add('default', () => (
-    <Toggle checked />
+    <Base>
+      <Toggle checked />
+    </Base>
   ))
   .add('checked', () => (
-    <Toggle
+    <Base>
-      defaultChecked
+      <Toggle
-      options={[
+        defaultChecked
-        {
+        options={[
-          label: 'Topology',
+          {
-          checked: true
+            label: 'Topology',
-        },
+            checked: true
-        {
+          },
-          label: 'List',
+          {
-          checked: false
+            label: 'List',
-        }
+            checked: false
-      ]}
+          }
-    />
+        ]}
+      />
+    </Base>
   ))
   .add('no props', () => (
-    <Toggle />
+    <Base>
+      <Toggle />
+    </Base>
   ));

ui/src/shared/assets/input-confirm.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
+    <title>icon: confirmation</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <circle id="path-1" cx="9" cy="9" r="9"></circle>
+        <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="18" height="18" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="ui-components-revised" transform="translate(-1145.000000, -1341.000000)">
+            <g id="single-field-line" transform="translate(801.000000, 45.000000)">
+                <g id="text-field-+-confirmation" transform="translate(0.000000, 1254.000000)">
+                    <g id="icon:-confirmation" transform="translate(344.000000, 42.000000)">
+                        <use id="Oval" stroke="#00AF66" mask="url(#mask-2)" stroke-width="4" xlink:href="#path-1"></use>
+                        <polygon id="tick" fill="#00AF66" points="12.017 5.00007 8.121 10.33607 6.634 8.22707 5 9.37907 8.091 13.76807 13.632 6.17907"></polygon>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>