Create FieldRadioButton component

src/components/FieldRadioButton/FieldRadioButton.css

@@ -0,0 +1,64 @@
+@import '../../marketplace.css';
+
+.root {
+  position: relative;
+}
+
+.input {
+  position: absolute;
+  opacity: 0;
+  height: 0;
+  width: 0;
+
+  /* Display the "check" when checked */
+  &:checked + label .checked {
+    display: inline;
+  }
+
+  /* Hightlight the text on checked, hover and focus */
+  &:focus + label .text,
+  &:hover + label .text,
+  &:checked + label .text {
+    color: var(--matterColorDark);
+  }
+}
+
+.label {
+  display: flex;
+  align-items: center;
+  padding: 0;
+}
+
+.radioButtonWrapper {
+  /* This should follow line-height */
+  height: 32px;
+  margin-top: -1px;
+  margin-right: 12px;
+  align-self: baseline;
+
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.checked {
+  display: none;
+  stroke: var(--marketplaceColor);
+  fill: var(--marketplaceColor);
+}
+
+.notChecked {
+  stroke: var(--matterColorAnti);
+}
+
+.required {
+  stroke: var(--attentionColor);
+}
+
+.text {
+  @apply --marketplaceListingAttributeFontStyles;
+  color: var(--matterColor);
+  margin-top: -1px;
+  margin-bottom: 1px;
+  cursor: pointer;
+}

src/components/FieldRadioButton/FieldRadioButton.example.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Form as FinalForm, FormSpy } from 'react-final-form';
+import { Button } from '..';
+import FieldRadioButton from './FieldRadioButton';
+const formName = 'Styleguide.FieldRadioButton.Form';
+
+const FormComponent = props => (
+  <FinalForm
+    {...props}
+    form={formName}
+    render={fieldRenderProps => {
+      const { handleSubmit, onChange, invalid, pristine, submitting } = fieldRenderProps;
+
+      const submitDisabled = invalid || pristine || submitting;
+
+      const required = true;
+
+      const showAsRequired = pristine && required;
+
+      return (
+        <form
+          onSubmit={e => {
+            e.preventDefault();
+            handleSubmit(e);
+          }}
+        >
+          <FormSpy onChange={onChange} />
+          <FieldRadioButton
+            id="option-id1"
+            name="option-group"
+            label="option 1"
+            value="option1"
+            showAsRequired={showAsRequired}
+          />
+          <FieldRadioButton
+            id="option-id2"
+            name="option-group"
+            label="option 2"
+            value="option2"
+            showAsRequired={showAsRequired}
+          />
+          <FieldRadioButton
+            id="option-id3"
+            name="option-group"
+            label="option 3"
+            value="option3"
+            showAsRequired={showAsRequired}
+          />
+
+          <Button style={{ marginTop: 24 }} type="submit" disabled={submitDisabled}>
+            Submit
+          </Button>
+        </form>
+      );
+    }}
+  />
+);
+
+export const RadioButtonRequired = {
+  component: FormComponent,
+  props: {
+    onChange: formState => {
+      if (Object.keys(formState.values).length > 0) {
+        console.log('form values changed to:', formState.values);
+      }
+    },
+    onSubmit: values => {
+      console.log('Submit values of FieldRadioButton: ', values);
+    },
+  },
+  group: 'inputs',
+};

src/components/FieldRadioButton/FieldRadioButton.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import { node, string } from 'prop-types';
+import classNames from 'classnames';
+import { Field } from 'react-final-form';
+
+import css from './FieldRadioButton.css';
+
+const IconRadioButton = props => {
+  return (
+    <div>
+      <svg className={props.className} width="14" height="14" xmlns="http://www.w3.org/2000/svg">
+        <circle
+          className={props.showAsRequired ? css.required : css.notChecked}
+          cx="5"
+          cy="19"
+          r="6"
+          transform="translate(2 -12)"
+          strokeWidth="2"
+          fill="none"
+          fillRule="evenodd"
+        />
+
+        <g className={css.checked} transform="translate(2 -12)" fill="none" fillRule="evenodd">
+          <circle strokeWidth="2" cx="5" cy="19" r="6" />
+          <circle fill="#FFF" fillRule="nonzero" cx="5" cy="19" r="3" />
+        </g>
+      </svg>
+    </div>
+  );
+};
+
+IconRadioButton.defaultProps = { className: null };
+
+IconRadioButton.propTypes = { className: string };
+
+const FieldRadioButtonComponent = props => {
+  const { rootClassName, className, svgClassName, id, label, showAsRequired, ...rest } = props;
+
+  const classes = classNames(rootClassName || css.root, className);
+  const radioButtonProps = {
+    id,
+    className: css.input,
+    component: 'input',
+    type: 'radio',
+    ...rest,
+  };
+
+  return (
+    <span className={classes}>
+      <Field {...radioButtonProps} />
+      <label htmlFor={id} className={css.label}>
+        <span className={css.radioButtonWrapper}>
+          <IconRadioButton className={svgClassName} showAsRequired={showAsRequired} />
+        </span>
+        <span className={css.text}>{label}</span>
+      </label>
+    </span>
+  );
+};
+
+FieldRadioButtonComponent.defaultProps = {
+  className: null,
+  rootClassName: null,
+  svgClassName: null,
+  label: null,
+};
+
+FieldRadioButtonComponent.propTypes = {
+  className: string,
+  rootClassName: string,
+  svgClassName: string,
+
+  // Id is needed to connect the label with input.
+  id: string.isRequired,
+  label: node,
+
+  // Name groups several RadioButtones to an array of selected values
+  name: string.isRequired,
+
+  // RadioButton needs a value that is passed forward when user checks the RadioButton
+  value: string.isRequired,
+};
+
+export default FieldRadioButtonComponent;

src/components/index.js

@@ -21,6 +21,7 @@ export { default as FieldCheckboxGroup } from './FieldCheckboxGroup/FieldCheckbo
 export { default as FieldCurrencyInput } from './FieldCurrencyInput/FieldCurrencyInput';
 export { default as FieldDateInput } from './FieldDateInput/FieldDateInput';
 export { default as FieldDateRangeInput } from './FieldDateRangeInput/FieldDateRangeInput';
+export { default as FieldRadioButton } from './FieldRadioButton/FieldRadioButton';
 export { default as FieldPhoneNumberInput } from './FieldPhoneNumberInput/FieldPhoneNumberInput';
 export { default as FieldReviewRating } from './FieldReviewRating/FieldReviewRating';
 export { default as FieldSelect } from './FieldSelect/FieldSelect';

src/examples.js

@@ -13,6 +13,7 @@ import * as FieldCurrencyInput from './components/FieldCurrencyInput/FieldCurren
 import * as FieldDateInput from './components/FieldDateInput/FieldDateInput.example';
 import * as FieldDateRangeInput from './components/FieldDateRangeInput/FieldDateRangeInput.example';
 import * as FieldPhoneNumberInput from './components/FieldPhoneNumberInput/FieldPhoneNumberInput.example';
+import * as FieldRadioButton from './components/FieldRadioButton/FieldRadioButton.example';
 import * as FieldRangeSlider from './components/FieldRangeSlider/FieldRangeSlider.example';
 import * as FieldReviewRating from './components/FieldReviewRating/FieldReviewRating.example';
 import * as FieldSelect from './components/FieldSelect/FieldSelect.example';
@@ -107,6 +108,7 @@ export {
   FieldDateInput,
   FieldDateRangeInput,
   FieldPhoneNumberInput,
+  FieldRadioButton,
   FieldRangeSlider,
   FieldReviewRating,
   FieldSelect,