@iress-oss/ids-mcp-server 5.15.0 → 5.20.2

package/generated/docs/{foundations-principles-docs.md → components_foundations-principles-docs.md}

@@ -1,16 +1,16 @@
-[](#core-design-principles)Core Design Principles
-=================================================
+Core Design Principles
+======================
 
-[](#consistency)Consistency
----------------------------
+Consistency
+-----------
 
 *   Maintain brand consistency across all applications and experiences
 *   Use standardised component naming conventions (all components start with `Iress` prefix)
 *   Leverage shared design tokens for spacing, colours, typography, and interactive states
 *   Ensure consistent behaviour patterns across similar components
 
-[](#accessibility-first)Accessibility First
--------------------------------------------
+Accessibility First
+-------------------
 
 *   Meet or exceed WCAG 2.1 Level AA Accessibility Guidelines
 *   Provide proper colour contrast ratios (minimum 4.5:1 for AA, 7:1 for AAA)
@@ -19,16 +19,16 @@
 *   Support focus management and skip navigation patterns
 *   Document accessibility considerations and requirements
 
-[](#clarity-and-usability)Clarity and Usability
------------------------------------------------
+Clarity and Usability
+---------------------
 
 *   Prioritise clear visual hierarchy through typography scales and spacing systems
 *   Use progressive disclosure to manage complexity
 *   Provide immediate feedback for user actions (loading states, validation, etc.)
 *   Design for touch-friendly interfaces with adequate target sizes
 
-[](#developer-experience)Developer Experience
----------------------------------------------
+Developer Experience
+--------------------
 
 *   Maintain clean component APIs with predictable prop patterns
 *   Provide comprehensive documentation with usage examples
@@ -37,34 +37,24 @@
 *   Enable efficient testing strategies with semantic roles and accessible queries
 *   Maintain up-to-date prop documentation and type definitions
 
-[](#quality-assurance)Quality assurance
----------------------------------------
+Quality assurance
+-----------------
 
 *   Test components across supported browsers and devices
 *   Validate accessibility compliance with automated and manual testing
 *   Ensure proper keyboard navigation functionality
 *   Test with assistive technologies (screen readers, voice control)
 
-### [](#code-standards)Code Standards
+### Code Standards
 
 *   Follow consistent naming conventions for CSS classes and component props
 *   Use semantic HTML elements where appropriate
 *   Implement proper TypeScript typing for better developer experience
 *   Maintain clean separation between presentation and logic
 
-### [](#performance-considerations)Performance Considerations
+### Performance Considerations
 
 *   Optimise component rendering and re-rendering
 *   Implement appropriate code splitting strategies
 *   Use efficient animation and transition patterns
 *   Consider bundle size impact of component dependencies
-
-On this page
-
-*   [Consistency](#consistency)
-*   [Accessibility First](#accessibility-first)
-*   [Clarity and Usability](#clarity-and-usability)
-*   [Developer Experience](#developer-experience)
-*   [Quality assurance](#quality-assurance)
-    *   [Code Standards](#code-standards)
-    *   [Performance Considerations](#performance-considerations)

package/generated/docs/components_foundations-typography-docs.md

@@ -0,0 +1,608 @@
+Typography
+==========
+
+Typography is set up as part of the theming. Typography is controlled by the `IressText` component and the `iress-u-text` utility class. They implement consistent line heights and font weights.
+
+Typography styles are designed to be encapsulated. If you want text to pick up the Iress styling, you'll need to wrap it in an `IressText` component.
+
+Body
+----
+
+This is the default text variant, and is designed to be clear and easy to read.
+
+[](./iframe.html?id=foundations-typography--body)
+
+Nobis odit nesciunt in, harum provident deleniti molestiae dolorum aliquid tempora optio accusamus dolore porro voluptatibus. Dolorum, repellat expedita.
+
+*   Voluptatem assumenda soluta!
+*   Illum et atque alias possimus maiores rem in corrupti consectetur!
+*   Dolorum, repellat expedita!
+
+Hide codedrawOpen in CodeSandbox
+
+<IressText\>
+  <p\>
+    Nobis odit nesciunt in, harum provident deleniti molestiae dolorum aliquid tempora optio accusamus dolore porro voluptatibus. Dolorum, repellat expedita.  </p\>
+  <ul\>
+    <li\>
+      Voluptatem assumenda soluta!    </li\>
+    <li\>
+      Illum et atque alias possimus maiores rem in corrupti consectetur!    </li\>
+    <li\>
+      Dolorum, repellat expedita!    </li\>
+  </ul\>
+</IressText\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| align | 
+Text alignment.
+
+union
+
+
+
+ | \- | Set object |
+| children | 
+
+The content to be rendered; can be a string or a ReactNode (e.g. IressIcon).
+
+union
+
+
+
+ | \- | 
+
+Edit JSON
+
+*   children :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 6 keys
+        
+    *   1 :
+        
+        {...} 6 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| element | 
+
+The HTML element that should be rendered.
+
+union
+
+
+
+ | 
+
+'div'
+
+ | Set object |
+| mode | 
+
+Allows control of the text color.
+
+**Note**: The body mode has been deprecated and will be removed in a future version. Please use the body variant instead.
+
+union
+
+
+
+ | \- | Set object |
+| noGutter | 
+
+Removes bottom margin from last child of the text element if true.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| variant | 
+
+The typographic style to be rendered.
+
+union
+
+
+
+ | \- | Set object |
+
+Headings
+--------
+
+Headings form the structure of a web page. They're designed to stand out visually, drawing a user's eye to distinct sections of the document. They can be set in a variety of sizes based on systematic font sizing with native heading scales (H1-H6).
+
+[](./iframe.html?id=foundations-typography--headings)
+
+Hello, we are a company that puts clients first.
+================================================
+
+Hello, we are a company that puts clients first.
+------------------------------------------------
+
+### Hello, we are a company that puts clients first.
+
+#### Hello, we are a company that puts clients first.
+
+##### Hello, we are a company that puts clients first.
+
+An H2 styled as an H3.
+----------------------
+
+Hide codedrawOpen in CodeSandbox
+
+<IressStack gutter\="md"\>
+  <IressText element\="h1"\>
+    Hello, we are a company that puts clients first.  </IressText\>
+  <IressText element\="h2"\>
+    Hello, we are a company that puts clients first.  </IressText\>
+  <IressText element\="h3"\>
+    Hello, we are a company that puts clients first.  </IressText\>
+  <IressText element\="h4"\>
+    Hello, we are a company that puts clients first.  </IressText\>
+  <IressText element\="h5"\>
+    Hello, we are a company that puts clients first.  </IressText\>
+  <IressText
+    element\="h2"
+    variant\="h3"
+  \>
+    An H2 styled as an H3.  </IressText\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| align | 
+Text alignment.
+
+union
+
+
+
+ | \- | Set object |
+| children | 
+
+The content to be rendered; can be a string or a ReactNode (e.g. IressIcon).
+
+union
+
+
+
+ | \- | \- |
+| element | 
+
+The HTML element that should be rendered.
+
+union
+
+
+
+ | 
+
+'div'
+
+ | Set object |
+| mode | 
+
+Allows control of the text color.
+
+**Note**: The body mode has been deprecated and will be removed in a future version. Please use the body variant instead.
+
+union
+
+
+
+ | \- | Set object |
+| noGutter | 
+
+Removes bottom margin from last child of the text element if true.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| variant | 
+
+The typographic style to be rendered.
+
+union
+
+
+
+ | \- | Set object |
+
+Display
+-------
+
+Display text is used to draw attention to specific pieces of content, like introductory text on a landing page. It has larger font sizes than the heading variants, and a lighter font weight.
+
+[](./iframe.html?id=foundations-typography--display)
+
+Hello, we are a company that puts clients first.
+
+Hello, we are a company that puts clients first.
+
+Hello, we are a company that puts clients first.
+
+Hello, we are a company that puts clients first.
+
+Hide codedrawOpen in CodeSandbox
+
+<IressStack gutter\="md"\>
+  <IressText variant\="display1"\>
+    Hello, we are a company that puts clients first.  </IressText\>
+  <IressText variant\="display2"\>
+    Hello, we are a company that puts clients first.  </IressText\>
+  <IressText variant\="display3"\>
+    Hello, we are a company that puts clients first.  </IressText\>
+  <IressText variant\="display4"\>
+    Hello, we are a company that puts clients first.  </IressText\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| align | 
+Text alignment.
+
+union
+
+
+
+ | \- | Set object |
+| children | 
+
+The content to be rendered; can be a string or a ReactNode (e.g. IressIcon).
+
+union
+
+
+
+ | \- | \- |
+| element | 
+
+The HTML element that should be rendered.
+
+union
+
+
+
+ | 
+
+'div'
+
+ | Set object |
+| mode | 
+
+Allows control of the text color.
+
+**Note**: The body mode has been deprecated and will be removed in a future version. Please use the body variant instead.
+
+union
+
+
+
+ | \- | Set object |
+| noGutter | 
+
+Removes bottom margin from last child of the text element if true.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| variant | 
+
+The typographic style to be rendered.
+
+union
+
+
+
+ | \- | Set object |
+
+Lead
+----
+
+Lead text is used to introduce users to a new section, and often gives a brief summary of a section. It has a larger font size than body text, but a lighter font weight so that it doesn't clash with headings.
+
+[](./iframe.html?id=foundations-typography--lead)
+
+Nobis odit nesciunt in, harum provident deleniti molestiae dolorum aliquid tempora optio accusamus dolore porro voluptatibus. Dolorum, repellat expedita.
+
+Hide codedrawOpen in CodeSandbox
+
+<IressText
+  element\="p"
+  variant\="lead"
+\>
+  Nobis odit nesciunt in, harum provident deleniti molestiae dolorum aliquid tempora optio accusamus dolore porro voluptatibus. Dolorum, repellat expedita.
+</IressText\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| align | 
+Text alignment.
+
+union
+
+
+
+ | \- | Set object |
+| children | 
+
+The content to be rendered; can be a string or a ReactNode (e.g. IressIcon).
+
+union
+
+
+
+ | \- | 
+
+"Nobis odit nesciunt in, harum provident deleniti molestiae dolorum aliquid tempora optio accusamus dolore porro voluptatibus. Dolorum, repellat expedita."
+
+ |
+| element | 
+
+The HTML element that should be rendered.
+
+union
+
+
+
+ | 
+
+'div'
+
+ | 
+
+"p"
+
+ |
+| mode | 
+
+Allows control of the text color.
+
+**Note**: The body mode has been deprecated and will be removed in a future version. Please use the body variant instead.
+
+union
+
+
+
+ | \- | Set object |
+| noGutter | 
+
+Removes bottom margin from last child of the text element if true.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| variant | 
+
+The typographic style to be rendered.
+
+union
+
+
+
+ | \- | 
+
+"lead"
+
+ |
+
+Caption
+-------
+
+The caption variant is used for small text that provides additional information about a table or image. It has a smaller font size than body text, and a lighter font weight.
+
+[](./iframe.html?id=foundations-typography--caption)
+
+Example caption
+
+Hide codedrawOpen in CodeSandbox
+
+<IressText element\="caption"\>
+  Example caption
+</IressText\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| align | 
+Text alignment.
+
+union
+
+
+
+ | \- | Set object |
+| children | 
+
+The content to be rendered; can be a string or a ReactNode (e.g. IressIcon).
+
+union
+
+
+
+ | \- | 
+
+"Example caption"
+
+ |
+| element | 
+
+The HTML element that should be rendered.
+
+union
+
+
+
+ | 
+
+'div'
+
+ | 
+
+"caption"
+
+ |
+| mode | 
+
+Allows control of the text color.
+
+**Note**: The body mode has been deprecated and will be removed in a future version. Please use the body variant instead.
+
+union
+
+
+
+ | \- | Set object |
+| noGutter | 
+
+Removes bottom margin from last child of the text element if true.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| variant | 
+
+The typographic style to be rendered.
+
+union
+
+
+
+ | \- | Set object |
+
+Other variants
+--------------
+
+IDS also includes bold, italic and small text variants.
+
+*   Bold text should be used to **draw attention** to part of a sentence, or to provide a visual label for readonly text.
+*   Italic text should be used to add _emphasis_ to content, or to add stress to part of a sentence.
+*   Small text is used for side comments or for text that's secondary to the main content.
+*   Muted text is used to de-emphasise content, such as when displaying informative text that is not critical to the user experience.
+
+[](./iframe.html?id=foundations-typography--other)
+
+Bold text
+
+Italic text
+
+Small text
+
+Muted text
+
+Hide codedrawOpen in CodeSandbox
+
+<IressStack gutter\="md"\>
+  <IressText variant\="bold"\>
+    Bold text  </IressText\>
+  <IressText variant\="italic"\>
+    Italic text  </IressText\>
+  <IressText variant\="small"\>
+    Small text  </IressText\>
+  <IressText mode\="muted"\>
+    Muted text  </IressText\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| align | 
+Text alignment.
+
+union
+
+
+
+ | \- | Set object |
+| children | 
+
+The content to be rendered; can be a string or a ReactNode (e.g. IressIcon).
+
+union
+
+
+
+ | \- | \- |
+| element | 
+
+The HTML element that should be rendered.
+
+union
+
+
+
+ | 
+
+'div'
+
+ | Set object |
+| mode | 
+
+Allows control of the text color.
+
+**Note**: The body mode has been deprecated and will be removed in a future version. Please use the body variant instead.
+
+union
+
+
+
+ | \- | Set object |
+| noGutter | 
+
+Removes bottom margin from last child of the text element if true.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| variant | 
+
+The typographic style to be rendered.
+
+union
+
+
+
+ | \- | Set object |