superdesk-ui-framework 4.0.52 → 4.0.54

package/examples/pages/components/SimpleList.tsx

@@ -1,198 +0,0 @@
-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';
-
-export default class SimpleListDoc extends React.Component {
-    render() {
-        return (
-            <section className="docs-page__container">
-                <h2 className="docs-page__h2">SimpleList</h2>
-
-                <Markup.ReactMarkupCodePreview>
-                    {`
-                    <SimpleList>
-                        <SimpleListItem>...</SimpleListItem> 
-                    </SimpleList>
-                `}
-                </Markup.ReactMarkupCodePreview>
-
-                <p className="docs-page__paragraph">...</p>
-
-                <Markup.ReactMarkup>
-                    <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>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>
-                        </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" />
-                            </SimpleListItem>
-                            <SimpleListItem justify="space-between">
-                                Tellus Mollis Aenean <Label text="Pending" type="warning" style="translucent" />
-                            </SimpleListItem>
-                            <SimpleListItem justify="space-between">
-                                Elit Vestibulum <Label text="Closed" type="alert" style="translucent" />
-                            </SimpleListItem>
-                        </SimpleList>
-                        <p className="docs-page__paragraph">// border / comfortable</p>
-                        <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} />
-                                </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} />
-                                </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} />
-                                </ButtonGroup>
-                            </SimpleListItem>
-                        </SimpleList>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>
-                        {`
-                        // no border / compact (default)
-                        <SimpleList>
-                            <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>
-                        </SimpleList>
-
-                        // border / space-between
-                        <SimpleList border={true}>
-                            <SimpleListItem justify="space-between">
-                                Vehicula Ridiculus <Label text='Active' type='success' style='translucent'/>
-                            </SimpleListItem>
-                            <SimpleListItem justify="space-between">
-                                Tellus Mollis Aenean <Label text='Pending' type='warning' style='translucent'/>
-                            </SimpleListItem>
-                            <SimpleListItem justify="space-between">
-                                Elit Vestibulum <Label text='Closed' type='alert' style='translucent'/>
-                            </SimpleListItem>
-                        </SimpleList>
-
-                        // border / 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}  />
-                                </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}  />
-                                </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}  />
-                                </ButtonGroup>
-                            </SimpleListItem>
-                        </SimpleList>     
-                    `}
-                    </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)."
-                    />
-                </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. "
-                    />
-                </PropsList>
-            </section>
-        );
-    }
-}

package/examples/pages/components/SubNav.tsx

@@ -1,160 +0,0 @@
-import * as React from 'react';
-import * as Markup from '../../js/react';
-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>
-                <p></p>
-                <Markup.ReactMarkupCodePreview>
-                    {`
-                    <SubNav>
-                        <ButtonGroup align='start'>
-                            <NavButton icon='search' onClick={()=> false} />
-                        </ButtonGroup>
-                        <ButtonGroup align='end'>
-                            <NavButton icon='dots-vertical' onClick={()=> false} />
-                        </ButtonGroup>
-                    </SubNav>
-                `}
-                </Markup.ReactMarkupCodePreview>
-
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                        <SubNav>
-                            <ButtonGroup align="start">
-                                <NavButton icon="search" onClick={() => false} />
-                            </ButtonGroup>
-                            <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} />
-                            </ButtonGroup>
-                            <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} />
-                                <Divider size="mini" />
-                                <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} />
-                                <Divider border={true} />
-                                <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} />
-                                <Divider border={true} />
-                                <Button text="Three" onClick={() => false} />
-                                <Button text="Four" onClick={() => false} />
-                                <Divider border={true} />
-                                <Button text="Five" onClick={() => false} />
-                                <Button text="Six" onClick={() => false} />
-                            </ButtonGroup>
-                        </SubNav>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>
-                        {`
-                        <SubNav>
-                            <ButtonGroup align='start'>
-                                <NavButton icon='search' onClick={()=> false} />
-                            </ButtonGroup>
-                            <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} />
-                            </ButtonGroup>
-                            <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} />
-                                <Divider size="mini" />
-                                <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} />
-                                <Divider border={true} />
-                                <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} />
-                                <Divider border={true} />
-                                <Button text='Three' onClick={()=> false} />
-                                <Button text='Four' onClick={()=> false} />
-                                <Divider border={true} />
-                                <Button text='Five' onClick={()=> false} />
-                                <Button text='Six' onClick={()=> false} />
-                            </ButtonGroup>
-                        </SubNav>   
-                    `}
-                    </Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-
-                <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."
-                    />
-                </PropsList>
-            </section>
-        );
-    }
-}

package/examples/pages/components/Switch.tsx

@@ -1,298 +0,0 @@
-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';
-
-interface IState {
-    value1: boolean;
-    value2: boolean;
-    value3: boolean;
-    value4: boolean;
-    value5: boolean;
-    value6: boolean;
-    value7: boolean;
-    value8: boolean;
-    value9: boolean;
-    value10: boolean;
-    value11: boolean;
-    value12: boolean;
-}
-
-export default class SwitchDoc extends React.Component<{}, IState> {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            value1: false,
-            value2: true,
-            value3: false,
-            value4: true,
-            value5: false,
-            value6: true,
-            value7: true,
-            value8: false,
-            value9: false,
-            value10: true,
-            value11: false,
-            value12: false,
-        };
-    }
-
-    render() {
-        return (
-            <section className="docs-page__container">
-                <h2 className="docs-page__h2">Switch</h2>
-                <p></p>
-                <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>
-                        <div className="form__row">
-                            <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>
-                        <div className="form__row">
-                            <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
-                            />
-                        </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}))}
-                            />
-                        </div>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>
-                        {`
-                        // Label on the right (default)
-                            <Switch label={{text:'Switch label right'}} value={this.state.value1} onChange={(value) => this.setState(() => ({ value1: value }))} />
-                            
-                        // Labels on the left
-                            <Switch label={{text:'Label on left', side: 'left'}} value={this.state.value2} onChange={(value) => this.setState(() => ({ value2: value }))} />
-
-                        // Disabled
-                            <Switch label={{text:'Label on right with disabled state'}} value={this.state.value3} onChange={(value) => this.setState(() => ({ value3: value }))} disabled={true} />
-
-                        // External label
-                            <Switch label={{content:() => <label>External label</label>}} value={this.state.value12} onChange={(value) => this.setState(() => ({ value12: value }))} />
-                    `}
-                    </Markup.ReactMarkupCode>
-                </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>
-
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                        <p className="docs-page__paragraph">// Vertical group (default)</p>
-                        <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}))}
-                                />
-                            </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}))}
-                                />
-                            </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}))}
-                                />
-                            </SwitchGroup>
-                        </div>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>
-                        {`
-                        // Vertical group (default)
-                        <SwitchGroup>
-                            <Switch label={{text:'Vertical Switch 1'}} value={this.state.value6} onChange={(value) => this.setState(() => ({ value6: value }))} />
-                            <Switch label={{text:'Vertical Switch 2'}} value={this.state.value7} onChange={(value) => this.setState(() => ({ value7: value }))} />
-                            <Switch label={{text:'Vertical Switch 3'}} value={this.state.value8} onChange={(value) => this.setState(() => ({ value8: value }))} />
-                        </SwitchGroup>
-
-                        // Vertical group with labels on the left
-                        <SwitchGroup align='right'>
-                            <Switch label={{text:'Vertical Switch 1', side: 'left'}} value={this.state.value9} onChange={(value) => this.setState(() => ({ value9: value }))} />
-                            <Switch label={{text:'Vertical Switch 2', side: 'left'}} value={this.state.value10} onChange={(value) => this.setState(() => ({ value10: value }))} />
-                            <Switch label={{text:'Vertical Switch 3', side: 'left'}} value={this.state.value11} onChange={(value) => this.setState(() => ({ value11: value }))} />
-                        </SwitchGroup>
-
-                        // Horizontal group
-                        <SwitchGroup orientation='horizontal'>
-                            <Switch label={{text:'Horizontal Switch 1'}} value={this.state.value4} onChange={(value) => this.setState(() => ({ value4: value }))} />
-                            <Switch label={{text:'Horizontal Switch 2'}} value={this.state.value5} onChange={(value) => this.setState(() => ({ value5: value }))} />
-                        </SwitchGroup>
-                    `}
-                    </Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-
-                <Components.GraphicButtonsGroup>
-                    <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"
-                    />
-                </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."
-                    />
-                </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."
-                    />
-                </PropsList>
-            </section>
-        );
-    }
-}