@iress-oss/ids-mcp-server 5.14.2 → 5.20.1

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

@@ -0,0 +1,492 @@
+Alert
+=====
+
+Overview
+--------
+
+An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.
+
+[](./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 |
+| --- | --- | --- | --- |
+| children | 
+Contents of the alert. Is automatically wrapped in `<IressText />` and will inherit its styling.
+
+ReactNode
+
+
+
+ | \- | 
+
+"This is a simple info alert"
+
+ |
+| footer | 
+
+Buttons and controls for the alert.
+
+ReactNode
+
+
+
+ | \- | 
+
+""
+
+ |
+| heading | 
+
+Text for alert heading. If a string, it will use a heading with level 2.
+
+ReactNode
+
+
+
+ | \- | 
+
+""
+
+ |
+| headingLevel | 
+
+Heading level for the alert heading.
+
+union
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `heading` instead.</td></tr></tbody></table>
+
+ | 
+
+'h2'
+
+ | Set object |
+| headingText | 
+
+Text for alert heading. If not supplied, heading will not be displayed.
+
+string
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `heading` instead.</td></tr></tbody></table>
+
+ | \- | Set string |
+| status | 
+
+Alert type - danger, info, success or warning.
+
+union
+
+
+
+ | 
+
+'info'
+
+ | 
+
+"info"
+
+ |
+
+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.
+
+```
+
+<div className\="iress-u-stack iress--gutter--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\>
+</div\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Contents of the alert. Is automatically wrapped in `<IressText />` and will inherit its styling.
+
+ReactNode
+
+
+
+ | \- | \- |
+| footer | 
+
+Buttons and controls for the alert.
+
+ReactNode
+
+
+
+ | \- | 
+
+""
+
+ |
+| heading | 
+
+Text for alert heading. If a string, it will use a heading with level 2.
+
+ReactNode
+
+
+
+ | \- | 
+
+""
+
+ |
+| headingLevel | 
+
+Heading level for the alert heading.
+
+union
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `heading` instead.</td></tr></tbody></table>
+
+ | 
+
+'h2'
+
+ | Set object |
+| headingText | 
+
+Text for alert heading. If not supplied, heading will not be displayed.
+
+string
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `heading` instead.</td></tr></tbody></table>
+
+ | \- | Set string |
+| status | 
+
+Alert type - danger, info, success or warning.
+
+union
+
+
+
+ | 
+
+'info'
+
+ | \- |
+| 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 |
+| --- | --- | --- | --- |
+| children | 
+Contents of the alert. Is automatically wrapped in `<IressText />` and will inherit its styling.
+
+ReactNode
+
+
+
+ | \- | 
+
+"This is a simple info alert"
+
+ |
+| footer | 
+
+Buttons and controls for the alert.
+
+ReactNode
+
+
+
+ | \- | 
+
+""
+
+ |
+| heading | 
+
+Text for alert heading. If a string, it will use a heading with level 2.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Alert heading"
+
+ |
+| headingLevel | 
+
+Heading level for the alert heading.
+
+union
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `heading` instead.</td></tr></tbody></table>
+
+ | 
+
+'h2'
+
+ | Set object |
+| headingText | 
+
+Text for alert heading. If not supplied, heading will not be displayed.
+
+string
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `heading` instead.</td></tr></tbody></table>
+
+ | \- | Set string |
+| status | 
+
+Alert type - danger, info, success or warning.
+
+union
+
+
+
+ | 
+
+'info'
+
+ | 
+
+"info"
+
+ |
+
+### Footer
+
+The `footer` prop allows for content to be placed below the header and body of the alert. This can be useful for displaying call to actions.
+
+[](./iframe.html?id=components-alert--footer)
+
+Alert heading
+-------------
+
+Here is the warning
+
+Close
+
+```
+
+<IressAlert
+  footer\={<IressButton\>Close</IressButton\>}
+  heading\="Alert heading"
+\>
+  <IressText\>
+    Here is the warning  </IressText\>
+</IressAlert\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Contents of the alert. Is automatically wrapped in `<IressText />` and will inherit its styling.
+
+ReactNode
+
+
+
+ | \- | 
+
+RAW
+
+children :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : ({ align, children, className, "data-testid": dataTestId, element: Tag = "div", mode, noGutter, variant, ...restProps }) => /\* @\_\_PURE\_\_ \*/ jsxDEV( Tag, { ...restProps, className: classNames(className, "iress-u-text", { \[\`iress--${variant}\`\]: Boolean(variant), \[\`iress--${mode}\`\]: Boolean(mode), \[\`${GlobalCSSClass.TextAlignBase}--${align}\`\]: Boolean(align), "iress--no-gutter": noGutter }), "data-testid": dataTestId, children }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Text/Text.tsx", lineNumber: 22, columnNumber: 1 }, this )
+*   key : null
+*   props :
+    
+    {...} 1 key
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| footer | 
+
+Buttons and controls for the alert.
+
+ReactNode
+
+
+
+ | \- | 
+
+RAW
+
+footer :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type :
+    
+    {...} 6 keys
+    
+*   key : null
+*   props :
+    
+    {...} 1 key
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| heading | 
+
+Text for alert heading. If a string, it will use a heading with level 2.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Alert heading"
+
+ |
+| headingLevel | 
+
+Heading level for the alert heading.
+
+union
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `heading` instead.</td></tr></tbody></table>
+
+ | 
+
+'h2'
+
+ | Set object |
+| headingText | 
+
+Text for alert heading. If not supplied, heading will not be displayed.
+
+string
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `heading` instead.</td></tr></tbody></table>
+
+ | \- | Set string |
+| status | 
+
+Alert type - danger, info, success or warning.
+
+union
+
+
+
+ | 
+
+'info'
+
+ | Set object |