Implemented code review suggestions, added props for user-facing stri…

…ngs, removed css variable usage, and updated calendar computed properties
learningequality · Dec 8, 2022 · 7ed8ba8 · 7ed8ba8
1 parent f3d3637
commit 7ed8ba8
Show file tree

Hide file tree

Showing 6 changed files with 131 additions and 79 deletions.
diff --git a/docs/pages/kdaterange.vue b/docs/pages/kdaterange.vue
@@ -3,8 +3,8 @@
   <DocsPageTemplate apiDocs>
 
     <DocsPageSection title="Overview" anchor="#overview">
-      The KDateRange is a modal component that implements two KDateInput components 
-      and a KDateCalendar for a start and end date selection.
+      The KDateRange is a modal component that contains two input components and a calendar component that 
+      allow for a start and end date selection. 
       <div>
         <KButton text="open demo" :primary="true" appearance="flat-button" :style="{ marginTop: '5px' }" @click="modalShown = true" />
         <ClientOnly>
@@ -13,14 +13,15 @@
             class="demo"
             :firstAllowedDate="firstAllowedDate"
             :lastAllowedDate="lastAllowedDate"
-            :defaultStartDate="defaultStartDate"
             submitText="Generate"
             cancelText="Cancel"
             title="Select a date range"
-            description="The default start date is the last time you exported this log"
+            description="(Optional) Description of modal component"
             dateLocale="en-US"
             startDateLegendText="Start Date"
             endDateLegendText="End Date"
+            previousMonthText="Previous Month"
+            nextMonthText="Next Month"
             v-bind="errorMessages"
             @submit="modalShown = false"
             @cancel="modalShown = false"
@@ -45,7 +46,6 @@
     },
     data() {
       return {
-        defaultStartDate: new Date(2022, 8, 1),
         firstAllowedDate: new Date(2022, 0, 1),
         lastAllowedDate: new Date(),
         modalShown: false,

diff --git a/lib/KDateRange/KDateCalendar.vue b/lib/KDateRange/KDateCalendar.vue
@@ -3,17 +3,17 @@
   <div class="calendar">
     <div class="calendar-wrap">
       <KIconButton
-        aria-label="Previous Month"
-        tooltip="Previous Month"
+        :aria-label="previousMonthText"
+        :tooltip="previousMonthText"
         icon="chevronLeft"
         appearance="flat-button"
         class="left"
         size="mini"
         @click="goPrevMonth"
       />
       <KIconButton
-        aria-label="Next Month"
-        tooltip="Next Month"
+        :aria-label="nextMonthText"
+        :tooltip="nextMonthText"
         icon="chevronRight"
         appearance="flat-button"
         class="right"
@@ -28,10 +28,15 @@
           <li
             v-for="dayInWeekIndex in numOfDays"
             :key="dayInWeekIndex"
-            :style="buttonStyles"
-            :class="[{ 'calendar-days--disabled': isDateDisabled(weekIndex, dayInWeekIndex, activeMonthDay, activeMonthDate) || isDateDisabledLeft(weekIndex, dayInWeekIndex, activeMonthDay),
-                       'selected-first': ( selectionOrder(weekIndex, dayInWeekIndex, 'first', activeMonthDay, activeMonthDate) === 'first'),
-                       'selected-second': ( selectionOrder(weekIndex, dayInWeekIndex, 'first', activeMonthDay, activeMonthDate) === 'second')
+            :style="[
+              (selectionOrder(weekIndex, dayInWeekIndex, 'first', activeMonthDay, activeMonthDate) === 'first') ||
+                (selectionOrder(weekIndex, dayInWeekIndex, 'first', activeMonthDay, activeMonthDate) === 'second') ?
+                  { backgroundColor: $themeBrand.secondary.v_50 } : {}
+            ]"
+            :class="[{
+              'calendar-days--disabled': isDateDisabled(weekIndex, dayInWeekIndex, activeMonthDay, activeMonthDate) || isDateDisabledLeft(weekIndex, dayInWeekIndex, activeMonthDay),
+              'selected-first': ( selectionOrder(weekIndex, dayInWeekIndex, 'first', activeMonthDay, activeMonthDate) === 'first'),
+              'selected-second': ( selectionOrder(weekIndex, dayInWeekIndex, 'first', activeMonthDay, activeMonthDate) === 'second')
             }]"
             @click="selectFirstItem(weekIndex, dayInWeekIndex)"
           >
@@ -57,7 +62,11 @@
           <li
             v-for="dayInWeekIndex in numOfDays"
             :key="dayInWeekIndex"
-            :style="buttonStyles"
+            :style="[
+              (selectionOrder(weekIndex, dayInWeekIndex, 'second', nextActiveMonthDay, nextActiveMonthDate) === 'first') ||
+                (selectionOrder(weekIndex, dayInWeekIndex, 'second', nextActiveMonthDay, nextActiveMonthDate) === 'second') ?
+                  { backgroundColor: $themeBrand.secondary.v_50 } : {}
+            ]"
             :class="[{
               'calendar-days--disabled': isDateDisabled(weekIndex, dayInWeekIndex, nextActiveMonthDay, nextActiveMonthDate) || isDateDisabledRight(weekIndex, dayInWeekIndex, nextActiveMonthDay),
               'selected-first': (selectionOrder(weekIndex, dayInWeekIndex, 'second', nextActiveMonthDay, nextActiveMonthDate) === 'first'),
@@ -133,6 +142,20 @@
         type: String,
         required: true,
       },
+      /**
+       *  label for previous month button
+       */
+      previousMonthText: {
+        type: String,
+        required: true,
+      },
+      /**
+       *  label for next month button
+       */
+      nextMonthText: {
+        type: String,
+        required: true,
+      },
     },
     data() {
       return {
@@ -145,7 +168,6 @@
         isFirstChoice: this.selectedStartDate ? true : false,
         activeMonth: new Date().getMonth() - 1,
         activeYearStart: new Date().getFullYear(),
-        activeYearEnd: new Date().getFullYear(),
       };
     },
     computed: {
@@ -179,16 +201,11 @@
       nextActiveMonth() {
         return this.activeMonth >= 11 ? 0 : this.activeMonth + 1;
       },
-      buttonStyles() {
-        return {
-          '--selected-button-bg-color': this.$themeBrand.secondary.v_50,
-          '--disabled-button-color': this.$themePalette.grey.v_300,
-        };
-      },
-    },
-    watch: {
-      nextActiveMonth(value) {
-        if (value === 0) this.activeYearEnd = this.activeYearStart + 1;
+      activeYearEnd() {
+        if (this.nextActiveMonth === 0) {
+          return this.activeYearStart + 1;
+        }
+        return this.activeYearStart;
       },
     },
     created() {
@@ -214,19 +231,18 @@
        * update end and start date of dateRange Object
        */
       getNewDateRange(result, activeMonth, activeYear) {
+        const resultDate = new Date(activeYear, activeMonth, result);
+        if (!this.isFirstChoice && resultDate < this.dateRange.start) {
+          this.isFirstChoice = false;
+          return { start: resultDate };
+        }
         const newData = {};
         let key = 'start';
         if (!this.isFirstChoice) {
           key = 'end';
         } else {
-          newData['end'] = null;
-        }
-        const resultDate = new Date(activeYear, activeMonth, result);
-        if (!this.isFirstChoice && resultDate < this.dateRange.start) {
-          this.isFirstChoice = false;
-          return { start: resultDate };
+          newData.end = null;
         }
-
         // toggle first choice
         this.isFirstChoice = !this.isFirstChoice;
         newData[key] = resultDate;
@@ -341,36 +357,30 @@
           nextActiveMonthDay,
           nextActiveMonthDate
         );
-        let lastDay = null;
-        if (key === 'first') {
-          lastDay = new Date(this.activeYearStart, this.activeMonth + 1, 0).getDate();
-        } else {
-          lastDay = new Date(this.activeYearEnd, this.nextActiveMonth + 1, 0).getDate();
-        }
+        const lastDay =
+          key === 'first'
+            ? new Date(this.activeYearStart, this.activeMonth + 1, 0).getDate()
+            : new Date(this.activeYearEnd, this.nextActiveMonth + 1, 0).getDate();
         return result === lastDay;
       },
       goPrevMonth() {
         const prevMonth = new Date(this.activeYearStart, this.activeMonth, 0);
         this.activeMonth = prevMonth.getMonth();
         this.activeYearStart = prevMonth.getFullYear();
-        this.activeYearEnd = prevMonth.getFullYear();
       },
       goNextMonth() {
         const nextMonth = new Date(this.activeYearEnd, this.nextActiveMonth, 2);
         this.activeMonth = nextMonth.getMonth();
         this.activeYearStart = nextMonth.getFullYear();
-        this.activeYearEnd = nextMonth.getFullYear();
       },
       isValidDate(date) {
-        return new Date(date) !== 'Invalid Date' && !isNaN(new Date(date));
+        return !isNaN(new Date(date));
       },
       getDate(key, day) {
-        let currDate = null;
-        if (key === 'first') {
-          currDate = new Date(this.activeYearStart, this.activeMonth, day);
-        } else {
-          currDate = new Date(this.activeYearEnd, this.nextActiveMonth, day);
-        }
+        const currDate =
+          key === 'first'
+            ? new Date(this.activeYearStart, this.activeMonth, day)
+            : new Date(this.activeYearEnd, this.nextActiveMonth, day);
         return currDate;
       },
       /**
@@ -454,20 +464,17 @@
   }
 
   .calendar-days li.calendar-days--disabled {
-    color: var(--disabled-button-color);
     pointer-events: none;
     cursor: not-allowed;
     opacity: 0.3;
   }
 
   li.selected-first {
-    background-color: var(--selected-button-bg-color);
     border-top-left-radius: 95px;
     border-bottom-left-radius: 80px;
   }
 
   li.selected-second {
-    background-color: var(--selected-button-bg-color);
     border-top-right-radius: 60px;
     border-bottom-right-radius: 60px;
   }

diff --git a/lib/KDateRange/KDateDay.vue b/lib/KDateRange/KDateDay.vue
@@ -5,8 +5,9 @@
     :primary="false"
     appearance="flat-button"
     :appearanceOverrides="styleOverrides"
-    :style="buttonStyles"
+    :style="[inRangeStyle, selectedStyle]"
     :disabled="isDisabled"
+    :aria-hidden="isDisabled"
     :class="[{
       'calendar-days-selected': isSelected,
       'calendar-days-in-range': isInRange,
@@ -69,14 +70,23 @@
       return {};
     },
     computed: {
-      buttonStyles() {
-        return {
-          '--selected-button-bg-color': this.$themeBrand.secondary.v_600,
-          '--selected-button-text-color': this.$themePalette.white,
-          '--in-range-button-bg-color': this.$themeBrand.secondary.v_50,
-          '--in-range-button-text-color': this.$themePalette.grey.v_700,
-          '--in-range-button-hover-color': this.$themePalette.grey.v_200,
-        };
+      inRangeStyle() {
+        return this.isInRange
+          ? {
+              backgroundColor: this.$themeBrand.secondary.v_50,
+              ':hover': {
+                backgroundColor: this.$themePalette.grey.v_200,
+              },
+            }
+          : {};
+      },
+      selectedStyle() {
+        return this.isSelected
+          ? {
+              backgroundColor: this.$themeBrand.secondary.v_600,
+              color: this.$themePalette.white + '!important',
+            }
+          : {};
       },
       styleOverrides() {
         return {
@@ -110,19 +120,12 @@
 <style lang="css" scoped>
 
   button:hover,
+  button.calendar-days-selected,
   .calendar-days-in-range:hover {
-    background-color: var(--in-range-button-hover-color);
-    border-radius: 15px;
-  }
-
-  button.calendar-days-selected {
-    color: var(--selected-button-text-color) !important;
-    background-color: var(--selected-button-bg-color);
     border-radius: 15px;
   }
 
   .calendar-days-in-range {
-    background-color: var(--in-range-button-bg-color);
     border-radius: 0;
   }
 

diff --git a/lib/KDateRange/KDateInput.vue b/lib/KDateRange/KDateInput.vue
@@ -1,7 +1,7 @@
 <template>
 
   <div>
-    <fieldset :aria-labelledby="legendText" class="date-input-fieldset" aria-describedby="date-desc" aria-live="polite">
+    <fieldset :aria-label="legendText" class="date-input-fieldset" :aria-describedby="inputId" aria-live="polite">
       <KTextBox
         :ref="inputRef"
         :value="value"
@@ -15,7 +15,7 @@
       />  
       <input type="hidden" name="date" :value="valueAsDate" data-test="valueAsDate">
       <span class="k-date-vhidden">
-        <span v-if="valueAsDate" id="date-desc">
+        <span v-if="valueAsDate" :id="inputId">
           {{ dateDescription }}
         </span>
       </span>
@@ -28,6 +28,7 @@
 <script>
 
   import { startOfDay } from 'date-fns';
+  import { v4 as uuidv4 } from 'uuid';
   import KTextBox from '../KTextbox';
   import { DATE_FMT } from './validationConstants';
 
@@ -71,14 +72,22 @@
           isNaN(this.valueAsDate)
         ) {
           return ' ';
-        } else {
-          return this.valueAsDate.toLocaleDateString(this.dateLocale, {
+        }
+        return (
+          this.legendText +
+          ' ' +
+          this.valueAsDate.toLocaleDateString(this.dateLocale, {
             year: 'numeric',
             weekday: 'long',
             month: 'long',
             day: 'numeric',
-          });
-        }
+          })
+        );
+      },
+      inputId() {
+        return `DateDesc_${uuidv4()
+          .split('-')
+          .pop()}`;
       },
     },
     methods: {