@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_components-text-docs.md

@@ -0,0 +1,593 @@
+Text
+====
+
+Overview
+--------
+
+The `IressText` component allows you to set typographic styles either on one element, or a block on HTML elements.
+
+* * *
+
+Updated
+
+**Recently updated**
+
+This component has been recently updated with new props. The props have been marked as beta. Please tell us if there are any issues.
+
+[](./iframe.html?id=components-text--default)
+
+The quick brown fox jumps over the lazy dog
+
+```
+
+<IressText\>
+  The quick brown fox jumps over the lazy dog
+</IressText\>
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+string
+
+
+
+ | \- | The quick brown fox jumps over the lazy dog |
+
+Usage
+-----
+
+### The `element` prop
+
+With the `element` prop you can select which HTML element you would like the text component to render as.
+
+It renders as a `div` by default, but can also be set to any standard typography element.
+
+[](./iframe.html?id=components-text--element)
+
+This is a p element.
+
+This is a div element.
+
+This is a span element.
+
+This is a h1 element.
+=====================
+
+This is a h2 element.
+---------------------
+
+### This is a h3 element.
+
+#### This is a h4 element.
+
+##### This is a h5 element.
+
+###### This is a h6 element.
+
+`This is a code element.`This is a small element.This is a cite element.This is a caption element.**This is a strong element.**_This is a em element._This is a a element.
+
+> This is a blockquote element.
+
+This is a pre element.
+
+```
+
+<IressStack gap\="spacing.100"\>
+  <IressText element\="p"\>
+    This is a p element.  </IressText\>
+  <IressText element\="div"\>
+    This is a div element.  </IressText\>
+  <IressText element\="span"\>
+    This is a span element.  </IressText\>
+  <IressText element\="h1"\>
+    This is a h1 element.  </IressText\>
+  <IressText element\="h2"\>
+    This is a h2 element.  </IressText\>
+  <IressText element\="h3"\>
+    This is a h3 element.  </IressText\>
+  <IressText element\="h4"\>
+    This is a h4 element.  </IressText\>
+  <IressText element\="h5"\>
+    This is a h5 element.  </IressText\>
+  <IressText element\="h6"\>
+    This is a h6 element.  </IressText\>
+  <IressText element\="code"\>
+    This is a code element.  </IressText\>
+  <IressText element\="small"\>
+    This is a small element.  </IressText\>
+  <IressText element\="cite"\>
+    This is a cite element.  </IressText\>
+  <IressText element\="caption"\>
+    This is a caption element.  </IressText\>
+  <IressText element\="strong"\>
+    This is a strong element.  </IressText\>
+  <IressText element\="em"\>
+    This is a em element.  </IressText\>
+  <IressText element\="a"\>
+    This is a a element.  </IressText\>
+  <IressText element\="blockquote"\>
+    This is a blockquote element.  </IressText\>
+  <IressText element\="pre"\>
+    This is a pre element.  </IressText\>
+</IressStack\>
+
+```
+
+#### Props
+
+### The `textStyle` prop
+
+The `textStyle` prop (previously `variant`) allows you alter the default styling of the element that it selected.
+
+For example, in order to maintain the semantic structure of headings, you may need to style a `h2` element like a `h4`. Or you may want to style your heading using one of our display text formats.
+
+[](./iframe.html?id=components-text--variant)
+
+This is the typography.heading.1 text style.
+
+This is the typography.heading.2 text style.
+
+This is the typography.heading.3 text style.
+
+This is the typography.heading.4 text style.
+
+This is the typography.heading.5 text style.
+
+This is the typography.body.sm text style.
+
+This is the typography.body.sm.regular text style.
+
+This is the typography.body.sm.strong text style.
+
+This is the typography.body.sm.em text style.
+
+This is the typography.body.md.regular text style.
+
+This is the typography.body.md text style.
+
+This is the typography.body.md.strong text style.
+
+This is the typography.body.md.em text style.
+
+This is the typography.body.lg text style.
+
+This is the typography.body.lg.regular text style.
+
+This is the typography.body.lg.strong text style.
+
+This is the typography.body.lg.em text style.
+
+This is the typography.code text style.
+
+```
+
+<IressStack gap\="md"\>
+  <IressText textStyle\="typography.heading.1"\>
+    This is the typography.heading.1 text style.  </IressText\>
+  <IressText textStyle\="typography.heading.2"\>
+    This is the typography.heading.2 text style.  </IressText\>
+  <IressText textStyle\="typography.heading.3"\>
+    This is the typography.heading.3 text style.  </IressText\>
+  <IressText textStyle\="typography.heading.4"\>
+    This is the typography.heading.4 text style.  </IressText\>
+  <IressText textStyle\="typography.heading.5"\>
+    This is the typography.heading.5 text style.  </IressText\>
+  <IressText textStyle\="typography.body.sm"\>
+    This is the typography.body.sm text style.  </IressText\>
+  <IressText textStyle\="typography.body.sm.regular"\>
+    This is the typography.body.sm.regular text style.  </IressText\>
+  <IressText textStyle\="typography.body.sm.strong"\>
+    This is the typography.body.sm.strong text style.  </IressText\>
+  <IressText textStyle\="typography.body.sm.em"\>
+    This is the typography.body.sm.em text style.  </IressText\>
+  <IressText textStyle\="typography.body.md.regular"\>
+    This is the typography.body.md.regular text style.  </IressText\>
+  <IressText textStyle\="typography.body.md"\>
+    This is the typography.body.md text style.  </IressText\>
+  <IressText textStyle\="typography.body.md.strong"\>
+    This is the typography.body.md.strong text style.  </IressText\>
+  <IressText textStyle\="typography.body.md.em"\>
+    This is the typography.body.md.em text style.  </IressText\>
+  <IressText textStyle\="typography.body.lg"\>
+    This is the typography.body.lg text style.  </IressText\>
+  <IressText textStyle\="typography.body.lg.regular"\>
+    This is the typography.body.lg.regular text style.  </IressText\>
+  <IressText textStyle\="typography.body.lg.strong"\>
+    This is the typography.body.lg.strong text style.  </IressText\>
+  <IressText textStyle\="typography.body.lg.em"\>
+    This is the typography.body.lg.em text style.  </IressText\>
+  <IressText textStyle\="typography.code"\>
+    This is the typography.code text style.  </IressText\>
+</IressStack\>
+
+```
+
+#### Props
+
+### The `color` prop
+
+The `color` prop (previously `mode`) can be used to set the colour of the text to these predefined mode colours: Body, Muted, Primary, Info, Success, Warning, Danger, Positive and Negative.
+
+[](./iframe.html?id=components-text--mode)
+
+This is colour.primary.fill mode.
+
+This is colour.primary.fillHover mode.
+
+This is colour.primary.onFill mode.
+
+This is colour.primary.surface mode.
+
+This is colour.primary.surfaceHover mode.
+
+This is colour.primary.text mode.
+
+This is colour.neutral.10 mode.
+
+This is colour.neutral.20 mode.
+
+This is colour.neutral.30 mode.
+
+This is colour.neutral.40 mode.
+
+This is colour.neutral.50 mode.
+
+This is colour.neutral.60 mode.
+
+This is colour.neutral.70 mode.
+
+This is colour.neutral.80 mode.
+
+This is colour.accent.brand mode.
+
+This is colour.system.success.fill mode.
+
+This is colour.system.success.fillHover mode.
+
+This is colour.system.success.onFill mode.
+
+This is colour.system.success.surface mode.
+
+This is colour.system.success.surfaceHover mode.
+
+This is colour.system.success.text mode.
+
+This is colour.system.danger.fill mode.
+
+This is colour.system.danger.fillHover mode.
+
+This is colour.system.danger.onFill mode.
+
+This is colour.system.danger.surface mode.
+
+This is colour.system.danger.surfaceHover mode.
+
+This is colour.system.danger.text mode.
+
+This is colour.system.warning.fill mode.
+
+This is colour.system.warning.onFill mode.
+
+This is colour.system.warning.surface mode.
+
+This is colour.system.warning.text mode.
+
+This is colour.system.info.fill mode.
+
+This is colour.system.info.onFill mode.
+
+This is colour.system.info.surface mode.
+
+This is colour.system.info.text mode.
+
+This is colour.system.backdrop.fill mode.
+
+This is transparent mode.
+
+This is page mode.
+
+This is alt mode.
+
+This is muted mode.
+
+This is text mode.
+
+Nested text mode demonstration:
+
+I am nested, and return to the original colour
+
+```
+
+<IressStack gap\="md"\>
+  <IressText color\="colour.primary.fill"\>
+    This is colour.primary.fill mode.  </IressText\>
+  <IressText color\="colour.primary.fillHover"\>
+    This is colour.primary.fillHover mode.  </IressText\>
+  <IressText color\="colour.primary.onFill"\>
+    This is colour.primary.onFill mode.  </IressText\>
+  <IressText color\="colour.primary.surface"\>
+    This is colour.primary.surface mode.  </IressText\>
+  <IressText color\="colour.primary.surfaceHover"\>
+    This is colour.primary.surfaceHover mode.  </IressText\>
+  <IressText color\="colour.primary.text"\>
+    This is colour.primary.text mode.  </IressText\>
+  <IressText color\="colour.neutral.10"\>
+    This is colour.neutral.10 mode.  </IressText\>
+  <IressText color\="colour.neutral.20"\>
+    This is colour.neutral.20 mode.  </IressText\>
+  <IressText color\="colour.neutral.30"\>
+    This is colour.neutral.30 mode.  </IressText\>
+  <IressText color\="colour.neutral.40"\>
+    This is colour.neutral.40 mode.  </IressText\>
+  <IressText color\="colour.neutral.50"\>
+    This is colour.neutral.50 mode.  </IressText\>
+  <IressText color\="colour.neutral.60"\>
+    This is colour.neutral.60 mode.  </IressText\>
+  <IressText color\="colour.neutral.70"\>
+    This is colour.neutral.70 mode.  </IressText\>
+  <IressText color\="colour.neutral.80"\>
+    This is colour.neutral.80 mode.  </IressText\>
+  <IressText color\="colour.accent.brand"\>
+    This is colour.accent.brand mode.  </IressText\>
+  <IressText color\="colour.system.success.fill"\>
+    This is colour.system.success.fill mode.  </IressText\>
+  <IressText color\="colour.system.success.fillHover"\>
+    This is colour.system.success.fillHover mode.  </IressText\>
+  <IressText color\="colour.system.success.onFill"\>
+    This is colour.system.success.onFill mode.  </IressText\>
+  <IressText color\="colour.system.success.surface"\>
+    This is colour.system.success.surface mode.  </IressText\>
+  <IressText color\="colour.system.success.surfaceHover"\>
+    This is colour.system.success.surfaceHover mode.  </IressText\>
+  <IressText color\="colour.system.success.text"\>
+    This is colour.system.success.text mode.  </IressText\>
+  <IressText color\="colour.system.danger.fill"\>
+    This is colour.system.danger.fill mode.  </IressText\>
+  <IressText color\="colour.system.danger.fillHover"\>
+    This is colour.system.danger.fillHover mode.  </IressText\>
+  <IressText color\="colour.system.danger.onFill"\>
+    This is colour.system.danger.onFill mode.  </IressText\>
+  <IressText color\="colour.system.danger.surface"\>
+    This is colour.system.danger.surface mode.  </IressText\>
+  <IressText color\="colour.system.danger.surfaceHover"\>
+    This is colour.system.danger.surfaceHover mode.  </IressText\>
+  <IressText color\="colour.system.danger.text"\>
+    This is colour.system.danger.text mode.  </IressText\>
+  <IressText color\="colour.system.warning.fill"\>
+    This is colour.system.warning.fill mode.  </IressText\>
+  <IressText color\="colour.system.warning.onFill"\>
+    This is colour.system.warning.onFill mode.  </IressText\>
+  <IressText color\="colour.system.warning.surface"\>
+    This is colour.system.warning.surface mode.  </IressText\>
+  <IressText color\="colour.system.warning.text"\>
+    This is colour.system.warning.text mode.  </IressText\>
+  <IressText color\="colour.system.info.fill"\>
+    This is colour.system.info.fill mode.  </IressText\>
+  <IressText color\="colour.system.info.onFill"\>
+    This is colour.system.info.onFill mode.  </IressText\>
+  <IressText color\="colour.system.info.surface"\>
+    This is colour.system.info.surface mode.  </IressText\>
+  <IressText color\="colour.system.info.text"\>
+    This is colour.system.info.text mode.  </IressText\>
+  <IressText color\="colour.system.backdrop.fill"\>
+    This is colour.system.backdrop.fill mode.  </IressText\>
+  <IressText color\="transparent"\>
+    This is transparent mode.  </IressText\>
+  <IressText color\="page"\>
+    This is page mode.  </IressText\>
+  <IressText color\="alt"\>
+    This is alt mode.  </IressText\>
+  <IressText color\="muted"\>
+    This is muted mode.  </IressText\>
+  <IressText color\="text"\>
+    This is text mode.  </IressText\>
+  <IressText color\="colour.primary.text"\>
+    Nested text mode demonstration:{' '}
+    <IressText\>
+      I am nested, and return to the original colour    </IressText\>
+  </IressText\>
+</IressStack\>
+
+```
+
+#### Props
+
+### The `textAlign` prop
+
+The `textAlign` prop (previously `align`) can be used to set the text's alignment.
+
+[](./iframe.html?id=components-text--align)
+
+The quick brown fox jumps over the lazy dog
+
+The quick brown fox jumps over the lazy dog
+
+The quick brown fox jumps over the lazy dog
+
+The quick brown fox jumps over the lazy dog
+
+The quick brown fox jumps over the lazy dog
+
+```
+
+<IressStack gap\="md"\>
+  <IressText textAlign\="left"\>
+    The quick brown fox jumps over the lazy dog  </IressText\>
+  <IressText textAlign\="center"\>
+    The quick brown fox jumps over the lazy dog  </IressText\>
+  <IressText textAlign\="right"\>
+    The quick brown fox jumps over the lazy dog  </IressText\>
+  <IressText textAlign\="justify"\>
+    The quick brown fox jumps over the lazy dog  </IressText\>
+  <IressText textAlign\="inherit"\>
+    The quick brown fox jumps over the lazy dog  </IressText\>
+</IressStack\>
+
+```
+
+#### Props
+
+Behaviour
+---------
+
+### Headings with icons
+
+Icons can be added to a heading by simply including the icon as a direct child of the heading, as below.
+
+The icon inherits the font size from the heading, so there is no need to set a size on the icon. If the icon is the first or last child of the heading, it will have some inline spacing added to save you from having to use the `IressInline` component.
+
+[](./iframe.html?id=components-text--headings-with-icons)
+
+H1 heading with icons
+=====================
+
+H2 heading with icons
+---------------------
+
+### H3 heading with icons
+
+#### H4 heading with icons
+
+##### H5 heading with icons
+
+###### H6 heading with icons
+
+```
+
+<IressStack\>
+  <IressText element\="h1"\>
+    <IressIcon name\="smile-wink" />
+    <span\>
+      H1 heading with icons    </span\>
+    <IressIcon name\="smile-wink" />
+  </IressText\>
+  <IressText element\="h2"\>
+    <IressIcon name\="smile-wink" />
+    <span\>
+      H2 heading with icons    </span\>
+    <IressIcon name\="smile-wink" />
+  </IressText\>
+  <IressText element\="h3"\>
+    <IressIcon name\="smile-wink" />
+    <span\>
+      H3 heading with icons    </span\>
+    <IressIcon name\="smile-wink" />
+  </IressText\>
+  <IressText element\="h4"\>
+    <IressIcon name\="smile-wink" />
+    <span\>
+      H4 heading with icons    </span\>
+    <IressIcon name\="smile-wink" />
+  </IressText\>
+  <IressText element\="h5"\>
+    <IressIcon name\="smile-wink" />
+    <span\>
+      H5 heading with icons    </span\>
+    <IressIcon name\="smile-wink" />
+  </IressText\>
+  <IressText element\="h6"\>
+    <IressIcon name\="smile-wink" />
+    <span\>
+      H6 heading with icons    </span\>
+    <IressIcon name\="smile-wink" />
+  </IressText\>
+</IressStack\>
+
+```
+
+#### Props
+
+### Block of typographic content
+
+If you just need to style a block of typography content, you can just wrap the entire block of HTML with the text component.
+
+[](./iframe.html?id=components-text--typographic-block)
+
+History
+-------
+
+### Founding and Early Years (1993 - 2000)
+
+[Iress Limited (ASX: IRE)](https://iress.com) was founded in 1993 in Melbourne, Australia, as a provider of financial market data and trading software. Initially, the company focused on delivering technology solutions for stockbrokers and traders, providing real-time market data, order management, and trading execution tools.
+
+### Expansion and IPO (2001 - 2010)
+
+In 2001, Iress went public, listing on the Australian Securities Exchange (ASX). This move provided the company with capital to expand its operations and invest in new technologies. During this period, Iress expanded its services beyond trading platforms to include financial planning software, portfolio management, and wealth management solutions. The company also started expanding internationally, entering markets such as the UK, Canada, New Zealand, and South Africa, through organic growth and acquisitions.
+
+### Global Growth and Acquisitions (2011 - 2020)
+
+Between 2011 and 2020, Iress continued its global expansion through acquisitions and product diversification. Key acquisitions included:
+
+*   Avelo (2013): Strengthened its presence in the UK financial services market.
+*   Pulse Software (2014): Added financial advice solutions to its portfolio.
+*   INET BFA (2016): Expanded its reach into South Africa’s financial market.
+*   OneVue (2020): Enhanced its superannuation and investment administration capabilities.
+
+During this period, Iress also expanded into mortgage lending technology and digital financial services, adapting to the increasing demand for automation and efficiency in financial markets.
+
+### Recent Developments (2021 - Present)
+
+In 2021, Iress announced a strategic review of its business, focusing on streamlining operations and improving profitability. The company also experienced leadership changes, including new CEO appointments to drive digital transformation.
+
+Iress has continued to innovate with cloud-based solutions, artificial intelligence (AI), and data analytics, catering to financial institutions, brokers, and wealth management firms globally.
+
+Some code in here
+
+```
+
+<IressText
+  maxWidth\="container.md"
+  mx\="auto"
+  px\="spacing.200"
+\>
+  <h2\>
+    History  </h2\>
+  <h3\>
+    Founding and Early Years (1993 - 2000)  </h3\>
+  <p\>
+    <a
+      href\="https://iress.com"
+      target\="\_blank"
+    \>
+      Iress Limited (ASX: IRE)    </a\>
+    {' '}was founded in 1993 in Melbourne, Australia, as a provider of financial market data and trading software. Initially, the company focused on delivering technology solutions for stockbrokers and traders, providing real-time market data, order management, and trading execution tools.
+  </p\>
+  <h3\>
+    Expansion and IPO (2001 - 2010)  </h3\>
+  <p\>
+    In 2001, Iress went public, listing on the Australian Securities Exchange (ASX). This move provided the company with capital to expand its operations and invest in new technologies. During this period, Iress expanded its services beyond trading platforms to include financial planning software, portfolio management, and wealth management solutions. The company also started expanding internationally, entering markets such as the UK, Canada, New Zealand, and South Africa, through organic growth and acquisitions.  </p\>
+  <h3\>
+    Global Growth and Acquisitions (2011 - 2020)  </h3\>
+  <p\>
+    Between 2011 and 2020, Iress continued its global expansion through acquisitions and product diversification. Key acquisitions included:  </p\>
+  <ul\>
+    <li\>
+      Avelo (2013): Strengthened its presence in the UK financial services market.    </li\>
+    <li\>
+      Pulse Software (2014): Added financial advice solutions to its portfolio.    </li\>
+    <li\>
+      INET BFA (2016): Expanded its reach into South Africa’s financial market.    </li\>
+    <li\>
+      OneVue (2020): Enhanced its superannuation and investment administration capabilities.    </li\>
+  </ul\>
+  <p\>
+    During this period, Iress also expanded into mortgage lending technology and digital financial services, adapting to the increasing demand for automation and efficiency in financial markets.  </p\>
+  <h3\>
+    Recent Developments (2021 - Present)  </h3\>
+  <p\>
+    In 2021, Iress announced a strategic review of its business, focusing on streamlining operations and improving profitability. The company also experienced leadership changes, including new CEO appointments to drive digital transformation.{' '}
+  </p\>
+  <p\>
+    Iress has continued to innovate with cloud-based solutions, artificial intelligence (AI), and data analytics, catering to financial institutions, brokers, and wealth management firms globally.  </p\>
+  <pre\>
+    Some code in here  </pre\>
+</IressText\>
+
+```
+
+#### Props