@telia/styleguide/es/molecules/RadioButtonList/RadioButtonList.js

This is a living styleguide, showing the Atomic Design components which should be used in Telia Norway's web applications to achieve a common look & feel, and therefore user experience.

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import RadioButtonWithLabel from './RadioButtonWithLabel';

const getClassName = (type, hasRichContent) => classnames('radio-button-list', {
  'radio-button-list--horizontal': type === 'horizontal',
  'radio-button-list--rich-content': hasRichContent
});
/**
 * Status: *finished*.
 *
 */


const RadioButtonList = ({
  list = [],
  selectedIndex,
  name,
  type,
  hasRichContent,
  children
}) => React.createElement("div", {
  className: getClassName(type, hasRichContent)
}, hasRichContent ? children : list.map((radio, index) => React.createElement(RadioButtonWithLabel, {
  checked: index === selectedIndex,
  key: index,
  label: radio.label,
  name: name,
  value: radio.value
})));

RadioButtonList.propTypes = process.env.NODE_ENV !== "production" ? {
  list: PropTypes.arrayOf(PropTypes.shape({
    label: PropTypes.string.isRequired,
    value: PropTypes.any
  })),
  selectedIndex: PropTypes.number,
  name: PropTypes.string,
  type: PropTypes.oneOf(['horizontal', 'vertical']),
  hasRichContent: PropTypes.bool,
  children: PropTypes.node
} : {};
export default RadioButtonList;