add checkboxgroup and rename radio to radiogroup

src/styles/clay/components/checkboxgroup.scss

@@ -0,0 +1,63 @@
+@import "bourbon";
+@import "clay";
+
+.component-checkbox {
+
+  @include tap-highlight(rgba(0,0,0,0));
+  display: block;
+
+
+  > .label {
+    display: block;
+    padding-bottom: $item-spacing-v / 2;
+  }
+
+  .checkbox-group {
+
+    label {
+      padding: $item-spacing-v / 2 0;
+      @include tap-highlight();
+    }
+
+    .label {
+      font-size: 0.9em;
+      padding: 0 $item-spacing-h / 2;
+    }
+
+    input {
+      display: none;
+    }
+
+    i {
+      display: block;
+      position: relative;
+      border-radius: $border-radius;
+      width: $base-height;
+      height: $base-height;
+      border: rem(2px) solid $color-gray-7;
+      flex-shrink: 0;
+    }
+
+    input:checked ~ i {
+      border-color: $color-orange;
+      background: $color-orange;
+      
+      &:after {
+        content: '';
+        box-sizing: border-box;
+        transform: rotate(45deg);
+        position: absolute;
+        left: 0.35rem;
+        top: -0.05rem;
+        display: block;
+        width: 0.5rem;
+        height: 1rem;
+        border: 0 solid $color-white;
+        border-right-width: rem(2px);
+        border-bottom-width: rem(2px);
+
+      }
+    }
+
+  }
+}