@shopgate/engage/components/RadioCard/RadioCard.js

Shopgate's ENGAGE library.

import React from 'react';
import PropTypes from 'prop-types';
import { css } from 'glamor';
import { themeConfig } from '@shopgate/pwa-common/helpers/config';
import classNames from 'classnames';
import Card from '@shopgate/pwa-ui-shared/Card';
import { useRadioGroup } from "../RadioGroup";
import Radio from "../Radio";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const {
  variables
} = themeConfig;
const styles = {
  card: css({
    borderRadius: 4,
    padding: '8px 8px 8px 4px',
    display: 'flex',
    alignItems: 'center'
  }).toString(),
  content: css({
    padding: `${variables.gap.small}px ${variables.gap.small}px ${variables.gap.small}px 0`,
    width: '100%'
  }).toString(),
  contentDisabled: css({
    opacity: 0.5,
    pointerEvents: 'none'
  }).toString(),
  radio: css({
    alignItems: 'center'
  }).toString()
};

/**
 * The default card component
 * @param {Object} props The component props
 * @returns {JSX}
 */
const CardComponent = ({
  children,
  className
}) => /*#__PURE__*/_jsx(Card, {
  className: classNames(styles.card, className),
  children: children
});
CardComponent.defaultProps = {
  children: null,
  className: null
};

/**
 * The RadioCard component
 * @param {Object} props The component props
 * @returns {JSX}
 */
const RadioCard = ({
  children,
  name: nameProp,
  onChange,
  checked,
  disabled: disabledProp,
  value,
  attributes,
  classes,
  renderCard: RenderCard
}) => {
  const radioGroup = useRadioGroup();
  let name = nameProp;
  let disabled = disabledProp;
  if (radioGroup) {
    if (typeof radioGroup.name !== 'undefined') {
      ({
        name
      } = radioGroup);
    }
    if (typeof radioGroup.disabled !== 'undefined') {
      ({
        disabled
      } = radioGroup);
    }
  }
  return /*#__PURE__*/_jsxs(RenderCard, {
    className: classes.root,
    children: [/*#__PURE__*/_jsx(Radio, {
      name: name,
      value: value,
      onChange: onChange,
      disabled: disabled,
      checked: checked,
      attributes: attributes,
      classes: {
        root: styles.radio
      }
    }), /*#__PURE__*/_jsx("label", {
      htmlFor: `${name}_${value}`,
      className: classNames(styles.content, {
        [styles.contentDisabled]: disabled,
        [classes.disabled]: disabled
      }),
      children: children
    })]
  });
};
RadioCard.defaultProps = {
  children: null,
  checked: null,
  classes: {},
  disabled: false,
  onChange: null,
  name: null,
  value: null,
  attributes: null,
  renderCard: CardComponent
};
export default RadioCard;