jouw-stem__design-system 0.1.0

package/src/components/RelationMatrix/RelationMatrix.vue

@@ -0,0 +1,359 @@
+<template>
+  <div
+    class="relation-matrix"
+    :class="additionalClasses"
+  >
+    <table
+      class="relation-matrix__table"
+      role="table"
+      :aria-label="ariaLabel"
+    >
+      <thead class="relation-matrix__thead">
+        <tr>
+          <th
+            scope="col"
+            class="relation-matrix__corner"
+            aria-hidden="true"
+          />
+          <th
+            v-for="col in normalizedColumns"
+            :key="col.id"
+            scope="col"
+            class="relation-matrix__col-header"
+          >
+            <slot name="column-header" :column="col">{{ col.label }}</slot>
+          </th>
+          <th
+            v-if="showRowTotals"
+            scope="col"
+            class="relation-matrix__col-header relation-matrix__col-header--totals"
+          >
+            <slot name="totals-header" :tone="totalsTone">Total</slot>
+          </th>
+        </tr>
+      </thead>
+
+      <tbody class="relation-matrix__tbody">
+        <tr
+          v-for="row in normalizedRows"
+          :key="row.id"
+          class="relation-matrix__row"
+        >
+          <th
+            scope="row"
+            class="relation-matrix__row-header"
+          >
+            <slot name="row-header" :row="row">{{ row.label }}</slot>
+          </th>
+
+          <td
+            v-for="col in normalizedColumns"
+            :key="col.id"
+            class="relation-matrix__cell"
+            :class="cellClassFor(row, col)"
+          >
+            <button
+              v-if="isInteractive"
+              type="button"
+              class="relation-matrix__cell-button"
+              :aria-label="cellAriaLabelFor(row, col)"
+              :title="cellTitleFor(row, col)"
+              @click="onCellActivate($event, row, col)"
+              @keydown.enter.prevent="onCellActivate($event, row, col)"
+              @keydown.space.prevent="onCellActivate($event, row, col)"
+            >
+              <slot
+                name="cell"
+                :row="row"
+                :column="col"
+                :cell="cellFor(row, col)"
+                :legend-entry="legendEntryFor(row, col)"
+              >
+                <span class="relation-matrix__glyph" aria-hidden="true">{{ glyphFor(row, col) }}</span>
+              </slot>
+            </button>
+            <template v-else>
+              <span class="relation-matrix__cell-content" :aria-label="cellAriaLabelFor(row, col)">
+                <slot
+                  name="cell"
+                  :row="row"
+                  :column="col"
+                  :cell="cellFor(row, col)"
+                  :legend-entry="legendEntryFor(row, col)"
+                >
+                  <span class="relation-matrix__glyph" aria-hidden="true">{{ glyphFor(row, col) }}</span>
+                </slot>
+              </span>
+            </template>
+          </td>
+
+          <td
+            v-if="showRowTotals"
+            class="relation-matrix__totals-cell"
+            :aria-label="`${rowTotalFor(row)} ${totalsLabel} in ${row.label}`"
+          >
+            {{ rowTotalFor(row) }}
+          </td>
+        </tr>
+
+        <tr
+          v-if="showColumnTotals"
+          class="relation-matrix__row relation-matrix__row--totals"
+        >
+          <th scope="row" class="relation-matrix__row-header relation-matrix__row-header--totals">
+            <slot name="totals-header" :tone="totalsTone">Total</slot>
+          </th>
+          <td
+            v-for="col in normalizedColumns"
+            :key="col.id"
+            class="relation-matrix__totals-cell"
+            :aria-label="`${colTotalFor(col)} ${totalsLabel} in ${col.label}`"
+          >
+            {{ colTotalFor(col) }}
+          </td>
+          <td
+            v-if="showRowTotals"
+            class="relation-matrix__totals-cell relation-matrix__totals-cell--grand"
+            :aria-label="`Grand total: ${grandTotal} ${totalsLabel}`"
+          >
+            {{ grandTotal }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <slot v-if="showLegend && resolvedLegend.length" name="legend" :entries="resolvedLegend">
+      <ul class="relation-matrix__legend" :aria-label="`${ariaLabel} legend`">
+        <li
+          v-for="entry in resolvedLegend"
+          :key="entry.value"
+          class="relation-matrix__legend-item"
+        >
+          <span
+            class="relation-matrix__legend-swatch"
+            :class="`relation-matrix__legend-swatch--tone-${entry.tone ?? 'neutral'}`"
+            aria-hidden="true"
+          >{{ glyphForEntry(entry) }}</span>
+          <span class="relation-matrix__legend-label">{{ entry.label }}</span>
+        </li>
+      </ul>
+    </slot>
+  </div>
+</template>
+
+<style src="./RelationMatrix.scss"></style>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+// ─── Public types ─────────────────────────────────────────────────────
+export type RelationMatrixTone =
+  | "neutral"
+  | "success"
+  | "warning"
+  | "danger"
+  | "info";
+
+export interface RelationMatrixRow {
+  id: string;
+  label: string;
+}
+
+export interface RelationMatrixColumn {
+  id: string;
+  label: string;
+}
+
+export interface RelationMatrixCell {
+  /** Row id this cell belongs to. */
+  row: string;
+  /** Column id this cell belongs to. */
+  col: string;
+  /** Legend entry `value` to map this cell to a tone + glyph. */
+  value: string;
+  /** Optional detail string used as the cell title attribute. */
+  detail?: string;
+}
+
+export interface RelationMatrixLegendEntry {
+  value: string;
+  label: string;
+  tone?: RelationMatrixTone;
+  /** Optional glyph override; defaults to a tone-keyed unicode character. */
+  glyph?: string;
+}
+
+interface Props {
+  rows: RelationMatrixRow[] | string[];
+  columns: RelationMatrixColumn[] | string[];
+  cells: RelationMatrixCell[];
+  legend?: RelationMatrixLegendEntry[];
+  showLegend?: boolean;
+  showRowTotals?: boolean;
+  showColumnTotals?: boolean;
+  /** Which tone counts toward totals. Default: 'success'. */
+  totalsTone?: RelationMatrixTone;
+  /** Optional override label for the totals header. Default: 'Allowed'. */
+  totalsLabel?: string;
+  size?: "sm" | "md" | "lg";
+  /** Make cells focusable / clickable. */
+  isInteractive?: boolean;
+  /** Accessible name for the table region. */
+  ariaLabel?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  rows: () => [],
+  columns: () => [],
+  cells: () => [],
+  legend: undefined,
+  showLegend: true,
+  showRowTotals: false,
+  showColumnTotals: false,
+  totalsTone: "success",
+  totalsLabel: "allowed",
+  size: "md",
+  isInteractive: false,
+  ariaLabel: "Relation matrix",
+});
+
+const emit = defineEmits<{
+  (
+    e: "cell-click",
+    payload: {
+      row: RelationMatrixRow;
+      column: RelationMatrixColumn;
+      cell: RelationMatrixCell | null;
+      legendEntry: RelationMatrixLegendEntry | null;
+      event: MouseEvent | KeyboardEvent;
+    }
+  ): void;
+}>();
+
+// ─── Defaults ────────────────────────────────────────────────────────
+const DEFAULT_LEGEND: RelationMatrixLegendEntry[] = [
+  { value: "full",    label: "Allowed",     tone: "success" },
+  { value: "partial", label: "Conditional", tone: "warning" },
+  { value: "none",    label: "Denied",      tone: "neutral" },
+];
+
+const DEFAULT_GLYPHS: Record<RelationMatrixTone, string> = {
+  success: "✓",   // ✓
+  warning: "!",
+  danger:  "✕",   // ✕
+  info:    "i",
+  neutral: "—",   // —
+};
+
+// ─── Normalised inputs ───────────────────────────────────────────────
+// Accept either `string[]` or full row/column objects — string entries
+// promote to `{ id: s, label: s }` so consumers can pass simple arrays
+// when row/col ids are the labels.
+function normalizeRow(r: RelationMatrixRow | string): RelationMatrixRow {
+  return typeof r === "string" ? { id: r, label: r } : r;
+}
+function normalizeColumn(c: RelationMatrixColumn | string): RelationMatrixColumn {
+  return typeof c === "string" ? { id: c, label: c } : c;
+}
+
+const normalizedRows = computed<RelationMatrixRow[]>(() =>
+  (props.rows as Array<RelationMatrixRow | string>).map(normalizeRow)
+);
+const normalizedColumns = computed<RelationMatrixColumn[]>(() =>
+  (props.columns as Array<RelationMatrixColumn | string>).map(normalizeColumn)
+);
+const resolvedLegend = computed<RelationMatrixLegendEntry[]>(
+  () => props.legend ?? DEFAULT_LEGEND
+);
+
+// (row, col) -> cell lookup, recomputed when inputs change.
+const cellIndex = computed<Map<string, RelationMatrixCell>>(() => {
+  const m = new Map<string, RelationMatrixCell>();
+  for (const c of props.cells) m.set(`${c.row}${c.col}`, c);
+  return m;
+});
+const legendIndex = computed<Map<string, RelationMatrixLegendEntry>>(() => {
+  const m = new Map<string, RelationMatrixLegendEntry>();
+  for (const e of resolvedLegend.value) m.set(e.value, e);
+  return m;
+});
+
+// ─── Lookup helpers ──────────────────────────────────────────────────
+function cellFor(row: RelationMatrixRow, col: RelationMatrixColumn): RelationMatrixCell | null {
+  return cellIndex.value.get(`${row.id}${col.id}`) ?? null;
+}
+function legendEntryFor(row: RelationMatrixRow, col: RelationMatrixColumn): RelationMatrixLegendEntry | null {
+  const c = cellFor(row, col);
+  if (!c) return null;
+  return legendIndex.value.get(c.value) ?? null;
+}
+function toneFor(row: RelationMatrixRow, col: RelationMatrixColumn): RelationMatrixTone | "default" {
+  return legendEntryFor(row, col)?.tone ?? "default";
+}
+function glyphForEntry(e: RelationMatrixLegendEntry): string {
+  return e.glyph ?? DEFAULT_GLYPHS[e.tone ?? "neutral"] ?? "";
+}
+function glyphFor(row: RelationMatrixRow, col: RelationMatrixColumn): string {
+  const e = legendEntryFor(row, col);
+  return e ? glyphForEntry(e) : "";
+}
+
+// ─── Cell class + aria ───────────────────────────────────────────────
+function cellClassFor(row: RelationMatrixRow, col: RelationMatrixColumn): string[] {
+  const tone = toneFor(row, col);
+  return [
+    `relation-matrix__cell--tone-${tone}`,
+    props.isInteractive ? "relation-matrix__cell--state-interactive" : "",
+  ].filter(Boolean);
+}
+
+function cellAriaLabelFor(row: RelationMatrixRow, col: RelationMatrixColumn): string {
+  const entry = legendEntryFor(row, col);
+  // "Owner — Allowed — Read"  or  "Owner — (empty) — Read"
+  return `${row.label}, ${entry?.label ?? "no value"}, ${col.label}`;
+}
+function cellTitleFor(row: RelationMatrixRow, col: RelationMatrixColumn): string | undefined {
+  return cellFor(row, col)?.detail;
+}
+
+function onCellActivate(
+  event: MouseEvent | KeyboardEvent,
+  row: RelationMatrixRow,
+  col: RelationMatrixColumn
+): void {
+  emit("cell-click", {
+    row,
+    column: col,
+    cell: cellFor(row, col),
+    legendEntry: legendEntryFor(row, col),
+    event,
+  });
+}
+
+// ─── Totals ─────────────────────────────────────────────────────────
+function rowTotalFor(row: RelationMatrixRow): number {
+  return normalizedColumns.value.reduce(
+    (n, c) => (legendEntryFor(row, c)?.tone === props.totalsTone ? n + 1 : n),
+    0
+  );
+}
+function colTotalFor(col: RelationMatrixColumn): number {
+  return normalizedRows.value.reduce(
+    (n, r) => (legendEntryFor(r, col)?.tone === props.totalsTone ? n + 1 : n),
+    0
+  );
+}
+const grandTotal = computed(() =>
+  normalizedRows.value.reduce((sum, r) => sum + rowTotalFor(r), 0)
+);
+
+// ─── Root classes ───────────────────────────────────────────────────
+const additionalClasses = computed(() =>
+  [
+    `relation-matrix--size-${props.size}`,
+    props.isInteractive ? "relation-matrix--state-interactive" : "",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+</script>

package/src/components/Row/Row.scss

@@ -0,0 +1,46 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: row;
+
+.#{$c} {
+  color: var(--row-text-default, $row-text-default);
+  min-height: var(--row-height, $row-height);
+  transition: background-color 0.15s ease;
+
+  > td,
+  > th {
+    padding: var(--row-padding-y, $row-padding-y) var(--row-padding-x, $row-padding-x);
+  }
+}
+
+// Striped divider between sibling rows — never on the first one,
+// never below the last. Uses a dashed line so it reads as "soft
+// separator" rather than "hard border".
+.#{$c} + .#{$c} {
+  border-top: var(--row-border-width, $row-border-width) dashed var(--row-border-color, $row-border-color);
+}
+
+.#{$c}--mode-hoverable {
+  &:hover,
+  &[data-state~="hover"] {
+    background-color: var(--row-background-hover, $row-background-hover);
+  }
+}
+
+.#{$c}--state-selected {
+  background-color: var(--row-background-selected, $row-background-selected);
+
+  &:hover,
+  &[data-state~="hover"] {
+    background-color: var(--row-background-selected, $row-background-selected);
+  }
+}
+
+.#{$c}--shape-striped {
+  background-color: var(--row-background-striped, $row-background-striped);
+
+  &:hover,
+  &[data-state~="hover"] {
+    background-color: var(--row-background-hover, $row-background-hover);
+  }
+}

package/src/components/Row/Row.tokens.theme-dark.json

@@ -0,0 +1,62 @@
+{
+  "row": {
+    "background": {
+      "default": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Default row background"
+      },
+      "hover": {
+        "value": "{surface.muted}",
+        "type": "color",
+        "description": "Row background on hover"
+      },
+      "selected": {
+        "value": "{brand.subtle}",
+        "type": "color",
+        "description": "Selected row background"
+      },
+      "striped": {
+        "value": "{surface.panel}",
+        "type": "color",
+        "description": "Striped row background (alternate)"
+      }
+    },
+    "text": {
+      "default": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Row text color"
+      }
+    },
+    "border": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Row border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Row border width"
+      }
+    },
+    "padding": {
+      "x": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Horizontal cell padding"
+      },
+      "y": {
+        "value": "{inset.s}",
+        "type": "dimension",
+        "description": "Vertical cell padding"
+      }
+    },
+    "height": {
+      "value": "48px",
+      "type": "dimension",
+      "description": "Minimum row height"
+    }
+  }
+}

package/src/components/Row/Row.tokens.theme-high-contrast-solarized-dark.json

@@ -0,0 +1,62 @@
+{
+  "row": {
+    "background": {
+      "default": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Default row background"
+      },
+      "hover": {
+        "value": "{surface.muted}",
+        "type": "color",
+        "description": "Row background on hover"
+      },
+      "selected": {
+        "value": "{brand.subtle}",
+        "type": "color",
+        "description": "Selected row background"
+      },
+      "striped": {
+        "value": "{surface.panel}",
+        "type": "color",
+        "description": "Striped row background (alternate)"
+      }
+    },
+    "text": {
+      "default": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Row text color"
+      }
+    },
+    "border": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Row border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Row border width"
+      }
+    },
+    "padding": {
+      "x": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Horizontal cell padding"
+      },
+      "y": {
+        "value": "{inset.s}",
+        "type": "dimension",
+        "description": "Vertical cell padding"
+      }
+    },
+    "height": {
+      "value": "48px",
+      "type": "dimension",
+      "description": "Minimum row height"
+    }
+  }
+}

package/src/components/Row/Row.tokens.theme-high-contrast-solarized-light.json

@@ -0,0 +1,62 @@
+{
+  "row": {
+    "background": {
+      "default": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Default row background"
+      },
+      "hover": {
+        "value": "{surface.muted}",
+        "type": "color",
+        "description": "Row background on hover"
+      },
+      "selected": {
+        "value": "{brand.subtle}",
+        "type": "color",
+        "description": "Selected row background"
+      },
+      "striped": {
+        "value": "{surface.panel}",
+        "type": "color",
+        "description": "Striped row background (alternate)"
+      }
+    },
+    "text": {
+      "default": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Row text color"
+      }
+    },
+    "border": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Row border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Row border width"
+      }
+    },
+    "padding": {
+      "x": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Horizontal cell padding"
+      },
+      "y": {
+        "value": "{inset.s}",
+        "type": "dimension",
+        "description": "Vertical cell padding"
+      }
+    },
+    "height": {
+      "value": "48px",
+      "type": "dimension",
+      "description": "Minimum row height"
+    }
+  }
+}

package/src/components/Row/Row.tokens.theme-light.json

@@ -0,0 +1,62 @@
+{
+  "row": {
+    "background": {
+      "default": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Default row background"
+      },
+      "hover": {
+        "value": "{surface.muted}",
+        "type": "color",
+        "description": "Row background on hover"
+      },
+      "selected": {
+        "value": "{brand.subtle}",
+        "type": "color",
+        "description": "Selected row background"
+      },
+      "striped": {
+        "value": "{surface.panel}",
+        "type": "color",
+        "description": "Striped row background (alternate)"
+      }
+    },
+    "text": {
+      "default": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Row text color"
+      }
+    },
+    "border": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Row border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Row border width"
+      }
+    },
+    "padding": {
+      "x": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Horizontal cell padding"
+      },
+      "y": {
+        "value": "{inset.s}",
+        "type": "dimension",
+        "description": "Vertical cell padding"
+      }
+    },
+    "height": {
+      "value": "48px",
+      "type": "dimension",
+      "description": "Minimum row height"
+    }
+  }
+}

package/src/components/Row/Row.vue

@@ -0,0 +1,32 @@
+<template>
+  <tr class="row" :class="additionalClasses">
+    <slot />
+  </tr>
+</template>
+
+<style src="./Row.scss"></style>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface Props {
+  isSelected?: boolean;
+  isStriped?: boolean;
+  isHoverable?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isSelected: false,
+  isStriped: false,
+  isHoverable: true,
+});
+const additionalClasses = computed(() =>
+  [
+    props.isSelected && "row--state-selected",
+    props.isStriped && "row--shape-striped",
+    props.isHoverable && "row--mode-hoverable",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+</script>