@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 * as React from "react";
import styled from "styled-components";
import Heading, { StyledHeading } 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 KEY_CODE_MAP from "../common/keyMaps";
const StyledListChoiceIcon = styled.div.withConfig({
  displayName: "ListChoice__StyledListChoiceIcon",
  componentId: "sc-1y53xes-0"
})(["display:flex;align-self:flex-start;flex:0 0 auto;margin-", ":", ";svg{width:", ";height:", ";color:", ";transition:color ", " ease-in-out;}"], right, ({
  theme
}) => theme.orbit.spaceSmall, getSize("small"), getSize("small"), ({
  theme
}) => theme.orbit.colorIconPrimary, ({
  theme
}) => theme.orbit.durationFast);
StyledListChoiceIcon.defaultProps = {
  theme: defaultTheme
};
const StyledListChoice = styled.div.withConfig({
  displayName: "ListChoice__StyledListChoice",
  componentId: "sc-1y53xes-1"
})(["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:pointer;&:last-child{border:none;}&:focus,&:hover{background-color:", ";", " svg{color:", ";}outline:none;}", "{width:auto;}"], ({
  theme
}) => `${theme.orbit.spaceSmall} ${theme.orbit.spaceMedium}`, ({
  theme
}) => theme.orbit.paletteCloudNormal, ({
  theme
}) => theme.orbit.paletteWhite, ({
  theme
}) => theme.orbit.paletteCloudLight, StyledListChoiceIcon, ({
  theme
}) => theme.orbit.colorIconAttention, Label);
StyledListChoice.defaultProps = {
  theme: defaultTheme
};
const StyledListChoiceContent = styled.div.withConfig({
  displayName: "ListChoice__StyledListChoiceContent",
  componentId: "sc-1y53xes-2"
})(["display:flex;flex-direction:column;justify-content:center;width:100%;padding-", ":", ";", "{line-height:", ";}"], right, ({
  theme
}) => theme.orbit.spaceSmall, StyledHeading, ({
  theme
}) => theme.orbit.lineHeightText);
StyledListChoiceContent.defaultProps = {
  theme: defaultTheme
};

const ListChoice = props => {
  const {
    dataTest,
    icon,
    title,
    description,
    selectable,
    onClick,
    selected
  } = props;

  const handleKeyDown = ev => {
    if (onClick) {
      if (ev.keyCode === KEY_CODE_MAP.ENTER) {
        onClick(ev);
      } else if (ev.keyCode === KEY_CODE_MAP.SPACE) {
        ev.preventDefault();
        onClick(ev);
      }
    }
  };

  return React.createElement(StyledListChoice, {
    onClick: onClick,
    "data-test": dataTest,
    onKeyDown: handleKeyDown,
    tabIndex: "0",
    role: "button"
  }, icon && React.createElement(StyledListChoiceIcon, null, icon), React.createElement(StyledListChoiceContent, null, React.createElement(Heading, {
    type: "title4",
    element: "div"
  }, title), description && React.createElement(Text, {
    type: "secondary",
    size: "small"
  }, description)), selectable && React.createElement(Checkbox, {
    checked: selected,
    readOnly: true,
    tabIndex: "-1"
  }));
};

export default ListChoice;