jouw-stem__design-system 0.1.0

package/src/components/Calendar/Calendar.vue

@@ -0,0 +1,475 @@
+<template>
+  <div ref="containerRef" class="calendar" :class="additionalClasses">
+    <!-- Input trigger -->
+    <div v-if="!inline" class="calendar__input-wrapper" @click="togglePanel">
+      <input
+        ref="inputRef"
+        class="calendar__input"
+        type="text"
+        :value="displayValue"
+        :placeholder="placeholder"
+        :disabled="isDisabled"
+        :aria-invalid="isInvalid || undefined"
+        readonly
+        @focus="onInputFocus"
+        @blur="onInputBlur"
+      />
+      <span class="calendar__input-icon">
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <rect x="2" y="3" width="12" height="11" rx="2" stroke="currentColor" stroke-width="1.5" />
+          <path d="M2 6H14" stroke="currentColor" stroke-width="1.5" />
+          <path d="M5 1V3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+          <path d="M11 1V3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+        </svg>
+      </span>
+    </div>
+
+    <!-- Calendar panel -->
+    <Teleport :to="inline ? null : 'body'" :disabled="inline">
+      <div
+        v-if="inline || isPanelOpen"
+        ref="panelRef"
+        class="calendar__panel"
+        :class="{ 'calendar__panel--mode-inline': inline }"
+        :style="!inline ? panelStyle : {}"
+      >
+        <!-- Header with navigation -->
+        <div class="calendar__header">
+          <button
+            type="button"
+            class="calendar__nav calendar__nav--prev"
+            aria-label="Previous month"
+            @click="navigateMonth(-1)"
+          >
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+              <path d="M10 4L6 8L10 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+          </button>
+
+          <div class="calendar__title">
+            <button type="button" class="calendar__title-btn" @click="toggleView">
+              {{ monthNames[viewDate.getMonth()] }} {{ viewDate.getFullYear() }}
+            </button>
+          </div>
+
+          <button
+            type="button"
+            class="calendar__nav calendar__nav--next"
+            aria-label="Next month"
+            @click="navigateMonth(1)"
+          >
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+              <path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+          </button>
+        </div>
+
+        <!-- Day view -->
+        <div v-if="currentView === 'day'" class="calendar__body">
+          <div class="calendar__weekdays">
+            <span v-for="day in weekdayNames" :key="day" class="calendar__weekday">
+              {{ day }}
+            </span>
+          </div>
+          <div class="calendar__days">
+            <button
+              v-for="(day, index) in calendarDays"
+              :key="index"
+              type="button"
+              class="calendar__day"
+              :class="getDayClasses(day)"
+              :disabled="!day.currentMonth"
+              @click="selectDate(day)"
+            >
+              {{ day.day }}
+            </button>
+          </div>
+        </div>
+
+        <!-- Month view -->
+        <div v-else-if="currentView === 'month'" class="calendar__months">
+          <button
+            v-for="(month, index) in monthNames"
+            :key="index"
+            type="button"
+            class="calendar__month"
+            :class="{ 'calendar__month--state-selected': isCurrentMonth(index) }"
+            @click="selectMonth(index)"
+          >
+            {{ month.substring(0, 3) }}
+          </button>
+        </div>
+
+        <!-- Year view -->
+        <div v-else-if="currentView === 'year'" class="calendar__years">
+          <button
+            v-for="year in yearRange"
+            :key="year"
+            type="button"
+            class="calendar__year"
+            :class="{ 'calendar__year--state-selected': isCurrentYear(year) }"
+            @click="selectYear(year)"
+          >
+            {{ year }}
+          </button>
+        </div>
+
+        <!-- Footer with today button -->
+        <div v-if="showTodayButton" class="calendar__footer">
+          <button type="button" class="calendar__today-btn" @click="goToToday">
+            Today
+          </button>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style src="./Calendar.scss"></style>
+
+<script setup lang="ts">
+import { computed, ref, watch, onMounted, onUnmounted } from "vue";
+
+export type CalendarSelectionMode = "single" | "range";
+export type CalendarSize = "sm" | "md" | "lg";
+export type CalendarValue = Date | Date[] | null;
+
+interface Props {
+  modelValue?: CalendarValue;
+  placeholder?: string;
+  dateFormat?: string;
+  selectionMode?: CalendarSelectionMode;
+  minDate?: Date | null;
+  maxDate?: Date | null;
+  inline?: boolean;
+  showTodayButton?: boolean;
+  size?: CalendarSize;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  placeholder: "Select date",
+  dateFormat: "dd/mm/yyyy",
+  selectionMode: "single",
+  minDate: null,
+  maxDate: null,
+  inline: false,
+  showTodayButton: false,
+  size: "md",
+  isDisabled: false,
+  isInvalid: false,
+});
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: CalendarValue): void;
+  (e: "select", value: Date | Date[]): void;
+  (e: "show"): void;
+  (e: "hide"): void;
+}>();
+
+type CalendarView = "day" | "month" | "year";
+
+const containerRef = ref<HTMLElement | null>(null);
+const inputRef = ref<HTMLInputElement | null>(null);
+const panelRef = ref<HTMLElement | null>(null);
+const isPanelOpen = ref(false);
+const isFocused = ref(false);
+const viewDate = ref<Date>(new Date());
+const currentView = ref<CalendarView>("day");
+const panelStyle = ref<Record<string, string | number>>({});
+
+const monthNames = [
+  "January", "February", "March", "April", "May", "June",
+  "July", "August", "September", "October", "November", "December"
+];
+
+const weekdayNames = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+
+const today = new Date();
+today.setHours(0, 0, 0, 0);
+
+interface CalendarDay {
+  day: number;
+  date: Date;
+  currentMonth: boolean;
+}
+
+function formatDate(date: Date | null | undefined): string {
+  if (!date) return "";
+  const d = new Date(date);
+  const day = String(d.getDate()).padStart(2, "0");
+  const month = String(d.getMonth() + 1).padStart(2, "0");
+  const year = d.getFullYear();
+
+  return props.dateFormat
+    .replace("dd", day)
+    .replace("mm", month)
+    .replace("yyyy", String(year));
+}
+
+const displayValue = computed(() => {
+  if (!props.modelValue) return "";
+  if (props.selectionMode === "range" && Array.isArray(props.modelValue)) {
+    const [start, end] = props.modelValue;
+    if (start && end) return `${formatDate(start)} - ${formatDate(end)}`;
+    if (start) return formatDate(start);
+    return "";
+  }
+  return formatDate(props.modelValue as Date);
+});
+
+const calendarDays = computed<CalendarDay[]>(() => {
+  const year = viewDate.value.getFullYear();
+  const month = viewDate.value.getMonth();
+
+  const firstDay = new Date(year, month, 1);
+  const lastDay = new Date(year, month + 1, 0);
+  const startOffset = firstDay.getDay();
+
+  const days: CalendarDay[] = [];
+
+  // Previous month days
+  const prevMonth = new Date(year, month, 0);
+  for (let i = startOffset - 1; i >= 0; i--) {
+    days.push({
+      day: prevMonth.getDate() - i,
+      date: new Date(year, month - 1, prevMonth.getDate() - i),
+      currentMonth: false,
+    });
+  }
+
+  // Current month days
+  for (let i = 1; i <= lastDay.getDate(); i++) {
+    days.push({
+      day: i,
+      date: new Date(year, month, i),
+      currentMonth: true,
+    });
+  }
+
+  // Next month days
+  const remaining = 42 - days.length;
+  for (let i = 1; i <= remaining; i++) {
+    days.push({
+      day: i,
+      date: new Date(year, month + 1, i),
+      currentMonth: false,
+    });
+  }
+
+  return days;
+});
+
+const yearRange = computed<number[]>(() => {
+  const currentYear = viewDate.value.getFullYear();
+  const startYear = currentYear - 6;
+  const years: number[] = [];
+  for (let i = 0; i < 12; i++) {
+    years.push(startYear + i);
+  }
+  return years;
+});
+
+function isSameDay(date1: Date | null | undefined, date2: Date | null | undefined): boolean {
+  if (!date1 || !date2) return false;
+  return (
+    date1.getDate() === date2.getDate() &&
+    date1.getMonth() === date2.getMonth() &&
+    date1.getFullYear() === date2.getFullYear()
+  );
+}
+
+function isDateInRange(date: Date): boolean {
+  if (props.selectionMode !== "range" || !Array.isArray(props.modelValue)) return false;
+  const [start, end] = props.modelValue;
+  if (!start || !end) return false;
+  return date > start && date < end;
+}
+
+function isSelected(date: Date): boolean {
+  if (!props.modelValue) return false;
+  if (props.selectionMode === "range" && Array.isArray(props.modelValue)) {
+    return props.modelValue.some((d) => d && isSameDay(d, date));
+  }
+  return isSameDay(props.modelValue as Date, date);
+}
+
+function getDayClasses(day: CalendarDay): Record<string, boolean> {
+  return {
+    "calendar__day--other-month": !day.currentMonth,
+    "calendar__day--today": isSameDay(day.date, today),
+    "calendar__day--state-selected": isSelected(day.date),
+    "calendar__day--in-range": isDateInRange(day.date),
+  };
+}
+
+function isCurrentMonth(monthIndex: number): boolean {
+  const selected = props.modelValue instanceof Date ? props.modelValue : null;
+  return Boolean(
+    selected &&
+      selected.getMonth() === monthIndex &&
+      selected.getFullYear() === viewDate.value.getFullYear()
+  );
+}
+
+function isCurrentYear(year: number): boolean {
+  const selected = props.modelValue instanceof Date ? props.modelValue : null;
+  return Boolean(selected && selected.getFullYear() === year);
+}
+
+function updatePanelPosition() {
+  if (!containerRef.value || props.inline) return;
+  const rect = containerRef.value.getBoundingClientRect();
+  panelStyle.value = {
+    position: "fixed",
+    top: `${rect.bottom + 4}px`,
+    left: `${rect.left}px`,
+    zIndex: 1000,
+  };
+}
+
+function togglePanel() {
+  if (props.isDisabled) return;
+  if (isPanelOpen.value) {
+    closePanel();
+  } else {
+    openPanel();
+  }
+}
+
+function openPanel() {
+  isPanelOpen.value = true;
+  currentView.value = "day";
+  if (props.modelValue instanceof Date) {
+    viewDate.value = new Date(props.modelValue);
+  }
+  updatePanelPosition();
+  emit("show");
+}
+
+function closePanel() {
+  isPanelOpen.value = false;
+  emit("hide");
+}
+
+function toggleView() {
+  if (currentView.value === "day") {
+    currentView.value = "month";
+  } else if (currentView.value === "month") {
+    currentView.value = "year";
+  } else {
+    currentView.value = "day";
+  }
+}
+
+function navigateMonth(offset: number) {
+  const newDate = new Date(viewDate.value);
+  newDate.setMonth(newDate.getMonth() + offset);
+  viewDate.value = newDate;
+}
+
+function selectDate(day: CalendarDay) {
+  if (!day.currentMonth) return;
+
+  if (props.selectionMode === "range") {
+    const current = Array.isArray(props.modelValue)
+      ? [...props.modelValue]
+      : [null, null];
+    if (!current[0] || (current[0] && current[1])) {
+      emit("update:modelValue", [day.date]);
+    } else {
+      const start = current[0] as Date;
+      if (day.date < start) {
+        emit("update:modelValue", [day.date, start]);
+      } else {
+        emit("update:modelValue", [start, day.date]);
+      }
+      if (!props.inline) closePanel();
+    }
+  } else {
+    emit("update:modelValue", day.date);
+    emit("select", day.date);
+    if (!props.inline) closePanel();
+  }
+}
+
+function selectMonth(monthIndex: number) {
+  const newDate = new Date(viewDate.value);
+  newDate.setMonth(monthIndex);
+  viewDate.value = newDate;
+  currentView.value = "day";
+}
+
+function selectYear(year: number) {
+  const newDate = new Date(viewDate.value);
+  newDate.setFullYear(year);
+  viewDate.value = newDate;
+  currentView.value = "month";
+}
+
+function goToToday() {
+  viewDate.value = new Date();
+  if (props.selectionMode === "single") {
+    selectDate({ day: new Date().getDate(), date: new Date(), currentMonth: true });
+  }
+}
+
+function onInputFocus() {
+  isFocused.value = true;
+}
+
+function onInputBlur() {
+  isFocused.value = false;
+}
+
+function handleClickOutside(event: MouseEvent) {
+  if (!containerRef.value || !panelRef.value) return;
+  const target = event.target as Node;
+  if (!containerRef.value.contains(target) && !panelRef.value.contains(target)) {
+    closePanel();
+  }
+}
+
+function handleScroll() {
+  if (isPanelOpen.value && !props.inline) {
+    updatePanelPosition();
+  }
+}
+
+onMounted(() => {
+  document.addEventListener("mousedown", handleClickOutside);
+  window.addEventListener("scroll", handleScroll, true);
+  window.addEventListener("resize", handleScroll);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("mousedown", handleClickOutside);
+  window.removeEventListener("scroll", handleScroll, true);
+  window.removeEventListener("resize", handleScroll);
+});
+
+const additionalClasses = computed(() =>
+  [
+    `calendar--size-${props.size}`,
+    props.inline && "calendar--mode-inline",
+    isFocused.value && "calendar--state-focused",
+    props.isDisabled && "calendar--state-disabled",
+    props.isInvalid && "calendar--state-invalid",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+
+defineExpose({
+  show: openPanel,
+  hide: closePanel,
+});
+</script>

package/src/components/Card/Card.matrix.ts

@@ -0,0 +1,22 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.card',
+  defaultSlot:
+    'Card content goes here. Plain text body to verify the surface against canvas and the text against the surface.',
+  // Card has one prop (variant) and many slots. The matrix exercises
+  // the two variants with default slot content filling the body — that
+  // covers the surface + text contrast pair the a11y checks care about.
+  // Header / title / subtitle / footer slots aren't represented; they're
+  // tested via the manual docs page.
+  primaryAxis: 'Variant',
+  variants: [
+    {
+      name: 'Variant',
+      subvariants: [
+        { name: 'default',     query: {} },
+        { name: 'highlighted', query: { variant: 'highlighted' } }
+      ]
+    }
+  ]
+}

package/src/components/Card/Card.scss

@@ -0,0 +1,62 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: card;
+
+.#{$c} {
+  background-color: var(--card-background, $card-background);
+  border: var(--card-border-width, $card-border-width) solid var(--card-border-color, $card-border-color);
+  border-radius: var(--card-radius, $card-radius);
+  box-shadow: var(--card-shadow, $card-shadow);
+  overflow: hidden;
+}
+
+// Highlighted variant with vibrant gradient border and glow
+.#{$c}--highlighted {
+  position: relative;
+  border: none;
+  background: linear-gradient(var(--card-background, $card-background), var(--card-background, $card-background)) padding-box,
+              linear-gradient(135deg, var(--card-highlighted-border-start, $card-highlighted-border-start), var(--card-highlighted-border-end, $card-highlighted-border-end)) border-box;
+  border: var(--card-highlighted-border-width, $card-highlighted-border-width) solid transparent;
+  box-shadow: var(--card-highlighted-glow, $card-highlighted-glow);
+}
+
+.#{$c}__header {
+  padding: var(--card-header-padding, $card-header-padding);
+  border-bottom: var(--card-header-borderWidth, $card-header-borderWidth) solid var(--card-header-borderColor, $card-header-borderColor);
+}
+
+.#{$c}__body {
+  padding: var(--card-body-padding, $card-body-padding);
+  display: flex;
+  flex-direction: column;
+  gap: var(--card-body-gap, $card-body-gap);
+}
+
+.#{$c}__caption {
+  display: flex;
+  flex-direction: column;
+}
+
+.#{$c}__title {
+  color: var(--card-title-color, $card-title-color);
+  font-size: var(--card-title-fontSize, $card-title-fontSize);
+  font-weight: var(--card-title-fontWeight, $card-title-fontWeight);
+  line-height: var(--card-title-lineHeight, $card-title-lineHeight);
+  margin: 0;
+}
+
+.#{$c}__subtitle {
+  color: var(--card-subtitle-color, $card-subtitle-color);
+  font-size: var(--card-subtitle-fontSize, $card-subtitle-fontSize);
+  font-weight: var(--card-subtitle-fontWeight, $card-subtitle-fontWeight);
+  margin-top: var(--card-subtitle-marginTop, $card-subtitle-marginTop);
+}
+
+.#{$c}__content {
+  color: var(--card-content-color, $card-content-color);
+}
+
+.#{$c}__footer {
+  padding: var(--card-footer-padding, $card-footer-padding);
+  border-top: var(--card-footer-borderWidth, $card-footer-borderWidth) solid var(--card-footer-borderColor, $card-footer-borderColor);
+}