AccordionGroup

Component

Storybook

Guidelines

Usage

Use AccordionGroup when multiple accordions should be grouped together and need to be opened separately or one at a time.

Best Practices

AccordionGroup does not currently dictate the spacing between Accordions. Designers may use our spacing system to determine layouts for their particular use case, though 16px is a good starting point for Accordion spacing.

Content

Size is inherited from this component on Links inside of it, but other Accordion items will need to be set to size="sm" per the design.

Component Specs

API

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

• actionOptions: object
  Options for the action.

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

• multiple: boolean (default: true)
  Allow multiple items to be open at the same time.

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

• testId: string
  Test id for the accordion.

Example

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

<AccordionGroup>
	<Accordion summary="Default 1">
		<Link variant="secondary" href="#">Default Link</Link>
	</Accordion>
	<Accordion summary="Default 2">
		<Link variant="secondary" href="#">Default Link</Link>
	</Accordion>
</AccordionGroup>

<AccordionGroup multiple={false}>
	<Accordion summary="FAQ 1">
		<Link variant="secondary" href="#">FAQ Link</Link>
	</Accordion>
	<Accordion summary="FAQ 2">
		<Link variant="secondary" href="#">FAQ Link</Link>
	</Accordion>
</AccordionGroup>

<AccordionGroup size="sm">
	<Accordion summary="Sm 1">
		<Link variant="secondary" href="#">Sm Link</Link>
	</Accordion>
	<Accordion summary="Sm 2">
		<Link variant="secondary" href="#">Sm Link</Link>
	</Accordion>
</AccordionGroup>

Types

type ActionOptions = object;

interface Props extends ComponentProps<Frame> {
	action?: Action<HTMLDivElement, ActionOptions>;
	actionOptions?: object;
	multiple?: boolean;
	size?: 'default' | 'sm';
	summary?: string;
	testId?: string;
}