superdesk-ui-framework 4.0.47 → 4.0.49

package/examples/pages/components/Checkboxs.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as Markup from '../../js/react';
 import * as Components from '../playgrounds/react-playgrounds/components/Index';
 
-import { Checkbox, CheckboxButton, CheckGroup, CheckButtonGroup, Alert, Prop, PropsList } from '../../../app-typescript';
+import {Checkbox, CheckboxButton, CheckGroup, CheckButtonGroup, Alert, Prop, PropsList} from '../../../app-typescript';
 
 interface IState {
     value1: boolean;
@@ -19,7 +19,7 @@ interface IState {
     value12: boolean;
     value13: boolean;
     value14: boolean;
-    value15: boolean;   
+    value15: boolean;
     value16: boolean;
     value17: boolean;
     value18: boolean;
@@ -109,40 +109,78 @@ export default class CheckboxsDoc extends React.Component<{}, IState> {
             <section className="docs-page__container">
                 <h2 className="docs-page__h2">Checkbox</h2>
                 <p className="docs-page__paragraph"></p>
-                <Markup.ReactMarkupCodePreview>{`
+                <Markup.ReactMarkupCodePreview>
+                    {`
                     <Checkbox checked={value1} label={{text:'Checkbox label end'}} 
                               onChange={(value) => this.setState(() => ({ value1: value }))} />
                 `}
                 </Markup.ReactMarkupCodePreview>
                 <h3 className="docs-page__h3">Basic Checkbox</h3>
-                <p className="docs-page__paragraph">The label of the checkbox is by default always on the end (right). Although it's not in line with Superdesk design standards the label can also be placed to the start (left), by addind the prop <code>labelSide='start'</code>.</p>
+                <p className="docs-page__paragraph">
+                    The label of the checkbox is by default always on the end (right). Although it's not in line with
+                    Superdesk design standards the label can also be placed to the start (left), by addind the prop{' '}
+                    <code>labelSide='start'</code>.
+                </p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <p className="docs-page__paragraph">// Label on the end/right (default)</p>
-                        <div className='form__row'>
+                        <div className="form__row">
                             <CheckGroup>
-                                <Checkbox checked={this.state.value1} label={{text:'Checkbox label end'}} onChange={(value) => this.setState(() => ({ value1: value }))} />
-                                <Checkbox checked={this.state.value2} label={{text:'Check me!'}} onChange={(value) => this.setState(() => ({ value2: value }))} />
-                                <Checkbox checked={this.state.value3} label={{text:'Check me too!'}} onChange={(value) => this.setState(() => ({ value3: value }))} />
-                                <Checkbox checked={this.state.value4} label={{text:'I"m disabled :('}} disabled= {true} onChange={(value) => this.setState(() => ({ value4: value }))} />
-                                <Checkbox checked={this.state.value5} label={{text:"I'm disabled and checked :("}} disabled= {true} onChange={(value) => this.setState(() => ({ value5: value }))} />
+                                <Checkbox
+                                    checked={this.state.value1}
+                                    label={{text: 'Checkbox label end'}}
+                                    onChange={(value) => this.setState(() => ({value1: value}))}
+                                />
+                                <Checkbox
+                                    checked={this.state.value2}
+                                    label={{text: 'Check me!'}}
+                                    onChange={(value) => this.setState(() => ({value2: value}))}
+                                />
+                                <Checkbox
+                                    checked={this.state.value3}
+                                    label={{text: 'Check me too!'}}
+                                    onChange={(value) => this.setState(() => ({value3: value}))}
+                                />
+                                <Checkbox
+                                    checked={this.state.value4}
+                                    label={{text: 'I"m disabled :('}}
+                                    disabled={true}
+                                    onChange={(value) => this.setState(() => ({value4: value}))}
+                                />
+                                <Checkbox
+                                    checked={this.state.value5}
+                                    label={{text: "I'm disabled and checked :("}}
+                                    disabled={true}
+                                    onChange={(value) => this.setState(() => ({value5: value}))}
+                                />
                             </CheckGroup>
                         </div>
                         <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Label on the start</p>
                         <p className="docs-page__paragraph--small">This option should be avoided in Superdesk.</p>
-                        <div className='form__row'>
+                        <div className="form__row">
                             <CheckGroup>
-                                <Checkbox checked={this.state.value6} label={{text:'Checkbox label start', side:'start'}} onChange={(value) => this.setState(() => ({ value6: value }))} />
+                                <Checkbox
+                                    checked={this.state.value6}
+                                    label={{text: 'Checkbox label start', side: 'start'}}
+                                    onChange={(value) => this.setState(() => ({value6: value}))}
+                                />
                             </CheckGroup>
                         </div>
-                        <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Checkbox with custom values</p>
-                        <div className='form__row'>
+                        <p className="docs-page__paragraph docs-page__paragraph--topMarginL">
+                            // Checkbox with custom values
+                        </p>
+                        <div className="form__row">
                             <CheckGroup>
-                                <Checkbox checked={this.state.value7} label={{text:'Checkbox with custom values'}} onChange={(value) => this.setState(() => ({ value7: value }))} />
+                                <Checkbox
+                                    checked={this.state.value7}
+                                    label={{text: 'Checkbox with custom values'}}
+                                    onChange={(value) => this.setState(() => ({value7: value}))}
+                                />
                             </CheckGroup>
                         </div>
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         // Label on the end (default)
                         <CheckGroup>
                             <Checkbox checked={value1} label={{text:'Checkbox label end'}}
@@ -173,30 +211,65 @@ export default class CheckboxsDoc extends React.Component<{}, IState> {
                 </Markup.ReactMarkup>
 
                 <Components.GraphicButtonsGroup>
-                    <Components.GraphicButton graphic='design' text='Checkbox usage guidelines' smallText='Design guidelines' link='#/design/checkbox-and-radio' />
+                    <Components.GraphicButton
+                        graphic="design"
+                        text="Checkbox usage guidelines"
+                        smallText="Design guidelines"
+                        link="#/design/checkbox-and-radio"
+                    />
                 </Components.GraphicButtonsGroup>
                 <h3 className="docs-page__h3">Checkbox groups</h3>
-                <p className="docs-page__paragraph"><code>CheckGroup</code> is a helpful wrapper component used to group <code>Checkbox</code> components. By default the checkboxes are grouped horizontaly. To group them verticaly – in a list-like view – add the prop <code>orientation='vertical'</code> to the <code>CheckGroup</code> component.</p>
+                <p className="docs-page__paragraph">
+                    <code>CheckGroup</code> is a helpful wrapper component used to group <code>Checkbox</code>{' '}
+                    components. By default the checkboxes are grouped horizontaly. To group them verticaly – in a
+                    list-like view – add the prop <code>orientation='vertical'</code> to the <code>CheckGroup</code>{' '}
+                    component.
+                </p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <p className="docs-page__paragraph">// Horizontal group (default)</p>
-                        <div className='form__group'>
+                        <div className="form__group">
                             <CheckGroup>
-                                <Checkbox checked={this.state.value16} label={{text:'Checkbox one'}} onChange={(value) => this.setState(() => ({ value16: value }))} />
-                                <Checkbox checked={this.state.value17} label={{text:'Checkbox two'}} onChange={(value) => this.setState(() => ({ value17: value }))} />
-                                <Checkbox checked={this.state.value18} label={{text:'Checkbox three'}} onChange={(value) => this.setState(() => ({ value18: value }))} />
+                                <Checkbox
+                                    checked={this.state.value16}
+                                    label={{text: 'Checkbox one'}}
+                                    onChange={(value) => this.setState(() => ({value16: value}))}
+                                />
+                                <Checkbox
+                                    checked={this.state.value17}
+                                    label={{text: 'Checkbox two'}}
+                                    onChange={(value) => this.setState(() => ({value17: value}))}
+                                />
+                                <Checkbox
+                                    checked={this.state.value18}
+                                    label={{text: 'Checkbox three'}}
+                                    onChange={(value) => this.setState(() => ({value18: value}))}
+                                />
                             </CheckGroup>
                         </div>
                         <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Vertical group</p>
-                        <div className='form__group'>
-                            <CheckGroup orientation='vertical'>
-                                <Checkbox checked={this.state.value19} label={{text:'Checkbox one'}} onChange={(value) => this.setState(() => ({ value19: value }))} />
-                                <Checkbox checked={this.state.value20} label={{text:'Checkbox two'}} onChange={(value) => this.setState(() => ({ value20: value }))} />
-                                <Checkbox checked={this.state.value21} label={{text:'Checkbox three'}} onChange={(value) => this.setState(() => ({ value21: value }))} />
+                        <div className="form__group">
+                            <CheckGroup orientation="vertical">
+                                <Checkbox
+                                    checked={this.state.value19}
+                                    label={{text: 'Checkbox one'}}
+                                    onChange={(value) => this.setState(() => ({value19: value}))}
+                                />
+                                <Checkbox
+                                    checked={this.state.value20}
+                                    label={{text: 'Checkbox two'}}
+                                    onChange={(value) => this.setState(() => ({value20: value}))}
+                                />
+                                <Checkbox
+                                    checked={this.state.value21}
+                                    label={{text: 'Checkbox three'}}
+                                    onChange={(value) => this.setState(() => ({value21: value}))}
+                                />
                             </CheckGroup>
                         </div>
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         // Horizontal group (default)
                         <CheckGroup>
                             <Checkbox checked={value16} label={{text:'Checkbox one'}}
@@ -221,7 +294,8 @@ export default class CheckboxsDoc extends React.Component<{}, IState> {
                 </Markup.ReactMarkup>
 
                 <h3 className="docs-page__h3">Button style checkbox</h3>
-                <Markup.ReactMarkupCodePreview>{`
+                <Markup.ReactMarkupCodePreview>
+                    {`
                     <CheckButtonGroup>
                         <CheckboxButton checked={value1} label={{text:'Button Checkbox one'}} 
                                         onChange={(value) => this.setState(() => ({ value1: value }))} />
@@ -230,47 +304,130 @@ export default class CheckboxsDoc extends React.Component<{}, IState> {
                     </CheckButtonGroup>
                 `}
                 </Markup.ReactMarkupCodePreview>
-                <p className="docs-page__paragraph">The <code>CheckboxButton</code> component shares the same functionality as the Checkbox component but has a different visual appearance. Any icon from the <a className='link' href='#/components/icons' target='blank'>icon font</a> can be added to the component by specifying a value (icon name without the <code>icon-</code> prefix) inside the label prop e.g. <code>label={'{text: "Button style with icon", icon: "th-list"}'}</code> prop.</p>
+                <p className="docs-page__paragraph">
+                    The <code>CheckboxButton</code> component shares the same functionality as the Checkbox component
+                    but has a different visual appearance. Any icon from the{' '}
+                    <a className="link" href="#/components/icons" target="blank">
+                        icon font
+                    </a>{' '}
+                    can be added to the component by specifying a value (icon name without the <code>icon-</code>{' '}
+                    prefix) inside the label prop e.g.{' '}
+                    <code>label={'{text: "Button style with icon", icon: "th-list"}'}</code> prop.
+                </p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Button style checkbox</p>
-                        <div className='form__group'>
+                        <p className="docs-page__paragraph docs-page__paragraph--topMarginL">
+                            // Button style checkbox
+                        </p>
+                        <div className="form__group">
                             <CheckButtonGroup>
-                                <CheckboxButton checked={this.state.value8} label={{text: 'Button style checkbox'}} onChange={(value) => this.setState(() => ({ value8: value }))} />
-                                <CheckboxButton checked={this.state.value9} label={{text: 'Check this out'}} onChange={(value) => this.setState(() => ({ value9: value }))} />
-                                <CheckboxButton checked={this.state.value10} label={{text: 'Check this too!'}} onChange={(value) => this.setState(() => ({ value10: value }))} />
-                                <CheckboxButton checked={this.state.value11} label={{text: "U can't touch this"}} disabled={true} onChange={(value) => this.setState(() => ({ value11: value }))} />
+                                <CheckboxButton
+                                    checked={this.state.value8}
+                                    label={{text: 'Button style checkbox'}}
+                                    onChange={(value) => this.setState(() => ({value8: value}))}
+                                />
+                                <CheckboxButton
+                                    checked={this.state.value9}
+                                    label={{text: 'Check this out'}}
+                                    onChange={(value) => this.setState(() => ({value9: value}))}
+                                />
+                                <CheckboxButton
+                                    checked={this.state.value10}
+                                    label={{text: 'Check this too!'}}
+                                    onChange={(value) => this.setState(() => ({value10: value}))}
+                                />
+                                <CheckboxButton
+                                    checked={this.state.value11}
+                                    label={{text: "U can't touch this"}}
+                                    disabled={true}
+                                    onChange={(value) => this.setState(() => ({value11: value}))}
+                                />
                             </CheckButtonGroup>
                         </div>
                         <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// With label</p>
-                        <div className='form__group'>
-                            <CheckButtonGroup groupLabel='My group label'>
-                                <CheckboxButton checked={this.state.value42} label={{text: 'Button style checkbox'}} onChange={(value) => this.setState(() => ({ value42: value }))} />
-                                <CheckboxButton checked={this.state.value43} label={{text: 'Check this out'}} onChange={(value) => this.setState(() => ({ value43: value }))} />
-                                <CheckboxButton checked={this.state.value44} label={{text: 'Check this too!'}} onChange={(value) => this.setState(() => ({ value44: value }))} />
-                                <CheckboxButton checked={this.state.value45} label={{text: "U can't touch this"}} disabled={true} onChange={(value) => this.setState(() => ({ value45: value }))} />
+                        <div className="form__group">
+                            <CheckButtonGroup groupLabel="My group label">
+                                <CheckboxButton
+                                    checked={this.state.value42}
+                                    label={{text: 'Button style checkbox'}}
+                                    onChange={(value) => this.setState(() => ({value42: value}))}
+                                />
+                                <CheckboxButton
+                                    checked={this.state.value43}
+                                    label={{text: 'Check this out'}}
+                                    onChange={(value) => this.setState(() => ({value43: value}))}
+                                />
+                                <CheckboxButton
+                                    checked={this.state.value44}
+                                    label={{text: 'Check this too!'}}
+                                    onChange={(value) => this.setState(() => ({value44: value}))}
+                                />
+                                <CheckboxButton
+                                    checked={this.state.value45}
+                                    label={{text: "U can't touch this"}}
+                                    disabled={true}
+                                    onChange={(value) => this.setState(() => ({value45: value}))}
+                                />
                             </CheckButtonGroup>
                         </div>
-                        <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Button style with icon</p>
-                        <div className='form__group'>
+                        <p className="docs-page__paragraph docs-page__paragraph--topMarginL">
+                            // Button style with icon
+                        </p>
+                        <div className="form__group">
                             <CheckButtonGroup>
-                                <CheckboxButton checked={this.state.value12} label={{text: 'Button style with icon', icon: 'th-list'}} onChange={(value) => this.setState(() => ({ value12: value }))} />
-                                <CheckboxButton checked={this.state.value13} label={{text: 'I have an icon!', icon: 'th'}} onChange={(value) => this.setState(() => ({ value13: value }))} />
-                                <CheckboxButton checked={this.state.value14} label={{text: 'Yeah, me too!', icon: 'th-large'}} onChange={(value) => this.setState(() => ({ value14: value }))} />
-                                <CheckboxButton checked={this.state.value15} label={{text: 'I have an icon :)', icon: 'star'}} onChange={(value) => this.setState(() => ({ value15: value }))} />
+                                <CheckboxButton
+                                    checked={this.state.value12}
+                                    label={{text: 'Button style with icon', icon: 'th-list'}}
+                                    onChange={(value) => this.setState(() => ({value12: value}))}
+                                />
+                                <CheckboxButton
+                                    checked={this.state.value13}
+                                    label={{text: 'I have an icon!', icon: 'th'}}
+                                    onChange={(value) => this.setState(() => ({value13: value}))}
+                                />
+                                <CheckboxButton
+                                    checked={this.state.value14}
+                                    label={{text: 'Yeah, me too!', icon: 'th-large'}}
+                                    onChange={(value) => this.setState(() => ({value14: value}))}
+                                />
+                                <CheckboxButton
+                                    checked={this.state.value15}
+                                    label={{text: 'I have an icon :)', icon: 'star'}}
+                                    onChange={(value) => this.setState(() => ({value15: value}))}
+                                />
                             </CheckButtonGroup>
                         </div>
-                        <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Button style with icon only</p>
-                        <div className='form__group'>
+                        <p className="docs-page__paragraph docs-page__paragraph--topMarginL">
+                            // Button style with icon only
+                        </p>
+                        <div className="form__group">
                             <CheckButtonGroup>
-                                <CheckboxButton checked={this.state.value38} label={{text: 'Button style with hidden text', icon: 'th-list', hidden: true}} onChange={(value) => this.setState(() => ({ value38: value }))} />
-                                <CheckboxButton checked={this.state.value39} label={{text: 'The text is hidden but still accessible', icon: 'th', hidden: true}} onChange={(value) => this.setState(() => ({ value39: value }))} />
-                                <CheckboxButton checked={this.state.value40} label={{text: 'The text is still here', icon: 'th-large', hidden: true}} onChange={(value) => this.setState(() => ({ value40: value }))} />
-                                <CheckboxButton checked={this.state.value41} label={{text: 'Icon, no text ;)', icon: 'star', hidden: true}} disabled={true} onChange={(value) => this.setState(() => ({ value41: value }))} />
+                                <CheckboxButton
+                                    checked={this.state.value38}
+                                    label={{text: 'Button style with hidden text', icon: 'th-list', hidden: true}}
+                                    onChange={(value) => this.setState(() => ({value38: value}))}
+                                />
+                                <CheckboxButton
+                                    checked={this.state.value39}
+                                    label={{text: 'The text is hidden but still accessible', icon: 'th', hidden: true}}
+                                    onChange={(value) => this.setState(() => ({value39: value}))}
+                                />
+                                <CheckboxButton
+                                    checked={this.state.value40}
+                                    label={{text: 'The text is still here', icon: 'th-large', hidden: true}}
+                                    onChange={(value) => this.setState(() => ({value40: value}))}
+                                />
+                                <CheckboxButton
+                                    checked={this.state.value41}
+                                    label={{text: 'Icon, no text ;)', icon: 'star', hidden: true}}
+                                    disabled={true}
+                                    onChange={(value) => this.setState(() => ({value41: value}))}
+                                />
                             </CheckButtonGroup>
                         </div>
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         // Button style checkbox
                         <CheckButtonGroup>
                             <CheckboxButton checked={value8} label={{text: 'Button style checkbox'}}
@@ -322,62 +479,132 @@ export default class CheckboxsDoc extends React.Component<{}, IState> {
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
-                <h3 className="docs-page__h3">Button style checkbox Groups</h3>          
-                <p className="docs-page__paragraph"><code>CheckButtonGroup</code> is a helpful wrapper component used to group <code>CheckboxButton</code> components. By default the CheckboxButton components are grouped horizontaly. A few more options are available compared to the <code>CheckGroup</code> component – alignment (start, end and center) and grid layout. </p>
-                <Alert style='hollow' size='small' type='primary'>
+                <h3 className="docs-page__h3">Button style checkbox Groups</h3>
+                <p className="docs-page__paragraph">
+                    <code>CheckButtonGroup</code> is a helpful wrapper component used to group{' '}
+                    <code>CheckboxButton</code> components. By default the CheckboxButton components are grouped
+                    horizontaly. A few more options are available compared to the <code>CheckGroup</code> component –
+                    alignment (start, end and center) and grid layout.{' '}
+                </p>
+                <Alert style="hollow" size="small" type="primary">
                     NOTE: Alignment will work only in parent elements with display: flex;
                 </Alert>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Start (default)</p>
-                        <div className='form__row form__row--flex docs-page__test-helper-2'>
+                        <div className="form__row form__row--flex docs-page__test-helper-2">
                             <CheckButtonGroup>
-                                <CheckboxButton checked={this.state.value22} label={{text: 'Option one'}} onChange={(value) => this.setState(() => ({ value22: value }))} />
-                                <CheckboxButton checked={this.state.value23} label={{text: 'Option two'}} onChange={(value) => this.setState(() => ({ value23: value }))} />
+                                <CheckboxButton
+                                    checked={this.state.value22}
+                                    label={{text: 'Option one'}}
+                                    onChange={(value) => this.setState(() => ({value22: value}))}
+                                />
+                                <CheckboxButton
+                                    checked={this.state.value23}
+                                    label={{text: 'Option two'}}
+                                    onChange={(value) => this.setState(() => ({value23: value}))}
+                                />
                             </CheckButtonGroup>
-                        </div>  
+                        </div>
                         <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// End</p>
-                        <div className='form__row form__row--flex docs-page__test-helper-2'>
-                            <CheckButtonGroup align='end' >
-                                <CheckboxButton checked={this.state.value24} label={{text: 'Option one'}} onChange={(value) => this.setState(() => ({ value24: value }))} />
-                                <CheckboxButton checked={this.state.value25} label={{text: 'Option two'}} onChange={(value) => this.setState(() => ({ value25: value }))} />
+                        <div className="form__row form__row--flex docs-page__test-helper-2">
+                            <CheckButtonGroup align="end">
+                                <CheckboxButton
+                                    checked={this.state.value24}
+                                    label={{text: 'Option one'}}
+                                    onChange={(value) => this.setState(() => ({value24: value}))}
+                                />
+                                <CheckboxButton
+                                    checked={this.state.value25}
+                                    label={{text: 'Option two'}}
+                                    onChange={(value) => this.setState(() => ({value25: value}))}
+                                />
                             </CheckButtonGroup>
                         </div>
                         <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Center</p>
-                        <div className='form__row form__row--flex docs-page__test-helper-2'>
-                            <CheckButtonGroup align='center'>
-                                <CheckboxButton checked={this.state.value26} label={{text: 'Option one'}} onChange={(value) => this.setState(() => ({ value26: value }))} />
-                                <CheckboxButton checked={this.state.value27} label={{text: 'Option two'}} onChange={(value) => this.setState(() => ({ value27: value }))} />
+                        <div className="form__row form__row--flex docs-page__test-helper-2">
+                            <CheckButtonGroup align="center">
+                                <CheckboxButton
+                                    checked={this.state.value26}
+                                    label={{text: 'Option one'}}
+                                    onChange={(value) => this.setState(() => ({value26: value}))}
+                                />
+                                <CheckboxButton
+                                    checked={this.state.value27}
+                                    label={{text: 'Option two'}}
+                                    onChange={(value) => this.setState(() => ({value27: value}))}
+                                />
                             </CheckButtonGroup>
                         </div>
                         <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Start + Center + End</p>
-                        <div className='form__row form__row--flex docs-page__test-helper-2'>
+                        <div className="form__row form__row--flex docs-page__test-helper-2">
                             <CheckButtonGroup>
-                                <CheckboxButton checked={this.state.value28} label={{text: 'One'}} onChange={(value) => this.setState(() => ({ value28: value }))} />
-                                <CheckboxButton checked={this.state.value29} label={{text: 'Two'}} onChange={(value) => this.setState(() => ({ value29: value }))} />
+                                <CheckboxButton
+                                    checked={this.state.value28}
+                                    label={{text: 'One'}}
+                                    onChange={(value) => this.setState(() => ({value28: value}))}
+                                />
+                                <CheckboxButton
+                                    checked={this.state.value29}
+                                    label={{text: 'Two'}}
+                                    onChange={(value) => this.setState(() => ({value29: value}))}
+                                />
                             </CheckButtonGroup>
 
-                            <CheckButtonGroup align='center'>
-                                <CheckboxButton checked={this.state.value30} label={{text: 'Three'}} onChange={(value) => this.setState(() => ({ value30: value }))} />
-                                <CheckboxButton checked={this.state.value31} label={{text: 'Four'}} onChange={(value) => this.setState(() => ({ value31: value }))} />
+                            <CheckButtonGroup align="center">
+                                <CheckboxButton
+                                    checked={this.state.value30}
+                                    label={{text: 'Three'}}
+                                    onChange={(value) => this.setState(() => ({value30: value}))}
+                                />
+                                <CheckboxButton
+                                    checked={this.state.value31}
+                                    label={{text: 'Four'}}
+                                    onChange={(value) => this.setState(() => ({value31: value}))}
+                                />
                             </CheckButtonGroup>
 
-                            <CheckButtonGroup align='end'>
-                                <CheckboxButton checked={this.state.value32} label={{text: 'Five'}} onChange={(value) => this.setState(() => ({ value32: value }))} />
-                                <CheckboxButton checked={this.state.value33} label={{text: 'Six'}} onChange={(value) => this.setState(() => ({ value33: value }))} />
+                            <CheckButtonGroup align="end">
+                                <CheckboxButton
+                                    checked={this.state.value32}
+                                    label={{text: 'Five'}}
+                                    onChange={(value) => this.setState(() => ({value32: value}))}
+                                />
+                                <CheckboxButton
+                                    checked={this.state.value33}
+                                    label={{text: 'Six'}}
+                                    onChange={(value) => this.setState(() => ({value33: value}))}
+                                />
                             </CheckButtonGroup>
                         </div>
                         <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Grid</p>
-                        <div className='form__row form__row--flex docs-page__test-helper-2' style={{width:400}}>
+                        <div className="form__row form__row--flex docs-page__test-helper-2" style={{width: 400}}>
                             <CheckButtonGroup grid={true}>
-                                <CheckboxButton checked={this.state.value34} label={{text: 'Option one'}} onChange={(value) => this.setState(() => ({ value34: value }))} />
-                                <CheckboxButton checked={this.state.value35} label={{text: 'Option two'}} onChange={(value) => this.setState(() => ({ value35: value }))} />
-                                <CheckboxButton checked={this.state.value36} label={{text: 'Option three'}} onChange={(value) => this.setState(() => ({ value36: value }))} />
-                                <CheckboxButton checked={this.state.value37} label={{text: 'Option four'}} onChange={(value) => this.setState(() => ({ value37: value }))} />
+                                <CheckboxButton
+                                    checked={this.state.value34}
+                                    label={{text: 'Option one'}}
+                                    onChange={(value) => this.setState(() => ({value34: value}))}
+                                />
+                                <CheckboxButton
+                                    checked={this.state.value35}
+                                    label={{text: 'Option two'}}
+                                    onChange={(value) => this.setState(() => ({value35: value}))}
+                                />
+                                <CheckboxButton
+                                    checked={this.state.value36}
+                                    label={{text: 'Option three'}}
+                                    onChange={(value) => this.setState(() => ({value36: value}))}
+                                />
+                                <CheckboxButton
+                                    checked={this.state.value37}
+                                    label={{text: 'Option four'}}
+                                    onChange={(value) => this.setState(() => ({value37: value}))}
+                                />
                             </CheckButtonGroup>
                         </div>
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         // Start (default)
                         <CheckButtonGroup>
                             <CheckboxButton checked={value22} label={{text: 'Option one'}}
@@ -444,33 +671,147 @@ export default class CheckboxsDoc extends React.Component<{}, IState> {
                 <h3 className="docs-page__h3">Props</h3>
                 <p className="docs-page__paragraph">Checkbox</p>
                 <PropsList>
-                    <Prop name='checked' isRequired={true} type='boolean' default='false' description='The checked state of the input.'/>
-                    <Prop name='label text' isRequired={true} type='string' default='/' description='Label text value.'/>
-                    <Prop name='label side' isRequired={false} type='start | end' default='end' description='Position of label relative to the button.'/>
-                    <Prop name='label hidden' isRequired={false} type='boolean' default='false' description='Hides visually the label and adds an aria-label for screen-reader support.'/>
-                    <Prop name='disabled' isRequired={false} type='boolean' default='false' description='The disabled state of Checkbox.'/>
-                    <Prop name='tabindex' isRequired={false} type='number' default='/' description='Indicates an element can be focused on, and determines how that focus is handled.' />
-                    <Prop name='groupLabelledBy' isRequired={false} type='string' default='/' description='Aria-labelledby for screen-reader support.'/>
+                    <Prop
+                        name="checked"
+                        isRequired={true}
+                        type="boolean"
+                        default="false"
+                        description="The checked state of the input."
+                    />
+                    <Prop
+                        name="label text"
+                        isRequired={true}
+                        type="string"
+                        default="/"
+                        description="Label text value."
+                    />
+                    <Prop
+                        name="label side"
+                        isRequired={false}
+                        type="start | end"
+                        default="end"
+                        description="Position of label relative to the button."
+                    />
+                    <Prop
+                        name="label hidden"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="Hides visually the label and adds an aria-label for screen-reader support."
+                    />
+                    <Prop
+                        name="disabled"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="The disabled state of Checkbox."
+                    />
+                    <Prop
+                        name="tabindex"
+                        isRequired={false}
+                        type="number"
+                        default="/"
+                        description="Indicates an element can be focused on, and determines how that focus is handled."
+                    />
+                    <Prop
+                        name="groupLabelledBy"
+                        isRequired={false}
+                        type="string"
+                        default="/"
+                        description="Aria-labelledby for screen-reader support."
+                    />
                 </PropsList>
                 <p className="docs-page__paragraph">Checkbox Button</p>
                 <PropsList>
-                    <Prop name='checked' isRequired={true} type='boolean' default='/' description='The checked state of the input'/>
-                    <Prop name='label text' isRequired={true} type='string' default='/' description='Label text value.'/>
-                    <Prop name='label icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.'/>
-                    <Prop name='label hidden' isRequired={false} type='boolean' default='false' description='Hides visually the label and adds an aria-label for screen-reader support.'/>
-                    <Prop name='disabled' isRequired={false} type='boolean' default='false' description='The disabled state of CheckboxButton'/>
-                    <Prop name='tabindex' isRequired={false} type='number' default='/' description='Indicates an element can be focused on, and determines how that focus is handled.' />
+                    <Prop
+                        name="checked"
+                        isRequired={true}
+                        type="boolean"
+                        default="/"
+                        description="The checked state of the input"
+                    />
+                    <Prop
+                        name="label text"
+                        isRequired={true}
+                        type="string"
+                        default="/"
+                        description="Label text value."
+                    />
+                    <Prop
+                        name="label icon"
+                        isRequired={false}
+                        type="string"
+                        default="/"
+                        description="Icon class name without the icon- part."
+                    />
+                    <Prop
+                        name="label hidden"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="Hides visually the label and adds an aria-label for screen-reader support."
+                    />
+                    <Prop
+                        name="disabled"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="The disabled state of CheckboxButton"
+                    />
+                    <Prop
+                        name="tabindex"
+                        isRequired={false}
+                        type="number"
+                        default="/"
+                        description="Indicates an element can be focused on, and determines how that focus is handled."
+                    />
                 </PropsList>
                 <p className="docs-page__paragraph">CheckButtonGroup</p>
                 <PropsList>
-                    <Prop name='orientation' isRequired={false} type='horizontal | vertical' default='horizontal' description='The checked state of the input'/>
-                    <Prop name='grid' isRequired={false} type='boolean' default='/' description='Lays out child elements in an uniform grid list.'/>
-                    <Prop name='align' isRequired={false} type='start | end | center | inline' default='start' description='Alignemnt of the whole group relative to the parent container. Container must be flex for this to work.'/>
-                    <Prop name='padded' isRequired={false} type='boolean' default='/' description='Adds padding on the start and end (left and right) of the group.'/>
-                    <Prop name='groupLabel' isRequired={false} type='string' default='/' description='Label text value.'/>
-                    <Prop name='groupLabelledBy' isRequired={false} type='string' default='/' description='Aria-labelledby for screen-reader support.'/>
+                    <Prop
+                        name="orientation"
+                        isRequired={false}
+                        type="horizontal | vertical"
+                        default="horizontal"
+                        description="The checked state of the input"
+                    />
+                    <Prop
+                        name="grid"
+                        isRequired={false}
+                        type="boolean"
+                        default="/"
+                        description="Lays out child elements in an uniform grid list."
+                    />
+                    <Prop
+                        name="align"
+                        isRequired={false}
+                        type="start | end | center | inline"
+                        default="start"
+                        description="Alignemnt of the whole group relative to the parent container. Container must be flex for this to work."
+                    />
+                    <Prop
+                        name="padded"
+                        isRequired={false}
+                        type="boolean"
+                        default="/"
+                        description="Adds padding on the start and end (left and right) of the group."
+                    />
+                    <Prop
+                        name="groupLabel"
+                        isRequired={false}
+                        type="string"
+                        default="/"
+                        description="Label text value."
+                    />
+                    <Prop
+                        name="groupLabelledBy"
+                        isRequired={false}
+                        type="string"
+                        default="/"
+                        description="Aria-labelledby for screen-reader support."
+                    />
                 </PropsList>
             </section>
-        )
+        );
     }
 }