@openreachtech/furo-vue 1.3.1

package/lib/components/atoms/FuroAvatar/FuroAvatar.vue

@@ -0,0 +1,135 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import {
+  Avatar as RekaAvatar,
+} from 'reka-ui/namespaced'
+
+import FuroAvatarContext from './FuroAvatarContext.js'
+
+export default defineComponent({
+  name: 'FuroAvatar',
+
+  components: {
+    AvatarRoot: RekaAvatar['Root'],
+    AvatarImage: RekaAvatar['Image'],
+    AvatarFallback: RekaAvatar['Fallback'],
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {import('vue').PropType<import('./FuroAvatarContext.js').Props['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  /**
+   * Setup of this component.
+   *
+   * @param {import('./FuroAvatarContext.js').Props} props - Props.
+   * @param {import('vue').SetupContext} componentContext - Setup context.
+   * @returns {{ context: FuroAvatarContext }} Render context.
+   */
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroAvatarContext.create({
+      props,
+      componentContext,
+    })
+      .setupComponent()
+
+    return {
+      context,
+    }
+  },
+})
+</script>
+
+<template>
+  <AvatarRoot
+    :class="context.extractRootClassNames()"
+    v-bind="{
+      ...context.extractRootAttributes(),
+      ...$attrs,
+    }"
+  >
+    <AvatarImage
+      v-if="context.hasImage()"
+      class="image"
+      :src="context.imageSource"
+      :alt="context.imageAlternativeText"
+    />
+
+    <AvatarFallback
+      class="fallback"
+      v-bind="context.buildOptionalFallbackAttributes()"
+    >
+      <slot name="fallback">
+        {{ context.fallbackText }}
+      </slot>
+    </AvatarFallback>
+  </AvatarRoot>
+</template>
+
+<style scoped>
+@layer furo {
+  .unit-avatar {
+    --furo-avatar-size: 2.5rem;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+
+    width: var(--furo-avatar-size);
+    height: var(--furo-avatar-size);
+
+    overflow: hidden;
+
+    background-color: var(--color-muted);
+
+    user-select: none;
+    vertical-align: middle;
+  }
+
+  .unit-avatar.circle {
+    border-radius: var(--size-border-radius-full);
+  }
+
+  .unit-avatar.square {
+    border-radius: var(--size-border-radius-medium);
+  }
+
+  .unit-avatar > .image {
+    width: 100%;
+    height: 100%;
+
+    border-radius: inherit;
+
+    object-fit: cover;
+  }
+
+  .unit-avatar > .fallback {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 100%;
+    height: 100%;
+
+    color: var(--color-muted-foreground);
+    font: var(--font-label-small);
+    text-transform: uppercase;
+  }
+}
+</style>

package/lib/components/atoms/FuroAvatar/FuroAvatarContext.js

@@ -0,0 +1,147 @@
+import BaseFuroContext from '../../../contexts/BaseFuroContext.js'
+
+/**
+ * Furo-owned parcel keys (not forwarded verbatim to the underlying primitive
+ * root). `shape` drives the root class variant; `imageSource`,
+ * `imageAlternativeText`, `fallbackText`, and `fallbackDelay` are read by the
+ * template and applied to the Image / Fallback sub-elements.
+ */
+const FURO_AVATAR_PARCEL_KEYS = new Set([
+  'shape',
+  'imageSource',
+  'imageAlternativeText',
+  'fallbackText',
+  'fallbackDelay',
+])
+
+/**
+ * Context class for FuroAvatar atom.
+ *
+ * Presentational image avatar with a graceful text fallback. It carries no
+ * value and emits nothing — the image source, alternative text, fallback text,
+ * fallback delay, and shape are read from `parcel`.
+ *
+ * @extends {BaseFuroContext<null, Props, null>}
+ */
+export default class FuroAvatarContext extends BaseFuroContext {
+  /**
+   * get: shape of the avatar.
+   *
+   * @returns {FuroAvatarShape} Shape; defaults to circle.
+   */
+  get shape () {
+    return this.parcel?.shape
+      ?? 'circle'
+  }
+
+  /**
+   * get: image source URL.
+   *
+   * @returns {string | null} Source, or null when no image is provided.
+   */
+  get imageSource () {
+    return this.parcel?.imageSource
+      ?? null
+  }
+
+  /**
+   * get: alternative text for the image.
+   *
+   * @returns {string} Alternative text; empty string when unset.
+   */
+  get imageAlternativeText () {
+    return this.parcel?.imageAlternativeText
+      ?? ''
+  }
+
+  /**
+   * get: text shown while the image is absent or loading (e.g. initials).
+   *
+   * @returns {string} Fallback text; empty string when unset.
+   */
+  get fallbackText () {
+    return this.parcel?.fallbackText
+      ?? ''
+  }
+
+  /**
+   * get: milliseconds before the fallback appears.
+   *
+   * Value-oriented public key mapped to the primitive's delay prop in
+   * `buildOptionalRootAttributes()`. `null` lets the primitive apply its own
+   * default (no delay).
+   *
+   * @returns {number | null} Delay in milliseconds, or null.
+   */
+  get fallbackDelay () {
+    return this.parcel?.fallbackDelay
+      ?? null
+  }
+
+  /**
+   * Whether an image is rendered.
+   *
+   * @returns {boolean} true when an image source is provided.
+   */
+  hasImage () {
+    return this.imageSource !== null
+  }
+
+  /**
+   * Extract CSS class map for the root.
+   *
+   * @returns {Record<string, boolean>}
+   */
+  extractRootClassNames () {
+    return Object.fromEntries([
+      ['unit-avatar', true],
+      [this.shape, true],
+    ])
+  }
+
+  /**
+   * Extract attributes forwarded to the underlying primitive root.
+   *
+   * @returns {Record<string, unknown>}
+   */
+  extractRootAttributes () {
+    const passthroughEntries = Object.entries(this.parcel ?? {})
+      .filter(([key]) => !FURO_AVATAR_PARCEL_KEYS.has(key))
+
+    return Object.fromEntries(passthroughEntries)
+  }
+
+  /**
+   * Build optional fallback attributes whose values are absent unless set.
+   *
+   * @returns {Record<string, unknown>}
+   */
+  buildOptionalFallbackAttributes () {
+    const entries = [
+      ['delayMs', this.fallbackDelay],
+    ]
+      .filter(([, value]) => value !== null)
+
+    return Object.fromEntries(entries)
+  }
+}
+
+/**
+ * @typedef {'circle' | 'square'} FuroAvatarShape
+ */
+
+/**
+ * @typedef {{
+ *   parcel: FuroAvatarParcel | null
+ * }} Props
+ */
+
+/**
+ * @typedef {{
+ *   imageSource?: string
+ *   imageAlternativeText?: string
+ *   fallbackText?: string
+ *   fallbackDelay?: number
+ *   shape?: FuroAvatarShape
+ * }} FuroAvatarParcel
+ */

package/lib/components/atoms/FuroBadge/FuroBadge.vue

@@ -0,0 +1,240 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import FuroBadgeContext from './FuroBadgeContext.js'
+
+export default defineComponent({
+  name: 'FuroBadge',
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {import('vue').PropType<import('./FuroBadgeContext.js').Props['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  /**
+   * Setup of this component.
+   *
+   * @param {import('./FuroBadgeContext.js').Props} props - Props.
+   * @param {import('vue').SetupContext} componentContext - Setup context.
+   * @returns {{ context: FuroBadgeContext }} Render context.
+   */
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroBadgeContext.create({
+      props,
+      componentContext,
+    })
+      .setupComponent()
+
+    return {
+      context,
+    }
+  },
+})
+</script>
+
+<template>
+  <span
+    v-bind="{
+      ...context.extractRootAttributes(),
+      ...$attrs,
+    }"
+    :class="context.extractRootClassNames()"
+  >
+    <span
+      v-if="context.hasDot()"
+      class="dot"
+    />
+
+    <slot
+      v-if="context.hasText()"
+      v-bind="{ text: context.extractText() }"
+    >
+      <span class="label">{{ context.extractText() }}</span>
+    </slot>
+  </span>
+</template>
+
+<style scoped>
+@layer furo {
+  .unit-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    border: var(--size-thinnest) solid transparent;
+
+    white-space: nowrap;
+  }
+
+  /* `--furo-badge-color` is the family's accent, read as a dot, a border and
+     surfaceless text. A fill and a tint each carry their own label instead. */
+  .unit-badge.tone-accent {
+    --furo-badge-color: var(--color-info);
+    --furo-badge-solid-surface: var(--color-info);
+    --furo-badge-solid-foreground: var(--color-info-foreground);
+    --furo-badge-surface: var(--color-info-subtle);
+    --furo-badge-surface-foreground: var(--color-info-subtle-foreground);
+    --furo-badge-border: var(--color-info-lighter);
+  }
+
+  /* The solid fill reads the dark neutral surface, because the accent above is
+     a text role and a text role is never a fill. See ADR 0039. */
+  .unit-badge.tone-neutral {
+    --furo-badge-color: var(--color-foreground-secondary);
+    --furo-badge-solid-surface: var(--color-primary);
+    --furo-badge-solid-foreground: var(--color-primary-foreground);
+    --furo-badge-surface: var(--color-muted-subtle);
+    /* The neutral tint reads a foreground role, because a neutral family owns
+       no accent step of its own to darken. */
+    --furo-badge-surface-foreground: var(--color-foreground-secondary);
+    --furo-badge-border: var(--color-muted);
+  }
+
+  .unit-badge.tone-success {
+    --furo-badge-color: var(--color-success);
+    --furo-badge-solid-surface: var(--color-success);
+    --furo-badge-solid-foreground: var(--color-success-foreground);
+    --furo-badge-surface: var(--color-success-subtle);
+    --furo-badge-surface-foreground: var(--color-success-subtle-foreground);
+    --furo-badge-border: var(--color-success);
+  }
+
+  .unit-badge.tone-warning {
+    --furo-badge-color: var(--color-warning);
+    --furo-badge-solid-surface: var(--color-warning);
+    --furo-badge-solid-foreground: var(--color-warning-foreground);
+    --furo-badge-surface: var(--color-warning-subtle);
+    --furo-badge-surface-foreground: var(--color-warning-subtle-foreground);
+    --furo-badge-border: var(--color-warning);
+  }
+
+  .unit-badge.tone-error {
+    --furo-badge-color: var(--color-error);
+    --furo-badge-solid-surface: var(--color-error);
+    --furo-badge-solid-foreground: var(--color-error-foreground);
+    --furo-badge-surface: var(--color-error-subtle);
+    --furo-badge-surface-foreground: var(--color-error-subtle-foreground);
+    --furo-badge-border: var(--color-error);
+  }
+
+  /* Excluded from the surfaceless shapes so the neutral outline rule below
+     cannot outrank them and repaint their text. */
+  .unit-badge.emphasis-solid:not(.shape-state):not(.shape-dot) {
+    background-color: var(--furo-badge-solid-surface);
+
+    color: var(--furo-badge-solid-foreground);
+  }
+
+  .unit-badge.emphasis-subtle:not(.shape-state):not(.shape-dot) {
+    background-color: var(--furo-badge-surface);
+
+    color: var(--furo-badge-surface-foreground);
+  }
+
+  .unit-badge.emphasis-outline:not(.shape-state):not(.shape-dot) {
+    border-color: var(--furo-badge-border);
+
+    background-color: var(--furo-badge-surface);
+
+    color: var(--furo-badge-surface-foreground);
+  }
+
+  /* The design gives this one body-coloured text, not the family's subtitle grey. */
+  .unit-badge.tone-neutral.emphasis-outline:not(.shape-state):not(.shape-dot) {
+    color: var(--color-foreground);
+  }
+
+  .unit-badge.shape-text {
+    border-radius: var(--size-border-radius-small);
+
+    gap: var(--size-space-small);
+  }
+
+  .unit-badge.shape-text.size-large {
+    padding-block: 0.125rem;
+    padding-inline: 0.75rem;
+
+    font: var(--font-label-medium);
+  }
+
+  .unit-badge.shape-text.size-medium {
+    padding-block: 0.125rem;
+    padding-inline: 0.5rem;
+
+    font: var(--font-label-small);
+  }
+
+  .unit-badge.shape-text.size-small {
+    border-radius: var(--size-border-radius-2x-small);
+
+    padding-block: 0;
+    padding-inline: 0.5rem;
+
+    font: var(--font-label-small);
+  }
+
+  /* Regular weight where every other combination carries medium. A design
+     inconsistency followed rather than normalised; see docs/furo-badge.md. */
+  .unit-badge.shape-text.tone-neutral.emphasis-subtle {
+    font-weight: var(--font-weight-regular);
+  }
+
+  /* The design draws two steps, not three, so the large step lands here. */
+  .unit-badge.shape-count {
+    border-radius: var(--size-border-radius-full);
+
+    padding-block: 0;
+    padding-inline: 0.5rem;
+
+    font: var(--font-body-medium);
+  }
+
+  .unit-badge.shape-count.size-small {
+    font: var(--font-label-tiny);
+    /* The design's tiny label declares 20px inside a 16px box, which cannot
+       fit, so the box height wins; see docs/furo-badge.md. */
+    line-height: 1rem;
+  }
+
+  .unit-badge.shape-count.single-digit {
+    padding-inline: 0;
+
+    min-width: 1.25rem;
+  }
+
+  .unit-badge.shape-count.single-digit.size-small {
+    min-width: 1rem;
+  }
+
+  .unit-badge.shape-state,
+  .unit-badge.shape-dot {
+    color: var(--furo-badge-color);
+
+    gap: var(--size-space-tiny);
+    font: var(--font-label-small);
+  }
+
+  .unit-badge > .dot {
+    flex-shrink: 0;
+
+    width: 0.375rem;
+    height: 0.375rem;
+
+    border-radius: var(--size-border-radius-full);
+
+    background-color: var(--furo-badge-color);
+  }
+}
+</style>