superdesk-ui-framework 3.0.1-beta.1 → 3.0.1-beta.2

package/examples/pages/react/ContentList.tsx

@@ -0,0 +1,280 @@
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import { BoxedList, BoxedListItem, BoxedListContentRow, Prop, PropsList, Icon, IconButton, AvatarWrapper, AvatarContentText, ButtonGroup, Button, Heading, Text, Label, Container, IconLabel } from '../../../app-typescript';
+import { TableList, TableListItem } from '../../../app-typescript/components/Lists/TableList';
+import { ContentList, ContentListItem } from '../../../app-typescript/components/Lists/ContentList';
+
+export default class ContentListDoc extends React.Component {
+    render() {
+        return (
+            <section className='docs-page__container'>
+                <h2 className='docs-page__h2'>ContentList</h2>
+                
+                <Markup.ReactMarkupCodePreview>{`
+                    <ContentList 
+                    items: [...]
+                    />
+                `}
+                </Markup.ReactMarkupCodePreview>
+
+                <p className="docs-page__paragraph">...</p>
+
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <p className="docs-page__paragraph">// basic</p>
+
+                        <ContentList
+                        items={[
+                            {
+                                itemColum: [
+                                    {
+                                        itemRow: [{content:<>
+                                                    <i className="icon-rundown"></i>
+                                                </>}],
+                                        border: true
+                                    },
+                                    {
+                                        itemRow: [
+                                            {
+                                                content:
+                                                <>
+                                                    <span className="sd-list-item__slugline">19:00 – 19:45</span>
+                                                    <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
+                                                    <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
+                                                    <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
+                                                </>
+                                            },
+                                            {
+                                                content:
+                                                <>
+                                                    <Label text='Marker' color='blue--800'/>
+                                                        <span className='sd-list-item__compound-text'>
+                                                            <span className='sd-list-item__text-label'>Template:</span>
+                                                            <span>Marker Daily</span>
+                                                        </span>
+                                                        <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>    
+                                                    <Label style='translucent' text='In Progress' type='warning' />
+                                                </>
+                                            },
+                                        ],
+                                        fullwidth: true,
+                                    }
+                                ],
+                                action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
+                                loading: true,
+                            },
+                            {
+                                itemColum: [
+                                    {
+                                        itemRow: [{content:<>
+                                                    <i className="icon-rundown"></i>
+                                                </>}], 
+                                        border: true
+                                    },
+                                    {
+                                        itemRow: [
+                                            {
+                                                content: 
+                                                <>
+                                                    <span className="sd-list-item__slugline">19:00 – 19:45</span>
+                                                    <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
+                                                    <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
+                                                    <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
+                                                </>
+                                            },
+                                            {
+                                                content: 
+                                                <>
+                                                    <Label text='Marker' color='blue--800'/>
+                                                        <span className='sd-list-item__compound-text'>
+                                                            <span className='sd-list-item__text-label'>Template:</span>
+                                                            <span>Marker Daily</span>
+                                                        </span>
+                                                        <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>    
+                                                    <Label style='translucent' text='In Progress' type='warning' />
+                                                </>
+                                            },
+                                        ],
+                                        fullwidth: true,
+                                    }
+                                ],
+                                locked: true,
+                                action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
+                            },
+                            {
+                                itemColum: [
+                                    {
+                                        itemRow: [{content:<>
+                                                    <i className="icon-rundown"></i>
+                                                </>}],
+                                        border: true
+                                    },
+                                    {
+                                        itemRow: [
+                                            {
+                                                content:
+                                                <>
+                                                    <span className="sd-list-item__slugline">19:00 – 19:45</span>
+                                                    <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
+                                                    <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
+                                                    <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
+                                                </>
+                                            },
+                                            {
+                                                content:
+                                                <>
+                                                    <Label text='Marker' color='blue--800'/>
+                                                        <span className='sd-list-item__compound-text'>
+                                                            <span className='sd-list-item__text-label'>Template:</span>
+                                                            <span>Marker Daily</span>
+                                                        </span>
+                                                        <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>    
+                                                    <Label style='translucent' text='In Progress' type='warning' />
+                                                </>
+                                            },
+                                        ],
+                                        fullwidth: true,
+                                    }
+                                ],
+                                action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
+                            },
+                        ]} />
+
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <ContentList
+                        items={[
+                            {
+                                itemColum: [
+                                    {
+                                        itemRow: [{content:<>
+                                                            <i className="icon-rundown"></i>
+                                                        </>}],   
+                                        border: true
+                                    },
+                                    {
+                                        itemRow: [
+                                            {
+                                                content: 
+                                                <>
+                                                    <span className="sd-list-item__slugline">19:00 – 19:45</span>
+                                                    <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
+                                                    <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
+                                                    <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
+                                                </>
+                                            },
+                                            {
+                                                content: 
+                                                <>
+                                                    <Label text='Marker' color='blue--800'/>
+                                                        <span className='sd-list-item__compound-text'>
+                                                            <span className='sd-list-item__text-label'>Template:</span>
+                                                            <span>Marker Daily</span>
+                                                        </span>
+                                                        <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>    
+                                                    <Label style='translucent' text='In Progress' type='warning' />
+                                                </>
+                                            },
+                                        ],
+                                        fullwidth: true,
+                                    }
+                                ],
+                                action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
+                            },
+                            {
+                                itemColum: [
+                                    {
+                                        itemRow: [{content:<>
+                                                            <i className="icon-rundown"></i>
+                                                        </>}], 
+                                        border: true
+                                    },
+                                    {
+                                        itemRow: [
+                                            {
+                                                content: 
+                                                <>
+                                                    <span className="sd-list-item__slugline">19:00 – 19:45</span>
+                                                    <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
+                                                    <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
+                                                    <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
+                                                </>
+                                            },
+                                            {
+                                                content: 
+                                                <>
+                                                    <Label text='Marker' color='blue--800'/>
+                                                        <span className='sd-list-item__compound-text'>
+                                                            <span className='sd-list-item__text-label'>Template:</span>
+                                                            <span>Marker Daily</span>
+                                                        </span>
+                                                        <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>    
+                                                    <Label style='translucent' text='In Progress' type='warning' />
+                                                </>
+                                            },
+                                        ],
+                                        fullwidth: true,
+                                    }
+                                ],
+                                locked: true,
+                                action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
+                            },
+                            {
+                                itemColum: [
+                                    {
+                                        itemRow: [{content:<>
+                                                            <i className="icon-rundown"></i>
+                                                        </>}], 
+                                        border: true
+                                    },
+                                    {
+                                        itemRow: [
+                                            {
+                                                content:
+                                                <>
+                                                    <span className="sd-list-item__slugline">19:00 – 19:45</span>
+                                                    <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
+                                                    <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
+                                                    <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
+                                                </>
+                                            },
+                                            {
+                                                content:
+                                                <>
+                                                    <Label text='Marker' color='blue--800'/>
+                                                        <span className='sd-list-item__compound-text'>
+                                                            <span className='sd-list-item__text-label'>Template:</span>
+                                                            <span>Marker Daily</span>
+                                                        </span>
+                                                        <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>    
+                                                    <Label style='translucent' text='In Progress' type='warning' />
+                                                </>
+                                            },
+                                        ],
+                                        fullwidth: true,
+                                    }
+                                ],
+                                action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
+                            },
+                        ]} />
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">Props</h3>
+                <p className="docs-page__paragraph">BoxedList</p>
+                <PropsList>
+                    <Prop name='density' isRequired={false} type='compact | comfortable' default='compact' description='Increase the gap beetween list items.'/>
+                </PropsList>
+                <p className="docs-page__paragraph">BoxedListItem</p>
+                <PropsList>
+                    <Prop name='clickable' isRequired={false} type='boolean' default='false' description='Adds hover effect and changes the cursor to poiter.'/>
+                    <Prop name='selected' isRequired={false} type='boolean' default='false' description='Changes the state to selected and adds apropriate styling for it.'/>
+                    <Prop name='slideInActions' isRequired={false} type='boolean' default='false' description='If set to true, the action buttons will be hidden and slide in from the right on hover.'/>
+                    <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight' default='/' description='Adds a clour coded border on the right, based on the selected type.'/>
+                </PropsList>
+
+            </section>
+        )
+    }
+}

package/examples/pages/react/CreateButton.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+
+import * as Markup from '../../js/react';
+
+import { SubNav, NavButton, ButtonGroup, Tooltip, CreateButton, PropsList, Prop } from '../../../app-typescript';
+
+export default class CreateButtonDoc extends React.Component {
+    render() {
+        return (
+            <section className='docs-page__container'>
+                <h2 className='docs-page__h2'>Navigation button</h2>
+                <p></p>
+                <Markup.ReactMarkupCodePreview>{`
+                    <NavButton type='default' icon='home' onClick={()=> false} />
+                `}
+                </Markup.ReactMarkupCodePreview>
+
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <SubNav zIndex={2}>
+                            <ButtonGroup align='start' spaces='no-space'>
+                                <Tooltip text='Filters' flow='right'>
+                                    <NavButton icon='filter-large' type='darker' state="active" text="Filter" onClick={() => false} />
+                                </Tooltip>
+                                <NavButton icon='search' text="Search" onClick={() => false} />
+                            </ButtonGroup>
+                            <ButtonGroup align='end' spaces='no-space'>
+                                <NavButton icon='list-plus' text="Add to list" onClick={() => false} />
+                                <Tooltip text='More actions' flow='down'>
+                                    <NavButton icon='dots-vertical' text="More actions" onClick={() => false} />
+                                </Tooltip>
+                                <CreateButton ariaValue='Create' onClick={() => false} />
+                            </ButtonGroup>
+                        </SubNav>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <SubNav zIndex={2}>
+                            <ButtonGroup align='start' spaces='no-space'>
+                                <Tooltip text='Filters' flow='right'>
+                                    <NavButton icon='filter-large' type='darker' state="active" text="Filter" onClick={() => false} />
+                                </Tooltip>
+                                <NavButton icon='search' text="Search" onClick={() => false} />
+                            </ButtonGroup>
+                            <ButtonGroup align='end' spaces='no-space'>
+                                <NavButton icon='list-plus' text="Add to list" onClick={() => false} />
+                                <Tooltip text='More actions' flow='down'>
+                                    <NavButton icon='dots-vertical' text="More actions" onClick={() => false} />
+                                </Tooltip>
+                                <Tooltip text='Send to / Publish' flow='left'>
+                                    <NavButton icon='expand-thin' text='Send to / Publish' type='highlight' onClick={() => false} />
+                                </Tooltip>
+                            </ButtonGroup>
+                        </SubNav>        
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">Props</h3>
+                <PropsList>
+                    <Prop name='icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.' />
+                    <Prop name='text' isRequired={false} type='string' default='/' description='Defines the value for aria-label, for screen-readers accessibility.' />
+                    <Prop name='iconSize' isRequired={false} type='small | big' default='small' description='Specifies a small or big button' />
+                    <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.).' />
+                    <Prop name='state' isRequired={false} type='normal | active' default='normal' description='Defines the optional state of the button (e.g. active)' />
+                    <Prop name='theme' isRequired={false} type='light | dark' default='light' description='Styles nav button for diffrent background.' />
+                    <Prop name='value' isRequired={false} type='button | submit | reset' default='button' description='Specifies a value of nav button' />
+                </PropsList>
+            </section>
+        );
+    }
+}

package/examples/pages/react/DropZone.tsx

@@ -29,19 +29,27 @@ export default class DropZoneDoc extends React.Component<IProps> {
                     <Markup.ReactMarkupPreview>
                         <p className="docs-page__paragraph">// Basic</p>
                         <div className='docs-page__content-row'>
-                            <DropZone actionText='Attach file' text="Drag one or more files here to upload them, or just click on the field.">
-                                 
+                            <DropZone text="Drag one or more files here to upload them, or just click on the field.">               
                             </DropZone>
                         </div>
 
-                        <p className="docs-page__paragraph">// Usage examples</p>
-
-
-
+                        <p className="docs-page__paragraph">// With heading</p>
                         <div className='docs-page__content-row'>
+                            <DropZone heading="Nothing here yet" text="Drag one or more files here to upload them, or just click on the field.">               
+                            </DropZone>
+                        </div>
 
+                        <p className="docs-page__paragraph">// With icon</p>
+                        <div className='docs-page__content-row'>
+                            <DropZone icon={true} text="Drag one or more files here to upload them, or just click on the field.">               
+                            </DropZone>
                         </div>
 
+                        <p className="docs-page__paragraph">// With heading & icon</p>
+                        <div className='docs-page__content-row'>
+                            <DropZone icon={true} heading="Nothing here yet" text="Drag one or more files here to upload them, or just click on the field.">               
+                            </DropZone>
+                        </div>
                         
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`

package/examples/pages/react/IconButtons.tsx

@@ -46,9 +46,9 @@ export default class IconButtonDoc extends React.Component {
                         <p className="docs-page__paragraph--small">The 'outlineWhite' syle forces a white icon and outline. It can be used on dark overlays for example.</p>
                         <div style={{background: 'hsla(214, 13%, 12%, 1)'}} className="sd-container sd-container--flex sd-container--gap-large sd-radius--medium sd-shadow--z2 sd-padding--3">
                             <ButtonGroup align='center' spaces='loose'>
-                                <IconButton style='outlineWhite' size='x-large' icon='pencil' ariaValue='Add' onClick={()=> false} />
-                                <IconButton style='outlineWhite' disabled={true} size='x-large' icon='switches' ariaValue='Add' onClick={()=> false} />
-                                <IconButton style='outlineWhite' size='x-large' icon='crop' ariaValue='Close' onClick={()=> false} />
+                                <IconButton style='outlineWhite' size='x-large' icon='pencil' ariaValue='Edit metadata' onClick={()=> false} />
+                                <IconButton style='outlineWhite' disabled={true} size='x-large' icon='switches' ariaValue='Edit image' onClick={()=> false} />
+                                <IconButton style='outlineWhite' size='x-large' icon='crop' ariaValue='Edit crops' onClick={()=> false} />
                             </ButtonGroup>
                         </div>
 
@@ -74,9 +74,9 @@ export default class IconButtonDoc extends React.Component {
 
                         // Xtra large, outlineWhite style
                         <ButtonGroup align='center' spaces='loose'>
-                            <IconButton style='outlineWhite' size='x-large' icon='pencil' ariaValue='Add' onClick={()=> false} />
-                            <IconButton style='outlineWhite' disabled={true} size='x-large' icon='switches' ariaValue='Add' onClick={()=> false} />
-                            <IconButton style='outlineWhite' size='x-large' icon='crop' ariaValue='Close' onClick={()=> false} />
+                            <IconButton style='outlineWhite' size='x-large' icon='pencil' ariaValue='Edit metadata' onClick={()=> false} />
+                            <IconButton style='outlineWhite' disabled={true} size='x-large' icon='switches' ariaValue='Edit image' onClick={()=> false} />
+                            <IconButton style='outlineWhite' size='x-large' icon='crop' ariaValue='Edit crops' onClick={()=> false} />
                         </ButtonGroup>
                     `}
                     </Markup.ReactMarkupCode>

package/examples/pages/react/IconLabels.tsx

@@ -27,12 +27,34 @@ export default class IconLabelDoc extends React.Component {
                             <IconLabel text='Label sd-green' icon='video' type='sd-green' />
 
                             <p className="docs-page__paragraph">// Translucent</p>
-                            <IconLabel style='translucent' text='Label success' type='success' icon='time' />
-                            <IconLabel style='translucent' text='Label warning' type='warning' icon='time' />
+                            <IconLabel innerLabel='Start:' style='translucent' text='00:45' type='success' icon='time' />
+                            <IconLabel innerLabel='end:' style='translucent' text='00:30' type='warning' icon='time' />
                             <IconLabel style='translucent' text='Label alert' type='alert' icon='time' />
                             <IconLabel style='translucent' text='Label highlight' type='highlight' icon='calendar' />
                             <IconLabel style='translucent' text='Label sd-green' type='sd-green' icon='calendar' />
                             <IconLabel style='translucent' text='Default label' icon='bell' />
+                            <br />
+                            <IconLabel innerLabel='Start:' style='translucent' text='00:45' type='success'/>
+                            <IconLabel innerLabel='end:' style='translucent' text='00:30' type='warning'/>
+                            <IconLabel style='translucent' text='Label alert' type='alert' />
+
+                            <p className="docs-page__paragraph">// Translucent & Large</p>
+                            <IconLabel innerLabel='Start:' size='large' style='translucent' text='00:45' type='success' icon='time' />
+                            <IconLabel innerLabel='Start:' size='large' style='translucent' text='00:55' type='warning' icon='time' />
+                            <IconLabel innerLabel='Start:' size='large' style='translucent' text='00:15' type='alert' icon='time' />
+                            <br />
+                            <IconLabel innerLabel='Start:' size='large' style='translucent' text='18:30' type='success' />
+                            <IconLabel innerLabel='End:' size='large' style='translucent' text='20:30' type='highlight' />
+                            <IconLabel innerLabel='Duration:' size='large' style='translucent' text='00:30' type='primary' />
+
+                            <p className="docs-page__paragraph">// Translucent & Small</p>
+                            <IconLabel innerLabel='Start:' size='small' style='translucent' text='00:45' type='success' icon='time' />
+                            <IconLabel innerLabel='Start:' size='small' style='translucent' text='00:55' type='warning' icon='time' />
+                            <IconLabel innerLabel='Start:' size='small' style='translucent' text='00:15' type='alert' icon='time' />
+                            <br />
+                            <IconLabel innerLabel='Start:' size='small' style='translucent' text='18:30' type='success' />
+                            <IconLabel innerLabel='End:' size='small' style='translucent' text='20:30' type='highlight' />
+                            <IconLabel innerLabel='Duration:' size='small' style='translucent' text='00:30' type='primary' />
                         </div>
 
                     </Markup.ReactMarkupPreview>

package/examples/pages/react/Index.tsx

@@ -49,10 +49,13 @@ import SelectGridDocs from './SelectGrid';
 import IconPickerDocs from "./IconPicker";
 import SimpleListDoc from "./SimpleList";
 import BoxedListDoc from "./BoxedList";
+import TableListDoc from "./TableList";
+import ContentListDoc from "./ContentList";
 import HeadingDoc from "./Heading";
 import TextDoc from "./Text";
 import ContainerDoc from './Container';
 import DropZoneDoc from './DropZone';
+import CreateButtonDoc from './CreateButton';
 
 import * as Playgrounds from '../playgrounds/react-playgrounds/Index';
 import { SelectWithTemplateDocs } from './SelectWithTemplate';
@@ -189,6 +192,12 @@ const pages = {
             'boxed-list': {
                 name: 'Boxed list'
             },
+            'table-list': {
+                name: 'Table list'
+            },
+            'content-list': {
+                name: 'Content list'
+            },
         }
     },
     formComponents: {
@@ -239,6 +248,9 @@ const pages = {
             'dropzone': {
                 name: 'DropZone'
             },
+            'create-button': {
+                name: 'CreateButton'
+            },
         }
     },
     generalComponents: {
@@ -350,10 +362,13 @@ class ReactDoc extends React.Component<IProps, IState> {
                         <Route path="/react/icon-picker" component={IconPickerDocs} />
                         <Route path="/react/simple-list" component={SimpleListDoc} />
                         <Route path="/react/boxed-list" component={BoxedListDoc} />
+                        <Route path="/react/table-list" component={TableListDoc} />
+                        <Route path="/react/content-list" component={ContentListDoc} />
                         <Route path="/react/heading" component={HeadingDoc} />
                         <Route path="/react/text" component={TextDoc} />
                         <Route path="/react/container" component={ContainerDoc} />
                         <Route path="/react/dropzone" component={DropZoneDoc} />
+                        <Route path="/react/create-button" component={CreateButtonDoc} />
                         <Route path="/" component={ReactDefault} />
                     </Switch>
                 </main>

package/examples/pages/react/Inputs.tsx

@@ -9,7 +9,7 @@ interface IState {
     required: boolean;
     disabled: boolean;
     invalid: boolean;
-    value: number;
+    value: any;
 }
 
 export default class InputsDoc extends React.Component<{}, IState> {
@@ -47,9 +47,9 @@ export default class InputsDoc extends React.Component<{}, IState> {
 
                             <div className='form__row'>
                                 <Input label='Input label'
-                                    value={this.state.value}
+                                    value={null}
                                     maxLength={30}
-                                    type='number'
+                                    type='text'
                                     error='This is error message'
                                     info='This is some hint message'
                                     inlineLabel={this.state.inlineLabel}
@@ -59,6 +59,35 @@ export default class InputsDoc extends React.Component<{}, IState> {
                                     tabindex={0}
                                     onChange={(value) => this.setState({value: value})} />
                             </div>
+                            <div className='form__row'>
+                                <Input label='Number Input'
+                                    value={this.state.value}
+                                    type='number'
+                                    error='This is error message'
+                                    info='Morbi leo risus porta ac consectetur ac.'
+                                    inlineLabel={this.state.inlineLabel}
+                                    required={this.state.required}
+                                    disabled={this.state.disabled}
+                                    invalid={this.state.invalid}
+                                    tabindex={0}
+                                    onChange={(value) => this.setState({value: value})} />
+                            </div>
+                            <p className="docs-page__paragraph">// Hidden label</p>
+                            <div className='form__row'>
+                                <Input label='Input label'
+                                    value={null}
+                                    maxLength={25}
+                                    type='text'
+                                    error='This is error message'
+                                    info='Donec id elit non mi porta gravida at eget metus.'
+                                    inlineLabel={true}
+                                    labelHidden={true}
+                                    required={this.state.required}
+                                    disabled={this.state.disabled}
+                                    invalid={this.state.invalid}
+                                    tabindex={0}
+                                    onChange={(value) => this.setState({value: value})} />
+                            </div>
                         </div>
 
                     </Markup.ReactMarkupPreview>

package/examples/pages/react/Modal.tsx

@@ -187,6 +187,7 @@ export default class ModalDoc extends React.Component<{}, IState> {
                                visible={this.state.modalFull} 
                                theme='dark'
                                maximized={true}
+                               className='testClass'
                                onHide={() => {this.setState({modalFull: false})}}>
                             <p className="sd-margin-b--3">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes,
                             nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.