From d8cfcab66bfa7c34af6567d007565225b76e450c Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 10 Oct 2022 16:00:37 -0400
Subject: [PATCH] WIP date picker

update hover state, ID's.
---
 .../date-picker/date-picker.vue               | 148 +++++++++---------
 1 file changed, 76 insertions(+), 72 deletions(-)

diff --git a/src/common-components/date-picker/date-picker.vue b/src/common-components/date-picker/date-picker.vue
index f2db85e42..2c88e8f03 100644
--- a/src/common-components/date-picker/date-picker.vue
+++ b/src/common-components/date-picker/date-picker.vue
@@ -16,145 +16,145 @@
         <div class="grid-item caption"><span class="sr-only">Friday</span>F</div>
         <div class="grid-item caption"><span class="sr-only">Saturday</span>S</div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="-2" hidden type="radio" name="day-of-month" id="thirtypast" />
-          <label class="past-day" for="thirtypast"><span>30</span></label>
+          <input tabindex="-2" hidden type="radio" name="day-of-month" id="sep-30" />
+          <label class="past-day" for="sep-30"><span>30</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="-2" hidden type="radio" name="day-of-month" id="thirtyonepast" />
-          <label class="past-day" for="thirtyonepast"><span>31</span></label>
+          <input tabindex="-2" hidden type="radio" name="day-of-month" id="sep-31" />
+          <label class="past-day" for="sep-31"><span>31</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="one" />
-          <label class="highlighted-day selectable-day" for="one"><span class="sr-only">{{dayOfWeek}} {{pastMonth}} {{dayOfMonth}}</span><span>1</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-1" />
+          <label class="highlighted-day selectable-day" for="oct-1"><span class="sr-only">{{dayOfWeek}} {{pastMonth}} {{dayOfMonth}}</span><span>1</span></label>
           <div v-if="isFirstDayOfMonth" class="current-month first-of-month">OCT</div>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="two" />
-          <label class="highlighted-day selectable-day" :class="[isCurrentDay ? 'current-day' : '']" for="two"><span>2</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-2" />
+          <label class="highlighted-day selectable-day" :class="[isCurrentDay ? 'current-day' : '']" for="oct-2"><span>2</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="three" />
-          <label class="highlighted-day selectable-day" for="three"><span>3</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-3" />
+          <label class="highlighted-day selectable-day" for="oct-3"><span>3</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="four" />
-          <label class="highlighted-day selectable-day" for="four"><span>4</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-4" />
+          <label class="highlighted-day selectable-day" for="oct-4"><span>4</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="five" />
-          <label class="highlighted-day selectable-day" for="five"><span>5</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-5" />
+          <label class="highlighted-day selectable-day" for="oct-5"><span>5</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="six" />
-          <label class="highlighted-day selectable-day" for="six"><span>6</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-6" />
+          <label class="highlighted-day selectable-day" for="oct-6"><span>6</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="seven" />
-          <label class="highlighted-day selectable-day" for="seven"><span>7</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-7" />
+          <label class="highlighted-day selectable-day" for="oct-7"><span>7</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="eight" />
-          <label class="highlighted-day selectable-day" for="eight"><span>8</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-8" />
+          <label class="highlighted-day selectable-day" for="oct-8"><span>8</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="nine" />
-          <label class="highlighted-day selectable-day" for="nine"><span>9</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-9" />
+          <label class="highlighted-day selectable-day" for="oct-9"><span>9</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="ten" />
-          <label class="highlighted-day selectable-day" for="ten"><span>10</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-10" />
+          <label class="highlighted-day selectable-day" for="oct-10"><span>10</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="eleven" />
-          <label class="highlighted-day selectable-day" for="eleven"><span>11</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-11" />
+          <label class="highlighted-day selectable-day" for="oct-11"><span>11</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="twelve" />
-          <label class="highlighted-day selectable-day" for="twelve"><span>12</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-12" />
+          <label class="highlighted-day selectable-day" for="oct-12"><span>12</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="thirteen" />
-          <label class="highlighted-day selectable-day" for="thirteen"><span>13</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-13" />
+          <label class="highlighted-day selectable-day" for="oct-13"><span>13</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="fourteen" />
-          <label class="highlighted-day selectable-day" for="fourteen"><span>17</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-14" />
+          <label class="highlighted-day selectable-day" for="oct-14"><span>17</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="fifteen" />
-          <label class="highlighted-day selectable-day" for="fifteen"><span>15</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-15" />
+          <label class="highlighted-day selectable-day" for="oct-15"><span>15</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="sixteen" />
-          <label class="highlighted-day selectable-day" for="sixteen"><span>16</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-16" />
+          <label class="highlighted-day selectable-day" for="oct-16"><span>16</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="seventeen" />
-          <label class="highlighted-day selectable-day" for="seventeen"><span>17</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-17" />
+          <label class="highlighted-day selectable-day" for="oct-17"><span>17</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="eighteen" />
-          <label class="highlighted-day selectable-day" for="eighteen"><span>18</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-18" />
+          <label class="highlighted-day selectable-day" for="oct-18"><span>18</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="nineteen" />
-          <label class="highlighted-day selectable-day" for="nineteen"><span>19</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-19" />
+          <label class="highlighted-day selectable-day" for="oct-19"><span>19</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="twenty" />
-          <label class="highlighted-day selectable-day" for="twenty"><span>20</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-20" />
+          <label class="highlighted-day selectable-day" for="oct-20"><span>20</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="twentyone" />
-          <label class="highlighted-day selectable-day" for="twentyone"><span>21</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-21" />
+          <label class="highlighted-day selectable-day" for="oct-21"><span>21</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="twentytwo" />
-          <label class="highlighted-day selectable-day" for="twentytwo"><span>22</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-22" />
+          <label class="highlighted-day selectable-day" for="oct-22"><span>22</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="twentythree" />
-          <label class="highlighted-day selectable-day" for="twentythree"><span>23</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-23" />
+          <label class="highlighted-day selectable-day" for="oct-23"><span>23</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="twentyfour" />
-          <label class="highlighted-day selectable-day" for="twentyfour"><span>24</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-24" />
+          <label class="highlighted-day selectable-day" for="oct-24"><span>24</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="twentyfive" />
-          <label class="highlighted-day selectable-day" for="twentyfive"><span>25</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-25" />
+          <label class="highlighted-day selectable-day" for="oct-25"><span>25</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="twentysix" />
-          <label class="highlighted-day selectable-day" for="twentysix"><span>26</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-26" />
+          <label class="highlighted-day selectable-day" for="oct-26"><span>26</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="twentyseven" />
-          <label class="highlighted-day selectable-day" for="twentyseven"><span>27</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-27" />
+          <label class="highlighted-day selectable-day" for="oct-27"><span>27</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="twentyeight" />
-          <label class="highlighted-day selectable-day" for="twentyeight"><span>28</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-28" />
+          <label class="highlighted-day selectable-day" for="oct-28"><span>28</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="twentynine" />
-          <label class="highlighted-day selectable-day" for="twentynine"><span>29</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-29" />
+          <label class="highlighted-day selectable-day" for="oct-29"><span>29</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="thirty" />
-          <label class="highlighted-day selectable-day" for="thirty"><span>30</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-30" />
+          <label class="highlighted-day selectable-day" for="oct-30"><span>30</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="thirtyone" />
-          <label class="highlighted-day selectable-day" for="thirtyone"><span>31</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-31" />
+          <label class="highlighted-day selectable-day" for="oct-31"><span>31</span></label>
         </div>
         <div class="grid-item radio-wrapper future-day">
-          <input tabindex="0" type="radio" name="day-of-month" id="onefuture" />
-          <label class="future-day selectable-day" for="onefuture"><span>1</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="nov-1" />
+          <label class="future-day selectable-day" for="nov-1"><span>1</span></label>
         </div>
         <div class="grid-item radio-wrapper future-day">
-          <input tabindex="0" type="radio" name="day-of-month" id="twofuture" />
-          <label class="future-day selectable-day" for="twofuture"><span>2</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="nov-2" />
+          <label class="future-day selectable-day" for="nov-2"><span>2</span></label>
         </div>
       </div>
     </fieldset>
@@ -295,7 +295,9 @@ export default {
       &:checked + label {
         color: $blue;
         //font-weight: 500;
-        background: $blue-100;
+        box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
+        background-color: $blue;
+        color: $white;
       }
       &:checked + label p,
       &:checked + label span {
@@ -366,7 +368,9 @@ export default {
 
       &:hover {
         @include media-breakpoint-up(sm) {
-          box-shadow: 0 0 0 4px $blue-300;
+          box-shadow: 0 0 0 4px transparent;
+          background-color: $blue;
+          color: $white;
         }
         cursor: pointer;
       }