@iress-oss/ids-mcp-server 0.0.1-dev.4 → 0.0.1

package/{generated/docs → docs/ids}/foundations-colours-docs.md

@@ -3,7 +3,7 @@
 
 Colour is an integral aspect of conveying clear concise data. Our colours are optimized across two backgrounds, meeting or exceeding [WCAG 2.1 Level AA Accessibility Guidelines](https://www.w3.org/TR/WCAG21/#contrast-minimum).
 
-The Iress themes are designed to meet WCAG contrast guidelines (2.1 AA). We can't guarantee this when consumer branding is applied, so colour combinations should be checked to ensure conformance.
+The Iress themes are designed to meet WCAG contrast guidelines. We can't guarantee this when consumer branding is applied, so colour combinations should be checked to ensure conformance.
 
 [](#backgrounds)Backgrounds
 ---------------------------

package/{generated/docs → docs/ids}/foundations-typography-docs.md

@@ -1,7 +1,7 @@
 [](#typography)Typography
 =========================
 
-Typography is set up as part of the theming. Typography is controlled by the `IressText` component and the `iress-u-text` utility class. They implement consistent line heights and font weights.
+Typography is set up as part of the theming. Typography is controlled by the `IressText` component and the `iress-u-text` utility class.
 
 Typography styles are designed to be encapsulated. If you want text to pick up the Iress styling, you'll need to wrap it in an `IressText` component.
 
@@ -38,7 +38,7 @@ Copy
 [](#headings)Headings
 ---------------------
 
-Headings form the structure of a web page. They're designed to stand out visually, drawing a user's eye to distinct sections of the document. They can be set in a variety of sizes based on systematic font sizing with native heading scales (H1-H6).
+Headings form the structure of a web page. They're designed to stand out visually, drawing a user's eye to distinct sections of the document. They can be set in a variety of sizes, with level 1 headings being the largest.
 
 Hello, we are a company that puts clients first.
 ================================================
@@ -154,7 +154,6 @@ IDS also includes bold, italic and small text variants.
 *   Bold text should be used to **draw attention** to part of a sentence, or to provide a visual label for readonly text.
 *   Italic text should be used to add _emphasis_ to content, or to add stress to part of a sentence.
 *   Small text is used for side comments or for text that's secondary to the main content.
-*   Muted text is used to de-emphasise content, such as when displaying informative text that is not critical to the user experience.
 
 Bold text
 
@@ -162,8 +161,6 @@ Italic text
 
 Small text
 
-Muted text
-
 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; }
@@ -175,8 +172,6 @@ Hide code
     Italic text  </IressText\>
   <IressText variant\="small"\>
     Small text  </IressText\>
-  <IressText mode\="muted"\>
-    Muted text  </IressText\>
 </IressStack\>
 
 Copy

package/docs/ids/get-started-develop-docs.md

@@ -0,0 +1,48 @@
+[](#develop)Develop
+===================
+
+Set up your environment to use the latest version of the Iress Design System (IDS). You can use this library to build React applications that align to IDS, and ensure a consistent and modern look and feel across all Iress products.
+
+[](#requirements)Requirements
+-----------------------------
+
+*   [React 17 or later](https://reactjs.org/)
+*   Access to Iress Artifactory
+
+[](#set-up-the-component-library)Set up the component library
+-------------------------------------------------------------
+
+1.  Install using: `yarn add @iress/ids-components`
+2.  Import the styles: `import '@iress/ids-components/dist/style.css'`
+3.  Import the components: `import { IressButton, IressText } from '@iress/ids-components'`
+4.  Use the components: `<IressButton>Click me</IressButton>`
+
+[](#set-up-the-theme)Set up the theme
+-------------------------------------
+
+The component library comes with the white label theme by default. You can add a theme by importing the theme file and including it in your application.
+
+Microfrontends
+--------------
+
+If you are building a React App that is intended to be used as a microfrontend, please skip this step. Microfrontends should inherit the parent application's theme, and not define a theme itself, as it may conflict with other microfrontends in the same parent application.
+
+1.  Install using `yarn add @iress/ids-themes`
+2.  Import the component: `import { IressTheme } from '@iress/ids-themes'`
+3.  Add the component to your application: `<IressTheme name="iress-beta-theme-light" />`.
+
+For alternative ways to import the theme, see the [Themes documentation](./?path=/docs/themes-introduction--docs).
+
+[](#set-up-the-icons)Set up the icons
+-------------------------------------
+
+If you are planning to use the `<IressIcon />` component, you need to include the Font Awesome CSS in your application.
+
+You can do this by including the Font Awesome CSS [via the Iress CDN](./?path=/docs/components-icon--docs#installation).
+
+On this page
+
+*   [Requirements](#requirements)
+*   [Set up the component library](#set-up-the-component-library)
+*   [Set up the theme](#set-up-the-theme)
+*   [Set up the icons](#set-up-the-icons)

package/{generated/docs → docs/ids}/introduction-docs.md

@@ -1,11 +1,11 @@
-[](#iress-design-system)Iress Design System
-===========================================
+[](#iress-design-system-ids)Iress Design System (IDS)
+=====================================================
 
-5.15.0
+5.13.0
 
 * * *
 
-The Iress Design System (IDS) serves as a shared visual language, working code, design tools and resources, human interface guidelines, and a community of contributors. It supports designers and developers building digital products for both B2B (Financial Advisors, Paraplanners) and B2B2C (client customers) segments.
+IDS consists of a shared visual language, working code, design tools and resources, human interface guidelines, and a community of contributors. It serves a wide range of designers and developers building digital products and experiences.
 
 [](#whats-new)What's new?
 -------------------------

package/{generated/docs → docs/ids}/patterns-loading-docs.md

@@ -206,7 +206,7 @@ Apart from using the `IressLoading` component, there are a few things you need t
 
 The `IressLoading` component is designed to create a seamless experience for users when loading content. They have been designed to meet best practices and improve user perception of loading times.
 
-![Wait times less than 1 second, no loading indicator. Short wait times (1-3 seconds), use a loading indicator. Long wait times (3-10 seconds), use a loading indicator and provide feedback. Wait times longer than 10 seconds should be a background process.](/@fs/app/packages/components/src/patterns/Loading/assets/ux-collective-loading-time-matrix.webp)
+![Wait times less than 1 second, no loading indicator. Short wait times (1-3 seconds), use a loading indicator. Long wait times (3-10 seconds), use a loading indicator and provide feedback. Wait times longer than 10 seconds should be a background process.](/@fs/Users/ming.fang/code/design-system/packages/components/src/patterns/Loading/assets/ux-collective-loading-time-matrix.webp)
 
 Image © [UX Collective](https://uxdesign.cc/loading-progress-indicators-ui-components-series-f4b1fc35339a)
 
@@ -254,7 +254,7 @@ New component
 
 This component is new, please provide feedback to the IDS team if you encounter any issues.
 
-![](/@fs/app/packages/components/src/patterns/Loading/mocks/retirement-graph.png)
+![](/@fs/Users/ming.fang/code/design-system/packages/components/src/patterns/Loading/mocks/retirement-graph.png)
 
 Update
 
@@ -607,289 +607,6 @@ Hide codeRefresh
 
 Copy
 
-[](#suspense)Suspense
----------------------
-
-Since React 18, React has introduced a new way to handle loading states using `Suspense`, allowing you to lazy load components in an efficient manner.
-
-The `IressLoadingSuspense` component is a wrapper around the `IressLoading` component that uses `Suspense` to handle loading states. It is used in the same way as the `IressLoading` component, however you do not need to pass the `loaded` prop or use the `IressLoading.shouldRender` hook. The `IressLoadingSuspense` component will automatically handle the loading state for you.
-
-The wizard example can be translated to use `IressLoadingSuspense` as follows (it includes the slow and fast examples).
-
-**Differences in behaviour**
-
-*   The `IressLoadingSuspense` component will automatically handle the loading state for you, so you do not need to pass the `loaded` prop or use the `IressLoading.shouldRender` hook.
-*   Nested suspense components will be handled by the highest `IressLoadingSuspense` component. This means that if you have multiple nested `IressLoadingSuspense` components, only the top most one will display a loading state. You can see this in the example when you click the Next button, you no longer see the component loading pattern due to it being nested under the page loading pattern.
-
-Hide codeRefresh
-
-\[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; }
-
-interface PageProps {
-  setPage: (page: number) \=> void;
-}
-interface ChartProps {
-  money: number | null;
-}
-const API \= {
-  getHomePage: async () \=> {
-    await new Promise((resolve) \=> {
-      setTimeout(resolve, 3000);
-    });
-    return 1;
-  },
-  getRetirementIncomeProjection: async () \=> {
-    await new Promise((resolve) \=> {
-      setTimeout(resolve, 2000);
-    });
-    return true;
-  },
-  getChart: async () \=> {
-    await new Promise((resolve) \=> {
-      const chartImage \= new Image();
-      chartImage.src \= retirementGraph;
-      setTimeout(resolve, 1000);
-    });
-    return true;
-  },
-  chartUpdate: async () \=>
-    new Promise<boolean\>((resolve) \=> {
-      // Simulate a slow network request.
-      setTimeout(() \=> {
-        resolve(true);
-      }, 2000);
-    }),
-};
-const Graph \= () \=> (
-  <img
-    src\={retirementGraph}
-    alt\=""
-    style\={{ maxWidth: '100%', height: 'auto' }}
-  />
-);
-const Chart \= () \=> {
-  const initialChart \= IressLoadingSuspense.use(API.getChart);
-  const \[updatedChart, setUpdatedChart\] \= useState<boolean | undefined\>();
-  const \[money, setMoney\] \= useState<number | null\>(null);
-  const \[updating, setUpdating\] \= useState(false);
-  const deferredMoney \= useDeferredValue(money);
-  const chart \= updatedChart ?? initialChart;
-  useEffect(() \=> {
-    if (deferredMoney \=== null) {
-      return;
-    }
-    setUpdating(() \=> true);
-    const update \= async () \=> {
-      const newChart \= await API.chartUpdate();
-      setUpdatedChart(newChart);
-      setUpdating(() \=> false);
-    };
-    void update();
-  }, \[deferredMoney\]);
-  return (
-    <IressLoadingSuspense pattern\="component" update\={updating}\>
-      {chart && <Graph />}
-      <IressPanel\>
-        <IressForm<ChartProps>          onSubmit={(projectionData) \=> setMoney(projectionData.money)}
-        >          <IressStack gutter\="md"\>
-            <h3\>Update projection</h3\>
-            <IressFormField
-              name\="money"
-              label\="My money"
-              render\={(controlledProps) \=> (
-                <IressInputCurrency {...controlledProps} />
-              )}
-            />
-            <IressButton type\="submit"\>Update projection</IressButton\>
-          </IressStack\>
-        </IressForm\>
-      </IressPanel\>
-    </IressLoadingSuspense\>
-  );
-};
-const StartPage \= ({ setPage }: PageProps) \=> (
-  <IressText\>
-    <h2\>Maximise your retirement</h2\>
-    <p\>
-      Maximize your retirement in Australia by contributing to your super early      and making voluntary top-ups to benefit from compounding. Take advantage      of employer contributions, government co-contributions, and tax benefits.      Diversify your investments and review your strategy regularly to stay on      track. Consider additional income streams and seek professional advice for      a secure future.    </p\>
-    <hr />
-    <IressButton onClick\={() \=> setPage(2)}\>Next</IressButton\>
-  </IressText\>
-);
-const RetirementIncomeProjectionPage \= () \=> {
-  const promise \= API.getRetirementIncomeProjection;
-  IressLoadingSuspense.use(promise);
-  IressLoadingSuspense.uncache(promise);
-  return (
-    <IressText\>
-      <h2\>Retirement Income Projection</h2\>
-      <p\>
-        We've got enough information to provide you with a retirement income        projection. This will help you understand how much you can expect to        receive in retirement based on your current super balance, your        contributions, and your investment strategy.      </p\>
-      <Chart />
-    </IressText\>
-  );
-};
-const HomePage \= () \=> {
-  const promise \= API.getHomePage;
-  const startPage \= IressLoadingSuspense.use(promise);
-  IressLoadingSuspense.uncache(promise);
-  const \[movedPage, setMovedPage\] \= useState<number | undefined\>();
-  const page \= movedPage ?? startPage;
-  return (
-    <IressContainer style\={{ maxWidth: '600px', paddingBlock: '3rem' }}\>
-      {page \=== 1 && (
-        <IressLoadingSuspense pattern\="page" template\="form"\>
-          {page \=== 1 && <StartPage setPage\={setMovedPage} />}
-        </IressLoadingSuspense\>
-      )}
-      {page \=== 2 && (
-        <IressLoadingSuspense pattern\="page" template\="form"\>
-          <RetirementIncomeProjectionPage />
-        </IressLoadingSuspense\>
-      )}
-    </IressContainer\>
-  );
-};
-export const LoadingSuspenseWizard \= () \=> (
-  <IressLoadingSuspense pattern\="start-up"\>
-    <HomePage />
-  </IressLoadingSuspense\>
-);
-
-Copy
-
-Hide codeRefresh
-
-\[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; }
-
-interface PageProps {
-  setPage: (page: number) \=> void;
-}
-interface ChartProps {
-  money: number | null;
-}
-const API \= {
-  getHomePage: async () \=> {
-    await new Promise((resolve) \=> {
-      setTimeout(resolve, 500);
-    });
-    return 1;
-  },
-  getRetirementIncomeProjection: async () \=> {
-    await new Promise((resolve) \=> {
-      setTimeout(resolve, 200);
-    });
-    return true;
-  },
-  getChart: async () \=> {
-    await new Promise((resolve) \=> {
-      const chartImage \= new Image();
-      chartImage.onload \= resolve;
-      chartImage.src \= retirementGraph;
-    });
-    return true;
-  },
-  chartUpdate: async () \=>
-    new Promise<boolean\>((resolve) \=> {
-      setTimeout(() \=> {
-        resolve(true);
-      }, 200);
-    }),
-};
-const Graph \= () \=> (
-  <img
-    src\={retirementGraph}
-    alt\=""
-    style\={{ maxWidth: '100%', height: 'auto' }}
-  />
-);
-const Chart \= () \=> {
-  const initialChart \= IressLoadingSuspense.use(API.getChart);
-  const \[updatedChart, setUpdatedChart\] \= useState<boolean | undefined\>();
-  const \[money, setMoney\] \= useState<number | null\>(null);
-  const \[updating, setUpdating\] \= useState(false);
-  const deferredMoney \= useDeferredValue(money);
-  const chart \= updatedChart ?? initialChart;
-  useEffect(() \=> {
-    if (deferredMoney \=== null) {
-      return;
-    }
-    setUpdating(() \=> true);
-    const update \= async () \=> {
-      const newChart \= await API.chartUpdate();
-      setUpdatedChart(newChart);
-      setUpdating(() \=> false);
-    };
-    void update();
-  }, \[deferredMoney\]);
-  return (
-    <IressLoadingSuspense pattern\="component" update\={updating}\>
-      {chart && <Graph />}
-      <IressPanel\>
-        <IressForm<ChartProps>          onSubmit={(projectionData) \=> setMoney(projectionData.money)}
-        >          <IressStack gutter\="md"\>
-            <h3\>Update projection</h3\>
-            <IressFormField
-              name\="money"
-              label\="My money"
-              render\={(controlledProps) \=> (
-                <IressInputCurrency {...controlledProps} />
-              )}
-            />
-            <IressButton type\="submit"\>Update projection</IressButton\>
-          </IressStack\>
-        </IressForm\>
-      </IressPanel\>
-    </IressLoadingSuspense\>
-  );
-};
-const StartPage \= ({ setPage }: PageProps) \=> (
-  <IressText\>
-    <h2\>Maximise your retirement</h2\>
-    <p\>
-      Maximize your retirement in Australia by contributing to your super early      and making voluntary top-ups to benefit from compounding. Take advantage      of employer contributions, government co-contributions, and tax benefits.      Diversify your investments and review your strategy regularly to stay on      track. Consider additional income streams and seek professional advice for      a secure future.    </p\>
-    <hr />
-    <IressButton onClick\={() \=> setPage(2)}\>Next</IressButton\>
-  </IressText\>
-);
-const RetirementIncomeProjectionPage \= () \=> {
-  IressLoadingSuspense.use(API.getRetirementIncomeProjection);
-  return (
-    <IressText\>
-      <h2\>Retirement Income Projection</h2\>
-      <p\>
-        We've got enough information to provide you with a retirement income        projection. This will help you understand how much you can expect to        receive in retirement based on your current super balance, your        contributions, and your investment strategy.      </p\>
-      <Chart />
-    </IressText\>
-  );
-};
-const HomePage \= () \=> {
-  const startPage \= IressLoadingSuspense.use(API.getHomePage);
-  const \[movedPage, setMovedPage\] \= useState<number | undefined\>();
-  const page \= movedPage ?? startPage;
-  return (
-    <IressContainer style\={{ maxWidth: '600px', paddingBlock: '3rem' }}\>
-      {page \=== 1 && (
-        <IressLoadingSuspense pattern\="page" template\="form"\>
-          {page \=== 1 && <StartPage setPage\={setMovedPage} />}
-        </IressLoadingSuspense\>
-      )}
-      {page \=== 2 && (
-        <IressLoadingSuspense pattern\="page" template\="form"\>
-          <RetirementIncomeProjectionPage />
-        </IressLoadingSuspense\>
-      )}
-    </IressContainer\>
-  );
-};
-export const LoadingSuspenseWizardFast \= () \=> (
-  <IressLoadingSuspense pattern\="start-up"\>
-    <HomePage />
-  </IressLoadingSuspense\>
-);
-
-Copy
-
 [](#hooks)Hooks
 ---------------
 
@@ -924,51 +641,6 @@ else return <IressText\>Content is loaded</IressText\>;
 
 Copy
 
-### [](#iressloadingsuspenseuse)`IressLoadingSuspense.use`
-
-The `IressLoadingSuspense.use` hook is a polyfill for the React 19 `use` hook, allowing you to have similar functionality in React 18. It is used to handle loading states when using `IressLoadingSuspense`.
-
-It is not as smart as the `use` hook in React 19, it will cache the result of the promise and will not re-fetch the data if the component is re-mounted. You can clear a function's results in the cache by using the `IressLoadingSuspense.uncache` function.
-
-Avoid in React 19
------------------
-
-If you are using React 19, it is recommended to use the built-in `use` hook instead of this one. In future releases, this hook will be deprecated and removed from the library.
-
-\[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;
-}
-
-const HomePage \= () \=> {
-  const pageData \= IressLoadingSuspense.use(API.fetchPage('home'));
-  return (
-    <IressText\>
-      <h2\>{pageData.title}</h2\>
-      <p\>{pageData.description}</p\>
-    </IressText\>
-  );
-};
-export const App \= () \=> (
-  <IressLoadingSuspense pattern\="start-up"\>
-    <HomePage />
-  </IressLoadingSuspense\>
-);
-
-Copy
-
 [](#examples)Examples
 ---------------------
 
@@ -1296,9 +968,7 @@ On this page
     *   [page](#page)
     *   [start-up](#start-up)
     *   [validate](#validate)
-*   [Suspense](#suspense)
 *   [Hooks](#hooks)
     *   [IressLoading.shouldRender](#iressloadingshouldrender)
-    *   [IressLoadingSuspense.use](#iressloadingsuspenseuse)
 *   [Examples](#examples)
     *   [Wizard](#wizard)