DT-2821 - add invalid/error state to Select (#2606)

* add valid/error state to Select

* fix a11y

* add story

* fix story

Author: rossedfort

src/lib/holocene/select/select.stories.svelte

@@ -61,3 +61,8 @@
 <Story name="Disabled and Selected" args={{ disabled: true, value: 'pizza' }} />
 
 <Story name="Label Hidden" args={{ labelHidden: true }} />
+
+<Story
+  name="Invalid with error message"
+  args={{ valid: false, error: 'This value is invalid' }}
+/>

src/lib/holocene/select/select.svelte

@@ -24,6 +24,7 @@
   import { writable, type Writable } from 'svelte/store';
 
   import { onMount, setContext } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
 
   import type { ButtonStyles } from '$lib/holocene/button.svelte';
   import type { IconName } from '$lib/holocene/icon';
@@ -46,6 +47,8 @@
     menuClass?: string;
     variant?: ButtonStyles['variant'];
     required?: boolean;
+    valid?: boolean;
+    error?: string;
   };
 
   export let label: string;
@@ -59,6 +62,8 @@
   export let menuClass: string | undefined = undefined;
   export let variant: ButtonStyles['variant'] = 'secondary';
   export let required = false;
+  export let error = '';
+  export let valid = true;
 
   // We get the "true" value of this further down but before the mount happens we should have some kind of value
   const valueCtx = writable<T>(value);
@@ -106,7 +111,7 @@
   <Label class="pb-1" {label} hidden={labelHidden} for={id} {required} />
   {#key $labelCtx}
     <MenuButton
-      class="w-full"
+      class={twMerge('w-full', !valid ? 'border-danger' : undefined)}
       hasIndicator={!disabled}
       {disabled}
       controls="{id}-select"
@@ -136,6 +141,10 @@
   <Menu role="listbox" id="{id}-select" class={menuClass}>
     <slot />
   </Menu>
+
+  {#if error && !valid}
+    <span class="text-xs text-danger">{error}</span>
+  {/if}
 </MenuContainer>
 
 <style lang="postcss">