// (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP

import React, { Component } from 'react';
import RadioButton from 'grommet/components/RadioButton';
import FormField from 'grommet/components/FormField';
import DocsArticle from '../../components/DocsArticle';
import Code from '../../components/Code';

RadioButton.displayName = 'RadioButton';
FormField.displayName = 'FormField';

export default class RadioButtonDoc extends Component {

  constructor () {
    super();
    this._onChange = this._onChange.bind(this);
    this.state = { choice: 'choice-1' };
  }

  _onChange (choice) {
    this.setState({choice: choice});
  }

  render () {
    return (
      <DocsArticle title='RadioButton'>

        <section>
          <p>A radio button in a web form. We have a separate component from the
            browser base so we can style it.</p>
          <FormField>
            <RadioButton id='choice1-1' name='choice1-1' label='Choice 1'
              checked={this.state.choice === 'choice-1'}
              onChange={this._onChange.bind(this, 'choice-1')} />
            <RadioButton id='choice1-2' name='choice1-2' label='Choice 2'
              checked={this.state.choice === 'choice-2'}
              onChange={this._onChange.bind(this, 'choice-2')} />
          </FormField>
        </section>

        <section>
          <h2>Properties</h2>
          <dl>
          <dt><code>checked         true|false</code></dt>
          <dd>Same as React <code>{'<input checked={} />'}</code>.</dd>
          <dt><code>defaultChecked  true|false</code></dt>
          <dd>Same as React <code>{'<input defaultChecked={} />'}</code>.</dd>
          <dt><code>disabled        true|false</code></dt>
          <dd>Same as React <code>{'<input disabled={} />'}</code>.</dd>
          <dt><code>id              {'{string}'}</code></dt>
          <dd>The DOM id attribute value to use for the
            underlying <code>{'<input />'}</code> element.</dd>
          <dt><code>label           {'{string|node}'}</code></dt>
          <dd>Label text to place next to the control.</dd>
          <dt><code>name            {'{string}'}</code></dt>
          <dd>The DOM name attribute value to use for the
            underlying <code>{'<input />'}</code> element.</dd>
          <dt><code>onChange        {'{function}'}</code></dt>
          <dd>Same as React <code>{'<input onChange={} />'}</code>.</dd>
          <dt><code>value           {'{string}'}</code></dt>
          <dd>The DOM value attribute to use for the
            underlying <code>{'<input />'}</code> element.</dd>
          </dl>
        </section>

        <section>
          <h2>Usage</h2>
          <Code preamble={
            `import RadioButton from 'grommet/components/RadioButton';`}>
            <FormField>
              <RadioButton id='choice1-1' name='choice1-1' label='Choice 1'
                checked={this.state.choice === 'choice-1'}
                onChange={() => {}} />
              <RadioButton id='choice1-2' name='choice1-2' label='Choice 2'
                checked={this.state.choice === 'choice-2'}
                onChange={() => {}} />
            </FormField>
          </Code>
        </section>

      </DocsArticle>
    );
  }
};

@@ -163,16 +163,60 @@
 utton';%0A
+import Form from 'grommet/components/Form';%0A
 import F
@@ -903,16 +903,36 @@
 it.%3C/p%3E%0A
+%0A          %3CForm%3E%0A  
         
@@ -937,32 +937,34 @@
     %3CFormField%3E%0A
+  
             %3CRad
@@ -1027,32 +1027,34 @@
 '%0A              
+  
 checked=%7Bthis.st
@@ -1072,32 +1072,34 @@
 === 'choice-1'%7D%0A
+  
               on
@@ -1152,32 +1152,34 @@
  /%3E%0A            
+  
 %3CRadioButton id=
@@ -1216,32 +1216,34 @@
 abel='Choice 2'%0A
+  
               ch
@@ -1289,32 +1289,34 @@
 %7D%0A              
+  
 onChange=%7Bthis._
@@ -1353,32 +1353,34 @@
 )%7D /%3E%0A          
+ 
+ 
 %3C/FormField%3E%0A   
@@ -1368,32 +1368,50 @@
    %3C/FormField%3E%0A
+          %3C/Form%3E%0A
         %3C/sectio

Put RadioButton example inside a Form.