feat(date-field,calendar): calendar tedi-ready #6

.storybook/preview-head.html

@@ -2,4 +2,10 @@
   .sbdocs.sbdocs-content {
     max-width: 1200px;
   }
+
+  body.sb-show-main,
+  body.sb-show-main #storybook-root {
+    height: auto !important;
+    min-height: 100vh !important;
+  }
 </style>

.storybook/preview.tsx

@@ -112,6 +112,12 @@ const preview: Preview = {
           description:
             "This component lacks some TEDI-Ready functionality, e.g it may rely on another component that has not yet been developed",
         },
+        deprecated: {
+          background: "#b00020",
+          color: "#fff",
+          description:
+            "This component is deprecated and will be removed in a future release. Migrate to its replacement.",
+        },
         mobileViewDifference: {
           background: "#99BDDA",
           color: "#000",

tedi/components/content/calendar/calendar-day-grid/calendar-day-grid.component.html

@@ -0,0 +1,76 @@
+<table
+  class="tedi-calendar-day-grid"
+  [class.tedi-calendar-day-grid--with-week-numbers]="showWeekNumbers()"
+  role="grid"
+  [attr.aria-label]="gridAriaLabel()"
+  [attr.aria-multiselectable]="multiselectable() ? 'true' : null"
+>
+  <thead>
+    <tr class="tedi-calendar-day-grid__header" role="row">
+      @if (showWeekNumbers()) {
+        <th
+          class="tedi-calendar-day-grid__week-number-header"
+          scope="col"
+          [attr.aria-label]="weekNumberHeaderLabel()"
+        ></th>
+      }
+      @for (name of weekdayNames(); track $index; let i = $index) {
+        <th
+          class="tedi-calendar-day-grid__weekday"
+          role="columnheader"
+          scope="col"
+          [attr.aria-label]="weekdayFullNames()[i]"
+        >
+          <span aria-hidden="true">{{ name }}</span>
+        </th>
+      }
+    </tr>
+  </thead>
+  <tbody>
+    @for (row of grid(); track rowKey(row, $index)) {
+      <tr class="tedi-calendar-day-grid__row" role="row">
+        @if (showWeekNumbers()) {
+          <td
+            class="tedi-calendar-day-grid__week-number"
+            role="rowheader"
+            scope="row"
+            [attr.aria-label]="weekNumberLabel(row)"
+          >
+            <span aria-hidden="true">{{ weekNumber(row) }}</span>
+          </td>
+        }
+        @for (day of row; track cellKey(day, $index)) {
+          <td class="tedi-calendar-day-grid__cell" role="gridcell">
+            @if (day) {
+              <button
+                type="button"
+                [class]="cellState(day)"
+                [attr.aria-selected]="isSelected(day) ? 'true' : null"
+                [attr.aria-disabled]="isDisabled(day) ? 'true' : null"
+                [attr.aria-label]="ariaLabelForDay(day)"
+                [attr.tabindex]="isFocusable(day) ? 0 : -1"
+                [attr.data-date-key]="day.getTime()"
+                (click)="handleClick(day)"
+                (mouseenter)="handleMouseEnter(day)"
+                (mouseleave)="handleMouseLeave()"
+                (focus)="handleFocus(day)"
+                (blur)="handleBlur($event)"
+              >
+                {{ day.getDate() }}
+                @let status = statusForDay(day);
+                @if (status) {
+                  <tedi-status-indicator
+                    class="tedi-calendar-day-grid__status"
+                    [type]="status.type"
+                    size="sm"
+                    [hasBorder]="true"
+                  />
+                }
+              </button>
+            }
+          </td>
+        }
+      </tr>
+    }
+  </tbody>
+</table>

tedi/components/content/calendar/calendar-day-grid/calendar-day-grid.component.scss

@@ -0,0 +1,191 @@
+.tedi-calendar-day-grid {
+  width: max-content;
+  border-spacing: 0;
+  border-collapse: collapse;
+
+  &__header {
+    display: grid;
+    grid-template-columns: repeat(7, var(--form-calendar-date-width));
+  }
+
+  &__weekday {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--form-calendar-date-width);
+    height: var(--form-calendar-date-width);
+    font-size: var(--body-small-regular-size);
+    font-weight: 400;
+    color: var(--general-text-tertiary);
+    text-align: center;
+    text-transform: uppercase;
+    border-bottom: var(--tedi-borders-01) solid var(--general-border-primary);
+  }
+
+  &__week-number-header {
+    display: flex;
+    width: var(--form-calendar-date-width);
+    height: var(--form-calendar-date-width);
+    border-bottom: var(--tedi-borders-01) solid var(--general-border-primary);
+  }
+
+  &__row {
+    display: grid;
+    grid-template-columns: repeat(7, var(--form-calendar-date-width));
+  }
+
+  &--with-week-numbers {
+
+    .tedi-calendar-day-grid__header,
+    .tedi-calendar-day-grid__row {
+      grid-template-columns: repeat(8, var(--form-calendar-date-width));
+    }
+  }
+
+  &__cell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+  }
+
+  &__week-number {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--form-calendar-date-width);
+    height: var(--form-calendar-date-width);
+    font-size: var(--body-small-regular-size);
+    color: var(--general-text-tertiary);
+    border-right: var(--tedi-borders-01) solid var(--general-border-primary);
+  }
+
+  &__day {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--form-calendar-date-width);
+    height: var(--form-calendar-date-width);
+    font-size: var(--body-regular-size);
+    color: var(--general-text-primary);
+    cursor: pointer;
+    background: none;
+    border: none;
+    border-radius: var(--button-radius-sm);
+
+    &:hover {
+      background: var(--form-datepicker-date-hover);
+    }
+
+    &:active {
+      background: var(--form-datepicker-date-active);
+    }
+
+    &:focus-visible {
+      z-index: 1;
+      outline: var(--tedi-borders-02) solid var(--tedi-primary-500);
+      outline-offset: var(--tedi-borders-01);
+    }
+
+    &--outside {
+      color: var(--form-datepicker-date-text-muted);
+
+      &:hover {
+        color: var(--general-text-primary);
+      }
+    }
+
+    &--today::before {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      content: "";
+      border: var(--tedi-borders-01) solid var(--form-datepicker-today-border);
+      border-radius: 50%;
+    }
+
+    &--available-day {
+      color: var(--form-datepicker-date-text-available);
+      background: var(--form-datepicker-date-available);
+
+      &:hover {
+        color: var(--general-text-primary);
+        background: var(--form-datepicker-date-hover);
+      }
+    }
+
+    &--selected {
+      color: var(--form-datepicker-date-text-selected);
+      background: var(--form-datepicker-date-selected);
+
+      &:hover {
+        color: var(--form-datepicker-date-text-selected);
+        background: var(--form-datepicker-date-selected-hover);
+      }
+
+      &.tedi-calendar-day-grid__day--today::before {
+        border-color: var(--form-datepicker-today-border-secondary);
+      }
+    }
+
+    &--range-start,
+    &--range-end {
+      color: var(--form-datepicker-date-text-selected);
+      background: var(--form-datepicker-date-selected);
+    }
+
+    &--range-start {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &--range-end {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    &--range-middle,
+    &--range-preview-middle {
+      color: var(--general-text-primary);
+      background: var(--form-datepicker-date-active);
+      border-radius: 0;
+    }
+
+    &--range-preview-start,
+    &--range-preview-end {
+      color: var(--general-text-primary);
+      background: var(--form-datepicker-date-active);
+    }
+
+    &--range-preview-start {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &--range-preview-end {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    &--unavailable-day {
+      color: var(--general-text-primary);
+      text-decoration: line-through;
+      opacity: 0.3;
+    }
+
+    &--disabled,
+    &[aria-disabled="true"] {
+      pointer-events: none;
+      cursor: not-allowed;
+      opacity: 0.3;
+    }
+  }
+
+  &__status {
+    position: absolute;
+    top: var(--tedi-borders-02);
+    right: 0;
+    pointer-events: none;
+  }
+}