Accordion component updates (#2316)

* Fix styling for non-expandable Accordion

* Update padding on Card to match Accordion

* Add AccordionGroup

* Make ring inset on focus-within

* Fix imports and A11y warning

src/lib/components/data-encoder-settings.svelte

@@ -4,7 +4,7 @@
 
   import { page } from '$app/stores';
 
-  import Accordion from '$lib/holocene/accordion.svelte';
+  import Accordion from '$lib/holocene/accordion/accordion.svelte';
   import Button from '$lib/holocene/button.svelte';
   import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';

src/lib/components/schedule/schedule-advanced-settings.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Accordion from '$lib/holocene/accordion.svelte';
+  import Accordion from '$lib/holocene/accordion/accordion.svelte';
   import { translate } from '$lib/i18n/translate';
 
   import ScheduleNotes from './schedule-notes.svelte';

src/lib/components/schedule/schedule-search-attributes.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Accordion from '$lib/holocene/accordion.svelte';
+  import Accordion from '$lib/holocene/accordion/accordion.svelte';
   import { translate } from '$lib/i18n/translate';
   import type { SearchAttribute } from '$lib/types';
   import { decodePayloadAttributes } from '$lib/utilities/decode-payload';

src/lib/components/workflow/pending-activities.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { page } from '$app/stores';
 
-  import Accordion from '$lib/holocene/accordion.svelte';
+  import Accordion from '$lib/holocene/accordion/accordion.svelte';
   import Badge from '$lib/holocene/badge.svelte';
   import CodeBlock from '$lib/holocene/code-block.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';

src/lib/components/workflow/workflow-summary.svelte

@@ -2,7 +2,7 @@
   import { page } from '$app/stores';
 
   import WorkflowDetail from '$lib/components/workflow/workflow-detail.svelte';
-  import Accordion from '$lib/holocene/accordion.svelte';
+  import Accordion from '$lib/holocene/accordion/accordion.svelte';
   import { translate } from '$lib/i18n/translate';
   import { relativeTime, timeFormat } from '$lib/stores/time-format';
   import {

src/lib/holocene/accordion/accordion-group.svelte

@@ -0,0 +1,5 @@
+<div
+  class="*:rounded-none *:border-t-0 [&>*:first-child]:rounded-t-2xl [&>*:first-child]:border-t-2 [&>*:last-child]:rounded-b-2xl"
+>
+  <slot />
+</div>

src/lib/holocene/accordion.stories.svelte → src/lib/holocene/accordion/accordion.stories.svelte

@@ -33,12 +33,27 @@
 <script lang="ts">
   import { action } from '@storybook/addon-actions';
   import { Story, Template } from '@storybook/addon-svelte-csf';
+
+  import AccordionGroup from './accordion-group.svelte';
 </script>
 
 <Template let:args>
-  <Accordion {...args} onToggle={action('onToggle')}>
-    <p>Accordion Content</p>
-  </Accordion>
+  <div class="flex flex-col gap-2">
+    <Accordion {...args} onToggle={action('onToggle')}>
+      <p>Accordion Content</p>
+    </Accordion>
+    <AccordionGroup>
+      <Accordion {...args} onToggle={action('onToggle')}>
+        <p>Accordion Content</p>
+      </Accordion>
+      <Accordion {...args} onToggle={action('onToggle')}>
+        <p>Accordion Content</p>
+      </Accordion>
+      <Accordion {...args} onToggle={action('onToggle')}>
+        <p>Accordion Content</p>
+      </Accordion>
+    </AccordionGroup>
+  </div>
 </Template>
 
 <Story name="Default" args={{ open: false }} />

src/lib/holocene/accordion.svelte → src/lib/holocene/accordion/accordion.svelte

@@ -6,11 +6,9 @@
   import { v4 } from 'uuid';
 
   import Badge from '$lib/holocene/badge.svelte';
-  import Card from '$lib/holocene/card.svelte';
+  import type { IconName } from '$lib/holocene/icon';
   import Icon from '$lib/holocene/icon/icon.svelte';
 
-  import type { IconName } from './icon';
-
   interface $$Props extends HTMLAttributes<HTMLDivElement> {
     title: string;
     id?: string;
@@ -44,7 +42,7 @@
 {#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',
+      'surface-primary w-full rounded-2xl border-2 border-subtle p-2 focus-within:ring-4 focus-within:ring-inset focus-within:ring-primary/70',
       className,
     )}
     {...$$restProps}
@@ -67,6 +65,7 @@
           class="flex flex-row items-center gap-2 pr-2"
           on:click|stopPropagation
           on:keyup|stopPropagation
+          role="none"
         >
           <slot name="action" />
         </div>
@@ -91,7 +90,10 @@
     </div>
   </div>
 {:else}
-  <Card class="w-full" {...$$restProps}>
+  <div
+    class="surface-primary w-full rounded-2xl border-2 border-subtle p-4"
+    {...$$restProps}
+  >
     <div class="flex w-full flex-col rounded-lg">
       <div class="space-between flex w-full flex-row items-center">
         <h3 class="flex w-full items-center gap-2">
@@ -114,5 +116,5 @@
     <div class="mt-6 block w-full" class:hidden={!open}>
       <slot />
     </div>
-  </Card>
+  </div>
 {/if}

src/lib/holocene/card.svelte

@@ -4,6 +4,6 @@
 
 <style lang="postcss">
   .card {
-    @apply rounded-2xl border-2 border-subtle p-5;
+    @apply rounded-2xl border-2 border-subtle p-4;
   }
 </style>