@dillingerstaffing/strand-svelte 0.5.0 → 0.6.0

package/package.json

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

package/src/components/Alert/Alert.svelte

@@ -13,9 +13,19 @@
     'strand-alert',
     `strand-alert--${status}`,
   ].filter(Boolean).join(' ')
+
+  const statusLabels: Record<string, string> = {
+    info: 'INFO',
+    success: 'COMPLETE',
+    warning: 'WARNING',
+    error: 'ERROR',
+  }
+
+  $: statusLabel = statusLabels[status] ?? status.toUpperCase()
 </script>
 
 <div class={classes} {role} {...$$restProps}>
+  <span class="strand-alert__status">{statusLabel}</span>
   <div class="strand-alert__content">
     <slot />
   </div>

package/src/components/Alert/Alert.test.ts

@@ -61,4 +61,32 @@ describe('Alert', () => {
     const { container } = render(Alert)
     expect(container.querySelector('.strand-alert__content')).toBeInTheDocument()
   })
+
+  it('renders status prefix for info', () => {
+    const { container } = render(Alert, { props: { status: 'info' } })
+    const status = container.querySelector('.strand-alert__status')
+    expect(status).toBeInTheDocument()
+    expect(status).toHaveTextContent('INFO')
+  })
+
+  it('renders status prefix for success as COMPLETE', () => {
+    const { container } = render(Alert, { props: { status: 'success' } })
+    const status = container.querySelector('.strand-alert__status')
+    expect(status).toBeInTheDocument()
+    expect(status).toHaveTextContent('COMPLETE')
+  })
+
+  it('renders status prefix for warning', () => {
+    const { container } = render(Alert, { props: { status: 'warning' } })
+    const status = container.querySelector('.strand-alert__status')
+    expect(status).toBeInTheDocument()
+    expect(status).toHaveTextContent('WARNING')
+  })
+
+  it('renders status prefix for error', () => {
+    const { container } = render(Alert, { props: { status: 'error' } })
+    const status = container.querySelector('.strand-alert__status')
+    expect(status).toBeInTheDocument()
+    expect(status).toHaveTextContent('ERROR')
+  })
 })

package/src/components/Toast/Toast.svelte

@@ -14,9 +14,19 @@
     'strand-toast',
     `strand-toast--${status}`,
   ].filter(Boolean).join(' ')
+
+  const statusLabels: Record<string, string> = {
+    info: 'INFO',
+    success: 'COMPLETE',
+    warning: 'WARNING',
+    error: 'ERROR',
+  }
+
+  $: statusLabel = statusLabels[status] ?? status.toUpperCase()
 </script>
 
 <div class={classes} role="status" aria-live={isUrgent ? 'assertive' : 'polite'} {...$$restProps}>
+  <span class="strand-toast__status">{statusLabel}</span>
   <span class="strand-toast__message">{message}</span>
   <button
     type="button"

package/src/components/Toast/Toast.test.ts

@@ -57,4 +57,32 @@ describe('Toast', () => {
     await fireEvent.click(container.querySelector('.strand-toast__dismiss')!)
     expect(ondismiss).toHaveBeenCalled()
   })
+
+  it('renders status prefix for info', () => {
+    const { container } = render(Toast, { props: { message: 'Note', status: 'info' } })
+    const status = container.querySelector('.strand-toast__status')
+    expect(status).toBeInTheDocument()
+    expect(status).toHaveTextContent('INFO')
+  })
+
+  it('renders status prefix for success as COMPLETE', () => {
+    const { container } = render(Toast, { props: { message: 'OK', status: 'success' } })
+    const status = container.querySelector('.strand-toast__status')
+    expect(status).toBeInTheDocument()
+    expect(status).toHaveTextContent('COMPLETE')
+  })
+
+  it('renders status prefix for warning', () => {
+    const { container } = render(Toast, { props: { message: 'Warn', status: 'warning' } })
+    const status = container.querySelector('.strand-toast__status')
+    expect(status).toBeInTheDocument()
+    expect(status).toHaveTextContent('WARNING')
+  })
+
+  it('renders status prefix for error', () => {
+    const { container } = render(Toast, { props: { message: 'Fail', status: 'error' } })
+    const status = container.querySelector('.strand-toast__status')
+    expect(status).toBeInTheDocument()
+    expect(status).toHaveTextContent('ERROR')
+  })
 })

package/src/components/Toast/ToastProvider.svelte

@@ -16,6 +16,17 @@
     return status === 'error' || status === 'warning'
   }
 
+  const statusLabels: Record<string, string> = {
+    info: 'INFO',
+    success: 'COMPLETE',
+    warning: 'WARNING',
+    error: 'ERROR',
+  }
+
+  function statusLabel(status: string): string {
+    return statusLabels[status] ?? status.toUpperCase()
+  }
+
   onDestroy(() => {
     unsubscribe()
   })
@@ -30,6 +41,7 @@
         role="status"
         aria-live={isUrgent(entry.status) ? 'assertive' : 'polite'}
       >
+        <span class="strand-toast__status">{statusLabel(entry.status)}</span>
         <span class="strand-toast__message">{entry.message}</span>
         <button
           type="button"