@axeptio/design-system/build/src/Core/RadioGroup/index.jsx

Design System for Axeptio

import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';

const Root = styled.ul`
  display: inline-flex;
  align-items: center;
  margin: 0 0 20px;
  font-family: ${props => props.theme.fonts.text};
  font-size: 15px;
  font-weight: 600;
  padding: 4px;
  list-style: none;
  border-radius: 1000px;
  background: ${props => props.theme.colors.grey.v100};
  label {
    user-select: none;
  }
`;

const List = styled.li`
  margin: 0;
  padding: 0;
`;

const Input = styled.input`
  position: absolute;
  clip: rect(0, 0, 0, 0);
  &:checked ~ span {
    background-color: ${props => props.background};
    color: #ffffff;
  }
`;

const Text = styled.span`
  display: flex;
  align-items: center;
  padding: 8px 16px;
  font-weight: 600;
  font-family: ${props => props.theme.fonts.text};
  color: ${props => (props.checked ? props.theme.colors.white : props.theme.colors.secondary)};
  font-size: 15px;
  border-radius: 1000px;
  cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
  transition: color 250ms ease 0s;
  transition: background-color 300ms ease-out 0s;
`;

const RadioGroup = ({ list, currentCategory, handleCategoryChange }) => {
  return (
    <Root>
      {list.map((elem, index) => {
        return (
          <List checked={currentCategory === elem.name} key={index}>
            <label htmlFor={elem.name}>
              <Input
                id={elem.name}
                type="radio"
                disabled={elem?.disabled}
                name="category"
                value={elem.name}
                checked={currentCategory === elem.name}
                onChange={() => {
                  handleCategoryChange(elem.name);
                }}
                onClick={() => {
                  handleCategoryChange(elem.name);
                }}
                background={elem.background}
              />
              <Text disabled={elem?.disabled} htmlFor={elem.name} checked={currentCategory === elem.name}>
                {elem.name}
              </Text>
            </label>
          </List>
        );
      })}
    </Root>
  );
};

RadioGroup.propTypes = {
  list: PropTypes.array.isRequired,
  currentCategory: PropTypes.string,
  handleCategoryChange: PropTypes.func
};

export default RadioGroup;