@iress-oss/ids-mcp-server 6.0.0-alpha.1-canary-20251204032753-fe18cab → 6.0.0-alpha.1-canary-20251204040305-3639454

package/generated/docs/components_components-stack-docs.md

@@ -0,0 +1,730 @@
+Stack
+=====
+
+Overview
+--------
+
+Use `IressStack` to control vertical spacing between content with consistent present values.
+
+* * *
+
+Updated
+
+**Recently updated**
+
+This component has been recently updated with new props. The props have been marked as beta. Please tell us if there are any issues.
+
+[](./iframe.html?id=components-stack--default)
+
+```
+
+<IressStack gap\="spacing.100"\>
+  <IressPlaceholder height\="50" />
+  <IressPlaceholder height\="50" />
+  <IressPlaceholder height\="50" />
+  <IressPlaceholder height\="50" />
+  <IressPlaceholder height\="50" />
+</IressStack\>
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be separated by a gutter.
+
+ReactNode
+
+
+
+ | \- | Choose option...eveninlineChildrenlist |
+| element | 
+
+The HTML element that should be rendered.
+
+E
+
+
+
+ | \- | Set object |
+| gap | 
+
+Sets the gap between direct children.
+
+ResponsiveProp
+
+
+
+ | \- | 
+
+"spacing.100"
+
+ |
+| horizontalAlign | 
+
+Sets the horizontal alignment of the stack content.
+
+HorizontalAligns
+
+
+
+ | \- | Set object |
+
+Examples
+--------
+
+### Gap
+
+Vertical spacing is applied to the direct children of the `IressStack` component. The amount of spacing is controlled by the gap prop which accepts from `spacing.000` to `spacing.1200`.
+
+#### What happened to `gutter`?
+
+The previous `gutter` prop has been replaced by `gap`, which uses the latest set of spacing tokens. In terms of how it is used to space items inside the `IressStack` component, it is now directly mapped to the [CSS gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/gap), which may change how your application is spaced. For most cases, there should be no change.
+
+[](./iframe.html?id=components-stack--gap)
+
+spacing.000
+-----------
+
+spacing.050
+-----------
+
+spacing.100
+-----------
+
+spacing.150
+-----------
+
+spacing.200
+-----------
+
+spacing.250
+-----------
+
+spacing.300
+-----------
+
+spacing.350
+-----------
+
+spacing.400
+-----------
+
+spacing.500
+-----------
+
+spacing.600
+-----------
+
+spacing.700
+-----------
+
+spacing.800
+-----------
+
+spacing.900
+-----------
+
+spacing.1000
+------------
+
+spacing.1200
+------------
+
+none
+----
+
+xs
+--
+
+sm
+--
+
+md
+--
+
+lg
+--
+
+xl
+--
+
+field.footer
+------------
+
+slider.tick
+-----------
+
+```
+
+<IressStack gap\="spacing.400"\>
+  <IressText\>
+    <h2\>
+      spacing.000    </h2\>
+    <IressStack gap\="spacing.000"\>
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+    </IressStack\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      spacing.050    </h2\>
+    <IressStack gap\="spacing.050"\>
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+    </IressStack\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      spacing.100    </h2\>
+    <IressStack gap\="spacing.100"\>
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+    </IressStack\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      spacing.150    </h2\>
+    <IressStack gap\="spacing.150"\>
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+    </IressStack\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      spacing.200    </h2\>
+    <IressStack gap\="spacing.200"\>
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+    </IressStack\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      spacing.250    </h2\>
+    <IressStack gap\="spacing.250"\>
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+    </IressStack\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      spacing.300    </h2\>
+    <IressStack gap\="spacing.300"\>
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+    </IressStack\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      spacing.350    </h2\>
+    <IressStack gap\="spacing.350"\>
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+    </IressStack\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      spacing.400    </h2\>
+    <IressStack gap\="spacing.400"\>
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+    </IressStack\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      spacing.500    </h2\>
+    <IressStack gap\="spacing.500"\>
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+    </IressStack\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      spacing.600    </h2\>
+    <IressStack gap\="spacing.600"\>
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+    </IressStack\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      spacing.700    </h2\>
+    <IressStack gap\="spacing.700"\>
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+    </IressStack\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      spacing.800    </h2\>
+    <IressStack gap\="spacing.800"\>
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+    </IressStack\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      spacing.900    </h2\>
+    <IressStack gap\="spacing.900"\>
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+    </IressStack\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      spacing.1000    </h2\>
+    <IressStack gap\="spacing.1000"\>
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+    </IressStack\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      spacing.1200    </h2\>
+    <IressStack gap\="spacing.1200"\>
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+    </IressStack\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      none    </h2\>
+    <IressStack gap\="none"\>
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+    </IressStack\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      xs    </h2\>
+    <IressStack gap\="xs"\>
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+    </IressStack\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      sm    </h2\>
+    <IressStack gap\="sm"\>
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+    </IressStack\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      md    </h2\>
+    <IressStack gap\="md"\>
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+    </IressStack\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      lg    </h2\>
+    <IressStack gap\="lg"\>
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+    </IressStack\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      xl    </h2\>
+    <IressStack gap\="xl"\>
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+    </IressStack\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      field.footer    </h2\>
+    <IressStack gap\="field.footer"\>
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+    </IressStack\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      slider.tick    </h2\>
+    <IressStack gap\="slider.tick"\>
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+      <IressPlaceholder height\="50" />
+    </IressStack\>
+  </IressText\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be separated by a gutter.
+
+ReactNode
+
+
+
+ | \- | Choose option...eveninlineChildrenlist |
+| element | 
+
+The HTML element that should be rendered.
+
+E
+
+
+
+ | \- | Set object |
+| gap | 
+
+Sets the gap between direct children.
+
+ResponsiveProp
+
+
+
+ | \- | \- |
+| horizontalAlign | 
+
+Sets the horizontal alignment of the stack content.
+
+HorizontalAligns
+
+
+
+ | \- | Set object |
+
+### Responsive gap
+
+The `gap` prop can take an object that takes five key/value pairs that correlate with the IDS breakpoints.
+
+[](./iframe.html?id=components-stack--responsive-gap)
+
+Current breakpoint: **xl** breakpoint (1200px - 1499px).
+
+`gap={{"xs":"spacing.100","sm":"spacing.200","md":"spacing.400"}}`
+
+```
+
+<IressStack gap\="spacing.400"\>
+  <IressPanel\>
+    <p\>
+      Current breakpoint:{' '}
+      <kn />
+      .    </p\>
+    <p\>
+      <code\>
+        {\`gap={{"xs":"spacing.100","sm":"spacing.200","md":"spacing.400"}}\`}
+      </code\>
+    </p\>
+  </IressPanel\>
+  <IressStack
+    gap\={{
+      md: 'spacing.400',
+      sm: 'spacing.200',
+      xs: 'spacing.100'
+    }}
+  \>
+    <IressPlaceholder height\="50" />
+    <IressPlaceholder height\="50" />
+    <IressPlaceholder height\="50" />
+    <IressPlaceholder height\="50" />
+    <IressPlaceholder height\="50" />
+  </IressStack\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be separated by a gutter.
+
+ReactNode
+
+
+
+ | \- | Choose option...eveninlineChildrenlist |
+| element | 
+
+The HTML element that should be rendered.
+
+E
+
+
+
+ | \- | Set object |
+| gap | 
+
+Sets the gap between direct children.
+
+ResponsiveProp
+
+
+
+ | \- | 
+
+RAW
+
+gap :
+
+{
+
+*   xs : "spacing.100"
+*   sm : "spacing.200"
+*   md : "spacing.400"
+
+}
+
+
+
+
+
+
+
+ |
+| horizontalAlign | 
+
+Sets the horizontal alignment of the stack content.
+
+HorizontalAligns
+
+
+
+ | \- | Set object |
+
+### Inline children
+
+The stack component will treat the direct children as a block element. If you want to wrap some items to display them inline, wrap them with `IressInline`.
+
+In the example below: `IressButton` are inline because of wrapped by `IressInline`.
+
+[](./iframe.html?id=components-stack--inline-children)
+
+Panel 1 (block)
+
+I am a block span with the same margin
+
+Panel 2 (block)
+
+Button 1Button 2Button 3
+
+Panel 3 (block)
+
+```
+
+<IressStack gap\="spacing.400"\>
+  <IressPanel bg\="alt"\>
+    Panel 1 (block)  </IressPanel\>
+  <span\>
+    I am a block span with the same margin  </span\>
+  <IressPanel bg\="alt"\>
+    Panel 2 (block)  </IressPanel\>
+  <IressInline\>
+    <IressButton\>
+      Button 1    </IressButton\>
+    <IressButton\>
+      Button 2    </IressButton\>
+    <IressButton\>
+      Button 3    </IressButton\>
+  </IressInline\>
+  <IressPanel bg\="alt"\>
+    Panel 3 (block)  </IressPanel\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be separated by a gutter.
+
+ReactNode
+
+
+
+ | \- | Choose option...eveninlineChildrenlist |
+| element | 
+
+The HTML element that should be rendered.
+
+E
+
+
+
+ | \- | Set object |
+| gap | 
+
+Sets the gap between direct children.
+
+ResponsiveProp
+
+
+
+ | \- | 
+
+"spacing.400"
+
+ |
+| horizontalAlign | 
+
+Sets the horizontal alignment of the stack content.
+
+HorizontalAligns
+
+
+
+ | \- | Set object |
+
+### Lists
+
+`IressStack` can also apply gap between the list items by using the new `element` (e.g. `ul`) prop.
+
+[](./iframe.html?id=components-stack--lists)
+
+*   List item 1
+*   List item 2
+*   List item 3
+
+```
+
+<IressStack
+  element\="ul"
+  gap\="spacing.700"
+\>
+  <li\>
+    List item 1  </li\>
+  <li\>
+    List item 2  </li\>
+  <li\>
+    List item 3  </li\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be separated by a gutter.
+
+ReactNode
+
+
+
+ | \- | Choose option...eveninlineChildrenlist |
+| element | 
+
+The HTML element that should be rendered.
+
+E
+
+
+
+ | \- | 
+
+"ul"
+
+ |
+| gap | 
+
+Sets the gap between direct children.
+
+ResponsiveProp
+
+
+
+ | \- | 
+
+"spacing.700"
+
+ |
+| horizontalAlign | 
+
+Sets the horizontal alignment of the stack content.
+
+HorizontalAligns
+
+
+
+ | \- | Set object |