@iress-oss/ids-mcp-server 0.0.1-dev.0

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

@@ -0,0 +1,76 @@
+[](#recipes)Recipes
+===================
+
+[](#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
+
+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,
+  IressCard,
+  IressSkeleton,
+  IressStack,
+  IressText,
+} from '@iress-oss/ids-components';
+const CARD\_LINE\_SIZES \= \['100%', '91%', '95%', '89%', '83%'\];
+const CardLoading \= () \=> (
+  <IressCard
+    heading\={<IressSkeleton textVariant\="h4" width\="75%" />}
+    media\={<IressSkeleton mode\="rect" height\="200" />}
+    stretch
+  \>
+    <IressStack gutter\="md"\>
+      <IressStack gutter\="xs"\>
+        {CARD\_LINE\_SIZES.map((size) \=> (
+          <IressSkeleton key\={\`${size}\-1\`} width\={size} />
+        ))}
+      </IressStack\>
+      <IressStack gutter\="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\={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\={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 gutter\="md"\>
+      <IressButton onClick\={() \=> setLoading(!loading)}\>
+        Toggle load      </IressButton\>
+      {loading && <CardLoading />}
+      {!loading && <CardItem />}
+    </IressStack\>
+  );
+};
+
+Copy
+
+On this page
+
+*   [IressCard](#iresscard)

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

@@ -0,0 +1,66 @@
+[](#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.
+
+[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
+    href\="#main"
+    id\="skip-link"
+    style\={{
+      '--iress-transform': 'translateX(-50%) translateY(-175%)'
+    }}
+  />
+  <main
+    className\="iress-u-container iress-u-text iress-u-panel ids-styles--highlight-on-focus-v5142"
+    id\="main"
+    tabIndex\={\-1}
+  \>
+    <p\>
+      This is where the main content{' '}
+      <code\>
+        id="main"      </code\>
+      {' '}of the application is located. It is important that whatever your skip link is targeting is{' '}
+      <strong\>
+        focusable      </strong\>
+      . If its a non-interactive element, this can be done by adding{' '}
+      <code\>
+        tabindex="-1"      </code\>
+      {' '}to the element.
+    </p\>
+    <p\>
+      The skip link is{' '}
+      <a
+        href\="#skip-link"
+        onClick\={(e) \=> {e.preventDefault();document.getElementById("skip-link")?.focus();}}
+      \>
+        hidden until it is focused      </a\>
+      .    </p\>
+  </main\>
+</IressContainer\>
+
+Copy
+
+[](#behaviour)Behaviour
+-----------------------
+
+*   The skip link component is visually hidden until it is tabbed to.
+
+On this page
+
+*   [Overview](#overview)
+*   [Props](#props)
+*   [Behaviour](#behaviour)