From fd4d258d05fbc8c5ee850b726588372ae601c985 Mon Sep 17 00:00:00 2001
From: Jenni Nurmi <jenni@sharetribe.com>
Date: Mon, 17 Dec 2018 09:59:04 +0200
Subject: [PATCH] Add example for not required radio button field

---
 .../FieldRadioButton.example.js               | 37 ++++++++++++++++---
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/components/FieldRadioButton/FieldRadioButton.example.js b/src/components/FieldRadioButton/FieldRadioButton.example.js
index c08289ad..63664a62 100644
--- a/src/components/FieldRadioButton/FieldRadioButton.example.js
+++ b/src/components/FieldRadioButton/FieldRadioButton.example.js
@@ -9,12 +9,18 @@ const FormComponent = props => (
     {...props}
     form={formName}
     render={fieldRenderProps => {
-      const { handleSubmit, onChange, invalid, pristine, submitting } = fieldRenderProps;
+      const {
+        handleSubmit,
+        onChange,
+        invalid,
+        pristine,
+        submitting,
+        required,
+        id,
+      } = fieldRenderProps;
 
       const submitDisabled = invalid || pristine || submitting;
 
-      const required = true;
-
       const showAsRequired = pristine && required;
 
       return (
@@ -26,21 +32,21 @@ const FormComponent = props => (
         >
           <FormSpy onChange={onChange} />
           <FieldRadioButton
-            id="option-id1"
+            id={`${id}-option-id1`}
             name="option-group"
             label="option 1"
             value="option1"
             showAsRequired={showAsRequired}
           />
           <FieldRadioButton
-            id="option-id2"
+            id={`${id}-option-id2`}
             name="option-group"
             label="option 2"
             value="option2"
             showAsRequired={showAsRequired}
           />
           <FieldRadioButton
-            id="option-id3"
+            id={`${id}-option-id3`}
             name="option-group"
             label="option 3"
             value="option3"
@@ -67,6 +73,25 @@ export const RadioButtonRequired = {
     onSubmit: values => {
       console.log('Submit values of FieldRadioButton: ', values);
     },
+    required: true,
+    id: 'radiobutton',
+  },
+  group: 'inputs',
+};
+
+export const RadioButtonNotRequired = {
+  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);
+    },
+    required: false,
+    id: 'radiobutton2',
   },
   group: 'inputs',
 };