@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.
192 lines (190 loc) • 7.13 kB
JavaScript
;
"use client";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _consts = require("./consts");
const heightClasses = {
[_consts.SIZE_OPTIONS.SMALL]: "h-300",
[_consts.SIZE_OPTIONS.MEDIUM]: "h-600",
[_consts.SIZE_OPTIONS.LARGE]: "h-1200"
};
const getColorUrlParam = greyScale => greyScale ? "logos-grayscale" : "logos";
const getSizeUrlParams = size => {
const sizes = {
[_consts.SIZE_OPTIONS.SMALL]: [12, 24],
[_consts.SIZE_OPTIONS.MEDIUM]: [24, 48],
[_consts.SIZE_OPTIONS.LARGE]: [48, 96]
};
return {
lowRes: `0x${sizes[size][0]}`,
highRes: `0x${sizes[size][1]}`
};
};
/**
* @orbit-doc-start
* README
* ----------
* # ServiceLogo
*
* To implement ServiceLogo component into your project you'll need to add the import:
*
* ```jsx
* import ServiceLogo from "@kiwicom/orbit-components/lib/ServiceLogo";
* ```
*
* After adding import into your project you can use it simply like:
*
* ```jsx
* <ServiceLogo name="Visa" size="large" />
* ```
*
* ## Props
*
* Table below contains all types of the props available in ServiceLogo component.
*
* | Name | Type | Default | Description |
* | :-------- | :-------------- | :--------- | :-------------------------------------------------------------------------- |
* | dataTest | `string` | | Optional prop for testing purposes. |
* | id | `string` | | Set `id` for `ServiceLogo` |
* | grayScale | `boolean` | | If `true`, logo will be in gray scale. |
* | **name** | [`enum`](#enum) | | The name for the displayed service logo. |
* | size | [`enum`](#enum) | `"medium"` | The size of the displayed service logo. |
* | alt | `string` | | Optional property for passing own `alt` attribute to the DOM image element. |
*
* ### enum
*
* | code | size |
* | :---------------------- | :--------- |
* | `"AirHelp"` | `"small"` |
* | `"AirHelpNew"` | `"medium"` |
* | `"AirHelpPlus"` | `"large"` |
* | `"Alipay"` |
* | `"Amex"` |
* | `"Axa"` |
* | `"AxaAssistance"` |
* | `"AxaWhite"` |
* | `"Booking"` |
* | `"BusinessInsider"` |
* | `"ChinaUnionPay"` |
* | `"DailyExpress"` |
* | `"DinersClub"` |
* | `"Discover"` |
* | `"Elo"` |
* | `"GetYourGuide"` |
* | `"JCB"` |
* | `"MailOnline"` |
* | `"Maestro"` |
* | `"MasterCard"` |
* | `"MIR"` |
* | `"Mirror"` |
* | `"NewYorkTimes"` |
* | `"NortonSecured"` |
* | `"PayPal"` |
* | `"RentalCars"` |
* | `"Sherpa"` |
* | `"Simtex"` |
* | `"Sofort"` |
* | `"TravelPulse"` |
* | `"Trustly"` |
* | `"UsaToday"` |
* | `"Visa"` |
* | `"VisaHQ"` |
* | `"Zooz"` |
* | `"KiwiGuarantee"` |
* | `"KiwiGuaranteeFull"` |
* | `"KiwiGuaranteeInline"` |
*
*
* Accessibility
* -------------
* ## Accessibility
*
* The ServiceLogo component has been designed with accessibility in mind, providing flexible display options for service and payment provider logos that can be either decorative or semantic depending on context.
*
* ### Accessibility Props
*
* The following prop is available to improve the accessibility of your ServiceLogo component:
*
* | Name | Type | Description |
* | :--- | :------- | :------------------------------------------------------------------------------------------------------------------- |
* | alt | `string` | Specifies the alternative text for the image to provide context about the service logo component for screen readers. |
*
* ### Automatic Accessibility Features
*
* - The component automatically manages ARIA attributes:
* - When `alt` is **not** provided, default role of `"presentation"` is set. This makes the logo decorative and hidden from screen readers.
* - When `alt` is provided, the role is set to `"img"` and the logo becomes accessible to assistive technologies.
* - Grayscale mode applies visual styling without affecting accessibility (except for the color contrast)
*
* ### Best Practices
*
* - If descriptive text should be provided, fill in the `alt` prop. Role of the ServiceLogo component is automatically set to `"img"`, otherwise it is set to `"presentation"` by default.
* - For payment logos, include the payment method name in the alt text (e.g., "Visa", "PayPal", "American Express").
* - For service logos, include the service name and context if relevant (e.g., "Kiwi.com guarantee", "AirHelp assistance").
* - The `alt` text should always be translated to the user’s language.
* - Avoid redundant `alt` text when the logo appears next to visible text containing the same information.
* - Ensure sufficient color contrast when using `grayScale` mode, especially against non-white backgrounds.
*
* ### Examples
*
* #### Decorative logo alongside text
*
* ```jsx
* <Stack>
* <ServiceLogo name="Visa" />
* <Text>Pay with Visa</Text>
* </Stack>
* ```
*
* Screen reader announces: "Pay with Visa".
*
* #### Semantic logo with descriptive text
*
* ```jsx
* <ServiceLogo name="PayPal" role="img" alt="PayPal payment method" />
* ```
*
* Screen reader announces: "PayPal payment method, image".
*
* #### Multiple payment methods (decorative)
*
* ```jsx
* <Stack>
* <ServiceLogo name="Visa" />
* <ServiceLogo name="MasterCard" />
* <ServiceLogo name="Amex" />
* <Text>Visa, MasterCard, and American Express accepted</Text>
* </Stack>
* ```
*
* Screen reader announces: "Visa, MasterCard, and American Express accepted".
*
*
* @orbit-doc-end
*/
const ServiceLogo = ({
name,
size = _consts.SIZE_OPTIONS.MEDIUM,
grayScale = false,
dataTest,
alt = "",
id
}) => {
const color = getColorUrlParam(grayScale);
const {
lowRes,
highRes
} = getSizeUrlParams(size);
return /*#__PURE__*/_react.default.createElement("img", {
className: (0, _clsx.default)("orbit-service-logo w-auto bg-transparent", heightClasses[size]),
src: `${_consts.baseURL}/${color}/${lowRes}/${name}.png`,
srcSet: `${_consts.baseURL}/${color}/${highRes}/${name}.png 2x`,
alt: alt,
id: id,
"data-test": dataTest
});
};
var _default = exports.default = ServiceLogo;