remove expand when slot is empty (#2242)

* remove expand when slot is empty * put div in test * Update server/go.mod Co-authored-by: Laura Whitaker <[email protected]> * move if statement * add card alertnative * add back in slot? * change to card * do you fix tests? --------- Co-authored-by: Laura Whitaker <[email protected]>
temporalio · Aug 19, 2024 · 38fa5e3 · 38fa5e3
1 parent 60340c2
commit 38fa5e3
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 44 deletions.
diff --git a/src/lib/holocene/accordion.stories.svelte b/src/lib/holocene/accordion.stories.svelte
@@ -12,12 +12,14 @@
       title: 'Accordion Title',
       subtitle: 'Subtitle',
       open: false,
+      expandable: true,
       error: '',
     },
     argTypes: {
       title: { name: 'Title', control: 'text' },
       subtitle: { name: 'Subtitle', control: 'text' },
       open: { name: 'Open', control: 'boolean' },
+      expandable: { name: 'Expandable', control: 'boolean' },
       error: { name: 'Error', control: 'text' },
       icon: {
         name: 'Icon',
@@ -39,7 +41,9 @@
   </Accordion>
 </Template>
 
-<Story name="Default" args={{ open: true }} />
+<Story name="Default" args={{ open: false }} />
+
+<Story name="Not Expandable" args={{ expandable: false }} />
 
 <Story name="With Error" args={{ error: 'Error' }} />
 

diff --git a/src/lib/holocene/accordion.svelte b/src/lib/holocene/accordion.svelte
@@ -6,6 +6,7 @@
   import { v4 } from 'uuid';
 
   import Badge from '$lib/holocene/badge.svelte';
+  import Card from '$lib/holocene/card.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';
 
   import type { IconName } from './icon';
@@ -16,6 +17,7 @@
     subtitle?: string;
     icon?: IconName;
     open?: boolean;
+    expandable?: boolean;
     error?: string;
     onToggle?: () => void;
     'data-testid'?: string;
@@ -26,6 +28,7 @@
   export let subtitle = '';
   export let icon = null;
   export let open = false;
+  export let expandable = true;
   export let error = '';
   export let onToggle = noop;
 
@@ -38,50 +41,78 @@
   };
 </script>
 
-<div
-  class={merge(
-    'surface-primary flex w-full cursor-default flex-col rounded-2xl border-2 border-subtle p-2 text-primary focus-within:ring-4 focus-within:ring-primary/70',
-    className,
-  )}
-  {...$$restProps}
->
-  <button
-    id="{id}-trigger"
-    aria-expanded={open}
-    aria-controls="{id}-content"
-    class="flex w-full flex-col rounded-lg p-2 hover:bg-interactive-secondary-hover focus-visible:bg-interactive-secondary-hover focus-visible:outline-none"
-    type="button"
-    on:click={toggleAccordion}
+{#if expandable}
+  <div
+    class={merge(
+      'surface-primary flex w-full cursor-default flex-col rounded-2xl border-2 border-subtle p-2 text-primary focus-within:ring-4 focus-within:ring-primary/70',
+      className,
+    )}
+    {...$$restProps}
   >
-    <div class="space-between flex w-full flex-row items-center">
-      <h3 class="flex w-full items-center gap-2">
-        {#if icon}<Icon name={icon} />{/if}
-        {title}
-        <slot name="summary" />
-      </h3>
-      <div
-        class="flex flex-row items-center gap-2 pr-2"
-        on:click|stopPropagation
-        on:keyup|stopPropagation
-      >
-        <slot name="action" />
+    <button
+      id="{id}-trigger"
+      aria-expanded={open}
+      aria-controls="{id}-content"
+      class="flex w-full flex-col rounded-lg p-2 hover:bg-interactive-secondary-hover focus-visible:bg-interactive-secondary-hover focus-visible:outline-none"
+      type="button"
+      on:click={toggleAccordion}
+    >
+      <div class="space-between flex w-full flex-row items-center">
+        <h3 class="flex w-full items-center gap-2">
+          {#if icon}<Icon name={icon} />{/if}
+          {title}
+          <slot name="summary" />
+        </h3>
+        <div
+          class="flex flex-row items-center gap-2 pr-2"
+          on:click|stopPropagation
+          on:keyup|stopPropagation
+        >
+          <slot name="action" />
+        </div>
+        <Icon class="m-2" name={open ? 'chevron-up' : 'chevron-down'} />
       </div>
-      <Icon class="m-2" name={open ? 'chevron-up' : 'chevron-down'} />
+      <p class="flex items-center">
+        {#if error}
+          <Badge class="mr-2" type="danger">{error}</Badge>
+        {/if}
+        {subtitle}
+      </p>
+    </button>
+
+    <div
+      id="{id}-content"
+      aria-labelledby="{id}-trigger"
+      role="textbox"
+      class="mt-6 block w-full p-2"
+      class:hidden={!open}
+    >
+      <slot />
     </div>
-    <p class="flex items-center">
-      {#if error}
-        <Badge class="mr-2" type="danger">{error}</Badge>
-      {/if}
-      {subtitle}
-    </p>
-  </button>
-  <div
-    id="{id}-content"
-    aria-labelledby="{id}-trigger"
-    role="textbox"
-    class="mt-6 block w-full p-2"
-    class:hidden={!open}
-  >
-    <slot />
   </div>
-</div>
+{:else}
+  <Card {...$$restProps}>
+    <div class="flex w-full flex-col rounded-lg p-2">
+      <div class="space-between flex w-full flex-row items-center">
+        <h3 class="flex w-full items-center gap-2">
+          {#if icon}<Icon name={icon} />{/if}
+          {title}
+          <slot name="summary" />
+        </h3>
+        <div class="flex flex-row items-center gap-2 pr-2">
+          <slot name="action" />
+        </div>
+      </div>
+      <p class="flex items-center">
+        {#if error}
+          <Badge class="mr-2" type="danger">{error}</Badge>
+        {/if}
+        {subtitle}
+      </p>
+    </div>
+
+    <div class="mt-6 block w-full p-2">
+      <slot />
+    </div>
+  </Card>
+{/if}