@dillingerstaffing/strand-svelte 0.15.2 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dillingerstaffing/strand-svelte",
-  "version": "0.15.2",
+  "version": "0.16.0",
   "description": "Strand UI - Svelte component library built on the Strand Design Language",
   "author": "Dillinger Staffing <engineering@dillingerstaffing.com> (https://dillingerstaffing.com)",
   "license": "MIT",
@@ -56,7 +56,7 @@
     "svelte": "^4.0.0 || ^5.0.0"
   },
   "dependencies": {
-    "@dillingerstaffing/strand": "^0.15.2"
+    "@dillingerstaffing/strand": "^0.16.0"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^5.0.0",

package/src/components/Nav/Nav.svelte

@@ -19,6 +19,8 @@
   ```
 -->
 <script lang="ts">
+  import { onMount, onDestroy } from 'svelte'
+
   export interface NavItem {
     label: string
     href: string
@@ -36,6 +38,24 @@
     menuOpen = !menuOpen
   }
 
+  function syncGlassClass(isGlass: boolean) {
+    if (typeof document !== 'undefined') {
+      if (isGlass) {
+        document.body.classList.add('strand-glass-nav-active')
+      } else {
+        document.body.classList.remove('strand-glass-nav-active')
+      }
+    }
+  }
+
+  onMount(() => syncGlassClass(glass))
+  onDestroy(() => {
+    if (typeof document !== 'undefined') {
+      document.body.classList.remove('strand-glass-nav-active')
+    }
+  })
+  $: syncGlassClass(glass)
+
   $: navClasses = ['strand-nav', glass && 'strand-nav--glass'].filter(Boolean).join(' ')
 </script>
 

package/src/components/StarRating/StarRating.svelte

@@ -0,0 +1,79 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  Interactive 1-to-5 star rating control. Mirrors the Preact and Vue
+  StarRating APIs for cross-consumer parity.
+
+  @example
+  ```svelte
+  <script>
+    import { StarRating } from '@dillingerstaffing/strand-svelte';
+    let value = 0;
+  </script>
+
+  <StarRating
+    {value}
+    onChange={(v) => value = v}
+    ariaLabel="Rate this event"
+    size="md"
+  />
+  ```
+-->
+<script lang="ts">
+  export let value: number = 0
+  export let onChange: ((v: number) => void) | undefined = undefined
+  export let size: 'sm' | 'md' | 'lg' = 'md'
+  export let readOnly: boolean = false
+  export let ariaLabel: string
+
+  let hover: number = 0
+
+  $: classes = [
+    'strand-star-rating',
+    `strand-star-rating--${size}`,
+    readOnly && 'strand-star-rating--readonly',
+  ].filter(Boolean).join(' ')
+
+  $: display = hover || value
+
+  function select(n: number): void {
+    if (readOnly) return
+    onChange?.(n)
+  }
+
+  function onKey(e: KeyboardEvent, n: number): void {
+    if (readOnly) return
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault()
+      select(n)
+    }
+  }
+</script>
+
+<div
+  class={classes}
+  role="radiogroup"
+  aria-label={ariaLabel}
+  data-strand-component="star-rating"
+  data-value={String(value)}
+>
+  {#each [1, 2, 3, 4, 5] as n (n)}
+    <button
+      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)}
+      on:click={() => select(n)}
+      on:keydown={(e) => onKey(e, n)}
+      on:mouseenter={readOnly ? undefined : () => (hover = n)}
+      on:mouseleave={readOnly ? undefined : () => (hover = 0)}
+      on:focus={readOnly ? undefined : () => (hover = n)}
+      on:blur={readOnly ? undefined : () => (hover = 0)}
+    >
+      <span class="strand-star-rating__glyph" aria-hidden="true">{'\u2605'}</span>
+    </button>
+  {/each}
+</div>

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

@@ -0,0 +1,101 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect, vi } from 'vitest'
+import { render, fireEvent } from '@testing-library/svelte'
+import StarRating from './StarRating.svelte'
+
+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/index.ts

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

package/src/index.ts

@@ -46,3 +46,4 @@ export { default as Tooltip } from './components/Tooltip/Tooltip.svelte'
 export { default as Progress } from './components/Progress/Progress.svelte'
 export { default as Spinner } from './components/Spinner/Spinner.svelte'
 export { default as Skeleton } from './components/Skeleton/Skeleton.svelte'
+export { default as StarRating } from './components/StarRating/StarRating.svelte'