@kiwicom/orbit-components

import * as React from "react"; import type { Props } from "./types"; /** * @orbit-doc-start * README * ---------- * # Alert * * To implement Alert component into your project you'll need to add the import: * * ```jsx * import Alert from "@kiwicom/orbit-components/lib/Alert"; * ``` * * After adding import into your project you can use it simply like: * * ```jsx * <Alert>Hello World!</Alert> * ``` * * ## Props * * The table below contains all types of the props available in Alert component. * * | Name | Type | Default | Description | * | :------------ | :------------------------------ | :------- | :------------------------------------------------------------------------------------- | * | children | `React.Node` | | The content of the Alert. | * | closable | `boolean` | `false` | If `true`, the Close icon will be displayed. [See Functional specs](#functional-specs) | * | dataTest | `string` | | Optional prop for testing purposes. | * | id | `string` | | Set `id` for `Alert`. | * | icon | `React.Element<any> \| boolean` | | The displayed icon. [See Functional specs](#functional-specs) | * | inlineActions | `React.Node` | | Renders action to a right side of a Alert. [See Functional specs](#functional-specs) | * | onClose | `() => void \| Promise` | | Function for handling Alert onClose. | * | spaceAfter | `enum` | | Additional `margin-bottom` after component. | * | title | `string` | | The title of the Alert. | * | **type** | [`enum`](#enum) | `"info"` | The type of Alert. | * | suppressed | `boolean` | | If `suppressed` is on, Alert will not have colored background. | * | labelClose | `string` | | The label of the close button. **Required** when `closable` is `true`. | * * ### enum * * | type | spaceAfter | * | :----------- | :----------- | * | `"info"` | `"none"` | * | `"success"` | `"smallest"` | * | `"warning"` | `"small"` | * | `"critical"` | `"normal"` | * | | `"medium"` | * | | `"large"` | * | | `"largest"` | * * ## Functional specs * * - By passing the `closable` prop into Alert, you will be able to handle `onClose` function and Close icon will be displayed. When `closable` is `true`, the `labelClose` prop is required for accessibility. Also, if you want to select the Close Button element for testing purposes, use [data-test="AlertCloseButton"] selector. * * - When the Alert has a `title` prop, if you pass an `icon` prop as `true`, the Alert will have its own icon based on the selected `type`. If you want to use a different icon, just pass it to the `icon` prop as a `React.Element`. Alerts without a `title` or with a `title` but without an `icon` prop don't have an icon. * * - Passing a `inlineActions` will cause `children` to be ignored. `inlineActions` should be used for displaying buttons inside short alerts which only have a `title`. * * ## Subcomponents * * ### AlertButton * * To implement AlertButton component into your project you'll need to add the import: * * ```jsx * import AlertButton from "@kiwicom/orbit-components/lib/Alert/AlertButton"; * // or * import { AlertButton } from "@kiwicom/orbit-components/lib/Alert"; * ``` * * After adding import into your project you can use it simply like: * * ```jsx * <AlertButton type="info">Hello World!</AlertButton> * ``` * * ## Props * * Table below contains all types of the props available in AlertButton component. * * | Name | Type | Default | Description | * | :----------- | :------------------------- | :---------- | :---------------------------------------------------------------------------------- | * | ariaControls | `string` | | Id of the element the button controls. | * | ariaExpanded | `boolean` | | Tells screen reader the controlled element from `ariaControls` is expanded | * | asComponent | `string \| React.Element` | `"button"` | The component used for the root node. | * | fullWidth | `boolean` | `false` | If `true`, the AlertButton grows to the full width of its container. | * | circled | `boolean` | `false` | If `true`, the AlertButton is circular. | * | children | `React.Node` | | The content of the AlertButton. | * | dataTest | `string` | | Optional prop for testing purposes. | * | disabled | `boolean` | `false` | If `true`, the AlertButton is disabled. | * | external | `boolean` | `false` | If `true`, the AlertButton opens link in a new tab. | * | href | `string` | | The URL of the link to open when AlertButton is clicked. | * | iconLeft | `React.Node` | | The displayed icon on the left. | * | iconRight | `React.Node` | | The displayed icon on the right. | * | loading | `boolean` | `false` | If `true`, the loading glyph is displayed. | * | onClick | `event => void \| Promise` | | Function for handling onClick event. | * | ref | `func` | | Prop for forwarded ref of the AlertButton. | * | role | `string` | | Specifies the role of an element. | * | spaceAfter | `enum` | | Additional `margin-bottom` after component. | * | submit | `boolean` | `false` | If `true`, the Button has the `type="submit"` attribute, otherwise `type="button"`. | * | tabIndex | `string \| number` | | Specifies the tab order of an element. | * | title | `string` | | Adds `aria-label`. | * | **type** | [`enum`](#button-enum) | `"primary"` | The type of AlertButton. | * | width | `string` | | The width of the AlertButton. Can be any string - `100px`, `20%`. | * * ### Button enum * * | type | spaceAfter | * | :----------------- | :----------- | * | `"info"` | `"none"` | * | `"success"` | `"smallest"` | * | `"warning"` | `"small"` | * | `"critical"` | `"normal"` | * | `"infoSubtle"` | `"medium"` | * | `"successSubtle"` | `"large"` | * | `"warningSubtle"` | `"largest"` | * | `"criticalSubtle"` | * * * Accessibility * ------------- * # Accessibility * * ## Alert * * The Alert component has been designed with accessibility in mind. * * ### Accessibility props * * The following props are available to improve the accessibility of your Alert component: * * | Prop | Type | Description | * | :--------- | :------- | :----------------------------------------------------------------------- | * | labelClose | `string` | Defines accessible text for the close button when the alert is closable. | * * When the `closable` prop is set to `true`, the `labelClose` prop is required. It provides the text that screen readers will announce when focusing on the close button, helping users understand its purpose. * * The `labelClose` text should be properly translated. * * ### Best practices * * - When using the `icon` prop, follow the accessibility guidelines documented in the Icon component's accessibility documentation to ensure that the icon is properly accessible or visually hidden from screen readers when it is purely decorative. * * ### Code examples * * #### Using labelClose with closable alert * * ```jsx * <Alert * type="info" * title="Notification" * closable * labelClose="Close notification" // Should be a translated string * onClose={() => { * // handle close action * }} * > * This is an important update for your upcoming flight. * </Alert> * ``` * * In this example, screen readers would announce "Close notification" when focusing on the close button. * * #### Non-closable alert (no accessibility props required) * * ```jsx * <Alert type="success" title="Success"> * Your booking has been confirmed. * </Alert> * ``` * * In this example, the alert doesn't require additional accessibility props as it doesn't have interactive elements that need labels. * * ## AlertButton * * The AlertButton component also includes several accessibility features: * * ### Accessibility props * * | Prop | Type | Description | * | :------------- | :-------- | :----------------------------------------------------------------------------------------------- | * | title | `string` | Adds `aria-label` to the button, providing a description for screen readers. | * | ariaControls | `string` | Identifies the element controlled by the button, establishing a relationship for screen readers. | * | ariaExpanded | `boolean` | Indicates to screen readers whether the controlled element is expanded. | * | ariaLabelledby | `string` | References the ID of an element that labels the button. | * * ### Best practices * * - The `title` prop should be used when the button's purpose isn't clear from its content alone or when additional context would help screen reader users. * - When the AlertButton controls the visibility of another element (like a collapsible section), use `ariaControls` with the ID of that element and `ariaExpanded` to indicate its state. * - Always translate accessibility-related text to match the user's language. * - Use the `asComponent` prop to change the rendered element when the AlertButton is used inside another interactive element (like another button or a link). This helps avoid accessibility violations from nesting interactive elements, which can confuse screen readers and keyboard navigation. * - When using `iconLeft` or `iconRight` props, follow the accessibility guidelines documented in the Icon component's accessibility documentation to ensure that icons are properly accessible or visually hidden from screen readers when they are purely decorative. * * You can find additional accessibility guidance in the Button accessibility documentation. * * ### Code example * * ```jsx * <Alert type="warning" title="Flight delay information"> * <p>Your flight has been delayed by 2 hours.</p> * <AlertButton * type="warning" * ariaControls="details-panel" * ariaExpanded={detailsVisible} * onClick={() => setDetailsVisible(!detailsVisible)} * > * {detailsVisible ? "Hide details" : "Show details"} * </AlertButton> * <div id="details-panel" style={{ display: detailsVisible ? "block" : "none" }}> * Detailed information about the delay... * </div> * </Alert> * ``` * * In this example, screen readers would announce the button text along with information about what element it controls and whether that element is currently expanded. * * * @orbit-doc-end */ declare const Alert: (props: Props) => React.JSX.Element; export { default as AlertButton } from "./AlertButton"; export default Alert; //# sourceMappingURL=index.d.ts.map