From 5210141567de13a703863432312ee2778604eb38 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 7 Feb 2022 09:02:31 -0500
Subject: [PATCH] CSR-338 fix text color and add opacity: 0 to input.

---
 .../list-button-horizontal.vue                | 49 ++++++++++---------
 src/ux-components/list-button/list-button.vue | 45 ++++++++---------
 src/ux-components/list-card/list-card.vue     |  2 +
 3 files changed, 50 insertions(+), 46 deletions(-)

diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index e3e7c3891..0751e3bca 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -1,34 +1,34 @@
 <template>
-  <div 
-    class="list-group list-button-horizontal d-flex flex-column w-100 mb-2" 
-    @mouseup="handleClick(value)" 
+  <div
+    class="list-group list-button-horizontal d-flex flex-column w-100 mb-2"
+    @mouseup="handleClick(value)"
     @keyup.space="handleClick(value)"
   >
-    <input 
-      :type="isMultiSelect ? 'checkbox' : 'radio'" 
-      :id="buttonID" 
-      :name="groupName" 
-      :value="buttonID" 
-      :aria-required="isRequired" 
-      :data-focus-target="groupName" 
-      v-model="checkValue" 
+    <input
+      :type="isMultiSelect ? 'checkbox' : 'radio'"
+      :id="buttonID"
+      :name="groupName"
+      :value="buttonID"
+      :aria-required="isRequired"
+      :data-focus-target="groupName"
+      v-model="checkValue"
       @change="handleCheckChange"
     />
-    <label 
-      tabindex="-1" 
-      :for="buttonID" 
-      :aria-labelledby="buttonID" 
+    <label
+      tabindex="-1"
+      :for="buttonID"
+      :aria-labelledby="buttonID"
       class="d-flex flex-column justify-content-center py-3 px-4"
     >
-      <span 
-        class="m-0" 
+      <span
+        class="m-0"
         :class="textPosition"
       >
         {{buttonLabel}}
       </span>
-      <span 
-        v-if="buttonLabelSubCopy" 
-        class="m-0 small" 
+      <span
+        v-if="buttonLabelSubCopy"
+        class="m-0 small"
         :class="textPosition"
       >
         {{buttonLabelSubCopy}}
@@ -36,10 +36,10 @@
       <span v-if="screenReaderOnlyText" class="sr-only">
         {{screenReaderOnlyText}}
       </span>
-      <loader 
-        v-if="isLoaderDisplayed && !isMultiSelect" 
-        :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" 
-        :class="[loaderColor, loaderPosition]" 
+      <loader
+        v-if="isLoaderDisplayed && !isMultiSelect"
+        :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
+        :class="[loaderColor, loaderPosition]"
       />
     </label>
   </div>
@@ -151,6 +151,7 @@ export default {
     border: 1px solid $gray-500;
     border-radius: 0;
     width: 100%;
+    color: $gray-600;
     &:hover {
       box-shadow: 0 0 0 4px $blue-100;
       cursor: pointer;
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 823bfc313..d56f02d44 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,40 +1,40 @@
 <template>
-  <div 
-    class="list-group list-button d-flex flex-column w-100 mb-2" 
-    @mouseup="handleClick(value)" 
+  <div
+    class="list-group list-button d-flex flex-column w-100 mb-2"
+    @mouseup="handleClick(value)"
     @keyup.space="handleClick(value)"
   >
-    <input 
-      :type="isMultiSelect ? 'checkbox' : 'radio'" 
-      :id="buttonID" 
-      :name="groupName" 
-      :value="buttonID" 
-      :aria-required="isRequired" 
-      :data-focus-target="groupName" 
+    <input
+      :type="isMultiSelect ? 'checkbox' : 'radio'"
+      :id="buttonID"
+      :name="groupName"
+      :value="buttonID"
+      :aria-required="isRequired"
+      :data-focus-target="groupName"
       v-model="checkValue"
       @change="handleCheckChange"
     >
-    <label 
-      tabindex="-1" 
-      :for="buttonID" 
-      :aria-labelledby="buttonID" 
+    <label
+      tabindex="-1"
+      :for="buttonID"
+      :aria-labelledby="buttonID"
       class="d-flex flex-column justify-content-center py-3 px-4"
     >
-      <span 
-        class="m-0" 
+      <span
+        class="m-0"
         :class="textPosition"
       >
         {{ buttonLabel }}
       </span>
-      <span 
-        v-if="buttonLabelSubCopy" 
-        class="m-0 small" 
+      <span
+        v-if="buttonLabelSubCopy"
+        class="m-0 small"
         :class="textPosition"
       >
         {{ buttonLabelSubCopy }}
       </span>
-      <span 
-        v-if="screenReaderOnlyText" 
+      <span
+        v-if="screenReaderOnlyText"
         class="sr-only"
       >
         {{ screenReaderOnlyText }}
@@ -67,7 +67,7 @@ export default {
     loaderColor: String,
     loaderPosition: String,
     sizeInRem: [Number,String],
-    value: { 
+    value: {
     // Field initial value
       type: [String, Number],
       default: "",
@@ -132,6 +132,7 @@ export default {
     input[type="checkbox"] {
       position: static; //override bootstrap
       height: 0;
+      opacity: 0;
     }
     &:focus-visible + label {
       box-shadow: 0 0 0 2.5px $blue inset;
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 6d4805de5..caba00d0a 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -173,6 +173,7 @@ export default {
       border-radius: 2px;
       order: 2;
       flex-shrink: 0;
+      color: $gray-600;
     }
     + label.checkboxTop::before {
       margin: -1.25rem 0.5rem 0 0 !important;
@@ -229,6 +230,7 @@ export default {
       }
       + label {
         min-height: 48px;
+        color: $gray-600;
         img {
           margin-bottom: 0;
         }