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): add "sm", "xl" size variants to Accordion and AccordionSkeleton

Browse source
This commit is contained in:
Eric Liu 2020-10-15 15:48:48 -07:00
commit cb80c7d15b
7 changed files with 50 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

11
COMPONENT_INDEX.md
View file

@ -198,6 +198,7 @@ import { Accordion } from "carbon-components-svelte";
| Prop name | Type | Default value | | Prop name | Type | Default value |
| :-------- | :-------------------------------- | :------------ | | :-------- | :-------------------------------- | :------------ |
| align | <code>"start" &#124; "end"</code> | "end" | | align | <code>"start" &#124; "end"</code> | "end" |
| size | <code>"sm" &#124; "xl"</code> | -- |
| skeleton | <code>boolean</code> | false | | skeleton | <code>boolean</code> | false |
### Slots ### Slots
@ -262,10 +263,12 @@ import { AccordionSkeleton } from "carbon-components-svelte";
### Props ### Props
| Prop name | Type | Default value | | Prop name | Type | Default value |
| :-------- | :------------------- | :------------ | | :-------- | :-------------------------------- | :------------ |
| count | <code>number</code> | 4 | | count | <code>number</code> | 4 |
| open | <code>boolean</code> | true | | align | <code>"start" &#124; "end"</code> | "end" |
| size | <code>"sm" &#124; "xl"</code> | -- |
| open | <code>boolean</code> | true |
### Slots ### Slots

2
docs/package.json
View file

@ -12,7 +12,7 @@
"@carbon/themes": "^10.20.0", "@carbon/themes": "^10.20.0",
"@sveltech/routify": "^1.9.9", "@sveltech/routify": "^1.9.9",
"autoprefixer": "^10.0.1", "autoprefixer": "^10.0.1",
"carbon-components": "^10.21.0", "carbon-components": "^10.22.0",
"carbon-components-svelte": "../", "carbon-components-svelte": "../",
"clipboard-copy": "^3.1.0", "clipboard-copy": "^3.1.0",
"fs-extra": "^9.0.1", "fs-extra": "^9.0.1",

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

@ -63,9 +63,9 @@
</AccordionItem> </AccordionItem>
</Accordion> </Accordion>
### Large size ### Extra-large size
<Accordion size="lg"> <Accordion size="xl">
<AccordionItem title="Title 1"> <AccordionItem title="Title 1">
Content 1 Content 1
</AccordionItem> </AccordionItem>
@ -107,3 +107,11 @@
<Accordion skeleton open={false} /> <Accordion skeleton open={false} />
### Skeleton (extra-large)
<Accordion skeleton size="xl" />
### Skeleton (small)
<Accordion skeleton size="sm" />

10
docs/yarn.lock
View file

@ -771,15 +771,15 @@ caniuse-lite@^1.0.30001135, caniuse-lite@^1.0.30001137:
integrity sha512-VAy5RHDfTJhpxnDdp2n40GPPLp3KqNrXz1QqFv4J64HvArKs8nuNMOWkB3ICOaBTU/Aj4rYAo/ytdQDDFF/Pug== integrity sha512-VAy5RHDfTJhpxnDdp2n40GPPLp3KqNrXz1QqFv4J64HvArKs8nuNMOWkB3ICOaBTU/Aj4rYAo/ytdQDDFF/Pug==
carbon-components-svelte@../: carbon-components-svelte@../:
version "0.15.0" version "0.16.0"
dependencies: dependencies:
carbon-icons-svelte "^10.17.0" carbon-icons-svelte "^10.17.0"
flatpickr "4.6.3" flatpickr "4.6.3"
carbon-components@^10.21.0: carbon-components@^10.22.0:
version "10.21.0" version "10.22.0"
resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.21.0.tgz#3e7f79530af79039aab7bf937f0f129642806316" resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.22.0.tgz#866791ca8e3f651054543d63f6a898cff6bcacf9"
integrity sha512-IS8WPFGg74g6ZyWpJc4cDlkhqGeNZ1sJshAVTftkb7Nur9W58lSRcu6G9cRMgeL+I/YAia3Q+X4lPh/X16JsGw== integrity sha512-0cADWQf1e+6YsxXnjEz630Z7GZa3Z1ssO0UW/HnnJy03Dr+qdT3o6sIgSqObYLddJliAVcjeTlwJshZ9K4bWJQ==
dependencies: dependencies:
flatpickr "4.6.1" flatpickr "4.6.1"
lodash.debounce "^4.0.8" lodash.debounce "^4.0.8"

10
src/Accordion/Accordion.Skeleton.svelte
View file

@ -11,6 +11,12 @@
*/ */
export let 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 * Set to `false` to close the first accordion item
* @type {boolean} [open=true] * @type {boolean} [open=true]
@ -25,7 +31,9 @@
class:bx--accordion="{true}" class:bx--accordion="{true}"
class:bx--skeleton="{true}" class:bx--skeleton="{true}"
{...$$restProps} {...$$restProps}
class="bx--accordion--{align} {$$restProps.class}" class="bx--accordion--{align}
{size && `bx--accordion--${size}`}
{$$restProps.class}"
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter

3
src/Accordion/Accordion.svelte
View file

@ -7,7 +7,7 @@
/** /**
* Specify the size of the accordion * Specify the size of the accordion
* @type {"sm" | "lg"} [size] * @type {"sm" | "xl"} [size]
*/ */
export let size = undefined; export let size = undefined;
@ -24,6 +24,7 @@
<AccordionSkeleton <AccordionSkeleton
{...$$restProps} {...$$restProps}
align="{align}" align="{align}"
size="{size}"
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter

16
types/index.d.ts vendored
View file

@ -18,6 +18,11 @@ export class Accordion extends CarbonSvelteComponent {
*/ */
align?: "start" | "end"; align?: "start" | "end";
/**
* Specify the size of the accordion
*/
size?: "sm" | "xl";
/** /**
* Set to `true` to display the skeleton state * Set to `true` to display the skeleton state
* @default false * @default false
@ -61,6 +66,17 @@ export class AccordionSkeleton extends CarbonSvelteComponent {
*/ */
count?: number; count?: number;
/**
* Specify alignment of accordion item chevron icon
* @default "end"
*/
align?: "start" | "end";
/**
* Specify the size of the accordion
*/
size?: "sm" | "xl";
/** /**
* Set to `false` to close the first accordion item * Set to `false` to close the first accordion item
* @default true * @default true