From 592e14d4716fe6c369d56c30756f02a682be270e Mon Sep 17 00:00:00 2001
From: Bernard <bernardwang@users.noreply.github.com>
Date: Tue, 29 Sep 2020 12:11:18 -0500
Subject: [PATCH] [WNMGDS-596] Improve choice variables and unrevert the
 checkmark change (#827)

* Add more choice theme variables including border radius

* Reapply PR #733 and style the choice check icon with SCSS

* Update Choice variables

* Add error style under a flag

* Update icon positioning

* Remove unnecessary styles and add comments
---
 .../ChoiceList/_ChoiceList.docs.scss          |  6 +-
 .../src/pages/styles/icons/_icons.docs.scss   | 18 ++++-
 .../src/styles/components/_Choice.scss        | 78 ++++++++++++-------
 .../src/styles/settings/variables/_build.scss |  3 +
 .../src/styles/settings/variables/_forms.scss | 11 ++-
 5 files changed, 85 insertions(+), 31 deletions(-)

diff --git a/packages/design-system-docs/src/pages/components/ChoiceList/_ChoiceList.docs.scss b/packages/design-system-docs/src/pages/components/ChoiceList/_ChoiceList.docs.scss
index db02b96d13..6d4a9b481f 100644
--- a/packages/design-system-docs/src/pages/components/ChoiceList/_ChoiceList.docs.scss
+++ b/packages/design-system-docs/src/pages/components/ChoiceList/_ChoiceList.docs.scss
@@ -93,10 +93,14 @@ Style guide: components.choice.react
 
 The following Sass variables can be overridden to theme choice fields:
 
+- `$choice-size`
 - `$choice-border-width`
+- `$choice-border-radius`
+- `$choice-background-color`
 - `$choice-border-color`
-- `$choice-border-color-inverse`
 - `$choice-checked-background-color`
+- `$choice-checked-border-color`
+- See [form variables](https://github.com/CMSgov/design-system/blob/master/packages/design-system/src/styles/settings/variables/_forms.scss) for the full list of choice variables.
 
 ### Related patterns
 
diff --git a/packages/design-system-docs/src/pages/styles/icons/_icons.docs.scss b/packages/design-system-docs/src/pages/styles/icons/_icons.docs.scss
index 23f4854c71..221cd6da09 100644
--- a/packages/design-system-docs/src/pages/styles/icons/_icons.docs.scss
+++ b/packages/design-system-docs/src/pages/styles/icons/_icons.docs.scss
@@ -9,7 +9,7 @@ Style guide: styles.icons
 */
 
 /*
-Status Icons
+Status icons
 
 @hide-markup
 
@@ -21,7 +21,19 @@ Style guide: styles.icons.alert
 */
 
 /*
-Interaction Icons
+Checkbox and radio icons
+
+@hide-markup
+
+These checkmark icons are drawn with SCSS/CSS and used for both checkbox and radio buttons. The reasoning behind this is background images are not displayed in high contrast mode on certain systems and browsers so switching to draw the icons with SCSS/CSS ensures that the icons are always visibile and support as many users as possible.
+
+Markup: checkbox-radio-icons.example.html
+
+Style guide: styles.icons.checkbox
+*/
+
+/*
+Interaction icons
 
 @hide-markup
 
@@ -33,7 +45,7 @@ Style guide: styles.icons.interaction
 */
 
 /*
-Supplemental Icons
+Supplemental icons
 
 @hide-markup
 
diff --git a/packages/design-system/src/styles/components/_Choice.scss b/packages/design-system/src/styles/components/_Choice.scss
index 93a4de0961..992d8d2a66 100644
--- a/packages/design-system/src/styles/components/_Choice.scss
+++ b/packages/design-system/src/styles/components/_Choice.scss
@@ -4,7 +4,6 @@ $ds-c-inset-border-width: $spacer-half;
 
 // Order of the choice styles is important to ensure styles have the correct precedent
 // normal < errored < checked < disabled < focused
-
 .ds-c-choice {
   // Hide the default browser checkbox/radio button
   // We create our own custom version using '+ label::before'
@@ -21,6 +20,10 @@ $ds-c-inset-border-width: $spacer-half;
     font-weight: $font-normal;
     margin: $spacer-1 0;
     max-width: $measure-base;
+    // We set min-height to be the same as `$choice-size` to ensure most of the time
+    // the label and icon will be vertically aligned. We cannot simply vertically center the icon
+    // because of choice hints and label text wrapping, as we want the icon to be vertically aligned
+    // with the first line of text only.
     min-height: $choice-size;
     padding-left: $choice-size + $spacer-1;
     position: relative;
@@ -28,33 +31,50 @@ $ds-c-inset-border-width: $spacer-half;
 
   // Choice checkbox/radio button
   + label::before {
-    background-color: $color-background;
+    background-color: $choice-background-color;
     border: $choice-border-width solid $choice-border-color;
+    border-radius: $choice-border-radius;
     box-sizing: border-box;
     content: '\a0';
     height: $choice-size;
     left: 0;
-    line-height: $choice-size;
     position: absolute;
-    text-indent: 0.15em;
     top: 0;
     width: $choice-size;
   }
 
+  + label::after {
+    background: transparent;
+    border: solid;
+    border-color: $color-white;
+    border-top-color: transparent;
+    border-width: 0 0 4px 4px;
+    content: '';
+    height: 4px;
+    left: 9px;
+    opacity: 0;
+    position: absolute;
+    top: 11px;
+    transform: rotate(-45deg);
+    width: 10px;
+  }
+
   // Errored checkbox/radio button
-  // Currently only enabled in HC.gov DS
-  // &.ds-c-choice--error + label::before {
-  //   border-color: $color-error;
-  // }
+  @if $ds-include-choice-error-highlight {
+    &.ds-c-choice--error + label::before {
+      border-color: $color-error;
+    }
+  }
 
   // Checked checkbox/radio button
   &:checked + label::before {
     background-color: $choice-checked-background-color;
-    background-image: url('#{$image-path}/checkmark-white.svg');
-    background-position: 50%;
-    background-repeat: no-repeat;
-    background-size: $choice-size - $spacer-1;
-    border-color: $choice-checked-background-color;
+    border-color: $choice-checked-border-color;
+  }
+
+  // Checked icon
+  &:checked + label::after {
+    opacity: 1;
   }
 
   // Disabled checkbox/radio button and label
@@ -62,8 +82,8 @@ $ds-c-inset-border-width: $spacer-half;
     color: $color-muted;
 
     &::before {
-      background-color: $color-gray-lighter;
-      border-color: $color-gray-light;
+      background-color: $choice-disabled-background-color;
+      border-color: $choice-disabled-border-color;
       cursor: not-allowed;
     }
   }
@@ -86,17 +106,19 @@ $ds-c-inset-border-width: $spacer-half;
 .ds-c-choice--inverse {
   // Choice checkbox/radio button
   + label::before {
-    background-color: transparent;
+    background-color: $choice-background-color-inverse;
     border-color: $choice-border-color-inverse;
   }
 
   // Errored checkbox/radio button
-  // Currently only enabled in HC.gov DS
-  // &.ds-c-choice--error + label::before {
-  //   border-color: $color-error-light;
-  // }
+  @if $ds-include-choice-error-highlight {
+    &.ds-c-choice--error + label::before {
+      border-color: $color-error-light;
+    }
+  }
 
   // Checked checkbox/radio button
+  // Need to repeat this styling to override error border-color when checked
   &:checked + label::before {
     border-color: $choice-checked-background-color;
   }
@@ -106,8 +128,8 @@ $ds-c-inset-border-width: $spacer-half;
     color: $color-muted-inverse;
 
     &::before {
-      background-color: rgba($color-muted-inverse, 0.15);
-      border-color: $color-gray-light;
+      background-color: $choice-disabled-background-color-inverse;
+      border-color: $choice-disabled-border-color-inverse;
     }
   }
 
@@ -132,17 +154,21 @@ $ds-c-inset-border-width: $spacer-half;
   + label {
     min-height: $choice-size-small;
     padding-left: $choice-size-small + $spacer-1;
-    padding-top: 0;
 
     &::before {
       height: $choice-size-small;
+      // $choice-size-small is smaller than the choice label, we need to adjust it manually
       top: 2px;
       width: $choice-size-small;
     }
-  }
 
-  &:checked + label::before {
-    background-size: $choice-size-small;
+    &::after {
+      border-width: 0 0 3px 3px;
+      height: 3px;
+      left: 5px;
+      top: 8px;
+      width: 7px;
+    }
   }
 }
 
diff --git a/packages/design-system/src/styles/settings/variables/_build.scss b/packages/design-system/src/styles/settings/variables/_build.scss
index 2e00039687..e7a4e5d27f 100644
--- a/packages/design-system/src/styles/settings/variables/_build.scss
+++ b/packages/design-system/src/styles/settings/variables/_build.scss
@@ -8,3 +8,6 @@ $ds-include-base-html-rulesets: true !default;
 
 // Set $ds-include-focus-styles to enable the beta CMSDS focus styles. These styles can be further customized via the `$focus-color` variable and `focus-text` mixin
 $ds-include-focus-styles: false !default;
+
+// Set $ds-include-choice-error-highlight to automatically add an error highlight to choice components inside a ChoiceList with an errorMessage.
+$ds-include-choice-error-highlight: false !default;
diff --git a/packages/design-system/src/styles/settings/variables/_forms.scss b/packages/design-system/src/styles/settings/variables/_forms.scss
index 129c7f519c..9808e00464 100644
--- a/packages/design-system/src/styles/settings/variables/_forms.scss
+++ b/packages/design-system/src/styles/settings/variables/_forms.scss
@@ -9,10 +9,19 @@ $input-border-radius: $border-radius !default;
 $input-border-color: $color-base !default;
 $input-border-color-inverse: $color-black !default;
 
-$choice-checked-background-color: $color-primary !default;
+// Choice theme variables
+$choice-background-color: $color-background !default;
 $choice-border-color: $color-base !default;
+$choice-checked-background-color: $color-primary !default;
+$choice-checked-border-color: $color-primary !default;
+$choice-disabled-background-color: $color-gray-lighter !default;
+$choice-disabled-border-color: $color-gray-light !default;
+$choice-background-color-inverse: transparent !default;
 $choice-border-color-inverse: $color-white !default;
+$choice-disabled-background-color-inverse: rgba($color-muted-inverse, 0.15) !default;
+$choice-disabled-border-color-inverse: $color-gray-light !default;
 $choice-border-width: 2px !default;
+$choice-border-radius: 0 !default;
 $choice-size: $spacer-4 !default;
 $choice-size-small: 20px !default;