Accordion

Component

Storybook

Figma Demo

Guidelines

Variations

Accordion is offered in either a stacked (default) or a standalone variant. They can be used as a base (16px) or sm (14px) size. The Figma component includes slots that point to AccordionItem, allowing control over what other components get pulled into the expanded accordion. The developer will need to pull in the correct Accordion items as components per the design.

Usage

Accordions help users find things more quickly by reducing scrolling and expanding only the content that is needed. The current implementation of Accordion is intended to contain other components — such as links or inputs — rather than text content.

Default (Stacked)

The stacked variant is intended for settings where multiple accordions may be used together, such as a set of expandable filter categories.

Standalone

The standalone variant should be used for one-offs where some content needs to be out of view unless needed, such as adding notes or other details to an order prior to submission.

Best Practices

Use accordions when there are multiple categories of similar types of content that would be too long or cumbersome to list out directly, such as a filter panel or deep side navigation.

Accessibility

The Accordion component uses a button with aria-expanded and aria-controls attributes to improve accessibility.

Content

The content of an Accordion is created using components per the design. The available items are:

• Link: variant secondary, default or semibold, sm or default size
  • <Link variant="secondary" href="#">Link</Link>
  • <Link variant="secondary" semibold href="#">Link</Link>
  • <Link variant="secondary" size="sm" href="#">Link</Link>
  • <Link variant="secondary" size="sm" href="#" semibold>Link</Link>
• Divider: to separate content, horizontal variant
  • <Divider />
• Checkbox: to allow users to select options, sm or default size
  • <Checkbox label="Checkbox" id="checkbox" value=""/>
  • <Checkbox label="Checkbox" id="checkbox" value="" size="sm" />
• InputSearch: to allow users to search for content, sm or default size
  • <InputSearch placeholder="Search" id="search" value="" />
  • <InputSearch placeholder="Search" id="search" value="" size="sm" />
• Toggle: to allow users to toggle options
  • <Toggle label="Toggle" id="toggle" value=""/>

Component Specs

API

• action: Action<HTMLDivElement, ActionOptions>
  Action to be executed on click.

• actionOptions: object
  Options for the action.

• as: string (default: 'div')
  HTML tag to render the accordion as.

• class: string (default: undefined)
  Custom class.

• contentTestId: string
  Test id for the content.

• open: boolean (default: false)
  Open the accordion by default.

• size: 'default' | 'sm' (default: 'default')
  Size of the accordion.

• summary: string (default: 'Accordion')
  Summary of the accordion.

• summaryTestId: string
  Test id for the summary.

• variant: 'stacked' | 'standalone' (default: 'stacked')
  Variant of the accordion.

Example

<script>
	import { Accordion, Link, Divider } from '@getprovi/craft-svelte';

	const links = [
		{ name: 'Link 1', href: '#' },
		{ name: 'Link 2', href: '#' },
		{ name: 'Link 3', href: '#' }
	];
</script>

<Accordion summary="With Items" as="ul">
	{#each links as link}
		<li>
			<Link variant="secondary" href={link.href}>{link.name}</Link>
		</li>
	{/each}
	<Divider />
</Accordion>

<Accordion variant="standalone" summary="Standalone">content</Accordion>

Types

interface Props {
	action?: ComponentProps<Frame>['action'];
	actionOptions?: ComponentProps<Frame>['actionOptions'];
	as?: string;
	class?: string;
	contentTestId?: string;
	open?: boolean;
	size?: 'default' | 'sm';
	summary?: string;
	summaryTestId?: string;
	variant?: 'default' | 'standalone';
}