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

package/generated/docs/components_components-toaster-toast-docs.md

@@ -0,0 +1,634 @@
+Toast
+=====
+
+Overview
+--------
+
+Toast are a compact way to provide users with important information, usually within a toaster.
+
+This documentation is for the standalone `IressToast` component, and has been exposed for complex use cases where you are unable to use the `useToaster` hook. For most use cases, please use the hook and provider documented at [Toaster documentation](/docs/components-toaster--docs).
+
+[](./iframe.html?id=components-toaster-toast--default)
+
+Error
+-----
+
+Connection failure. Longer text description should wrap and look like this. Try to limit to 3 lines or less.
+
+Hide codedrawOpen in CodeSandbox
+
+<IressToast
+  heading\="Error"
+  status\="error"
+\>
+  Connection failure. Longer text description should wrap and look like this. Try to limit to 3 lines or less.
+</IressToast\>
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| actions | 
+Buttons and controls for the toast.
+
+ReactReactNode
+
+
+
+ | \- | actionsChoose option...noneWith Action Button |
+| children | 
+
+The toast message.
+
+ReactReactNode
+
+
+
+ | \- | 
+
+"Connection failure. Longer text description should wrap and look like this. Try to limit to 3 lines or less."
+
+ |
+| content | 
+
+The content of the toast message.
+
+string
+
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: use children instead.</td></tr></tbody></table>
+
+ | \- | Set string |
+| dismissible | 
+
+A boolean to show hide the dismiss close button on the top right of the corner.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| heading | 
+
+The heading area of the toast. You can pass react component such as `<IressText>Error</IressText>`. If a string is provided, it will default to a `<h2 />` element.
+
+ReactReactNode
+
+
+
+ | \- | headingChoose option...noneWith h2 tagWith Custom Heading |
+| headingLevel | 
+
+Heading level for the Toast heading. Will be ignored if headingText is not supplied.
+
+HeadingLevel
+
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `heading` instead.</td></tr></tbody></table>
+
+ | \- | Set object |
+| headingText | 
+
+Text for Toast 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 |
+| onClose | 
+
+Click event on the close button of the toast.
+
+(e?: React.MouseEvent<ButtonRef>) => void
+
+ | \- | \- |
+| status\* | 
+
+System status of Toast
+
+unknown\[number\]
+
+ |  | 
+
+"error"
+
+ |
+| timeout | 
+
+The amount of time, in milliseconds, the toast is displayed on screen without the users interaction. Will fall back to timeout prop on parent toaster and then the default time of 6000ms. If set to 0, the toast will not auto dismiss.
+
+number
+
+
+
+ | \- | Set number |
+
+Examples
+--------
+
+### Status
+
+The toast offers three status 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-toaster-toast--status)
+
+Success
+-------
+
+Use to communicate that an action has been successfully completed, such as saving changes in a form.
+
+Error
+-----
+
+Error toasts are useful for when a user has tried to submit some data but the submit has failed, due to an api error or loss of internet connection, for example.
+
+Info
+----
+
+Ideal for conveying updates or notifications that do not require immediate action, as well as gently inform users about events or changes within an application or interface.
+
+Hide codedrawOpen in CodeSandbox
+
+<IressStack gutter\="lg"\>
+  <IressToast
+    heading\="Success"
+    status\="success"
+  \>
+    Use to communicate that an action has been successfully completed, such as saving changes in a form.  </IressToast\>
+  <IressToast
+    heading\="Error"
+    status\="error"
+  \>
+    Error toasts are useful for when a user has tried to submit some data but the submit has failed, due to an api error or loss of internet connection, for example.  </IressToast\>
+  <IressToast
+    heading\="Info"
+    status\="info"
+  \>
+    Ideal for conveying updates or notifications that do not require immediate action, as well as gently inform users about events or changes within an application or interface.  </IressToast\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| actions | 
+Buttons and controls for the toast.
+
+ReactReactNode
+
+
+
+ | \- | actionsChoose option...noneWith Action Button |
+| children | 
+
+The toast message.
+
+ReactReactNode
+
+
+
+ | \- | 
+
+""
+
+ |
+| content | 
+
+The content of the toast message.
+
+string
+
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: use children instead.</td></tr></tbody></table>
+
+ | \- | Set string |
+| dismissible | 
+
+A boolean to show hide the dismiss close button on the top right of the corner.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| heading | 
+
+The heading area of the toast. You can pass react component such as `<IressText>Error</IressText>`. If a string is provided, it will default to a `<h2 />` element.
+
+ReactReactNode
+
+
+
+ | \- | headingChoose option...noneWith h2 tagWith Custom Heading |
+| headingLevel | 
+
+Heading level for the Toast heading. Will be ignored if headingText is not supplied.
+
+HeadingLevel
+
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `heading` instead.</td></tr></tbody></table>
+
+ | \- | Set object |
+| headingText | 
+
+Text for Toast 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 |
+| onClose | 
+
+Click event on the close button of the toast.
+
+(e?: React.MouseEvent<ButtonRef>) => void
+
+ | \- | \- |
+| status\* | 
+
+System status of Toast
+
+unknown\[number\]
+
+ |  | \- |
+| timeout | 
+
+The amount of time, in milliseconds, the toast is displayed on screen without the users interaction. Will fall back to timeout prop on parent toaster and then the default time of 6000ms. If set to 0, the toast will not auto dismiss.
+
+number
+
+
+
+ | \- | Set number |
+
+### Heading
+
+Use the `heading` prop to add a header to the toast. The header can be any component you like, but it is designed to support a simple heading element. If provided a string, it will display a `<h2 />` element with the string as its content.
+
+**Note:** `headingText` and `headingLevel` props have been replaced with the `heading` render prop to give you more control over the `heading` element and its content. To use the previous behaviour, you can pass a string which will automatically create a `h2` element, or pass a `h*` element with the text as a child.
+
+[](./iframe.html?id=components-toaster-toast--heading)
+
+Toast with a h2 tag
+-------------------
+
+Connection failure. Longer text description should wrap and look like this. Try to limit to 3 lines or less.
+
+Hide codedrawOpen in CodeSandbox
+
+<IressToast
+  heading\={<h2\>Toast with a h2 tag</h2\>}
+  status\="error"
+\>
+  Connection failure. Longer text description should wrap and look like this. Try to limit to 3 lines or less.
+</IressToast\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| actions | 
+Buttons and controls for the toast.
+
+ReactReactNode
+
+
+
+ | \- | actionsChoose option...noneWith Action Button |
+| children | 
+
+The toast message.
+
+ReactReactNode
+
+
+
+ | \- | 
+
+"Connection failure. Longer text description should wrap and look like this. Try to limit to 3 lines or less."
+
+ |
+| content | 
+
+The content of the toast message.
+
+string
+
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: use children instead.</td></tr></tbody></table>
+
+ | \- | Set string |
+| dismissible | 
+
+A boolean to show hide the dismiss close button on the top right of the corner.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| heading | 
+
+The heading area of the toast. You can pass react component such as `<IressText>Error</IressText>`. If a string is provided, it will default to a `<h2 />` element.
+
+ReactReactNode
+
+
+
+ | \- | headingChoose option...noneWith h2 tagWith Custom Heading |
+| headingLevel | 
+
+Heading level for the Toast heading. Will be ignored if headingText is not supplied.
+
+HeadingLevel
+
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `heading` instead.</td></tr></tbody></table>
+
+ | \- | Set object |
+| headingText | 
+
+Text for Toast 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 |
+| onClose | 
+
+Click event on the close button of the toast.
+
+(e?: React.MouseEvent<ButtonRef>) => void
+
+ | \- | \- |
+| status\* | 
+
+System status of Toast
+
+unknown\[number\]
+
+ |  | 
+
+"error"
+
+ |
+| timeout | 
+
+The amount of time, in milliseconds, the toast is displayed on screen without the users interaction. Will fall back to timeout prop on parent toaster and then the default time of 6000ms. If set to 0, the toast will not auto dismiss.
+
+number
+
+
+
+ | \- | Set number |
+
+### 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-toaster-toast--footer)
+
+Error
+-----
+
+Connection failure. Longer text description should wrap and look like this. Try to limit to 3 lines or less.
+
+Try Again
+
+Hide codedrawOpen in CodeSandbox
+
+<IressToast
+  actions\={<IressButton key\="test" mode\="danger"\>Try Again</IressButton\>}
+  heading\="Error"
+  status\="error"
+\>
+  Connection failure. Longer text description should wrap and look like this. Try to limit to 3 lines or less.
+</IressToast\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| actions | 
+Buttons and controls for the toast.
+
+ReactReactNode
+
+
+
+ | \- | actionsChoose option...noneWith Action Button |
+| children | 
+
+The toast message.
+
+ReactReactNode
+
+
+
+ | \- | 
+
+"Connection failure. Longer text description should wrap and look like this. Try to limit to 3 lines or less."
+
+ |
+| content | 
+
+The content of the toast message.
+
+string
+
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: use children instead.</td></tr></tbody></table>
+
+ | \- | Set string |
+| dismissible | 
+
+A boolean to show hide the dismiss close button on the top right of the corner.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| heading | 
+
+The heading area of the toast. You can pass react component such as `<IressText>Error</IressText>`. If a string is provided, it will default to a `<h2 />` element.
+
+ReactReactNode
+
+
+
+ | \- | headingChoose option...noneWith h2 tagWith Custom Heading |
+| headingLevel | 
+
+Heading level for the Toast heading. Will be ignored if headingText is not supplied.
+
+HeadingLevel
+
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `heading` instead.</td></tr></tbody></table>
+
+ | \- | Set object |
+| headingText | 
+
+Text for Toast 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 |
+| onClose | 
+
+Click event on the close button of the toast.
+
+(e?: React.MouseEvent<ButtonRef>) => void
+
+ | \- | \- |
+| status\* | 
+
+System status of Toast
+
+unknown\[number\]
+
+ |  | 
+
+"error"
+
+ |
+| timeout | 
+
+The amount of time, in milliseconds, the toast is displayed on screen without the users interaction. Will fall back to timeout prop on parent toaster and then the default time of 6000ms. If set to 0, the toast will not auto dismiss.
+
+number
+
+
+
+ | \- | Set number |
+
+### Dismiss Button
+
+Dismiss Button is on the top right corner and it's showing/hiding based on `dismissible` prop.
+
+**Note:** When it's `true`, `onClose` event is going to be available.
+
+[](./iframe.html?id=components-toaster-toast--dismissible)
+
+Information
+-----------
+
+Information toast with dismiss button
+
+Hide codedrawOpen in CodeSandbox
+
+<IressToast
+  dismissible
+  heading\="Information"
+  status\="info"
+\>
+  Information toast with dismiss button
+</IressToast\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| actions | 
+Buttons and controls for the toast.
+
+ReactReactNode
+
+
+
+ | \- | actionsChoose option...noneWith Action Button |
+| children | 
+
+The toast message.
+
+ReactReactNode
+
+
+
+ | \- | 
+
+"Information toast with dismiss button"
+
+ |
+| content | 
+
+The content of the toast message.
+
+string
+
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: use children instead.</td></tr></tbody></table>
+
+ | \- | Set string |
+| dismissible | 
+
+A boolean to show hide the dismiss close button on the top right of the corner.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| heading | 
+
+The heading area of the toast. You can pass react component such as `<IressText>Error</IressText>`. If a string is provided, it will default to a `<h2 />` element.
+
+ReactReactNode
+
+
+
+ | \- | headingChoose option...noneWith h2 tagWith Custom Heading |
+| headingLevel | 
+
+Heading level for the Toast heading. Will be ignored if headingText is not supplied.
+
+HeadingLevel
+
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `heading` instead.</td></tr></tbody></table>
+
+ | \- | Set object |
+| headingText | 
+
+Text for Toast 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 |
+| onClose | 
+
+Click event on the close button of the toast.
+
+(e?: React.MouseEvent<ButtonRef>) => void
+
+ | \- | \- |
+| status\* | 
+
+System status of Toast
+
+unknown\[number\]
+
+ |  | 
+
+"info"
+
+ |
+| timeout | 
+
+The amount of time, in milliseconds, the toast is displayed on screen without the users interaction. Will fall back to timeout prop on parent toaster and then the default time of 6000ms. If set to 0, the toast will not auto dismiss.
+
+number
+
+
+
+ | \- | Set number |