@iress-oss/ids-mcp-server 5.15.0 → 6.0.0-alpha.1

package/generated/docs/components-text-docs.md

@@ -1,394 +0,0 @@
-[](#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
-
-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; }
-
-<IressText\>
-  The quick brown fox jumps over the lazy dog
-</IressText\>
-
-Copy
-
-[](#usage)Usage
----------------
-
-### [](#the-element-prop)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.
-
-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 blockquote 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; }
-
-<IressStack gutter\="md"\>
-  <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\="blockquote"\>
-    This is a blockquote element.  </IressText\>
-  <IressText element\="caption"\>
-    This is a caption element.  </IressText\>
-  <IressText element\="cite"\>
-    This is a cite element.  </IressText\>
-  <IressText element\="small"\>
-    This is a small element.  </IressText\>
-</IressStack\>
-
-Copy
-
-### [](#the-variant-prop)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.
-
-This is the blockquote variant.
-
-This is the body variant.
-
-This is the bold variant.
-
-This is the code variant.
-
-This is the display variant.
-
-This is the display1 variant.
-
-This is the display2 variant.
-
-This is the display3 variant.
-
-This is the display4 variant.
-
-This is the h1 variant.
-
-This is the h2 variant.
-
-This is the h3 variant.
-
-This is the h4 variant.
-
-This is the h5 variant.
-
-This is the h6 variant.
-
-This is the italic variant.
-
-This is the lead variant.
-
-This is the small variant.
-
-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; }
-
-<IressStack gutter\="md"\>
-  <IressText variant\="blockquote"\>
-    This is the blockquote variant.  </IressText\>
-  <IressText variant\="body"\>
-    This is the body variant.  </IressText\>
-  <IressText variant\="bold"\>
-    This is the bold variant.  </IressText\>
-  <IressText variant\="code"\>
-    This is the code variant.  </IressText\>
-  <IressText variant\="display"\>
-    This is the display variant.  </IressText\>
-  <IressText variant\="display1"\>
-    This is the display1 variant.  </IressText\>
-  <IressText variant\="display2"\>
-    This is the display2 variant.  </IressText\>
-  <IressText variant\="display3"\>
-    This is the display3 variant.  </IressText\>
-  <IressText variant\="display4"\>
-    This is the display4 variant.  </IressText\>
-  <IressText variant\="h1"\>
-    This is the h1 variant.  </IressText\>
-  <IressText variant\="h2"\>
-    This is the h2 variant.  </IressText\>
-  <IressText variant\="h3"\>
-    This is the h3 variant.  </IressText\>
-  <IressText variant\="h4"\>
-    This is the h4 variant.  </IressText\>
-  <IressText variant\="h5"\>
-    This is the h5 variant.  </IressText\>
-  <IressText variant\="h6"\>
-    This is the h6 variant.  </IressText\>
-  <IressText variant\="italic"\>
-    This is the italic variant.  </IressText\>
-  <IressText variant\="lead"\>
-    This is the lead variant.  </IressText\>
-  <IressText variant\="small"\>
-    This is the small variant.  </IressText\>
-  <IressText variant\="cite"\>
-    This is the cite variant.  </IressText\>
-  <IressText variant\="caption"\>
-    This is the caption variant.  </IressText\>
-</IressStack\>
-
-Copy
-
-### [](#the-mode-prop)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.
-
-This is danger mode.
-
-This is info mode.
-
-This is muted mode.
-
-This is primary mode.
-
-This is success mode.
-
-This is warning mode.
-
-This is positive mode.
-
-This is negative mode.
-
-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; }
-
-<IressStack gutter\="md"\>
-  <IressText mode\="danger"\>
-    This is danger mode.  </IressText\>
-  <IressText mode\="info"\>
-    This is info mode.  </IressText\>
-  <IressText mode\="muted"\>
-    This is muted mode.  </IressText\>
-  <IressText mode\="primary"\>
-    This is primary mode.  </IressText\>
-  <IressText mode\="success"\>
-    This is success mode.  </IressText\>
-  <IressText mode\="warning"\>
-    This is warning mode.  </IressText\>
-  <IressText mode\="positive"\>
-    This is positive mode.  </IressText\>
-  <IressText mode\="negative"\>
-    This is negative mode.  </IressText\>
-  <IressText mode\="danger"\>
-    Nested text mode demonstration:{' '}
-    <IressText\>
-      I am nested, and return to the original colour    </IressText\>
-  </IressText\>
-</IressStack\>
-
-Copy
-
-### [](#the-align-prop)The `align` prop
-
-The `align` prop can be used to set the text's alignment.
-
-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
-
-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; }
-
-<IressStack gutter\="md"\>
-  <IressText align\="inherit"\>
-    The quick brown fox jumps over the lazy dog  </IressText\>
-  <IressText align\="left"\>
-    The quick brown fox jumps over the lazy dog  </IressText\>
-  <IressText align\="center"\>
-    The quick brown fox jumps over the lazy dog  </IressText\>
-  <IressText align\="right"\>
-    The quick brown fox jumps over the lazy dog  </IressText\>
-  <IressText align\="justify"\>
-    The quick brown fox jumps over the lazy dog  </IressText\>
-</IressStack\>
-
-Copy
-
-[](#behaviour)Behaviour
------------------------
-
-### [](#headings-with-icons)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.
-
-H1 heading with icons
-=====================
-
-H2 heading with icons
----------------------
-
-### H3 heading with icons
-
-#### H4 heading with icons
-
-##### H5 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; }
-
-<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\>
-
-Copy
-
-### [](#block-of-typographic-content)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.
-
-Heading text
-------------
-
-This is just raw HTML inside the text component. This is just raw HTML inside the text component.
-
-> Nisi optio dolore debitis porro ex quis odio atque, ut obcaecati dolorem enim molestiae eum voluptatem excepturi quisquam. Someone in latin
-
-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; }
-
-<IressText\>
-  <h2\>
-    Heading text  </h2\>
-  <p\>
-    This is just raw HTML inside the text component. This is just raw HTML inside the text component.  </p\>
-  <blockquote\>
-    Nisi optio dolore debitis porro ex quis odio atque, ut obcaecati dolorem enim molestiae eum voluptatem excepturi quisquam.{' '}
-    <cite\>
-      Someone in latin    </cite\>
-  </blockquote\>
-  <p\>
-    You can also use dividers inside blocks to separate content.  </p\>
-  <hr />
-  <p\>
-    Just like the one above.  </p\>
-</IressText\>
-
-Copy
-
-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)