npm - @iress-oss/ids-mcp-server - Versions diffs - 5.15.0 → 5.20.2 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (134) hide show

package/generated/docs/components-icon-docs.md DELETED Viewed

@@ -1,553 +0,0 @@
-[](#icon)Icon
-=============
-Overview
---------
-Icons enhance experiences by visually communicating meaning, actions, status, and feedback.
-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; }
-<IressIcon name\="home" />
-Copy
-[](#installation)Installation
------------------------------
-If you are planning to include the `<IressIcon />` component in your application, you need to include the Font Awesome CSS.
-The easiest way to import the Font Awesome CSS is to use the `combined.css` file and add it to the `<head />` if your application. This file includes both the [Pro Light](https://fontawesome.com/v5/search?o=r&s=light) and [Brand](https://fontawesome.com/v5/search?o=r&f=brands) icon sets.
-Microfrontends
---------------
-If you are using a Microfrontend, you need to include the Font Awesome CSS in the parent application as well as the Microfrontend. This is because `@font-face` declarations are not supported inside the Shadow DOM.
-\[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;
-}
-<link
-  href\="https://cdn.iress.com/icons/5.15.4/css/combined.min.css"
-  rel\="stylesheet"
-/>
-Copy
-[](#supported-library-sets-and-names)Supported library sets and names
----------------------------------------------------------------------
-`IressIcon` currently supports Font Awesome (V5) [Light](https://fontawesome.com/v5/search?o=r&s=light) and [Brand](https://fontawesome.com/v5/search?o=r&f=brands) sets. The library sets are controlled by the `set` prop and it defaults to the Light set (`fal`).
-The `name` prop controls which icon is shown, and needs to match the icon name exactly as displayed on the [Font Awesome website](https://fontawesome.com/v5/search). Icon names should be lower case, and separated by hyphens where required; for example `home-alt` or `check-circle.` Icon names should not include the `fa-` prefix.
-[](#behaviour)Behaviour
------------------------
-### [](#screen-reader-text)Screen Reader Text
-By default icons are hidden from screen readers. The `screenreaderText` prop makes icons visible to screen readers users, providing a description of the icon.
-If you use an icon to improve the visual appeal of content, for example by replacing the default list icons with tick marks when listing product features, you don't need to add any screen reader text.
-If you use an icon to convey meaning, for example using an icon as the only content inside a button, you do need to supply a value for the `screenreaderText`; if you don't the button meaning will be completely lost for screen reader users.
-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; }
-<IressIcon
-  name\="home"
-  screenreaderText\="Home"
-/>
-Copy
-### [](#size)Size
-The `size` prop can be used to control sizing of the icon.
-xs
-sm
-lg
-2x
-3x
-5x
-7x
-10x
-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"
-  verticalAlign\="bottom"
-\>
-  <div\>
-    <IressIcon
-      name\="home"
-      size\="xs"
-    />
-    <IressText align\="center"\>
-      xs    </IressText\>
-  </div\>
-  <div\>
-    <IressIcon
-      name\="home"
-      size\="sm"
-    />
-    <IressText align\="center"\>
-      sm    </IressText\>
-  </div\>
-  <div\>
-    <IressIcon
-      name\="home"
-      size\="lg"
-    />
-    <IressText align\="center"\>
-      lg    </IressText\>
-  </div\>
-  <div\>
-    <IressIcon
-      name\="home"
-      size\="2x"
-    />
-    <IressText align\="center"\>
-      2x    </IressText\>
-  </div\>
-  <div\>
-    <IressIcon
-      name\="home"
-      size\="3x"
-    />
-    <IressText align\="center"\>
-      3x    </IressText\>
-  </div\>
-  <div\>
-    <IressIcon
-      name\="home"
-      size\="5x"
-    />
-    <IressText align\="center"\>
-      5x    </IressText\>
-  </div\>
-  <div\>
-    <IressIcon
-      name\="home"
-      size\="7x"
-    />
-    <IressText align\="center"\>
-      7x    </IressText\>
-  </div\>
-  <div\>
-    <IressIcon
-      name\="home"
-      size\="10x"
-    />
-    <IressText align\="center"\>
-      10x    </IressText\>
-  </div\>
-</IressInline\>
-Copy
-### [](#mode)Mode
-The `mode` prop can be used to set the colour of the icon to these predefined mode colours: Body, Muted, Primary, Info, Success, Warning, Danger, Positive and Negative.
-danger
-info
-muted
-primary
-success
-warning
-positive
-negative
-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"\>
-  <div\>
-    <IressIcon
-      mode\="danger"
-      name\="home"
-      size\="5x"
-    />
-    <IressText align\="center"\>
-      danger    </IressText\>
-  </div\>
-  <div\>
-    <IressIcon
-      mode\="info"
-      name\="home"
-      size\="5x"
-    />
-    <IressText align\="center"\>
-      info    </IressText\>
-  </div\>
-  <div\>
-    <IressIcon
-      mode\="muted"
-      name\="home"
-      size\="5x"
-    />
-    <IressText align\="center"\>
-      muted    </IressText\>
-  </div\>
-  <div\>
-    <IressIcon
-      mode\="primary"
-      name\="home"
-      size\="5x"
-    />
-    <IressText align\="center"\>
-      primary    </IressText\>
-  </div\>
-  <div\>
-    <IressIcon
-      mode\="success"
-      name\="home"
-      size\="5x"
-    />
-    <IressText align\="center"\>
-      success    </IressText\>
-  </div\>
-  <div\>
-    <IressIcon
-      mode\="warning"
-      name\="home"
-      size\="5x"
-    />
-    <IressText align\="center"\>
-      warning    </IressText\>
-  </div\>
-  <div\>
-    <IressIcon
-      mode\="positive"
-      name\="home"
-      size\="5x"
-    />
-    <IressText align\="center"\>
-      positive    </IressText\>
-  </div\>
-  <div\>
-    <IressIcon
-      mode\="negative"
-      name\="home"
-      size\="5x"
-    />
-    <IressText align\="center"\>
-      negative    </IressText\>
-  </div\>
-</IressInline\>
-Copy
-### [](#flip)Flip
-The `flip` prop can be set to horizontal, vertical or both.
-original
-horizontal
-vertical
-both
-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"\>
-  <div\>
-    <IressIcon
-      name\="home"
-      size\="5x"
-    />
-    <IressText align\="center"\>
-      original    </IressText\>
-  </div\>
-  <div\>
-    <IressIcon
-      flip\="horizontal"
-      name\="home"
-      size\="5x"
-    />
-    <IressText align\="center"\>
-      horizontal    </IressText\>
-  </div\>
-  <div\>
-    <IressIcon
-      flip\="vertical"
-      name\="home"
-      size\="5x"
-    />
-    <IressText align\="center"\>
-      vertical    </IressText\>
-  </div\>
-  <div\>
-    <IressIcon
-      flip\="both"
-      name\="home"
-      size\="5x"
-    />
-    <IressText align\="center"\>
-      both    </IressText\>
-  </div\>
-</IressInline\>
-Copy
-### [](#rotate)Rotate
-The `rotate` prop can be set to 90, 180 or 270 degrees.
-original
-90
-180
-270
-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"\>
-  <div\>
-    <IressIcon
-      name\="home"
-      size\="5x"
-    />
-    <IressText align\="center"\>
-      original    </IressText\>
-  </div\>
-  <div\>
-    <IressIcon
-      name\="home"
-      rotate\="90"
-      size\="5x"
-    />
-    <IressText align\="center"\>
-      90    </IressText\>
-  </div\>
-  <div\>
-    <IressIcon
-      name\="home"
-      rotate\="180"
-      size\="5x"
-    />
-    <IressText align\="center"\>
-      180    </IressText\>
-  </div\>
-  <div\>
-    <IressIcon
-      name\="home"
-      rotate\="270"
-      size\="5x"
-    />
-    <IressText align\="center"\>
-      270    </IressText\>
-  </div\>
-</IressInline\>
-Copy
-### [](#spin)Spin
-The `spin` prop can be set to half (fastest), 1, 2 or 3 (slowest) to control the speed of the icon spin animation, useful for loading spinners.
-half
-1
-2
-3
-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"\>
-  <IressText\>
-    <IressIcon
-      name\="spinner"
-      screenreaderText\="Loading..."
-      spin\="half"
-    />
-    {' '}half
-  </IressText\>
-  <IressText\>
-    <IressIcon
-      name\="spinner"
-      screenreaderText\="Loading..."
-      spin\="1"
-    />
-    {' '}1
-  </IressText\>
-  <IressText\>
-    <IressIcon
-      name\="spinner"
-      screenreaderText\="Loading..."
-      spin\="2"
-    />
-    {' '}2
-  </IressText\>
-  <IressText\>
-    <IressIcon
-      name\="spinner"
-      screenreaderText\="Loading..."
-      spin\="3"
-    />
-    {' '}3
-  </IressText\>
-</IressInline\>
-Copy
-### [](#fixed-width)Fixed Width
-Because of the wide variety of Font Awesome icons, not every icon is the same size. This can cause alignment issued when the icons stack vertically, so you can use the `fixedWidth` prop to ensure each icon is the same width. Very useful when using icons in menus.
-Default width
--------------
-Fixed width
------------
-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"\>
-  <div\>
-    <IressText
-      element\="h2"
-      variant\="h5"
-    \>
-      Default width    </IressText\>
-    <IressIcon
-      className\="ids-styles--alt-background-v5150"
-      name\="space-shuttle"
-      size\="3x"
-    />
-    <br />
-    <IressIcon
-      className\="ids-styles--alt-background-v5150"
-      name\="wine-glass-alt"
-      size\="3x"
-    />
-  </div\>
-  <div\>
-    <IressText
-      element\="h2"
-      variant\="h5"
-    \>
-      Fixed width    </IressText\>
-    <IressIcon
-      className\="ids-styles--alt-background-v5150"
-      fixedWidth
-      name\="space-shuttle"
-      size\="3x"
-    />
-    <br />
-    <IressIcon
-      className\="ids-styles--alt-background-v5150"
-      fixedWidth
-      name\="wine-glass-alt"
-      size\="3x"
-    />
-  </div\>
-</IressInline\>
-Copy
-[](#examples)Examples
----------------------
-### [](#external-link)External link
-Version 4 of IDS included some bespoke styles to make an "external link" icon in an `IressText` component look nice. We've removed these in V5 as we found they were having unintended side effects. If you still wish to style your external link icons, you can use either some custom CSS (like below) or simply make the icon size `xs`:
-[Go to this link:](https://www.iress.com/)
-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; }
-<IressText\>
-  <a
-    href\="https://www.iress.com/"
-    rel\="noreferrer"
-    target\="\_blank"
-  \>
-    Go to this link:    <IressIcon
-      name\="external-link"
-      size\="xs"
-      style\={{
-        'inset-block-start': '-0.25em',
-        'margin-inline-start': 'var(--iress-g-spacing-xs, var(--iress-default-spacing-xs))',
-        position: 'relative'
-      }}
-    />
-  </a\>
-</IressText\>
-Copy
-On this page
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Installation](#installation)
-*   [Supported library sets and names](#supported-library-sets-and-names)
-*   [Behaviour](#behaviour)
-    *   [Screen Reader Text](#screen-reader-text)
-    *   [Size](#size)
-    *   [Mode](#mode)
-    *   [Flip](#flip)
-    *   [Rotate](#rotate)
-    *   [Spin](#spin)
-    *   [Fixed Width](#fixed-width)
-*   [Examples](#examples)
-    *   [External link](#external-link)