@openreachtech/furo-vue 1.3.1

package/lib/components/atoms/FuroBadge/FuroBadgeContext.js

@@ -0,0 +1,298 @@
+import BaseFuroContext from '../../../contexts/BaseFuroContext.js'
+
+/**
+ * Furo-owned parcel keys (not forwarded verbatim to the root element).
+ */
+const FURO_BADGE_PARCEL_KEYS = new Set([
+  'label',
+  'count',
+  'shape',
+  'tone',
+  'emphasis',
+  'size',
+])
+
+/**
+ * Context class for FuroBadge atom.
+ *
+ * The design draws four components, one per shape, plus a fifth for status. All
+ * five are the same object, so this is one component with shape and tone.
+ *
+ * @extends {BaseFuroContext<null, Props, null>}
+ */
+export default class FuroBadgeContext extends BaseFuroContext {
+  /**
+   * Shapes the badge can take.
+   *
+   * @returns {Array<FuroBadgeShape>}
+   */
+  static get SHAPES () {
+    return [
+      'text',
+      'count',
+      'state',
+      'dot',
+    ]
+  }
+
+  /**
+   * Tones the badge can carry.
+   *
+   * @returns {Array<FuroBadgeTone>}
+   */
+  static get TONES () {
+    return [
+      'accent',
+      'neutral',
+      'success',
+      'warning',
+      'error',
+    ]
+  }
+
+  /**
+   * Emphases the badge can take.
+   *
+   * @returns {Array<FuroBadgeEmphasis>}
+   */
+  static get EMPHASES () {
+    return [
+      'solid',
+      'subtle',
+      'outline',
+    ]
+  }
+
+  /**
+   * Sizes the badge can take.
+   *
+   * @returns {Array<FuroBadgeSize>}
+   */
+  static get SIZES () {
+    return [
+      'large',
+      'medium',
+      'small',
+    ]
+  }
+
+  /**
+   * Default shape.
+   *
+   * @returns {FuroBadgeShape}
+   */
+  static get DEFAULT_SHAPE () {
+    return 'text'
+  }
+
+  /**
+   * Default tone.
+   *
+   * @returns {FuroBadgeTone}
+   */
+  static get DEFAULT_TONE () {
+    return 'accent'
+  }
+
+  /**
+   * Default emphasis.
+   *
+   * @returns {FuroBadgeEmphasis}
+   */
+  static get DEFAULT_EMPHASIS () {
+    return 'solid'
+  }
+
+  /**
+   * Default size.
+   *
+   * @returns {FuroBadgeSize}
+   */
+  static get DEFAULT_SIZE () {
+    return 'medium'
+  }
+
+  /**
+   * get: Constructor of this class.
+   *
+   * @override
+   * @returns {typeof FuroBadgeContext}
+   */
+  get Ctor () {
+    return /** @type {typeof FuroBadgeContext} */ (
+      this.constructor
+    )
+  }
+
+  /**
+   * get: text shown inside the badge.
+   *
+   * @returns {string} Label; empty string when unset.
+   */
+  get label () {
+    return this.parcel?.label
+      ?? ''
+  }
+
+  /**
+   * get: number shown by the count shape.
+   *
+   * @returns {number | null} Count, or null when unset.
+   */
+  get count () {
+    return this.parcel?.count
+      ?? null
+  }
+
+  /**
+   * get: shape of the badge.
+   *
+   * @returns {FuroBadgeShape} Shape; defaults to text.
+   */
+  get shape () {
+    return this.parcel?.shape
+      ?? this.Ctor.DEFAULT_SHAPE
+  }
+
+  /**
+   * get: tone of the badge.
+   *
+   * @returns {FuroBadgeTone} Tone; defaults to accent.
+   */
+  get tone () {
+    return this.parcel?.tone
+      ?? this.Ctor.DEFAULT_TONE
+  }
+
+  /**
+   * get: emphasis of the badge.
+   *
+   * @returns {FuroBadgeEmphasis} Emphasis; defaults to solid.
+   */
+  get emphasis () {
+    return this.parcel?.emphasis
+      ?? this.Ctor.DEFAULT_EMPHASIS
+  }
+
+  /**
+   * get: size of the badge.
+   *
+   * @returns {FuroBadgeSize} Size; defaults to medium.
+   */
+  get size () {
+    return this.parcel?.size
+      ?? this.Ctor.DEFAULT_SIZE
+  }
+
+  /**
+   * Whether the badge renders a leading dot.
+   *
+   * The dot and state shapes carry the same mark, so one flag covers both.
+   *
+   * @returns {boolean}
+   */
+  hasDot () {
+    return this.shape === 'dot'
+      || this.shape === 'state'
+  }
+
+  /**
+   * Whether the badge renders text.
+   *
+   * @returns {boolean}
+   */
+  hasText () {
+    return this.shape !== 'dot'
+  }
+
+  /**
+   * Extract the text the badge renders.
+   *
+   * The count shape reads `count`; the others read `label`.
+   *
+   * @returns {string}
+   */
+  extractText () {
+    if (this.shape !== 'count') {
+      return this.label
+    }
+
+    return String(
+      this.count
+      ?? 0
+    )
+  }
+
+  /**
+   * Whether the count shape is rendering a single digit.
+   *
+   * The design draws one as a circle rather than a rounded rectangle.
+   *
+   * @returns {boolean}
+   */
+  isSingleDigit () {
+    return this.shape === 'count'
+      && this.extractText().length === 1
+  }
+
+  /**
+   * Extract CSS class map for the root.
+   *
+   * @returns {Record<string, boolean>}
+   */
+  extractRootClassNames () {
+    return Object.fromEntries([
+      ['unit-badge', true],
+      [`shape-${this.shape}`, true],
+      [`tone-${this.tone}`, true],
+      [`emphasis-${this.emphasis}`, true],
+      [`size-${this.size}`, true],
+      ['single-digit', this.isSingleDigit()],
+    ])
+  }
+
+  /**
+   * Extract attributes forwarded to the root element.
+   *
+   * @returns {Record<string, unknown>}
+   */
+  extractRootAttributes () {
+    const passthroughEntries = Object.entries(this.parcel ?? {})
+      .filter(([key]) => !FURO_BADGE_PARCEL_KEYS.has(key))
+
+    return Object.fromEntries(passthroughEntries)
+  }
+}
+
+/**
+ * @typedef {'text' | 'count' | 'state' | 'dot'} FuroBadgeShape
+ */
+
+/**
+ * @typedef {'accent' | 'neutral' | 'success' | 'warning' | 'error'} FuroBadgeTone
+ */
+
+/**
+ * @typedef {'solid' | 'subtle' | 'outline'} FuroBadgeEmphasis
+ */
+
+/**
+ * @typedef {'large' | 'medium' | 'small'} FuroBadgeSize
+ */
+
+/**
+ * @typedef {{
+ *   parcel: FuroBadgeParcel | null
+ * }} Props
+ */
+
+/**
+ * @typedef {{
+ *   label?: string
+ *   count?: number
+ *   shape?: FuroBadgeShape
+ *   tone?: FuroBadgeTone
+ *   emphasis?: FuroBadgeEmphasis
+ *   size?: FuroBadgeSize
+ * }} FuroBadgeParcel
+ */

package/lib/components/atoms/FuroButton/ButtonEmitPayload.js

@@ -0,0 +1,44 @@
+import BaseEmitPayload from '../../../emit-payload/BaseEmitPayload.js'
+
+/**
+ * ButtonEmitPayload.
+ *
+ * @extends {BaseEmitPayload<MouseEvent | PointerEvent, HTMLElement>}
+ */
+export default class ButtonEmitPayload extends BaseEmitPayload {
+  /**
+   * Get the control element from the raw event.
+   *
+   * @override
+   * @returns {HTMLElement | null}
+   */
+  get controlElement () {
+    const element = this.rawEvent?.currentTarget
+      ?? this.rawEvent?.target
+
+    if (!(element instanceof HTMLElement)) {
+      return null
+    }
+
+    return element
+  }
+
+  /**
+   * Whether the native event called preventDefault().
+   *
+   * @returns {boolean}
+   */
+  isDefaultPrevented () {
+    return Boolean(this.rawEvent?.defaultPrevented)
+  }
+}
+
+/**
+ * @typedef {{
+ *   rawEvent: MouseEvent | PointerEvent | null
+ * }} ButtonEmitPayloadParams
+ */
+
+/**
+ * @typedef {ButtonEmitPayloadParams} ButtonEmitPayloadFactoryParams
+ */

package/lib/components/atoms/FuroButton/FuroButton.vue

@@ -0,0 +1,301 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import {
+  Primitive,
+} from 'reka-ui'
+
+import FuroIcon from '../../atoms/FuroIcon/FuroIcon.vue'
+import FuroButtonContext from './FuroButtonContext.js'
+
+export default defineComponent({
+  name: 'FuroButton',
+
+  components: {
+    FuroIcon,
+    Primitive,
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {import('vue').PropType<import('./FuroButtonContext.js').Props['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  slots: /** @type {FuroButtonSlots} */ (Object),
+  emits: FuroButtonContext.EMIT_EVENT_HASH,
+
+  /** @type {import('./FuroButtonContext.js').FuroButtonSetup} */
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroButtonContext.create({
+      props,
+      componentContext,
+    })
+
+    return {
+      context,
+    }
+  },
+})
+
+/**
+ * @import { FuroButtonSlots } from './FuroButtonContext.js'
+ */
+</script>
+
+<template>
+  <Primitive
+    v-bind="{
+      ...context.extractRootAttributes(),
+      ...context.extractPrimitiveParcel(),
+      ...context.extractAriaAttributes(),
+      ...$attrs,
+    }"
+    :class="context.extractRootClassNames()"
+    @click="context.onClick({
+      rawEvent: $event,
+    })"
+  >
+    <slot v-if="context.parcel.asChild" />
+
+    <span
+      v-else
+      class="content-root"
+    >
+      <span
+        class="content"
+        :class="{
+          'is-loading': context.isLoading(),
+        }"
+      >
+        <slot />
+      </span>
+
+      <span
+        v-if="context.isLoading()"
+        class="loading-overlay"
+        aria-hidden="true"
+      >
+        <slot name="loading">
+          <FuroIcon
+            name="ph:circle-notch"
+            class="loading-icon"
+          />
+        </slot>
+      </span>
+    </span>
+  </Primitive>
+</template>
+
+<style scoped>
+@layer furo {
+  .unit-button {
+    position: relative;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--size-space-2x-small);
+
+    min-width: 0;
+
+    border: var(--size-thinnest) solid transparent;
+    border-radius: var(--size-border-radius-medium);
+
+    padding-block: 0.5rem;
+    padding-inline: 0.625rem;
+
+    height: var(--size-input-height);
+
+    background-color: transparent;
+
+    color: var(--color-foreground);
+    font: inherit;
+    font-family: var(--font-family);
+    font-size: var(--font-size);
+    font-weight: var(--font-weight-medium, 500);
+    line-height: var(--font-line-height-body, 1.4);
+    white-space: nowrap;
+    text-decoration: none;
+
+    cursor: pointer;
+
+    transition-duration: var(--transition-timer);
+    transition-property: color, background-color, border-color, box-shadow;
+  }
+
+  .unit-button:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 0.125rem var(--color-ring);
+  }
+
+  .unit-button:active:not(.disabled):not(.loading) {
+    transform: translateY(0.0625rem);
+  }
+
+  .unit-button.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .unit-button.loading {
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .unit-button > .content-root {
+    position: relative;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 100%;
+    height: 100%;
+  }
+
+  .unit-button > .content-root > .content {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: inherit;
+  }
+
+  .unit-button > .content-root > .content.is-loading {
+    visibility: hidden;
+  }
+
+  .unit-button > .content-root > .loading-overlay {
+    position: absolute;
+    inset: 0;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    border-radius: inherit;
+  }
+
+  .unit-button > .content-root > .loading-overlay > .loading-icon,
+  .unit-button > .content-root > .loading-overlay > :deep(.loading-icon) {
+    animation: furo-button-spin var(--transition-timer) linear infinite;
+  }
+
+  .unit-button.default {
+    background-color: var(--color-primary);
+    border-color: var(--color-primary);
+    color: var(--color-primary-foreground);
+  }
+
+  .unit-button.default:hover:not(.disabled):not(.loading) {
+    filter: brightness(0.95);
+  }
+
+  .unit-button.secondary {
+    background-color: var(--color-secondary);
+    border-color: var(--color-secondary);
+    color: var(--color-secondary-foreground);
+  }
+
+  .unit-button.secondary:hover:not(.disabled):not(.loading) {
+    filter: brightness(0.95);
+  }
+
+  .unit-button.destructive {
+    background-color: var(--color-destructive);
+    border-color: var(--color-destructive);
+    color: var(--color-destructive-foreground);
+  }
+
+  .unit-button.destructive:hover:not(.disabled):not(.loading) {
+    filter: brightness(0.95);
+  }
+
+  .unit-button.outline {
+    background-color: transparent;
+    border-color: var(--color-input);
+    color: var(--color-foreground);
+  }
+
+  .unit-button.outline:hover:not(.disabled):not(.loading) {
+    background-color: var(--color-accent);
+    color: var(--color-accent-foreground);
+  }
+
+  .unit-button.ghost {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--color-foreground);
+  }
+
+  .unit-button.ghost:hover:not(.disabled):not(.loading) {
+    background-color: var(--color-accent);
+    color: var(--color-accent-foreground);
+  }
+
+  .unit-button.link {
+    height: auto;
+
+    padding-block: 0;
+    padding-inline: 0;
+
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--color-link);
+  }
+
+  .unit-button.link:hover:not(.disabled):not(.loading) {
+    text-decoration: underline;
+  }
+
+  .unit-button.size-sm {
+    height: 1.75rem;
+
+    padding-block: 0.125rem;
+    padding-inline: 0.625rem;
+
+    font-size: var(--font-size-small);
+  }
+
+  .unit-button.size-lg {
+    height: 2.25rem;
+
+    padding-block: 0.5rem;
+    padding-inline: 0.625rem;
+
+    font-size: var(--font-size-large);
+  }
+
+  .unit-button.size-icon {
+    width: 2rem;
+    min-width: 2rem;
+    height: 2rem;
+
+    padding-block: 0;
+    padding-inline: 0;
+  }
+
+  @keyframes furo-button-spin {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}
+</style>