@iress-oss/ids-mcp-server 5.15.0 → 6.0.0-alpha.1

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

@@ -1,692 +0,0 @@
-[](#checkbox-group)Checkbox Group
-=================================
-
-Overview
---------
-
-Checkbox groups allow users to make more than one choice in a set of related options.
-
-Lemon drizzle
-
-Victoria Sponge
-
-Carrot Cake
-
-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; }
-
-<IressCheckboxGroup name\="let-them-eat-cake"\>
-  <IressCheckbox value\="lemon-drizzle"\>
-    Lemon drizzle  </IressCheckbox\>
-  <IressCheckbox value\="victoria-sponge"\>
-    Victoria Sponge  </IressCheckbox\>
-  <IressCheckbox value\="carrot-cake"\>
-    Carrot Cake  </IressCheckbox\>
-</IressCheckboxGroup\>
-
-Copy
-
-[](#examples)Examples
----------------------
-
-### [](#checkbox-children)Checkbox children
-
-Individual checkboxes can be passed directly into `IressCheckboxGroup`.
-
-**Note:** The `mapCheckboxGroupOptions` helper function, originally used to map options to `IressCheckbox` components, is now deprecated. Instead, you can use `array.map` to map the options to `IressCheckbox` components.
-
-Lemon drizzle
-
-Victoria Sponge
-
-Carrot Cake
-
-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; }
-
-<IressCheckboxGroup name\="let-them-eat-cake"\>
-  <IressCheckbox value\="lemon-drizzle"\>
-    Lemon drizzle  </IressCheckbox\>
-  <IressCheckbox value\="victoria-sponge"\>
-    Victoria Sponge  </IressCheckbox\>
-  <IressCheckbox value\="carrot-cake"\>
-    Carrot Cake  </IressCheckbox\>
-</IressCheckboxGroup\>
-
-Copy
-
-### [](#default-checked)Default checked
-
-The default checked state of the checkbox children should always be set using the `defaultValue` prop (not directly on the checkbox component).
-
-The `defaultValue` prop can contain an array of strings, numbers or booleans.
-
-Lemon drizzle
-
-Victoria Sponge
-
-Carrot Cake
-
-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; }
-
-<IressCheckboxGroup
-  defaultValue\={\[
-    'lemon-drizzle',
-    'victoria-sponge'
-  \]}
-  name\="let-them-eat-cake"
-\>
-  <IressCheckbox value\="lemon-drizzle"\>
-    Lemon drizzle  </IressCheckbox\>
-  <IressCheckbox value\="victoria-sponge"\>
-    Victoria Sponge  </IressCheckbox\>
-  <IressCheckbox value\="carrot-cake"\>
-    Carrot Cake  </IressCheckbox\>
-</IressCheckboxGroup\>
-
-Copy
-
-### [](#changing-the-checked-state)Changing the checked state
-
-The `value` prop can be updated if you need to change the checked state without interacting with the checkboxes.
-
-For example, if you want to clear down the selected options:
-
-Lemon drizzle
-
-Victoria Sponge
-
-Carrot Cake
-
-Clear
-
-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,
-  IressCheckboxGroup,
-  IressCheckboxGroupProps,
-  IressStack,
-} from '@iress-oss/ids-components';
-import { useState } from 'react';
-export const CheckboxGroupUsingState \= () \=> {
-  const \[value, setValue\] \= useState<FormControlValue\[\]\>(\[\]);
-  return (
-    <IressStack gutter\={IressStack.Gutter.Sm}\>
-      <IressCheckboxGroup
-        {...{
-  name: 'let-them-eat-cake',
-}}
-        value\={value}
-        onChange\={(newValue) \=> setValue(newValue ?? \[\])}
-      \>
-        <IressCheckbox value\="lemon-drizzle"\>Lemon drizzle</IressCheckbox\>
-        <IressCheckbox value\="victoria-sponge"\>Victoria Sponge</IressCheckbox\>
-        <IressCheckbox value\="carrot-cake"\>Carrot Cake</IressCheckbox\>
-      </IressCheckboxGroup\>
-      <IressButton onClick\={() \=> setValue(\[\])}\>Clear</IressButton\>
-    </IressStack\>
-  );
-};
-
-Copy
-
-### [](#layout)Layout
-
-The `layout` prop controls how the checkbox group is displayed and can have three basic layouts:
-
-*   **Stack (Default):** Checkboxes are laid out vertically. Labels are only as wide as their text.
-*   **Block:** Same as Stack, but labels take up the full width of the container.
-*   **Inline:** Checkboxes are laid out horizontally. Labels are only as wide as their text.
-
-### stack
-
-Google
-
-Newspaper
-
-Friend
-
-Other
-
-### block
-
-Google
-
-Newspaper
-
-Friend
-
-Other
-
-### inline
-
-Google
-
-Newspaper
-
-Friend
-
-Other
-
-### full
-
-Google
-
-Newspaper
-
-Friend
-
-Other
-
-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; }
-
-<IressText className\="iress-u-stack iress--gutter--lg"\>
-  <div\>
-    <h3\>
-      stack    </h3\>
-    <IressCheckboxGroup layout\="stack"\>
-      <IressCheckbox
-        className\="ids-styles--add-border-to-label-v5150"
-        value\="google"
-      \>
-        Google      </IressCheckbox\>
-      <IressCheckbox
-        className\="ids-styles--add-border-to-label-v5150"
-        value\="newspaper"
-      \>
-        Newspaper      </IressCheckbox\>
-      <IressCheckbox
-        className\="ids-styles--add-border-to-label-v5150"
-        value\="friend"
-      \>
-        Friend      </IressCheckbox\>
-      <IressCheckbox
-        className\="ids-styles--add-border-to-label-v5150"
-        value\="other"
-      \>
-        Other      </IressCheckbox\>
-    </IressCheckboxGroup\>
-  </div\>
-  <div\>
-    <h3\>
-      block    </h3\>
-    <IressCheckboxGroup layout\="block"\>
-      <IressCheckbox
-        className\="ids-styles--add-border-to-label-v5150"
-        value\="google"
-      \>
-        Google      </IressCheckbox\>
-      <IressCheckbox
-        className\="ids-styles--add-border-to-label-v5150"
-        value\="newspaper"
-      \>
-        Newspaper      </IressCheckbox\>
-      <IressCheckbox
-        className\="ids-styles--add-border-to-label-v5150"
-        value\="friend"
-      \>
-        Friend      </IressCheckbox\>
-      <IressCheckbox
-        className\="ids-styles--add-border-to-label-v5150"
-        value\="other"
-      \>
-        Other      </IressCheckbox\>
-    </IressCheckboxGroup\>
-  </div\>
-  <div\>
-    <h3\>
-      inline    </h3\>
-    <IressCheckboxGroup layout\="inline"\>
-      <IressCheckbox
-        className\="ids-styles--add-border-to-label-v5150"
-        value\="google"
-      \>
-        Google      </IressCheckbox\>
-      <IressCheckbox
-        className\="ids-styles--add-border-to-label-v5150"
-        value\="newspaper"
-      \>
-        Newspaper      </IressCheckbox\>
-      <IressCheckbox
-        className\="ids-styles--add-border-to-label-v5150"
-        value\="friend"
-      \>
-        Friend      </IressCheckbox\>
-      <IressCheckbox
-        className\="ids-styles--add-border-to-label-v5150"
-        value\="other"
-      \>
-        Other      </IressCheckbox\>
-    </IressCheckboxGroup\>
-  </div\>
-  <div\>
-    <h3\>
-      full    </h3\>
-    <IressCheckboxGroup layout\="full"\>
-      <IressCheckbox
-        className\="ids-styles--add-border-to-label-v5150"
-        value\="google"
-      \>
-        Google      </IressCheckbox\>
-      <IressCheckbox
-        className\="ids-styles--add-border-to-label-v5150"
-        value\="newspaper"
-      \>
-        Newspaper      </IressCheckbox\>
-      <IressCheckbox
-        className\="ids-styles--add-border-to-label-v5150"
-        value\="friend"
-      \>
-        Friend      </IressCheckbox\>
-      <IressCheckbox
-        className\="ids-styles--add-border-to-label-v5150"
-        value\="other"
-      \>
-        Other      </IressCheckbox\>
-    </IressCheckboxGroup\>
-  </div\>
-</IressText\>
-
-Copy
-
-### [](#hidden-checkboxes)Hidden checkboxes
-
-You can use the `hiddenCheckbox` prop to create custom checkboxes. When enabled, the actual checkbox will be visually hidden, allowing you to create more interesting controls. The checked state will be shown by the label's border, which is thicker when the checkbox is checked.
-
-When `hiddenCheckbox` is enabled, the label will have no padding. Padding can be added by using an `IressPanel`.
-
-**I'd like to discuss the following with my financial adviser:
-
-Select all that apply
-
-**
-
-Buying my first home
-
-Saving for a holiday
-
-Reducing my debt
-
-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; }
-
-<IressField
-  hint\="Select all that apply"
-  label\="I'd like to discuss the following with my financial adviser:"
-\>
-  <IressCheckboxGroup
-    defaultValue\={\[
-      'home'
-    \]}
-    hiddenCheckbox
-    layout\="inline"
-    name\="financial-review"
-  \>
-    <IressCheckbox value\="home"\>
-      <IressPanel
-        background\="transparent"
-        padding\="lg"
-        textAlign\="center"
-      \>
-        <IressStack gutter\="md"\>
-          <IressIcon
-            name\="house"
-            size\="3x"
-          />
-          <IressText
-            noGutter
-            variant\="h4"
-          \>
-            Buying my first home          </IressText\>
-        </IressStack\>
-      </IressPanel\>
-    </IressCheckbox\>
-    <IressCheckbox value\="holiday"\>
-      <IressPanel
-        background\="transparent"
-        padding\="lg"
-        textAlign\="center"
-      \>
-        <IressStack gutter\="md"\>
-          <IressIcon
-            name\="mountain"
-            size\="3x"
-          />
-          <IressText
-            noGutter
-            variant\="h4"
-          \>
-            Saving for a holiday          </IressText\>
-        </IressStack\>
-      </IressPanel\>
-    </IressCheckbox\>
-    <IressCheckbox value\="debt"\>
-      <IressPanel
-        background\="transparent"
-        padding\="lg"
-        textAlign\="center"
-      \>
-        <IressStack gutter\="md"\>
-          <IressIcon
-            name\="credit-card"
-            size\="3x"
-          />
-          <IressText
-            noGutter
-            variant\="h4"
-          \>
-            Reducing my debt          </IressText\>
-        </IressStack\>
-      </IressPanel\>
-    </IressCheckbox\>
-  </IressCheckboxGroup\>
-</IressField\>
-
-Copy
-
-### [](#laying-out-custom-checkboxes)Laying out custom checkboxes
-
-The checkbox group's `layout` prop gives you some default options to help control the layout of your controls. But sometimes you need more granular control, which you can achieve with a bit of custom CSS.
-
-The example below uses CSS grid to give us evenly spaced / sized checkboxes, which will wrap on to new lines as the screen size reduces. The grid wrapper element is a div that wraps around the `<IressCheckbox>` elements, as shown by the dashed border. Use the grab handle in the bottom right-hand corner of the grid wrapper to see how the controls change size to respond to the container's width.
-
-**I'd like to discuss the following with my financial adviser:
-
-Select all that apply
-
-**
-
-Retirement
-
-Buying my first home
-
-Saving for a holiday
-
-Saving for my child's education
-
-Saving for emergency
-
-Spending more time on my hobbies
-
-Reducing my debt
-
-Starting a business
-
-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; }
-
-<IressField
-  hint\="Select all that apply"
-  label\="I'd like to discuss the following with my financial adviser:"
-\>
-  <IressCheckboxGroup
-    defaultValue\={\[
-      'home'
-    \]}
-    hiddenCheckbox
-    layout\="block"
-    name\="financial-review"
-    style\={{
-      '--iress-inline-spacing-x': 0,
-      '--iress-margin-bottom': 0
-    }}
-  \>
-    <div
-      className\="ids-styles--resizable-v5150"
-      style\={{
-        display: 'grid',
-        gridAutoRows: '1fr',
-        gridGap: 'var(--iress-g-spacing-sm, 0.75rem)',
-        gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
-        padding: '0.5rem',
-        width: '100%'
-      }}
-    \>
-      <IressCheckbox value\="retirement"\>
-        <IressPanel
-          background\="transparent"
-          padding\="lg"
-          textAlign\="center"
-        \>
-          <IressStack gutter\="md"\>
-            <IressIcon
-              name\="tree-palm"
-              size\="3x"
-            />
-            <IressText
-              noGutter
-              variant\="h4"
-            \>
-              Retirement            </IressText\>
-          </IressStack\>
-        </IressPanel\>
-      </IressCheckbox\>
-      <IressCheckbox value\="home"\>
-        <IressPanel
-          background\="transparent"
-          padding\="lg"
-          textAlign\="center"
-        \>
-          <IressStack gutter\="md"\>
-            <IressIcon
-              name\="house"
-              size\="3x"
-            />
-            <IressText
-              noGutter
-              variant\="h4"
-            \>
-              Buying my first home            </IressText\>
-          </IressStack\>
-        </IressPanel\>
-      </IressCheckbox\>
-      <IressCheckbox value\="holiday"\>
-        <IressPanel
-          background\="transparent"
-          padding\="lg"
-          textAlign\="center"
-        \>
-          <IressStack gutter\="md"\>
-            <IressIcon
-              name\="mountain"
-              size\="3x"
-            />
-            <IressText
-              noGutter
-              variant\="h4"
-            \>
-              Saving for a holiday            </IressText\>
-          </IressStack\>
-        </IressPanel\>
-      </IressCheckbox\>
-      <IressCheckbox value\="education"\>
-        <IressPanel
-          background\="transparent"
-          padding\="lg"
-          textAlign\="center"
-        \>
-          <IressStack gutter\="md"\>
-            <IressIcon
-              name\="graduation-cap"
-              size\="3x"
-            />
-            <IressText
-              noGutter
-              variant\="h4"
-            \>
-              Saving for my child's education            </IressText\>
-          </IressStack\>
-        </IressPanel\>
-      </IressCheckbox\>
-      <IressCheckbox value\="emergency"\>
-        <IressPanel
-          background\="transparent"
-          padding\="lg"
-          textAlign\="center"
-        \>
-          <IressStack gutter\="md"\>
-            <IressIcon
-              name\="medkit"
-              size\="3x"
-            />
-            <IressText
-              noGutter
-              variant\="h4"
-            \>
-              Saving for emergency            </IressText\>
-          </IressStack\>
-        </IressPanel\>
-      </IressCheckbox\>
-      <IressCheckbox value\="hobby"\>
-        <IressPanel
-          background\="transparent"
-          padding\="lg"
-          textAlign\="center"
-        \>
-          <IressStack gutter\="md"\>
-            <IressIcon
-              name\="bicycle"
-              size\="3x"
-            />
-            <IressText
-              noGutter
-              variant\="h4"
-            \>
-              Spending more time on my hobbies            </IressText\>
-          </IressStack\>
-        </IressPanel\>
-      </IressCheckbox\>
-      <IressCheckbox value\="debt"\>
-        <IressPanel
-          background\="transparent"
-          padding\="lg"
-          textAlign\="center"
-        \>
-          <IressStack gutter\="md"\>
-            <IressIcon
-              name\="chart-line-down"
-              size\="3x"
-            />
-            <IressText
-              noGutter
-              variant\="h4"
-            \>
-              Reducing my debt            </IressText\>
-          </IressStack\>
-        </IressPanel\>
-      </IressCheckbox\>
-      <IressCheckbox value\="business"\>
-        <IressPanel
-          background\="transparent"
-          padding\="lg"
-          textAlign\="center"
-        \>
-          <IressStack gutter\="md"\>
-            <IressIcon
-              name\="user-tie"
-              size\="3x"
-            />
-            <IressText
-              noGutter
-              variant\="h4"
-            \>
-              Starting a business            </IressText\>
-          </IressStack\>
-        </IressPanel\>
-      </IressCheckbox\>
-    </div\>
-  </IressCheckboxGroup\>
-</IressField\>
-
-Copy
-
-### [](#readonly)Readonly
-
-The `readonly` prop changes how the checkbox group is rendered. It will only render the children that are checked (alongside a hidden input that contains the `value` if it was set), otherwise it not be rendered.
-
-It is understandable that this may not be the desired behavior for all use cases. If you need a checkbox group that is not editable, but still visible, simply do not set the `readonly` prop and set the `value` prop instead.
-
-Lemon drizzle
-
-Victoria Sponge
-
-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; }
-
-<IressCheckboxGroup
-  defaultValue\={\[
-    'lemon-drizzle',
-    'victoria-sponge'
-  \]}
-  name\="let-them-eat-cake"
-  readonly
-\>
-  <IressCheckbox value\="lemon-drizzle"\>
-    Lemon drizzle  </IressCheckbox\>
-  <IressCheckbox value\="victoria-sponge"\>
-    Victoria Sponge  </IressCheckbox\>
-  <IressCheckbox value\="carrot-cake"\>
-    Carrot Cake  </IressCheckbox\>
-</IressCheckboxGroup\>
-
-Copy
-
-### [](#touch)Touch
-
-The `touch` prop adds the button-like border and padding to checkbox.
-
-Lemon drizzle
-
-Victoria Sponge
-
-Carrot Cake
-
-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; }
-
-<IressCheckboxGroup
-  defaultValue\={\[
-    'lemon-drizzle',
-    'victoria-sponge'
-  \]}
-  name\="let-them-eat-cake"
-  touch
-\>
-  <IressCheckbox value\="lemon-drizzle"\>
-    Lemon drizzle  </IressCheckbox\>
-  <IressCheckbox value\="victoria-sponge"\>
-    Victoria Sponge  </IressCheckbox\>
-  <IressCheckbox value\="carrot-cake"\>
-    Carrot Cake  </IressCheckbox\>
-</IressCheckboxGroup\>
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Examples](#examples)
-    *   [Checkbox children](#checkbox-children)
-    *   [Default checked](#default-checked)
-    *   [Changing the checked state](#changing-the-checked-state)
-    *   [Layout](#layout)
-    *   [Hidden checkboxes](#hidden-checkboxes)
-    *   [Laying out custom checkboxes](#laying-out-custom-checkboxes)
-    *   [Readonly](#readonly)
-    *   [Touch](#touch)