@kiwicom/orbit-components/lib/KeyValue/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));
var _consts = require("../utils/layout/consts");
var _Text = _interopRequireDefault(require("../Text"));
const getSpacing = ({
  theme
}) => ({
  [_consts.SPACINGS.XXXSMALL]: theme.orbit.spaceXXXSmall,
  [_consts.SPACINGS.XXSMALL]: theme.orbit.spaceXXSmall,
  [_consts.SPACINGS.XSMALL]: theme.orbit.spaceXSmall,
  [_consts.SPACINGS.SMALL]: theme.orbit.spaceSmall,
  [_consts.SPACINGS.MEDIUM]: theme.orbit.spaceMedium,
  [_consts.SPACINGS.LARGE]: theme.orbit.spaceLarge,
  [_consts.SPACINGS.XLARGE]: theme.orbit.spaceXLarge,
  [_consts.SPACINGS.XXLARGE]: theme.orbit.spaceXXLarge
});
const resolveSpacing = ({
  spacing,
  theme
}) => getSpacing({
  theme
})[spacing];
const StyledWrapper = _styledComponents.default.div.withConfig({
  displayName: "KeyValue__StyledWrapper",
  componentId: "sc-ldthmj-0"
})(["", ";"], ({
  $direction,
  spacing,
  theme
}) => (0, _styledComponents.css)(["display:flex;flex-direction:", ";align-items:", ";gap:", ";"], $direction, $direction !== "column" ? "center" : "flex-start", resolveSpacing({
  spacing,
  theme
})));
StyledWrapper.defaultProps = {
  theme: _defaultTheme.default
};
const KeyValue = ({
  dataTest,
  label,
  value,
  direction,
  size = "normal",
  icon,
  spacing
}) => {
  return /*#__PURE__*/React.createElement(StyledWrapper, {
    "data-test": dataTest,
    $direction: direction,
    spacing: spacing
  }, label && /*#__PURE__*/React.createElement(_Text.default, {
    type: "secondary",
    size: size === "normal" ? "small" : "normal"
  }, label), icon, /*#__PURE__*/React.createElement(_Text.default, {
    size: size,
    weight: "bold"
  }, value));
};
var _default = KeyValue;
exports.default = _default;