@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_styling-props-radius-docs.md

@@ -0,0 +1,63 @@
+Radius
+======
+
+These are all styling props related to changing the radius of a component affects the visual softness and perceived friendliness of the interface, influencing the overall user experience.
+
+`borderRadius`
+--------------
+
+The `borderRadius` prop allows you to change the border radius of any component. It should be used sparingly, and often used when creating custom components that are not part of the design system, however you still want to retain the look and feel of the rest of the system.
+
+[](./iframe.html?id=styling-props-radius--border-radius)
+
+```
+
+<IressInput
+  borderRadius\="radius.system.layout"
+  p\="spacing.400"
+  placeholder\="Search everything"
+  textStyle\="typography.body.lg"
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| borderRadius | 
+string
+
+
+
+ | \- | radius.system.layout |
+
+### Removing border radius
+
+In some cases you may need to remove the border-radius to achieve design requirements. This can be done using `radius.000` or `none`.
+
+[](./iframe.html?id=styling-props-radius--no-border-radius)
+
+No radius here
+
+```
+
+<IressPanel
+  bg\="alt"
+  borderRadius\="none"
+\>
+  No radius here
+</IressPanel\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| borderRadius | 
+string
+
+
+
+ | \- | none |

package/generated/docs/components_styling-props-reference-docs.md

@@ -0,0 +1,160 @@
+Styling props
+=============
+
+This page lists all the custom styling properties available in our components, which design tokens they are mapped to and which CSS properties they affect.
+
+Styling properties are the recommended way of customising components for your needs, as they ensure your styles are compatible when any theme is applied to your application. If you need further customisation, you can use regular CSS and reference the tokens directly.
+
+These replace the utility classes and internal component tokens provided by previous versions of the design system.
+
+Reference
+---------
+
+[](./iframe.html?id=styling-props-reference--reference)
+
+Styling props reference
+| JSX prop | CSS property | Token mapping | Responsive |
+| --- | --- | --- | --- |
+| [bg](/?path=/docs/styling-props-colour--docs#bg) | background | [Colour](/?path=/docs/foundations-tokens-colour--docs) | Yes |
+| [borderRadius](/?path=/docs/styling-props-radius--docs#borderradius) | border-radius | [Radius](/?path=/docs/foundations-tokens-radius--docs) | Yes |
+| [color](/?path=/docs/styling-props-colour--docs#color) | color | [Colour](/?path=/docs/foundations-tokens-colour--docs) | Yes |
+| [focusable](/?path=/docs/styling-props-elevation--docs#focusable) | border and box-shadow | [Elevation](/?path=/docs/foundations-tokens-elevation--docs) | No |
+| [layerStyle](/?path=/docs/styling-props-elevation--docs#layerstyle) | border and box-shadow | [Elevation](/?path=/docs/foundations-tokens-elevation--docs) | Yes |
+| [maxWidth](/?path=/docs/styling-props-sizing--docs#container-widths) | max-width | N/A | Yes |
+| [m](/?path=/docs/styling-props-spacing--docs#margin) | margin | [Spacing](/?path=/docs/foundations-tokens-spacing--docs) | Yes |
+| [mx](/?path=/docs/styling-props-spacing--docs#margin) | margin-inline | [Spacing](/?path=/docs/foundations-tokens-spacing--docs) | Yes |
+| [my](/?path=/docs/styling-props-spacing--docs#margin) | margin-block | [Spacing](/?path=/docs/foundations-tokens-spacing--docs) | Yes |
+| [mb](/?path=/docs/styling-props-spacing--docs#margin) | margin-bottom | [Spacing](/?path=/docs/foundations-tokens-spacing--docs) | Yes |
+| [ml](/?path=/docs/styling-props-spacing--docs#margin) | margin-left | [Spacing](/?path=/docs/foundations-tokens-spacing--docs) | Yes |
+| [mr](/?path=/docs/styling-props-spacing--docs#margin) | margin-right | [Spacing](/?path=/docs/foundations-tokens-spacing--docs) | Yes |
+| [mt](/?path=/docs/styling-props-spacing--docs#margin) | margin-top | [Spacing](/?path=/docs/foundations-tokens-spacing--docs) | Yes |
+| [noGutter](/?path=/docs/styling-props-spacing--docs#nogutter) | margin-block-end | N/A | No |
+| [p](/?path=/docs/styling-props-spacing--docs#padding) | padding | [Spacing](/?path=/docs/foundations-tokens-spacing--docs) | Yes |
+| [px](/?path=/docs/styling-props-spacing--docs#padding) | padding-inline | [Spacing](/?path=/docs/foundations-tokens-spacing--docs) | Yes |
+| [py](/?path=/docs/styling-props-spacing--docs#padding) | padding-block | [Spacing](/?path=/docs/foundations-tokens-spacing--docs) | Yes |
+| [pb](/?path=/docs/styling-props-spacing--docs#padding) | padding-bottom | [Spacing](/?path=/docs/foundations-tokens-spacing--docs) | Yes |
+| [pl](/?path=/docs/styling-props-spacing--docs#padding) | padding-left | [Spacing](/?path=/docs/foundations-tokens-spacing--docs) | Yes |
+| [pr](/?path=/docs/styling-props-spacing--docs#padding) | padding-right | [Spacing](/?path=/docs/foundations-tokens-spacing--docs) | Yes |
+| [pt](/?path=/docs/styling-props-spacing--docs#padding) | padding-top | [Spacing](/?path=/docs/foundations-tokens-spacing--docs) | Yes |
+| [srOnly](/?path=/docs/styling-props-screen-readers--docs#sronly) | Multiple properties | N/A | Yes |
+| [stretch](/?path=/docs/styling-props-spacing--docs#stretch) | align-self: stretch and height: 100% | N/A | No |
+| [textAlign](/?path=/docs/styling-props-typography--docs#textalign) | text-align | N/A | Yes |
+| [textStyle](/?path=/docs/styling-props-typography--docs#textStyle) | font | [Typography](/?path=/docs/foundations-tokens-typography--docs) | Yes |
+| [width](/?path=/docs/styling-props-sizing--docs#inputwidths) | width | N/A | Yes |
+
+```
+
+<StylingPropsReferenceTable gap\="md" />
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| gap | 
+string
+
+
+
+ | \- | md |
+
+Responsive
+----------
+
+Props marked responsive can accept either a single value that affects all breakpoints, or a responsive object map that sets a different value based on breakpoint.
+
+<IressPanel p\="xs" /> // applies extra small padding to all breakpoints
+<IressPanel p\={{ base: 'lg', md: 'sm' }} /> // applies large padding by default, and changes to small padding once on medium sized screens.
+
+```
+
+`iressCss`
+----------
+
+In some cases you may need to apply styling props to a non-IDS component. You can do this by using the `iressCss` prop, which accepts an object of styling props and returns a string of class names that can be applied to any element.
+
+This will also work without JSX, allowing you to apply styling props to any element in your application.
+
+<div className\={iressCss({ p: 'xs', bg: 'colour.primary.surface' })}\>
+  This div has extra small padding and a primary background colour.
+</div\>
+
+```
+
+`iressStyled`
+-------------
+
+If you need your own component or a third-party component to accept styling props, you can use the `iressStyled` function to create a styled component that accepts styling props. This is similar to how you would use `styled-components` or `emotion`.
+
+const MyComponent \= iressStyled('div', {
+  p: 'xs',
+  bg: 'colour.primary.surface',
+});
+<MyComponent\>
+  This div has extra small padding and a primary background colour.
+</MyComponent\>;
+
+```
+
+Migrating from version 5
+------------------------
+
+### Utility classes
+
+If you have been using the utility classes from previous versions of IDS (eg. `iress-p--xs`), you will need to replace them with the new styling props. The utility classes are no longer supported in version 6.
+
+[](./iframe.html?id=styling-props-reference--migrating-from-utilities)
+
+<table class="css-1n5o7vh-diff-container"><tbody><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">&lt;IressPanel className="iress-m--sm" /&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">&lt;IressPanel m="sm" /&gt;</pre></td></tr></tbody></table>
+
+```
+
+{
+  render: () \=> <DiffViewer oldValue\={\`<IressPanel className="iress-m--sm" />\`} newValue\={\`<IressPanel m="sm" />\`} />
+}
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| gap | 
+string
+
+
+
+ | \- | \- |
+
+### Internal component tokens
+
+If you have been using the internal component tokens (eg. `--iress-background-color`), you will need to replace them with the new styling props. The internal component tokens are no longer supported in version 6.
+
+#### Note
+
+*   Not every single internal component token has a direct mapping to a styling prop. For example, things like border width are no longer customisable. This helps ensure a consistent and accessible experience for all applications no matter the theme that is applied to them.
+*   Styling props only allow token values, not custom values (eg. `colour.system.status.danger` is allowed but not `red`). This is to ensure that the styling props are theme agnostic and can be used with any theme. If you need to use a custom value, you can use custom CSS or inline styles.
+
+[](./iframe.html?id=styling-props-reference--migrating-from-internal-tokens)
+
+<table class="css-1n5o7vh-diff-container"><tbody><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">&lt;IressPanel style={{ '--iress-background-color': 'var(--iress-g-success-color)' }} /&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">&lt;IressPanel bg="colour.system.success.fill" /&gt;</pre></td></tr></tbody></table>
+
+```
+
+{
+  render: () \=> <DiffViewer oldValue\={\`<IressPanel style={{ '--iress-background-color': 'var(--iress-g-success-color)' }} />\`} newValue\={\`<IressPanel bg="colour.system.success.fill" />\`} />
+}
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| gap | 
+string
+
+
+
+ | \- | \- |

package/generated/docs/components_styling-props-screen-readers-docs.md

@@ -0,0 +1,66 @@
+Screen readers
+==============
+
+These are all styling props related to adjusting components for screen readers.
+
+`srOnly`
+--------
+
+The `srOnly` prop allows you to set a component to be only visible on screen readers. It is used to ensure the screen reader has context of the screen to help the user understand the tasks required of them.
+
+[](./iframe.html?id=styling-props-screen-readers--sr-only)
+
+Hello screen readers
+
+Show code
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| srOnly | 
+boolean
+
+
+
+ | \- | FalseTrue |
+
+### Responsive
+
+The `srOnly` prop is responsive, allowing you to show content on larger screens and hiding them on smaller ones, enabling screen readers to have the same context as larger screens as they are not limited by device size.
+
+[](./iframe.html?id=styling-props-screen-readers--sr-only-responsive)
+
+This content is visible on large screens and screen readers
+
+Show code
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| srOnly | 
+object
+
+
+
+ | \- | 
+
+RAW
+
+srOnly :
+
+{
+
+*   base : true
+*   lg : false
+
+}
+
+
+
+
+
+
+
+ |

package/generated/docs/components_styling-props-sizing-docs.md

@@ -0,0 +1,217 @@
+Sizing
+======
+
+These are all styling props related to changing the size of a component, refining the users expectation of the content and making screens easier to scan.
+
+Overview
+--------
+
+The sizing props are a collection of widths that are used throughout the design system. Although they are not part of the design tokens (which is more related to theming), we have exposed them to you to allow you to build consistent user experiences where you may need to deviate from the default props of a component.
+
+The sizes here can be used in the `maxWidth` or `width` prop of any component, but they have been documented here according to their designated component.
+
+Input widths
+------------
+
+Input widths are sizes that suit a specific number of characters. This sets an expectation of what data a user has to enter. The following list is the widths we have created for inputs, and have been designed to be used with `IressInput` but can be used with any component.
+
+*   `input.2`: Two character width, usually used for accessor codes
+*   `input.4`: Four character width, usually used for CVC, one-time passwords and pin numbers
+*   `input.6`: Six character width, usually used for one-time passwords and pin numbers
+*   `input.8`: Eight character width
+*   `input.10`: Ten character width, usually used for dates
+*   `input.12`: Twelve character width
+*   `input.16`: Sixteen character width, usually used for credit cards
+
+For variable data entry, you can use percentage widths. These are usually used inside `IressFieldGroup`, and denote a connection between fields with different widths (eg. First name and Last name under Name). In most cases where there is no relationship but you would like to compact the layout to make it easier to scan, and you should use `IressRow` and `IressCol` instead with the `span` prop.
+
+*   `input.25perc`: 25% width of parent container
+*   `input.50perc`: 50% width of parent container
+*   `input.75perc`: 75% width of parent container
+*   `input.100perc`: 100% width of parent container
+
+[](./iframe.html?id=styling-props-sizing--input-widths)
+
+Credit card number wide panel
+
+```
+
+<IressPanel
+  bg\="alt"
+  width\="input.16"
+\>
+  Credit card number wide panel
+</IressPanel\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| width | 
+string
+
+
+
+ | \- | input.16 |
+
+Container widths
+----------------
+
+Container widths are sizes that define the maximum width where content is considered easy to read on specific screen ranges. They are used by `IressContainer` to help ensure content is readable no matter the screen size.
+
+In some cases however, you may want to restrain the width even further (for example, single column content is usually easiest to read when it is confined to the centre of the screen). The container widths have been exposed so they can be used in the `maxWidth` prop of your own components.
+
+*   `container.xs`: 100% of the screen's width
+*   `container.sm`: 520px
+*   `container.md`: 740px
+*   `container.lg`: 960px
+*   `container.xl`: 1160px
+*   `container.xxl`: 1160px
+
+[](./iframe.html?id=styling-props-sizing--container-widths)
+
+This container is extra readable cause its maxWidth is set to: `container.md`.
+
+```
+
+<IressContainer
+  bg\="alt"
+  fluid
+  maxWidth\="container.md"
+  p\="xl"
+\>
+  This container is extra readable cause its maxWidth is set to:{' '}
+  <code\>
+    container.md  </code\>
+  .
+</IressContainer\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| maxWidth | 
+string
+
+
+
+ | \- | container.md |
+
+Stretch
+-------
+
+The `stretch` prop used to stretch a component to fill the available space. It is used in components such as `IressPanel` to ensure each column in a layout takes up the same amount of space.
+
+[](./iframe.html?id=styling-props-sizing--stretch)
+
+Panel is set to stretch, so it will fill the available space.
+
+History of Iress
+================
+
+**Iress Limited** (originally “Iress Market Technology”) is an Australian-based software company that provides technology solutions to the financial services industry. Its clients span sectors including wealth management, financial advice, trading, investment management, mortgages, and superannuation.
+
+Early Years (1993 – 2000)
+-------------------------
+
+Iress was founded in **1993** in Melbourne, Australia. The company's initial product offerings focused on market data and trading software for financial institutions and professionals needing live pricing and analytics tools.
+
+In **2000**, Iress listed on the **Australian Stock Exchange (ASX)** under the ticker **IRE**, signaling its growth beyond market data services.
+
+```
+
+<IressContainer
+  bg\="alt"
+  borderRadius\="none"
+  fluid
+  px\="xl"
+  py\="xl"
+\>
+  <IressRow
+    gutter\="xl"
+    verticalAlign\="stretch"
+  \>
+    <IressCol\>
+      <IressPanel stretch\>
+        <React.Fragment key\=".0"\>
+          Panel is set to stretch, so it will fill the available space.        </React.Fragment\>
+      </IressPanel\>
+    </IressCol\>
+    <IressCol\>
+      <IressPanel\>
+        <h1\>
+          History of Iress        </h1\>
+        <p\>
+          <strong\>
+            Iress Limited          </strong\>
+          {' '}(originally “Iress Market Technology”) is an Australian-based software company that provides technology solutions to the financial services industry. Its clients span sectors including wealth management, financial advice, trading, investment management, mortgages, and superannuation.
+        </p\>
+        <section\>
+          <h2\>
+            Early Years (1993 – 2000)          </h2\>
+          <p\>
+            Iress was founded in{' '}
+            <strong\>
+              1993            </strong\>
+            {' '}in Melbourne, Australia. The company's initial product offerings focused on market data and trading software for financial institutions and professionals needing live pricing and analytics tools.
+          </p\>
+          <p\>
+            In{' '}
+            <strong\>
+              2000            </strong\>
+            , Iress listed on the{' '}
+            <strong\>
+              Australian Stock Exchange (ASX)            </strong\>
+            {' '}under the ticker{' '}
+            <strong\>
+              IRE            </strong\>
+            , signaling its growth beyond market data services.          </p\>
+        </section\>
+      </IressPanel\>
+    </IressCol\>
+  </IressRow\>
+</IressContainer\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be grouped using a panel.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| noBorderRadius | 
+
+Setting to true will ignore the border radius set in the theme and set it to zero.
+
+boolean
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `borderRadius="none"` instead.</td></tr></tbody></table>
+
+ | \- | Set boolean |
+| stretch | 
+
+boolean
+
+
+
+ | \- | FalseTrue |
+
+Overlay widths
+--------------
+
+Overlay widths are sizes that define the width of overlay components such as Modals and Slideouts.
+
+*   `overlay.sm`: 375px
+*   `overlay.md`: 640px
+*   `overlay.lg`: 900px