@iress-oss/ids-mcp-server 5.15.0 → 5.20.2

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

@@ -1,11 +1,13 @@
-[](#recipes)Recipes
-===================
+Recipes
+=======
 
-[](#checkboxes-inside-an-iresstable)Checkboxes inside an `IressTable`
----------------------------------------------------------------------
+Checkboxes inside an `IressTable`
+---------------------------------
 
 You can use `IressCheckboxGroup` and `IressTable` to create a table with checkboxes, allowing the users to select multiple rows.
 
+[](./iframe.html?id=components-checkboxgroup-recipes--table)
+
 Selected values: lemon-drizzle, victoria-sponge
 
 Required Let them eat cake
@@ -30,12 +32,10 @@ Select Carrot Cake
 
 Submit
 
-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; }
+Hide codedrawOpen in CodeSandbox
 
 import {
-  FormControlValue,
+  type FormControlValue,
   IressButton,
   IressCheckbox,
   IressForm,
@@ -43,7 +43,7 @@ import {
   IressPanel,
   IressStack,
   IressTable,
-} from '@iress-oss/ids-components';
+} from '@/main';
 import { IressCheckboxGroup } from '../CheckboxGroup';
 import { toArray } from '../../../helpers/formatting/toArray';
 interface FieldValues {
@@ -112,8 +112,98 @@ export const CheckboxGroupTable \= () \=> (
   </IressForm\>
 );
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be displayed inside the group, usually multiple `IressCheckbox`.
+
+ReactNode
+
+
+
+ | \- | \- |
+| defaultValue | 
+
+Value of checkbox group when in uncontrolled mode.
+
+union
+
+
+
+ | \- | Set object |
+| hiddenCheckbox | 
+
+Hides the checkbox controls to allow the creation of custom checkboxes.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| layout | 
+
+Sets which of the block / inline layout options apply.
+
+union
+
+
+
+ | 
+
+'stack'
+
+ | \- |
+| name | 
+
+Name to be applied to all checkboxes in the group.
+
+string
+
+
+
+ | \- | \- |
+| onChange | 
+
+Called with collated new value when a user toggles one of its children checkboxes.
+
+(value?: FormControlValue\[\]) => void
+
+ | \- | \- |
+| readonly | 
+
+Renders the group in a read-only state.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| role | 
+
+ | 
+
+'group'
+
+ | Set object |
+| touch | 
+
+Add the button-like border and padding to checkbox when `touch` is true.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| value | 
+
+Value of checkbox group when in controlled mode.
+
+union
+
 
-On this page
 
-*   [Checkboxes inside an IressTable](#checkboxes-inside-an-iresstable)
+ | \- | \- |

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

@@ -1,20 +1,23 @@
-[](#col)Col
-===========
+Col
+===
 
 Overview
 --------
 
 Used in conjunction with the `IressRow` component to layout page content
 
+[](./iframe.html?id=components-col--default)
+
 Column 1
 
 Column 2
 
-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; }
+Hide codedrawOpen in CodeSandbox
 
-<IressRow gutter\="md"\>
+<IressRow
+  ref\={undefined}
+  gutter\="md"
+\>
   <IressCol\>
     <IressPlaceholder\>
       Column 1    </IressPlaceholder\>
@@ -25,15 +28,63 @@ Hide code
   </IressCol\>
 </IressRow\>
 
-Copy
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alignSelf | 
+Individual alignment of column
+
+union
+
+
+
+ | \- | Set object |
+| children | 
+
+Any content you would like to be contained in a column.
+
+ReactReactNode
+
+
+
+ | \- | \- |
+| offset | 
+
+Number of columns to offset.
+
+union
+
+
+
+ | \- | Set object |
+| span | 
+
+Number of columns to span.
 
-[](#examples)Examples
----------------------
+union
 
-### [](#auto-sized)Auto-sized
+
+
+ | 
+
+'auto'
+
+ | Set object |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+Examples
+--------
+
+### Auto-sized
 
 When no column widths are specified the `IressCol` component will render equal width columns.
 
+[](./iframe.html?id=components-col--auto-sized)
+
 1 of 2
 
 2 of 2
@@ -44,11 +95,12 @@ When no column widths are specified the `IressCol` component will render equal w
 
 3 of 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; }
+Hide codedrawOpen in CodeSandbox
 
-<IressStack gutter\="md"\>
+<IressStack
+  ref\={undefined}
+  gutter\="md"
+\>
   <IressRow gutter\="md"\>
     <IressCol\>
       <IressPlaceholder\>
@@ -75,14 +127,61 @@ Hide code
   </IressRow\>
 </IressStack\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alignSelf | 
+Individual alignment of column
+
+union
+
+
+
+ | \- | Set object |
+| children | 
+
+Any content you would like to be contained in a column.
+
+ReactReactNode
+
 
-### [](#span)Span
+
+ | \- | \- |
+| offset | 
+
+Number of columns to offset.
+
+union
+
+
+
+ | \- | Set object |
+| span | 
+
+Number of columns to span.
+
+union
+
+
+
+ | 
+
+'auto'
+
+ | Set object |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+### Span
 
 The `span` prop controls the number of grid columns the component should span.
 
 If no `span` is provided it will default to `auto` which will make the column either fill the remaining space in the row (when used with a col number) or size evenly when used with other columns set to auto sizing.
 
+[](./iframe.html?id=components-col--span)
+
 12
 
 1
@@ -109,11 +208,12 @@ If no `span` is provided it will default to `auto` which will make the column ei
 
 6
 
-Hide code
+Hide codedrawOpen in CodeSandbox
 
-\[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"\>
+<IressStack
+  ref\={undefined}
+  gutter\="md"
+\>
   <IressRow gutter\="md"\>
     <IressCol span\="12"\>
       <IressPlaceholder\>
@@ -182,14 +282,48 @@ Hide code
   </IressRow\>
 </IressStack\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alignSelf | 
+Individual alignment of column
+
+union
 
-### [](#responsive-span)Responsive span
+
+
+ | \- | Set object |
+| children | 
+
+Any content you would like to be contained in a column.
+
+ReactReactNode
+
+
+
+ | \- | \- |
+| offset | 
+
+Number of columns to offset.
+
+union
+
+
+
+ | \- | Set object |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+### Responsive span
 
 The `span` prop can take an object that takes five key/value pairs that correlate with the IDS breakpoints. Any missing keys will fall back to the value defined for the next smallest key.
 
 **Note:** If a `span` prop is provided an object but no value is given for `xs` it will default to `12`. This means that columns will be full width on screen sizes below the sizes you've specified.
 
+[](./iframe.html?id=components-col--responsive-span)
+
 Current breakpoint: **xl** breakpoint (1200px - 1499px).
 
 Column 1  
@@ -198,14 +332,15 @@ Column 1
 Column 2  
 {"xs":12,"md":9}
 
-Hide code
+Hide codedrawOpen in CodeSandbox
 
-\[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"\>
+<IressStack
+  ref\={undefined}
+  gutter\="md"
+\>
   <IressPanel\>
     Current breakpoint:{' '}
-    <CurrentBreakpoint />
+    <Ln />
     .  </IressPanel\>
   <IressRow gutter\="md"\>
     <IressCol
@@ -237,12 +372,46 @@ Hide code
   </IressRow\>
 </IressStack\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alignSelf | 
+Individual alignment of column
+
+union
 
-### [](#offset)Offset
+
+
+ | \- | Set object |
+| children | 
+
+Any content you would like to be contained in a column.
+
+ReactReactNode
+
+
+
+ | \- | \- |
+| offset | 
+
+Number of columns to offset.
+
+union
+
+
+
+ | \- | Set object |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+### Offset
 
 The `offset` prop controls the amount of grid columns to offset.
 
+[](./iframe.html?id=components-col--offset)
+
 1
 
 2
@@ -265,11 +434,12 @@ The `offset` prop controls the amount of grid columns to offset.
 
 11
 
-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; }
+Hide codedrawOpen in CodeSandbox
 
-<IressStack gutter\="md"\>
+<IressStack
+  ref\={undefined}
+  gutter\="md"
+\>
   <IressRow gutter\="md"\>
     <IressCol
       offset\="1"
@@ -371,27 +541,70 @@ Hide code
   </IressRow\>
 </IressStack\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alignSelf | 
+Individual alignment of column
+
+union
+
 
-### [](#responsive-offset)Responsive offset
+
+ | \- | Set object |
+| children | 
+
+Any content you would like to be contained in a column.
+
+ReactReactNode
+
+
+
+ | \- | \- |
+| span | 
+
+Number of columns to span.
+
+union
+
+
+
+ | 
+
+'auto'
+
+ | 
+
+"1"
+
+ |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+### Responsive offset
 
 When a `ResponsiveSizing` object is passed into the `offset` prop, the offset will change at the specified breakpoints. It will apply to all breakpoints above the specified breakpoint.
 
 For example, if you specify an offset for `md`, it will apply to `lg`, `xl` and `xxl` as well. If you want to change the offset at a specific breakpoint, you can pass in an object with the breakpoint as the key and the offset as the value.
 
+[](./iframe.html?id=components-col--responsive-offset)
+
 Current breakpoint: **xl** breakpoint (1200px - 1499px).
 
 Column 1  
 {"lg":2}
 
-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; }
+Hide codedrawOpen in CodeSandbox
 
-<IressStack gutter\="md"\>
+<IressStack
+  ref\={undefined}
+  gutter\="md"
+\>
   <IressPanel\>
     Current breakpoint:{' '}
-    <CurrentBreakpoint />
+    <Ln />
     .  </IressPanel\>
   <IressRow gutter\="md"\>
     <IressCol
@@ -409,12 +622,50 @@ Hide code
   </IressRow\>
 </IressStack\>
 
-Copy
+```
 
-### [](#align-self)Align self
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alignSelf | 
+Individual alignment of column
+
+union
+
+
+
+ | \- | Set object |
+| children | 
+
+Any content you would like to be contained in a column.
+
+ReactReactNode
+
+
+
+ | \- | \- |
+| span | 
+
+Number of columns to span.
+
+union
+
+
+
+ | 
+
+'auto'
+
+ | Set object |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+### Align self
 
 The `alignSelf` prop controls the vertical alignment of the column (use if column alignment needs to differ from other columns in the row).
 
+[](./iframe.html?id=components-col--align-self)
+
 Start
 
 Center
@@ -423,13 +674,11 @@ End
 
 Stretch
 
-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; }
+Hide codedrawOpen in CodeSandbox
 
-<IressContainer\>
+<IressContainer ref\={undefined}\>
   <IressRow
-    className\="ids-styles--set-height-v5150"
+    className\="ids-styles--set-height-v5203"
     gutter\="md"
   \>
     <IressCol alignSelf\="start"\>
@@ -451,16 +700,40 @@ Hide code
   </IressRow\>
 </IressContainer\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Any content you would like to be contained in a column.
+
+ReactReactNode
+
+
+
+ | \- | \- |
+| offset | 
+
+Number of columns to offset.
+
+union
+
+
+
+ | \- | Set object |
+| span | 
+
+Number of columns to span.
+
+union
+
+
+
+ | 
 
-On this page
+'auto'
 
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Examples](#examples)
-    *   [Auto-sized](#auto-sized)
-    *   [Span](#span)
-    *   [Responsive span](#responsive-span)
-    *   [Offset](#offset)
-    *   [Responsive offset](#responsive-offset)
-    *   [Align self](#align-self)
+ | Set object |
+| Show Storybook only itemsStorybook only | Show Storybook only items |