Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

remove expand when slot is empty #2242

Merged
merged 11 commits into from
Aug 19, 2024
Merged

remove expand when slot is empty #2242

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
b8076d9
remove expand when slot is empty
GraceGardner Jul 30, 2024
60ed059
put div in test
GraceGardner Jul 30, 2024
96ce958
Update server/go.mod
GraceGardner Jul 30, 2024
9c454d5
move if statement
GraceGardner Jul 30, 2024
b578ea9
merge head
GraceGardner Jul 30, 2024
3bd8f7e
merge main
GraceGardner Aug 1, 2024
99d1e2e
add card alertnative
GraceGardner Aug 1, 2024
b47f4e4
add back in slot?
GraceGardner Aug 1, 2024
a6c3f09
change to card
GraceGardner Aug 2, 2024
e294bed
merge main
GraceGardner Aug 9, 2024
d3d0d26
do you fix tests?
GraceGardner Aug 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion src/lib/holocene/accordion.stories.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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' }} />

Expand Down
117 changes: 74 additions & 43 deletions src/lib/holocene/accordion.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -16,6 +17,7 @@
subtitle?: string;
icon?: IconName;
open?: boolean;
expandable?: boolean;
error?: string;
onToggle?: () => void;
'data-testid'?: string;
Expand All @@ -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;

Expand All @@ -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" />
GraceGardner marked this conversation as resolved.
Show resolved Hide resolved
</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}
Loading