superdesk-ui-framework 3.0.0-beta.0 → 3.0.1-beta.10

package/dist/react/DropZone.tsx

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import { DropZone, Button, Icon, Prop, PropsList  } from '../../../app-typescript';
+
+interface IProps {
+    children?: React.ReactNode;
+}
+
+export default class DropZoneDoc extends React.Component<IProps> {
+    render() {
+        return (
+            <section className='docs-page__container'>
+                <h2 className='docs-page__h2'>Container</h2>
+                
+                <Markup.ReactMarkupCodePreview>{`
+                    <DropZone>
+
+                    </DropZone>
+                `}
+                </Markup.ReactMarkupCodePreview>
+
+                <p className="docs-page__paragraph">
+                    The Container is a convenient layout component with different layout options and support for external CSS classes.
+                    The display model is <code>flex</code> by default, but can be changed with the <code>display</code> prop. It is 
+                    intended to be used with helper CSS classes to achieve desired styling options
+                </p>
+
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <p className="docs-page__paragraph">// Basic</p>
+                        <div className='docs-page__content-row'>
+                            <DropZone 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</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>{`
+                        // Basic
+
+                        <Container>
+                            Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et... 
+                        </Container>
+
+                        // Usage examples
+
+                        <Container gap="large" className='sd-border--medium sd-font-size--medium sd-padding--2 sd-radius--large'>
+                            <span>Curabitur blandit tempus porttitor.</span>
+                            <Button text="Test button" type="primary" onClick={()=> false} />
+                            <Button text="Test button" type="highlight" onClick={()=> false} />
+                            <ButtonGroup align="end">
+                                <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
+                                <Button text="Submit" onClick={()=> false} type="primary" />
+                            </ButtonGroup>
+                        </Container>
+
+                        <Container gap="large" direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
+                            <Heading type='h3'>Curabitur blandit tempus porttitor.</Heading>
+                            <Text color='light'>
+                                Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
+                            </Text>
+                            <ButtonGroup align="end">
+                                <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
+                                <Button text="Submit" onClick={()=> false} type="primary" />
+                            </ButtonGroup>
+                        </Container>
+
+                        <Container gap="large" theme='dark-ui' direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
+                        <Heading type='h3'>Curabitur blandit tempus porttitor.</Heading>
+                        <Text color='light'>
+                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
+                        </Text>
+                        <ButtonGroup align="end">
+                            <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
+                            <Button text="Submit" onClick={()=> false} type="primary" />
+                        </ButtonGroup>
+                    </Container>
+  
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">Props</h3>
+                <PropsList>
+                    <Prop name='display' isRequired={false} type='flex | inline-flex | block' default='flex' description='Change the default display mode (flex).'/>
+                    <Prop name='direction' isRequired={false} type='row | column' default='row' description='Change the flex-direction property.'/>
+                    <Prop name='gap' isRequired={false} type='none | small |  medium | large' default='none' description='Set the gap between elements inside the Container.'/>
+                    <Prop name='theme' isRequired={false} type='light | dark' default='/' description='Choose the UI theme. It will inherit the default theme if not set. All items inside will inherit the theme of the Container if it is set.'/>
+                    <Prop name='className' isRequired={false} type='string' default='/' description='Add helper classes or custom CSS styles'/>
+                </PropsList>
+            </section>
+        )
+    }
+}

package/dist/react/DurationInput.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react';
+
+import * as Markup from '../../js/react';
+
+import { Input, Select, CheckGroup, Checkbox, PropsList, Prop } from '../../../app-typescript';
+import { DurationInput } from '../../../app-typescript/components/DurationInput';
+
+interface IState {
+    inlineLabel: boolean;
+    required: boolean;
+    disabled: boolean;
+    invalid: boolean;
+}
+
+export default class DurationInputDoc extends React.Component<{}, IState> {
+    constructor(props) {
+        super(props);
+        this.state = {
+            inlineLabel: false,
+            required: true,
+            disabled: false,
+            invalid: false,
+        }
+    }
+    
+    render() {
+        return (
+            <section className='docs-page__container'>
+                <h2 className='docs-page__h2'>Duration Input</h2>
+                <Markup.ReactMarkupCodePreview>{`
+                    <DurationInput
+                    label='Label'
+                    info='info message'
+                    disabled={this.state.disabled}
+                    required={this.state.required}
+                    invalid={this.state.invalid}
+                    inlineLabel={this.state.inlineLabel}
+                    onChange={(e) => {
+                        console.log(e)
+                    }}
+                    />
+                `}
+                </Markup.ReactMarkupCodePreview>
+                <p className='docs-page__paragraph'></p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                            <div className='form__row'>
+                                <CheckGroup>
+                                    <Checkbox checked={this.state.required} label={{text:'Required input'}} onChange={(value) => {this.setState({required: value})}} />
+                                    <Checkbox checked={this.state.disabled} label={{text:'Disabled input'}} onChange={(value) => {this.setState({disabled: value})}} />
+                                    <Checkbox checked={this.state.invalid} label={{text:'Invalid input'}} onChange={(value) => {this.setState({invalid: value})}} />
+                                    <Checkbox checked={this.state.inlineLabel} label={{text:'Label positioned inline'}} onChange={(value) => {this.setState({inlineLabel: value})}} />
+                                </CheckGroup>
+                            </div>
+
+                            <div className='form__row'>
+                                <DurationInput
+                                label='Label'
+                                info='info message'
+                                disabled={this.state.disabled}
+                                required={this.state.required}
+                                invalid={this.state.invalid}
+                                inlineLabel={this.state.inlineLabel}
+                                onChange={(e) => {
+                                    console.log(e)
+                                }}
+                                />
+                            </div>
+                        </div>
+
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <DurationInput
+                        label='Label'
+                        info='info message'
+                        disabled={this.state.disabled}
+                        required={this.state.required}
+                        invalid={this.state.invalid}
+                        inlineLabel={this.state.inlineLabel}
+                        onChange={(e) => {
+                            console.log(e)
+                        }}
+                        />
+                    `}</Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
+                <h3 className='docs-page__h3'>Props</h3>
+                <PropsList>
+                    <Prop name='hours' isRequired={false} type='number' default='00' description='Hours value'/>
+                    <Prop name='minutes' isRequired={false} type='number' default='00' description='Minutes value'/>
+                    <Prop name='seconds' isRequired={false} type='number' default='00' description='Seconds value'/>
+                    <Prop name='label' isRequired={false} type='string' default='/' description='Input label'/>
+                    <Prop name='info' isRequired={false} type='string' default='/' description='Hint text'/>
+                    <Prop name='error' isRequired={false} type='string' default='/' description='Error text'/>
+                    <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline'/>
+                    <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required'/>
+                    <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled'/>
+                    <Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid'/>
+                </PropsList>
+            </section>
+        )
+    }
+}

package/dist/react/Heading.tsx

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import { PropsList, Prop, Heading } from '../../../app-typescript';
+
+interface IProps {
+    children?: React.ReactNode;
+}
+
+export default class HeadingDoc extends React.Component<IProps> {
+    render() {
+        return (
+            <section className='docs-page__container'>
+                <h2 className='docs-page__h2'>Heading</h2>
+                
+                <Markup.ReactMarkupCodePreview>{`
+                    <Heading type='h2'>
+                        Purus Dolor Ligula
+                    </Heading>
+                `}
+                </Markup.ReactMarkupCodePreview>
+
+                <p className="docs-page__paragraph">Heading component. By choosing the type (h1, h2, h3...) appropriate HTML tags will be rendered, preserving the semantcs.</p>
+
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <p className="docs-page__paragraph">// Basic</p>
+                        <div className='docs-page__content-row'>
+                            <Heading type='h1'>Heading one example</Heading>
+                        </div>
+                        <div className='docs-page__content-row'>
+                            <Heading type='h2'>Heading two example</Heading>
+                        </div>
+                        <div className='docs-page__content-row'>
+                            <Heading type='h3'>Heading three example</Heading>
+                        </div>
+                        <div className='docs-page__content-row'>
+                            <Heading type='h4'>Heading four example</Heading>
+                        </div>
+                        <div className='docs-page__content-row'>
+                            <Heading type='h5'>Heading five example</Heading>
+                        </div>
+                        <div className='docs-page__content-row'>
+                            <Heading type='h6'>Heading six example</Heading>
+                        </div>
+
+                        <p className="docs-page__paragraph">// Variations</p>
+
+                        <div className='docs-page__content-row'>
+                            <Heading fontStyle='serif' color='light' weight='strong' type='h1'>
+                                Maecenas faucibus mollis interdum.
+                            </Heading>
+                        </div>
+                        <div className='docs-page__content-row'>
+                            <Heading type='h2' style='italic' align='end'>
+                                Cras mattis consectetur purus sit amet fermentum.
+                            </Heading>
+                        </div>
+                        <div className='docs-page__content-row'>
+                            <Heading fontStyle='serif' type='h3' align='center' color='lighter'>
+                                Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla.
+                            </Heading>
+                        </div>
+
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        // Basic
+
+                        <Heading type='h1'>Heading one example</Heading>
+                        <Heading type='h2'>Heading two example</Heading>
+                        <Heading type='h3'>Heading three example</Heading>
+                        <Heading type='h4'>Heading four example</Heading>
+                        <Heading type='h5'>Heading five example</Heading>
+                        <Heading type='h6'>Heading six example</Heading>
+
+                        // Variations
+
+                        <Heading fontStyle='serif' color='light' weight='strong' type='h1'>
+                            Maecenas faucibus mollis interdum.
+                        </Heading>
+
+                        <Heading type='h2' style='italic' align='end'>
+                            Cras mattis consectetur purus sit amet fermentum.
+                        </Heading>
+
+                        <Heading  fontStyle='serif' type='h3' align='center' color='lighter'>
+                            Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla.
+                        </Heading>
+  
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">Props</h3>
+                <PropsList>
+                    <Prop name='type' isRequired={true} type='h1 | h2 | h3 | h4 | h5 | h6' default='/' description='Heading type (eg. H1, H2, H3... etc.)'/>
+                    <Prop name='weight' isRequired={false} type='normal | medium | strong' default='normal' description='Change the default font weight.'/>
+                    <Prop name='style' isRequired={false} type='normal | italic' default='normal' description='Change the default text style.'/>
+                    <Prop name='align' isRequired={false} type='start | end | center | justify' default='start' description='Text-align'/>
+                    <Prop name='fontStyle' isRequired={false} type='sans | serif' default='sans' description='Choose between default sans (Roboto) and serif (Merriweather) font styles. '/>
+                    <Prop name='color' isRequired={false} type='normal | light | lighter' default='normal' description='Choose a different text colour. Additional two lighter shades are available.'/>
+                    <Prop name='className' isRequired={false} type='string' default='/' description='Add helper classes or custom CSS styles'/>
+                </PropsList>
+            </section>
+        )
+    }
+}

package/dist/react/IconButtons.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import * as Markup from '../../js/react';
 
-import { IconButton, Prop, PropsList, Tooltip } from '../../../app-typescript';
+import { IconButton, Prop, PropsList, Tooltip, Container, ButtonGroup } from '../../../app-typescript';
 
 export default class IconButtonDoc extends React.Component {
     render() {
@@ -20,38 +20,64 @@ export default class IconButtonDoc extends React.Component {
                         <p className="docs-page__paragraph">// Default</p>
                         <p className="docs-page__paragraph--small">Hover buttons to see tooltips.</p>
                         <div className="docs-page__content-row docs-page__content-row--white">
-                            <Tooltip text='I support tooltips!'>
-                                <IconButton icon='close-small' ariaValue='Close' onClick={()=> false} />
-                            </Tooltip>
-                            <IconButton icon='plus-large' ariaValue='Add' onClick ={()=> false} />
+                            <IconButton icon='close-small' disabled ariaValue='Close' onClick={()=> false} />
+                            <IconButton icon='plus-large'  ariaValue='Add' onClick={()=> false} />
                             <IconButton icon='dots-vertical' ariaValue='More options' onClick={()=> false} />
                             <IconButton icon='trash' ariaValue='Move to trash' onClick={()=> false} />
-                            <Tooltip text='My tooltip is on the right.' flow='right'>
-                                <IconButton icon='close-small' ariaValue='Close' onClick={()=> false} />
-                            </Tooltip>
+                            <IconButton icon='close-small' ariaValue='Close' onClick={()=> false} />
                         </div>
                         <p className="docs-page__paragraph">// Small</p>
                         <div className="docs-page__content-row docs-page__content-row--white sd-d-flex ">
-                            <IconButton size='small' icon='plus-large' ariaValue='Add' onClick ={()=> false} />
+                            <IconButton size='small' icon='plus-large' ariaValue='Add' onClick={()=> false} />
                             <span className="sd-margin-x--auto"></span>
                             <IconButton size='small' icon='close-small' ariaValue='Close' onClick={()=> false} />
                         </div>
+
+                        <p className="docs-page__paragraph">// Xtra large, 'outline' style</p>
+                        <Container gap="large" className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--3'>
+                            <ButtonGroup align='center' spaces='loose'>
+                                <IconButton style='outline' size='x-large' icon='pencil' ariaValue='Add' onClick={()=> false} />
+                                <IconButton style='outline' disabled={true} size='x-large' icon='switches' ariaValue='Add' onClick={()=> false} />
+                                <IconButton style='outline' size='x-large' icon='crop' ariaValue='Close' onClick={()=> false} />
+                            </ButtonGroup>
+                        </Container>
+
+                        <p className="docs-page__paragraph">// Xtra large, outlineWhite style</p>
+                        <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='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>
+
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                        <Tooltip text='I support tooltips!'>
-                            <IconButton icon='close-small' ariaValue='close' onClick={()=> false} />
-                        </Tooltip>
-                        <IconButton icon='plus-large' ariaValue='plus' onClick ={()=> false} />
-                        <IconButton icon='dots-vertical' ariaValue='dots' onClick={()=> false} />
-                        <IconButton icon='trash' ariaValue='trash' onClick={()=> false} />
-                        <Tooltip text='My tooltip is on right.' flow='right'>
-                            <IconButton icon='close-small' ariaValue='close' onClick={()=> false} />
-                        </Tooltip>
+                        <IconButton icon='close-small' disabled ariaValue='Close' onClick={()=> false} />
+                        <IconButton icon='plus-large' ariaValue='Add' onClick={()=> false} />
+                        <IconButton icon='dots-vertical' ariaValue='More options' onClick={()=> false} />
+                        <IconButton icon='trash' ariaValue='Move to trash' onClick={()=> false} />
+                        <IconButton icon='close-small' ariaValue='Close' onClick={()=> false} />
 
                         // Small
-                        <IconButton size='small' icon='plus-large' ariaValue='Add' onClick ={()=> false} />
+                        <IconButton size='small' icon='plus-large' ariaValue='Add' onClick={()=> false} />
                         ...
                         <IconButton size='small' icon='close-small' ariaValue='Close' onClick={()=> false} />
+
+                        // Xtra large, 'outline' style
+                        <ButtonGroup align='center' spaces='loose'>
+                            <IconButton style='outline' size='x-large' icon='pencil' ariaValue='Add' onClick={()=> false} />
+                            <IconButton style='outline' disabled={true} size='x-large' icon='switches' ariaValue='Add' onClick={()=> false} />
+                            <IconButton style='outline' size='x-large' icon='crop' ariaValue='Close' onClick={()=> false} />
+                        </ButtonGroup>
+
+                        // Xtra large, outlineWhite style
+                        <ButtonGroup align='center' spaces='loose'>
+                            <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>
                 </Markup.ReactMarkup>
@@ -59,8 +85,12 @@ export default class IconButtonDoc extends React.Component {
                 <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='ariaValue' isRequired={true} type='string' default='/' description='Description for screen readers'/>
-                    <Prop name='size' isRequired={false} type='small' default='normal' description='Creates an IconButton with a smaller footprint.'/>
+                    <Prop name='ariaValue' isRequired={true} type='string' default='/' description='Description for screen readers, also used as the ToolTip value.'/>
+                    <Prop name='size' isRequired={false} type='default | small | x-large' default='default' description='Creates an IconButton with a smaller or larger footprint.'/>
+                    <Prop name='style' isRequired={false} type='default | outline | outlineWhite' default='default' description='Different styling options.'/>
+                    <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Disables the Button, preventing mouse events.'/>
+                    <Prop name='toolTipFlow' isRequired={false} type='top | left | right | down' default='top' description='Defines the possition of the ToolTip.'/>
+                    <Prop name='toolTipAppend' isRequired={false} type='boolean' default='false' description='Uses the append to body version of the ToolTips if set to true.'/>
                 </PropsList>
             </section>
         )

package/dist/react/IconFont.tsx

@@ -3,19 +3,20 @@ import * as Markup from "../../js/react";
 
 import { Icon, Prop, PropsList } from '../../../app-typescript';
 
+//@ts-ignore
 import * as iconFont from '../../../app/styles/_icon-font.scss';
 
-export default class IconFontDoc extends React.PureComponent{
-    render(){
+export default class IconFontDoc extends React.PureComponent {
+    render() {
         const array = iconFont.icon.split(', ');
         const icons = array.map((icon, index) =>
             <li key={index}>
-                <Icon name={icon}/>
+                <Icon name={icon} />
                 <span>{icon}</span>
             </li>
-            );
-        return(
-            <section className="docs-page__container"> 
+        );
+        return (
+            <section className="docs-page__container">
                 <h2 className="docs-page__h2 docs-page__text-align--center">Icon font</h2>
                 <Markup.ReactMarkupCodePreview>{`
                     <Icon name="photo" />

package/dist/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/dist/react/IconPicker.tsx

@@ -0,0 +1,65 @@
+import * as React from "react";
+import * as Markup from "../../js/react";
+import { IconPicker, PropsList, Prop } from "../../../app-typescript";
+
+const IconPickerDocs = () => {
+
+    const [value, setValue] = React.useState('amp');
+
+    return (
+        <section className="docs-page__container">
+            <h2 className="docs-page__h2">Icon Picker</h2>
+            <Markup.ReactMarkupCodePreview>{`
+                    <IconPicker
+                        label="Icon"
+                        filterPlaceholder="Search..."
+                        translateFunction={(text: string): string => text}
+                        value={value}
+                        onChange={(value) => {
+                            setValue(value);
+                        }}     
+                    />
+                `}
+            </Markup.ReactMarkupCodePreview>
+            <Markup.ReactMarkup>
+                <Markup.ReactMarkupPreview>
+                    <IconPicker
+                        label="Icon"
+                        filterPlaceholder="Search..."
+                        translateFunction={(text: string): string => text}
+                        value={value}
+                        onChange={(value) => {
+                            setValue(value);
+                        }}
+                    />
+                </Markup.ReactMarkupPreview>
+                <Markup.ReactMarkupCode>{`
+                    
+                    const [value, setValue] = React.useState("amp");
+                    ...
+                    <IconPicker
+                        label="Icon"
+                        filterPlaceholder="Search..."
+                        translateFunction={(text: string): string => text}
+                        value={value}
+                        onChange={(value) => {
+                            setValue(value);
+                        }}
+                    />
+                `}</Markup.ReactMarkupCode>
+            </Markup.ReactMarkup>
+
+            <h3 className="docs-page__h3">Props</h3>
+            <PropsList>
+                <Prop name='label' isRequired={false} type='string' default='Icon' description='Select label' />
+                <Prop name='filterPlaceholder' isRequired={false} type='string' default='Search...' description='Filter placeholder' />
+                <Prop name='translateFunction' isRequired={false} type='function' default='(text) => text' description='eg: gettext' />
+                <Prop name='value' isRequired={true} type='string' default='null' description='Current value' />
+                <Prop name='onChange' isRequired={true} type='Function' default='null' description='Callback onChange event ' />
+            </PropsList>
+
+        </section>
+    )
+}
+
+export default IconPickerDocs;