feat(styles): make new calendar match figma

AlaskaAirlines · May 16, 2023 · 681b746 · 681b746
1 parent 2a61b1b
commit 681b746
Show file tree

Hide file tree

Showing 5 changed files with 158 additions and 286 deletions.
diff --git a/src/auro-calendar-cell.js b/src/auro-calendar-cell.js
@@ -106,7 +106,7 @@ export class AuroCalendarCell extends LitElement {
   }
 
   isHovered(hovered) {
-    return hovered ? 'hovered' : '';
+    return hovered ? 'inRange' : '';
   }
 
   isEnabled(day, min, max, disabledDays) {
@@ -149,7 +149,8 @@ export class AuroCalendarCell extends LitElement {
       @focus="${this.handleHover}"
       class="day ${this.isCurrentDate ? 'currentDate' : ''} ${this.isSelected(this.selected)} ${this.isHovered(this.hovered)} ${this.isEnabled(this.day, this.min, this.max, this.disabledDays)}"
       ?disabled="${this.disabled}"
-      title="${this.getTitle((_a = this.day) === null || _a === void 0 ? void 0 : _a.date)}">
+      title="${this.getTitle((_a = this.day) === null || _a === void 0 ? void 0 : _a.date)}"
+      tabindex="-1">
       <div class="currentDayMarker">${(_b = this.day) === null || _b === void 0 ? void 0 : _b.title}</div>
     </button>
   `;

diff --git a/src/auro-calendar-month.js b/src/auro-calendar-month.js
@@ -41,6 +41,22 @@ export class AuroCalendarMonth extends RangeDatepickerCalendar {
     await this.updateComplete;
   }
 
+  localeChanged() {
+    const dayNamesOfTheWeek = [];
+    for (let i = 0; i < 7; i += 1) {
+        dayNamesOfTheWeek.push(this.locale.localize.day(i, { width: 'narrow' }));
+    }
+    const firstDayOfWeek = this.locale.options.weekStartsOn
+        ? this.locale.options.weekStartsOn
+        : 0;
+    const tmp = dayNamesOfTheWeek.slice().splice(0, firstDayOfWeek);
+    const newDayNamesOfTheWeek = dayNamesOfTheWeek
+        .slice()
+        .splice(firstDayOfWeek, dayNamesOfTheWeek.length)
+        .concat(tmp);
+    this.dayNamesOfTheWeek = newDayNamesOfTheWeek;
+  }
+
   renderDay(day) {
     return html `
       <div class="td ${this.tdIsEnabled(day)}">
@@ -69,17 +85,25 @@ export class AuroCalendarMonth extends RangeDatepickerCalendar {
 
   renderPrevButton() {
     if (this.prev || this.narrow || this.enableYearChange) {
-      return html`<auro-icon category="interface" name="chevron-left" @click="${this.handlePrevMonth}"></auro-icon>`
+      return html`
+        <div class="calendarNavBtn prevMonth" @click="${this.handlePrevMonth}">
+          <auro-icon category="interface" name="chevron-left"></auro-icon>
+        </div>
+      `
     }
     return null;
   }
 
   renderNextButton() {
     if (this.next || this.narrow || this.enableYearChange) {
-      return html`<auro-icon category="interface" name="chevron-right" @click="${this.handleNextMonth}"></auro-icon>`
+      return html`
+        <div class="calendarNavBtn nextMonth" @click="${this.handleNextMonth}">
+          <auro-icon category="interface" name="chevron-right"></auro-icon>
+        </div>
+      `
     }
     return null;
-  } 
+  }
 
   updated(changedProperties) {
     if (changedProperties.has('year') || changedProperties.has('month')) {

diff --git a/src/auro-calendar.js b/src/auro-calendar.js
@@ -94,10 +94,11 @@ export class AuroCalendar extends RangeDatepicker {
    * @private
    * @returns {Object} Returns single calendar month HTML.
    */
+
+   // min and max date seem off here?
   renderCalendar(month, year, prev, next) {
     return html `
       <auro-calendar-month
-        id="firstDatePicker"
         .disabledDays="${this.disabledDays}"
         min="${this.min}"
         max="${this.max}"

diff --git a/src/style-auro-calendar-cell.scss b/src/style-auro-calendar-cell.scss
@@ -1,65 +1,69 @@
-:host {
-  display: block;
-}
-
 .day {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  height: 38px;
-  width: 38px;
-  margin: 0;
-  padding: 0;
-  color: var(--wc-datepicker-cell-text);
+  position: relative;
+  width: var(--auro-size-xxl);
+  height: var(--auro-size-xxxl);
 
-  border: none;
-  outline: none;
-  background-color: transparent;
-}
+  border-width: 1px;
+  border-style: solid;
+  border-color: transparent;
+  border-radius: var(--auro-size-lg);
 
-.day:focus {
-  outline: 1px solid
-    var(--wc-datepicker-cell-hovered, rgba(0, 150, 136, 0.5));
-}
+  // background-color: var(--auro-color-background-lightest);
+  background-color: transparent;
+  color: var(--auro-color-text-primary-on-light);
 
-.day:not(.disabled):hover {
-  background: var(--wc-datepicker-cell-hover, #e4e7e7);
   cursor: pointer;
-}
 
-.day.hovered {
-  background: var(
-    --wc-datepicker-cell-hovered,
-    rgba(0, 150, 136, 0.5)
-  ) !important;
-  color: var(--wc-datepicker-cell-hovered-text, white);
-}
+  font-family: var(--auro-font-family-default);
+  font-size: var(--auro-text-body-size-lg);
 
-.day.selected {
-  background: var(
-    --wc-datepicker-cell-selected,
-    rgb(0, 150, 136)
-  ) !important;
-  color: var(--wc-datepicker-cell-selected-text, white);
-}
+  &.disabled {
+    color: var(--auro-color-text-secondary-on-dark);
 
-.day.currentDate .currentDayMarker {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
+    pointer-events: none;
+  }
 
-  width: 80%;
-  height: 80%;
-  font-weight: var(--wc-current-day-font-weight, bold);
-  border-radius: 50%;
-  background-color: var(--wc-current-day-color);
-  color: var(--wc-current-day-color-text);
-}
+  &.selected {
+    border-color: var(--auro-color-background-darker);
+
+    background-color: var(--auro-color-background-darker);
+    box-shadow: 0 0 10px rgba(0, 0, 0, .15);
+    color: var(--auro-color-background-lightest);
+  }
+
+  &.inRange {
+    &:before {
+      position: absolute;
+      content: '';
+      display: block;
+      background-color: var(--auro-color-background-lighter);
+      height: 48px;
+      width: 48px;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      z-index: -1;
+    }
+  }
+
+  &:hover {
+    cursor: pointer;
+    background-color: #f0f0f0; // var(--auro-color-ui-bkg-hover-on-light);
+    color: var(--auro-color-text-primary-on-light);
 
-.day.disabled {
-  opacity: 0.4;
+    // &.inRange {
+    //   &:before {
+    //     position: absolute;
+    //     content: '';
+    //     display: block;
+    //     background-color: var(--auro-color-background-lighter);
+    //     height: 48px;
+    //     width: 29px;
+    //     top: 50%;
+    //     left: -5px;
+    //     transform: translate(0%, -50%);
+    //     z-index: -1;
+    //   }
+    // }
+  }
 }