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

package/dist/react/Container.tsx

@@ -0,0 +1,143 @@
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import { PropsList, Prop, Container, Text, Heading, Button, ButtonGroup } from '../../../app-typescript';
+
+interface IProps {
+    children?: React.ReactNode;
+}
+
+export default class ContainerDoc extends React.Component<IProps> {
+    render() {
+        return (
+            <section className='docs-page__container'>
+                <h2 className='docs-page__h2'>Container</h2>
+                
+                <Markup.ReactMarkupCodePreview>{`
+                    <Container>
+                        Cum sociis natoque penatibus et magnis dis parturient...
+                    </Container>
+                `}
+                </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'>
+                            <Container>
+                                Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur
+                                est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac
+                                consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
+                                sem lacinia quam venenatis vestibulum. 
+                            </Container>
+                        </div>
+
+                        <p className="docs-page__paragraph">// Usage examples</p>
+
+                        <div className='docs-page__content-row'>
+                            <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>
+                        </div>
+
+                        <div className='docs-page__content-row'>
+                            <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.
+                                    Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+                                    Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus
+                                    posuere velit aliquet. Aenean eu leo quam.
+                                </Text>
+                                <ButtonGroup align="end">
+                                    <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
+                                    <Button text="Submit" onClick={()=> false} type="primary" />
+                                </ButtonGroup>
+                            </Container>
+                        </div>
+
+                        <div className='docs-page__content-row'>
+                            <Container gap="large" theme='dark' 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.
+                                    Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+                                    Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus
+                                    posuere velit aliquet. Aenean eu leo quam.
+                                </Text>
+                                <ButtonGroup align="end">
+                                    <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
+                                    <Button text="Submit" onClick={()=> false} type="primary" />
+                                </ButtonGroup>
+                            </Container>
+                        </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' 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 | x-small | 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/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/dist/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/dist/react/DatePicker.tsx

@@ -14,11 +14,16 @@ class DatePickerExample extends React.PureComponent<{}, {date: Date}> {
     render() {
         return (
             <DatePicker
-                value={this.state.date}
-                dateFormat="YYYY-MM-DD"
-                onChange={(date) => {
-                    this.setState({date});
-                }}
+            value={this.state.date}
+            dateFormat="YYYY-MM-DD"
+            onChange={(date) => {
+                this.setState({date});
+            }}
+            required
+            tabindex={1}
+            label={'This is Label'}
+            info={'This is info'}
+            error={'This is error'}
             />
         );
     }

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>
+        )
+    }
+}