@dillingerstaffing/strand-vue 0.15.1 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dillingerstaffing/strand-vue",
-  "version": "0.15.1",
+  "version": "0.16.0",
   "description": "Strand UI - Vue 3 component library built on the Strand Design Language",
   "author": "Dillinger Staffing <engineering@dillingerstaffing.com> (https://dillingerstaffing.com)",
   "license": "MIT",
@@ -45,14 +45,15 @@
     "dist/css/*.css"
   ],
   "scripts": {
-    "build": "vite build && cp ../../HTML_REFERENCE.md ./HTML_REFERENCE.md",
+    "prepack": "pnpm run build",
+    "build": "vite build && cp ../../generated/html-reference.md ./HTML_REFERENCE.md && cp ../../docs/design-language.md ./DESIGN_LANGUAGE.md",
     "test": "vitest run"
   },
   "peerDependencies": {
     "vue": "^3.4.0"
   },
   "dependencies": {
-    "@dillingerstaffing/strand": "^0.15.1"
+    "@dillingerstaffing/strand": "^0.16.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.0",

package/src/components/Nav/Nav.vue

@@ -23,7 +23,7 @@
   ```
 -->
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, onMounted, onUnmounted, watch } from 'vue'
 
 export interface NavItem {
   label: string
@@ -49,6 +49,18 @@ function toggleMenu() {
   menuOpen.value = !menuOpen.value
 }
 
+function syncGlassClass(isGlass: boolean) {
+  if (isGlass) {
+    document.body.classList.add('strand-glass-nav-active')
+  } else {
+    document.body.classList.remove('strand-glass-nav-active')
+  }
+}
+
+onMounted(() => syncGlassClass(props.glass))
+onUnmounted(() => document.body.classList.remove('strand-glass-nav-active'))
+watch(() => props.glass, syncGlassClass)
+
 const classes = computed(() => ['strand-nav', props.glass && 'strand-nav--glass'].filter(Boolean).join(' '))
 </script>
 

package/src/components/StarRating/StarRating.test.ts

@@ -0,0 +1,111 @@
+/*! Strand Vue | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect, vi } from 'vitest'
+import { render, fireEvent } from '@testing-library/vue'
+import StarRating from './StarRating.vue'
+
+describe('StarRating', () => {
+  it('renders five radio buttons', () => {
+    const { container } = render(StarRating, {
+      props: { value: 0, ariaLabel: 'Rate' },
+    })
+    expect(container.querySelectorAll('[role="radio"]').length).toBe(5)
+  })
+
+  it('applies the active class to stars up to the value', () => {
+    const { container } = render(StarRating, {
+      props: { value: 3, ariaLabel: 'Rate' },
+    })
+    expect(
+      container.querySelectorAll('.strand-star-rating__star--active').length,
+    ).toBe(3)
+  })
+
+  it('sets aria-checked true on the selected star', () => {
+    const { container } = render(StarRating, {
+      props: { value: 2, ariaLabel: 'Rate' },
+    })
+    const radios = container.querySelectorAll('[role="radio"]')
+    expect(radios[1]).toHaveAttribute('aria-checked', 'true')
+    expect(radios[0]).toHaveAttribute('aria-checked', 'false')
+  })
+
+  it('calls onChange with the clicked star value', async () => {
+    const onChange = vi.fn()
+    const { container } = render(StarRating, {
+      props: { value: 0, ariaLabel: 'Rate', onChange },
+    })
+    const radios = container.querySelectorAll('[role="radio"]')
+    await fireEvent.click(radios[3])
+    expect(onChange).toHaveBeenCalledWith(4)
+  })
+
+  it('does not call onChange in readOnly mode', async () => {
+    const onChange = vi.fn()
+    const { container } = render(StarRating, {
+      props: { value: 2, ariaLabel: 'Rate', readOnly: true, onChange },
+    })
+    const radios = container.querySelectorAll('[role="radio"]')
+    await fireEvent.click(radios[4])
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it('applies the size modifier class', () => {
+    const { container } = render(StarRating, {
+      props: { value: 0, ariaLabel: 'Rate', size: 'lg' },
+    })
+    expect(container.querySelector('.strand-star-rating--lg')).toBeInTheDocument()
+  })
+
+  it('defaults to md size', () => {
+    const { container } = render(StarRating, {
+      props: { value: 0, ariaLabel: 'Rate' },
+    })
+    expect(container.querySelector('.strand-star-rating--md')).toBeInTheDocument()
+  })
+
+  it('applies readonly class when readOnly is set', () => {
+    const { container } = render(StarRating, {
+      props: { value: 3, ariaLabel: 'Rate', readOnly: true },
+    })
+    expect(
+      container.querySelector('.strand-star-rating--readonly'),
+    ).toBeInTheDocument()
+  })
+
+  it('exposes data-strand-component attribute', () => {
+    const { container } = render(StarRating, {
+      props: { value: 0, ariaLabel: 'Rate' },
+    })
+    expect(
+      container.querySelector('[data-strand-component="star-rating"]'),
+    ).toBeInTheDocument()
+  })
+
+  it('reflects the aria-label prop on the radiogroup', () => {
+    const { container } = render(StarRating, {
+      props: { value: 0, ariaLabel: 'Rate event' },
+    })
+    expect(container.querySelector('[aria-label="Rate event"]')).toBeInTheDocument()
+  })
+
+  it('activates a star on Space keydown', async () => {
+    const onChange = vi.fn()
+    const { container } = render(StarRating, {
+      props: { value: 0, ariaLabel: 'Rate', onChange },
+    })
+    const radios = container.querySelectorAll('[role="radio"]')
+    await fireEvent.keyDown(radios[1], { key: ' ' })
+    expect(onChange).toHaveBeenCalledWith(2)
+  })
+
+  it('disables star buttons in read-only mode', () => {
+    const { container } = render(StarRating, {
+      props: { value: 3, ariaLabel: 'Rate', readOnly: true },
+    })
+    const radios = container.querySelectorAll('[role="radio"]')
+    for (const r of radios) {
+      expect(r).toBeDisabled()
+    }
+  })
+})

package/src/components/StarRating/StarRating.vue

@@ -0,0 +1,97 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Interactive 1-to-5 star rating control. Mirrors the Preact and Svelte
+  StarRating APIs for cross-consumer parity.
+
+  @example
+  ```vue
+  <script setup>
+  import { ref } from 'vue';
+  import { StarRating } from '@dillingerstaffing/strand-vue';
+  const value = ref(0);
+  </script>
+
+  <template>
+    <StarRating
+      :value="value"
+      :onChange="(v) => value = v"
+      ariaLabel="Rate this event"
+      size="md"
+    />
+  </template>
+  ```
+-->
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+export interface StarRatingProps {
+  value: number
+  onChange?: (v: number) => void
+  size?: 'sm' | 'md' | 'lg'
+  readOnly?: boolean
+  ariaLabel: string
+}
+
+const props = withDefaults(defineProps<StarRatingProps>(), {
+  size: 'md',
+  readOnly: false,
+})
+
+const hover = ref(0)
+
+const classes = computed(() =>
+  [
+    'strand-star-rating',
+    `strand-star-rating--${props.size}`,
+    props.readOnly && 'strand-star-rating--readonly',
+  ]
+    .filter(Boolean)
+    .join(' '),
+)
+
+const display = computed(() => hover.value || props.value)
+
+function select(n: number): void {
+  if (props.readOnly) return
+  props.onChange?.(n)
+}
+
+function onKey(e: KeyboardEvent, n: number): void {
+  if (props.readOnly) return
+  if (e.key === ' ' || e.key === 'Enter') {
+    e.preventDefault()
+    select(n)
+  }
+}
+</script>
+
+<template>
+  <div
+    :class="classes"
+    role="radiogroup"
+    :aria-label="ariaLabel"
+    data-strand-component="star-rating"
+    :data-value="String(value)"
+  >
+    <button
+      v-for="n in 5"
+      :key="n"
+      type="button"
+      :class="`strand-star-rating__star${n <= display ? ' strand-star-rating__star--active' : ''}`"
+      role="radio"
+      :aria-checked="n === value ? 'true' : 'false'"
+      :aria-label="`${n} star${n > 1 ? 's' : ''}`"
+      :tabindex="readOnly ? -1 : 0"
+      :disabled="readOnly"
+      :data-star-value="String(n)"
+      @click="select(n)"
+      @keydown="(e: KeyboardEvent) => onKey(e, n)"
+      @mouseenter="!readOnly && (hover = n)"
+      @mouseleave="!readOnly && (hover = 0)"
+      @focus="!readOnly && (hover = n)"
+      @blur="!readOnly && (hover = 0)"
+    >
+      <span class="strand-star-rating__glyph" aria-hidden="true">{{ "\u2605" }}</span>
+    </button>
+  </div>
+</template>

package/src/components/StarRating/index.ts

@@ -0,0 +1,2 @@
+/*! Strand Vue | MIT License | dillingerstaffing.com */
+export { default as StarRating } from './StarRating.vue'

package/src/index.ts

@@ -45,3 +45,4 @@ export { default as Tooltip } from "./components/Tooltip/Tooltip.vue";
 export { default as Progress } from "./components/Progress/Progress.vue";
 export { default as Spinner } from "./components/Spinner/Spinner.vue";
 export { default as Skeleton } from "./components/Skeleton/Skeleton.vue";
+export { default as StarRating } from "./components/StarRating/StarRating.vue";