@nuxtseo/design-system 0.0.0-stage → 0.1.0

package/app/components/data/cells/UiTableTrendCell.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { UiTableDash, UiTrend } from '#components'
+import { calcTrendPercent } from '../../../composables/formatting'
+
+const {
+  current,
+  previous,
+  inverted = false,
+  size = '2xs',
+  align = 'right',
+} = defineProps<{
+  current: number | null | undefined
+  previous: number | null | undefined
+  /** When true, a decrease is treated as positive (e.g. position ranking). */
+  inverted?: boolean
+  size?: '2xs' | 'xs' | 'sm'
+  align?: 'left' | 'center' | 'right'
+}>()
+
+// Raw change only. UiTrend owns the `inverted` handling, so flipping the sign
+// here too would point the number against its own arrow and colour. A rise
+// from 0 has no percent: it is new, which a dash ("no data") hid.
+const change = computed<{ _tag: 'Missing' } | { _tag: 'New' } | { _tag: 'Percent', value: number }>(() => {
+  if (current == null || previous == null)
+    return { _tag: 'Missing' }
+  if (previous === 0)
+    return current > 0 ? { _tag: 'New' } : { _tag: 'Missing' }
+  return { _tag: 'Percent', value: calcTrendPercent(current, previous) }
+})
+
+const alignClass = computed(() => align === 'right' ? 'justify-end' : align === 'center' ? 'justify-center' : 'justify-start')
+</script>
+
+<template>
+  <div class="flex items-center" :class="alignClass">
+    <UiTableDash v-if="change._tag === 'Missing'" />
+    <UiTrend v-else-if="change._tag === 'New'" is-new :size="size" />
+    <UiTrend v-else :value="change.value" format="percent" :inverted="inverted" :size="size" />
+  </div>
+</template>

package/app/components/element/UiAtmosphere.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+// The greydient application primitive. Turns intent into a correctly-rendered
+// atmospheric layer — palette × geometry × intensity, plus grain — with the
+// mask/opacity/mode-handling all centralized in global.css (`.ui-atmosphere`).
+// Consumers place it as the first child of a `relative` container (content then
+// sits above it); for `sky` it spans the top of the nearest positioned ancestor.
+//
+// This is the ONE place greydient atmosphere is produced. Never on data surfaces
+// (charts/tables/metrics); contained identity chrome follows DESIGN's explicit
+// micro-surface exception — "atmosphere at the edges, silence at the center".
+type Palette = 'ink' | 'twilight' | 'dawn' | 'dusk' | 'dusk-vivid' | 'mist' | 'ash'
+type Geometry = 'sky' | 'bloom' | 'wash' | 'veil'
+type Intensity = 'subtle' | 'ambient' | 'present' | 'vivid'
+type Preset = 'front-door' | 'error' | 'ai' | 'preview' | 'share'
+
+const {
+  palette: paletteProp,
+  geometry: geometryProp,
+  intensity: intensityProp,
+  grain = true,
+  preset,
+} = defineProps<{
+  /** Which greydient — the day-cycle of visibility states. */
+  palette?: Palette
+  /** How it's shaped. sky = full-bleed top; bloom = soft glow; wash = framed directional; veil = preview scrim. */
+  geometry?: Geometry
+  /** How present, per mode. subtle behind text; vivid is reserved for tiny identity surfaces. */
+  intensity?: Intensity
+  /** Fine grain for tooth. Default on. */
+  grain?: boolean
+  /** Semantic shortcut — resolves palette+geometry+intensity from one intent. Explicit props win. */
+  preset?: Preset
+}>()
+
+// The semantic map — the design decision ("front door = dusk bloom") lives HERE,
+// once, instead of scattered across surfaces. Explicit props still override.
+// Canonical palette roles (DESIGN / brand-kit): ink = OG/share ground · twilight
+// = auth · dawn = marketing warmth · dusk = hero (spends color) · mist = behind
+// text · ash = neutral. Presets encode those roles once.
+const PRESETS: Record<Preset, { palette: Palette, geometry: Geometry, intensity: Intensity }> = {
+  'front-door': { palette: 'twilight', geometry: 'bloom', intensity: 'present' },
+  'error': { palette: 'twilight', geometry: 'sky', intensity: 'subtle' },
+  'ai': { palette: 'dusk', geometry: 'bloom', intensity: 'ambient' },
+  'preview': { palette: 'mist', geometry: 'veil', intensity: 'subtle' },
+  'share': { palette: 'ink', geometry: 'wash', intensity: 'present' },
+}
+
+const base = computed(() => (preset ? PRESETS[preset] : { palette: 'ash' as Palette, geometry: 'wash' as Geometry, intensity: 'ambient' as Intensity }))
+const palette = computed(() => paletteProp ?? base.value.palette)
+const geometry = computed(() => geometryProp ?? base.value.geometry)
+const intensity = computed(() => intensityProp ?? base.value.intensity)
+</script>
+
+<template>
+  <div
+    aria-hidden="true"
+    class="ui-atmosphere"
+    :data-geometry="geometry"
+    :data-intensity="intensity"
+    :data-grain="grain ? '' : undefined"
+    :style="{ '--_atmo-greydient': `var(--greydient-${palette})` }"
+  />
+</template>

package/app/components/element/UiAuthHeading.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+// Presentational heading for the auth/onboarding panels (login, onboarding,
+// brand-kit showcase). Title + optional description, in the canonical auth
+// type scale. Pure presentation — no runtime services.
+const { title, description, size = 'lg' } = defineProps<{
+  title: string
+  description?: string
+  size?: 'md' | 'lg'
+}>()
+</script>
+
+<template>
+  <div class="mb-6">
+    <h1
+      class="font-semibold tracking-tight text-highlighted leading-[1.1] mb-3"
+      :class="size === 'lg' ? 'text-3xl' : 'text-2xl'"
+    >
+      {{ title }}
+    </h1>
+    <p v-if="description" class="text-muted text-sm leading-relaxed">
+      {{ description }}
+    </p>
+  </div>
+</template>

package/app/components/element/UiAuthProviders.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { UiButton } from '#components'
+// Provider sign-in/sign-up button list shared by the login + onboarding auth
+// panels (and the brand-kit showcase). The first provider renders as the CTA,
+// the rest as secondary; a "Last used" label marks the promoted provider.
+//
+// Pure presentation: labels, hrefs and ordering are computed by the consumer
+// (each page builds the source param + copy). This component only renders and
+// emits `select` so the consumer can persist the last-used provider.
+export interface UiAuthProvider {
+  id: string
+  label: string
+  icon: string
+  href?: string
+  external?: boolean
+  lastUsed?: boolean
+  testId?: string
+}
+
+const { providers } = defineProps<{ providers: UiAuthProvider[] }>()
+const emit = defineEmits<{ select: [id: string] }>()
+</script>
+
+<template>
+  <div class="flex flex-col gap-3">
+    <div v-for="(p, idx) in providers" :key="p.id" class="relative">
+      <UiButton
+        :data-testid="p.testId"
+        :to="p.href"
+        :external="p.external"
+        :purpose="idx === 0 ? 'cta' : 'secondary'"
+        size="lg"
+        :icon="p.icon"
+        block
+        @click="emit('select', p.id)"
+      >
+        {{ p.label }}
+        <template v-if="p.lastUsed && providers.length > 1" #trailing>
+          <span class="absolute right-4 text-[11px] font-medium tracking-wide opacity-60">
+            Last used
+          </span>
+        </template>
+      </UiButton>
+    </div>
+  </div>
+</template>

package/app/components/element/UiBrandIcon.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { drawingToSvg, faviconDrawing, markDrawing } from 'nuxtseo-shared/brand'
+import { computed, useId } from 'vue'
+
+const { size = 'md', variant = 'tile' } = defineProps<{
+  size?: 'md' | 'lg'
+  variant?: 'tile' | 'mark'
+}>()
+
+const sizeClasses = {
+  md: 'size-7',
+  lg: 'size-8',
+} as const
+
+const pixelSizes = {
+  md: 28,
+  lg: 32,
+} as const
+
+// Pro surfaces only. The tile is the Pro favicon: the summit on the plate with
+// the original violet gradient on the climb. The mark is the Pro summit, whose
+// climb takes the theme's gradient.
+const id = useId()
+const svg = computed(() => {
+  const px = pixelSizes[size]
+  const drawing = variant === 'mark' ? markDrawing({ product: 'pro', size: px }) : faviconDrawing({ product: 'pro', size: px })
+  return drawingToSvg(drawing, { idPrefix: `brand-icon-${id}`, attrs: 'class="size-full" aria-hidden="true" focusable="false"' })
+})
+</script>
+
+<template>
+  <!-- Trusted markup: drawingToSvg only interpolates the brand's own path data. -->
+  <span
+    class="relative inline-block shrink-0"
+    :class="[sizeClasses[size], variant === 'mark' ? 'text-highlighted' : '']"
+    aria-hidden="true"
+    v-html="svg"
+  />
+</template>