superdesk-ui-framework 4.0.46 → 4.0.48

package/examples/pages/components/SimpleList.tsx

@@ -1,14 +1,27 @@
 import * as React from 'react';
 import * as Markup from '../../js/react';
-import { SimpleList, SimpleListItem, Label, Badge, Icon, IconButton, ButtonGroup, Text, Heading, Prop, PropsList } from '../../../app-typescript';
+import {
+    SimpleList,
+    SimpleListItem,
+    Label,
+    Badge,
+    Icon,
+    IconButton,
+    ButtonGroup,
+    Text,
+    Heading,
+    Prop,
+    PropsList,
+} from '../../../app-typescript';
 
 export default class SimpleListDoc extends React.Component {
     render() {
         return (
-            <section className='docs-page__container'>
-                <h2 className='docs-page__h2'>SimpleList</h2>
-                
-                <Markup.ReactMarkupCodePreview>{`
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">SimpleList</h2>
+
+                <Markup.ReactMarkupCodePreview>
+                    {`
                     <SimpleList>
                         <SimpleListItem>...</SimpleListItem> 
                     </SimpleList>
@@ -21,57 +34,60 @@ export default class SimpleListDoc extends React.Component {
                     <Markup.ReactMarkupPreview>
                         <p className="docs-page__paragraph">// no border / compact (default)</p>
                         <SimpleList>
-                            <SimpleListItem>Maecenas sed diam eget risus varius blandit sit amet non magna.</SimpleListItem>
+                            <SimpleListItem>
+                                Maecenas sed diam eget risus varius blandit sit amet non magna.
+                            </SimpleListItem>
                             <SimpleListItem>Donec sed odio dui.</SimpleListItem>
                             <SimpleListItem>Etiam porta sem malesuada magna mollis euismod.</SimpleListItem>
-                            <SimpleListItem>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</SimpleListItem>
+                            <SimpleListItem>
+                                Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+                            </SimpleListItem>
                         </SimpleList>
                         <p className="docs-page__paragraph">// border / space-between</p>
                         <SimpleList border={true}>
                             <SimpleListItem justify="space-between">
-                                Vehicula Ridiculus <Label text='Active' type='success' style='translucent'/>
+                                Vehicula Ridiculus <Label text="Active" type="success" style="translucent" />
                             </SimpleListItem>
                             <SimpleListItem justify="space-between">
-                                Tellus Mollis Aenean <Label text='Pending' type='warning' style='translucent'/>
+                                Tellus Mollis Aenean <Label text="Pending" type="warning" style="translucent" />
                             </SimpleListItem>
                             <SimpleListItem justify="space-between">
-                                Elit Vestibulum <Label text='Closed' type='alert' style='translucent'/>
+                                Elit Vestibulum <Label text="Closed" type="alert" style="translucent" />
                             </SimpleListItem>
                         </SimpleList>
                         <p className="docs-page__paragraph">// border / comfortable</p>
-                        <SimpleList border={true} density='comfortable'>
+                        <SimpleList border={true} density="comfortable">
                             <SimpleListItem>
-                                <Icon name='photo' />
-                                <Text weight='medium'>Adipiscing</Text>
-                                <Text color='light'>Tellus Dolor Amet</Text>
-                                <ButtonGroup align='end'>
-                                    <IconButton icon='pencil' ariaValue="Edit" onClick={()=> false}  />
-                                    <IconButton icon='trash' ariaValue="Delete" onClick={()=> false}  />
+                                <Icon name="photo" />
+                                <Text weight="medium">Adipiscing</Text>
+                                <Text color="light">Tellus Dolor Amet</Text>
+                                <ButtonGroup align="end">
+                                    <IconButton icon="pencil" ariaValue="Edit" onClick={() => false} />
+                                    <IconButton icon="trash" ariaValue="Delete" onClick={() => false} />
                                 </ButtonGroup>
                             </SimpleListItem>
                             <SimpleListItem>
-                                <Icon name='video' />
-                                <Text weight='medium'>Condimentum</Text>
-                                <Text color='light'>Nullam Ridiculus Mattis</Text>
-                                <ButtonGroup align='end'>
-                                    <IconButton icon='pencil' ariaValue="Edit" onClick={()=> false}  />
-                                    <IconButton icon='trash' ariaValue="Delete" onClick={()=> false}  />
+                                <Icon name="video" />
+                                <Text weight="medium">Condimentum</Text>
+                                <Text color="light">Nullam Ridiculus Mattis</Text>
+                                <ButtonGroup align="end">
+                                    <IconButton icon="pencil" ariaValue="Edit" onClick={() => false} />
+                                    <IconButton icon="trash" ariaValue="Delete" onClick={() => false} />
                                 </ButtonGroup>
                             </SimpleListItem>
                             <SimpleListItem>
-                                <Icon name='slideshow' />
-                                <Text weight='medium'>Magna Bibendum</Text>
-                                <Text color='light'>Vehicula Ornare Cras Aenean</Text>
-                                <ButtonGroup align='end'>
-                                    <IconButton icon='pencil' ariaValue="Edit" onClick={()=> false}  />
-                                    <IconButton icon='trash' ariaValue="Delete" onClick={()=> false}  />
+                                <Icon name="slideshow" />
+                                <Text weight="medium">Magna Bibendum</Text>
+                                <Text color="light">Vehicula Ornare Cras Aenean</Text>
+                                <ButtonGroup align="end">
+                                    <IconButton icon="pencil" ariaValue="Edit" onClick={() => false} />
+                                    <IconButton icon="trash" ariaValue="Delete" onClick={() => false} />
                                 </ButtonGroup>
                             </SimpleListItem>
                         </SimpleList>
-
-
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         // no border / compact (default)
                         <SimpleList>
                             <SimpleListItem>Maecenas sed diam eget risus varius blandit sit amet non magna.</SimpleListItem>
@@ -127,22 +143,56 @@ export default class SimpleListDoc extends React.Component {
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
-
                 <h3 className="docs-page__h3">Props</h3>
                 <p className="docs-page__paragraph">SimpleList</p>
                 <PropsList>
-                    <Prop name='density' isRequired={false} type='compact | comfortable | loose' default='compact' description='Specifies the vertical padding inside the list items. '/>
-                    <Prop name='width' isRequired={false} type='none | x-small | small | medium | large' default='none' description='Defines the width of the list. If not specified the list will take the full width of the parent container.'/>
-                    <Prop name='border' isRequired={false} type='boolean' default='false' description='Adds a dotted border on top of the list and between list items.'/>
-                    <Prop name='className' isRequired={false} type='string' default='false' description='Add custom or helper classes to the list to modify the behaviour (e.g. top or bootom margins).'/>
+                    <Prop
+                        name="density"
+                        isRequired={false}
+                        type="compact | comfortable | loose"
+                        default="compact"
+                        description="Specifies the vertical padding inside the list items. "
+                    />
+                    <Prop
+                        name="width"
+                        isRequired={false}
+                        type="none | x-small | small | medium | large"
+                        default="none"
+                        description="Defines the width of the list. If not specified the list will take the full width of the parent container."
+                    />
+                    <Prop
+                        name="border"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="Adds a dotted border on top of the list and between list items."
+                    />
+                    <Prop
+                        name="className"
+                        isRequired={false}
+                        type="string"
+                        default="false"
+                        description="Add custom or helper classes to the list to modify the behaviour (e.g. top or bootom margins)."
+                    />
                 </PropsList>
                 <p className="docs-page__paragraph">SimpleListItem</p>
                 <PropsList>
-                    <Prop name='stacked' isRequired={false} type='boolean' default='false' description='Changes the flex-direction from row to column.'/>
-                    <Prop name='justify' isRequired={false} type='flex-start | flex-end | center | space-between' default='flex-start' description='Changes the flex justification of the elements inside the list item. '/>
+                    <Prop
+                        name="stacked"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="Changes the flex-direction from row to column."
+                    />
+                    <Prop
+                        name="justify"
+                        isRequired={false}
+                        type="flex-start | flex-end | center | space-between"
+                        default="flex-start"
+                        description="Changes the flex justification of the elements inside the list item. "
+                    />
                 </PropsList>
-
             </section>
-        )
+        );
     }
 }

package/examples/pages/components/SubNav.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react';
 import * as Markup from '../../js/react';
-import { SubNav, NavButton, Button, ButtonGroup, Divider, PropsList, Prop} from '../../../app-typescript';
+import {SubNav, NavButton, Button, ButtonGroup, Divider, PropsList, Prop} from '../../../app-typescript';
 
 export default class SubNavDoc extends React.Component {
     render() {
         return (
-            <section className='docs-page__container'>
-                <h2 className='docs-page__h2'>Sub Navigation bar</h2>
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">Sub Navigation bar</h2>
                 <p></p>
-                <Markup.ReactMarkupCodePreview>{`
+                <Markup.ReactMarkupCodePreview>
+                    {`
                     <SubNav>
                         <ButtonGroup align='start'>
                             <NavButton icon='search' onClick={()=> false} />
@@ -23,55 +24,56 @@ export default class SubNavDoc extends React.Component {
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <SubNav>
-                            <ButtonGroup align='start'>
-                                <NavButton icon='search' onClick={()=> false} />
+                            <ButtonGroup align="start">
+                                <NavButton icon="search" onClick={() => false} />
                             </ButtonGroup>
-                            <ButtonGroup align='end'>
-                                <NavButton icon='expand-thin' type='highlight' onClick={()=> false} />
+                            <ButtonGroup align="end">
+                                <NavButton icon="expand-thin" type="highlight" onClick={() => false} />
                             </ButtonGroup>
                         </SubNav>
-                        <SubNav color='darker'>
-                            <ButtonGroup align='start'>
-                                <NavButton icon='filter-large' type='darker' onClick={()=> false} />
+                        <SubNav color="darker">
+                            <ButtonGroup align="start">
+                                <NavButton icon="filter-large" type="darker" onClick={() => false} />
                             </ButtonGroup>
-                            <ButtonGroup align='end'>
-                                <Button text='Something' onClick={()=> false} />
-                                <Button text='Else' onClick={()=> false} />
+                            <ButtonGroup align="end">
+                                <Button text="Something" onClick={() => false} />
+                                <Button text="Else" onClick={() => false} />
                                 <Divider border={true} />
-                                <Button text='Cancel' onClick={()=> false} />
-                                <Button text='Save' type='primary' onClick={()=> false} />
+                                <Button text="Cancel" onClick={() => false} />
+                                <Button text="Save" type="primary" onClick={() => false} />
                                 <Divider size="mini" />
-                                <ButtonGroup subgroup={true} spaces='no-space'>
-                                    <NavButton icon='list-plus' onClick={()=> false} />
-                                    <NavButton icon='dots-vertical' onClick={()=> false} />
+                                <ButtonGroup subgroup={true} spaces="no-space">
+                                    <NavButton icon="list-plus" onClick={() => false} />
+                                    <NavButton icon="dots-vertical" onClick={() => false} />
                                 </ButtonGroup>
                             </ButtonGroup>
                         </SubNav>
                         <br />
-                        <SubNav color='darker'>
-                            <ButtonGroup align='start' padded={true}>
-                            <Button text='Something' onClick={()=> false} />
-                                <Button text='Else' onClick={()=> false} />
+                        <SubNav color="darker">
+                            <ButtonGroup align="start" padded={true}>
+                                <Button text="Something" onClick={() => false} />
+                                <Button text="Else" onClick={() => false} />
                                 <Divider border={true} />
-                                <Button text='Cancel' onClick={()=> false} />
-                                <Button text='Save' type='primary' onClick={()=> false} />
+                                <Button text="Cancel" onClick={() => false} />
+                                <Button text="Save" type="primary" onClick={() => false} />
                             </ButtonGroup>
                         </SubNav>
                         <br />
-                        <SubNav color='blueGreyDarker'>
-                            <ButtonGroup align='center'>
-                            <Button text='One' onClick={()=> false} />
-                                <Button text='Two' onClick={()=> false} />
+                        <SubNav color="blueGreyDarker">
+                            <ButtonGroup align="center">
+                                <Button text="One" onClick={() => false} />
+                                <Button text="Two" onClick={() => false} />
                                 <Divider border={true} />
-                                <Button text='Three' onClick={()=> false} />
-                                <Button text='Four' onClick={()=> false} />
+                                <Button text="Three" onClick={() => false} />
+                                <Button text="Four" onClick={() => false} />
                                 <Divider border={true} />
-                                <Button text='Five' onClick={()=> false} />
-                                <Button text='Six' onClick={()=> false} />
+                                <Button text="Five" onClick={() => false} />
+                                <Button text="Six" onClick={() => false} />
                             </ButtonGroup>
                         </SubNav>
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         <SubNav>
                             <ButtonGroup align='start'>
                                 <NavButton icon='search' onClick={()=> false} />
@@ -130,9 +132,27 @@ export default class SubNavDoc extends React.Component {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='color' isRequired={false} type='light | darker | blueGrey | blueGreyDarker' default='light' description='Background colour of the SubNav component.'/>
-                    <Prop name='theme' isRequired={false} type='light | dark' default='/' description='Choose the UI theme. It will inherit the default theme if not set. All child elements will inherit the theme of the SubNav if it is set.'/>
-                    <Prop name='className' isRequired={false} type='string' default='/' description='Add helper classes or custom CSS styles.'/>
+                    <Prop
+                        name="color"
+                        isRequired={false}
+                        type="light | darker | blueGrey | blueGreyDarker"
+                        default="light"
+                        description="Background colour of the SubNav component."
+                    />
+                    <Prop
+                        name="theme"
+                        isRequired={false}
+                        type="light | dark"
+                        default="/"
+                        description="Choose the UI theme. It will inherit the default theme if not set. All child elements will inherit the theme of the SubNav if it is set."
+                    />
+                    <Prop
+                        name="className"
+                        isRequired={false}
+                        type="string"
+                        default="/"
+                        description="Add helper classes or custom CSS styles."
+                    />
                 </PropsList>
             </section>
         );

package/examples/pages/components/Switch.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 { Switch, SwitchGroup, Prop, PropsList, Label } from '../../../app-typescript';
+import {Switch, SwitchGroup, Prop, PropsList, Label} from '../../../app-typescript';
 
 interface IState {
     value1: boolean;
@@ -44,31 +44,54 @@ export default class SwitchDoc extends React.Component<{}, IState> {
             <section className="docs-page__container">
                 <h2 className="docs-page__h2">Switch</h2>
                 <p></p>
-                <Markup.ReactMarkupCodePreview>{`
+                <Markup.ReactMarkupCodePreview>
+                    {`
                     <Switch label={{text:'Switch label'}} value={value1} onChange={(value) => this.setState(() => ({ value1: value }))} />
                 `}
                 </Markup.ReactMarkupCodePreview>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                    <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Label on the right (default)</p>
+                        <p className="docs-page__paragraph docs-page__paragraph--topMarginL">
+                            // Label on the right (default)
+                        </p>
                         <div className="form__row">
-                            <Switch label={{content:'Switch label right'}} value={this.state.value1} onChange={(value) => this.setState(() => ({ value1: value }))} />
+                            <Switch
+                                label={{content: 'Switch label right'}}
+                                value={this.state.value1}
+                                onChange={(value) => this.setState(() => ({value1: value}))}
+                            />
                         </div>
                         <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Labels on the left</p>
-                        <p className="docs-page__paragraph--small">This option should be used only in cases when the switch is aligned to the right.</p>
+                        <p className="docs-page__paragraph--small">
+                            This option should be used only in cases when the switch is aligned to the right.
+                        </p>
                         <div className="form__row">
-                            <Switch label={{content:'Label on left', side: 'left'}} value={this.state.value2} onChange={(value) => this.setState(() => ({ value2: value }))} />
+                            <Switch
+                                label={{content: 'Label on left', side: 'left'}}
+                                value={this.state.value2}
+                                onChange={(value) => this.setState(() => ({value2: value}))}
+                            />
                         </div>
                         <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Disabled</p>
                         <div className="form__row">
-                            <Switch label={{content:'Label on right with disabled state'}} value={this.state.value3} onChange={(value) => this.setState(() => ({ value3: value }))} disabled />
+                            <Switch
+                                label={{content: 'Label on right with disabled state'}}
+                                value={this.state.value3}
+                                onChange={(value) => this.setState(() => ({value3: value}))}
+                                disabled
+                            />
                         </div>
                         <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// External label</p>
                         <div className="form__row">
-                            <Switch label={{content:() => <label>External label</label>}} value={this.state.value12} onChange={(value) => this.setState(() => ({ value12: value }))} />
+                            <Switch
+                                label={{content: () => <label>External label</label>}}
+                                value={this.state.value12}
+                                onChange={(value) => this.setState(() => ({value12: value}))}
+                            />
                         </div>
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         // Label on the right (default)
                             <Switch label={{text:'Switch label right'}} value={this.state.value1} onChange={(value) => this.setState(() => ({ value1: value }))} />
                             
@@ -85,40 +108,84 @@ export default class SwitchDoc extends React.Component<{}, IState> {
                 </Markup.ReactMarkup>
 
                 <h3 className="docs-page__h3">Switch groups</h3>
-                <p className="docs-page__paragraph"><code>SwitchGroup</code> is a helpful wrapper component used to group <code>Switch</code> components. 
-                By default the switches are grouped horizontaly. To group them verticaly – in a list-like view – add the prop <code>orientation='vertical'</code> 
-                to the <code>SwitchGroup</code> component.</p>
+                <p className="docs-page__paragraph">
+                    <code>SwitchGroup</code> is a helpful wrapper component used to group <code>Switch</code>{' '}
+                    components. By default the switches are grouped horizontaly. To group them verticaly – in a
+                    list-like view – add the prop <code>orientation='vertical'</code>
+                    to the <code>SwitchGroup</code> component.
+                </p>
 
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <p className="docs-page__paragraph">// Vertical group (default)</p>
-                        <div className='form__row'>
+                        <div className="form__row">
                             <SwitchGroup>
-                                <Switch label={{content:'Vertical Switch 1'}} value={this.state.value6} onChange={(value) => this.setState(() => ({ value6: value }))} />
-                                <Switch label={{content:'Vertical Switch 2'}} value={this.state.value7} onChange={(value) => this.setState(() => ({ value7: value }))} />
-                                <Switch label={{content:'Vertical Switch 3'}} value={this.state.value8} onChange={(value) => this.setState(() => ({ value8: value }))} />
+                                <Switch
+                                    label={{content: 'Vertical Switch 1'}}
+                                    value={this.state.value6}
+                                    onChange={(value) => this.setState(() => ({value6: value}))}
+                                />
+                                <Switch
+                                    label={{content: 'Vertical Switch 2'}}
+                                    value={this.state.value7}
+                                    onChange={(value) => this.setState(() => ({value7: value}))}
+                                />
+                                <Switch
+                                    label={{content: 'Vertical Switch 3'}}
+                                    value={this.state.value8}
+                                    onChange={(value) => this.setState(() => ({value8: value}))}
+                                />
                             </SwitchGroup>
                         </div>
-                        <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Vertical group with labels on the left</p>
-                        <p className="docs-page__paragraph--small">This option should be used only in special cases and inside containers not wider than 400 pixels <br />
-                        (e.g. menus, narrow modals or dialouges etc.). It should be used only in the combination with the labels on th eleft.</p>
-                        <div className='form__row docs-page__test-helper-2' style={{width: '320px'}}>
-                            <SwitchGroup align='right'>
-                                <Switch label={{content:'Vertical Switch 1', side: 'left'}} value={this.state.value9} onChange={(value) => this.setState(() => ({ value9: value }))} />
-                                <Switch label={{content:'Vertical Switch 2', side: 'left'}} value={this.state.value10} onChange={(value) => this.setState(() => ({ value10: value }))} />
-                                <Switch label={{content:'Vertical Switch 3', side: 'left'}} value={this.state.value11} onChange={(value) => this.setState(() => ({ value11: value }))} />
+                        <p className="docs-page__paragraph docs-page__paragraph--topMarginL">
+                            // Vertical group with labels on the left
+                        </p>
+                        <p className="docs-page__paragraph--small">
+                            This option should be used only in special cases and inside containers not wider than 400
+                            pixels <br />
+                            (e.g. menus, narrow modals or dialouges etc.). It should be used only in the combination
+                            with the labels on th eleft.
+                        </p>
+                        <div className="form__row docs-page__test-helper-2" style={{width: '320px'}}>
+                            <SwitchGroup align="right">
+                                <Switch
+                                    label={{content: 'Vertical Switch 1', side: 'left'}}
+                                    value={this.state.value9}
+                                    onChange={(value) => this.setState(() => ({value9: value}))}
+                                />
+                                <Switch
+                                    label={{content: 'Vertical Switch 2', side: 'left'}}
+                                    value={this.state.value10}
+                                    onChange={(value) => this.setState(() => ({value10: value}))}
+                                />
+                                <Switch
+                                    label={{content: 'Vertical Switch 3', side: 'left'}}
+                                    value={this.state.value11}
+                                    onChange={(value) => this.setState(() => ({value11: value}))}
+                                />
                             </SwitchGroup>
                         </div>
                         <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Horizontal group</p>
-                        <p className="docs-page__paragraph--small">Use this option only if there are no more than two switches.</p>
-                        <div className='form__row'>
-                            <SwitchGroup orientation='horizontal'>
-                                <Switch label={{content:'Horizontal Switch 1'}} value={this.state.value4} onChange={(value) => this.setState(() => ({ value4: value }))} />
-                                <Switch label={{content:'Horizontal Switch 2'}} value={this.state.value5} onChange={(value) => this.setState(() => ({ value5: value }))} />
+                        <p className="docs-page__paragraph--small">
+                            Use this option only if there are no more than two switches.
+                        </p>
+                        <div className="form__row">
+                            <SwitchGroup orientation="horizontal">
+                                <Switch
+                                    label={{content: 'Horizontal Switch 1'}}
+                                    value={this.state.value4}
+                                    onChange={(value) => this.setState(() => ({value4: value}))}
+                                />
+                                <Switch
+                                    label={{content: 'Horizontal Switch 2'}}
+                                    value={this.state.value5}
+                                    onChange={(value) => this.setState(() => ({value5: value}))}
+                                />
                             </SwitchGroup>
                         </div>
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         // Vertical group (default)
                         <SwitchGroup>
                             <Switch label={{text:'Vertical Switch 1'}} value={this.state.value6} onChange={(value) => this.setState(() => ({ value6: value }))} />
@@ -143,30 +210,89 @@ export default class SwitchDoc extends React.Component<{}, IState> {
                 </Markup.ReactMarkup>
 
                 <Components.GraphicButtonsGroup>
-                    <Components.GraphicButton graphic='design' text='Switch usage guidelines' smallText='Design guidelines' link='#/design/switch' />
+                    <Components.GraphicButton
+                        graphic="design"
+                        text="Switch usage guidelines"
+                        smallText="Design guidelines"
+                        link="#/design/switch"
+                    />
                 </Components.GraphicButtonsGroup>
 
                 <h3 className="docs-page__h3">Props</h3>
                 <p className="docs-page__paragraph">Switch</p>
                 <PropsList>
-                    <Prop name='label' isRequired={true} type='object' default='/' description='Label value.'/>
-                    <Prop name='disabled' isRequired={false} type='boolean' default='false' description='If true field is disabled.'/>
-                    <Prop name='toolTipFlow' isRequired={false} type="top | left | right | down" default='false' description='Position of tooltip.'/>
-                    <Prop name='toolTipAppend' isRequired={false} type='boolean' default='false' description='Tooltip append.'/>
-                    <Prop name='onChange' isRequired={false} type='function' default='false' description='Function onChange'/>
+                    <Prop name="label" isRequired={true} type="object" default="/" description="Label value." />
+                    <Prop
+                        name="disabled"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="If true field is disabled."
+                    />
+                    <Prop
+                        name="toolTipFlow"
+                        isRequired={false}
+                        type="top | left | right | down"
+                        default="false"
+                        description="Position of tooltip."
+                    />
+                    <Prop
+                        name="toolTipAppend"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="Tooltip append."
+                    />
+                    <Prop
+                        name="onChange"
+                        isRequired={false}
+                        type="function"
+                        default="false"
+                        description="Function onChange"
+                    />
                 </PropsList>
                 <p className="docs-page__paragraph">Label props</p>
                 <PropsList>
-                    <Prop name='content' isRequired={true} type='string or function' default='/' description='Label value.'/>
-                    <Prop name='side' isRequired={false} type='left | right' default='right' description='Position of label relative to the button.'/>
-                    <Prop name='hidden' isRequired={false} type='boolean' default='false' description='If true label is not shown on display.'/>
+                    <Prop
+                        name="content"
+                        isRequired={true}
+                        type="string or function"
+                        default="/"
+                        description="Label value."
+                    />
+                    <Prop
+                        name="side"
+                        isRequired={false}
+                        type="left | right"
+                        default="right"
+                        description="Position of label relative to the button."
+                    />
+                    <Prop
+                        name="hidden"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="If true label is not shown on display."
+                    />
                 </PropsList>
                 <p className="docs-page__paragraph">SwitchGroup</p>
                 <PropsList>
-                    <Prop name='orientation' isRequired={false} type='vertical | horizontal' default='vertical' description='Orientation of Switch components inside the group.'/>
-                    <Prop name='align' isRequired={false} type='left | right' default='left' description='Alignment of Switch components inside the group.'/>
+                    <Prop
+                        name="orientation"
+                        isRequired={false}
+                        type="vertical | horizontal"
+                        default="vertical"
+                        description="Orientation of Switch components inside the group."
+                    />
+                    <Prop
+                        name="align"
+                        isRequired={false}
+                        type="left | right"
+                        default="left"
+                        description="Alignment of Switch components inside the group."
+                    />
                 </PropsList>
             </section>
-        )
+        );
     }
 }