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

---
 .../date-picker/date-picker.vue               | 233 +++++++++++-------
 1 file changed, 147 insertions(+), 86 deletions(-)

diff --git a/src/common-components/date-picker/date-picker.vue b/src/common-components/date-picker/date-picker.vue
index 2bbd1bad5..f2db85e42 100644
--- a/src/common-components/date-picker/date-picker.vue
+++ b/src/common-components/date-picker/date-picker.vue
@@ -2,7 +2,7 @@
   <div id="app">
     <fieldset>
       <legend class=" sr-only">Date Picker</legend>
-      <div class="grid-container">
+      <div class="calendar-grid-container">
         <div class="month-year body-small d-flex align-items-center ps-3 small">{{currentMonth}} {{currentYear}}</div>
         <div class="legend caption d-flex align-items-center justify-content-end"><span class="legend-circle me-1"></span> &equals; Available</div>
         <div class="nav-back ps-3"><button></button></div>
@@ -15,147 +15,146 @@
         <div class="grid-item caption"><span class="sr-only">Thursday</span>T</div>
         <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 past-day">
-          <input type="radio" name="day-of-month" id="thirtypast" />
-          <label for="thirtypast"><span>30</span></label>
+        <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>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="thirtyonepast" />
-          <label for="thirtyonepast"><span>31</span></label>
+          <input tabindex="-2" hidden type="radio" name="day-of-month" id="thirtyonepast" />
+          <label class="past-day" for="thirtyonepast"><span>31</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <!-- <div v-if="isFirstDayOfMonth" class="current-month">OCT</div> -->
-          <input type="radio" name="day-of-month" id="one" />
-          <label for="one"><span class="sr-only">{{dayOfWeek}} {{pastMonth}} {{dayOfMonth}}</span><span>1</span></label>
+          <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>
+          <div v-if="isFirstDayOfMonth" class="current-month first-of-month">OCT</div>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="two" />
-          <label for="two"><span>2</span></label>
+          <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>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="three" />
-          <label for="three"><span>3</span></label>
-        </div>
-        <div class="grid-item radio-wrapper" :class="[isCurrentDay ? 'current-day' : '']">
-          <!-- <div v-if="isCurrentDayDot" class="current-day-dot"></div> -->
-          <input type="radio" name="day-of-month" id="four" />
-          <label for="four"><span>4</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="three" />
+          <label class="highlighted-day selectable-day" for="three"><span>3</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="five" />
-          <label for="five"><span>5</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="four" />
+          <label class="highlighted-day selectable-day" for="four"><span>4</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="six" />
-          <label for="six"><span>6</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="five" />
+          <label class="highlighted-day selectable-day" for="five"><span>5</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="seven" />
-          <label for="seven"><span>7</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="six" />
+          <label class="highlighted-day selectable-day" for="six"><span>6</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="eight" />
-          <label for="eight"><span>8</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="seven" />
+          <label class="highlighted-day selectable-day" for="seven"><span>7</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="nine" />
-          <label for="nine"><span>9</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="eight" />
+          <label class="highlighted-day selectable-day" for="eight"><span>8</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="ten" />
-          <label for="ten"><span>10</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="nine" />
+          <label class="highlighted-day selectable-day" for="nine"><span>9</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="eleven" />
-          <label for="eleven"><span>11</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="ten" />
+          <label class="highlighted-day selectable-day" for="ten"><span>10</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="twelve" />
-          <label for="twelve"><span>12</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="eleven" />
+          <label class="highlighted-day selectable-day" for="eleven"><span>11</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="thirteen" />
-          <label for="thirteen"><span>13</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="twelve" />
+          <label class="highlighted-day selectable-day" for="twelve"><span>12</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="fourteen" />
-          <label for="fourteen"><span>17</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="thirteen" />
+          <label class="highlighted-day selectable-day" for="thirteen"><span>13</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="fifteen" />
-          <label for="fifteen"><span>15</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="fourteen" />
+          <label class="highlighted-day selectable-day" for="fourteen"><span>17</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="sixteen" />
-          <label for="sixteen"><span>16</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="fifteen" />
+          <label class="highlighted-day selectable-day" for="fifteen"><span>15</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="seventeen" />
-          <label for="seventeen"><span>17</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="sixteen" />
+          <label class="highlighted-day selectable-day" for="sixteen"><span>16</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="eighteen" />
-          <label for="eighteen"><span>18</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="seventeen" />
+          <label class="highlighted-day selectable-day" for="seventeen"><span>17</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="nineteen" />
-          <label for="nineteen"><span>19</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="eighteen" />
+          <label class="highlighted-day selectable-day" for="eighteen"><span>18</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="twenty" />
-          <label for="twenty"><span>20</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="nineteen" />
+          <label class="highlighted-day selectable-day" for="nineteen"><span>19</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="twentyone" />
-          <label for="twentyone"><span>21</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="twenty" />
+          <label class="highlighted-day selectable-day" for="twenty"><span>20</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="twentytwo" />
-          <label for="twentytwo"><span>22</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="twentyone" />
+          <label class="highlighted-day selectable-day" for="twentyone"><span>21</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="twentythree" />
-          <label for="twentythree"><span>23</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="twentytwo" />
+          <label class="highlighted-day selectable-day" for="twentytwo"><span>22</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="twentyfour" />
-          <label for="twentyfour"><span>24</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="twentythree" />
+          <label class="highlighted-day selectable-day" for="twentythree"><span>23</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="twentyfive" />
-          <label for="twentyfive"><span>25</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="twentyfour" />
+          <label class="highlighted-day selectable-day" for="twentyfour"><span>24</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="twentysix" />
-          <label for="twentysix"><span>26</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="twentyfive" />
+          <label class="highlighted-day selectable-day" for="twentyfive"><span>25</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="twentyseven" />
-          <label for="twentyseven"><span>27</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="twentysix" />
+          <label class="highlighted-day selectable-day" for="twentysix"><span>26</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="twentyeight" />
-          <label for="twentyeight"><span>28</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="twentyseven" />
+          <label class="highlighted-day selectable-day" for="twentyseven"><span>27</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="twentynine" />
-          <label for="twentynine"><span>29</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="twentyeight" />
+          <label class="highlighted-day selectable-day" for="twentyeight"><span>28</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="thirty" />
-          <label for="thirty"><span>30</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="twentynine" />
+          <label class="highlighted-day selectable-day" for="twentynine"><span>29</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="thirtyone" />
-          <label for="thirtyone"><span>31</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="thirty" />
+          <label class="highlighted-day selectable-day" for="thirty"><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>
         </div>
         <div class="grid-item radio-wrapper future-day">
-          <input type="radio" name="day-of-month" id="onefuture" />
-          <label for="onefuture"><span>1</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="onefuture" />
+          <label class="future-day selectable-day" for="onefuture"><span>1</span></label>
         </div>
         <div class="grid-item radio-wrapper future-day">
-          <input type="radio" name="day-of-month" id="twofuture" />
-          <label for="twofuture"><span>2</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="twofuture" />
+          <label class="future-day selectable-day" for="twofuture"><span>2</span></label>
         </div>
       </div>
     </fieldset>
@@ -175,13 +174,14 @@ export default {
       isFirstDayOfMonth: true,
       isCurrentDay: true,
       isCurrentDayDot: true,
+      isPastDay: true,
     };
   },
 };
 </script>
 
 <style lang="scss">
-.grid-container {
+.calendar-grid-container {
   margin: 0 auto;
   max-width: 414px;
   display: grid;
@@ -208,7 +208,8 @@ export default {
       border: 1px solid $blue;
     }
   }
-  .nav-back { grid-area: 1 / 6 / 2 / 7;
+  .nav-back {
+    grid-area: 1 / 6 / 2 / 7;
     display: flex;
     justify-content: flex-end;
     button {
@@ -221,7 +222,8 @@ export default {
       }
     }
   }
-  .nav-forward { grid-area: 1 / 7 / 2 / 8;
+  .nav-forward {
+    grid-area: 1 / 7 / 2 / 8;
     display: flex;
     justify-content: flex-end;
     button {
@@ -247,6 +249,11 @@ export default {
       display: flex;
       justify-content: center;
       align-items: center;
+      &:focus {
+        box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
+        background-color: $blue;
+        color: $white;
+      }
     }
   }
 
@@ -257,8 +264,7 @@ export default {
     align-items: center;
     outline: none;
 
-    input[type="radio"],
-    input[type="checkbox"] {
+    input[type="radio"] {
       position: absolute;; //override bootstrap
       height: 0;
       opacity: 0;
@@ -271,18 +277,40 @@ export default {
         box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
         background-color: $blue;
         color: $white;
+        &.past-day {
+          box-shadow: none;
+          background-color: transparent;
+          color: $gray-500;
+          font-weight: normal;
+        }
+        &.current-day {
+          &:after {
+            background-color: $white;
+          }
+        }
+        + .first-of-month {
+          color: $white;
+        }
       }
       &:checked + label {
         color: $blue;
-        font-weight: 500;
+        //font-weight: 500;
         background: $blue-100;
       }
       &:checked + label p,
       &:checked + label span {
-        font-weight: 500;
+        //font-weight: 500;
       }
     }
 
+    .first-of-month {
+      position: absolute;
+      font-size: 9px;
+      color: $blue;
+      top: 0;
+      z-index: 1;
+    }
+
     label {
       position: relative;
       cursor: pointer;
@@ -293,9 +321,41 @@ export default {
       height: 40px;
       min-width: 40px;
       border-radius: 50%;
-      color: #1574a1;
-      background-color: $blue-100;
-      border: 1px solid $blue;
+
+      &.past-day {
+        color: $gray-500;
+        background-color: transparent;
+        border: 1px solid transparent;
+        pointer-events: none;
+      }
+
+      &.highlighted-day {
+        color: $blue;
+        background-color: $blue-100;
+        border: 1px solid $blue;
+      }
+
+      &.current-day {
+        &:after {
+          content: '';
+          width: .25rem;
+          height: .25rem;
+          border-radius: 50%;
+          background-color: $blue;
+          position: absolute;
+          top: 28px;
+        }
+      }
+
+      &.future-day {
+
+      }
+
+      &.selectable-day {
+        &:hover {
+          cursor: pointer;
+        }
+      }
 
       span {
         &.small {
@@ -313,6 +373,7 @@ export default {
       + p {
         display: none;
       }
+
     }
   }
 }