@nuxtseo/design-system 0.0.0-stage → 0.1.1

package/app/components/data/UiMetricToggle.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import type { VizColor } from '../../composables/dataVizColors'
+import { ToggleGroupItem, ToggleGroupRoot } from 'reka-ui'
+import { UiIcon, UiTooltip } from '#components'
+import { metricIcon, vizBgColor, vizColorMap } from '../../composables/dataVizColors'
+
+export interface MetricToggleOption {
+  key: string
+  label: string
+  color: string
+  icon?: string
+  /** What this metric means, shown on hover/focus. Icon-only toggles are unreadable without it. */
+  tooltip?: string
+  special?: boolean
+}
+
+const { options, iconOnly = false, chip = false, colors, compare = false } = defineProps<{
+  options: MetricToggleOption[]
+  /** Render icons only (no labels) in a tighter bordered segment. Label moves to a tooltip/aria. */
+  iconOnly?: boolean
+  /**
+   * Labelled chips that double as the chart legend. A selected chip takes its
+   * metric identity colour and a solid swatch; an unselected chip is neutral
+   * with its icon and label. At least one chip stays selected.
+   */
+  chip?: boolean
+  /**
+   * Metric identity map for `chip` (`gscMetricColors`, `analyticsMetricColors`,
+   * `cwvMetricColors`, `indexingVizColors`). A key outside the map is not a
+   * chart series: it selects neutrally and keeps its icon.
+   */
+  colors?: Record<string, VizColor>
+  /** A comparison period is drawn: selected chips add the dashed tail. */
+  compare?: boolean
+}>()
+
+const emit = defineEmits<{
+  toggle: [key: string]
+}>()
+
+const modelValue = defineModel<string[]>({ required: true })
+
+function onUpdate(value: unknown) {
+  const next = Array.isArray(value) ? value.filter(v => typeof v === 'string') : []
+  // A chip row is the legend: an empty one would leave the chart with no series.
+  if (chip && next.length === 0)
+    return
+  // Surface the single key that flipped so consumers can react per-metric.
+  const changed = next.find(k => !modelValue.value.includes(k))
+    ?? modelValue.value.find(k => !next.includes(k))
+  if (changed)
+    emit('toggle', changed)
+  modelValue.value = next
+}
+
+function isActive(key: string) {
+  return modelValue.value.includes(key)
+}
+
+// One glyph per metric everywhere: the identity map wins over an option's own
+// (often raw upstream) icon id.
+function iconFor(opt: MetricToggleOption) {
+  return metricIcon(opt.key) ?? opt.icon
+}
+
+function identity(opt: MetricToggleOption): VizColor | undefined {
+  return colors ? colors[opt.key] : vizColorMap[opt.color]
+}
+
+function chipClass(opt: MetricToggleOption) {
+  if (!isActive(opt.key))
+    return 'border-default text-muted hover:text-default hover:border-accented'
+  return ['border-accented text-default', identity(opt) ? '' : 'bg-elevated']
+}
+
+// The chip is the chart's legend, so it paints from the same `hex` field the
+// chart lines draw with. The Tailwind `dot`/`bg` classes resolve to a
+// slightly different shade, which made a chip and its line disagree.
+function swatchStyle(opt: MetricToggleOption) {
+  const id = identity(opt)
+  return id ? { backgroundColor: id.hex } : undefined
+}
+function chipStyle(opt: MetricToggleOption) {
+  const id = identity(opt)
+  return chip && id && isActive(opt.key) ? { backgroundColor: `color-mix(in oklab, ${id.hex} 15%, transparent)` } : undefined
+}
+
+function itemClass(opt: MetricToggleOption) {
+  if (iconOnly)
+    return ['justify-center size-11 sm:size-7 rounded-md', isActive(opt.key) ? 'bg-default text-default' : 'text-dimmed hover:text-default']
+  if (chip)
+    return ['shrink-0 gap-1.5 px-2.5 min-h-11 sm:min-h-0 sm:h-7 text-xs rounded-lg border whitespace-nowrap', chipClass(opt)]
+  return ['gap-1.5 px-2 py-1 min-h-11 sm:min-h-0 text-mini rounded-md border', isActive(opt.key) ? 'border-accented bg-elevated text-default' : 'border-transparent text-dimmed hover:text-muted hover:bg-accented']
+}
+</script>
+
+<template>
+  <ToggleGroupRoot
+    :model-value="modelValue"
+    type="multiple"
+    :class="iconOnly ? 'flex items-center gap-0.5 p-0.5 rounded-lg bg-[var(--ui-bg-elevated)]/60 border border-default' : (chip ? 'flex items-center gap-1.5' : 'flex gap-1')"
+    @update:model-value="onUpdate"
+  >
+    <!-- `triggerAs="child"` keeps the toggle itself the trigger — an extra
+         wrapper span would break the segment's flex row and the hit area.
+         A chip already shows its label, so it only tooltips a description. -->
+    <UiTooltip
+      v-for="opt in options"
+      :key="opt.key"
+      :title="opt.label"
+      :description="opt.tooltip"
+      :text="opt.tooltip ? undefined : opt.label"
+      :disabled="chip && !opt.tooltip"
+      trigger-as="child"
+      size="sm"
+    >
+      <ToggleGroupItem
+        :value="opt.key"
+        class="cursor-pointer inline-flex items-center font-medium transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-primary"
+        :class="[itemClass(opt), opt.special && !isActive(opt.key) && 'ring-1 ring-[var(--ui-primary)]/50']"
+        :style="chipStyle(opt)"
+        :aria-label="`Toggle ${opt.label}`"
+      >
+        <!-- Chip legend swatch: the series stroke, plus the dashed previous
+             period tail while a comparison is drawn. -->
+        <span
+          v-if="chip && isActive(opt.key) && identity(opt)"
+          class="flex items-center gap-0.5 shrink-0"
+          aria-hidden="true"
+        >
+          <span class="h-0.5 w-2.5 rounded-full" :style="swatchStyle(opt)" />
+          <template v-if="compare">
+            <span class="h-0.5 w-1 rounded-full opacity-60" :style="swatchStyle(opt)" />
+            <span class="h-0.5 w-1 rounded-full opacity-60" :style="swatchStyle(opt)" />
+          </template>
+        </span>
+        <!-- Consumer-rendered glyph (e.g. `UiSeverityMarker`) for options whose
+             identity isn't a named icon or a metric colour — falls back to the
+             built-in icon/dot so every existing caller is unaffected. -->
+        <slot v-else name="icon" :option="opt" :active="isActive(opt.key)">
+          <UiIcon v-if="iconFor(opt)" :name="iconFor(opt)!" class="size-3.5 shrink-0" aria-hidden="true" />
+          <span
+            v-else
+            class="size-1.5 rounded-full shrink-0 transition-colors duration-150"
+            :class="isActive(opt.key) ? vizBgColor(opt.color) : 'bg-muted'"
+          />
+        </slot>
+        <template v-if="!iconOnly">
+          <slot name="label" :option="opt" :active="isActive(opt.key)">
+            {{ opt.label }}
+          </slot>
+        </template>
+      </ToggleGroupItem>
+    </UiTooltip>
+  </ToggleGroupRoot>
+</template>

package/app/components/data/UiMetricsRow.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { UiIcon, UiTrend } from '#components'
+
+interface MetricsRowItem {
+  /** Preferred: Lucide icon name. Falls back to dotColor if not provided. */
+  icon?: string
+  /** Text color class applied to the icon. Prefer semantic or metric identity tokens. */
+  iconClass?: string
+  /** Legacy dot color class (used when no icon is provided). */
+  dotColor?: string
+  value: string
+  label: string
+  trend?: number | null
+  trendInverted?: boolean
+  trendFormat?: 'percent' | 'points'
+}
+
+defineProps<{
+  items: MetricsRowItem[]
+}>()
+</script>
+
+<template>
+  <div data-testid="metrics-row" class="flex items-center gap-3 sm:gap-4 mb-6 flex-wrap">
+    <template v-for="(item, i) in items" :key="item.label">
+      <div v-if="i > 0" class="w-px self-stretch bg-[var(--ui-border)] hidden sm:block" />
+      <div class="flex items-center gap-2 sm:gap-3 leading-none tracking-data">
+        <UiIcon
+          v-if="item.icon"
+          :name="item.icon"
+          class="size-4 shrink-0"
+          :class="item.iconClass ?? 'text-dimmed'"
+          aria-hidden="true"
+        />
+        <span class="text-2xl sm:text-4xl font-bold tracking-tight tabular-nums">
+          {{ item.value }}
+        </span>
+        <div class="flex flex-col">
+          <span class="text-xs text-muted">
+            {{ item.label }}
+          </span>
+          <Transition
+            enter-active-class="motion-safe:transition-[opacity,transform] motion-safe:duration-200 ease-out"
+            enter-from-class="motion-safe:opacity-0 motion-safe:translate-y-0.5"
+            enter-to-class="opacity-100 translate-y-0"
+            leave-active-class="motion-safe:transition-[opacity,transform] motion-safe:duration-150 ease-in"
+            leave-from-class="opacity-100"
+            leave-to-class="motion-safe:opacity-0"
+          >
+            <UiTrend
+              v-if="item.trend != null && item.trend !== 0"
+              :value="item.trend"
+              :inverted="item.trendInverted"
+              colored
+              :format="item.trendFormat ?? 'percent'"
+              size="sm"
+            />
+            <span v-else class="text-xs text-dimmed tabular-nums" aria-label="No comparison data">—</span>
+          </Transition>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>

package/app/components/data/UiPositionMetric.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { UBadge, UiTooltip } from '#components'
+
+const { value } = defineProps<{ value: number | string, size?: string }>()
+
+const val = Number(value)
+
+const color = computed(() => {
+  if (val < 10)
+    return 'success'
+  if (val < 20)
+    return 'warning'
+  if (val < 30)
+    return 'warning'
+  return 'error'
+})
+
+// Text equivalent of the color signal so position quality isn't conveyed by
+// hue alone (WCAG 1.4.1) — voiced via the badge's aria-label.
+const qualitative = computed(() => {
+  if (val < 10)
+    return 'strong'
+  if (val < 30)
+    return 'moderate'
+  return 'weak'
+})
+
+const formattedValue = computed(() => Math.round(val))
+</script>
+
+<template>
+  <UiTooltip trigger-as="button">
+    <UBadge
+      :color="color"
+      variant="subtle"
+      class="font-mono tabular-nums"
+      :aria-label="`Average position ${val.toFixed(1)}, ${qualitative}`"
+    >
+      {{ formattedValue }}
+    </UBadge>
+    <template #text>
+      <div class="max-w-xs text-xs">
+        <p class="font-medium mb-1">
+          Avg Position: {{ val.toFixed(1) }}
+        </p>
+        <p class="text-muted">
+          Weighted average across all impressions (countries, devices, personalization). May differ from single SERP checks.
+        </p>
+      </div>
+    </template>
+  </UiTooltip>
+</template>

package/app/components/data/UiRelatedFixes.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import type { RouteLocationRaw } from 'vue-router'
+import type { RichSegment } from '../../../shared/rich-text'
+
+/**
+ * UiRelatedFixes — the related-work strip (ADR-0059 #4): a feature page's slice of
+ * open Issues & Opportunities work, rendered beside the data that grounds it.
+ *
+ * Purely presentational (ADR-0029): rows arrive via props (feature layers
+ * query pro-actions's catalog themselves — ADR-0042 lets them consume contracts
+ * and queries, never runtime components, so the shared piece lives here).
+ * Rows render the shared `UiIssueRow` (compact) so the strip and the board read
+ * as one row primitive at two densities.
+ *
+ * Render contract (deliberate, from the first adopter):
+ * - nothing until `loaded` — a skeleton would over-promise a section that is
+ *   often (healthily) empty;
+ * - when loaded + empty: the quiet `emptyLabel` line if given, else nothing.
+ *
+ * Click contract (Q1, 2026-06): a row opens the act-surface detail in place via
+ * `@select` — the owning layer holds the full action and opens the modal, so the
+ * user acts (Start / Work on it / claim) without a page hop. Only the header /
+ * footer "View all" navigates to the full Issues & Opportunities board.
+ */
+
+import { NuxtLink, UiButton, UiIcon, UiIssueRow } from '#components'
+
+export interface RelatedFixRow {
+  id: string
+  title: string
+  /** Typed headline tokens (`actionDisplay().headline`); falls back to `title` when omitted. */
+  richSegments?: RichSegment[]
+  evidence?: string | null
+  /** The board's deterministic severity — drives the trailing dot. */
+  severity: 'error' | 'warning' | 'info'
+}
+
+const {
+  rows,
+  to,
+  loaded = false,
+  title = 'Related Work',
+  emptyLabel,
+  moreCount = 0,
+  showHeader = true,
+} = defineProps<{
+  rows: RelatedFixRow[]
+  /** The Issues & Opportunities page (optionally ?cluster=-filtered). */
+  to: RouteLocationRaw
+  loaded?: boolean
+  title?: string
+  /** Quiet all-clear line when there is no open work; omit to render nothing. */
+  emptyLabel?: string
+  /** Matches beyond the rendered rows — folds into a "+N more" footer link. */
+  moreCount?: number
+  /** False when another primitive already owns the panel header/action. */
+  showHeader?: boolean
+}>()
+
+const emit = defineEmits<{
+  /** Row clicked — the owning layer opens the in-place act-surface modal. */
+  select: [row: RelatedFixRow]
+}>()
+</script>
+
+<template>
+  <section v-if="loaded && (rows.length || emptyLabel)">
+    <div v-if="showHeader" class="mb-2 flex items-baseline justify-between">
+      <h3 class="text-sm font-semibold text-highlighted">
+        {{ title }}
+      </h3>
+      <UiButton
+        v-if="rows.length"
+        label="View all"
+        size="xs"
+        purpose="quiet"
+        trailing-icon="next"
+        :to="to"
+      />
+    </div>
+    <ul v-if="rows.length" class="divide-y divide-default overflow-hidden rounded-lg border border-default">
+      <li v-for="row in rows" :key="row.id">
+        <button
+          type="button"
+          class="block w-full cursor-pointer text-left outline-none focus-visible:ring-2 focus-visible:ring-primary"
+          @click="emit('select', row)"
+        >
+          <UiIssueRow
+            density="compact"
+            :title="row.title"
+            :rich-segments="row.richSegments"
+            :evidence="row.evidence"
+            :severity="row.severity"
+            interactive
+          />
+        </button>
+      </li>
+      <li v-if="moreCount > 0">
+        <NuxtLink
+          :to="to"
+          class="flex min-h-11 items-center gap-2 py-2 pl-4 pr-3.5 text-sm text-muted transition-colors hover:bg-elevated/60"
+        >
+          +{{ moreCount }} more
+          <UiIcon name="chevron-right" class="size-3 shrink-0 text-dimmed" aria-hidden="true" />
+        </NuxtLink>
+      </li>
+    </ul>
+    <p v-else class="flex items-center gap-1.5 text-xs text-muted">
+      <UiIcon name="check" class="size-3.5 shrink-0 text-dimmed" aria-hidden="true" />
+      {{ emptyLabel }}
+    </p>
+  </section>
+</template>