@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.
102 lines • 3.67 kB
TypeScript
import * as React from "react";
import type { Props } from "./types";
/**
* @orbit-doc-start
* README
* ----------
* # FeatureIcon
*
* To implement FeatureIcon component into your project you'll need to add the import:
*
* ```jsx
* import FeatureIcon from "@kiwicom/orbit-components/lib/FeatureIcon";
* ```
*
* After adding import into your project you can use it simply like:
*
* ```jsx
* <FeatureIcon name="TicketFlexi" />
* ```
*
* ## Props
*
* Table below contains all types of the props available in the FeatureIcon component.
*
* | Name | Type | Default | Description |
* | :------- | :-------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------- |
* | alt | `string` | `""` | Defines the alt attribute for the image. Default empty value (`""`) makes the icon decorative (not announced by screen readers). |
* | dataTest | `string` | | Optional prop for testing purposes. |
* | id | `string` | | Set unique identifier for `FeatureIcon` |
* | **name** | [`enum`](#enum) | | The name for the displayed feature icon. |
*
* ### enum
*
* | name |
* | :----------------- |
* | `"TicketFlexi"` |
* | `"TicketSaver"` |
* | `"TicketStandard"` |
*
*
* Accessibility
* -------------
* ## Accessibility
*
* The FeatureIcon component displays an image representing a specific feature or ticket type.
*
* ### Accessibility Props
*
* | Name | Type | Default | Description |
* | :--- | :------- | :------ | :--------------------------------------------------------------------------- |
* | alt | `string` | `""` | Text alternative for the icon, used by screen readers to describe the image. |
*
* ### Image Announcements and Alt Text
*
* The `alt` attribute determines how screen readers announce the FeatureIcon:
*
* - `alt=""` (default): Icon is treated as **decorative** and ignored by screen readers
* - `alt="text"`: Screen readers will announce the provided text
*
* ### Best Practices
*
* #### Empty alt text
*
* - The icon has adjacent text describing the feature
* - The icon is purely decorative and doesn't add meaningful information
*
* ```jsx
* <Stack direction="row" align="center">
* <FeatureIcon name="TicketFlexi" alt="" />
* <Text>Flexi Ticket</Text>
* </Stack>
* ```
*
* Screen reader announces: "Flexi Ticket" (the icon is ignored)
*
* #### Descriptive alt text
*
* - The icon stands alone without accompanying text
* - The icon conveys unique information
*
* ```jsx
* <FeatureIcon name="TicketFlexi" alt="Flexible ticket option" />
* ```
*
* Screen reader announces: "Flexible ticket option"
*
* #### Avoid redundant information
*
* ```jsx
* <!-- DON'T do this -->
* <FeatureIcon name="TicketSaver" alt="Saver Ticket" />
* <Text>Saver Ticket</Text>
* ```
*
* Screen reader announces: "Saver Ticket, Saver Ticket" (redundant and confusing)
*
*
* @orbit-doc-end
*/
declare const FeatureIcon: ({ alt, name, dataTest, id }: Props) => React.JSX.Element;
export default FeatureIcon;
//# sourceMappingURL=index.d.ts.map