@iress-oss/ids-mcp-server 6.0.0-alpha.1-canary-20251204032753-fe18cab → 6.0.0-alpha.1-canary-20251204040305-3639454

package/generated/docs/components_foundations-user-experience-docs.md

@@ -0,0 +1,53 @@
+User experience
+===============
+
+We use heuristic guidelines to assess the usability and user-centred design quality of all Iress products.
+
+System Feedback
+---------------
+
+*   Always show users where they are, what just happened, and what’s possible next.
+*   Provide immediate visual and textual feedback for all actions and states.
+*   Ensure feedback is clear, contextual, and proportionate to the importance of the action.
+
+Language and Mental Models
+--------------------------
+
+*   Use user-centred language and avoid technical jargon.
+*   Follow cultural and industry conventions for colour, iconography, terminology, and layout.
+*   Align interaction patterns with real-world analogues wherever feasible.
+
+Control and Forgiveness
+-----------------------
+
+*   Make actions reversible and provide undo where errors may occur.
+*   Let users easily backtrack, edit inputs, or abandon flows.
+*   Provide escape hatches from any process without penalty.
+
+Standards and Consistency
+-------------------------
+
+*   Use consistent layout, labelling, iconography, and grammar.
+*   Reinforce expectations by placing similar elements in predictable positions.
+*   Apply colour, spacing, and visual patterns consistently across all screens.
+
+Error Prevention and Recovery
+-----------------------------
+
+*   Prevent errors by anticipating misuse and validating early.
+*   Phrase error messages with clarity, empathy, and constructive suggestions.
+*   Where errors occur, explain why and how they can be resolved.
+
+Recognition Over Recall
+-----------------------
+
+*   Display necessary information at the point of decision.
+*   Use visual grouping, spacing, and affordance to reveal hierarchy.
+*   Prioritise visual clarity over novelty.
+
+Simplicity and Minimalism
+-------------------------
+
+*   Remove unnecessary detail—every word, element, or feature should earn its place.
+*   Design for clarity of purpose with visually distinct, semantically meaningful UI components.
+*   Use whitespace, clean alignment, and simplified flows to reduce cognitive load.

package/generated/docs/components_foundations-visual-design-docs.md

@@ -0,0 +1,39 @@
+Visual Design Standards
+=======================
+
+Typography
+----------
+
+*   Use systematic font sizing with heading scales (H1-H6)
+*   Implement consistent line heights and font weights
+*   Provide text colour hierarchies (primary, muted, success, warning, danger)
+*   Support responsive typography scaling
+
+Colour System
+-------------
+
+*   Maintain semantic colour meanings:
+    *   **Primary**: Main call-to-action colour with high contrast
+    *   **Success**: Positive outcomes and confirmations
+    *   **Warning**: Caution and important notices
+    *   **Danger**: Errors and destructive actions
+    *   **Info**: Neutral information and guidance
+    *   **Positive/Negative**: Financial context (buy/sell actions)
+*   Ensure all colour combinations meet accessibility contrast requirements
+*   Provide consistent hover and active state colours
+
+Spacing and Layout
+------------------
+
+*   Use systematic spacing scale (xs, sm, md, lg, xl)
+*   Apply consistent gutter systems for layout components
+*   Implement responsive breakpoints for adaptive layouts
+*   Maintain proper margin and padding relationships
+
+Interactive States
+------------------
+
+*   Provide clear hover, focus, active, and disabled states
+*   Use consistent transition timing and easing
+*   Implement proper focus indicators for keyboard navigation
+*   Show loading states for asynchronous operations

package/generated/docs/components_foundations-z-index-stacking-docs.md

@@ -0,0 +1,288 @@
+Z-index (stacking)
+==================
+
+The z-index determines the stacking order of elements. Elements with a higher z-index always sit in front of elements with a lower z-index. Each index has been mapped to the appropriate elevation(s).
+
+Reference
+---------
+
+[](./iframe.html?id=foundations-z-index-stacking--reference)
+
+| Name | Usage | Value |
+| --- | --- | --- |
+| DEFAULT | The default z-index used for most elements. Can be combined with raised and floating elevations. | 0 |
+| MODAL | Used for IressModal. Can be combined with floating elevation. | 400 |
+| NAVBAR | Used for navbars. Can be combined with overflow elevation. | 100 |
+| POPOVER | Used for IressPopover. Can be combined with floating elevation. | 200 |
+| SLIDEOUT | Used for IressSlideout. Can be combined with floating elevation. | 300 |
+| TOAST | Used for IressToast. Can be combined with floating elevation. | 500 |
+| TOOLTIP | Used for IressTooltip. Can be combined with floating elevation. | 600 |
+
+```
+
+<IressTable
+  columns\={\[
+    {
+      key: 'name',
+      label: 'Name',
+      sort: 'asc',
+      width: '1%'
+    },
+    {
+      key: 'usage',
+      label: 'Usage'
+    },
+    {
+      key: 'value',
+      label: 'Value',
+      width: '200px'
+    }
+  \]}
+  rows\={\[
+    {
+      name: 'DEFAULT',
+      usage: 'The default z-index used for most elements. Can be combined with raised and floating elevations.',
+      value: 0
+    },
+    {
+      name: 'NAVBAR',
+      usage: 'Used for navbars. Can be combined with overflow elevation.',
+      value: 100
+    },
+    {
+      name: 'POPOVER',
+      usage: 'Used for IressPopover. Can be combined with floating elevation.',
+      value: 200
+    },
+    {
+      name: 'SLIDEOUT',
+      usage: 'Used for IressSlideout. Can be combined with floating elevation.',
+      value: 300
+    },
+    {
+      name: 'MODAL',
+      usage: 'Used for IressModal. Can be combined with floating elevation.',
+      value: 400
+    },
+    {
+      name: 'TOAST',
+      usage: 'Used for IressToast. Can be combined with floating elevation.',
+      value: 500
+    },
+    {
+      name: 'TOOLTIP',
+      usage: 'Used for IressTooltip. Can be combined with floating elevation.',
+      value: 600
+    }
+  \]}
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alternate | 
+If set to true, the table will have alternating row colors. This is useful for improving readability in tables with many rows.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| caption\* | 
+
+Caption that describes the data in the table, required for accessibility.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| children | 
+
+Multiple table elements can be passed as children. Used to create a static table, or add a `<tfoot />` element to a `rows` based table.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| columns | 
+
+A mapping of columns to be displayed in the table. If not provided, it will be automatically regenerated from the row data.
+
+TableColumn<TRow, TVal>\[\]
+
+ | \- | 
+
+RAW
+
+*   columns :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 4 keys
+        
+    *   1 :
+        
+        {...} 2 keys
+        
+    *   2 :
+        
+        {...} 3 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| compact | 
+
+Compact view of the table, used for tables with a lot of data.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| empty | 
+
+Content to be show when there is no rowData (columns must also be provided).
+
+ReactNode
+
+
+
+ | \- | Set object |
+| hiddenCaption | 
+
+When set to true, the table caption will be visually hidden.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hiddenHeader | 
+
+When set to true, the table header (`<thead></thead>`) will be not be rendered. Only use with very simple tables.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hover | 
+
+When set to true, hovering over a row will trigger a UI change.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeRowBorders | 
+
+If set to true, the table will not have borders between rows. This is useful for simpler tables where the row borders are not needed.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| rowProps | 
+
+Add additional props to the row element. Can be a props map or a function that returns an props map. The function is called with the row data.
+
+TableRowsProps\['rowProps'\]
+
+ | \- | Set object |
+| rows | 
+
+Each object in the array contains the data for a row.
+
+TRow\[\]
+
+ | \[\] | 
+
+RAW
+
+*   rows :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 3 keys
+        
+    *   1 :
+        
+        {...} 3 keys
+        
+    *   2 :
+        
+        {...} 3 keys
+        
+    *   3 :
+        
+        {...} 3 keys
+        
+    *   4 :
+        
+        {...} 3 keys
+        
+    *   5 :
+        
+        {...} 3 keys
+        
+    *   6 :
+        
+        {...} 3 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| scope | 
+
+Defaults to 'row' - the first cell in the row is a `<th>`, otherwise it's a `<td>`.
+
+union
+
+
+
+ | \- | 
+
+rowcol
+
+ |
+
+* * *
+
+For developers
+--------------
+
+If you are using the IDS components, the z-indexes have already been mapped out to their respective components based on the usage above. They are hardcoded into the components, so you don't need to worry about them.
+
+The mapping is exported as `Z_INDEX` from the `@iress-oss/ids-components` package, in case you need to reference it in your own code.

package/generated/docs/components_frequently-asked-questions-docs.md

@@ -0,0 +1,44 @@
+Frequently asked questions
+==========================
+
+Some of the most frequently asked questions related to IDS are answered here.
+
+* * *
+
+How long will version 4 be supported?
+-------------------------------------
+
+We will continue to support version 4.x until the end of 2024. This means there will be security patches and critical bug fixes, but no new enhancements will be added to version 4.
+
+Does this mean we need to upgrade now?
+--------------------------------------
+
+No, you do not need to upgrade now. However, we recommend that you start planning your migration to version 5 and use it for new projects. Support for version 4 will continue until the end of 2024.
+
+What support will there be to help us upgrade?
+----------------------------------------------
+
+If you are moving from version 4 to version 5, a [migration guide](?path=/docs/resources-migration-guides-from-v4-to-v5--docs) is available. This guide will help you understand the changes between the two versions, how to migrate your code, and how to use them side by side while you are migrating.
+
+If you plan to migrate soon, we would like to partner with you. Please reach out to the design system team via Iress channels.
+
+What will happen if we do not upgrade by the end of 2024?
+---------------------------------------------------------
+
+After the end of 2024, we will no longer provide support for version 4. This means that we will not provide any security patches or critical bug fixes, which may leave the rest of your application vulnerable to security threats. There are several ways to handle this:
+
+*   Upgrade to version 5 before the end of 2024.
+*   Create a PR to fix the issue in version 4 and submit it to IDS for review.
+*   Update nested dependencies to the secure version using `yarn audit` and `resolutions` in your `package.json`.
+
+Will the documentation for version 4 still be available?
+--------------------------------------------------------
+
+Yes, we will host the documentation for version 4 indefinitely. The documentation will be available on the [Versions page](?path=/docs/versions--docs).
+
+Can I contribute to version 4?
+------------------------------
+
+Yes! We will continue to accept pull requests for version 4, but only until the end of 2024. To do so, please use `4.x` as the base branch for your pull request.
+
+After this time, we will only accept pull requests regarding critical security patches or critical bug fixes.

package/generated/docs/components_get-started-develop-docs.md

@@ -0,0 +1,47 @@
+Develop
+=======
+
+Set up your environment to use the latest version of the Iress Design System (IDS). You can use this library to build React applications that align to IDS, and ensure a consistent and modern look and feel across all Iress products.
+
+Requirements
+------------
+
+*   [React 17 or later](https://reactjs.org/)
+
+Set up
+------
+
+1.  Install using the command line:
+    
+    yarn add @iress-oss/ids-components
+    
+    ```
+    
+2.  Import the styles:
+    
+    import '@iress-oss/ids-components/dist/style.css';
+    
+    ```
+    
+3.  Import the components. The provider is optional, but recommended for most applications. It sets up the design system and provides a consistent container for components like modals, slideouts, and toasts.
+    
+    import { IressProvider, IressButton } from '@iress-oss/ids-components';
+    
+    ```
+    
+4.  Use the components:
+    
+    const App \= () \=> {
+      const { success } \= useToaster();
+      return (
+        <IressButton onClick\={() \=> success({ children: 'Toast triggered' })}\>
+          Trigger toast    </IressButton\>
+      );
+    };
+    ReactDOM.createRoot(document.getElementById('root')!).render(
+      <IressProvider\>
+        <App />
+      </IressProvider\>,
+    );
+    
+    ```

package/generated/docs/components_get-started-using-storybook-docs.md

@@ -0,0 +1,55 @@
+Using Storybook
+===============
+
+The Frontend Enablement team uses Storybook to develop and document our components. Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. It is most likely what you are looking at right now.
+
+Here we have just highlighted a few of our top tips on how you can use Storybook more efficiently. We have separated it by different stages of the product delivery cycle, but you can use these tips at any stage.
+
+* * *
+
+First-time users
+----------------
+
+When you first come to the IDS Storybook, you may notice the pages look un-styled. This is the default theme of IDS. You can change the theme to the theme you normally use in your product by clicking the \`brush\` icon in the top left, right above this page.
+
+You can also change to use the dark theme of Storybook itself by clicking the \`moon\` icon in the top left, right above this page.
+
+These settings are saved so the next time you come back to Storybook, it will remember your preferences.
+
+Scoping work
+------------
+
+If you are scoping work, you can use Storybook to see what components are available to you. You can also see how they are used and what states they can be in. This can help you to understand what is possible and what is not.
+
+Every IDS component has a `Docs` page and a`Guidelines` (coming soon) page. The `Docs` page will show you how to use the component and what props it accepts, helping you understand what is available, and how each property behaves to allow you to understand the final user experience of your feature.
+
+The `Guidelines` page will show you how to use the component in a way that is consistent with other Iress applications. It covers things like accessibility, usability, and design principles, as well as which scenario to use which component and common pitfalls.
+
+Design
+------
+
+When designing a new feature, you can use Storybook to see how your designs will look and behave in a real application.
+
+`Docs` and `Guidelines` (coming soon) pages will help you understand how to use the components and what is possible, and help you align to any design decisions made previously.
+
+`Stories` are a good way to see how variations of a component look and behave. You can see how a component looks in different states, and how it behaves with different props. If there is a variation that is not shown in the `Stories`, you can use the `Controls` tab to change the props of the component to see how it behaves with different values. You can also toggle how each component looks at different breakpoints (screen sizes/devices), how they look to users with certain eyesight conditions, and how they look in different states.
+
+Development
+-----------
+
+During development, you can refer to Storybook for code examples and understand the API available to you.
+
+If you are using Typescript, majority of the API is available in your IDE. However, Storybook provides more than just the API. It provides examples of how to use and combine the properties, as well as which components were designed to work with each other.
+
+`Docs` covers the API of the component, and also discusses `Examples (stories)`in detail alongside code examples.
+
+If you want to see how a component looks and behaves with different props, you can use the `Controls` tab to change the props of the component to see how it behaves with different values. You can also toggle how each component looks at different breakpoints (screen sizes/devices), how they look to users with certain eyesight conditions, and how they look in different states.
+
+IDS is a starting point for your application development. It provides the foundations to make your application look and behave in a consistent way to other Iress products. However, not everything is covered here. It is good to discuss with designers and other developers to understand any constraints or guidelines that are not covered by IDS.
+
+Common issues
+-------------
+
+### I can't find the `Controls`, `Actions` or `Accessibility` tab
+
+These tabs are only shown in the component `Stories`, which can be toggled to display using the bookmark icon on the top right of the screen. If you click on an stories and still cannot see it, you may need to toggle the orientation of the addon. You can do this by tapping the `d` key twice, or using the settings as shown in the video.

package/generated/docs/components_introduction-docs.md

@@ -0,0 +1,85 @@
+Iress Design System
+===================
+
+6.0.0-alpha.1
+
+The Iress Design System (IDS) serves as a shared visual language, working code, design tools and resources, human interface guidelines, and a community. It supports designers and developers building digital products for both B2B (Financial Advisors, Paraplanners) and B2B2C (client customers) segments.
+
+[Start developing](/?path=/docs/get-started-develop--docs)[Read foundations](/?path=/docs/foundations-introduction--docs)
+
+* * *
+
+Quick links
+-----------
+
+[
+
+Version 6
+---------
+
+Start developing with the latest version of the Iress Design System. Version 6 has had a complete styling overhaul to keep IDS modern.
+
+](https://docs.google.com/document/d/17K81rHBZjjF_tsrC8QFrSsmjrC0IJu_bpU4sB2N7PSQ/edit?usp=sharing)
+
+[
+
+Foundations
+-----------
+
+Core design principles, colors, typography, spacing, and visual guidelines that form the foundation of our design system.
+
+](/?path=/docs/foundations-introduction--docs)
+
+[
+
+Components
+----------
+
+Pre-built UI components like buttons, forms, tables, and navigation elements ready to use in your applications.
+
+](/?path=/docs/components-introduction--docs)
+
+[
+
+Design Tokens
+-------------
+
+Shared design values for colors, spacing, typography, and other visual properties that ensure consistency across products.
+
+](/?path=/docs/foundations-tokens-introduction--docs)
+
+[
+
+Patterns
+--------
+
+Common UI patterns and layouts for forms and complex interations.
+
+](/?path=/docs/patterns-introduction--docs)
+
+[
+
+Styling props
+-------------
+
+Safely customise any component in the design system using styling props to create engaging UIs.
+
+](/?path=/docs/styling-props-reference--docs)
+
+[
+
+Themes
+------
+
+IDS is white-labelled, allowing you to create custom themes tailored to your client's identity.
+
+](/?path=/docs/themes-introduction--docs)
+
+[
+
+Resources
+---------
+
+MCP server and other tools to help you make the most of the Iress Design System.
+
+](/?path=/docs/resources-introduction--docs)