@iress-oss/ids-mcp-server 5.14.2 → 5.20.1

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

@@ -0,0 +1,82 @@
+Spinner
+=======
+
+Overview
+--------
+
+Spinners notify the user that a task is being processed. They indicate that the app is busy, and should be used when the user has to wait for more than a few seconds.
+
+[](./iframe.html?id=components-spinner--standalone)
+
+```
+
+<IressSpinner screenreaderText\="Making magic happen..." />
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| screenreaderText | 
+string
+
+
+
+ | \- | Making magic happen... |
+| Show Icon itemsIcon | Show Icon items |
+
+Examples
+--------
+
+### Standalone
+
+When using the spinner on its own, you can define the `screenreaderText` prop to provide context to screen readers.
+
+[](./iframe.html?id=components-spinner--standalone)
+
+```
+
+<IressSpinner screenreaderText\="Making magic happen..." />
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| screenreaderText | 
+string
+
+
+
+ | \- | Making magic happen... |
+| Show Icon itemsIcon | Show Icon items |
+
+### Message
+
+You can display a message alongside the spinner. In this case, you do not need to define the `screenreaderText` prop, as you have a visible message to the user telling them what is happening.
+
+[](./iframe.html?id=components-spinner--message)
+
+Making magic happen...
+
+```
+
+<IressInline
+  gutter\="sm"
+  verticalAlign\="middle"
+\>
+  <IressSpinner />
+  <IressText mode\="muted"\>
+    Making magic happen...  </IressText\>
+</IressInline\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| Show Icon itemsIcon | Show Icon items |

package/generated/docs/{components-stack-docs.md → components_components-stack-docs.md}

@@ -1,14 +1,14 @@
-[](#stack)Stack
-===============
+Stack
+=====
 
 Overview
 --------
 
 Use `IressStack` to control vertical spacing between content with consistent present values.
 
-Hide code
+[](./iframe.html?id=components-stack--default)
 
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+```
 
 <IressStack gutter\="md"\>
   <IressPlaceholder height\="50" />
@@ -18,15 +18,48 @@ Hide code
   <IressPlaceholder height\="50" />
 </IressStack\>
 
-Copy
+```
 
-[](#examples)Examples
----------------------
+Props
+-----
 
-### [](#gutter)Gutter
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be separated by a gutter.
+
+ReactNode
+
+
+
+ | \- | Choose option...eveninlineChildrenlistwrappedList |
+| gutter | 
+
+Sets the gutter size of the stack.
+
+union
+
+
+
+ | 
+
+'none'
+
+ | 
+
+"md"
+
+ |
+
+Examples
+--------
+
+### Gutter
 
 Vertical spacing is applied to the direct children of the `IressStack` component. The amount of spacing is controlled by the gutter prop which accepts `none`, `xs`, `sm`, `md`, `lg` or `xl`.
 
+[](./iframe.html?id=components-stack--gutter)
+
 none
 ----
 
@@ -45,9 +78,7 @@ lg
 xl
 --
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+```
 
 <IressStack gutter\="xl"\>
   <IressText\>
@@ -118,25 +149,51 @@ Hide code
   </IressText\>
 </IressStack\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be separated by a gutter.
+
+ReactNode
+
+
+
+ | \- | Choose option...eveninlineChildrenlistwrappedList |
+| gutter | 
+
+Sets the gutter size of the stack.
+
+union
+
 
-### [](#responsive-gutter)Responsive gutter
+
+ | 
+
+'none'
+
+ | \- |
+
+### Responsive gutter
 
 The `gutter` prop can take an object that takes five key/value pairs that correlate with the IDS breakpoints.
 
+[](./iframe.html?id=components-stack--responsive-gutter)
+
 Current breakpoint: **xl** breakpoint (1200px - 1499px).
 
 `gutter={{"xs":"xs","sm":"sm","md":"md"}}`
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+```
 
 <IressStack gutter\="md"\>
   <IressPanel\>
     <p\>
       Current breakpoint:{' '}
-      <CurrentBreakpoint />
+      <kn />
       .    </p\>
     <p\>
       <code\>
@@ -159,9 +216,55 @@ Hide code
   </IressStack\>
 </IressStack\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be separated by a gutter.
+
+ReactNode
+
+
+
+ | \- | Choose option...eveninlineChildrenlistwrappedList |
+| gutter | 
+
+Sets the gutter size of the stack.
+
+union
+
+
+
+ | 
+
+'none'
+
+ | 
+
+RAW
+
+gutter :
+
+{
+
+*   xs : "xs"
+*   sm : "sm"
+*   md : "md"
+
+}
+
+
+
 
-### [](#inline-children)Inline children
+
+
+
+ |
+
+### Inline children
 
 The stack component respects the `display` type of it's direct children.
 
@@ -171,6 +274,8 @@ In the example below:
 *   `IressButton`s recieve the margin but remain inline-block
 *   `IressPanel`s recieve the margin as they are block elements.
 
+[](./iframe.html?id=components-stack--inline-children)
+
 Panel 1 (block)
 
 I am a (inline) span so will get no margin
@@ -181,9 +286,7 @@ Button 1Button 2Button 3
 
 Panel 3 (block)
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+```
 
 <IressStack gutter\="md"\>
   <IressPanel background\="alt"\>
@@ -202,21 +305,51 @@ Hide code
     Panel 3 (block)  </IressPanel\>
 </IressStack\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be separated by a gutter.
+
+ReactNode
+
+
+
+ | \- | Choose option...eveninlineChildrenlistwrappedList |
+| gutter | 
+
+Sets the gutter size of the stack.
+
+union
 
-### [](#lists)Lists
+
+
+ | 
+
+'none'
+
+ | 
+
+"md"
+
+ |
+
+### Lists
 
 `IressStack` can't be used directly with list items as this would break the list semantics; list items need to be direct children of the list. Instead, you can wrap the list element, and the correct margin will be applied to the list items.
 
 This only works if the list is a direct child of the `IressStack` component. If you want to add margin to the list instead of the list items, you'll need to wrap the list in a `<div>`, as shown in the second example below.
 
+[](./iframe.html?id=components-stack--lists)
+
 *   List item 1
 *   List item 2
 *   List item 3
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+```
 
 <IressStack gutter\="md"\>
   <ul className\="iress-u-text"\>
@@ -229,15 +362,45 @@ Hide code
   </ul\>
 </IressStack\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be separated by a gutter.
+
+ReactNode
+
+
+
+ | \- | Choose option...eveninlineChildrenlistwrappedList |
+| gutter | 
+
+Sets the gutter size of the stack.
+
+union
+
+
+
+ | 
+
+'none'
+
+ | 
+
+"md"
+
+ |
+
+[](./iframe.html?id=components-stack--wrapped-list)
 
 *   List item 1
 *   List item 2
 *   List item 3
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+```
 
 <IressStack gutter\="md"\>
   <IressText\>
@@ -252,14 +415,34 @@ Hide code
   </IressText\>
 </IressStack\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be separated by a gutter.
+
+ReactNode
+
+
+
+ | \- | Choose option...eveninlineChildrenlistwrappedList |
+| gutter | 
+
+Sets the gutter size of the stack.
+
+union
+
+
+
+ | 
+
+'none'
+
+ | 
 
-On this page
+"md"
 
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Examples](#examples)
-    *   [Gutter](#gutter)
-    *   [Responsive gutter](#responsive-gutter)
-    *   [Inline children](#inline-children)
-    *   [Lists](#lists)
+ |