@mich8060/unified-design-system 0.1.10

package/src/ui/Calendar/Calendar.scss

@@ -0,0 +1,451 @@
+@use "../../styles/typography" as *;
+
+.uds-calendar {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background: var(--uds-surface-primary);
+  border: var(--uds-border-width-1) solid var(--uds-border-primary);
+  border-radius: var(--uds-radius-8);
+  overflow: hidden;
+
+  // ── Header ──────────────────────────────────────────────────────
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--uds-spacing-12) var(--uds-spacing-16);
+    border-bottom: var(--uds-border-width-1) solid var(--uds-border-primary);
+    gap: var(--uds-spacing-12);
+  }
+
+  &__header-left {
+    display: flex;
+    align-items: center;
+    gap: var(--uds-spacing-12);
+  }
+
+  &__header-right {
+    display: flex;
+    align-items: center;
+    gap: var(--uds-spacing-4);
+  }
+
+  &__title {
+    @include uds-heading-20;
+    margin: 0;
+    color: var(--uds-text-primary);
+    white-space: nowrap;
+  }
+
+  // ── Weekday row ─────────────────────────────────────────────────
+  &__weekday-row {
+    display: flex;
+    border-bottom: var(--uds-border-width-1) solid var(--uds-border-primary);
+    background: var(--uds-surface-secondary);
+  }
+
+  &__weekday {
+    @include uds-body-12-medium;
+    flex: 1;
+    text-align: center;
+    padding: var(--uds-spacing-6) var(--uds-spacing-4);
+    color: var(--uds-text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  &__week-number-header {
+    @include uds-body-12-medium;
+    width: 40px;
+    min-width: 40px;
+    text-align: center;
+    padding: var(--uds-spacing-6) 0;
+    color: var(--uds-text-tertiary);
+    border-right: var(--uds-border-width-1) solid var(--uds-border-primary);
+  }
+
+  // ── Grid container ──────────────────────────────────────────────
+  &__grid {
+    display: flex;
+    flex-direction: column;
+  }
+
+  // ── Week row (one horizontal row per week) ──────────────────────
+  &__week-row {
+    display: flex;
+    border-bottom: var(--uds-border-width-1) solid var(--uds-border-primary);
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  &__week-number {
+    @include uds-body-12;
+    width: 40px;
+    min-width: 40px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding-top: var(--uds-spacing-8);
+    color: var(--uds-text-tertiary);
+    background: var(--uds-surface-secondary);
+    border-right: var(--uds-border-width-1) solid var(--uds-border-primary);
+  }
+
+  // ── Week content (the 7-column area) ────────────────────────────
+  &__week-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    position: relative;
+  }
+
+  // ── Day number strip ────────────────────────────────────────────
+  &__day-strip {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    position: relative;
+    z-index: 1;
+  }
+
+  &__day-cell {
+    padding: var(--uds-spacing-6) var(--uds-spacing-8);
+    padding-bottom: var(--uds-spacing-64);
+    border-right: var(--uds-border-width-1) solid var(--uds-border-primary);
+    cursor: pointer;
+    transition: background var(--uds-animation-duration-150) var(--uds-animation-ease-standard);
+
+    &:last-child {
+      border-right: none;
+    }
+
+    &:hover {
+      background: var(--uds-surface-secondary);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--uds-border-focus);
+      outline-offset: -2px;
+    }
+
+    &--outside {
+      background: var(--uds-surface-tertiary);
+
+      .uds-calendar__day-number {
+        color: var(--uds-text-tertiary);
+      }
+
+      &:hover {
+        background: var(--uds-surface-secondary);
+      }
+    }
+
+    &--today {
+      background: var(--uds-system-action-quaternary);
+
+      &:hover {
+        background: var(--uds-color-primary-100);
+      }
+    }
+
+    &--selected {
+      background: var(--uds-color-primary-50);
+      box-shadow: inset 0 0 0 2px var(--uds-system-action-primary);
+
+      &:hover {
+        background: var(--uds-color-primary-100);
+      }
+    }
+  }
+
+  &__day-number {
+    @include uds-body-14;
+    color: var(--uds-text-primary);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+
+    &--today {
+      background: var(--uds-system-action-primary);
+      color: var(--uds-text-inverse);
+      font-weight: var(--uds-font-weight-semibold);
+    }
+  }
+
+  // ── Events overlay (absolutely positioned over day cells) ───────
+  &__events-overlay {
+    position: absolute;
+    top: 38px; // below the day-number row
+    left: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    padding: 0 1px;
+    pointer-events: none;
+    z-index: 2;
+
+    > * {
+      pointer-events: auto;
+    }
+  }
+
+  // ── Event lane (spanning events, 7-col grid) ────────────────────
+  &__event-lane {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 0;
+    min-height: 22px;
+  }
+
+  &__event-slot {
+    min-width: 0;
+    overflow: hidden;
+    display: flex;
+    align-items: stretch;
+  }
+
+  // ── Timed events row ────────────────────────────────────────────
+  &__timed-row {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+  }
+
+  &__timed-col {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 2px var(--uds-spacing-2) var(--uds-spacing-4);
+    min-height: 24px;
+
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  // ── Overflow indicator ──────────────────────────────────────────
+  &__more {
+    @include uds-body-12;
+    color: var(--uds-text-tertiary);
+    padding: 1px var(--uds-spacing-4);
+    cursor: pointer;
+    white-space: nowrap;
+
+    &:hover {
+      color: var(--uds-system-action-primary);
+    }
+  }
+
+  // ════════════════════════════════════════════════════════════════
+  // Inline Event Bar (lightweight calendar-specific rendering)
+  // ════════════════════════════════════════════════════════════════
+
+  &__event-bar {
+    all: unset;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 20px;
+    padding: 0 var(--uds-spacing-6);
+    border-radius: var(--uds-radius-4);
+    cursor: default;
+    position: relative;
+    overflow: hidden;
+    transition: filter var(--uds-animation-duration-150) var(--uds-animation-ease-standard);
+
+    // ── Clickable ─────────────────────────────────────────────
+    &[type="button"] {
+      cursor: pointer;
+
+      &:hover {
+        filter: brightness(0.93);
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--uds-border-focus);
+        outline-offset: 0;
+      }
+    }
+
+    // ── Cap variations ────────────────────────────────────────
+    &--no-start-cap {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      padding-left: 0;
+    }
+
+    &--no-end-cap {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      padding-right: 0;
+    }
+
+    // ── Bar-only mode (no content, middle/end segments) ───────
+    &--bar-only {
+      padding: 0;
+    }
+
+    // ── Label ─────────────────────────────────────────────────
+    &-label {
+      @include uds-body-12-medium;
+      color: inherit;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      min-width: 0;
+      position: relative;
+      z-index: 1;
+    }
+
+    // ── Pending stripe pattern ────────────────────────────────
+    &-pattern {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      background: repeating-linear-gradient(
+        -45deg,
+        transparent,
+        transparent 5px,
+        var(--_stripe-color) 5px,
+        var(--_stripe-color) 6px
+      );
+    }
+
+    // ── TYPE × STATUS Color Matrix ────────────────────────────
+
+    // Travel — active
+    &--travel.uds-calendar__event-bar--active {
+      background-color: var(--uds-color-primary-500);
+      color: var(--uds-text-inverse);
+    }
+
+    // Travel — past
+    &--travel.uds-calendar__event-bar--past {
+      background-color: var(--uds-color-neutrals-100);
+      color: var(--uds-text-primary);
+    }
+
+    // Travel — pending
+    &--travel.uds-calendar__event-bar--pending {
+      background-color: var(--uds-color-accent-cyan-50);
+      color: var(--uds-text-primary);
+      --_stripe-color: var(--uds-color-accent-cyan-200);
+    }
+
+    &--travel.uds-calendar__event-bar--pending:not(.uds-calendar__event-bar--no-start-cap) {
+      border-left: 3px solid var(--uds-color-accent-cyan-200);
+    }
+
+    // Assignment — active
+    &--assignment.uds-calendar__event-bar--active {
+      background-color: var(--uds-color-secondary-500);
+      color: var(--uds-text-inverse);
+    }
+
+    // Assignment — past
+    &--assignment.uds-calendar__event-bar--past {
+      background-color: var(--uds-color-neutrals-100);
+      color: var(--uds-text-primary);
+    }
+
+    // Assignment — pending
+    &--assignment.uds-calendar__event-bar--pending {
+      background-color: var(--uds-color-accent-aqua-50);
+      color: var(--uds-text-primary);
+      --_stripe-color: var(--uds-color-accent-aqua-200);
+    }
+
+    &--assignment.uds-calendar__event-bar--pending:not(.uds-calendar__event-bar--no-start-cap) {
+      border-left: 3px solid var(--uds-color-accent-aqua-200);
+    }
+
+    // Unassigned — active
+    &--unassigned.uds-calendar__event-bar--active {
+      background-color: var(--uds-color-neutrals-500);
+      color: var(--uds-text-inverse);
+    }
+
+    // Unassigned — past
+    &--unassigned.uds-calendar__event-bar--past {
+      background-color: var(--uds-color-neutrals-100);
+      color: var(--uds-text-primary);
+    }
+
+    // Unassigned — pending
+    &--unassigned.uds-calendar__event-bar--pending {
+      background-color: var(--uds-color-neutrals-50);
+      color: var(--uds-text-primary);
+      --_stripe-color: var(--uds-color-neutrals-200);
+    }
+
+    &--unassigned.uds-calendar__event-bar--pending:not(.uds-calendar__event-bar--no-start-cap) {
+      border-left: 3px solid var(--uds-color-neutrals-500);
+    }
+  }
+
+  // ── Compact size ────────────────────────────────────────────────
+  &--compact {
+    .uds-calendar__header {
+      padding: var(--uds-spacing-8) var(--uds-spacing-12);
+    }
+
+    .uds-calendar__title {
+      @include uds-body-16-semibold;
+    }
+
+    .uds-calendar__weekday {
+      padding: var(--uds-spacing-4);
+    }
+
+    .uds-calendar__day-cell {
+      padding: var(--uds-spacing-4) var(--uds-spacing-6);
+      padding-bottom: var(--uds-spacing-48);
+    }
+
+    .uds-calendar__day-number {
+      @include uds-body-12;
+      width: 22px;
+      height: 22px;
+    }
+
+    .uds-calendar__events-overlay {
+      top: 30px;
+    }
+
+    .uds-calendar__event-lane {
+      min-height: 18px;
+    }
+
+    .uds-calendar__event-bar {
+      height: 16px;
+      padding: 0 var(--uds-spacing-4);
+    }
+
+    .uds-calendar__event-bar-label {
+      font-size: var(--uds-font-size-12);
+    }
+
+    .uds-calendar__timed-col {
+      padding: 1px var(--uds-spacing-2) var(--uds-spacing-4);
+      min-height: 20px;
+    }
+  }
+
+  // ── Week view ───────────────────────────────────────────────────
+  &--week {
+    .uds-calendar__day-cell {
+      padding-bottom: 140px;
+    }
+
+    .uds-calendar__timed-col {
+      min-height: 120px;
+    }
+  }
+}

package/src/ui/Calendar/Calendar.spec.ts

@@ -0,0 +1,12 @@
+export const CALENDAR_DEFAULTS = {
+  className: "",
+} as const;
+
+export const CALENDAR_STORY_SPEC = {
+  defaults: {
+    className: CALENDAR_DEFAULTS.className,
+  },
+  stories: {
+    default: {},
+  },
+} as const;

package/src/ui/Calendar/Calendar.stories.jsx

@@ -0,0 +1,14 @@
+import Calendar from "./Calendar";
+
+export default {
+  title: "Components/Calendar",
+  component: Calendar,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const Default = {
+  args: {},
+};

package/src/ui/Calendar/Calendar.stories.tsx

@@ -0,0 +1,14 @@
+import Calendar from "./Calendar.jsx";
+
+export default {
+  title: "Components/Calendar",
+  component: Calendar,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const Default = {
+  args: {},
+};

package/src/ui/Calendar/Calendar.test.tsx

@@ -0,0 +1 @@
+export {};

package/src/ui/Calendar/Calendar.tsx

@@ -0,0 +1,6 @@
+import type { ComponentType } from "react";
+import LegacyCalendar from "./Calendar.jsx";
+
+const Calendar = LegacyCalendar as ComponentType<any>;
+
+export default Calendar;

package/src/ui/Calendar/Calendar.types.ts

@@ -0,0 +1,3 @@
+export interface CalendarProps {
+  className?: string;
+}

package/src/ui/Calendar/index.js

@@ -0,0 +1 @@
+export { default } from "./Calendar";

package/src/ui/Card/Card.ai.md

@@ -0,0 +1,41 @@
+# Card
+
+Navigation card component for linking to pages with icon, title, and description.
+
+## When to Use
+- Overview/index pages with links to sub-pages
+- Dashboard navigation tiles
+- Feature showcases
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `to` | `string` | — | Route path to navigate to (uses React Router `Link`) |
+| `title` | `string` | — | Card title text |
+| `description` | `string` | — | Card description text |
+| `icon` | `ReactNode` | — | SVG icon or React element to display |
+| `className` | `string` | `""` | Additional CSS classes |
+
+## Examples
+
+```jsx
+<Card
+  to="/users"
+  title="Users"
+  description="Manage user accounts and permissions"
+  icon={<Icon name="Users" size={24} />}
+/>
+```
+
+### Grid of cards
+```jsx
+<Flex gap="16" wrap>
+  <Card to="/dashboard" title="Dashboard" description="Overview" icon={<Icon name="ChartBar" size={24} />} />
+  <Card to="/settings" title="Settings" description="Configure app" icon={<Icon name="Gear" size={24} />} />
+</Flex>
+```
+
+## Note
+- Renders as a React Router `<Link>` — must be used within a `<Router>` context
+- The entire card is clickable

package/src/ui/Card/Card.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import "./Card.scss";
+
+/**
+ * Card component for navigation items on the overview page
+ * 
+ * @param {Object} props
+ * @param {string} props.to - The route path to navigate to
+ * @param {string} props.title - The card title
+ * @param {string} props.description - The card description
+ * @param {React.ReactNode} props.icon - The SVG icon to display
+ * @param {string} [props.className] - Additional CSS classes
+ */
+export default function Card({ to, title, description, icon, className = "" }) {
+  return (
+    <Link className={`card ${className}`.trim()} to={to}>
+      <div className="card__icon">{icon}</div>
+      <div className="card__content">
+        <h2 className="card__title">{title}</h2>
+        <p className="card__description">{description}</p>
+      </div>
+    </Link>
+  );
+}

package/src/ui/Card/Card.scss

@@ -0,0 +1,47 @@
+@use "../../styles/typography" as *;
+
+.card {
+  background: var(--uds-surface-primary);
+  border: var(--uds-border-width-1) solid var(--uds-border-primary);
+  display: flex;
+  gap: var(--uds-gap-none);
+  flex-direction: column;
+  text-decoration: none;
+  color: inherit;
+  cursor: pointer;
+  overflow: hidden; 
+
+  &__content {
+    padding: var(--uds-spacing-16) var(--uds-spacing-24);
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 120px;
+    background: var(--uds-surface-secondary);
+    color: var(--uds-text-brand-primary);
+    padding: var(--uds-spacing-16);
+    border-bottom: var(--uds-border-width-1) solid var(--uds-border-primary);
+
+    svg {
+      width: 100%;
+      height: 80%;
+      max-height: 100%;
+    }
+  }
+
+  h2 {
+    @include uds-heading-20-semibold;
+    margin: 0;
+    color: var(--uds-text-brand-primary);
+  }
+
+  p {
+    @include uds-body-16;
+    margin: 0;
+    color: var(--uds-text-secondary);
+  }
+}

package/src/ui/Card/Card.spec.ts

@@ -0,0 +1,12 @@
+export const CARD_DEFAULTS = {
+  className: "",
+} as const;
+
+export const CARD_STORY_SPEC = {
+  defaults: {
+    className: CARD_DEFAULTS.className,
+  },
+  stories: {
+    default: {},
+  },
+} as const;

package/src/ui/Card/Card.stories.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { MemoryRouter } from "react-router-dom";
+import Card from "./Card";
+import Icon from "../Icon/Icon";
+
+export default {
+  title: "Components/Card",
+  component: Card,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <div style={{ maxWidth: "320px" }}>
+          <Story />
+        </div>
+      </MemoryRouter>
+    ),
+  ],
+};
+
+export const Default = {
+  args: {
+    to: "/",
+    title: "Card Title",
+    description: "Short description about this card.",
+    icon: <Icon name="SquaresFour" size={28} />,
+  },
+};

package/src/ui/Card/Card.stories.tsx

@@ -0,0 +1,14 @@
+import Card from "./Card.jsx";
+
+export default {
+  title: "Components/Card",
+  component: Card,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const Default = {
+  args: {},
+};

package/src/ui/Card/Card.test.tsx

@@ -0,0 +1 @@
+export {};

package/src/ui/Card/Card.tsx

@@ -0,0 +1,6 @@
+import type { ComponentType } from "react";
+import LegacyCard from "./Card.jsx";
+
+const Card = LegacyCard as ComponentType<any>;
+
+export default Card;

package/src/ui/Card/Card.types.ts

@@ -0,0 +1,3 @@
+export interface CardProps {
+  className?: string;
+}