mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(accordion)!: integrate Accordion with v11 (#1947)

Browse source
This commit is contained in:
Eric Liu 2024-04-21 10:50:00 -07:00 • committed by GitHub
commit 0e8909ae59
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 261 additions and 456 deletions
Download patch file Download diff file Expand all files Collapse all files

51
COMPONENT_INDEX.md
View file

@ -177,12 +177,12 @@
### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ------------------------------------------------ |
| align | No | <code>let</code> | No | <code>"start" &#124; "end"</code> | <code>"end"</code> | Specify alignment of accordion item chevron icon |
| size | No | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | <code>undefined</code> | Specify the size of the accordion |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the accordion |
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | ----------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------- |
| align | No | <code>let</code> | No | <code>"start" &#124; "end"</code> | <code>"end"</code> | Specify the alignment of the accordion item chevron icon. |
| flush | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to flush the accordion content text.<br /><br />**Note**: does not work with `align="start"`. |
| size | No | <code>let</code> | No | <code>"sm" &#124; "md" &#124; "lg"</code> | <code>"md"</code> | Specify the size of the accordion. |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable all accordion items. |
### Slots
@ -192,23 +192,18 @@
### Events
| Event name | Type | Detail |
| :--------- | :-------- | :----- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
None.
## `AccordionItem`
### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------------- | :------- | :--------------- | :------- | -------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
| disabled | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to disable the accordion item |
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the first accordion item |
| title | No | <code>let</code> | No | <code>string</code> | <code>"title"</code> | Specify the title of the accordion item heading.<br />Alternatively, use the "title" slot (e.g., `&lt;div slot="title"&gt;...&lt;/div&gt;`) |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Expand/Collapse"</code> | Specify the ARIA label for the accordion item chevron icon |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------------- | :------- | :--------------- | :------- | -------------------- | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| disabled | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to disable the accordion item. |
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the first accordion item. |
| title | No | <code>let</code> | No | <code>string</code> | <code>"title"</code> | Specify the title of the accordion item heading.<br />Use the "title" slot for custom elements.<br />@example &lt;svelte:fragment slot="title"&gt;...&lt;/svelte:fragment&gt; |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Expand/Collapse"</code> | Specify the ARIA label for the accordion item chevron icon. |
### Slots
@ -232,12 +227,13 @@
### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ------------------------------------------------ |
| count | No | <code>let</code> | No | <code>number</code> | <code>4</code> | Specify the number of accordion items to render |
| align | No | <code>let</code> | No | <code>"start" &#124; "end"</code> | <code>"end"</code> | Specify alignment of accordion item chevron icon |
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Specify the size of the accordion |
| open | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to close the first accordion item |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | ----------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------- |
| count | No | <code>let</code> | No | <code>number</code> | <code>4</code> | Specify the number of accordion items. |
| align | No | <code>let</code> | No | <code>"start" &#124; "end"</code> | <code>"end"</code> | Specify the alignment of the accordion item chevron icon. |
| flush | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to flush the accordion content text.<br /><br />**Note**: does not work with `align="start"`. |
| size | No | <code>let</code> | No | <code>"sm" &#124; "md" &#124; "lg"</code> | <code>"md"</code> | Specify the size of the accordion. |
| open | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to expand the first accordion item |
### Slots
@ -245,12 +241,7 @@ None.
### Events
| Event name | Type | Detail |
| :--------- | :-------- | :----- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
None.
## `AspectRatio`

109
docs/src/COMPONENT_API.json
View file

@ -8,7 +8,7 @@
{
"name": "align",
"kind": "let",
"description": "Specify alignment of accordion item chevron icon",
"description": "Specify the alignment of the accordion item chevron icon.",
"type": "\"start\" | \"end\"",
"value": "\"end\"",
"isFunction": false,
@ -18,20 +18,9 @@
"reactive": false
},
{
"name": "size",
"name": "flush",
"kind": "let",
"description": "Specify the size of the accordion",
"type": "\"sm\" | \"lg\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "disabled",
"kind": "let",
"description": "Set to `true` to disable the accordion",
"description": "Set to `true` to flush the accordion content text.\n\n**Note**: does not work with `align=\"start\"`.",
"type": "boolean",
"value": "false",
"isFunction": false,
@ -41,9 +30,21 @@
"reactive": false
},
{
"name": "skeleton",
"name": "size",
"kind": "let",
"description": "Set to `true` to display the skeleton state",
"description": "Specify the size of the accordion.",
"type": "\"sm\" | \"md\" | \"lg\"",
"value": "\"md\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "disabled",
"kind": "let",
"description": "Set to `true` to disable all accordion items.",
"type": "boolean",
"value": "false",
"isFunction": false,
@ -55,34 +56,8 @@
],
"moduleExports": [],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [
{
"type": "forwarded",
"name": "click",
"element": "AccordionSkeleton"
},
{
"type": "forwarded",
"name": "mouseover",
"element": "AccordionSkeleton"
},
{
"type": "forwarded",
"name": "mouseenter",
"element": "AccordionSkeleton"
},
{
"type": "forwarded",
"name": "mouseleave",
"element": "AccordionSkeleton"
}
],
"typedefs": [],
"rest_props": { "type": "InlineComponent", "name": "AccordionSkeleton" },
"extends": {
"interface": "AccordionSkeletonProps",
"import": "\"./AccordionSkeleton.svelte\""
}
"events": [],
"typedefs": []
},
{
"moduleName": "AccordionItem",
@ -91,7 +66,7 @@
{
"name": "title",
"kind": "let",
"description": "Specify the title of the accordion item heading.\nAlternatively, use the \"title\" slot (e.g., `<div slot=\"title\">...</div>`)",
"description": "Specify the title of the accordion item heading.\nUse the \"title\" slot for custom elements.\n@example <svelte:fragment slot=\"title\">...</svelte:fragment>",
"type": "string",
"value": "\"title\"",
"isFunction": false,
@ -103,7 +78,7 @@
{
"name": "open",
"kind": "let",
"description": "Set to `true` to open the first accordion item",
"description": "Set to `true` to open the first accordion item.",
"type": "boolean",
"value": "false",
"isFunction": false,
@ -115,7 +90,7 @@
{
"name": "disabled",
"kind": "let",
"description": "Set to `true` to disable the accordion item",
"description": "Set to `true` to disable the accordion item.",
"type": "boolean",
"value": "false",
"isFunction": false,
@ -127,7 +102,7 @@
{
"name": "iconDescription",
"kind": "let",
"description": "Specify the ARIA label for the accordion item chevron icon",
"description": "Specify the ARIA label for the accordion item chevron icon.",
"type": "string",
"value": "\"Expand/Collapse\"",
"isFunction": false,
@ -155,8 +130,7 @@
{ "type": "forwarded", "name": "mouseleave", "element": "button" },
{ "type": "forwarded", "name": "keydown", "element": "button" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "li" }
"typedefs": []
},
{
"moduleName": "AccordionSkeleton",
@ -165,7 +139,7 @@
{
"name": "count",
"kind": "let",
"description": "Specify the number of accordion items to render",
"description": "Specify the number of accordion items.",
"type": "number",
"value": "4",
"isFunction": false,
@ -177,7 +151,7 @@
{
"name": "align",
"kind": "let",
"description": "Specify alignment of accordion item chevron icon",
"description": "Specify the alignment of the accordion item chevron icon.",
"type": "\"start\" | \"end\"",
"value": "\"end\"",
"isFunction": false,
@ -186,11 +160,24 @@
"constant": false,
"reactive": false
},
{
"name": "flush",
"kind": "let",
"description": "Set to `true` to flush the accordion content text.\n\n**Note**: does not work with `align=\"start\"`.",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "size",
"kind": "let",
"description": "Specify the size of the accordion",
"type": "\"sm\" | \"xl\"",
"description": "Specify the size of the accordion.",
"type": "\"sm\" | \"md\" | \"lg\"",
"value": "\"md\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -200,9 +187,9 @@
{
"name": "open",
"kind": "let",
"description": "Set to `false` to close the first accordion item",
"description": "Set to `true` to expand the first accordion item",
"type": "boolean",
"value": "true",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -212,14 +199,8 @@
],
"moduleExports": [],
"slots": [],
"events": [
{ "type": "forwarded", "name": "click", "element": "ul" },
{ "type": "forwarded", "name": "mouseover", "element": "ul" },
{ "type": "forwarded", "name": "mouseenter", "element": "ul" },
{ "type": "forwarded", "name": "mouseleave", "element": "ul" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "ul" }
"events": [],
"typedefs": []
},
{
"moduleName": "AspectRatio",

127
docs/src/pages/components/Accordion.svx
View file

@ -6,12 +6,15 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
import {
Accordion,
AccordionItem,
AccordionSkeleton
} from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
## Default
By default, the accordion is medium-sized with the chevron right-aligned.
<Accordion>
<AccordionItem title="Natural Language Classifier">
<p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
@ -25,8 +28,61 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
</AccordionItem>
</Accordion>
## Large size
Set the `size` prop to `lg` to increase the size of the accordion.
<Accordion size="lg">
<AccordionItem title="Natural Language Classifier">
<p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
</p>
</AccordionItem>
<AccordionItem title="Natural Language Understanding">
<p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
</AccordionItem>
<AccordionItem title="Language Translator">
<p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
</AccordionItem>
</Accordion>
## Small size
Set the `size` prop to `sm` to decrease the size of the accordion.
<Accordion size="sm">
<AccordionItem title="Natural Language Classifier">
<p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
</p>
</AccordionItem>
<AccordionItem title="Natural Language Understanding">
<p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
</AccordionItem>
<AccordionItem title="Language Translator">
<p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
</AccordionItem>
</Accordion>
## Flush text
Set the `flush` prop to `true` to flush align accordion content text. Note that this prop cannot be used with `align="start"`.
<Accordion flush>
<AccordionItem title="Natural Language Classifier">
<p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
</p>
</AccordionItem>
<AccordionItem title="Natural Language Understanding">
<p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
</AccordionItem>
<AccordionItem title="Language Translator">
<p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
</AccordionItem>
</Accordion>
## Left-aligned chevron
By default, the chevron is right-aligned. Set `align="start"` to left-align the chevron.
<Accordion align="start">
<AccordionItem title="Natural Language Classifier">
<p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
@ -42,10 +98,10 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
## Custom title slot
<Accordion>
<Accordion size="lg">
<AccordionItem>
<svelte:fragment slot="title">
<h5>Natural Language Classifier</h5>
<h6>Natural Language Classifier</h6>
<div>AI / Machine Learning</div>
</svelte:fragment>
<p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
@ -53,14 +109,14 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
</AccordionItem>
<AccordionItem>
<svelte:fragment slot="title">
<h5>Natural Language Understanding</h5>
<h6>Natural Language Understanding</h6>
<div>AI / Machine Learning</div>
</svelte:fragment>
<p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
</AccordionItem>
<AccordionItem>
<svelte:fragment slot="title">
<h5>Language Translator</h5>
<h6>Language Translator</h6>
<div>AI / Machine Learning</div>
</svelte:fragment>
<p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
@ -88,38 +144,12 @@ This example demonstrates how a list of items can be programmatically expanded a
<FileSource src="/framed/Accordion/ExpandableAccordion" />
## Large size
<Accordion size="lg">
<AccordionItem title="Natural Language Classifier">
<p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
</p>
</AccordionItem>
<AccordionItem title="Natural Language Understanding">
<p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
</AccordionItem>
<AccordionItem title="Language Translator">
<p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
</AccordionItem>
</Accordion>
## Small size
<Accordion size="sm">
<AccordionItem title="Natural Language Classifier">
<p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
</p>
</AccordionItem>
<AccordionItem title="Natural Language Understanding">
<p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
</AccordionItem>
<AccordionItem title="Language Translator">
<p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
</AccordionItem>
</Accordion>
## Disabled
Set the `disabled` prop to `true` to disable all accordion items.
Dynamically disabling the accordion will collapse any expanded items.
<Accordion disabled>
<AccordionItem title="Natural Language Classifier">
<p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
@ -135,6 +165,8 @@ This example demonstrates how a list of items can be programmatically expanded a
## Disabled (item)
To disable individual accordion items, set the `disabled` prop to `true` on the `AccordionItem`.
<Accordion>
<AccordionItem disabled title="Natural Language Classifier">
<p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
@ -150,25 +182,34 @@ This example demonstrates how a list of items can be programmatically expanded a
## Skeleton
<Accordion skeleton />
<AccordionSkeleton />
## Skeleton (left-aligned chevron)
<Accordion skeleton align="start" />
<AccordionSkeleton align="start" />
## Skeleton (custom count)
<Accordion skeleton count={3} />
By default, the skeleton accordion has 4 items. Specify a custom count using the `count` prop.
## Skeleton (closed)
<AccordionSkeleton count={3} />
<Accordion skeleton open={false} />
## Skeleton (open)
## Skeleton (extra-large)
Set `open` to `true` to expand the first accordion item.
<Accordion skeleton size="xl" />
<AccordionSkeleton open />
## Skeleton (flush text)
Set the `flush` prop to `true` to flush align accordion content text. Note that this prop cannot be used with `align="start"`.
<AccordionSkeleton open flush />
## Skeleton (large)
<AccordionSkeleton size="lg" />
## Skeleton (small)
<Accordion skeleton size="sm" />
<AccordionSkeleton size="sm" />

62
src/Accordion/Accordion.svelte
View file

@ -1,27 +1,30 @@
<script>
/** @extends {"./AccordionSkeleton.svelte"} AccordionSkeletonProps */
// @ts-check
/**
* Specify alignment of accordion item chevron icon
* Specify the alignment of the accordion item chevron icon.
* @type {"start" | "end"}
*/
export let align = "end";
/**
* Specify the size of the accordion
* @type {"sm" | "lg"}
* Set to `true` to flush the accordion content text.
*
* **Note**: does not work with `align="start"`.
*/
export let size = undefined;
export let flush = false;
/** Set to `true` to disable the accordion */
/**
* Specify the size of the accordion.
* @type {"sm" | "md" | "lg"}
*/
export let size = "md";
/** Set to `true` to disable all accordion items. */
export let disabled = false;
/** Set to `true` to display the skeleton state */
export let skeleton = false;
import { setContext } from "svelte";
import { writable } from "svelte/store";
import AccordionSkeleton from "./AccordionSkeleton.svelte";
const disableItems = writable(disabled);
@ -30,31 +33,14 @@
setContext("Accordion", { disableItems });
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
{#if skeleton}
<AccordionSkeleton
{...$$restProps}
align="{align}"
size="{size}"
on:click
on:mouseover
on:mouseenter
on:mouseleave
/>
{:else}
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<ul
class:bx--accordion="{true}"
class:bx--accordion--start="{align === 'start'}"
class:bx--accordion--end="{align === 'end'}"
class:bx--accordion--sm="{size === 'sm'}"
class:bx--accordion--lg="{size === 'lg' || size === 'xl'}"
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave
>
<slot />
</ul>
{/if}
<ul
class:bx--accordion="{true}"
class:bx--accordion--start="{align === 'start'}"
class:bx--accordion--end="{align === 'end'}"
class:bx--accordion--flush="{flush && align !== 'start'}"
class:bx--layout--size-sm="{size === 'sm'}"
class:bx--layout--size-md="{size === 'md'}"
class:bx--layout--size-lg="{size === 'lg'}"
>
<slot />
</ul>

42
src/Accordion/AccordionItem.svelte
View file

@ -1,47 +1,44 @@
<script>
// @ts-check
/**
* Specify the title of the accordion item heading.
* Alternatively, use the "title" slot (e.g., `<div slot="title">...</div>`)
* Use the "title" slot for custom elements.
* @example <svelte:fragment slot="title">...</svelte:fragment>
*/
export let title = "title";
/** Set to `true` to open the first accordion item */
/** Set to `true` to open the first accordion item. */
export let open = false;
/** Set to `true` to disable the accordion item */
/** Set to `true` to disable the accordion item. */
export let disabled = false;
/** Specify the ARIA label for the accordion item chevron icon */
/** Specify the ARIA label for the accordion item chevron icon. */
export let iconDescription = "Expand/Collapse";
import { onMount, getContext } from "svelte";
import { getContext } from "svelte";
import ChevronRight from "../icons/ChevronRight.svelte";
let initialDisabled = disabled;
// Internal id for controls
const id = "ccs-" + Math.random().toString(36);
const ctx = getContext("Accordion");
const unsubscribe = ctx.disableItems.subscribe((value) => {
if (!value && initialDisabled) return;
disabled = value;
});
/** @type {{ disableItems: import("svelte/store").Writable<boolean>; }} */
const { disableItems } = getContext("Accordion") ?? {};
$: disabled = disableItems ? $disableItems === true : disabled;
/** @type {undefined | "expanding" | "collapsing"} */
let animation = undefined;
onMount(() => {
return () => {
unsubscribe();
};
});
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<li
class:bx--accordion__item="{true}"
class:bx--accordion__item--active="{open}"
class:bx--accordion__item--active="{open && !disabled}"
class:bx--accordion__item--disabled="{disabled}"
class:bx--accordion__item--expanding="{animation === 'expanding'}"
class:bx--accordion__item--collapsing="{animation === 'collapsing'}"
{...$$restProps}
on:animationend
on:animationend="{() => {
animation = undefined;
@ -51,6 +48,7 @@
type="button"
class:bx--accordion__heading="{true}"
title="{iconDescription}"
aria-controls="{id}"
aria-expanded="{open}"
disabled="{disabled}"
on:click
@ -73,7 +71,9 @@
<slot name="title">{title}</slot>
</div>
</button>
<div class:bx--accordion__content="{true}">
<slot />
<div class:bx--accordion__wrapper="{true}">
<div id="{id}" class:bx--accordion__content="{true}">
<slot />
</div>
</div>
</li>

38
src/Accordion/AccordionSkeleton.svelte
View file

@ -1,40 +1,44 @@
<script>
/** Specify the number of accordion items to render */
// @ts-check
/** Specify the number of accordion items. */
export let count = 4;
/**
* Specify alignment of accordion item chevron icon
* Specify the alignment of the accordion item chevron icon.
* @type {"start" | "end"}
*/
export let align = "end";
/**
* Specify the size of the accordion
* @type {"sm" | "xl"}
* Set to `true` to flush the accordion content text.
*
* **Note**: does not work with `align="start"`.
*/
export let size = undefined;
export let flush = false;
/** Set to `false` to close the first accordion item */
export let open = true;
/**
* Specify the size of the accordion.
* @type {"sm" | "md" | "lg"}
*/
export let size = "md";
/** Set to `true` to expand the first accordion item */
export let open = false;
import ChevronRight from "../icons/ChevronRight.svelte";
import SkeletonText from "../SkeletonText/SkeletonText.svelte";
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<ul
class:bx--skeleton="{true}"
class:bx--accordion="{true}"
class:bx--accordion--start="{align === 'start'}"
class:bx--accordion--end="{align === 'end'}"
class:bx--accordion--sm="{size === 'sm'}"
class:bx--accordion--xl="{size === 'xl'}"
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave
class:bx--accordion--flush="{flush && align !== 'start'}"
class:bx--layout--size-sm="{size === 'sm'}"
class:bx--layout--size-md="{size === 'md'}"
class:bx--layout--size-lg="{size === 'lg'}"
>
{#if open}
<li
@ -52,7 +56,7 @@
</div>
</li>
{/if}
{#each Array.from({ length: open ? count - 1 : count }, (_, i) => i) as item (item)}
{#each Array.from({ length: open ? count - 1 : count }) as item}
<li class:bx--accordion__item="{true}">
<span class:bx--accordion__heading="{true}">
<ChevronRight class="bx--accordion__arrow" />

202
tests/Accordion.test.svelte
View file

@ -1,188 +1,8 @@
<script lang="ts">
import { Accordion, AccordionItem } from "../types";
import { Accordion, AccordionItem, AccordionSkeleton } from "../types";
</script>
<Accordion>
<AccordionItem title="Natural Language Classifier">
<p>
Natural Language Classifier uses advanced natural language processing and
machine learning techniques to create custom classification models. Users
train their data and the service predicts the appropriate category for the
inputted text.
</p>
</AccordionItem>
<AccordionItem title="Natural Language Understanding">
<p>
Analyze text to extract meta-data from content such as concepts, entities,
emotion, relations, sentiment and more.
</p>
</AccordionItem>
<AccordionItem title="Language Translator">
<p>
Translate text, documents, and websites from one language to another.
Create industry or region-specific translations via the service's
customization capability.
</p>
</AccordionItem>
</Accordion>
<Accordion align="start">
<AccordionItem title="Natural Language Classifier">
<p>
Natural Language Classifier uses advanced natural language processing and
machine learning techniques to create custom classification models. Users
train their data and the service predicts the appropriate category for the
inputted text.
</p>
</AccordionItem>
<AccordionItem title="Natural Language Understanding">
<p>
Analyze text to extract meta-data from content such as concepts, entities,
emotion, relations, sentiment and more.
</p>
</AccordionItem>
<AccordionItem title="Language Translator">
<p>
Translate text, documents, and websites from one language to another.
Create industry or region-specific translations via the service's
customization capability.
</p>
</AccordionItem>
</Accordion>
<Accordion>
<AccordionItem>
<div slot="title">
<h5>Natural Language Classifier</h5>
<div>AI / Machine Learning</div>
</div>
<p>
Natural Language Classifier uses advanced natural language processing and
machine learning techniques to create custom classification models. Users
train their data and the service predicts the appropriate category for the
inputted text.
</p>
</AccordionItem>
<AccordionItem>
<div slot="title">
<h5>Natural Language Understanding</h5>
<div>AI / Machine Learning</div>
</div>
<p>
Analyze text to extract meta-data from content such as concepts, entities,
emotion, relations, sentiment and more.
</p>
</AccordionItem>
<AccordionItem>
<div slot="title">
<h5>Language Translator</h5>
<div>AI / Machine Learning</div>
</div>
<p>
Translate text, documents, and websites from one language to another.
Create industry or region-specific translations via the service's
customization capability.
</p>
</AccordionItem>
</Accordion>
<Accordion>
<AccordionItem open title="Natural Language Classifier">
<p>
Natural Language Classifier uses advanced natural language processing and
machine learning techniques to create custom classification models. Users
train their data and the service predicts the appropriate category for the
inputted text.
</p>
</AccordionItem>
<AccordionItem title="Natural Language Understanding">
<p>
Analyze text to extract meta-data from content such as concepts, entities,
emotion, relations, sentiment and more.
</p>
</AccordionItem>
<AccordionItem title="Language Translator">
<p>
Translate text, documents, and websites from one language to another.
Create industry or region-specific translations via the service's
customization capability.
</p>
</AccordionItem>
</Accordion>
<Accordion size="lg">
<AccordionItem title="Natural Language Classifier">
<p>
Natural Language Classifier uses advanced natural language processing and
machine learning techniques to create custom classification models. Users
train their data and the service predicts the appropriate category for the
inputted text.
</p>
</AccordionItem>
<AccordionItem title="Natural Language Understanding">
<p>
Analyze text to extract meta-data from content such as concepts, entities,
emotion, relations, sentiment and more.
</p>
</AccordionItem>
<AccordionItem title="Language Translator">
<p>
Translate text, documents, and websites from one language to another.
Create industry or region-specific translations via the service's
customization capability.
</p>
</AccordionItem>
</Accordion>
<Accordion size="sm">
<AccordionItem title="Natural Language Classifier">
<p>
Natural Language Classifier uses advanced natural language processing and
machine learning techniques to create custom classification models. Users
train their data and the service predicts the appropriate category for the
inputted text.
</p>
</AccordionItem>
<AccordionItem title="Natural Language Understanding">
<p>
Analyze text to extract meta-data from content such as concepts, entities,
emotion, relations, sentiment and more.
</p>
</AccordionItem>
<AccordionItem title="Language Translator">
<p>
Translate text, documents, and websites from one language to another.
Create industry or region-specific translations via the service's
customization capability.
</p>
</AccordionItem>
</Accordion>
<Accordion disabled>
<AccordionItem title="Natural Language Classifier">
<p>
Natural Language Classifier uses advanced natural language processing and
machine learning techniques to create custom classification models. Users
train their data and the service predicts the appropriate category for the
inputted text.
</p>
</AccordionItem>
<AccordionItem title="Natural Language Understanding">
<p>
Analyze text to extract meta-data from content such as concepts, entities,
emotion, relations, sentiment and more.
</p>
</AccordionItem>
<AccordionItem title="Language Translator">
<p>
Translate text, documents, and websites from one language to another.
Create industry or region-specific translations via the service's
customization capability.
</p>
</AccordionItem>
</Accordion>
<Accordion>
<Accordion size="lg" flush align="end">
<AccordionItem disabled title="Natural Language Classifier">
<p>
Natural Language Classifier uses advanced natural language processing and
@ -192,10 +12,10 @@
</p>
</AccordionItem>
<AccordionItem title="Natural Language Understanding">
<p>
Analyze text to extract meta-data from content such as concepts, entities,
emotion, relations, sentiment and more.
</p>
<svelte:fragment slot="title">
<h6>Natural Language Understanding</h6>
<div>AI / Machine Learning</div>
</svelte:fragment>
</AccordionItem>
<AccordionItem title="Language Translator">
<p>
@ -206,14 +26,6 @@
</AccordionItem>
</Accordion>
<Accordion skeleton />
<Accordion skeleton align="start" />
<Accordion skeleton count="{3}" />
<Accordion skeleton open="{false}" />
<Accordion skeleton size="lg" />
<Accordion skeleton size="sm" />
<AccordionSkeleton align="start" count="{3}" open size="lg"/>

34
types/Accordion/Accordion.svelte.d.ts vendored
View file

@ -1,39 +1,35 @@
import type { SvelteComponentTyped } from "svelte";
import type { AccordionSkeletonProps } from "./AccordionSkeleton.svelte";
export interface AccordionProps extends AccordionSkeletonProps {
export interface AccordionProps {
/**
* Specify alignment of accordion item chevron icon
* Specify the alignment of the accordion item chevron icon.
* @default "end"
*/
align?: "start" | "end";
/**
* Specify the size of the accordion
* @default undefined
* Set to `true` to flush the accordion content text.
*
* **Note**: does not work with `align="start"`.
* @default false
*/
size?: "sm" | "lg";
flush?: boolean;
/**
* Set to `true` to disable the accordion
* Specify the size of the accordion.
* @default "md"
*/
size?: "sm" | "md" | "lg";
/**
* Set to `true` to disable all accordion items.
* @default false
*/
disabled?: boolean;
/**
* Set to `true` to display the skeleton state
* @default false
*/
skeleton?: boolean;
}
export default class Accordion extends SvelteComponentTyped<
AccordionProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
Record<string, any>,
{ default: {} }
> {}

16
types/Accordion/AccordionItem.svelte.d.ts vendored
View file

@ -1,35 +1,31 @@
import type { SvelteComponentTyped } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements";
type RestProps = SvelteHTMLElements["li"];
export interface AccordionItemProps extends RestProps {
export interface AccordionItemProps {
/**
* Specify the title of the accordion item heading.
* Alternatively, use the "title" slot (e.g., `<div slot="title">...</div>`)
* Use the "title" slot for custom elements.
* @example <svelte:fragment slot="title">...</svelte:fragment>
* @default "title"
*/
title?: string;
/**
* Set to `true` to open the first accordion item
* Set to `true` to open the first accordion item.
* @default false
*/
open?: boolean;
/**
* Set to `true` to disable the accordion item
* Set to `true` to disable the accordion item.
* @default false
*/
disabled?: boolean;
/**
* Specify the ARIA label for the accordion item chevron icon
* Specify the ARIA label for the accordion item chevron icon.
* @default "Expand/Collapse"
*/
iconDescription?: string;
[key: `data-${string}`]: any;
}
export default class AccordionItem extends SvelteComponentTyped<

36
types/Accordion/AccordionSkeleton.svelte.d.ts vendored
View file

@ -1,43 +1,41 @@
import type { SvelteComponentTyped } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements";
type RestProps = SvelteHTMLElements["ul"];
export interface AccordionSkeletonProps extends RestProps {
export interface AccordionSkeletonProps {
/**
* Specify the number of accordion items to render
* Specify the number of accordion items.
* @default 4
*/
count?: number;
/**
* Specify alignment of accordion item chevron icon
* Specify the alignment of the accordion item chevron icon.
* @default "end"
*/
align?: "start" | "end";
/**
* Specify the size of the accordion
* @default undefined
* Set to `true` to flush the accordion content text.
*
* **Note**: does not work with `align="start"`.
* @default false
*/
size?: "sm" | "xl";
flush?: boolean;
/**
* Set to `false` to close the first accordion item
* @default true
* Specify the size of the accordion.
* @default "md"
*/
size?: "sm" | "md" | "lg";
/**
* Set to `true` to expand the first accordion item
* @default false
*/
open?: boolean;
[key: `data-${string}`]: any;
}
export default class AccordionSkeleton extends SvelteComponentTyped<
AccordionSkeletonProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
Record<string, any>,
{}
> {}