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

@@ -0,0 +1,467 @@
+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.
+
+* * *
+
+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-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. Not allowed when in `text` mode.
+
+unknown
+
+
+
+ | \- | Set object |
+| mode | 
+
+Mode of the skeleton. `rect` and `circle` must have `width` and `height` specified. `text` works with `textStyle`.
+
+TMode
+
+
+
+ | \- | Set object |
+| textStyle | 
+
+Use `textStyle` 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.
+
+IressCSSProps\['textStyle'\]
+
+ | \- | 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 gap\="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. Not allowed when in `text` mode.
+
+unknown
+
+
+
+ | \- | \- |
+| mode | 
+
+Mode of the skeleton. `rect` and `circle` must have `width` and `height` specified. `text` works with `textStyle`.
+
+TMode
+
+
+
+ | \- | \- |
+| textStyle | 
+
+Use `textStyle` 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.
+
+IressCSSProps\['textStyle'\]
+
+ | \- | 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,
+} from '@iress-oss/ids-components';
+import { TEXT\_STYLES } from '@theme-preset/tokens/textStyles';
+export const SkeletonText \= () \=> {
+  const \[loading, setLoading\] \= useState(true);
+  return (
+    <IressStack gap\="md"\>
+      <IressButton onClick\={() \=> setLoading(!loading)}\>
+        Toggle load      </IressButton\>
+      <IressStack gap\="md"\>
+        {TEXT\_STYLES.map((textStyle) \=> \[
+          loading && <IressSkeleton {...{
+  mode: 'text',
+}} textStyle\={textStyle} />,
+          !loading && <IressText textStyle\={textStyle}\>{textStyle}</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. Not allowed when in `text` mode.
+
+unknown
+
+
+
+ | \- | Set object |
+| mode | 
+
+Mode of the skeleton. `rect` and `circle` must have `width` and `height` specified. `text` works with `textStyle`.
+
+TMode
+
+
+
+ | \- | 
+
+"text"
+
+ |
+| textStyle | 
+
+Use `textStyle` 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.
+
+IressCSSProps\['textStyle'\]
+
+ | \- | Set object |
+| textVariant | 
+
+\-
+
+ | \- | \- |
+| 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% width and 100px 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 \= (<'rect'\>) \=> {
+  const \[loading, setLoading\] \= useState(true);
+  return (
+    <IressStack gap\="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. Not allowed when in `text` mode.
+
+unknown
+
+
+
+ | \- | 
+
+"150"
+
+ |
+| mode | 
+
+Mode of the skeleton. `rect` and `circle` must have `width` and `height` specified. `text` works with `textStyle`.
+
+TMode
+
+
+
+ | \- | 
+
+"rect"
+
+ |
+| textStyle | 
+
+Use `textStyle` 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.
+
+IressCSSProps\['textStyle'\]
+
+ | \- | 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% width and 100px 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 \= (<'circle'\>) \=> {
+  const \[loading, setLoading\] \= useState(true);
+  return (
+    <IressStack gap\="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. Not allowed when in `text` mode.
+
+unknown
+
+
+
+ | \- | 
+
+"150"
+
+ |
+| mode | 
+
+Mode of the skeleton. `rect` and `circle` must have `width` and `height` specified. `text` works with `textStyle`.
+
+TMode
+
+
+
+ | \- | 
+
+"circle"
+
+ |
+| textStyle | 
+
+Use `textStyle` 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.
+
+IressCSSProps\['textStyle'\]
+
+ | \- | 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 gap\="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. Not allowed when in `text` mode.
+
+unknown
+
+
+
+ | \- | 
+
+"150"
+
+ |
+| mode | 
+
+Mode of the skeleton. `rect` and `circle` must have `width` and `height` specified. `text` works with `textStyle`.
+
+TMode
+
+
+
+ | \- | \- |
+| textStyle | 
+
+Use `textStyle` 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.
+
+IressCSSProps\['textStyle'\]
+
+ | \- | 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_components-skeleton-recipes-docs.md

@@ -0,0 +1,110 @@
+Recipes
+=======
+
+`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`.
+
+[](./iframe.html?id=components-skeleton-recipes--card)
+
+Toggle load
+
+```
+
+import { useState } from 'react';
+import {
+  IressButton,
+  IressCard,
+  IressSkeleton,
+  IressStack,
+  IressText,
+} from '@iress-oss/ids-components';
+const CARD\_LINE\_SIZES \= \['100%', '91%', '95%', '89%', '83%'\];
+const CardLoading \= () \=> (
+  <IressCard
+    heading\={<IressSkeleton textStyle\="typography.heading.4" width\="75%" />}
+    media\={<IressSkeleton mode\="rect" height\="200" />}
+    stretch
+  \>
+    <IressStack gap\="md"\>
+      <IressStack gap\="xs"\>
+        {CARD\_LINE\_SIZES.map((size) \=> (
+          <IressSkeleton key\={\`${size}\-1\`} width\={size} />
+        ))}
+      </IressStack\>
+      <IressStack gap\="xs"\>
+        {CARD\_LINE\_SIZES.map((size) \=> (
+          <IressSkeleton key\={\`${size}\-2\`} width\={size} />
+        ))}
+      </IressStack\>
+    </IressStack\>
+  </IressCard\>
+);
+const CardItem \= () \=> (
+  <IressCard
+    heading\={<h4\>This is the card heading</h4\>}
+    media\={
+      <img
+        src\="https://www.iress.com/media/images/media-contact.width-600.png"
+        alt\=""
+      />
+    }
+  \>
+    <IressText element\="p"\>
+      Non cupiditate, libero ex, voluptates ea ipsum deleniti sequi sed eveniet      ab enim sunt itaque qui ullam, adipisci quo expedita laboriosam deserunt?    </IressText\>
+    <IressText element\="p"\>
+      Impedit, quasi voluptas quae quibusdam officiis corporis. Distinctio et      aspernatur quo atque non enim, recusandae at, eum dicta ullam commodi modi      debitis.    </IressText\>
+  </IressCard\>
+);
+export const SkeletonCard \= () \=> {
+  const \[loading, setLoading\] \= useState(true);
+  return (
+    <IressStack gap\="md"\>
+      <IressButton onClick\={() \=> setLoading(!loading)}\>
+        Toggle load      </IressButton\>
+      {loading && <CardLoading />}
+      {!loading && <CardItem />}
+    </IressStack\>
+  );
+};
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| height | 
+Sets the height of the skeleton bones. If no unit is specified it will default to pixels. Not allowed when in `text` mode.
+
+unknown
+
+
+
+ | \- | Set object |
+| mode | 
+
+Mode of the skeleton. `rect` and `circle` must have `width` and `height` specified. `text` works with `textStyle`.
+
+TMode
+
+
+
+ | \- | Set object |
+| textStyle | 
+
+Use `textStyle` 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.
+
+IressCSSProps\['textStyle'\]
+
+ | \- | Set object |
+| width | 
+
+Sets the width of the skeleton bones. If no unit is specified it will default to pixels.
+
+string
+
+
+
+ | \- | Set string |