feat(accordion): add "sm", "xl" size variants to Accordion and AccordionSkeleton

COMPONENT_INDEX.md

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

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",

docs/src/pages/components/Accordion.svx

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

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"

src/Accordion/Accordion.Skeleton.svelte

@@ -11,6 +11,12 @@
    */
   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]
@@ -25,7 +31,9 @@
   class:bx--accordion="{true}"
   class:bx--skeleton="{true}"
   {...$$restProps}
-  class="bx--accordion--{align} {$$restProps.class}"
+  class="bx--accordion--{align}
+    {size && `bx--accordion--${size}`}
+    {$$restProps.class}"
   on:click
   on:mouseover
   on:mouseenter

src/Accordion/Accordion.svelte

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

types/index.d.ts

@@ -18,6 +18,11 @@ export class Accordion extends CarbonSvelteComponent {
      */
     align?: "start" | "end";
 
+    /**
+     * Specify the size of the accordion
+     */
+    size?: "sm" | "xl";
+
     /**
      * Set to `true` to display the skeleton state
      * @default false
@@ -61,6 +66,17 @@ export class AccordionSkeleton extends CarbonSvelteComponent {
      */
     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
      * @default true