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

package/generated/docs/components_components-alert-docs.md

@@ -0,0 +1,1054 @@
+Alert
+=====
+
+Overview
+--------
+
+An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.
+
+* * *
+
+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-alert--default)
+
+This is a simple info alert
+
+```
+
+<IressAlert
+  footer\=""
+  heading\=""
+  status\="info"
+\>
+  This is a simple info alert
+</IressAlert\>
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| actions | 
+Actions to display in the alert. These will be rendered as buttons with opinionated styling. If you want to use custom buttons, use the `footer` prop instead.
+
+Omit<IressButtonProps, 'mode' | 'status'>\[\]
+
+ | \- | Set object |
+| children | 
+
+Contents of the alert. Is automatically wrapped in `<IressText />` and will inherit its styling.
+
+ReactNode
+
+
+
+ | \- | 
+
+"This is a simple info alert"
+
+ |
+| defaultDismissed | 
+
+Contents of the alert. Is automatically wrapped in `<IressText />` and will inherit its styling.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| dismissed | 
+
+Contents of the alert. Is automatically wrapped in `<IressText />` and will inherit its styling.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| footer | 
+
+Buttons and controls for the alert.
+
+ReactNode
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `actions` instead for buttons with opinionated styling. If you need other footer content, use the `children` prop instead.</td></tr></tbody></table>
+
+ | \- | 
+
+""
+
+ |
+| heading | 
+
+Text for alert heading. If a string, it will use a heading with level 2.
+
+ReactNode
+
+
+
+ | \- | 
+
+""
+
+ |
+| icon | 
+
+Icon to display in the alert. If set to `false`, no icon will be displayed. If not provided, the icon will be determined by the `status` prop.
+
+union
+
+
+
+ | \- | Set object |
+| onDismiss | 
+
+Icon to display in the alert. If set to `false`, no icon will be displayed. If not provided, the icon will be determined by the `status` prop.
+
+IressCloseButtonProps\['onClick'\]
+
+ | \- | Set object |
+| status | 
+
+Alert type - danger, info, success or warning.
+
+SystemValidationStatuses
+
+
+
+ | 
+
+'info'
+
+ | 
+
+"info"
+
+ |
+| variant | 
+
+Variants of the alert, allowing it to be styled differently based on where its used in the application.
+
+*   Sidebar: The icon will be aligned to the heading, and the text will appear below the icon.
+*   Site-wide: The border will be removed, except for the bottom border.
+
+union
+
+
+
+ | \- | 
+
+sidebarsite-wide
+
+ |
+
+Examples
+--------
+
+### Status
+
+The alert offers four statuses that set a distinctive colour and icon. They can be set using the `status` prop. Their different use cases are described here.
+
+[](./iframe.html?id=components-alert--status)
+
+This is a simple danger alert. It is used for errors and malfunctions that must be resolved before moving forward, such as a summary of errors to correct in a Form.
+
+This is a simple info alert. It is used to provide context around a situation, such as rules around creating a compliant password, or a link to feature documentation or onboarding tips.
+
+This is a simple success alert. It is used to communicate that an action has been successfully completed, such as saving changes in a Form.
+
+This is a simple warning alert. It is used for a message requiring attention but not resolution in order to continue, such as noting data is not current or your password is about to expire.
+
+```
+
+<IressStack gap\="md"\>
+  <IressAlert
+    footer\=""
+    heading\=""
+    status\="danger"
+  \>
+    This is a simple danger alert. It is used for errors and malfunctions that must be resolved before moving forward, such as a summary of errors to correct in a Form.  </IressAlert\>
+  <IressAlert
+    footer\=""
+    heading\=""
+    status\="info"
+  \>
+    This is a simple info alert. It is used to provide context around a situation, such as rules around creating a compliant password, or a link to feature documentation or onboarding tips.  </IressAlert\>
+  <IressAlert
+    footer\=""
+    heading\=""
+    status\="success"
+  \>
+    This is a simple success alert. It is used to communicate that an action has been successfully completed, such as saving changes in a Form.  </IressAlert\>
+  <IressAlert
+    footer\=""
+    heading\=""
+    status\="warning"
+  \>
+    This is a simple warning alert. It is used for a message requiring attention but not resolution in order to continue, such as noting data is not current or your password is about to expire.  </IressAlert\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| actions | 
+Actions to display in the alert. These will be rendered as buttons with opinionated styling. If you want to use custom buttons, use the `footer` prop instead.
+
+Omit<IressButtonProps, 'mode' | 'status'>\[\]
+
+ | \- | Set object |
+| children | 
+
+Contents of the alert. Is automatically wrapped in `<IressText />` and will inherit its styling.
+
+ReactNode
+
+
+
+ | \- | \- |
+| defaultDismissed | 
+
+Contents of the alert. Is automatically wrapped in `<IressText />` and will inherit its styling.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| dismissed | 
+
+Contents of the alert. Is automatically wrapped in `<IressText />` and will inherit its styling.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| footer | 
+
+Buttons and controls for the alert.
+
+ReactNode
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `actions` instead for buttons with opinionated styling. If you need other footer content, use the `children` prop instead.</td></tr></tbody></table>
+
+ | \- | 
+
+""
+
+ |
+| heading | 
+
+Text for alert heading. If a string, it will use a heading with level 2.
+
+ReactNode
+
+
+
+ | \- | 
+
+""
+
+ |
+| icon | 
+
+Icon to display in the alert. If set to `false`, no icon will be displayed. If not provided, the icon will be determined by the `status` prop.
+
+union
+
+
+
+ | \- | Set object |
+| onDismiss | 
+
+Icon to display in the alert. If set to `false`, no icon will be displayed. If not provided, the icon will be determined by the `status` prop.
+
+IressCloseButtonProps\['onClick'\]
+
+ | \- | Set object |
+| status | 
+
+Alert type - danger, info, success or warning.
+
+SystemValidationStatuses
+
+
+
+ | 
+
+'info'
+
+ | \- |
+| variant | 
+
+Variants of the alert, allowing it to be styled differently based on where its used in the application.
+
+*   Sidebar: The icon will be aligned to the heading, and the text will appear below the icon.
+*   Site-wide: The border will be removed, except for the bottom border.
+
+union
+
+
+
+ | \- | 
+
+sidebarsite-wide
+
+ |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+### Heading
+
+An alert can be displayed with a heading. This is controlled by the `heading` prop. If provided a string, it will display a `<h2 />` element with the string as its content. If provided a React element, it will display that element directly.
+
+**Note**: The `heading` prop replaces the `headingText` and `headingLevel` props from previous versions of IDS. These prop are now deprecated and will be removed in a future version.
+
+[](./iframe.html?id=components-alert--heading)
+
+Alert heading
+-------------
+
+This is a simple info alert
+
+```
+
+<IressAlert
+  footer\=""
+  heading\="Alert heading"
+  status\="info"
+\>
+  This is a simple info alert
+</IressAlert\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| actions | 
+Actions to display in the alert. These will be rendered as buttons with opinionated styling. If you want to use custom buttons, use the `footer` prop instead.
+
+Omit<IressButtonProps, 'mode' | 'status'>\[\]
+
+ | \- | Set object |
+| children | 
+
+Contents of the alert. Is automatically wrapped in `<IressText />` and will inherit its styling.
+
+ReactNode
+
+
+
+ | \- | 
+
+"This is a simple info alert"
+
+ |
+| defaultDismissed | 
+
+Contents of the alert. Is automatically wrapped in `<IressText />` and will inherit its styling.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| dismissed | 
+
+Contents of the alert. Is automatically wrapped in `<IressText />` and will inherit its styling.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| footer | 
+
+Buttons and controls for the alert.
+
+ReactNode
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `actions` instead for buttons with opinionated styling. If you need other footer content, use the `children` prop instead.</td></tr></tbody></table>
+
+ | \- | 
+
+""
+
+ |
+| heading | 
+
+Text for alert heading. If a string, it will use a heading with level 2.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Alert heading"
+
+ |
+| icon | 
+
+Icon to display in the alert. If set to `false`, no icon will be displayed. If not provided, the icon will be determined by the `status` prop.
+
+union
+
+
+
+ | \- | Set object |
+| onDismiss | 
+
+Icon to display in the alert. If set to `false`, no icon will be displayed. If not provided, the icon will be determined by the `status` prop.
+
+IressCloseButtonProps\['onClick'\]
+
+ | \- | Set object |
+| status | 
+
+Alert type - danger, info, success or warning.
+
+SystemValidationStatuses
+
+
+
+ | 
+
+'info'
+
+ | 
+
+"info"
+
+ |
+| variant | 
+
+Variants of the alert, allowing it to be styled differently based on where its used in the application.
+
+*   Sidebar: The icon will be aligned to the heading, and the text will appear below the icon.
+*   Site-wide: The border will be removed, except for the bottom border.
+
+union
+
+
+
+ | \- | 
+
+sidebarsite-wide
+
+ |
+
+### Actions
+
+The `actions` prop allows you to display call to action buttons within the alert. This is useful for providing users with options to take action based on the alert message.
+
+[](./iframe.html?id=components-alert--footer)
+
+Alert heading
+-------------
+
+Here is the warning
+
+Action
+
+```
+
+<IressAlert
+  actions\={\[
+    {
+      children: 'Action',
+      onClick: () \=> {}
+    }
+  \]}
+  heading\="Alert heading"
+\>
+  <IressText\>
+    Here is the warning  </IressText\>
+</IressAlert\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| actions | 
+Actions to display in the alert. These will be rendered as buttons with opinionated styling. If you want to use custom buttons, use the `footer` prop instead.
+
+Omit<IressButtonProps, 'mode' | 'status'>\[\]
+
+ | \- | 
+
+RAW
+
+*   actions :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 2 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| children | 
+
+Contents of the alert. Is automatically wrapped in `<IressText />` and will inherit its styling.
+
+ReactNode
+
+
+
+ | \- | 
+
+RAW
+
+children :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : ({ className, ...restProps }) => { \_s(); const Component = useMemo( () => styled(restProps.element ?? "div", text), \[restProps.element\] ); return /\* @\_\_PURE\_\_ \*/ jsxDEV( Component, { ...restProps, className: cx(className, GlobalCSSClass.Text) }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Text/Text.tsx", lineNumber: 46, columnNumber: 5 }, this ); }
+*   key : null
+*   props :
+    
+    {...} 1 key
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| defaultDismissed | 
+
+Contents of the alert. Is automatically wrapped in `<IressText />` and will inherit its styling.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| dismissed | 
+
+Contents of the alert. Is automatically wrapped in `<IressText />` and will inherit its styling.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| footer | 
+
+Buttons and controls for the alert.
+
+ReactNode
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `actions` instead for buttons with opinionated styling. If you need other footer content, use the `children` prop instead.</td></tr></tbody></table>
+
+ | \- | Set object |
+| heading | 
+
+Text for alert heading. If a string, it will use a heading with level 2.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Alert heading"
+
+ |
+| icon | 
+
+Icon to display in the alert. If set to `false`, no icon will be displayed. If not provided, the icon will be determined by the `status` prop.
+
+union
+
+
+
+ | \- | Set object |
+| onDismiss | 
+
+Icon to display in the alert. If set to `false`, no icon will be displayed. If not provided, the icon will be determined by the `status` prop.
+
+IressCloseButtonProps\['onClick'\]
+
+ | \- | Set object |
+| status | 
+
+Alert type - danger, info, success or warning.
+
+SystemValidationStatuses
+
+
+
+ | 
+
+'info'
+
+ | Set object |
+| variant | 
+
+Variants of the alert, allowing it to be styled differently based on where its used in the application.
+
+*   Sidebar: The icon will be aligned to the heading, and the text will appear below the icon.
+*   Site-wide: The border will be removed, except for the bottom border.
+
+union
+
+
+
+ | \- | 
+
+sidebarsite-wide
+
+ |
+
+### Icon
+
+The `icon` prop allows you to customise the icon displayed in the alert. It accepts a string for the icon name, or can be set to `false` to remove the icon entirely.
+
+[](./iframe.html?id=components-alert--icon)
+
+Some information
+----------------
+
+This is an alert without an icon
+
+```
+
+<IressAlert
+  heading\="Some information"
+\>
+  This is an alert without an icon
+</IressAlert\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| actions | 
+Actions to display in the alert. These will be rendered as buttons with opinionated styling. If you want to use custom buttons, use the `footer` prop instead.
+
+Omit<IressButtonProps, 'mode' | 'status'>\[\]
+
+ | \- | Set object |
+| children | 
+
+Contents of the alert. Is automatically wrapped in `<IressText />` and will inherit its styling.
+
+ReactNode
+
+
+
+ | \- | 
+
+"This is an alert without an icon"
+
+ |
+| defaultDismissed | 
+
+Contents of the alert. Is automatically wrapped in `<IressText />` and will inherit its styling.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| dismissed | 
+
+Contents of the alert. Is automatically wrapped in `<IressText />` and will inherit its styling.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| footer | 
+
+Buttons and controls for the alert.
+
+ReactNode
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `actions` instead for buttons with opinionated styling. If you need other footer content, use the `children` prop instead.</td></tr></tbody></table>
+
+ | \- | Set object |
+| heading | 
+
+Text for alert heading. If a string, it will use a heading with level 2.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Some information"
+
+ |
+| icon | 
+
+Icon to display in the alert. If set to `false`, no icon will be displayed. If not provided, the icon will be determined by the `status` prop.
+
+union
+
+
+
+ | \- | 
+
+false
+
+ |
+| onDismiss | 
+
+Icon to display in the alert. If set to `false`, no icon will be displayed. If not provided, the icon will be determined by the `status` prop.
+
+IressCloseButtonProps\['onClick'\]
+
+ | \- | Set object |
+| status | 
+
+Alert type - danger, info, success or warning.
+
+SystemValidationStatuses
+
+
+
+ | 
+
+'info'
+
+ | Set object |
+| variant | 
+
+Variants of the alert, allowing it to be styled differently based on where its used in the application.
+
+*   Sidebar: The icon will be aligned to the heading, and the text will appear below the icon.
+*   Site-wide: The border will be removed, except for the bottom border.
+
+union
+
+
+
+ | \- | 
+
+sidebarsite-wide
+
+ |
+
+### Variants
+
+The alert can be displayed in different variants to suit different use cases. The `variant` prop allows you to set the variant of the alert. The available variants are:
+
+*   `sidebar`: The alert is displayed in the sidebar of the page, typically used for informational messages on longer forms.
+*   `site-wide`: The alert is displayed in the site-wide banner, typically used for important messages that need to be seen by all users.
+
+[](./iframe.html?id=components-alert--variant)
+
+Did you know?
+-------------
+
+You can use the alert component in different ways.
+
+Did you know?
+-------------
+
+You can use the alert component in different ways.
+
+```
+
+<IressStack gap\="md"\>
+  <IressAlert
+    heading\="Did you know?"
+    variant\="sidebar"
+  \>
+    You can use the alert component in different ways.  </IressAlert\>
+  <IressAlert
+    heading\="Did you know?"
+    variant\="site-wide"
+  \>
+    You can use the alert component in different ways.  </IressAlert\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| actions | 
+Actions to display in the alert. These will be rendered as buttons with opinionated styling. If you want to use custom buttons, use the `footer` prop instead.
+
+Omit<IressButtonProps, 'mode' | 'status'>\[\]
+
+ | \- | Set object |
+| children | 
+
+Contents of the alert. Is automatically wrapped in `<IressText />` and will inherit its styling.
+
+ReactNode
+
+
+
+ | \- | 
+
+"You can use the alert component in different ways."
+
+ |
+| defaultDismissed | 
+
+Contents of the alert. Is automatically wrapped in `<IressText />` and will inherit its styling.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| dismissed | 
+
+Contents of the alert. Is automatically wrapped in `<IressText />` and will inherit its styling.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| footer | 
+
+Buttons and controls for the alert.
+
+ReactNode
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `actions` instead for buttons with opinionated styling. If you need other footer content, use the `children` prop instead.</td></tr></tbody></table>
+
+ | \- | Set object |
+| heading | 
+
+Text for alert heading. If a string, it will use a heading with level 2.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Did you know?"
+
+ |
+| icon | 
+
+Icon to display in the alert. If set to `false`, no icon will be displayed. If not provided, the icon will be determined by the `status` prop.
+
+union
+
+
+
+ | \- | 
+
+false
+
+ |
+| onDismiss | 
+
+Icon to display in the alert. If set to `false`, no icon will be displayed. If not provided, the icon will be determined by the `status` prop.
+
+IressCloseButtonProps\['onClick'\]
+
+ | \- | Set object |
+| status | 
+
+Alert type - danger, info, success or warning.
+
+SystemValidationStatuses
+
+
+
+ | 
+
+'info'
+
+ | Set object |
+| variant | 
+
+Variants of the alert, allowing it to be styled differently based on where its used in the application.
+
+*   Sidebar: The icon will be aligned to the heading, and the text will appear below the icon.
+*   Site-wide: The border will be removed, except for the bottom border.
+
+union
+
+
+
+ | \- | 
+
+sidebarsite-wide
+
+ |
+
+### Dimissable
+
+The alert can be made dismissable by setting the `onDismiss` prop. This will display a close button in the top right corner of the alert, allowing users to dismiss it.
+
+[](./iframe.html?id=components-alert--dismissable)
+
+This is a simple info alert
+
+```
+
+<IressAlert
+  footer\=""
+  heading\=""
+  onDismiss\={() \=> {}}
+  status\="info"
+\>
+  This is a simple info alert
+</IressAlert\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| actions | 
+Actions to display in the alert. These will be rendered as buttons with opinionated styling. If you want to use custom buttons, use the `footer` prop instead.
+
+Omit<IressButtonProps, 'mode' | 'status'>\[\]
+
+ | \- | Set object |
+| children | 
+
+Contents of the alert. Is automatically wrapped in `<IressText />` and will inherit its styling.
+
+ReactNode
+
+
+
+ | \- | 
+
+"This is a simple info alert"
+
+ |
+| defaultDismissed | 
+
+Contents of the alert. Is automatically wrapped in `<IressText />` and will inherit its styling.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| dismissed | 
+
+Contents of the alert. Is automatically wrapped in `<IressText />` and will inherit its styling.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| footer | 
+
+Buttons and controls for the alert.
+
+ReactNode
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `actions` instead for buttons with opinionated styling. If you need other footer content, use the `children` prop instead.</td></tr></tbody></table>
+
+ | \- | 
+
+""
+
+ |
+| heading | 
+
+Text for alert heading. If a string, it will use a heading with level 2.
+
+ReactNode
+
+
+
+ | \- | 
+
+""
+
+ |
+| icon | 
+
+Icon to display in the alert. If set to `false`, no icon will be displayed. If not provided, the icon will be determined by the `status` prop.
+
+union
+
+
+
+ | \- | Set object |
+| onDismiss | 
+
+Icon to display in the alert. If set to `false`, no icon will be displayed. If not provided, the icon will be determined by the `status` prop.
+
+IressCloseButtonProps\['onClick'\]
+
+ | \- | 
+
+ |
+| status | 
+
+Alert type - danger, info, success or warning.
+
+SystemValidationStatuses
+
+
+
+ | 
+
+'info'
+
+ | 
+
+"info"
+
+ |
+| variant | 
+
+Variants of the alert, allowing it to be styled differently based on where its used in the application.
+
+*   Sidebar: The icon will be aligned to the heading, and the text will appear below the icon.
+*   Site-wide: The border will be removed, except for the bottom border.
+
+union
+
+
+
+ | \- | 
+
+sidebarsite-wide
+
+ |