@kiwicom/orbit-components/es/ListChoice/index.js

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

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
const _excluded = ["disabled", "theme"];
import * as React from "react";
import styled, { css } from "styled-components";
import Heading from "../Heading";
import Checkbox, { Label } from "../Checkbox";
import Text from "../Text";
import defaultTheme from "../defaultTheme";
import { getSize } from "../Icon";
import { right } from "../utils/rtl";
import handleKeyDown from "../utils/handleKeyDown";
const StyledListChoiceIcon = styled.div.withConfig({
  displayName: "ListChoice__StyledListChoiceIcon",
  componentId: "sc-obcnak-0"
})(["", ""], ({
  theme
}) => css(["display:flex;align-self:flex-start;flex:0 0 auto;margin-", ":", ";height:", ";svg{align-self:center;width:", ";height:", ";color:", ";transition:color ", " ease-in-out;}"], right, theme.orbit.spaceXSmall, theme.orbit.lineHeightTextNormal, getSize("medium"), getSize("medium"), theme.orbit.colorIconPrimary, theme.orbit.durationFast)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledListChoiceIcon.defaultProps = {
  theme: defaultTheme
};
const StyledListChoice = styled(_ref => {
  let {
    disabled,
    theme
  } = _ref,
      props = _objectWithoutProperties(_ref, _excluded);

  return /*#__PURE__*/React.createElement("div", props);
}).withConfig({
  displayName: "ListChoice__StyledListChoice",
  componentId: "sc-obcnak-1"
})(["", ""], ({
  theme,
  disabled
}) => 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:", ";&:last-child{border:none;}&:focus,&: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 && css(["background:", ";", " svg{color:", ";}"], theme.orbit.paletteCloudLight, StyledListChoiceIcon, theme.orbit.colorIconPrimary), Label)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledListChoice.defaultProps = {
  theme: defaultTheme
};
const StyledListChoiceContent = styled.div.withConfig({
  displayName: "ListChoice__StyledListChoiceContent",
  componentId: "sc-obcnak-2"
})(["", ""], ({
  theme
}) => css(["display:flex;flex-direction:column;justify-content:center;width:100%;padding-", ":", ";"], right, theme.orbit.spaceSmall)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledListChoiceContent.defaultProps = {
  theme: defaultTheme
};

const ListChoice = ({
  dataTest,
  icon,
  action,
  title,
  description,
  selectable,
  onClick,
  selected,
  disabled
}) => {
  const conditionalProps = _objectSpread({}, selectable ? {
    "aria-checked": selected
  } : null);

  return /*#__PURE__*/React.createElement(StyledListChoice, _extends({
    onClick: !disabled ? onClick : null,
    "data-test": dataTest,
    onKeyDown: !disabled ? handleKeyDown(onClick) : null,
    tabIndex: disabled ? "-1" : "0",
    disabled: disabled,
    "aria-disabled": disabled,
    role: selectable ? "checkbox" : "button"
  }, conditionalProps), icon && /*#__PURE__*/React.createElement(StyledListChoiceIcon, null, icon), /*#__PURE__*/React.createElement(StyledListChoiceContent, null, /*#__PURE__*/React.createElement(Heading, {
    type: "title4"
  }, title), description && /*#__PURE__*/React.createElement(Text, {
    type: "secondary",
    size: "small"
  }, description)), selectable && /*#__PURE__*/React.createElement(Checkbox, {
    checked: selected,
    readOnly: true,
    disabled: disabled,
    tabIndex: "-1"
  }), !selectable && action);
};

export default ListChoice;