@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.
72 lines (71 loc) • 2.61 kB
JavaScript
;
"use client";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
exports.__esModule = true;
exports.default = exports.SIZE_OPTIONS = void 0;
var _react = _interopRequireDefault(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _useTheme = _interopRequireDefault(require("../../hooks/useTheme"));
var _tailwind = require("../../common/tailwind");
let SIZE_OPTIONS = /*#__PURE__*/function (SIZE_OPTIONS) {
SIZE_OPTIONS["EXTRASMALL"] = "extraSmall";
SIZE_OPTIONS["SMALL"] = "small";
SIZE_OPTIONS["MEDIUM"] = "medium";
SIZE_OPTIONS["LARGE"] = "large";
SIZE_OPTIONS["DISPLAY"] = "display";
return SIZE_OPTIONS;
}({});
exports.SIZE_OPTIONS = SIZE_OPTIONS;
const getHeightToken = ({
theme,
size
}) => {
const tokens = {
[SIZE_OPTIONS.EXTRASMALL]: theme.orbit.illustrationExtraSmallHeight,
[SIZE_OPTIONS.SMALL]: theme.orbit.illustrationSmallHeight,
[SIZE_OPTIONS.MEDIUM]: theme.orbit.illustrationMediumHeight,
[SIZE_OPTIONS.LARGE]: theme.orbit.illustrationLargeHeight,
[SIZE_OPTIONS.DISPLAY]: theme.orbit.illustrationDisplayHeight
};
return parseInt(tokens[size], 10);
};
const maxHeightClasses = {
[SIZE_OPTIONS.EXTRASMALL]: "max-h-illustration-extra-small",
[SIZE_OPTIONS.SMALL]: "max-h-illustration-small",
[SIZE_OPTIONS.MEDIUM]: "max-h-illustration-medium",
[SIZE_OPTIONS.LARGE]: "max-h-illustration-large",
[SIZE_OPTIONS.DISPLAY]: "max-h-illustration-display"
};
const baseURL = "//images.kiwi.com";
const IllustrationPrimitive = ({
name,
alt,
margin,
size = SIZE_OPTIONS.MEDIUM,
dataTest,
id,
// TODO: remove spaceAfter in the next major version
spaceAfter
}) => {
const theme = (0, _useTheme.default)();
const illustrationPath = `${name}-Q85.png`;
const height = getHeightToken({
theme,
size
});
const {
vars: cssVars,
classes: marginClasses
} = (0, _tailwind.getMargin)(margin);
return /*#__PURE__*/_react.default.createElement("img", {
className: (0, _clsx.default)("mx-0 my-auto inline-block max-w-full shrink-0 bg-transparent", maxHeightClasses[size], spaceAfter && _tailwind.spaceAfterClasses[spaceAfter], ...marginClasses),
src: `${baseURL}/illustrations/0x${height}/${illustrationPath}`,
srcSet: `${baseURL}/illustrations/0x${height * 2}/${illustrationPath} 2x, ${baseURL}/illustrations/0x${height * 3}/${illustrationPath} 3x`,
alt: typeof alt === "string" ? alt : name,
"data-test": dataTest,
id: id,
style: cssVars
});
};
var _default = IllustrationPrimitive;
exports.default = _default;