@kiwicom/orbit-components/lib/ListChoice/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 _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
exports.__esModule = true;
exports.default = exports.StyledListChoice = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _Heading = _interopRequireDefault(require("../Heading"));
var _Checkbox = _interopRequireWildcard(require("../Checkbox"));
var _Text = _interopRequireDefault(require("../Text"));
var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));
var _Icon = require("../Icon");
var _rtl = require("../utils/rtl");
var _handleKeyDown = _interopRequireDefault(require("../utils/handleKeyDown"));
const StyledListChoiceIcon = _styledComponents.default.div.withConfig({
  displayName: "ListChoice__StyledListChoiceIcon",
  componentId: "sc-1cy9msg-0"
})(["", ""], ({
  theme
}) => (0, _styledComponents.css)(["display:flex;align-items:center;align-self:flex-start;flex:0 0 auto;margin-", ":", ";height:", ";svg{align-self:center;width:", ";height:", ";color:", ";transition:color ", " ease-in-out;}"], _rtl.right, theme.orbit.spaceXSmall, theme.orbit.lineHeightTextNormal, (0, _Icon.getSize)("medium"), (0, _Icon.getSize)("medium"), theme.orbit.colorIconPrimary, theme.orbit.durationFast));
StyledListChoiceIcon.defaultProps = {
  theme: _defaultTheme.default
};
const StyledListChoice = _styledComponents.default.div.withConfig({
  displayName: "ListChoice__StyledListChoice",
  componentId: "sc-1cy9msg-1"
})(["", ""], ({
  theme,
  disabled
}) => (0, _styledComponents.css)(["display:flex;align-items:center;box-sizing:border-box;width:100%;padding:", ";border-bottom:1px solid ", ";background-color:", ";transition:background-color 0.15s ease-in-out;cursor:", ";&:hover{outline:none;button{background:none;}", ";}", "{width:auto;}"], `${theme.orbit.spaceSmall} ${theme.orbit.spaceMedium}`, theme.orbit.paletteCloudNormal, theme.orbit.paletteWhite, disabled ? "not-allowed" : "pointer", !disabled && (0, _styledComponents.css)(["background:", ";", " svg{color:", ";}"], theme.orbit.paletteCloudLight, StyledListChoiceIcon, theme.orbit.colorIconPrimary), _Checkbox.StyledLabel));
exports.StyledListChoice = StyledListChoice;
StyledListChoice.defaultProps = {
  theme: _defaultTheme.default
};
const StyledListChoiceContent = _styledComponents.default.div.withConfig({
  displayName: "ListChoice__StyledListChoiceContent",
  componentId: "sc-1cy9msg-2"
})(["", ""], ({
  theme
}) => (0, _styledComponents.css)(["display:flex;flex-direction:column;justify-content:center;width:100%;padding-", ":", ";"], _rtl.right, theme.orbit.spaceSmall));
StyledListChoiceContent.defaultProps = {
  theme: _defaultTheme.default
};
const ListChoice = /*#__PURE__*/React.forwardRef(({
  dataTest,
  id,
  icon,
  action,
  title,
  description,
  selectable,
  role,
  onClick,
  tabIndex = 0,
  selected,
  disabled
}, ref) => {
  const conditionalProps = {
    ...(selectable ? {
      "aria-checked": selected
    } : null)
  };
  return /*#__PURE__*/React.createElement(StyledListChoice, (0, _extends2.default)({
    onClick: !disabled ? onClick : undefined,
    "data-test": dataTest,
    id: id,
    ref: ref,
    onKeyDown: !disabled ? (0, _handleKeyDown.default)(onClick) : undefined,
    tabIndex: tabIndex || disabled ? -1 : 0,
    disabled: disabled,
    "data-title": title,
    "aria-disabled": disabled,
    "aria-selected": selected,
    role: role || (selectable ? "checkbox" : "button")
  }, conditionalProps), icon && /*#__PURE__*/React.createElement(StyledListChoiceIcon, null, icon), /*#__PURE__*/React.createElement(StyledListChoiceContent, null, /*#__PURE__*/React.createElement(_Heading.default, {
    type: "title4"
  }, title), description && /*#__PURE__*/React.createElement(_Text.default, {
    type: "secondary",
    size: "small"
  }, description)), selectable && /*#__PURE__*/React.createElement(_Checkbox.default, {
    checked: selected,
    readOnly: true,
    disabled: disabled,
    tabIndex: -1
  }), !selectable && action);
});
ListChoice.displayName = "ListChoice";
var _default = ListChoice;
exports.default = _default;