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

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

@@ -1,214 +0,0 @@
-[](#skeleton)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.
-
-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; }
-
-<IressSkeleton />
-
-Copy
-
-[](#examples)Examples
----------------------
-
-### [](#modes)Modes
-
-The `mode` prop can be set to `text` (default), `rect` or `circle`.
-
-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"\>
-  <IressSkeleton mode\="text" />
-  <IressSkeleton
-    height\="100px"
-    mode\="rect"
-  />
-  <IressSkeleton
-    height\="100px"
-    mode\="circle"
-    width\="100px"
-  />
-</IressStack\>
-
-Copy
-
-### [](#text)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.
-
-Toggle load
-
-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; }
-
-import { useState } from 'react';
-import {
-  IressButton,
-  IressSkeleton,
-  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\>
-  );
-};
-
-Copy
-
-### [](#rect)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`).
-
-Toggle load
-
-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; }
-
-import { useState } from 'react';
-import {
-  IressButton,
-  IressPlaceholder,
-  IressSkeleton,
-  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\>
-  );
-};
-
-Copy
-
-### [](#circle)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`).
-
-Toggle load
-
-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; }
-
-import { useState } from 'react';
-import {
-  IressButton,
-  IressPlaceholder,
-  IressSkeleton,
-  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\>
-  );
-};
-
-Copy
-
-### [](#size)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.
-
-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; }
-
-<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\>
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Examples](#examples)
-    *   [Modes](#modes)
-    *   [Text](#text)
-    *   [Rect](#rect)
-    *   [Circle](#circle)
-    *   [Size](#size)