npm - @iress-oss/ids-mcp-server - Versions diffs - 6.0.0-alpha.1-canary-20251204032753-fe18cab → 6.0.0-alpha.1-canary-20251204040305-3639454 - Mend

@iress-oss/ids-mcp-server 6.0.0-alpha.1-canary-20251204032753-fe18cab → 6.0.0-alpha.1-canary-20251204040305-3639454

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 (99) hide show

package/generated/docs/components_components-icon-docs.md ADDED Viewed

@@ -0,0 +1,1017 @@
+Icon
+====
+Overview
+--------
+Icons enhance experiences by visually communicating meaning, actions, status, and feedback.
+* * *
+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-icon--default)
+```
+<IressIcon name\="home" />
+```
+Props
+-----
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| fixedWidth |
+Adds fixed width class for Font Awesome icons - fa-fw
+boolean
+ | \- | Set boolean |
+| flip |
+Flip the icon horizontally, vertically or both axes.
+union
+ | \- |
+horizontalverticalboth
+ |
+| name\* |
+The name of the icon
+IconName
+ | \- |
+"home"
+ |
+| rotate |
+Amount of degrees to rotate the icon.
+union
+ | \- |
+90180270
+ |
+| screenreaderText |
+Adds screen reader text if the icon needs to be visible to screen reader users
+string
+ | \- | Set string |
+| set |
+The icon set to be used:
+*   `fal`: Font Awesome Light
+*   `fab`: Font Awesome Brand
+union
+ |
+'fal'
+ |
+falfab
+ |
+| spin |
+Accepts a numeric value for speed for one rotation.
+union
+ | \- |
+123half
+ |
+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.
+<link
+  href\="https://cdn.iress.com/icons/5.15.4/css/combined.min.css"
+  rel\="stylesheet"
+/>
+```
+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
+---------
+### 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.
+[](./iframe.html?id=components-icon--screen-reader-text)
+```
+<IressIcon
+  name\="home"
+  screenreaderText\="Home"
+/>
+```
+#### Props
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| fixedWidth |
+Adds fixed width class for Font Awesome icons - fa-fw
+boolean
+ | \- | Set boolean |
+| flip |
+Flip the icon horizontally, vertically or both axes.
+union
+ | \- |
+horizontalverticalboth
+ |
+| name\* |
+The name of the icon
+IconName
+ | \- |
+"home"
+ |
+| rotate |
+Amount of degrees to rotate the icon.
+union
+ | \- |
+90180270
+ |
+| screenreaderText |
+Adds screen reader text if the icon needs to be visible to screen reader users
+string
+ | \- | Home |
+| set |
+The icon set to be used:
+*   `fal`: Font Awesome Light
+*   `fab`: Font Awesome Brand
+union
+ |
+'fal'
+ |
+falfab
+ |
+| spin |
+Accepts a numeric value for speed for one rotation.
+union
+ | \- |
+123half
+ |
+### Size
+The `size` prop has been removed. It will now inherit the size of the parent component.
+For larger icons, it is recommended to use `IressImage` with stylised illustrations.
+### Mode
+Mode has been removed. Please use the `color` prop instead.
+[](/?path=/docs/styling-props-colour--docs#color)
+[Learn more](/?path=/docs/styling-props-colour--docs#color)
+### Flip
+The `flip` prop can be set to horizontal, vertical or both.
+[](./iframe.html?id=components-icon--flip)
+(default)
+horizontal
+vertical
+both
+```
+<IressInline gap\="md"\>
+  <IressText textAlign\="center"\>
+    <IressIcon
+      name\="home"
+      textStyle\="typography.heading.1"
+    />
+    <br />
+    (default)  </IressText\>
+  <IressText textAlign\="center"\>
+    <IressIcon
+      flip\="horizontal"
+      name\="home"
+      textStyle\="typography.heading.1"
+    />
+    <br />
+    horizontal  </IressText\>
+  <IressText textAlign\="center"\>
+    <IressIcon
+      flip\="vertical"
+      name\="home"
+      textStyle\="typography.heading.1"
+    />
+    <br />
+    vertical  </IressText\>
+  <IressText textAlign\="center"\>
+    <IressIcon
+      flip\="both"
+      name\="home"
+      textStyle\="typography.heading.1"
+    />
+    <br />
+    both  </IressText\>
+</IressInline\>
+```
+#### Props
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| fixedWidth |
+Adds fixed width class for Font Awesome icons - fa-fw
+boolean
+ | \- | Set boolean |
+| flip |
+Flip the icon horizontally, vertically or both axes.
+union
+ | \- | \- |
+| name\* |
+The name of the icon
+IconName
+ | \- |
+"home"
+ |
+| rotate |
+Amount of degrees to rotate the icon.
+union
+ | \- |
+90180270
+ |
+| screenreaderText |
+Adds screen reader text if the icon needs to be visible to screen reader users
+string
+ | \- | Set string |
+| set |
+The icon set to be used:
+*   `fal`: Font Awesome Light
+*   `fab`: Font Awesome Brand
+union
+ |
+'fal'
+ |
+falfab
+ |
+| spin |
+Accepts a numeric value for speed for one rotation.
+union
+ | \- |
+123half
+ |
+| textStyle |
+string
+ | \- | typography.heading.1 |
+### Rotate
+The `rotate` prop can be set to 90, 180 or 270 degrees.
+[](./iframe.html?id=components-icon--rotate)
+(default)
+90
+180
+270
+```
+<IressInline gap\="md"\>
+  <IressText textAlign\="center"\>
+    <IressIcon
+      name\="home"
+      textStyle\="typography.heading.1"
+    />
+    <br />
+    (default)  </IressText\>
+  <IressText textAlign\="center"\>
+    <IressIcon
+      name\="home"
+      rotate\={90}
+      textStyle\="typography.heading.1"
+    />
+    <br />
+    90  </IressText\>
+  <IressText textAlign\="center"\>
+    <IressIcon
+      name\="home"
+      rotate\={180}
+      textStyle\="typography.heading.1"
+    />
+    <br />
+    180  </IressText\>
+  <IressText textAlign\="center"\>
+    <IressIcon
+      name\="home"
+      rotate\={270}
+      textStyle\="typography.heading.1"
+    />
+    <br />
+    270  </IressText\>
+</IressInline\>
+```
+#### Props
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| fixedWidth |
+Adds fixed width class for Font Awesome icons - fa-fw
+boolean
+ | \- | Set boolean |
+| flip |
+Flip the icon horizontally, vertically or both axes.
+union
+ | \- |
+horizontalverticalboth
+ |
+| name\* |
+The name of the icon
+IconName
+ | \- |
+"home"
+ |
+| rotate |
+Amount of degrees to rotate the icon.
+union
+ | \- | \- |
+| screenreaderText |
+Adds screen reader text if the icon needs to be visible to screen reader users
+string
+ | \- | Set string |
+| set |
+The icon set to be used:
+*   `fal`: Font Awesome Light
+*   `fab`: Font Awesome Brand
+union
+ |
+'fal'
+ |
+falfab
+ |
+| spin |
+Accepts a numeric value for speed for one rotation.
+union
+ | \- |
+123half
+ |
+| textStyle |
+string
+ | \- | typography.heading.1 |
+### 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.
+[](./iframe.html?id=components-icon--spin)
+half
+1
+2
+3
+```
+<IressInline gap\="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\>
+```
+#### Props
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| fixedWidth |
+Adds fixed width class for Font Awesome icons - fa-fw
+boolean
+ | \- | Set boolean |
+| flip |
+Flip the icon horizontally, vertically or both axes.
+union
+ | \- |
+horizontalverticalboth
+ |
+| name\* |
+The name of the icon
+IconName
+ | \- |
+"spinner"
+ |
+| rotate |
+Amount of degrees to rotate the icon.
+union
+ | \- |
+90180270
+ |
+| screenreaderText |
+Adds screen reader text if the icon needs to be visible to screen reader users
+string
+ | \- | Loading... |
+| set |
+The icon set to be used:
+*   `fal`: Font Awesome Light
+*   `fab`: Font Awesome Brand
+union
+ |
+'fal'
+ |
+falfab
+ |
+| spin |
+Accepts a numeric value for speed for one rotation.
+union
+ | \- | \- |
+### 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.
+[](./iframe.html?id=components-icon--fixed-width)
+Default width
+-------------
+Fixed width
+-----------
+```
+<IressInline gap\="md"\>
+  <div\>
+    <IressText
+      element\="h2"
+      textStyle\="typography.heading.5"
+    \>
+      Default width    </IressText\>
+    <IressIcon
+      bg\="colour.neutral.30"
+      name\="space-shuttle"
+      textStyle\="typography.heading.1"
+    />
+    <br />
+    <IressIcon
+      bg\="colour.neutral.30"
+      name\="wine-glass-alt"
+      textStyle\="typography.heading.1"
+    />
+  </div\>
+  <div\>
+    <IressText
+      element\="h2"
+      textStyle\="typography.heading.5"
+    \>
+      Fixed width    </IressText\>
+    <IressIcon
+      bg\="colour.neutral.30"
+      fixedWidth
+      name\="space-shuttle"
+      textStyle\="typography.heading.1"
+    />
+    <br />
+    <IressIcon
+      bg\="colour.neutral.30"
+      fixedWidth
+      name\="wine-glass-alt"
+      textStyle\="typography.heading.1"
+    />
+  </div\>
+</IressInline\>
+```
+#### Props
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| bg |
+string
+ | \- | colour.neutral.30 |
+| fixedWidth |
+Adds fixed width class for Font Awesome icons - fa-fw
+boolean
+ | \- | \- |
+| flip |
+Flip the icon horizontally, vertically or both axes.
+union
+ | \- |
+horizontalverticalboth
+ |
+| name\* |
+The name of the icon
+IconName
+ | \- | \- |
+| rotate |
+Amount of degrees to rotate the icon.
+union
+ | \- |
+90180270
+ |
+| screenreaderText |
+Adds screen reader text if the icon needs to be visible to screen reader users
+string
+ | \- | Set string |
+| set |
+The icon set to be used:
+*   `fal`: Font Awesome Light
+*   `fab`: Font Awesome Brand
+union
+ |
+'fal'
+ |
+falfab
+ |
+| spin |
+Accepts a numeric value for speed for one rotation.
+union
+ | \- |
+123half
+ |
+| textStyle |
+string
+ | \- | typography.heading.1 |
+Examples
+--------
+### External link
+Icons now inherit the size of the parent component. This means you can use them inside buttons, links and other components without needing to set a size.
+[](./iframe.html?id=components-icon--external-link)
+[Go to this link](https://www.iress.com/)
+```
+<IressText\>
+  <a
+    href\="https://www.iress.com/"
+    rel\="noreferrer"
+    target\="\_blank"
+  \>
+    Go to this link    <IressIcon
+      name\="external-link"
+      pl\="spacing.150"
+    />
+  </a\>
+</IressText\>
+```
+#### Props
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| fixedWidth |
+Adds fixed width class for Font Awesome icons - fa-fw
+boolean
+ | \- | Set boolean |
+| flip |
+Flip the icon horizontally, vertically or both axes.
+union
+ | \- |
+horizontalverticalboth
+ |
+| name\* |
+The name of the icon
+IconName
+ | \- |
+"external-link"
+ |
+| pl |
+string
+ | \- | spacing.150 |
+| rotate |
+Amount of degrees to rotate the icon.
+union
+ | \- |
+90180270
+ |
+| screenreaderText |
+Adds screen reader text if the icon needs to be visible to screen reader users
+string
+ | \- | Set string |
+| set |
+The icon set to be used:
+*   `fal`: Font Awesome Light
+*   `fab`: Font Awesome Brand
+union
+ |
+'fal'
+ |
+falfab
+ |
+| spin |
+Accepts a numeric value for speed for one rotation.
+union
+ | \- |
+123half
+ |