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_components-icon-docs.md ADDED Viewed

@@ -0,0 +1,1337 @@
+Icon
+====
+Overview
+--------
+Icons enhance experiences by visually communicating meaning, actions, status, and feedback.
+[](./iframe.html?id=components-icon--default)
+Hide codedrawOpen in CodeSandbox
+<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 or vertically
+union
+ | \- | Set object |
+| mode |
+Allows control of the icon color
+union
+ | \- | Set object |
+| name\* |
+The name of the icon
+string
+ | \- | home |
+| rotate |
+Amount of degrees to rotate the icon
+union
+ | \- | Set object |
+| 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
+union
+ |
+'fal'
+ | Set object |
+| size |
+Re-size the icon using the `IconSize` enum, based on FontAwesome's size classes
+union
+ | \- | Set object |
+| spin |
+Accepts a numeric value for speed for one rotation.
+union
+ | \- | Set object |
+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)
+Hide codedrawOpen in CodeSandbox
+<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 or vertically
+union
+ | \- | Set object |
+| mode |
+Allows control of the icon color
+union
+ | \- | Set object |
+| name\* |
+The name of the icon
+string
+ | \- | home |
+| rotate |
+Amount of degrees to rotate the icon
+union
+ | \- | Set object |
+| 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
+union
+ |
+'fal'
+ | Set object |
+| size |
+Re-size the icon using the `IconSize` enum, based on FontAwesome's size classes
+union
+ | \- | Set object |
+| spin |
+Accepts a numeric value for speed for one rotation.
+union
+ | \- | Set object |
+### Size
+The `size` prop can be used to control sizing of the icon.
+[](./iframe.html?id=components-icon--size)
+xs
+sm
+lg
+2x
+3x
+5x
+7x
+10x
+Hide codedrawOpen in CodeSandbox
+<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\>
+```
+#### Props
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| fixedWidth |
+Adds fixed width class for Font Awesome icons - fa-fw
+boolean
+ | \- | Set boolean |
+| flip |
+Flip the icon horizontally or vertically
+union
+ | \- | Set object |
+| mode |
+Allows control of the icon color
+union
+ | \- | Set object |
+| name\* |
+The name of the icon
+string
+ | \- | home |
+| rotate |
+Amount of degrees to rotate the icon
+union
+ | \- | Set object |
+| 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
+union
+ |
+'fal'
+ | Set object |
+| size |
+Re-size the icon using the `IconSize` enum, based on FontAwesome's size classes
+union
+ | \- | \- |
+| spin |
+Accepts a numeric value for speed for one rotation.
+union
+ | \- | Set object |
+### 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.
+[](./iframe.html?id=components-icon--mode)
+danger
+info
+muted
+primary
+success
+warning
+positive
+negative
+Hide codedrawOpen in CodeSandbox
+<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\>
+```
+#### Props
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| fixedWidth |
+Adds fixed width class for Font Awesome icons - fa-fw
+boolean
+ | \- | Set boolean |
+| flip |
+Flip the icon horizontally or vertically
+union
+ | \- | Set object |
+| mode |
+Allows control of the icon color
+union
+ | \- | \- |
+| name\* |
+The name of the icon
+string
+ | \- | home |
+| rotate |
+Amount of degrees to rotate the icon
+union
+ | \- | Set object |
+| 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
+union
+ |
+'fal'
+ | Set object |
+| size |
+Re-size the icon using the `IconSize` enum, based on FontAwesome's size classes
+union
+ | \- |
+"5x"
+ |
+| spin |
+Accepts a numeric value for speed for one rotation.
+union
+ | \- | Set object |
+### Flip
+The `flip` prop can be set to horizontal, vertical or both.
+[](./iframe.html?id=components-icon--flip)
+original
+horizontal
+vertical
+both
+Hide codedrawOpen in CodeSandbox
+<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\>
+```
+#### Props
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| fixedWidth |
+Adds fixed width class for Font Awesome icons - fa-fw
+boolean
+ | \- | Set boolean |
+| flip |
+Flip the icon horizontally or vertically
+union
+ | \- | \- |
+| mode |
+Allows control of the icon color
+union
+ | \- | Set object |
+| name\* |
+The name of the icon
+string
+ | \- | home |
+| rotate |
+Amount of degrees to rotate the icon
+union
+ | \- | Set object |
+| 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
+union
+ |
+'fal'
+ | Set object |
+| size |
+Re-size the icon using the `IconSize` enum, based on FontAwesome's size classes
+union
+ | \- |
+"5x"
+ |
+| spin |
+Accepts a numeric value for speed for one rotation.
+union
+ | \- | Set object |
+### Rotate
+The `rotate` prop can be set to 90, 180 or 270 degrees.
+[](./iframe.html?id=components-icon--rotate)
+original
+90
+180
+270
+Hide codedrawOpen in CodeSandbox
+<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\>
+```
+#### Props
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| fixedWidth |
+Adds fixed width class for Font Awesome icons - fa-fw
+boolean
+ | \- | Set boolean |
+| flip |
+Flip the icon horizontally or vertically
+union
+ | \- | Set object |
+| mode |
+Allows control of the icon color
+union
+ | \- | Set object |
+| name\* |
+The name of the icon
+string
+ | \- | 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
+union
+ |
+'fal'
+ | Set object |
+| size |
+Re-size the icon using the `IconSize` enum, based on FontAwesome's size classes
+union
+ | \- |
+"5x"
+ |
+| spin |
+Accepts a numeric value for speed for one rotation.
+union
+ | \- | Set object |
+### 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
+Hide codedrawOpen in CodeSandbox
+<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\>
+```
+#### Props
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| fixedWidth |
+Adds fixed width class for Font Awesome icons - fa-fw
+boolean
+ | \- | Set boolean |
+| flip |
+Flip the icon horizontally or vertically
+union
+ | \- | Set object |
+| mode |
+Allows control of the icon color
+union
+ | \- | Set object |
+| name\* |
+The name of the icon
+string
+ | \- | spinner |
+| rotate |
+Amount of degrees to rotate the icon
+union
+ | \- | Set object |
+| 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
+union
+ |
+'fal'
+ | Set object |
+| size |
+Re-size the icon using the `IconSize` enum, based on FontAwesome's size classes
+union
+ | \- | Set object |
+| 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
+-----------
+Hide codedrawOpen in CodeSandbox
+<IressInline gutter\="md"\>
+  <div\>
+    <IressText
+      element\="h2"
+      variant\="h5"
+    \>
+      Default width    </IressText\>
+    <IressIcon
+      className\="ids-styles--alt-background-v5203"
+      name\="space-shuttle"
+      size\="3x"
+    />
+    <br />
+    <IressIcon
+      className\="ids-styles--alt-background-v5203"
+      name\="wine-glass-alt"
+      size\="3x"
+    />
+  </div\>
+  <div\>
+    <IressText
+      element\="h2"
+      variant\="h5"
+    \>
+      Fixed width    </IressText\>
+    <IressIcon
+      className\="ids-styles--alt-background-v5203"
+      fixedWidth
+      name\="space-shuttle"
+      size\="3x"
+    />
+    <br />
+    <IressIcon
+      className\="ids-styles--alt-background-v5203"
+      fixedWidth
+      name\="wine-glass-alt"
+      size\="3x"
+    />
+  </div\>
+</IressInline\>
+```
+#### Props
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| fixedWidth |
+Adds fixed width class for Font Awesome icons - fa-fw
+boolean
+ | \- | \- |
+| flip |
+Flip the icon horizontally or vertically
+union
+ | \- | Set object |
+| mode |
+Allows control of the icon color
+union
+ | \- | Set object |
+| name\* |
+The name of the icon
+string
+ | \- | \- |
+| rotate |
+Amount of degrees to rotate the icon
+union
+ | \- | Set object |
+| 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
+union
+ |
+'fal'
+ | Set object |
+| size |
+Re-size the icon using the `IconSize` enum, based on FontAwesome's size classes
+union
+ | \- |
+"3x"
+ |
+| spin |
+Accepts a numeric value for speed for one rotation.
+union
+ | \- | Set object |
+Examples
+--------
+### 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`:
+[](./iframe.html?id=components-icon--external-link)
+[Go to this link:](https://www.iress.com/)
+Hide codedrawOpen in CodeSandbox
+<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\>
+```
+#### Props
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| fixedWidth |
+Adds fixed width class for Font Awesome icons - fa-fw
+boolean
+ | \- | Set boolean |
+| flip |
+Flip the icon horizontally or vertically
+union
+ | \- | Set object |
+| mode |
+Allows control of the icon color
+union
+ | \- | Set object |
+| name\* |
+The name of the icon
+string
+ | \- | Set string |
+| rotate |
+Amount of degrees to rotate the icon
+union
+ | \- | Set object |
+| 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
+union
+ |
+'fal'
+ | Set object |
+| size |
+Re-size the icon using the `IconSize` enum, based on FontAwesome's size classes
+union
+ | \- | Set object |
+| spin |
+Accepts a numeric value for speed for one rotation.
+union
+ | \- | Set object |