From 035ff732e08ddc932fb85a51c22c159fd242acd9 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Thu, 6 Oct 2022 12:47:47 -0400
Subject: [PATCH] WIP date picker and drop down test.

---
 .../date-picker/date-picker-spec.js           |   1 +
 .../date-picker/date-picker.vue               | 459 ++++++++++++++++++
 src/router/index.js                           |   6 +
 3 files changed, 466 insertions(+)
 create mode 100644 src/common-components/date-picker/date-picker-spec.js
 create mode 100644 src/common-components/date-picker/date-picker.vue

diff --git a/src/common-components/date-picker/date-picker-spec.js b/src/common-components/date-picker/date-picker-spec.js
new file mode 100644
index 000000000..3d0843e10
--- /dev/null
+++ b/src/common-components/date-picker/date-picker-spec.js
@@ -0,0 +1 @@
+test.todo("some test to be written in the future");
diff --git a/src/common-components/date-picker/date-picker.vue b/src/common-components/date-picker/date-picker.vue
new file mode 100644
index 000000000..28d433289
--- /dev/null
+++ b/src/common-components/date-picker/date-picker.vue
@@ -0,0 +1,459 @@
+<template>
+  <div id="app">
+    <fieldset>
+      <legend class="d-flex justify-content-center">Date Picker</legend>
+      <div class="grid-container">
+        <!-- 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 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">
+          <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>
+          <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">
+          <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">
+          <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>
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <input type="radio" name="day-of-month" id="thirtyone" />
+          <label 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>
+        </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>
+        </div>
+      </div>
+    </fieldset>
+  </div>
+  <form class="w-100 d-flex justify-content-center mt-5">
+    <input type="date">
+  </form>
+</template>
+
+<script>
+export default {
+  name: "datePicker",
+  data() {
+    return {
+      dayOfWeek: "Tuesday",
+      dayOfMonth: "1st",
+      pastMonth: "October",
+      isFirstDayOfMonth: true,
+      isCurrentDay: true,
+      isCurrentDayDot: true,
+    };
+  },
+};
+</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;
+  display: grid;
+  grid-gap: 4px;
+  grid-template-columns: auto auto auto auto auto auto auto;
+  justify-content: center;
+  align-items: center;
+
+  .grid-item {
+    text-align: center;
+    padding: 4px;
+  }
+
+  .radio-wrapper {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    width: 46px;
+    height: 46px;
+
+    .current-day-dot {
+      position: absolute;
+
+    }
+
+    &.first-of-month {
+      .current-month {
+        position: absolute;
+        font-size: 9px;
+        top: 4px;
+        color: #1574a1;
+      }
+    }
+
+    &.highlighted-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: #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;
+      }
+    }
+  }
+
+}
+
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 4daa23613..b09df2a17 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -23,6 +23,7 @@ import { applicationConfig } from "../constants/application-config";
 
 // Components
 import quote from "@/layouts/quote/quote.vue";
+import datePicker from "@/common-components/date-picker/date-picker.vue";
 
 const routes = [
   {
@@ -30,6 +31,11 @@ const routes = [
     name: "quote",
     component: quote,
   },
+  {
+    path: "/date-picker", // This is a temporary route for testing.
+    name: "date-picker",
+    component: datePicker,
+  },
   {
     path: "/",
     name: "root",