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

package/generated/docs/{components-text-docs.md → components_components-text-docs.md}

@@ -1,32 +1,103 @@
-[](#text)Text
-=============
+Text
+====
 
 Overview
 --------
 
 The `IressText` component allows you to set typographic styles either on one element, or a block on HTML elements.
 
-The quick brown fox jumps over the lazy dog
+[](./iframe.html?id=components-text--default)
 
-Hide code
+The quick brown fox jumps over the lazy dog
 
-\[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; }
+Hide codedrawOpen in CodeSandbox
 
 <IressText\>
   The quick brown fox jumps over the lazy dog
 </IressText\>
 
-Copy
+```
+
+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
+
+
+
+ | \- | 
+
+"The quick brown fox jumps over the lazy dog"
+
+ |
+| 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
+
+
 
-[](#usage)Usage
----------------
+ | \- | Set boolean |
+| variant | 
 
-### [](#the-element-prop)The `element` prop
+The typographic style to be rendered.
+
+union
+
+
+
+ | \- | Set object |
+
+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.
@@ -53,9 +124,7 @@ This is a h2 element.
 
 This is a caption element.This is a cite element.This is a small element.
 
-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; }
+Hide codedrawOpen in CodeSandbox
 
 <IressStack gutter\="md"\>
   <IressText element\="p"\>
@@ -88,14 +157,80 @@ Hide code
     This is a small element.  </IressText\>
 </IressStack\>
 
-Copy
+```
+
+#### 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
+
+
+
+ | \- | Set object |
+| element | 
+
+The HTML element that should be rendered.
+
+union
+
+
+
+ | 
+
+'div'
+
+ | \- |
+| 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
+
+
 
-### [](#the-variant-prop)The `variant` prop
+ | \- | 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 |
+
+### The `variant` prop
 
 The `variant` prop 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 blockquote variant.
 
 This is the body variant.
@@ -136,9 +271,7 @@ This is the cite variant.
 
 This is the caption variant.
 
-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; }
+Hide codedrawOpen in CodeSandbox
 
 <IressStack gutter\="md"\>
   <IressText variant\="blockquote"\>
@@ -183,12 +316,78 @@ Hide code
     This is the caption variant.  </IressText\>
 </IressStack\>
 
-Copy
+```
+
+#### 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
+
+
+
+ | \- | Set object |
+| element | 
+
+The HTML element that should be rendered.
+
+union
+
+
+
+ | 
+
+'div'
+
+ | Set object |
+| mode | 
+
+Allows control of the text color.
 
-### [](#the-mode-prop)The `mode` prop
+**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
+
+
+
+ | \- | \- |
+
+### The `mode` prop
 
 The `mode` prop 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 danger mode.
 
 This is info mode.
@@ -209,9 +408,7 @@ Nested text mode demonstration:
 
 I am nested, and return to the original colour
 
-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; }
+Hide codedrawOpen in CodeSandbox
 
 <IressStack gutter\="md"\>
   <IressText mode\="danger"\>
@@ -237,13 +434,77 @@ Hide code
   </IressText\>
 </IressStack\>
 
-Copy
+```
+
+#### 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
+
+
+
+ | \- | Set object |
+| element | 
+
+The HTML element that should be rendered.
+
+union
+
 
-### [](#the-align-prop)The `align` prop
+
+ | 
+
+'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
+
+
+
+ | \- | \- |
+| 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 |
+
+### The `align` prop
 
 The `align` prop can be used to set the text's alignment.
 
-The quick brown fox jumps over the lazy dog
+[](./iframe.html?id=components-text--align)
 
 The quick brown fox jumps over the lazy dog
 
@@ -253,9 +514,9 @@ The quick brown fox jumps over the lazy dog
 
 The quick brown fox jumps over the lazy dog
 
-Hide code
+The quick brown fox jumps over the lazy dog
 
-\[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; }
+Hide codedrawOpen in CodeSandbox
 
 <IressStack gutter\="md"\>
   <IressText align\="inherit"\>
@@ -270,17 +531,83 @@ Hide code
     The quick brown fox jumps over the lazy dog  </IressText\>
 </IressStack\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| align | 
+Text alignment.
+
+union
+
+
+
+ | \- | \- |
+| children | 
+
+The content to be rendered; can be a string or a ReactNode (e.g. IressIcon).
+
+union
+
+
 
-[](#behaviour)Behaviour
------------------------
+ | \- | Set object |
+| element | 
 
-### [](#headings-with-icons)Headings with icons
+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 |
+
+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
 =====================
 
@@ -295,9 +622,7 @@ H2 heading with icons
 
 ###### H6 heading with icons
 
-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; }
+Hide codedrawOpen in CodeSandbox
 
 <IressStack\>
   <IressText element\="h1"\>
@@ -338,12 +663,78 @@ Hide code
   </IressText\>
 </IressStack\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| align | 
+Text alignment.
+
+union
+
+
 
-### [](#block-of-typographic-content)Block of typographic content
+ | \- | Set object |
+| children | 
+
+The content to be rendered; can be a string or a ReactNode (e.g. IressIcon).
+
+union
+
+
+
+ | \- | Set object |
+| element | 
+
+The HTML element that should be rendered.
+
+union
+
+
+
+ | 
+
+'div'
+
+ | \- |
+| 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 |
+
+### 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)
+
 Heading text
 ------------
 
@@ -357,9 +748,7 @@ You can also use dividers inside blocks to separate content.
 
 Just like the one above.
 
-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; }
+Hide codedrawOpen in CodeSandbox
 
 <IressText\>
   <h2\>
@@ -378,17 +767,68 @@ Hide code
     Just like the one above.  </p\>
 </IressText\>
 
-Copy
+```
+
+#### 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
+
+
+
+ | \- | Set object |
+| 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
+
 
-On this page
 
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Usage](#usage)
-    *   [The element prop](#the-element-prop)
-    *   [The variant prop](#the-variant-prop)
-    *   [The mode prop](#the-mode-prop)
-    *   [The align prop](#the-align-prop)
-*   [Behaviour](#behaviour)
-    *   [Headings with icons](#headings-with-icons)
-    *   [Block of typographic content](#block-of-typographic-content)
+ | \- | Set object |