From bdfb4bbf8aceeadd477e145791d3734cb6796582 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Fri, 7 Oct 2022 16:31:49 -0400
Subject: [PATCH] WIP date picker

---
 .../date-picker/date-picker.vue               | 456 ++++++------------
 1 file changed, 158 insertions(+), 298 deletions(-)

diff --git a/src/common-components/date-picker/date-picker.vue b/src/common-components/date-picker/date-picker.vue
index 28d433289..2bbd1bad5 100644
--- a/src/common-components/date-picker/date-picker.vue
+++ b/src/common-components/date-picker/date-picker.vue
@@ -1,147 +1,151 @@
 <template>
   <div id="app">
     <fieldset>
-      <legend class="d-flex justify-content-center">Date Picker</legend>
+      <legend class=" sr-only">Date Picker</legend>
       <div class="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>
+        <div class="nav-forward pe-3"><button></button></div>
         <!-- Do the days of the weeek need to be read? -->
-        <div class="grid-item"><span class="sr-only">Sunday</span>S</div>
-        <div class="grid-item"><span class="sr-only">Monday</span>M</div>
-        <div class="grid-item"><span class="sr-only">Tuesday</span>T</div>
-        <div class="grid-item"><span class="sr-only">Wednesday</span>W</div>
-        <div class="grid-item"><span class="sr-only">Thursday</span>T</div>
-        <div class="grid-item"><span class="sr-only">Friday</span>F</div>
-        <div class="grid-item"><span class="sr-only">Saturday</span>S</div>
+        <div class="grid-item caption"><span class="sr-only">Sunday</span>S</div>
+        <div class="grid-item caption"><span class="sr-only">Monday</span>M</div>
+        <div class="grid-item caption"><span class="sr-only">Tuesday</span>T</div>
+        <div class="grid-item caption"><span class="sr-only">Wednesday</span>W</div>
+        <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>
-        <div class="grid-item radio-wrapper past-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="thirtyonepast" />
           <label for="thirtyonepast"><span>31</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day first-of-month">
-          <div v-if="isFirstDayOfMonth" class="current-month">OCT</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>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="two" />
           <label for="two"><span>2</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <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 highlighted-day" :class="[isCurrentDay ? 'current-day' : '']">
-          <div v-if="isCurrentDayDot" class="current-day-dot"></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>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="five" />
           <label for="five"><span>5</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="six" />
           <label for="six"><span>6</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="seven" />
           <label for="seven"><span>7</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="eight" />
           <label for="eight"><span>8</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="nine" />
           <label for="nine"><span>9</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="ten" />
           <label for="ten"><span>10</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="eleven" />
           <label for="eleven"><span>11</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="twelve" />
           <label for="twelve"><span>12</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="thirteen" />
           <label for="thirteen"><span>13</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="fourteen" />
           <label for="fourteen"><span>17</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="fifteen" />
           <label for="fifteen"><span>15</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="sixteen" />
           <label for="sixteen"><span>16</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="seventeen" />
           <label for="seventeen"><span>17</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="eighteen" />
           <label for="eighteen"><span>18</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="nineteen" />
           <label for="nineteen"><span>19</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="twenty" />
           <label for="twenty"><span>20</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="twentyone" />
           <label for="twentyone"><span>21</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="twentytwo" />
           <label for="twentytwo"><span>22</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="twentythree" />
           <label for="twentythree"><span>23</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="twentyfour" />
           <label for="twentyfour"><span>24</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="twentyfive" />
           <label for="twentyfive"><span>25</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="twentysix" />
           <label for="twentysix"><span>26</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="twentyseven" />
           <label for="twentyseven"><span>27</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="twentyeight" />
           <label for="twentyeight"><span>28</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="twentynine" />
           <label for="twentynine"><span>29</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="thirty" />
           <label for="thirty"><span>30</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="thirtyone" />
           <label for="thirtyone"><span>31</span></label>
         </div>
@@ -156,9 +160,6 @@
       </div>
     </fieldset>
   </div>
-  <form class="w-100 d-flex justify-content-center mt-5">
-    <input type="date">
-  </form>
 </template>
 
 <script>
@@ -169,6 +170,8 @@ export default {
       dayOfWeek: "Tuesday",
       dayOfMonth: "1st",
       pastMonth: "October",
+      currentMonth: "October",
+      currentYear: "2022",
       isFirstDayOfMonth: true,
       isCurrentDay: true,
       isCurrentDayDot: true,
@@ -178,29 +181,73 @@ export default {
 </script>
 
 <style lang="scss">
-.container {
-  //max-width: 341px;
-  label {
-    display: initial; //Override Bootstrap default
-  }
-  #availableDates label:nth-child(14n):after {
-    content: "\a";
-    white-space: pre;
-  }
-}
-
 .grid-container {
   margin: 0 auto;
-  max-width: 341px;
+  max-width: 414px;
   display: grid;
-  grid-gap: 4px;
-  grid-template-columns: auto auto auto auto auto auto auto;
+  //grid-template-columns: auto auto auto auto auto auto auto;
+  grid-template-columns: repeat(7, 1fr);
   justify-content: center;
   align-items: center;
+  padding: 4px;
 
   .grid-item {
     text-align: center;
-    padding: 4px;
+    margin: 10%;
+  }
+
+  .month-year { grid-area: 1 / 1 / 2 / 4;
+    text-transform: uppercase;
+  }
+  .legend { grid-area: 1 / 4 / 2 / 6;
+    .legend-circle {
+      border-radius: 50%;
+      width: 16px;
+      height: 16px;
+      background-color: $blue-100;
+      border: 1px solid $blue;
+    }
+  }
+  .nav-back { grid-area: 1 / 6 / 2 / 7;
+    display: flex;
+    justify-content: flex-end;
+    button {
+      &:after {
+        content: "";
+        position: absolute;
+        width: 7px;
+        height: 12px;
+        background-image: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.331685 6.00121C0.330445 5.82446 0.399256 5.65442 0.523053 5.52832L5.84499 0.198256C5.97188 0.0713149 6.14397 -8.63821e-08 6.32341 -6.72174e-08C6.50285 -4.80527e-08 6.67495 0.071315 6.80183 0.198256C6.92872 0.325198 7 0.497368 7 0.67689C7 0.856412 6.92872 1.02858 6.80183 1.15552L1.94874 6.00121L6.80183 10.8526C6.92745 10.9796 6.99751 11.1512 6.99662 11.3299C6.99572 11.5085 6.92393 11.6794 6.79705 11.8051C6.67016 11.9308 6.49857 12.0009 6.32003 12C6.14148 11.9991 5.97061 11.9273 5.84499 11.8003L0.526881 6.47601C0.401568 6.34983 0.331375 6.17908 0.331685 6.00121Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
+      }
+    }
+  }
+  .nav-forward { grid-area: 1 / 7 / 2 / 8;
+    display: flex;
+    justify-content: flex-end;
+    button {
+      &:after {
+        content: "";
+        position: absolute;
+        width: 7px;
+        height: 12px;
+        background-image: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.66831 5.99879C6.66955 6.17554 6.60074 6.34558 6.47695 6.47168L1.15501 11.8017C1.02812 11.9287 0.85603 12 0.676587 12C0.497145 12 0.325053 11.9287 0.198168 11.8017C0.0712831 11.6748 7.268e-09 11.5026 8.07183e-09 11.3231C8.87567e-09 11.1436 0.0712831 10.9714 0.198168 10.8445L5.05126 5.99879L0.198168 1.14736C0.0725521 1.02042 0.00248585 0.848755 0.00338306 0.670131C0.00428028 0.491506 0.0760674 0.320554 0.202952 0.194881C0.329837 0.0692091 0.501426 -0.000888818 0.679971 9.54485e-06C0.858515 0.000906955 1.02939 0.0727263 1.15501 0.199668L6.47312 5.52399C6.59843 5.65017 6.66862 5.82092 6.66831 5.99879Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
+      }
+    }
+  }
+
+  .nav-back,
+  .nav-forward {
+    button {
+      position: relative;
+      border-radius: 50%;
+      width: 28px;
+      height: 28px;
+      background-color: $blue-100;
+      border: 1px solid $blue;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
   }
 
   .radio-wrapper {
@@ -208,252 +255,65 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
-    margin: 0;
-    width: 46px;
-    height: 46px;
+    outline: none;
 
-    .current-day-dot {
-      position: absolute;
+    input[type="radio"],
+    input[type="checkbox"] {
+      position: absolute;; //override bootstrap
+      height: 0;
+      opacity: 0;
 
-    }
-
-    &.first-of-month {
-      .current-month {
-        position: absolute;
-        font-size: 9px;
-        top: 4px;
-        color: #1574a1;
+      &:focus-visible + label {
+        box-shadow: 0 0 0 2.5px $blue;
+      }
+      &:focus + label,
+      &:checked:focus + label {
+        box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
+        background-color: $blue;
+        color: $white;
+      }
+      &:checked + label {
+        color: $blue;
+        font-weight: 500;
+        background: $blue-100;
+      }
+      &:checked + label p,
+      &:checked + label span {
+        font-weight: 500;
       }
     }
 
-    &.highlighted-day {
+    label {
+      position: relative;
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 40px;
+      height: 40px;
+      min-width: 40px;
+      border-radius: 50%;
+      color: #1574a1;
+      background-color: $blue-100;
+      border: 1px solid $blue;
 
-      input[type="radio"] {
-        position: absolute;
-        // opacity: 0;
-        height: 0.1px;
-        width: 0.1px;
-
-        + label {
-          position: relative;
-          cursor: pointer;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          width: 40px;
-          height: 40px;
-          border-radius: 50%;
-          color: #1574a1;
-
-          span {
-            z-index: 2;
-          }
-
-          &::before {
-            content: "";
-            position: absolute;
-            border-radius: 50%;
-            border: 1px solid #1574a1;
-            background-color: #e4f1f7;
-            color: #1574a1;
-            width: 40px;
-            height: 40px;
-            z-index: -1;
-          }
-
-          &::after {
-            content: "";
-            position: absolute;
-            border-radius: 50%;
-            width: 40px;
-            height: 40px;
-          }
-        }
-
-        &:checked {
-          + label::after {
-            background: #1574a1;
-            box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
-            color: #fff;
-          }
-          + label span {
-            color: #fff;
-          }
-        }
-
-        &:focus {
-          + label::before {
-            background-color: #1574a1;
-          }
-          + label span {
-            color: #fff;
-          }
-        }
-      }
-    }
-
-    &.past-day {
-
-      input[type="radio"] {
-        position: absolute;
-        opacity: 0;
-        height: 0.1px;
-        width: 0.1px;
-
-        + label {
-          position: relative;
-          cursor: pointer;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          width: 40px;
-          height: 40px;
-          border-radius: 50%;
-          color: #8E9292;
-
-          span {
-            z-index: 2;
-          }
-
-          &::before {
-            content: "";
-            position: absolute;
-            border-radius: 50%;
-            border: 1px solid transparent;
-            background-color: transparent;
-            color: #1574a1;
-            width: 40px;
-            height: 40px;
-            z-index: -1;
-          }
-
-          &::after {
-            content: "";
-            position: absolute;
-            border-radius: 50%;
-            width: 40px;
-            height: 40px;
-          }
-        }
-
-        &:checked {
-          + label::after {
-            background: #1574a1;
-            box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
-            color: #fff;
-          }
-          + label span {
-            color: #fff;
-          }
-        }
-
-        &:focus {
-          + label::before {
-            background-color: transparent;
-          }
-          + label span {
-            color: #1574a1;
-          }
-        }
-
-        &:active {
-          + label::before {
-            background-color: #1574a1;
-          }
-          + label span {
-            color: #fff;
-          }
-        }
-      }
-    }
-
-    &.future-day {
-
-      input[type="radio"] {
-        position: absolute;
-        opacity: 0;
-        height: 0.1px;
-        width: 0.1px;
-
-        + label {
-          position: relative;
-          cursor: pointer;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          width: 40px;
-          height: 40px;
-          border-radius: 50%;
-          color: #4D5151;
-
-          span {
-            z-index: 2;
-          }
-
-          &::before {
-            content: "";
-            position: absolute;
-            border-radius: 50%;
-            border: 1px solid transparent;
-            background-color: transparent;
-            color: #1574a1;
-            width: 40px;
-            height: 40px;
-            z-index: -1;
-          }
-
-          &::after {
-            content: "";
-            position: absolute;
-            border-radius: 50%;
-            width: 40px;
-            height: 40px;
-          }
-        }
-      }
-    }
-
-    &.current-day {
-
-      input[type="radio"] {
-        position: absolute;
-        // opacity: 0;
-        height: 0.1px;
-        width: 0.1px;
-
-        &:after {
-          content: "\A";
-          width:4px;
-          height:4px;
-          border-radius:50%;
-          background: #1574a1;
-          position: absolute;
-          top: 8px;
-          left: -1px;
-          z-index: 1;
-        }
-
-        &:checked {
-          + label::after {
-            background: #1574a1;
-            box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
-            color: #fff;
-          }
-          + label span {
-            color: #fff;
-          }
-          &:after {
-            background: #fff;
-          }
-        }
-      }
       span {
-        position: relative;
-        top: -.25rem;
+        &.small {
+          font-size: .75rem;
+          color: $gray-550;
+        }
+      }
+
+      &:hover {
+        @include media-breakpoint-up(sm) {
+          box-shadow: 0 0 0 4px $blue-300;
+        }
+        cursor: pointer;
+      }
+      + p {
+        display: none;
       }
     }
   }
-
 }
-
-</style>
+  </style>