@openreachtech/furo-vue 1.3.1

package/lib/components/molecules/FuroAvatarGroup/FuroAvatarGroup.vue

@@ -0,0 +1,126 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import FuroAvatar from '../../atoms/FuroAvatar/FuroAvatar.vue'
+import FuroAvatarGroupContext from './FuroAvatarGroupContext.js'
+
+export default defineComponent({
+  name: 'FuroAvatarGroup',
+
+  components: {
+    FuroAvatar,
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {import('vue').PropType<import('./FuroAvatarGroupContext.js').Props['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  /**
+   * Setup of this component.
+   *
+   * @param {import('./FuroAvatarGroupContext.js').Props} props - Props.
+   * @param {import('vue').SetupContext} componentContext - Setup context.
+   * @returns {{ context: FuroAvatarGroupContext }} Render context.
+   */
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroAvatarGroupContext.create({
+      props,
+      componentContext,
+    })
+      .setupComponent()
+
+    return {
+      context,
+    }
+  },
+})
+</script>
+
+<template>
+  <div
+    v-bind="{
+      ...context.extractRootAttributes(),
+      ...$attrs,
+    }"
+    :class="context.extractRootClassNames()"
+    :style="context.extractRootStyle()"
+  >
+    <FuroAvatar
+      v-for="(avatar, index) of context.extractVisibleAvatars()"
+      :key="index"
+      class="member"
+      :parcel="context.buildAvatarParcel({ avatar })"
+    />
+
+    <slot
+      v-if="context.hasOverflow()"
+      name="overflow"
+      v-bind="{
+        avatars: context.extractOverflowAvatars(),
+        count: context.extractOverflowCount(),
+      }"
+    >
+      <span class="overflow">{{ context.extractOverflowLabel() }}</span>
+    </slot>
+  </div>
+</template>
+
+<style scoped>
+@layer furo {
+  .unit-avatar-group {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  /* The ring keeps an overlap reading as two people, not one clipped shape. */
+  .unit-avatar-group > .member,
+  .unit-avatar-group > .overflow {
+    --furo-avatar-size: var(--furo-avatar-group-size, 1.5rem);
+
+    flex: none;
+
+    width: var(--furo-avatar-group-size, 1.5rem);
+    height: var(--furo-avatar-group-size, 1.5rem);
+
+    border: var(--size-thinnest) solid var(--color-border);
+    border-radius: var(--size-border-radius-full);
+
+    box-sizing: border-box;
+  }
+
+  .unit-avatar-group.spacing-wide > :not(:first-child) {
+    margin-inline-start: -0.5rem;
+  }
+
+  .unit-avatar-group.spacing-narrow > :not(:first-child) {
+    margin-inline-start: -0.75rem;
+  }
+
+  .unit-avatar-group > .overflow {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    background-color: var(--color-muted);
+
+    color: var(--color-muted-foreground);
+    font: var(--font-label-tiny);
+
+    user-select: none;
+  }
+}
+</style>

package/lib/components/molecules/FuroAvatarGroup/FuroAvatarGroupContext.js

@@ -0,0 +1,245 @@
+import BaseFuroContext from '../../../contexts/BaseFuroContext.js'
+
+/**
+ * Furo-owned parcel keys (not forwarded verbatim to the root element).
+ */
+const FURO_AVATAR_GROUP_PARCEL_KEYS = new Set([
+  'avatars',
+  'maxVisibleAvatars',
+  'spacing',
+  'size',
+])
+
+/**
+ * Context class for FuroAvatarGroup molecule.
+ *
+ * @extends {BaseFuroContext<null, Props, null>}
+ */
+export default class FuroAvatarGroupContext extends BaseFuroContext {
+  /**
+   * How many avatars render before the rest become a count.
+   *
+   * The design draws up to five, then one collapsed form.
+   *
+   * @returns {number}
+   */
+  static get DEFAULT_MAX_VISIBLE_AVATARS () {
+    return 5
+  }
+
+  /**
+   * Diameter of one avatar in the group.
+   *
+   * The design draws the group at its smallest avatar step only.
+   *
+   * @returns {string}
+   */
+  static get DEFAULT_SIZE () {
+    return '1.5rem'
+  }
+
+  /**
+   * Default spacing.
+   *
+   * @returns {FuroAvatarGroupSpacing}
+   */
+  static get DEFAULT_SPACING () {
+    return 'wide'
+  }
+
+  /**
+   * Spacings the group can take.
+   *
+   * @returns {Array<FuroAvatarGroupSpacing>}
+   */
+  static get SPACINGS () {
+    return [
+      'wide',
+      'narrow',
+    ]
+  }
+
+  /**
+   * get: Constructor of this class.
+   *
+   * @override
+   * @returns {typeof FuroAvatarGroupContext}
+   */
+  get Ctor () {
+    return /** @type {typeof FuroAvatarGroupContext} */ (
+      this.constructor
+    )
+  }
+
+  /**
+   * get: the people in the group, in the order they render.
+   *
+   * @returns {Array<FuroAvatarGroupEntry>}
+   */
+  get avatars () {
+    return this.parcel?.avatars
+      ?? []
+  }
+
+  /**
+   * get: how many avatars render before the rest become a count.
+   *
+   * Clamped to one: a group showing only a count is a number, not a group.
+   *
+   * @returns {number}
+   */
+  get maxVisibleAvatars () {
+    const requested = this.parcel?.maxVisibleAvatars
+      ?? this.Ctor.DEFAULT_MAX_VISIBLE_AVATARS
+
+    return Math.max(requested, 1)
+  }
+
+  /**
+   * get: spacing between overlapping avatars.
+   *
+   * @returns {FuroAvatarGroupSpacing}
+   */
+  get spacing () {
+    return this.parcel?.spacing
+      ?? this.Ctor.DEFAULT_SPACING
+  }
+
+  /**
+   * get: diameter of one avatar.
+   *
+   * @returns {string}
+   */
+  get size () {
+    return this.parcel?.size
+      ?? this.Ctor.DEFAULT_SIZE
+  }
+
+  /**
+   * Whether the group holds more people than it renders.
+   *
+   * @returns {boolean}
+   */
+  hasOverflow () {
+    return this.avatars.length > this.maxVisibleAvatars
+  }
+
+  /**
+   * Extract the avatars that render.
+   *
+   * @returns {Array<FuroAvatarGroupEntry>}
+   */
+  extractVisibleAvatars () {
+    return this.avatars.slice(0, this.maxVisibleAvatars)
+  }
+
+  /**
+   * Extract the avatars the count stands for.
+   *
+   * Handed to the overflow slot so a consumer need not recompute them.
+   *
+   * @returns {Array<FuroAvatarGroupEntry>}
+   */
+  extractOverflowAvatars () {
+    return this.avatars.slice(this.maxVisibleAvatars)
+  }
+
+  /**
+   * Extract how many people the count stands for.
+   *
+   * @returns {number}
+   */
+  extractOverflowCount () {
+    return this.extractOverflowAvatars().length
+  }
+
+  /**
+   * Extract the label the count renders.
+   *
+   * @returns {string}
+   */
+  extractOverflowLabel () {
+    return `+${this.extractOverflowCount()}`
+  }
+
+  /**
+   * Build the parcel handed to one avatar.
+   *
+   * @param {{
+   *   avatar: FuroAvatarGroupEntry
+   * }} params - Parameters.
+   * @returns {Record<string, unknown>}
+   */
+  buildAvatarParcel ({
+    avatar,
+  }) {
+    return {
+      ...avatar,
+      shape: 'circle',
+    }
+  }
+
+  /**
+   * Extract CSS class map for the root.
+   *
+   * @returns {Record<string, boolean>}
+   */
+  extractRootClassNames () {
+    return Object.fromEntries([
+      ['unit-avatar-group', true],
+      [`spacing-${this.spacing}`, true],
+    ])
+  }
+
+  /**
+   * Extract inline style for the group's dimensions.
+   *
+   * @returns {{
+   *   '--furo-avatar-group-size': string
+   * }}
+   */
+  extractRootStyle () {
+    return {
+      '--furo-avatar-group-size': this.size,
+    }
+  }
+
+  /**
+   * Extract attributes forwarded to the root element.
+   *
+   * @returns {Record<string, unknown>}
+   */
+  extractRootAttributes () {
+    const passthroughEntries = Object.entries(this.parcel ?? {})
+      .filter(([key]) => !FURO_AVATAR_GROUP_PARCEL_KEYS.has(key))
+
+    return Object.fromEntries(passthroughEntries)
+  }
+}
+
+/**
+ * @typedef {'wide' | 'narrow'} FuroAvatarGroupSpacing
+ */
+
+/**
+ * @typedef {{
+ *   imageSource?: string
+ *   imageAlternativeText?: string
+ *   fallbackText?: string
+ * }} FuroAvatarGroupEntry
+ */
+
+/**
+ * @typedef {{
+ *   parcel: FuroAvatarGroupParcel | null
+ * }} Props
+ */
+
+/**
+ * @typedef {{
+ *   avatars?: Array<FuroAvatarGroupEntry>
+ *   maxVisibleAvatars?: number
+ *   spacing?: FuroAvatarGroupSpacing
+ *   size?: string
+ * }} FuroAvatarGroupParcel
+ */

package/lib/components/molecules/FuroBreadcrumb/FuroBreadcrumb.vue

@@ -0,0 +1,219 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import FuroIcon from '../../atoms/FuroIcon/FuroIcon.vue'
+import FuroBreadcrumbContext from './FuroBreadcrumbContext.js'
+
+export default defineComponent({
+  name: 'FuroBreadcrumb',
+
+  components: {
+    FuroIcon,
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {import('vue').PropType<import('./FuroBreadcrumbContext.js').Props['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  /**
+   * Setup of this component.
+   *
+   * @param {import('./FuroBreadcrumbContext.js').Props} props - Props.
+   * @param {import('vue').SetupContext} componentContext - Setup context.
+   * @returns {{ context: FuroBreadcrumbContext }} Render context.
+   */
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroBreadcrumbContext.create({
+      props,
+      componentContext,
+    })
+      .setupComponent()
+
+    return {
+      context,
+    }
+  },
+})
+</script>
+
+<template>
+  <nav
+    v-bind="{
+      ...context.extractRootAttributes(),
+      ...$attrs,
+    }"
+    class="unit-breadcrumb"
+  >
+    <ol class="trail">
+      <li
+        v-for="crumb of context.extractLeadingItems()"
+        :key="crumb.label"
+        class="entry"
+      >
+        <component
+          :is="context.extractItemTag({ crumb })"
+          v-bind="context.extractItemAttributes({ crumb })"
+          :class="context.extractItemClassNames({ crumb })"
+        >
+          <slot
+            name="crumb"
+            v-bind="{ crumb }"
+          >
+            {{ crumb.label }}
+          </slot>
+        </component>
+
+        <span
+          class="separator"
+          aria-hidden="true"
+        >
+          <slot name="separator">
+            <FuroIcon
+              name="ph:caret-right"
+              class="separator-icon"
+            />
+          </slot>
+        </span>
+      </li>
+
+      <li
+        v-if="context.hasOverflow()"
+        class="entry"
+      >
+        <slot
+          name="overflow"
+          v-bind="{ items: context.extractOverflowItems() }"
+        >
+          <span class="overflow">
+            <FuroIcon
+              name="ph:dots-three"
+              class="overflow-icon"
+            />
+          </span>
+        </slot>
+
+        <span
+          class="separator"
+          aria-hidden="true"
+        >
+          <slot name="separator">
+            <FuroIcon
+              name="ph:caret-right"
+              class="separator-icon"
+            />
+          </slot>
+        </span>
+      </li>
+
+      <li
+        v-for="crumb of context.extractTrailingItems()"
+        :key="crumb.label"
+        class="entry"
+      >
+        <component
+          :is="context.extractItemTag({ crumb })"
+          v-bind="context.extractItemAttributes({ crumb })"
+          :class="context.extractItemClassNames({ crumb })"
+        >
+          <slot
+            name="crumb"
+            v-bind="{ crumb }"
+          >
+            {{ crumb.label }}
+          </slot>
+        </component>
+
+        <span
+          v-if="!context.isCurrent({ crumb })"
+          class="separator"
+          aria-hidden="true"
+        >
+          <slot name="separator">
+            <FuroIcon
+              name="ph:caret-right"
+              class="separator-icon"
+            />
+          </slot>
+        </span>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<style scoped>
+@layer furo {
+  .unit-breadcrumb > .trail {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    margin-block: 0;
+    margin-inline: 0;
+
+    padding-inline: 0;
+
+    list-style: none;
+  }
+
+  .unit-breadcrumb > .trail > .entry {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--size-space-tiny);
+  }
+
+  .unit-breadcrumb > .trail > .entry > .crumb {
+    color: var(--color-foreground-secondary);
+    font: var(--font-body-medium);
+    text-decoration: none;
+  }
+
+  .unit-breadcrumb > .trail > .entry > .crumb.current {
+    color: var(--color-foreground);
+    font: var(--font-label-small);
+  }
+
+  .unit-breadcrumb > .trail > .entry > a.crumb:hover {
+    color: var(--color-foreground);
+    text-decoration: underline;
+  }
+
+  .unit-breadcrumb > .trail > .entry > a.crumb:focus-visible {
+    outline: none;
+    border-radius: var(--size-border-radius-2x-small);
+    box-shadow: 0 0 0 0.125rem var(--color-ring);
+  }
+
+  .unit-breadcrumb > .trail > .entry > .crumb.disabled {
+    color: var(--color-foreground-light);
+    cursor: not-allowed;
+  }
+
+  .unit-breadcrumb > .trail > .entry > .separator,
+  .unit-breadcrumb > .trail > .entry > .overflow {
+    display: inline-flex;
+    align-items: center;
+
+    color: var(--color-foreground-tertiary);
+  }
+
+  .unit-breadcrumb .separator-icon,
+  .unit-breadcrumb .overflow-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+</style>