adds context and integrates shames from bill pay (#12)

* init

* add harness

* adds more

* updates version

assets/sass/_all-digital.scss

@@ -20,6 +20,12 @@
 // and reusable through the UI
 @import 'all-digital/components';
 
+// Context
+// Context are changes to components and
+// styles based on where they appear like
+// within a mobile app
+@import 'all-digital/context';
+
 // Shame
 // shame file houses code that needs
 // to be refactored or re-encorporated

assets/sass/all-digital/_components.scss

@@ -13,3 +13,6 @@
 @import 'components/form-toggle';
 @import 'components/status';
 @import 'components/page-header';
+@import 'components/circle';
+@import 'components/color';
+@import 'components/key-value';

assets/sass/all-digital/_context.scss

@@ -0,0 +1 @@
+@import 'context/harness';

assets/sass/all-digital/base/_forms.scss

@@ -10,7 +10,7 @@ legend {
 .label,
 label {
   @include body2;
-  margin-bottom: 10px;
+  margin-bottom: 6px;
   display: block;
   cursor: pointer;
 }

assets/sass/all-digital/components/_card.scss

@@ -2,7 +2,7 @@
   display: block;
   margin: 0 0 12px #{-($wrapper-gutters + 1px)};
   width: calc(100% + #{($wrapper-gutters * 2 + 2px)});
-  padding: 12px;
+  padding: 18px 12px;
   border: 1px solid $card-border-color;
   background: $card-background-color;
   position: relative;
@@ -12,7 +12,8 @@
   flex-wrap: nowrap;
 
   @include respond-to(768) {
-    padding: 18px 24px;
+    padding-right: 24px;
+    padding-left: 24px;
     width: auto;
     margin-left: 0;
   }

assets/sass/all-digital/components/_circle.scss

@@ -0,0 +1,51 @@
+.circle {
+  background-color: $cool-grey5;
+  width: 60px;
+  height: 60px;
+  position: relative;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.circle--large {
+  width: 90px;
+  height: 90px;
+}
+
+.circle--small {
+  width: 26px;
+  height: 26px;
+}
+
+.circle--cool-grey8 {
+  background-color: $cool-grey8;
+}
+
+.circle--minty {
+  background-color: $minty;
+}
+
+.circle--turq,
+.circle--misc {
+  background-color: $turq;
+}
+
+.circle--white {
+  background-color: $white;
+}
+
+.circle--warning,
+.circle--yellow-pumpkin {
+  background-color: $yellow-pumpkin;
+}
+
+.circle--danger {
+  background-color: $red-cherry;
+}
+
+.circle--outage,
+.circle--alert {
+  background-color: $red-watermelon;
+}

assets/sass/all-digital/components/_color.scss

@@ -0,0 +1,55 @@
+.color {}
+
+.color--cool-grey11 {
+  color: $cool-grey11;
+
+  @include ui-grey {
+    color: $cool-grey11;
+  }
+}
+
+.color--cool-grey12 {
+  color: $cool-grey12;
+
+  @include ui-grey {
+    color: $cool-grey12;
+  }
+}
+
+.color--text-color {
+  color: $text-color;
+}
+
+.color--success {
+  color: $ui-success;
+
+  @include ui-grey {
+    color: $ui-success;
+  }
+}
+
+.color--green-forest {
+  color: $green-forest;
+
+  @include ui-grey {
+    color: $green-forest;
+  }
+}
+
+.color--blue-sky {
+  color: $blue-sky;
+}
+
+.color--danger,
+.color--red-cherry {
+  color: $red-cherry;
+
+  @include ui-grey {
+    color: $red-cherry;
+  }
+}
+
+.color--alert,
+.color--red-watermelon {
+  color: $red-watermelon;
+}

assets/sass/all-digital/components/_form-boolean.scss

@@ -2,43 +2,46 @@
   max-width: none;
 
   .form-control__label {
-    display: block;
+    display: flex;
     position: relative;
-    float: none;
     font-size: 1em;
     margin-bottom: 0;
-    padding: 1px 0 1px 40px;
     max-width: none;
 
+    @include respond-to(768) {
+      align-items: center;
+    }
+
     &::before {
+      margin-right: 18px;
+      flex-shrink: 0;
       display: block;
-      position: absolute;
-      top: 1px;
-      left: 0;
       content: '';
       width: 22px;
       height: 22px;
       background-size: contain;
       background-repeat: no-repeat;
       background-position: center center;
     }
-
-    &.heading1,
-    &.heading2 {
-      &::before {
-        top: 7px;
-      }
-    }
   }
 
   input {
     @include visually-hidden();
   }
 
+  input ~ .form-control__label::before {
+    background: $cool-grey2;
+    border: 1px solid $cool-grey11;
+  }
+
   input:focus ~ .form-control__label::before {
     outline: 1px dotted $blue-sky;
   }
 
+  input.error ~ .form-control__label::before {
+    border-color: $text-input-border-color-error;
+  }
+
   input:disabled ~ .form-control__label {
     opacity: 0.4;
     cursor: default;
@@ -47,8 +50,6 @@
 
   input[type="checkbox"] ~ .form-control__label::before {
     border-radius: 3px;
-    background-color: $cool-grey2;
-    border: 1px solid $cool-grey11;
   }
 
   input[type="checkbox"]:checked ~ .form-control__label::before {
@@ -59,12 +60,9 @@
 
   input[type="radio"] ~ .form-control__label::before {
     border-radius: 50%;
-    background: $cool-grey2;
-    border: 1px solid $cool-grey11;
   }
 
   input[type="radio"]:checked ~ .form-control__label::before {
-    background: $cool-grey2;
     border: 6px solid $blue-sky;
   }
 

assets/sass/all-digital/components/_form-controls.scss

@@ -6,7 +6,7 @@ $form-control: (
 .form-control {
   @include clearfix;
   clear: both;
-  margin-bottom: 16px;
+  margin-bottom: 24px;
   max-width: map-get($form-control, max-width);
 
   @include respond-to(768) {
@@ -53,8 +53,7 @@ $form-control: (
 .form-control__error,
 label.error {
   @include font-size($body3-size);
-  padding-top: 5px;
-  padding-bottom: 5px;
+  padding-top: 6px;
   display: block;
   clear: both;
   color: $red-cherry;

assets/sass/all-digital/components/_key-value.scss

@@ -0,0 +1,129 @@
+.key-value {
+  overflow: hidden;
+  margin-bottom: 24px;
+}
+
+.key-value__key,
+.key-value__value {
+  display: block;
+}
+
+.key-value__key > :last-child {
+  margin-bottom: 6px;
+}
+
+.key-value--inline-at-768 {
+  .key-value__key {
+    @include respond-to(768) {
+      width: 224px;
+      margin-right: 12px;
+      float: left;
+    }
+  }
+
+  .key-value__value {
+    @include respond-to(768) {
+      overflow: hidden;
+    }
+  }
+
+  .key-value__key,
+  .key-value__value {
+    > :last-child {
+      @include respond-to(768) {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.key-value--inline-at-768.key-value--field {
+  .key-value__key {
+    @include respond-to(768) {
+      padding-top: 15px;
+    }
+  }
+}
+
+.key-value--wide .key-value__key {
+  width: 215px;
+}
+
+.key-value--inline-narrow {
+  .key-value__key {
+    width: auto;
+  }
+}
+
+.key-value__toggle {
+  margin-left: 10px;
+}
+
+.key-value__value-item {
+  display: block;
+}
+
+.key-value-group {
+  margin-bottom: 24px;
+}
+
+.key-value-group__item {
+  margin-bottom: 18px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  .key-value {
+    margin-bottom: 0;
+  }
+}
+
+.key-value--no-value {
+  .key-value__key {
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.key-value--inline-at-768.key-value--wide-key {
+  .key-value__key {
+    @include respond-to(768) {
+      width: 215px;
+    }
+  }
+}
+
+.key-value__badge {
+  margin-left: 6px;
+  margin-bottom: 0;
+}
+
+@media print {
+  .key-value__key {
+    width: 224px;
+    margin-right: 12px;
+    float: left;
+  }
+
+  .key-value__value {
+    overflow: hidden;
+  }
+
+  .key-value__key,
+  .key-value__value {
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .key-value--inline-at-768.key-value--field {
+    .key-value__key {
+      padding-top: 15px;
+    }
+  }
+  .key-value__key {
+    width: 215px;
+  }
+}