Feature/UI ds 272 update checkbox groups (#295)

* UIDS-272 Add new checkbox button group stories

* UIDS-272 Update checkbox group stories

* UIDS-272 Add temporary deploy

* UIDS-272 Add helper text and font-weigh tweaks

* UIDS-272 Update single CheckboxButton story

* UIDS-272 Add new checkbox button group stories

* UIDS-272 Update checkbox group stories

* UIDS-272 Add temporary deploy

* UIDS-272 Add helper text and font-weigh tweaks

* UIDS-272 Update single CheckboxButton story

Co-authored-by: Rachel Roppolo <[email protected]>
Co-authored-by: Jason Basuil <[email protected]>

Author: 3 people

.github/workflows/gh-pages-deploy.yml

@@ -2,7 +2,7 @@
   on:
     push:
       branches:
-        - main
+        - feature/UIDS-272-update-checkbox-groups
   jobs:
     gh-pages-deploy:
       name: Deploying to gh-pages

scss/forms/control_button_group.scss

@@ -32,20 +32,9 @@
       padding: 0.3125rem 0.625rem;
       margin-right: 0.5rem;
     }
-
-    .FormControlLabel--active {
-      background-color: $ux-blue-100;
-      border-color: $ux-blue-200;
-
-      .FormControlLabel__label {
-        color: $ux-blue-700;
-      }
-    }
   }
 
   .FormControlLabel {
-    @include font-type-30;
-
     flex-wrap: wrap;
     margin-right: 0.5rem;
     display: block;

scss/forms/form_control_label.scss

@@ -3,13 +3,13 @@
 @import '../typography';
 
 .FormControlLabel {
-  @include font-type-30;
-
+  @include font-type-30--light;
   align-items: center;
+  color: $ux-gray-900;
   display: flex;
 
   &--with-children {
-    @include font-type-30--bold;
+    @include font-type-30;
 
     align-items: flex-start;
     flex-direction: column;
@@ -22,6 +22,11 @@
     flex-direction: row;
   }
 
+  &__helper-text {
+    @include font-type-30;
+    font-weight: 100;
+  }
+
   &__control {
     display: flex;
     margin-right: .5rem;
@@ -30,7 +35,7 @@
   &__children {
     @include font-type-30;
 
-    color: $ux-gray-800;
+    font-weight: 100;
     margin-top: 0.5rem;
     width: 100%;
   }
@@ -40,6 +45,13 @@
     border-radius: $ux-border-radius;
     padding: 1rem;
     cursor: pointer;
+
+
+    &.FormControlLabel--active {
+      background-color: $ux-blue-100;
+      border-color: $ux-blue-200;
+      color: $ux-blue-700;
+    }
   }
 
   &--disabled {

scss/forms/form_group.scss

@@ -20,6 +20,7 @@
 
       &__helper-text {
         @include font-type-30--light;
+        font-weight: 100;
         color: $ux-gray-900;
       }
     }
@@ -36,9 +37,30 @@
     }
   }
 
+  &--inline {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+
+    .InputLabel {
+      margin-right: 1rem;
+      margin-bottom: 0.5rem;
+    }
+
+    .FormControlLabel {
+      white-space: nowrap;
+      margin-right: 1rem;
+    }
+
+    .FormControlLabel--active {
+      white-space: nowrap;
+    }
+  }
+
   &__helper-text {
     @include font-type-20;
-    color: $ux-gray-800;
+    font-weight: 100;
+    color: $ux-gray-900;
     padding: .375rem 0;
     margin: 0;
 

scss/forms/input_label.scss

@@ -9,7 +9,8 @@
 
   &__helper-text {
     @include font-type-30;
-    color: $ux-gray-800;
+    font-weight: 100;
+    color: $ux-gray-900;
   }
 }