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

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

@@ -0,0 +1,496 @@
+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
+
+Hide codedrawOpen in CodeSandbox
+
+{
+  args: {
+    children: 'This is a simple info alert',
+    status: IressAlert.Status.Info,
+    heading: '',
+    footer: ''
+  }
+}
+
+```
+
+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-ymgjf7"><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-ymgjf7"><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.
+
+Hide codedrawOpen in CodeSandbox
+
+{
+  args: {
+    ...Default.args,
+    messages: {
+      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.',
+      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.',
+      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.',
+      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.'
+    }
+  },
+  argTypes: {
+    ...disableArgTypes(\['children', 'status'\]),
+    messages: {
+      control: 'object',
+      description: 'Messages for each status',
+      table: {
+        category: STORYBOOK\_ONLY\_CATEGORY
+      }
+    }
+  },
+  render: ({
+    messages,
+    ...args
+  }) \=> <div className\="iress-u-stack iress--gutter--md"\>
+      {statuses.map(status \=> <IressAlert {...args} status\={status} key\={status}\>
+          {messages\[status\]}
+        </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-ymgjf7"><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-ymgjf7"><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
+
+Hide codedrawOpen in CodeSandbox
+
+<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-ymgjf7"><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-ymgjf7"><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
+
+Hide codedrawOpen in CodeSandbox
+
+<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
+
+
+
+ | \- | 
+
+Edit JSON
+
+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
+
+
+
+ | \- | 
+
+Edit JSON
+
+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-ymgjf7"><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-ymgjf7"><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 |