diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 5411c067..c1c105f3 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -198,6 +198,8 @@ import { Accordion } from "carbon-components-svelte"; | Prop name | Type | Default value | | :-------- | :-------------------------------- | :------------ | | align | "start" | "end" | "end" | +| size | "sm" | "xl" | -- | +| disabled | boolean | false | | skeleton | boolean | false | ### Slots @@ -231,6 +233,7 @@ import { AccordionItem } from "carbon-components-svelte"; | :-------------- | :------------------- | :---------------- | | title | string | "title" | | open | boolean | false | +| disabled | boolean | false | | iconDescription | string | "Expand/Collapse" | ### Slots @@ -262,10 +265,12 @@ import { AccordionSkeleton } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------- | :------------ | -| count | number | 4 | -| open | boolean | true | +| Prop name | Type | Default value | +| :-------- | :-------------------------------- | :------------ | +| count | number | 4 | +| align | "start" | "end" | "end" | +| size | "sm" | "xl" | -- | +| open | boolean | true | ### Slots diff --git a/docs/package.json b/docs/package.json index 208780bf..5be73cd4 100644 --- a/docs/package.json +++ b/docs/package.json @@ -12,7 +12,7 @@ "@carbon/themes": "^10.20.0", "@sveltech/routify": "^1.9.9", "autoprefixer": "^10.0.1", - "carbon-components": "^10.21.0", + "carbon-components": "^10.22.0", "carbon-components-svelte": "../", "clipboard-copy": "^3.1.0", "fs-extra": "^9.0.1", diff --git a/docs/src/pages/components/Accordion.svx b/docs/src/pages/components/Accordion.svx index fe2c6517..6bfca06f 100644 --- a/docs/src/pages/components/Accordion.svx +++ b/docs/src/pages/components/Accordion.svx @@ -63,10 +63,83 @@ +### Extra-large size + + + + Content 1 + + + Content 2 + + + Content 3 + + + +### Small size + + + + Content 1 + + + Content 2 + + + Content 3 + + + +### Disabled + + + + Content 1 + + + Content 2 + + + Content 3 + + + +### Disabled (item) + + + + Content 1 + + + Content 2 + + + Content 3 + + + ### Skeleton + + +### Skeleton (chevron aligned left) + + + +### Skeleton (custom count) + ### Skeleton (closed) - \ No newline at end of file + + +### Skeleton (extra-large) + + + +### Skeleton (small) + + + diff --git a/docs/yarn.lock b/docs/yarn.lock index f543447e..9f02ffbb 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -771,15 +771,15 @@ caniuse-lite@^1.0.30001135, caniuse-lite@^1.0.30001137: integrity sha512-VAy5RHDfTJhpxnDdp2n40GPPLp3KqNrXz1QqFv4J64HvArKs8nuNMOWkB3ICOaBTU/Aj4rYAo/ytdQDDFF/Pug== carbon-components-svelte@../: - version "0.15.0" + version "0.16.0" dependencies: carbon-icons-svelte "^10.17.0" flatpickr "4.6.3" -carbon-components@^10.21.0: - version "10.21.0" - resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.21.0.tgz#3e7f79530af79039aab7bf937f0f129642806316" - integrity sha512-IS8WPFGg74g6ZyWpJc4cDlkhqGeNZ1sJshAVTftkb7Nur9W58lSRcu6G9cRMgeL+I/YAia3Q+X4lPh/X16JsGw== +carbon-components@^10.22.0: + version "10.22.0" + resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.22.0.tgz#866791ca8e3f651054543d63f6a898cff6bcacf9" + integrity sha512-0cADWQf1e+6YsxXnjEz630Z7GZa3Z1ssO0UW/HnnJy03Dr+qdT3o6sIgSqObYLddJliAVcjeTlwJshZ9K4bWJQ== dependencies: flatpickr "4.6.1" lodash.debounce "^4.0.8" diff --git a/src/Accordion/Accordion.Skeleton.svelte b/src/Accordion/Accordion.Skeleton.svelte index 26eb01bd..f34c6997 100644 --- a/src/Accordion/Accordion.Skeleton.svelte +++ b/src/Accordion/Accordion.Skeleton.svelte @@ -5,6 +5,18 @@ */ export let count = 4; + /** + * Specify alignment of accordion item chevron icon + * @type {"start" | "end"} [align="end"] + */ + export let align = "end"; + + /** + * Specify the size of the accordion + * @type {"sm" | "xl"} [size] + */ + export let size = undefined; + /** * Set to `false` to close the first accordion item * @type {boolean} [open=true] @@ -19,6 +31,9 @@ class:bx--accordion="{true}" class:bx--skeleton="{true}" {...$$restProps} + class="bx--accordion--{align} + {size && `bx--accordion--${size}`} + {$$restProps.class}" on:click on:mouseover on:mouseenter diff --git a/src/Accordion/Accordion.svelte b/src/Accordion/Accordion.svelte index 2159e051..d85f873e 100644 --- a/src/Accordion/Accordion.svelte +++ b/src/Accordion/Accordion.svelte @@ -5,18 +5,40 @@ */ export let align = "end"; + /** + * Specify the size of the accordion + * @type {"sm" | "xl"} [size] + */ + export let size = undefined; + + /** + * Set to `true` to disable the accordion + * @type {boolean} [disabled=false] + */ + export let disabled = false; + /** * Set to `true` to display the skeleton state * @type {boolean} [skeleton=false] */ export let skeleton = false; + import { setContext } from "svelte"; + import { writable } from "svelte/store"; import AccordionSkeleton from "./Accordion.Skeleton.svelte"; + + const disableItems = writable(disabled); + + $: disableItems.set(disabled); + + setContext("Accordion", { disableItems }); {#if skeleton} { + if (!value && initialDisabled) return; + disabled = value; + }); + + let animation = undefined; + + onMount(() => { + return () => { + unsubscribe(); + }; + });