-
Notifications
You must be signed in to change notification settings - Fork 62
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[feat](@svelteui/core]: Accordion component (#412)
* [WIP]: accordion component * [feat](@svelteui/core): move control to accordion Item and make styles functional * [feat](@svelteui/core): support multiple for accordion * [feat](@svelteui/core): wAI-ARIA support for Accordion * [fix](@svelteui/core): fix Collapse types * [feat](@svelteui/core): remove control component and cleanup cide * [fix](@svelteui/core): remove unused import * [feat](@svelteui/core): improve Accordion types * [feat](@svelteui/core): remove icon from AccordionItem * [fix](@svelteui/core): small fix on hover for Accordion * [fix](@svelteui/core): small fix in Accordion style * [feat](@svelteui/demos): accordion demos * [feat](docs): accordion docs * [test](@svelteui/core): unit test for Accordion
- Loading branch information
1 parent
0f4dc38
commit 7730ff4
Showing
31 changed files
with
1,413 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| --- | ||
| title: Accordion | ||
| group: 'svelteuidev-core' | ||
| packageGroup: '@svelteuidev/core' | ||
| slug: /core/accordion/ | ||
| category: 'data-display' | ||
| description: 'Shows and divides content into collapsible sections' | ||
| importCode: "import { Accordion } from '@svelteuidev/core';" | ||
| source: 'svelteui-core/src/components/Accordion/Accordion.svelte' | ||
| docs: 'core/accordion' | ||
| --- | ||
|
|
||
| <script lang="ts"> | ||
| import { Demo, AccordionDemos } from '@svelteuidev/demos'; | ||
| import { Heading } from "$lib/components"; | ||
| import { base } from '$app/paths'; | ||
| </script> | ||
|
|
||
| <svelte:head> | ||
|
|
||
| <title>{title} - SvelteUI</title> | ||
| </svelte:head> | ||
|
|
||
| <Heading {title} {group} {packageGroup} {slug} {category} {description} {importCode} {source} {docs} /> | ||
|
|
||
| ## Usage | ||
|
|
||
| <Demo demo={AccordionDemos.configurator} /> | ||
|
|
||
| ## Customize Control | ||
|
|
||
| Control can be fully customizable by setting any king of element inside the `control` slot. | ||
|
|
||
| <Demo demo={AccordionDemos.custom} /> | ||
|
|
||
| ## Change chevron | ||
|
|
||
| <Demo demo={AccordionDemos.chevron} /> | ||
|
|
||
| ## Controlled | ||
|
|
||
| The accordion component can be controlled externally with the prop `value` (which can be binded) and with the `on:change` event. | ||
|
|
||
| <Demo demo={AccordionDemos.controlled} /> | ||
|
|
||
| ## Default open | ||
|
|
||
| It's possible to set default opened items with the prop `defaultValue`. When `multiple` is false, this value should be a string. | ||
|
|
||
| <Demo demo={AccordionDemos.defaultValue} /> | ||
|
|
||
| When `multiple` is `true`, this should be provided as an arrays of strings. | ||
|
|
||
| <Demo demo={AccordionDemos.defaultValueMultiple} /> | ||
|
|
||
| ## Disabled items | ||
|
|
||
| <Demo demo={AccordionDemos.disabled} /> | ||
|
|
||
| ## Transition | ||
|
|
||
| It's possible to change the chevron transition duration by modifying the prop `transitionDuration` (in milliseconds). | ||
|
|
||
| <Demo demo={AccordionDemos.transitionDuration} /> | ||
|
|
||
| To disable the transition completely, set `transitionDuration` to `0`. | ||
|
|
||
| <Demo demo={AccordionDemos.noTransition} /> | ||
|
|
||
| ## Data attributes | ||
|
|
||
| Each item exposes data attributes that can be used to style the component. | ||
|
|
||
| - `data-rotate` for the chevron, which tells if the chevron should rotate. If `disableChevronRotation` is set, it will always be false. | ||
| - `data-active` in `Accordion.Item` when it's content is expanded. | ||
|
|
||
| <Demo demo={AccordionDemos.data} /> | ||
|
|
||
| ## Accessibility | ||
|
|
||
| The accordion component follows the [WAI-ARIA recommendations](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/) on accessibility. |
46 changes: 46 additions & 0 deletions
46
packages/svelteui-core/src/components/Accordion/Accordion.d.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import { HTMLAttributes } from 'svelte/elements'; | ||
| import { Component } from '$lib/internal'; | ||
| import type { DefaultProps, SvelteUINumberSize } from '$lib/styles'; | ||
|
|
||
| export type AccordionVariant = 'default' | 'contained' | 'filled' | 'separated'; | ||
|
|
||
| export type AccordionValue<Multiple> = Multiple extends true ? string[] : string | null; | ||
|
|
||
| export type AccordionContext<Multiple extends boolean = false> = Writable<{ | ||
| currentValue?: AccordionValue<Multiple>; | ||
| variant?: AccordionVariant; | ||
| order?: 2 | 3 | 4 | 5 | 6; | ||
| radius?: SvelteUINumberSize | number; | ||
| chevron?: Component | HTMLOrSVGElement; | ||
| chevronPosition?: 'left' | 'right'; | ||
| chevronSize?: string | number; | ||
| disableChevronRotation?: boolean; | ||
| transitionDuration?: number?; | ||
| updateActive: (value: string) => void; | ||
| isItemActive: (value: string) => boolean; | ||
| getControlsId: (value: string) => string; | ||
| getRegionId: (value: string) => string; | ||
| }>; | ||
|
|
||
| export interface AccordionProps<Multiple extends boolean = false> | ||
| extends DefaultProps, | ||
| HTMLAttributes<HTMLElement> { | ||
| variant?: AccordionVariant; | ||
| value?: AccordionValue<Multiple>; | ||
| defaultValue?: AccordionValue<Multiple>; | ||
| radius?: SvelteUINumberSize | number; | ||
| order?: 2 | 3 | 4 | 5 | 6; | ||
| multiple?: Multiple; | ||
| loop?: boolean; | ||
| id?: string; | ||
| chevron?: Component | HTMLOrSVGElement; | ||
| chevronPosition?: 'left' | 'right'; | ||
| chevronSize?: string | number; | ||
| disableChevronRotation?: boolean; | ||
| transitionDuration?: number?; | ||
| } | ||
|
|
||
| export interface AccordionEvents<Multiple extends boolean = false> { | ||
| change: CustomEvent<AccordionValue<Multiple>>; | ||
| [evt: string]: CustomEvent<any>; | ||
| } |
96 changes: 96 additions & 0 deletions
96
packages/svelteui-core/src/components/Accordion/Accordion.stories.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| <script lang="ts"> | ||
| import { Meta, Template, Story } from '@storybook/addon-svelte-csf'; | ||
| import { Accordion } from './index'; | ||
| let value = 'typescript'; | ||
| </script> | ||
|
|
||
| <Meta title="Components/Accordion" component={Accordion} /> | ||
|
|
||
| <Template let:args> | ||
| <Accordion {...args} defaultValue="typescript"> | ||
| <Accordion.Item value="typescript"> | ||
| <div slot="control">Typescript Based</div> | ||
| Build type safe applications. All SvelteUI packages are built with TypeScript and support it by | ||
| default. All components and functions export types, are documented, and give developers autocomplete | ||
| features! | ||
| </Accordion.Item> | ||
| <Accordion.Item value="packed"> | ||
| <div slot="control">Feature packed</div> | ||
| SvelteUI contains more than just components. With Actions, Transitions, and Utilities available | ||
| to you, development will be fun and easy! | ||
| </Accordion.Item> | ||
| <Accordion.Item value="accessible"> | ||
| <div slot="control">Accessible and usable</div> | ||
| All components are accessible according to WAI-ARIA standards. On top of that, no annoying focus | ||
| ring. It will appear only when user navigates with keyboard. | ||
| </Accordion.Item> | ||
| </Accordion> | ||
| </Template> | ||
|
|
||
| <Story name="Accordion" id="accordionStory" /> | ||
|
|
||
| <Story name="Multiple Tabs Open" id="accordionMultipleStory" args={{ multiple: true }} /> | ||
|
|
||
| <Story name="Disabled Tabs" id="accordionDisabledStory"> | ||
| <Accordion defaultValue="typescript"> | ||
| <Accordion.Item value="typescript"> | ||
| <div slot="control">Typescript Based</div> | ||
| Build type safe applications. All SvelteUI packages are built with TypeScript and support it by | ||
| default. All components and functions export types, are documented, and give developers autocomplete | ||
| features! | ||
| </Accordion.Item> | ||
| <Accordion.Item value="packed" disabled> | ||
| <div slot="control">Feature packed</div> | ||
| SvelteUI contains more than just components. With Actions, Transitions, and Utilities available | ||
| to you, development will be fun and easy! | ||
| </Accordion.Item> | ||
| <Accordion.Item value="accessible"> | ||
| <div slot="control">Accessible and usable</div> | ||
| All components are accessible according to WAI-ARIA standards. On top of that, no annoying focus | ||
| ring. It will appear only when user navigates with keyboard. | ||
| </Accordion.Item> | ||
| </Accordion> | ||
| </Story> | ||
|
|
||
| <Story name="Multiple Tabs Open With Default" id="accordionMultipleDefaultStory"> | ||
| <Accordion multiple={true} defaultValue={['packed', 'accessible']}> | ||
| <Accordion.Item value="typescript"> | ||
| <div slot="control">Typescript Based</div> | ||
| Build type safe applications. All SvelteUI packages are built with TypeScript and support it by | ||
| default. All components and functions export types, are documented, and give developers autocomplete | ||
| features! | ||
| </Accordion.Item> | ||
| <Accordion.Item value="packed"> | ||
| <div slot="control">Feature packed</div> | ||
| SvelteUI contains more than just components. With Actions, Transitions, and Utilities available | ||
| to you, development will be fun and easy! | ||
| </Accordion.Item> | ||
| <Accordion.Item value="accessible"> | ||
| <div slot="control">Accessible and usable</div> | ||
| All components are accessible according to WAI-ARIA standards. On top of that, no annoying focus | ||
| ring. It will appear only when user navigates with keyboard. | ||
| </Accordion.Item> | ||
| </Accordion> | ||
| </Story> | ||
|
|
||
| <Story name="Controlled" id="accordionControlledStory"> | ||
| <Accordion {value} on:change={(e) => (value = e.detail)}> | ||
| <Accordion.Item value="typescript"> | ||
| <div slot="control">Typescript Based</div> | ||
| Build type safe applications. All SvelteUI packages are built with TypeScript and support it by | ||
| default. All components and functions export types, are documented, and give developers autocomplete | ||
| features! | ||
| </Accordion.Item> | ||
| <Accordion.Item value="packed"> | ||
| <div slot="control">Feature packed</div> | ||
| SvelteUI contains more than just components. With Actions, Transitions, and Utilities available | ||
| to you, development will be fun and easy! | ||
| </Accordion.Item> | ||
| <Accordion.Item value="accessible"> | ||
| <div slot="control">Accessible and usable</div> | ||
| All components are accessible according to WAI-ARIA standards. On top of that, no annoying focus | ||
| ring. It will appear only when user navigates with keyboard. | ||
| </Accordion.Item> | ||
| </Accordion> | ||
| </Story> |
14 changes: 14 additions & 0 deletions
14
packages/svelteui-core/src/components/Accordion/Accordion.styles.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import { createStyles } from '$lib/styles'; | ||
| import type { SvelteUINumberSize } from '$lib/styles'; | ||
| import type { AccordionVariant } from './Accordion'; | ||
|
|
||
| export interface AccordionStylesParams { | ||
| radius: SvelteUINumberSize; | ||
| variant: AccordionVariant; | ||
| } | ||
|
|
||
| export default createStyles((theme, { radius, variant }: AccordionStylesParams) => { | ||
| return { | ||
| root: {} | ||
| }; | ||
| }); |
Oops, something went wrong.