@iress-oss/ids-mcp-server 5.14.2 → 5.20.1

package/generated/docs/components_components-skeleton-docs.md

@@ -0,0 +1,480 @@
+Skeleton
+========
+
+Overview
+--------
+
+Skeletons can increase perceived performance for users. As opposed to spinners, skeletons make it feel as though things are happening/loading immediately, then the information is incrementally displayed on the screen.
+
+[](./iframe.html?id=components-skeleton--default)
+
+```
+
+<IressSkeleton />
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| height | 
+Sets the height of the skeleton bones. If no unit is specified it will default to pixels. Will be ignored when in `text` mode.
+
+string
+
+
+
+ | \- | Set string |
+| mode | 
+
+Mode of the skeleton. `rect` and `circle` must have `width` and `height` specified. `text` works with `textVariant`.
+
+union
+
+
+
+ | 
+
+'text'
+
+ | Set object |
+| textVariant | 
+
+Use `textVariant` to specify what the Skeleton should emulate. If set to `h1` a non-break space with the same font-size and line-height of a h1 will be rendered.
+
+union
+
+
+
+ | \- | Set object |
+| width | 
+
+Sets the width of the skeleton bones. If no unit is specified it will default to pixels.
+
+string
+
+
+
+ | \- | Set string |
+
+Examples
+--------
+
+### Modes
+
+The `mode` prop can be set to `text` (default), `rect` or `circle`.
+
+[](./iframe.html?id=components-skeleton--mode)
+
+```
+
+<IressStack gutter\="md"\>
+  <IressSkeleton mode\="text" />
+  <IressSkeleton
+    height\="100px"
+    mode\="rect"
+  />
+  <IressSkeleton
+    height\="100px"
+    mode\="circle"
+    width\="100px"
+  />
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| height | 
+Sets the height of the skeleton bones. If no unit is specified it will default to pixels. Will be ignored when in `text` mode.
+
+string
+
+
+
+ | \- | \- |
+| mode | 
+
+Mode of the skeleton. `rect` and `circle` must have `width` and `height` specified. `text` works with `textVariant`.
+
+union
+
+
+
+ | 
+
+'text'
+
+ | \- |
+| textVariant | 
+
+Use `textVariant` to specify what the Skeleton should emulate. If set to `h1` a non-break space with the same font-size and line-height of a h1 will be rendered.
+
+union
+
+
+
+ | \- | Set object |
+| width | 
+
+Sets the width of the skeleton bones. If no unit is specified it will default to pixels.
+
+string
+
+
+
+ | \- | \- |
+
+### Text
+
+`text` mode allows you to use `IressSkeleton` in place of `IressText` and keep the same sizing. To achieve this you can use `text` mode in conjunction with the `textVariant` prop.
+
+`text` also accepts the width prop but does not use the `height` prop like other modes. The height is achieved through font size and line height.
+
+[](./iframe.html?id=components-skeleton--text)
+
+Toggle load
+
+```
+
+import { useState } from 'react';
+import {
+  IressButton,
+  IressSkeleton,
+  type IressSkeletonProps,
+  IressStack,
+  IressText,
+  TEXT\_VARIANTS,
+} from '@iress-oss/ids-components';
+export const SkeletonText \= () \=> {
+  const \[loading, setLoading\] \= useState(true);
+  return (
+    <IressStack gutter\={IressStack.Gutter.Md}\>
+      <IressButton onClick\={() \=> setLoading(!loading)}\>
+        Toggle load      </IressButton\>
+      <IressStack gutter\={IressStack.Gutter.Xs}\>
+        {TEXT\_VARIANTS.map((textVariant) \=> \[
+          loading && <IressSkeleton {...{
+  mode: 'text',
+}} textVariant\={textVariant} />,
+          !loading && (
+            <IressText variant\={textVariant}\>{textVariant}</IressText\>
+          ),
+        \])}
+      </IressStack\>
+    </IressStack\>
+  );
+};
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| height | 
+Sets the height of the skeleton bones. If no unit is specified it will default to pixels. Will be ignored when in `text` mode.
+
+string
+
+
+
+ | \- | Set string |
+| mode | 
+
+Mode of the skeleton. `rect` and `circle` must have `width` and `height` specified. `text` works with `textVariant`.
+
+union
+
+
+
+ | 
+
+'text'
+
+ | 
+
+"text"
+
+ |
+| textVariant | 
+
+Use `textVariant` to specify what the Skeleton should emulate. If set to `h1` a non-break space with the same font-size and line-height of a h1 will be rendered.
+
+union
+
+
+
+ | \- | \- |
+| width | 
+
+Sets the width of the skeleton bones. If no unit is specified it will default to pixels.
+
+string
+
+
+
+ | \- | Set string |
+
+### Rect
+
+`rect` mode allows you to use `IressSkeleton` in place of block elements, a good example would be in place of images.
+
+`rect` accepts both `width` and `height` props for sizing. It will default to 100% and a theme defined fallback height (`--iress-skeleton-bone-fallback-height`).
+
+[](./iframe.html?id=components-skeleton--rect)
+
+Toggle load
+
+```
+
+import { useState } from 'react';
+import {
+  IressButton,
+  IressPlaceholder,
+  IressSkeleton,
+  type IressSkeletonProps,
+  IressStack,
+} from '@iress-oss/ids-components';
+export const SkeletonRect \= () \=> {
+  const \[loading, setLoading\] \= useState(true);
+  return (
+    <IressStack gutter\={IressStack.Gutter.Md}\>
+      <IressButton onClick\={() \=> setLoading(!loading)}\>
+        Toggle load      </IressButton\>
+      {loading && <IressSkeleton {...{
+  mode: 'rect',
+  width: '250',
+  height: '150',
+}} />}
+      {!loading && <IressPlaceholder {...{
+  mode: 'rect',
+  width: '250',
+  height: '150',
+}}\>Image</IressPlaceholder\>}
+    </IressStack\>
+  );
+};
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| height | 
+Sets the height of the skeleton bones. If no unit is specified it will default to pixels. Will be ignored when in `text` mode.
+
+string
+
+
+
+ | \- | 150 |
+| mode | 
+
+Mode of the skeleton. `rect` and `circle` must have `width` and `height` specified. `text` works with `textVariant`.
+
+union
+
+
+
+ | 
+
+'text'
+
+ | 
+
+"rect"
+
+ |
+| textVariant | 
+
+Use `textVariant` to specify what the Skeleton should emulate. If set to `h1` a non-break space with the same font-size and line-height of a h1 will be rendered.
+
+union
+
+
+
+ | \- | Set object |
+| width | 
+
+Sets the width of the skeleton bones. If no unit is specified it will default to pixels.
+
+string
+
+
+
+ | \- | 250 |
+
+### Circle
+
+`circle` mode allows you to use `IressSkeleton` in place of circular elements, a good example would be for profile images.
+
+`circle` accepts both `width` and `height` props for sizing. It will default to 100% and a theme defined fallback height (`--iress-skeleton-bone-fallback-height`).
+
+[](./iframe.html?id=components-skeleton--circle)
+
+Toggle load
+
+```
+
+import { useState } from 'react';
+import {
+  IressButton,
+  IressPlaceholder,
+  IressSkeleton,
+  type IressSkeletonProps,
+  IressStack,
+} from '@iress-oss/ids-components';
+export const SkeletonCircle \= () \=> {
+  const \[loading, setLoading\] \= useState(true);
+  return (
+    <IressStack gutter\={IressStack.Gutter.Md}\>
+      <IressButton onClick\={() \=> setLoading(!loading)}\>
+        Toggle load      </IressButton\>
+      {loading && <IressSkeleton {...{
+  mode: 'circle',
+  width: '150',
+  height: '150',
+}} />}
+      {!loading && (
+        <IressPlaceholder {...{
+  mode: 'circle',
+  width: '150',
+  height: '150',
+}} style\={{ borderRadius: '50%' }}\>
+          Image        </IressPlaceholder\>
+      )}
+    </IressStack\>
+  );
+};
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| height | 
+Sets the height of the skeleton bones. If no unit is specified it will default to pixels. Will be ignored when in `text` mode.
+
+string
+
+
+
+ | \- | 150 |
+| mode | 
+
+Mode of the skeleton. `rect` and `circle` must have `width` and `height` specified. `text` works with `textVariant`.
+
+union
+
+
+
+ | 
+
+'text'
+
+ | 
+
+"circle"
+
+ |
+| textVariant | 
+
+Use `textVariant` to specify what the Skeleton should emulate. If set to `h1` a non-break space with the same font-size and line-height of a h1 will be rendered.
+
+union
+
+
+
+ | \- | Set object |
+| width | 
+
+Sets the width of the skeleton bones. If no unit is specified it will default to pixels.
+
+string
+
+
+
+ | \- | 150 |
+
+### Size
+
+`width` and `height` props can be used to match the layout of the loaded content.
+
+These props accept any unit of dimension, but if no unit is provided it will default to pixels.
+
+**Note:** `height` will be ignored for text mode as this is calculated using the `IressText` component.
+
+[](./iframe.html?id=components-skeleton--size)
+
+```
+
+<IressInline gutter\="md"\>
+  <IressSkeleton
+    height\="150"
+    mode\="rect"
+    width\="150"
+  />
+  <IressSkeleton
+    height\="150"
+    mode\="circle"
+    width\="150"
+  />
+  <IressSkeleton
+    height\="150"
+    mode\="text"
+    width\="150"
+  />
+</IressInline\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| height | 
+Sets the height of the skeleton bones. If no unit is specified it will default to pixels. Will be ignored when in `text` mode.
+
+string
+
+
+
+ | \- | 150 |
+| mode | 
+
+Mode of the skeleton. `rect` and `circle` must have `width` and `height` specified. `text` works with `textVariant`.
+
+union
+
+
+
+ | 
+
+'text'
+
+ | \- |
+| textVariant | 
+
+Use `textVariant` to specify what the Skeleton should emulate. If set to `h1` a non-break space with the same font-size and line-height of a h1 will be rendered.
+
+union
+
+
+
+ | \- | Set object |
+| width | 
+
+Sets the width of the skeleton bones. If no unit is specified it will default to pixels.
+
+string
+
+
+
+ | \- | 150 |

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

@@ -1,16 +1,16 @@
-[](#recipes)Recipes
-===================
+Recipes
+=======
 
-[](#iresscard)`IressCard`
--------------------------
+`IressCard`
+-----------
 
 A common use case of the skeleton component is within a card component. Below are some examples of how you might use `IressSkeleton` within `IressCard`.
 
-Toggle load
+[](./iframe.html?id=components-skeleton-recipes--card)
 
-Hide code
+Toggle load
 
-\[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; }
+```
 
 import { useState } from 'react';
 import {
@@ -69,8 +69,48 @@ export const SkeletonCard \= () \=> {
   );
 };
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| height | 
+Sets the height of the skeleton bones. If no unit is specified it will default to pixels. Will be ignored when in `text` mode.
+
+string
+
+
+
+ | \- | Set string |
+| mode | 
+
+Mode of the skeleton. `rect` and `circle` must have `width` and `height` specified. `text` works with `textVariant`.
+
+union
+
+
+
+ | 
+
+'text'
+
+ | Set object |
+| textVariant | 
+
+Use `textVariant` to specify what the Skeleton should emulate. If set to `h1` a non-break space with the same font-size and line-height of a h1 will be rendered.
+
+union
+
+
+
+ | \- | Set object |
+| width | 
+
+Sets the width of the skeleton bones. If no unit is specified it will default to pixels.
+
+string
+
 
-On this page
 
-*   [IressCard](#iresscard)
+ | \- | Set string |

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

@@ -1,20 +1,20 @@
-[](#skiplink)SkipLink
-=====================
+SkipLink
+========
 
 Overview
 --------
 
 The skip link component allows keyboard users to quickly bypass the top-level navigation links and jump to the main content on a page.
 
+[](./iframe.html?id=components-skiplink--skip-link)
+
 [Skip to content](#main)
 
 This is where the main content `id="main"` of the application is located. It is important that whatever your skip link is targeting is **focusable**. If its a non-interactive element, this can be done by adding `tabindex="-1"` to the element.
 
 The skip link is [hidden until it is focused](#skip-link).
 
-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; }
+```
 
 <IressContainer\>
   <IressSkipLink
@@ -25,7 +25,7 @@ Hide code
     }}
   />
   <main
-    className\="iress-u-container iress-u-text iress-u-panel ids-styles--highlight-on-focus-v5142"
+    className\="iress-u-container iress-u-text iress-u-panel ids-styles--highlight-on-focus-v5202"
     id\="main"
     tabIndex\={\-1}
   \>
@@ -52,15 +52,54 @@ Hide code
   </main\>
 </IressContainer\>
 
-Copy
+```
 
-[](#behaviour)Behaviour
------------------------
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Description of where the skip link jumps to.
+
+ReactNode
+
+
+
+ | 
+
+'Skip to content'
+
+ | Set object |
+| href | 
+
+The target of the skip link.
+
+string
 
-*   The skip link component is visually hidden until it is tabbed to.
 
-On this page
 
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Behaviour](#behaviour)
+ | \- | #main |
+| id | 
+
+Unique identifier for the skip link.
+
+string
+
+
+
+ | \- | skip-link |
+| targetId | 
+
+The target ID of the element that the link will skip to. If not provided, will fall back to the `href` property.
+
+string
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `href` with a `#` instead (eg. #main).</td></tr></tbody></table>
+
+ | \- | Set string |
+
+Behaviour
+---------
+
+*   The skip link component is visually hidden until it is tabbed to.