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

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

@@ -0,0 +1,245 @@
+[](#recipes)Recipes
+===================
+
+[](#with-iressmenu)With `IressMenu`
+-----------------------------------
+
+When an `IressMenu` is used inside `IressPopover`, it adds some additional functionality to the popover, including:
+
+*   `IressPopover` will automatically close the popover when a menu item is clicked.
+*   `IressMenu` will automatically focus the first menu item when the popover is opened.
+
+role=menu
+
+### Application menu behaviour
+
+*   Once activated, focus is set to the first menu item
+*   Menu items can be navigated using the `up` and `down` arrow keys
+*   Popover will close when:
+    *   the `esc` key is pressed
+    *   the `tab` key is pressed (focus moves to the focusable element in the DOM)
+    *   a menu item is clicked
+
+role=list
+
+### Navigation/list menu behaviour
+
+*   Once activated, focus is set to the popover panel
+*   Menu items can be navigated using the `tab` key
+*   Popover will close when:
+    *   the `esc` key is pressed
+    *   the popover panel loses focus
+
+role=listbox
+
+Multi-select
+
+### Listbox menu behaviour
+
+*   Once activated, focus is set to the first menu item
+*   Menu items can be navigated using arrow keys
+*   Popover will close when:
+    *   the `esc` key is pressed
+    *   the `tab` key is pressed (focus moves to the next focusable element in the DOM)
+    *   a menu item is clicked (except when a listbox menu is in `multiSelect` mode)
+    *   When user presses the `up` key when the first item is focused
+
+role=nav
+
+### Navigation/list menu behaviour
+
+*   Once activated, focus is set to the popover panel
+*   Menu items can be navigated using the `tab` key
+*   Popover will close when:
+    *   the `esc` key is pressed
+    *   the popover panel loses focus
+
+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 className\="iress-u-stack iress--gutter--md"\>
+  <IressRow
+    gutter\="lg"
+    verticalAlign\="middle"
+  \>
+    <IressCol span\="2"\>
+      <IressPopover
+        activator\={<IressButton fluid\>role=menu</IressButton\>}
+        container\={document.body}
+        type\="menu"
+      \>
+        <IressMenu
+          defaultSelected\={3}
+          role\="menu"
+        \>
+          <IressMenuItem value\={0}\>
+            New task          </IressMenuItem\>
+          <IressMenuItem value\={1}\>
+            Send prospect welcome pack          </IressMenuItem\>
+          <IressMenuItem value\={2}\>
+            Book in Discovery meeting          </IressMenuItem\>
+          <IressMenuItem value\={3}\>
+            Prospect proceeding          </IressMenuItem\>
+        </IressMenu\>
+      </IressPopover\>
+    </IressCol\>
+    <IressCol\>
+      <MenuInPopoverRoleDescription role\="menu" />
+    </IressCol\>
+  </IressRow\>
+  <IressRow
+    gutter\="lg"
+    verticalAlign\="middle"
+  \>
+    <IressCol span\="2"\>
+      <IressPopover
+        activator\={<IressButton fluid\>role=list</IressButton\>}
+        container\={document.body}
+      \>
+        <IressMenu
+          defaultSelected\={3}
+          role\="list"
+        \>
+          <IressMenuItem value\={0}\>
+            New task          </IressMenuItem\>
+          <IressMenuItem value\={1}\>
+            Send prospect welcome pack          </IressMenuItem\>
+          <IressMenuItem value\={2}\>
+            Book in Discovery meeting          </IressMenuItem\>
+          <IressMenuItem value\={3}\>
+            Prospect proceeding          </IressMenuItem\>
+        </IressMenu\>
+      </IressPopover\>
+    </IressCol\>
+    <IressCol\>
+      <MenuInPopoverRoleDescription role\="list" />
+    </IressCol\>
+  </IressRow\>
+  <IressRow
+    gutter\="lg"
+    verticalAlign\="middle"
+  \>
+    <IressCol span\="2"\>
+      <IressPopover
+        activator\={<IressButton fluid\>role=listbox</IressButton\>}
+        container\={document.body}
+        type\="listbox"
+      \>
+        <IressMenu
+          defaultSelected\={3}
+          role\="listbox"
+        \>
+          <IressMenuItem value\={0}\>
+            New task          </IressMenuItem\>
+          <IressMenuItem value\={1}\>
+            Send prospect welcome pack          </IressMenuItem\>
+          <IressMenuItem value\={2}\>
+            Book in Discovery meeting          </IressMenuItem\>
+          <IressMenuItem value\={3}\>
+            Prospect proceeding          </IressMenuItem\>
+        </IressMenu\>
+      </IressPopover\>
+    </IressCol\>
+    <IressCol\>
+      <MenuInPopoverRoleDescription role\="listbox"\>
+        <IressToggle
+          className\="iress-mb--md"
+          onChange\={() \=> {}}
+        \>
+          Multi-select        </IressToggle\>
+      </MenuInPopoverRoleDescription\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow
+    gutter\="lg"
+    verticalAlign\="middle"
+  \>
+    <IressCol span\="2"\>
+      <IressPopover
+        activator\={<IressButton fluid\>role=nav</IressButton\>}
+        container\={document.body}
+      \>
+        <IressMenu
+          defaultSelected\={3}
+          role\="nav"
+        \>
+          <IressMenuItem value\={0}\>
+            New task          </IressMenuItem\>
+          <IressMenuItem value\={1}\>
+            Send prospect welcome pack          </IressMenuItem\>
+          <IressMenuItem value\={2}\>
+            Book in Discovery meeting          </IressMenuItem\>
+          <IressMenuItem value\={3}\>
+            Prospect proceeding          </IressMenuItem\>
+        </IressMenu\>
+      </IressPopover\>
+    </IressCol\>
+    <IressCol\>
+      <MenuInPopoverRoleDescription role\="nav" />
+    </IressCol\>
+  </IressRow\>
+</IressContainer\>
+
+Copy
+
+[](#focusable-children)Focusable children
+-----------------------------------------
+
+If you are using the `listbox` or `menu` type popovers, you will notice that focusable children (with the exception of `IressMenuItem`) are not automatically focusable with the arrow keys. To make them focusable, you will need to embed the focusable children using the `usePopoverItem` hook.
+
+The `usePopoverItem` hook will automatically handle the focus management for you. It has two optional arguments:
+
+*   The first argument is the typeahead label of the item you are registering. This will allow it to have a keyboard shortcut to focus the item.
+*   The second argument is a virtual node, which is used in `virtualFocus` enabled popovers and `IressInputPopover`, to mimic the `onKeyDown` and `onBlur` events of the original element when the item is virtually focused using `aria-activedescendant`. If not provided, nothing will happen when the element is virtually focused.
+
+The `usePopoverItem` hook returns an object with the following properties:
+
+*   `isActiveInPopover`: A boolean that indicates if the item is currently focused in the popover. This can be used to style the item differently when it is focused.
+*   `...popoverItemProps`: The rest of the props that you should spread on the focusable element to make it focusable.
+
+Toggle
+
+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; }
+
+const CountButton \= () \=> {
+  const \[count, setCount\] \= useState(0);
+  const { isActiveInPopover, ...popoverItemProps } \= usePopoverItem('Count', {
+    onKeyDown: (e) \=> {
+      if (e.key \=== '+') {
+        setCount(count + 1);
+      }
+    },
+  });
+  const className \= isActiveInPopover ? ButtonCssClass.Active : '';
+  return (
+    <IressButton
+      {...popoverItemProps}
+      className\={className}
+      mode\="tertiary"
+      fluid
+    \>
+      Increase count using the + key: {count}
+    </IressButton\>
+  );
+};
+export const UsePopoverExample \= () \=> (
+  <IressPopover
+    activator\={<IressButton\>Toggle</IressButton\>}
+    container\={document.body}
+    type\="listbox"
+    virtualFocus
+  \>
+    <CountButton />
+    <CountButton />
+  </IressPopover\>
+);
+
+Copy
+
+On this page
+
+*   [With IressMenu](#with-iressmenu)
+*   [Focusable children](#focusable-children)

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

@@ -0,0 +1,104 @@
+[](#progress)Progress
+=====================
+
+Overview
+--------
+
+A progress component is used to indicate to a user the completion of a set of tasks or a process.
+
+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; }
+
+<IressProgress
+  max\={30}
+  min\={10}
+  value\={20}
+/>
+
+Copy
+
+[](#usage)Usage
+---------------
+
+Progress shows how far through a task or operation you are in a graphical way. The simplest way to use it to set the `value` to specify how much of the task the user has completed, relative to the `max` value (which defaults to 100).
+
+### [](#calculation-to-convert-value-in-to-width)Calculation to convert value in to width
+
+The following calculation is used to derive the width percentage:
+
+\[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;
+}
+
+Math.round(
+    ((this.value - this.min) / (this.max - this.min)) \* 100,
+)
+
+Copy
+
+This caters for those scenarios where the `min` or `max` values change.
+
+### [](#boundary-limits)Boundary limits
+
+There is a danger that the value can exceed the boundaries set in the `min` and `max` values, and cause the percentage width of the bar to overflow the indicator. To prevent this the following rules are applied:
+
+*   If the `value` is less than the `min` prop, it is reset to the `min` prop;
+*   If the `value` is more than the `max` prop, it is reset to the `max` prop;
+
+### [](#section-title)Section Title
+
+The `section-title` prop is used by assistive technologies and allows you to tailor the message announced when the progress component is selected. This could be to add extra context about where the user is in a process or section with a multi-part form.
+
+### [](#use-of-tokens)Use of tokens
+
+The message supports the use of two tokens within the announcement, which are replaced when the component is rendered. They are:
+
+*   `{{current}}` - replaced with the `value`;
+*   `{{max}}` - replaced with the maximum limit;
+
+For example, if the component has been implemented with a max of 10, a value of 6 has been set, and the default section title, the screen reader will announce:
+
+\[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;
+}
+
+Step 6 of 10
+
+Copy
+
+On this page
+
+*   [Overview](#overview)
+*   [Props](#props)
+*   [Usage](#usage)
+    *   [Calculation to convert value in to width](#calculation-to-convert-value-in-to-width)
+    *   [Boundary limits](#boundary-limits)
+    *   [Section Title](#section-title)
+    *   [Use of tokens](#use-of-tokens)

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

@@ -0,0 +1,107 @@
+[](#radio)Radio
+===============
+
+Overview
+--------
+
+A radio is a single option presented with a radio button. It is used to select a single option from multiple options. It is typically used in an `IressRadioGroup`.
+
+Radio button
+
+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; }
+
+<IressRadio\>
+  Radio button
+</IressRadio\>
+
+Copy
+
+[](#examples)Examples
+---------------------
+
+### [](#checked)Checked
+
+You can set the radio to `checked` by default. This is useful when you want to pre-select an option.
+
+**Note:** If you are using an `IressRadioGroup`, you should use the `value` prop on the `IressRadioGroup` to set the checked state of its `<IressRadio />` children, as the `checked` prop will be ignored.
+
+Checked radio button
+
+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; }
+
+<IressRadio checked\>
+  Checked radio button
+</IressRadio\>
+
+Copy
+
+### [](#hidden-control)Hidden control
+
+You can hide the radio button and use a custom UI to display the content. Even though the radio button is hidden, it still acts like a radio.
+
+Hidden radio button
+
+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; }
+
+<IressRadio hiddenControl\>
+  <IressPanel\>
+    Hidden radio button  </IressPanel\>
+</IressRadio\>
+
+Copy
+
+### [](#readonly)Readonly
+
+The `readOnly` prop changes how the radio is rendered. It will only render if the radio is 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 radio that is not editable, but still visible, simply do not set the `readOnly` prop and set the `checked` prop instead.
+
+Radio button
+
+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\="sm"\>
+  <IressRadio
+    defaultChecked
+    readOnly
+  \>
+    Radio button  </IressRadio\>
+  <IressRadio readOnly\>
+    Radio button  </IressRadio\>
+</IressStack\>
+
+Copy
+
+### [](#touch)Touch
+
+The `touch` prop adds the button-like border and padding to radio.
+
+Radio button
+
+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; }
+
+<IressRadio touch\>
+  Radio button
+</IressRadio\>
+
+Copy
+
+On this page
+
+*   [Overview](#overview)
+*   [Props](#props)
+*   [Examples](#examples)
+    *   [Checked](#checked)
+    *   [Hidden control](#hidden-control)
+    *   [Readonly](#readonly)
+    *   [Touch](#touch)