@robr0/design-system 0.6.0 → 0.8.0

package/components/EventCalendar/EventCalendar.css

@@ -0,0 +1,328 @@
+/* ============================================
+   EVENT CALENDAR COMPONENT
+   Month-at-a-glance grid with event pills.
+   Rows share the height of the fullest day in
+   their week (grid-auto-rows), so the calendar
+   grows with its content instead of fixing a
+   cell height.
+
+   Event accents use the core accent roles —
+   never the action teal, which stays reserved
+   for actions.
+   ============================================ */
+
+.ds-event-calendar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+  width: 100%;
+  background-color: var(--color-bg-container-primary);
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-md);
+  padding: var(--padding-md);
+}
+
+/* ============================================
+   HEADER
+   ============================================ */
+
+.ds-event-calendar__header {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+}
+
+.ds-event-calendar__month {
+  flex: 1 1 auto;
+  min-width: 0;
+  color: var(--color-text-primary);
+  font-family: var(--font-title-body-family);
+  font-size: var(--font-title-body-size);
+  font-weight: var(--font-title-body-weight);
+  line-height: var(--font-title-body-line-height);
+  letter-spacing: var(--font-title-body-letter-spacing);
+}
+
+.ds-event-calendar__nav {
+  display: flex;
+  gap: var(--gap-xxs);
+}
+
+.ds-event-calendar__nav-btn {
+  --icon-size: var(--icon-size-sm);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--padding-xxs);
+  background-color: var(--color-action-passive-bg);
+  border: none;
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  color: var(--color-icon-primary);
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-event-calendar__nav-btn:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-event-calendar__nav-btn:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+.ds-event-calendar__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+}
+
+/* ============================================
+   WEEKDAY ROW
+   ============================================ */
+
+.ds-event-calendar__weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: var(--gap-xxs);
+}
+
+.ds-event-calendar__weekday {
+  padding: var(--padding-xxs) var(--padding-xs);
+  color: var(--color-text-tertiary);
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+}
+
+/* ============================================
+   GRID
+   ============================================ */
+
+.ds-event-calendar__grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-auto-rows: 1fr;
+  gap: var(--gap-xxs);
+}
+
+.ds-event-calendar__cell {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xxs);
+  min-width: 0;
+  padding: var(--padding-xxs);
+  background-color: var(--color-bg-container-secondary);
+  border-radius: var(--radius-sm);
+}
+
+.ds-event-calendar__cell--outside {
+  background-color: var(--color-bg-container-primary-transparent);
+}
+
+.ds-event-calendar__cell--outside .ds-event-calendar__day {
+  color: var(--color-text-tertiary);
+}
+
+/* ============================================
+   DAY NUMBER
+   ============================================ */
+
+.ds-event-calendar__day {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  align-self: flex-start;
+  min-width: var(--icon-size-md);
+  height: var(--icon-size-md);
+  padding: 0 var(--padding-xxs);
+  background: none;
+  border: none;
+  border-radius: var(--radius-full);
+  color: var(--color-text-secondary);
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  font-variant-numeric: tabular-nums;
+}
+
+button.ds-event-calendar__day {
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+button.ds-event-calendar__day:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+button.ds-event-calendar__day:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+/* Today — inverse chip on the day number, like DatePicker's today ring
+   but filled so it reads at calendar density */
+.ds-event-calendar__cell--today .ds-event-calendar__day {
+  background-color: var(--color-bg-page-inverse);
+  color: var(--color-text-on-inverse);
+  font-family: var(--font-paragraph-sm-em-family);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+}
+
+/* ============================================
+   EVENT PILLS
+   ============================================ */
+
+.ds-event-calendar__events {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xxs);
+  min-width: 0;
+}
+
+.ds-event-calendar__event {
+  --ds-event-accent: var(--color-status-neutral-border);
+
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xxs);
+  min-width: 0;
+  padding: var(--padding-xxxs) var(--padding-xs);
+  background-color: var(--color-bg-container-primary);
+  border: none;
+  border-radius: var(--radius-xs);
+  text-align: left;
+}
+
+button.ds-event-calendar__event {
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+button.ds-event-calendar__event:hover {
+  background-color: var(--color-bg-container-tertiary);
+}
+
+button.ds-event-calendar__event:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}
+
+.ds-event-calendar__event-dot {
+  flex: none;
+  width: var(--gap-xs);
+  height: var(--gap-xs);
+  border-radius: var(--radius-full);
+  background-color: var(--ds-event-accent);
+}
+
+.ds-event-calendar__event-title {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text-primary);
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+}
+
+.ds-event-calendar__event-time {
+  flex: none;
+  color: var(--color-text-tertiary);
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ============================================
+   EVENT ACCENTS — core accent roles only
+   ============================================ */
+
+.ds-event-calendar__event--coral {
+  --ds-event-accent: var(--color-core-accent-coral);
+}
+
+.ds-event-calendar__event--violet {
+  --ds-event-accent: var(--color-core-accent-violet);
+}
+
+.ds-event-calendar__event--cobalt {
+  --ds-event-accent: var(--color-core-accent-cobalt);
+}
+
+.ds-event-calendar__event--amber {
+  --ds-event-accent: var(--color-core-accent-amber);
+}
+
+.ds-event-calendar__event--gold {
+  --ds-event-accent: var(--color-core-accent-gold);
+}
+
+.ds-event-calendar__event--mint {
+  --ds-event-accent: var(--color-core-accent-mint);
+}
+
+/* ============================================
+   OVERFLOW
+   ============================================ */
+
+.ds-event-calendar__more {
+  align-self: flex-start;
+  padding: var(--padding-xxxs) var(--padding-xs);
+  background: none;
+  border: none;
+  color: var(--color-text-tertiary);
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+}
+
+button.ds-event-calendar__more {
+  cursor: pointer;
+  border-radius: var(--radius-xs);
+  transition:
+    background-color var(--motion-duration-fast) var(--motion-ease-standard),
+    color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+button.ds-event-calendar__more:hover {
+  background-color: var(--color-bg-container-tertiary);
+  color: var(--color-text-secondary);
+}
+
+button.ds-event-calendar__more:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}
+
+/* ============================================
+   RESPONSIVE
+   At phone widths the pills drop their time so
+   titles keep at least a few characters.
+   ============================================ */
+
+@media (max-width: 768px) {
+  .ds-event-calendar__event-time {
+    display: none;
+  }
+
+  .ds-event-calendar__weekday {
+    padding: var(--padding-xxs) 0;
+    text-align: center;
+  }
+}

package/components/EventCalendar/EventCalendar.d.ts

@@ -0,0 +1,51 @@
+import { default as React } from 'react';
+export type EventCalendarColor = 'neutral' | 'coral' | 'violet' | 'cobalt' | 'amber' | 'gold' | 'mint';
+export interface EventCalendarEvent {
+    /** Unique event identifier. */
+    id: string;
+    /** The day the event falls on (YYYY-MM-DD). */
+    date: string;
+    /** Short label shown in the event pill. */
+    title: string;
+    /** Start time as already-formatted text like "09:30". Untimed events sort first. */
+    time?: string;
+    /** Accent for the pill's dot, from the core accent roles. Defaults to `neutral`. */
+    color?: EventCalendarColor;
+}
+/** Props owned by EventCalendar itself — everything else falls through to the root element. */
+type EventCalendarOwnProps = {
+    /** The events to place on the grid, including any that fall on the visible leading and trailing days of the neighbouring months. */
+    events?: EventCalendarEvent[];
+    /** Shown month (YYYY-MM) for controlled use. Pair with `onMonthChange`. */
+    month?: string;
+    /** Initially shown month (YYYY-MM) for uncontrolled use. Defaults to the current month. */
+    defaultMonth?: string;
+    /** Fires with the newly shown month (YYYY-MM) after prev/next navigation. */
+    onMonthChange?: (month: string) => void;
+    /** Event pills shown per day before the rest collapse into "+N more". */
+    maxEventsPerDay?: number;
+    /** Fires with the clicked event. Pills only render as buttons when this is set. */
+    onEventClick?: (event: EventCalendarEvent) => void;
+    /**
+     * Fires with the clicked day (YYYY-MM-DD) — from the day number, and from
+     * the "+N more" overflow row. Both only become buttons when this is set.
+     */
+    onDateClick?: (date: string) => void;
+    /** Trailing header slot, e.g. a "New event" Button. */
+    actions?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface EventCalendarProps extends EventCalendarOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof EventCalendarOwnProps> {
+}
+/**
+ * EventCalendar is the month-at-a-glance view: a full month grid with event
+ * pills on their days, an overflow row once a day is full, and prev/next
+ * month navigation. DatePicker selects a date; this one shows a schedule.
+ *
+ * The calendar owns no event data semantics — it places what it is given.
+ * Filtering, fetching, and what clicking an event means stay with the
+ * consumer.
+ */
+export declare const EventCalendar: React.ForwardRefExoticComponent<EventCalendarProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/EventCalendar/EventCalendar.js

@@ -0,0 +1,213 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React, { useMemo, useState } from "react";
+import "./EventCalendar.css";
+import "../../fonts/material-symbols.css";
+const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+const MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+function parseMonth(str) {
+  const [y, m] = str.split("-").map(Number);
+  return [y, m - 1];
+}
+function formatMonth(year, monthIndex) {
+  return `${year}-${String(monthIndex + 1).padStart(2, "0")}`;
+}
+function formatDate(date) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
+const EventCalendar = React.forwardRef(
+  ({
+    events = [],
+    month,
+    defaultMonth,
+    onMonthChange,
+    maxEventsPerDay = 3,
+    onEventClick,
+    onDateClick,
+    actions,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-event-calendar";
+    const today = useMemo(() => /* @__PURE__ */ new Date(), []);
+    const isControlled = month !== void 0;
+    const [uncontrolledMonth, setUncontrolledMonth] = useState(
+      defaultMonth ?? formatMonth(today.getFullYear(), today.getMonth())
+    );
+    const currentMonth = isControlled ? month : uncontrolledMonth;
+    const [viewYear, viewMonth] = parseMonth(currentMonth);
+    const navigate = (offset) => {
+      const next = new Date(viewYear, viewMonth + offset, 1);
+      const value = formatMonth(next.getFullYear(), next.getMonth());
+      if (!isControlled) setUncontrolledMonth(value);
+      onMonthChange?.(value);
+    };
+    const eventsByDate = useMemo(() => {
+      const map = /* @__PURE__ */ new Map();
+      for (const event of events) {
+        const list = map.get(event.date) ?? [];
+        list.push(event);
+        map.set(event.date, list);
+      }
+      for (const list of map.values()) {
+        list.sort((a, b) => {
+          if (!a.time && !b.time) return 0;
+          if (!a.time) return -1;
+          if (!b.time) return 1;
+          return a.time.localeCompare(b.time);
+        });
+      }
+      return map;
+    }, [events]);
+    const firstDay = new Date(viewYear, viewMonth, 1).getDay();
+    const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
+    const weekCount = Math.ceil((firstDay + daysInMonth) / 7);
+    const cells = [];
+    for (let i = 0; i < weekCount * 7; i++) {
+      const date = new Date(viewYear, viewMonth, i - firstDay + 1);
+      cells.push({ date, inMonth: date.getMonth() === viewMonth });
+    }
+    const classes = [baseClass, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+        /* @__PURE__ */ jsxs("span", { className: `${baseClass}__month`, children: [
+          MONTHS[viewMonth],
+          " ",
+          viewYear
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: `${baseClass}__nav`, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: `${baseClass}__nav-btn material-symbols-rounded`,
+              onClick: () => navigate(-1),
+              "aria-label": "Previous month",
+              children: "chevron_left"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: `${baseClass}__nav-btn material-symbols-rounded`,
+              onClick: () => navigate(1),
+              "aria-label": "Next month",
+              children: "chevron_right"
+            }
+          )
+        ] }),
+        actions && /* @__PURE__ */ jsx("div", { className: `${baseClass}__actions`, children: actions })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: `${baseClass}__weekdays`, "aria-hidden": "true", children: DAYS.map((day) => /* @__PURE__ */ jsx("div", { className: `${baseClass}__weekday`, children: day }, day)) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${baseClass}__grid`,
+          role: "group",
+          "aria-label": `${MONTHS[viewMonth]} ${viewYear}`,
+          children: cells.map(({ date, inMonth }) => {
+            const dateStr = formatDate(date);
+            const dayEvents = eventsByDate.get(dateStr) ?? [];
+            const visible = dayEvents.slice(0, maxEventsPerDay);
+            const overflow = dayEvents.length - visible.length;
+            const isToday = date.getFullYear() === today.getFullYear() && date.getMonth() === today.getMonth() && date.getDate() === today.getDate();
+            const dayLabel = date.toLocaleDateString(void 0, {
+              weekday: "long",
+              year: "numeric",
+              month: "long",
+              day: "numeric"
+            });
+            const cellClasses = [
+              `${baseClass}__cell`,
+              !inMonth ? `${baseClass}__cell--outside` : "",
+              isToday ? `${baseClass}__cell--today` : ""
+            ].filter(Boolean).join(" ");
+            return /* @__PURE__ */ jsxs("div", { className: cellClasses, children: [
+              onDateClick ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: `${baseClass}__day`,
+                  onClick: () => onDateClick(dateStr),
+                  "aria-label": dayLabel,
+                  "aria-current": isToday ? "date" : void 0,
+                  children: date.getDate()
+                }
+              ) : /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `${baseClass}__day`,
+                  "aria-label": dayLabel,
+                  "aria-current": isToday ? "date" : void 0,
+                  children: date.getDate()
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: `${baseClass}__events`, children: [
+                visible.map((event) => {
+                  const pillClasses = [
+                    `${baseClass}__event`,
+                    `${baseClass}__event--${event.color ?? "neutral"}`
+                  ].join(" ");
+                  const pillContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("span", { className: `${baseClass}__event-dot`, "aria-hidden": "true" }),
+                    /* @__PURE__ */ jsx("span", { className: `${baseClass}__event-title`, children: event.title }),
+                    event.time && /* @__PURE__ */ jsx("span", { className: `${baseClass}__event-time`, children: event.time })
+                  ] });
+                  return onEventClick ? /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: pillClasses,
+                      onClick: () => onEventClick(event),
+                      "aria-label": `${event.title}${event.time ? `, ${event.time}` : ""}, ${dayLabel}`,
+                      children: pillContent
+                    },
+                    event.id
+                  ) : /* @__PURE__ */ jsx("span", { className: pillClasses, children: pillContent }, event.id);
+                }),
+                overflow > 0 && (onDateClick ? /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: `${baseClass}__more`,
+                    onClick: () => onDateClick(dateStr),
+                    "aria-label": `${overflow} more event${overflow === 1 ? "" : "s"}, ${dayLabel}`,
+                    children: [
+                      "+",
+                      overflow,
+                      " more"
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsxs("span", { className: `${baseClass}__more`, children: [
+                  "+",
+                  overflow,
+                  " more"
+                ] }))
+              ] })
+            ] }, dateStr);
+          })
+        }
+      )
+    ] });
+  }
+);
+EventCalendar.displayName = "EventCalendar";
+export {
+  EventCalendar
+};