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

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

@@ -0,0 +1,683 @@
+[](#radiogroup)RadioGroup
+=========================
+
+Overview
+--------
+
+A radio group is a group of radio buttons that allows the user to select one option from multiple options, where all options are visible.
+
+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; }
+
+<IressRadioGroup\>
+  <IressRadio value\="google"\>
+    Google  </IressRadio\>
+  <IressRadio value\="newspaper"\>
+    Newspaper  </IressRadio\>
+  <IressRadio value\="friend"\>
+    Friend  </IressRadio\>
+  <IressRadio value\="other"\>
+    Other  </IressRadio\>
+</IressRadioGroup\>
+
+Copy
+
+[](#examples)Examples
+---------------------
+
+### [](#radio-children)Radio children
+
+Individual radio buttons can be passed directly into `IressRadioGroup`.
+
+**Note:** The `mapRadioGroupOptions` helper function, originally used to map options to `IressRadio` components, is now deprecated. Instead, you can use `array.map` to map the options to `IressRadio` components.
+
+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; }
+
+<IressRadioGroup\>
+  <IressRadio value\="google"\>
+    Google  </IressRadio\>
+  <IressRadio value\="newspaper"\>
+    Newspaper  </IressRadio\>
+  <IressRadio value\="friend"\>
+    Friend  </IressRadio\>
+  <IressRadio value\="other"\>
+    Other  </IressRadio\>
+</IressRadioGroup\>
+
+Copy
+
+### [](#radio-selection)Radio selection
+
+The default checked state of the radio children should always be set using the `value` prop. Sometimes you may wish to use the `IressRadioGroup` as an "uncontrolled" component - for example, because you are using a third party form library that requires it. In this case, simply use `defaultValue` instead of `value`.
+
+**Note:** The `value` prop on the `IressRadioGroup` component will always override the `checked` state of the `IressRadio` children.
+
+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; }
+
+<IressRadioGroup defaultValue\="newspaper"\>
+  <IressRadio value\="google"\>
+    Google  </IressRadio\>
+  <IressRadio value\="newspaper"\>
+    Newspaper  </IressRadio\>
+  <IressRadio value\="friend"\>
+    Friend  </IressRadio\>
+  <IressRadio value\="other"\>
+    Other  </IressRadio\>
+</IressRadioGroup\>
+
+Copy
+
+### [](#layout)Layout
+
+The layout prop controls how the radio group is displayed and can have three basic layouts:
+
+*   **stack (Default):** Radio buttons 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:** Radio buttons are laid out horizontally. Labels are only as wide as their text.
+*   **inlineFlex:** Radio buttons are laid out horizontally. The container is only as wide as its contents.
+*   **inlineEqualWidth:** Radio buttons are laid out horizontally. Labels take up an equal amount of space in the container.
+
+Note:
+-----
+
+If using any of the inline\* props within a `Field` component, the `Field` also needs the inline prop to be set for the inline layouts to take effect.
+
+### stack
+
+Google
+
+Newspaper
+
+Friend
+
+Other
+
+### block
+
+Google
+
+Newspaper
+
+Friend
+
+Other
+
+### inline
+
+Google
+
+Newspaper
+
+Friend
+
+Other
+
+### inlineFlex
+
+Google
+
+Newspaper
+
+Friend
+
+Other
+
+### inlineEqualWidth
+
+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\>
+    <IressRadioGroup layout\="stack"\>
+      <IressRadio
+        className\="ids-styles--add-border-v5142"
+        value\="google"
+      \>
+        Google      </IressRadio\>
+      <IressRadio
+        className\="ids-styles--add-border-v5142"
+        value\="newspaper"
+      \>
+        Newspaper      </IressRadio\>
+      <IressRadio
+        className\="ids-styles--add-border-v5142"
+        value\="friend"
+      \>
+        Friend      </IressRadio\>
+      <IressRadio
+        className\="ids-styles--add-border-v5142"
+        value\="other"
+      \>
+        Other      </IressRadio\>
+    </IressRadioGroup\>
+  </div\>
+  <div\>
+    <h3\>
+      block    </h3\>
+    <IressRadioGroup layout\="block"\>
+      <IressRadio
+        className\="ids-styles--add-border-v5142"
+        value\="google"
+      \>
+        Google      </IressRadio\>
+      <IressRadio
+        className\="ids-styles--add-border-v5142"
+        value\="newspaper"
+      \>
+        Newspaper      </IressRadio\>
+      <IressRadio
+        className\="ids-styles--add-border-v5142"
+        value\="friend"
+      \>
+        Friend      </IressRadio\>
+      <IressRadio
+        className\="ids-styles--add-border-v5142"
+        value\="other"
+      \>
+        Other      </IressRadio\>
+    </IressRadioGroup\>
+  </div\>
+  <div\>
+    <h3\>
+      inline    </h3\>
+    <IressRadioGroup layout\="inline"\>
+      <IressRadio
+        className\="ids-styles--add-border-v5142"
+        value\="google"
+      \>
+        Google      </IressRadio\>
+      <IressRadio
+        className\="ids-styles--add-border-v5142"
+        value\="newspaper"
+      \>
+        Newspaper      </IressRadio\>
+      <IressRadio
+        className\="ids-styles--add-border-v5142"
+        value\="friend"
+      \>
+        Friend      </IressRadio\>
+      <IressRadio
+        className\="ids-styles--add-border-v5142"
+        value\="other"
+      \>
+        Other      </IressRadio\>
+    </IressRadioGroup\>
+  </div\>
+  <div\>
+    <h3\>
+      inlineFlex    </h3\>
+    <IressRadioGroup layout\="inlineFlex"\>
+      <IressRadio
+        className\="ids-styles--add-border-v5142"
+        value\="google"
+      \>
+        Google      </IressRadio\>
+      <IressRadio
+        className\="ids-styles--add-border-v5142"
+        value\="newspaper"
+      \>
+        Newspaper      </IressRadio\>
+      <IressRadio
+        className\="ids-styles--add-border-v5142"
+        value\="friend"
+      \>
+        Friend      </IressRadio\>
+      <IressRadio
+        className\="ids-styles--add-border-v5142"
+        value\="other"
+      \>
+        Other      </IressRadio\>
+    </IressRadioGroup\>
+  </div\>
+  <div\>
+    <h3\>
+      inlineEqualWidth    </h3\>
+    <IressRadioGroup layout\="inlineEqualWidth"\>
+      <IressRadio
+        className\="ids-styles--add-border-v5142"
+        value\="google"
+      \>
+        Google      </IressRadio\>
+      <IressRadio
+        className\="ids-styles--add-border-v5142"
+        value\="newspaper"
+      \>
+        Newspaper      </IressRadio\>
+      <IressRadio
+        className\="ids-styles--add-border-v5142"
+        value\="friend"
+      \>
+        Friend      </IressRadio\>
+      <IressRadio
+        className\="ids-styles--add-border-v5142"
+        value\="other"
+      \>
+        Other      </IressRadio\>
+    </IressRadioGroup\>
+  </div\>
+</IressText\>
+
+Copy
+
+### [](#hidden-radio-buttons)Hidden radio buttons
+
+You can use the `hiddenRadio` prop to create custom radio buttons. When enabled, the actual radio button 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 radio button is checked.
+
+When `hiddenRadio` is enabled, the label will have no padding. Padding can be added by using a Panel or utility classes.
+
+**I'd like to discuss the following in my financial review:
+
+Select one option
+
+**
+
+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 one option"
+  label\="I'd like to discuss the following in my financial review:"
+\>
+  <IressRadioGroup
+    defaultValue\="home"
+    hiddenRadio
+    layout\="inline"
+    required
+  \>
+    <IressRadio 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\>
+    </IressRadio\>
+    <IressRadio 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\>
+    </IressRadio\>
+    <IressRadio 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\>
+    </IressRadio\>
+  </IressRadioGroup\>
+</IressField\>
+
+Copy
+
+### [](#laying-out-custom-radio-buttons)Laying out custom radio buttons
+
+The radio 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 radio buttons, which will wrap on to new lines as the screen size reduces. The grid wrapper element is a div that wraps around the `<IressRadio />` 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 in my financial review:
+
+Select one option
+
+**
+
+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 one option"
+  label\="I'd like to discuss the following in my financial review:"
+\>
+  <IressRadioGroup
+    hiddenRadio
+    layout\="block"
+    name\="financial-review"
+    required
+    style\={{
+      '--iress-inline-spacing-x': 0,
+      '--iress-margin-bottom': 0
+    }}
+  \>
+    <div
+      className\="ids-styles--resizable-v5142"
+      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%'
+      }}
+    \>
+      <IressRadio 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\>
+      </IressRadio\>
+      <IressRadio 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\>
+      </IressRadio\>
+      <IressRadio 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\>
+      </IressRadio\>
+      <IressRadio 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\>
+      </IressRadio\>
+      <IressRadio 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\>
+      </IressRadio\>
+      <IressRadio 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\>
+      </IressRadio\>
+      <IressRadio 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\>
+      </IressRadio\>
+      <IressRadio 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\>
+      </IressRadio\>
+    </div\>
+  </IressRadioGroup\>
+</IressField\>
+
+Copy
+
+### [](#readonly)Readonly
+
+The `readonly` prop changes how the radio group is rendered. It will only render if the children radio that is checked (alongside a hidden input that contains the `value` if it was set), otherwise it will not be rendered.
+
+It is understandable that this may not be the desired behavior for all use cases. If you need a radio group that is not editable, but still visible, simply do not set the `readonly` prop and set the `value` prop instead.
+
+Newspaper
+
+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; }
+
+<IressRadioGroup
+  defaultValue\="newspaper"
+  readonly
+\>
+  <IressRadio value\="google"\>
+    Google  </IressRadio\>
+  <IressRadio value\="newspaper"\>
+    Newspaper  </IressRadio\>
+  <IressRadio value\="friend"\>
+    Friend  </IressRadio\>
+  <IressRadio value\="other"\>
+    Other  </IressRadio\>
+</IressRadioGroup\>
+
+Copy
+
+### [](#touch)Touch
+
+The `touch` prop adds the button-like border and padding to radio.
+
+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; }
+
+<IressRadioGroup
+  defaultValue\="newspaper"
+  touch
+\>
+  <IressRadio value\="google"\>
+    Google  </IressRadio\>
+  <IressRadio value\="newspaper"\>
+    Newspaper  </IressRadio\>
+  <IressRadio value\="friend"\>
+    Friend  </IressRadio\>
+  <IressRadio value\="other"\>
+    Other  </IressRadio\>
+</IressRadioGroup\>
+
+Copy
+
+On this page
+
+*   [Overview](#overview)
+*   [Props](#props)
+*   [Examples](#examples)
+    *   [Radio children](#radio-children)
+    *   [Radio selection](#radio-selection)
+    *   [Layout](#layout)
+    *   [Hidden radio buttons](#hidden-radio-buttons)
+    *   [Laying out custom radio buttons](#laying-out-custom-radio-buttons)
+    *   [Readonly](#readonly)
+    *   [Touch](#touch)