@iress-oss/ids-mcp-server 0.0.1-dev.0

package/generated/docs/components-checkboxgroup-recipes-docs.md

@@ -0,0 +1,119 @@
+[](#recipes)Recipes
+===================
+
+[](#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.
+
+Selected values: lemon-drizzle, victoria-sponge
+
+Required Let them eat cake
+
+Available options
+| Select | Name |
+| --- | --- |
+| 
+Select lemon drizzle
+
+ | Lemon drizzle |
+| 
+
+Select Victoria Sponge
+
+ | Victoria Sponge |
+| 
+
+Select Carrot Cake
+
+ | 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; }
+
+import {
+  FormControlValue,
+  IressButton,
+  IressCheckbox,
+  IressForm,
+  IressFormFieldset,
+  IressPanel,
+  IressStack,
+  IressTable,
+} from '@iress-oss/ids-components';
+import { IressCheckboxGroup } from '../CheckboxGroup';
+import { toArray } from '../../../helpers/formatting/toArray';
+interface FieldValues {
+  'let-them-eat-cake'?: FormControlValue\[\];
+}
+const SelectedValues \= () \=> {
+  const value \= IressForm.useWatch<FieldValues\>({ name: 'let-them-eat-cake' });
+  const valueString \= toArray(value).join(', ');
+  return (
+    <IressPanel\>
+      Selected values: {valueString ? valueString : 'None'}
+    </IressPanel\>
+  );
+};
+export const CheckboxGroupTable \= () \=> (
+  <IressForm
+    defaultValues\={{
+      'let-them-eat-cake': \['lemon-drizzle', 'victoria-sponge'\],
+    }}
+  \>
+    <IressStack gutter\="md"\>
+      <SelectedValues />
+      <IressFormFieldset
+        label\="Let them eat cake"
+        name\="let-them-eat-cake"
+        hiddenLabel
+        rules\={{ required: 'Please select a cake' }}
+        render\={(field) \=> (
+          <IressCheckboxGroup {...field} layout\="full"\>
+            <IressTable
+              caption\="Available options"
+              columns\={\[
+                { key: 'select', label: 'Select', width: '2rem' },
+                { key: 'name', label: 'Name' },
+              \]}
+              rows\={\[
+                {
+                  select: (
+                    <IressCheckbox hiddenLabel value\="lemon-drizzle"\>
+                      Select lemon drizzle                    </IressCheckbox\>
+                  ),
+                  name: 'Lemon drizzle',
+                },
+                {
+                  select: (
+                    <IressCheckbox hiddenLabel value\="victoria-sponge"\>
+                      Select Victoria Sponge                    </IressCheckbox\>
+                  ),
+                  name: 'Victoria Sponge',
+                },
+                {
+                  select: (
+                    <IressCheckbox hiddenLabel value\="carrot-cake"\>
+                      Select Carrot Cake                    </IressCheckbox\>
+                  ),
+                  name: 'Carrot Cake',
+                },
+              \]}
+            />
+          </IressCheckboxGroup\>
+        )}
+      />
+      <IressButton type\="submit" mode\="primary"\>
+        Submit      </IressButton\>
+    </IressStack\>
+  </IressForm\>
+);
+
+Copy
+
+On this page
+
+*   [Checkboxes inside an IressTable](#checkboxes-inside-an-iresstable)

package/generated/docs/components-col-docs.md

@@ -0,0 +1,466 @@
+[](#col)Col
+===========
+
+Overview
+--------
+
+Used in conjunction with the `IressRow` component to layout page content
+
+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; }
+
+<IressRow gutter\="md"\>
+  <IressCol\>
+    <IressPlaceholder\>
+      Column 1    </IressPlaceholder\>
+  </IressCol\>
+  <IressCol\>
+    <IressPlaceholder\>
+      Column 2    </IressPlaceholder\>
+  </IressCol\>
+</IressRow\>
+
+Copy
+
+[](#examples)Examples
+---------------------
+
+### [](#auto-sized)Auto-sized
+
+When no column widths are specified the `IressCol` component will render equal width columns.
+
+1 of 2
+
+2 of 2
+
+1 of 3
+
+2 of 3
+
+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; }
+
+<IressStack gutter\="md"\>
+  <IressRow gutter\="md"\>
+    <IressCol\>
+      <IressPlaceholder\>
+        1 of 2      </IressPlaceholder\>
+    </IressCol\>
+    <IressCol\>
+      <IressPlaceholder\>
+        2 of 2      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow gutter\="md"\>
+    <IressCol\>
+      <IressPlaceholder\>
+        1 of 3      </IressPlaceholder\>
+    </IressCol\>
+    <IressCol\>
+      <IressPlaceholder\>
+        2 of 3      </IressPlaceholder\>
+    </IressCol\>
+    <IressCol\>
+      <IressPlaceholder\>
+        3 of 3      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+</IressStack\>
+
+Copy
+
+### [](#span)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.
+
+12
+
+1
+
+11
+
+2
+
+10
+
+3
+
+9
+
+4
+
+8
+
+5
+
+7
+
+6
+
+6
+
+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"\>
+  <IressRow gutter\="md"\>
+    <IressCol span\="12"\>
+      <IressPlaceholder\>
+        12      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow gutter\="md"\>
+    <IressCol span\="1"\>
+      <IressPlaceholder\>
+        1      </IressPlaceholder\>
+    </IressCol\>
+    <IressCol\>
+      <IressPlaceholder\>
+        11      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow gutter\="md"\>
+    <IressCol span\="2"\>
+      <IressPlaceholder\>
+        2      </IressPlaceholder\>
+    </IressCol\>
+    <IressCol\>
+      <IressPlaceholder\>
+        10      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow gutter\="md"\>
+    <IressCol span\="3"\>
+      <IressPlaceholder\>
+        3      </IressPlaceholder\>
+    </IressCol\>
+    <IressCol\>
+      <IressPlaceholder\>
+        9      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow gutter\="md"\>
+    <IressCol span\="4"\>
+      <IressPlaceholder\>
+        4      </IressPlaceholder\>
+    </IressCol\>
+    <IressCol\>
+      <IressPlaceholder\>
+        8      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow gutter\="md"\>
+    <IressCol span\="5"\>
+      <IressPlaceholder\>
+        5      </IressPlaceholder\>
+    </IressCol\>
+    <IressCol\>
+      <IressPlaceholder\>
+        7      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow gutter\="md"\>
+    <IressCol span\="6"\>
+      <IressPlaceholder\>
+        6      </IressPlaceholder\>
+    </IressCol\>
+    <IressCol\>
+      <IressPlaceholder\>
+        6      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+</IressStack\>
+
+Copy
+
+### [](#responsive-span)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.
+
+Current breakpoint: **xl** breakpoint (1200px - 1499px).
+
+Column 1  
+{"xs":12,"md":3}
+
+Column 2  
+{"xs":12,"md":9}
+
+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\>
+    Current breakpoint:{' '}
+    <CurrentBreakpoint />
+    .  </IressPanel\>
+  <IressRow gutter\="md"\>
+    <IressCol
+      span\={{
+        md: 3,
+        xs: 12
+      }}
+    \>
+      <IressPlaceholder\>
+        <IressText align\="center"\>
+          Column 1          <br />
+          {\`{"xs":12,"md":3}\`}
+        </IressText\>
+      </IressPlaceholder\>
+    </IressCol\>
+    <IressCol
+      span\={{
+        md: 9,
+        xs: 12
+      }}
+    \>
+      <IressPlaceholder\>
+        <IressText align\="center"\>
+          Column 2          <br />
+          {\`{"xs":12,"md":9}\`}
+        </IressText\>
+      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+</IressStack\>
+
+Copy
+
+### [](#offset)Offset
+
+The `offset` prop controls the amount of grid columns to offset.
+
+1
+
+2
+
+3
+
+4
+
+5
+
+6
+
+7
+
+8
+
+9
+
+10
+
+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; }
+
+<IressStack gutter\="md"\>
+  <IressRow gutter\="md"\>
+    <IressCol
+      offset\="1"
+      span\="1"
+    \>
+      <IressPlaceholder\>
+        1      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow gutter\="md"\>
+    <IressCol
+      offset\="2"
+      span\="1"
+    \>
+      <IressPlaceholder\>
+        2      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow gutter\="md"\>
+    <IressCol
+      offset\="3"
+      span\="1"
+    \>
+      <IressPlaceholder\>
+        3      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow gutter\="md"\>
+    <IressCol
+      offset\="4"
+      span\="1"
+    \>
+      <IressPlaceholder\>
+        4      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow gutter\="md"\>
+    <IressCol
+      offset\="5"
+      span\="1"
+    \>
+      <IressPlaceholder\>
+        5      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow gutter\="md"\>
+    <IressCol
+      offset\="6"
+      span\="1"
+    \>
+      <IressPlaceholder\>
+        6      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow gutter\="md"\>
+    <IressCol
+      offset\="7"
+      span\="1"
+    \>
+      <IressPlaceholder\>
+        7      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow gutter\="md"\>
+    <IressCol
+      offset\="8"
+      span\="1"
+    \>
+      <IressPlaceholder\>
+        8      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow gutter\="md"\>
+    <IressCol
+      offset\="9"
+      span\="1"
+    \>
+      <IressPlaceholder\>
+        9      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow gutter\="md"\>
+    <IressCol
+      offset\="10"
+      span\="1"
+    \>
+      <IressPlaceholder\>
+        10      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow gutter\="md"\>
+    <IressCol
+      offset\="11"
+      span\="1"
+    \>
+      <IressPlaceholder\>
+        11      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+</IressStack\>
+
+Copy
+
+### [](#responsive-offset)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.
+
+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; }
+
+<IressStack gutter\="md"\>
+  <IressPanel\>
+    Current breakpoint:{' '}
+    <CurrentBreakpoint />
+    .  </IressPanel\>
+  <IressRow gutter\="md"\>
+    <IressCol
+      offset\={{
+        lg: 2
+      }}
+    \>
+      <IressPlaceholder\>
+        <IressText align\="center"\>
+          Column 1          <br />
+          {\`{"lg":2}\`}
+        </IressText\>
+      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+</IressStack\>
+
+Copy
+
+### [](#align-self)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).
+
+Start
+
+Center
+
+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; }
+
+<IressContainer\>
+  <IressRow
+    className\="ids-styles--set-height-v5142"
+    gutter\="md"
+  \>
+    <IressCol alignSelf\="start"\>
+      <IressPlaceholder\>
+        Start      </IressPlaceholder\>
+    </IressCol\>
+    <IressCol alignSelf\="center"\>
+      <IressPlaceholder\>
+        Center      </IressPlaceholder\>
+    </IressCol\>
+    <IressCol alignSelf\="end"\>
+      <IressPlaceholder\>
+        End      </IressPlaceholder\>
+    </IressCol\>
+    <IressCol alignSelf\="stretch"\>
+      <IressPlaceholder stretch\>
+        Stretch      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+</IressContainer\>
+
+Copy
+
+On this page
+
+*   [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)