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

package/generated/docs/components-toaster-toast-docs.md

@@ -0,0 +1,157 @@
+[](#toast)Toast
+===============
+
+Overview
+--------
+
+Toast are a compact way to provide users with important information, usually within a toaster.
+
+This documentation is for the standalone `IressToast` component, and has been exposed for complex use cases where you are unable to use the `useToaster` hook. For most use cases, please use the hook and provider documented at [Toaster documentation](./?path=/docs/components-toaster--docs).
+
+Error
+-----
+
+Connection failure. Longer text description should wrap and look like this. Try to limit to 3 lines or less.
+
+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; }
+
+<IressToast
+  heading\="Error"
+  status\="error"
+\>
+  Connection failure. Longer text description should wrap and look like this. Try to limit to 3 lines or less.
+</IressToast\>
+
+Copy
+
+[](#examples)Examples
+---------------------
+
+### [](#status)Status
+
+The toast offers three status that set a distinctive colour and icon. They can be set using the `status` prop. Their different use cases are described here.
+
+Success
+-------
+
+Use to communicate that an action has been successfully completed, such as saving changes in a form.
+
+Error
+-----
+
+Error toasts are useful for when a user has tried to submit some data but the submit has failed, due to an api error or loss of internet connection, for example.
+
+Info
+----
+
+Ideal for conveying updates or notifications that do not require immediate action, as well as gently inform users about events or changes within an application or interface.
+
+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\="lg"\>
+  <IressToast
+    heading\="Success"
+    status\="success"
+  \>
+    Use to communicate that an action has been successfully completed, such as saving changes in a form.  </IressToast\>
+  <IressToast
+    heading\="Error"
+    status\="error"
+  \>
+    Error toasts are useful for when a user has tried to submit some data but the submit has failed, due to an api error or loss of internet connection, for example.  </IressToast\>
+  <IressToast
+    heading\="Info"
+    status\="info"
+  \>
+    Ideal for conveying updates or notifications that do not require immediate action, as well as gently inform users about events or changes within an application or interface.  </IressToast\>
+</IressStack\>
+
+Copy
+
+### [](#heading)Heading
+
+Use the `heading` prop to add a header to the toast. The header can be any component you like, but it is designed to support a simple heading element. If provided a string, it will display a `<h2 />` element with the string as its content.
+
+**Note:** `headingText` and `headingLevel` props have been replaced with the `heading` render prop to give you more control over the `heading` element and its content. To use the previous behaviour, you can pass a string which will automatically create a `h2` element, or pass a `h*` element with the text as a child.
+
+Toast with a h2 tag
+-------------------
+
+Connection failure. Longer text description should wrap and look like this. Try to limit to 3 lines or less.
+
+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; }
+
+<IressToast
+  heading\={<h2\>Toast with a h2 tag</h2\>}
+  status\="error"
+\>
+  Connection failure. Longer text description should wrap and look like this. Try to limit to 3 lines or less.
+</IressToast\>
+
+Copy
+
+### [](#footer)Footer
+
+The `footer` prop allows for content to be placed below the header and body of the alert. This can be useful for displaying call to actions.
+
+Error
+-----
+
+Connection failure. Longer text description should wrap and look like this. Try to limit to 3 lines or less.
+
+Try Again
+
+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; }
+
+<IressToast
+  actions\={<IressButton key\="test" mode\="danger"\>Try Again</IressButton\>}
+  heading\="Error"
+  status\="error"
+\>
+  Connection failure. Longer text description should wrap and look like this. Try to limit to 3 lines or less.
+</IressToast\>
+
+Copy
+
+### [](#dismiss-button)Dismiss Button
+
+Dismiss Button is on the top right corner and it's showing/hiding based on `dismissible` prop.
+
+**Note:** When it's `true`, `onClose` event is going to be available.
+
+Information
+-----------
+
+Information toast with dismiss 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; }
+
+<IressToast
+  dismissible
+  heading\="Information"
+  status\="info"
+\>
+  Information toast with dismiss button
+</IressToast\>
+
+Copy
+
+On this page
+
+*   [Overview](#overview)
+*   [Props](#props)
+*   [Examples](#examples)
+    *   [Status](#status)
+    *   [Heading](#heading)
+    *   [Footer](#footer)
+    *   [Dismiss Button](#dismiss-button)

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

@@ -0,0 +1,158 @@
+[](#toggle)Toggle
+=================
+
+Overview
+--------
+
+Toggles allow users to turn things on or off. When toggled, the associated change happens straight away.
+
+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; }
+
+<IressToggle
+  layout\="inline"
+\>
+  Toggle
+</IressToggle\>
+
+Copy
+
+[](#usage)Usage
+---------------
+
+Toggles are typically on / off switches, similar to a household light switch. They allow users to choose between two mutually exclusive options, and will always have a default value.
+
+The `IressToggle` component should only be used for actions that happen immediately, for example switching a device's WiFi connection on or off.
+
+Don't use Toggles in forms
+--------------------------
+
+Toggles shouldn’t be used as part of a form as they don’t have the correct semantics, and won’t submit a value when the form data is submitted. If you need a toggleable component in a form, use a checkbox or radio group instead.
+
+### [](#labels)Labels
+
+Toggles should always have a label, which is set via its `children`.
+
+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; }
+
+<IressToggle
+  layout\="inline"
+\>
+  Toggle
+</IressToggle\>
+
+Copy
+
+### [](#hidden-labels)Hidden labels
+
+Labels can be hidden via the `hiddenLabel` prop; this will hide the label from view, but it'll still be available to screen reader users.
+
+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; }
+
+<IressToggle
+  hiddenLabel
+  layout\="inline"
+\>
+  Toggle
+</IressToggle\>
+
+Copy
+
+### [](#checked)Checked
+
+The on / off state of the toggle can be controlled by setting the `checked` prop.
+
+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; }
+
+<IressToggle
+  checked
+  layout\="inline"
+\>
+  Toggle
+</IressToggle\>
+
+Copy
+
+### [](#layout)Layout
+
+The `layout` prop allows you to control the position of the label in relation to the control. The default layout is `inline`, but you can also choose the following options:',
+
+*   `inline-between` similar to inline, but this positions the label and control at opposite ends of their container
+*   `inline-reverse` renders the label after the control instead of before the control
+*   `stack` positions the label above the control
+
+Toggle
+
+Toggle
+
+Toggle
+
+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; }
+
+<IressRow gutter\="lg"\>
+  <IressCol span\="12"\>
+    <IressPanel background\="alt"\>
+      <IressToggle
+        layout\="inline"
+      \>
+        Toggle      </IressToggle\>
+    </IressPanel\>
+  </IressCol\>
+  <IressCol span\="12"\>
+    <IressPanel background\="alt"\>
+      <IressToggle
+        checked
+        layout\="inline-between"
+      \>
+        Toggle      </IressToggle\>
+    </IressPanel\>
+  </IressCol\>
+  <IressCol span\="12"\>
+    <IressPanel background\="alt"\>
+      <IressToggle
+        layout\="inline-reverse"
+      \>
+        Toggle      </IressToggle\>
+    </IressPanel\>
+  </IressCol\>
+  <IressCol span\="12"\>
+    <IressPanel background\="alt"\>
+      <IressToggle
+        checked
+        layout\="stack"
+      \>
+        Toggle      </IressToggle\>
+    </IressPanel\>
+  </IressCol\>
+</IressRow\>
+
+Copy
+
+On this page
+
+*   [Overview](#overview)
+*   [Props](#props)
+*   [Usage](#usage)
+    *   [Labels](#labels)
+    *   [Hidden labels](#hidden-labels)
+    *   [Checked](#checked)
+    *   [Layout](#layout)

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

@@ -0,0 +1,311 @@
+[](#tooltip)Tooltip
+===================
+
+Overview
+--------
+
+A component that shows concise, informative text about an element when focussed upon, hovered over or on a long touch.
+
+Hover me
+
+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; }
+
+<IressTooltip tooltipText\="Hello! This is a really long tooltip to try and see if it goes behind the scrollbar"\>
+  <IressButton\>
+    Hover me  </IressButton\>
+</IressTooltip\>
+
+Copy
+
+[](#usage)Usage
+---------------
+
+The content that will be displayed in the tooltip is passed using the `tooltipText` prop.
+
+This content can only be plain text; there is no parsing of any markup or styling. This is by design as we do not allow complex structures in a tooltip as they are meant to be concise, informative pieces of text.
+
+Text content will wrap on to a new line if it exceeds the tooltip's maximum width. You can also manually format your content into multiple lines by passing an array of strings into the `tooltipText` prop.
+
+Single line
+
+Multi line
+
+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; }
+
+<div
+  style\={{
+    paddingTop: '30px'
+  }}
+\>
+  <IressInline gutter\="md"\>
+    <IressTooltip tooltipText\="Single line Hello! This is a really long tooltip to try and see if it goes behind the scrollbar"\>
+      <IressButton\>
+        Single line      </IressButton\>
+    </IressTooltip\>
+    <IressTooltip
+      tooltipText\={\[
+        'This tooltip',
+        'has multiple lines'
+      \]}
+    \>
+      <IressButton\>
+        Multi line      </IressButton\>
+    </IressTooltip\>
+  </IressInline\>
+</div\>
+
+Copy
+
+[](#behaviour)Behaviour
+-----------------------
+
+The behaviour of tooltips varies according to how they're shown:
+
+*   When a pointer is moved over the activator the tooltip will be shown, and will remain visible for a short period of time after the pointer has moved away (500ms is the default time)
+*   If the activator receives keyboard focus the tooltip will be visible. The tooltip will hide immediately after the focus moves away from the activator.
+*   If the user long presses on the activator (on a touch device). The tooltip will remain visible until the user taps somewhere else on the screen
+
+If the user activates a tooltip via a pointing device and then moves the pointer over the tooltip, it will remain on screen until the pointer is moved away. This is for accessibility purposes where a user may be using magnifying software for example.
+
+[](#accessibility)Accessibility
+-------------------------------
+
+The WCAG guidelines for content that is displayed on hover or focus can be found here: [WCAG 2.1 - 1.4.13 (AA)](https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus).
+
+Other things to keep in mind:
+
+*   For best accessibility, you should only use tooltips on focusable items (eg. `IressButton` and `IressMenuItem`), allowing them to be seen when navigating to the tooltip activator by keyboard
+
+**Notes:**
+
+*   If the text you wish to display is more than a handful of words then consider using an IressModal with an information button.
+*   Tooltips must not be used for help text as they are not immediately visible to the user. We suggest adding hint text to assist the user when filling out forms.
+*   Also think about placement using the align prop. The tooltip should not obscure any critical screen content. Another reason to keep them short.
+
+[](#examples)Examples
+---------------------
+
+### [](#align)Align
+
+The tooltip can be aligned in one of 12 positions relative to the activator element.
+
+The tooltip's position will change dynamically based on the amount of space available in its container window, so that it doesn't overflow the edge. For example, if the tooltip is about to scroll off the top of the screen, it will change its position to bottom. Likewise with left and right scrolling.
+
+Top Start
+
+Top
+
+Top End
+
+Left Start
+
+Left
+
+Left End
+
+Right Start
+
+Right
+
+Right End
+
+Bottom Start
+
+Bottom
+
+Bottom End
+
+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; }
+
+<div
+  style\={{
+    padding: '80px 150px'
+  }}
+\>
+  <IressStack gutter\="md"\>
+    <IressInline
+      gutter\="sm"
+      horizontalAlign\="center"
+    \>
+      <IressTooltip
+        align\="top-start"
+        tooltipText\="Hello!"
+      \>
+        <IressButton\>
+          Top Start        </IressButton\>
+      </IressTooltip\>
+      <IressTooltip
+        align\="top"
+        tooltipText\="Hello!"
+      \>
+        <IressButton\>
+          Top        </IressButton\>
+      </IressTooltip\>
+      <IressTooltip
+        align\="top-end"
+        tooltipText\="Hello!"
+      \>
+        <IressButton\>
+          Top End        </IressButton\>
+      </IressTooltip\>
+    </IressInline\>
+    <IressInline horizontalAlign\="between"\>
+      <IressStack gutter\="sm"\>
+        <IressInline horizontalAlign\="left"\>
+          <IressTooltip
+            align\="left-start"
+            tooltipText\="Hello!"
+          \>
+            <IressButton\>
+              Left Start            </IressButton\>
+          </IressTooltip\>
+        </IressInline\>
+        <IressInline horizontalAlign\="left"\>
+          <IressTooltip
+            align\="left"
+            tooltipText\="Hello!"
+          \>
+            <IressButton\>
+              Left            </IressButton\>
+          </IressTooltip\>
+        </IressInline\>
+        <IressInline horizontalAlign\="left"\>
+          <IressTooltip
+            align\="left-end"
+            tooltipText\="Hello!"
+          \>
+            <IressButton\>
+              Left End            </IressButton\>
+          </IressTooltip\>
+        </IressInline\>
+      </IressStack\>
+      <IressStack gutter\="sm"\>
+        <IressInline horizontalAlign\="right"\>
+          <IressTooltip
+            align\="right-start"
+            tooltipText\="Hello!"
+          \>
+            <IressButton\>
+              Right Start            </IressButton\>
+          </IressTooltip\>
+        </IressInline\>
+        <IressInline horizontalAlign\="right"\>
+          <IressTooltip
+            align\="right"
+            tooltipText\="Hello!"
+          \>
+            <IressButton\>
+              Right            </IressButton\>
+          </IressTooltip\>
+        </IressInline\>
+        <IressInline horizontalAlign\="right"\>
+          <IressTooltip
+            align\="right-end"
+            tooltipText\="Hello!"
+          \>
+            <IressButton\>
+              Right End            </IressButton\>
+          </IressTooltip\>
+        </IressInline\>
+      </IressStack\>
+    </IressInline\>
+    <IressInline
+      gutter\="sm"
+      horizontalAlign\="center"
+    \>
+      <IressTooltip
+        align\="bottom-start"
+        tooltipText\="Hello!"
+      \>
+        <IressButton\>
+          Bottom Start        </IressButton\>
+      </IressTooltip\>
+      <IressTooltip
+        align\="bottom"
+        tooltipText\="Hello!"
+      \>
+        <IressButton\>
+          Bottom        </IressButton\>
+      </IressTooltip\>
+      <IressTooltip
+        align\="bottom-end"
+        tooltipText\="Hello!"
+      \>
+        <IressButton\>
+          Bottom End        </IressButton\>
+      </IressTooltip\>
+    </IressInline\>
+  </IressStack\>
+</div\>
+
+Copy
+
+### [](#delay)Delay
+
+The `delay` prop requires a number that is the number of milliseconds that pass after the activator has received a `mouseEnter` event and the display of the tooltip.
+
+0ms (no delay)
+
+500ms (default)
+
+2000ms
+
+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; }
+
+<div
+  style\={{
+    paddingTop: '30px'
+  }}
+\>
+  <IressInline
+    gutter\="sm"
+    horizontalAlign\="center"
+  \>
+    <IressTooltip
+      delay\={0}
+      tooltipText\="Hello!"
+    \>
+      <IressButton\>
+        0ms (no delay)      </IressButton\>
+    </IressTooltip\>
+    <IressTooltip tooltipText\="Hello!"\>
+      <IressButton\>
+        500ms (default)      </IressButton\>
+    </IressTooltip\>
+    <IressTooltip
+      delay\={2000}
+      tooltipText\="Hello!"
+    \>
+      <IressButton\>
+        2000ms      </IressButton\>
+    </IressTooltip\>
+  </IressInline\>
+</div\>
+
+Copy
+
+### [](#the-title-attribute)The title attribute
+
+The component will not make any provision for existing title HTML attributes. If one exists, it will be activated along with the tooltip, potentially overlaying it making it difficult to ascertain the information being imparted. The title could also contain different content to the tooltip increasing the chance of confusing the end user.
+
+We suggest removing the title attribute on elements that will use tooltip.
+
+On this page
+
+*   [Overview](#overview)
+*   [Props](#props)
+*   [Usage](#usage)
+*   [Behaviour](#behaviour)
+*   [Accessibility](#accessibility)
+*   [Examples](#examples)
+    *   [Align](#align)
+    *   [Delay](#delay)
+    *   [The title attribute](#the-title-attribute)