feat(stack): add Stack component (#1963)

carbon-design-system · Apr 22, 2024 · 0f1a77a · 0f1a77a
1 parent a7d3cff
commit 0f1a77a
Show file tree

Hide file tree

Showing 10 changed files with 470 additions and 2 deletions.
diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
@@ -1,6 +1,6 @@
 # Component Index
 
-> 168 components exported from [email protected].
+> 169 components exported from [email protected].
 
 ## Components
 
@@ -127,6 +127,7 @@
 - [`SkipToContent`](#skiptocontent)
 - [`Slider`](#slider)
 - [`SliderSkeleton`](#sliderskeleton)
+- [`Stack`](#stack)
 - [`StructuredList`](#structuredlist)
 - [`StructuredListBody`](#structuredlistbody)
 - [`StructuredListCell`](#structuredlistcell)
@@ -3618,6 +3619,32 @@ None.
 | mouseenter | forwarded | --     |
 | mouseleave | forwarded | --     |
 
+## `Stack`
+
+### Types
+
+```ts
+export type StackScale = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13;
+```
+
+### Props
+
+| Prop name   | Required | Kind             | Reactive | Type                                        | Default value           | Description                                                                                                                                          |
+| :---------- | :------- | :--------------- | :------- | ------------------------------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| gap         | No       | <code>let</code> | No       | <code>StackScale &#124; string</code>       | <code>1</code>          | Specify the gap between items in the stack.<br />The scale maps to Carbon layout values.<br />Alternatively, specify a custom value (e.g., "200px"). |
+| orientation | No       | <code>let</code> | No       | <code>"vertical" &#124; "horizontal"</code> | <code>"vertical"</code> | Specify the orientation of the stack.                                                                                                                |
+| tag         | No       | <code>let</code> | No       | <code>keyof HTMLElementTagNameMap</code>    | <code>"div"</code>      | Specify the tag name                                                                                                                                 |
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| --        | Yes     | --    | --       |
+
+### Events
+
+None.
+
 ## `StructuredList`
 
 ### Props

diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
@@ -1,5 +1,5 @@
 {
-  "total": 168,
+  "total": 169,
   "components": [
     {
       "moduleName": "Accordion",
@@ -11453,6 +11453,59 @@
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div" }
     },
+    {
+      "moduleName": "Stack",
+      "filePath": "src/Stack/Stack.svelte",
+      "props": [
+        {
+          "name": "gap",
+          "kind": "let",
+          "description": "Specify the gap between items in the stack.\nThe scale maps to Carbon layout values.\nAlternatively, specify a custom value (e.g., \"200px\").",
+          "type": "StackScale | string",
+          "value": "1",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "orientation",
+          "kind": "let",
+          "description": "Specify the orientation of the stack.",
+          "type": "\"vertical\" | \"horizontal\"",
+          "value": "\"vertical\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "tag",
+          "kind": "let",
+          "description": "Specify the tag name",
+          "type": "keyof HTMLElementTagNameMap",
+          "value": "\"div\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        }
+      ],
+      "moduleExports": [],
+      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+      "events": [],
+      "typedefs": [
+        {
+          "type": "1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13",
+          "name": "StackScale",
+          "ts": "type StackScale = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13"
+        }
+      ],
+      "rest_props": { "type": "Element", "name": "svelte:element" }
+    },
     {
       "moduleName": "StructuredList",
       "filePath": "src/StructuredList/StructuredList.svelte",

diff --git a/docs/src/global.css b/docs/src/global.css
@@ -149,6 +149,7 @@ html[data-carbon-theme="g90"] .code-override {
 }
 
 .preview-viewer > .bx--aspect-ratio,
+.preview-viewer > .bx--stack > *,
 .preview-viewer [data-outline] {
   outline: 1px solid var(--bx-interactive);
 }