#4 - update some components

src/components/checkbox.vue

@@ -1,6 +1,5 @@
 <template lang="pug">
-  div.s-checkbox(@click="onclick()", :class="classes")
-    p checkbox
+  div.s-checkbox(ref="checkbox", @click="onclick()", :class="c_classes")
 </template>
 
 <script>
@@ -11,58 +10,112 @@ export default {
       type: Array,
       default: () => []
     },
-    onclick: {
-      type: Function,
-      default: () => {} 
+  },
+  data(){
+    return {
+      active: false,
+      disabled: false,
     }
   },
+  computed: {
+    c_classes(){
+      let cls = this.classes.slice() // shallow copy the classes array
+      // conditionally add other classes
+      if(this.active){
+        cls.push('active')
+      }
+      if(this.disabled){
+        cls.push('disabled')
+      }
+      return cls
+    },
+
+    isActive(){
+      return this.active || this.$refs.checkbox.classList.contains('active')
+    },
+    isDisabled(){
+      return this.disabled || this.$refs.checkbox.classList.contains('disabled')
+    }
+  },
+  methods: {
+    onclick(){
+      if(this.isDisabled){
+        return
+      }
+      this.active = !this.active
+      this.$emit('change',this.isActive)
+    }
+  }
 }
 </script>
 
 <style lang="stylus">
 @import '../theme.styl'
-  
+
 .s-checkbox
   cursor pointer
   display flex
   align-items center
   justify-content center
   user-select none
   color #787e98
-  background-color #fff
-  border-radius 3px
-  border solid 1px #bcc1d7
+  background-color checkbox--color--background-inactive
+  border-radius 4px
+  border solid 1px checkbox--color--border-inactive
   font-size 13px
   font-weight 500
+  height 0
+  width 0
   white-space nowrap
-  padding 10px 18px
+  padding 10px 10px
+  position relative
+
+  &:after
+    position absolute
+    content ''
+    display block
+    width 3px
+    height 6px
+    border solid checkbox--color--checkmark
+    border-width 0 2px 2px 0
+    transform rotate(45deg)
+
+  &.active
+    background-color checkbox--color--background-active
+    border solid 1px checkbox--color--border-active
+    &:after
+      border-color checkbox--color--checkmark
+
+  &.disabled,&:disabled
+    opacity 0.6
 
   span
     line-height 1em
 
   //SIZES
-  &.xs
-    padding 6px 8px
-    font-size 10px
-    font-weight 400
-  
+  // &.xs
+  //   padding 6px 8px
+  //   font-size 10px
+  //   font-weight 400
+
   &.s
-    padding 7px 10px
+    padding 9px 9px
+    font-size 12px
+
+  &.m
+    padding 12px 12px
     font-size 12px
-    font-weight 500
 
-  &.l
-    padding 14px 32px
-    font-size 14px
-    font-weight 600
+  // &.l
+  //   padding 14px 32px
+  //   font-size 14px
+  //   font-weight 600
 
+  // &.xl
+  //   padding 18px 44px
+  //   font-size 16px
+  //   font-weight 600
 
-  &.xl
-    padding 18px 44px
-    font-size 16px
-    font-weight 600
 
 
-          
 </style>
-

src/components/input.vue

@@ -38,11 +38,12 @@ export default {
 </script>
 
 <style lang="stylus">
-  
+
 @import '../theme.styl'
-  
+
 .s-input
-  border-radius 2px
+  border-radius 4px
+  background-color input--color--background
   border solid 0.5px #d6dae9
   outline none
   font-size default-font-size
@@ -54,30 +55,33 @@ export default {
 
 
   &:disabled
-    background-color #f6f8ff
-  
+    background-color input--color--background-disabled
+
   &:focus
     border 1px primary-theme-color solid
     transition border .5s
 
   // Sizes
-  &.xs
-    font-size 11px
-    padding 5px 20px
-  
+  // &.xs // this is not in spec?
+  //   font-size 11px
+  //   padding 5px 20px
+
   &.s
     font-size 12px
-    padding 6px 20px
+    padding (6/12)em (20/12)em
+
+  &.m
+    font-size 13px
+    padding (11/13)em (20/13)em
 
   &.l
     font-size 14px
-    padding 15px 20px
+    padding (15/14)em (20/14)em
 
 
   &.xl
-    font-size 15px
-    padding 20px 20px
+    font-size 14px
+    padding (21/14)em (20/14)em (19/14)em (20/14)em
+
 
-        
 </style>
-

src/components/select.vue

@@ -1,5 +1,6 @@
 <template lang="pug">
   div.s-select(@click="open = !open")
+    div.disclosure-icon
     div.selected-item(:ref="'select'")
       p(v-if="model === ''") {{placeholder}}
       p(v-else) {{model}}
@@ -8,8 +9,6 @@
       div.items(v-if="open")
         div.item(v-for="item in items", @click="onSelect(item)")
           span {{item}}
-
-
 </template>
 
 <script>
@@ -53,9 +52,11 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
+@import '../theme.styl'
+
 .s-select
   height 60px
-  border-radius 2px
+  border-radius 4px
   border solid 1px #d6dae9
   outline none
   font-size 15px
@@ -105,6 +106,13 @@ export default {
       &:hover
         background-color #d6dae9
 
-
-
+  .disclosure-icon
+    position absolute
+    right 20px
+    pointer-events none // allows the disclosure to be 'clickable' because the thing behind it is clickable
+    width 0
+    height 0
+    border-left 5px solid transparent
+    border-right 5px solid transparent
+    border-top 6px solid select--color--disclosure
 </style>

src/pages/CheckboxPage.vue

@@ -9,7 +9,10 @@ div#checkbox-page
       div.component-container(v-for="size in sizes")
         span {{size ? size : 'default'}}
         s-checkbox(title="button", :classes='[size]')
-
+      h3 States
+      div.component-container(v-for="state in states")
+        span {{state ? state : 'default'}}
+        s-checkbox(title="button", :classes='[state]') test
 </template>
 
 <script>
@@ -18,7 +21,8 @@ export default {
   name: 'CheckboxPage',
   data(){
     return {
-      sizes: ['xs', 's', '', 'l', 'xl'],
+      sizes: ['s', '', 'm'],
+      states: ['', 'active', 'disabled'],
     }
   },
 }
@@ -28,7 +32,7 @@ export default {
 #checkbox-page
   display flex
   flex-wrap wrap
-  
+
   .header
     flex-basis 100%
     border-bottom solid 1px black
@@ -38,7 +42,7 @@ export default {
     flex-basis 100%
     display flex
     flex-wrap wrap
-    
+
     .row
       flex-basis 100%
       display flex
@@ -54,5 +58,5 @@ export default {
 
         .s-checkbox
           margin-top 10px
-    
+
 </style>

src/pages/InputPage.vue

@@ -15,7 +15,9 @@ div#input-page
       div.component-container(v-for="theme in themes")
         span {{theme ? theme : 'default'}}
         s-input(title="button", :classes='[theme]')
-
+      div.component-container
+        span disabled
+        s-input(title="button", disabled)
 </template>
 
 <script>
@@ -35,7 +37,7 @@ export default {
 #input-page
   display flex
   flex-wrap wrap
-  
+
   .header
     flex-basis 100%
     border-bottom solid 1px black
@@ -45,7 +47,7 @@ export default {
     flex-basis 100%
     display flex
     flex-wrap wrap
-    
+
     .row
       flex-basis 100%
       display flex

src/pages/SelectPage.vue

@@ -15,7 +15,6 @@ div#select-page
       div.component-container(v-for="theme in themes")
         span {{theme ? theme : 'default'}}
         s-select(:classes='[theme]', :items="items")
-
 </template>
 
 <script>
@@ -36,7 +35,7 @@ export default {
 #select-page
   display flex
   flex-wrap wrap
-  
+
   .header
     flex-basis 100%
     border-bottom solid 1px black
@@ -46,7 +45,7 @@ export default {
     flex-basis 100%
     display flex
     flex-wrap wrap
-    
+
     .row
       flex-basis 100%
       display flex

src/theme.styl

@@ -18,3 +18,14 @@ secondary-background-color = #4A405A
 tertiary-color = #fff
 tertiary-background-color = #86A0C0
 
+// Inputs
+input--color--background = #ffffff
+input--color--background-disabled = #f6f8ff
+
+select--color--disclosure = #bcc1d7
+
+checkbox--color--checkmark = white
+checkbox--color--background-inactive = white
+checkbox--color--border-inactive = #d6dae9
+checkbox--color--background-active = #30d27b
+checkbox--color--border-active = primary-theme-color