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

package/dist/playgrounds/react-playgrounds/TestGround.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import * as Components from './components/Index';
-import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, Input, Select, Option, Label, Icon, IconButton, CheckGroup, GridList, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner } from '../../../../app-typescript/index';
+import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, Input, Select, Option, Label, Icon, IconButton, CheckGroup, GridList, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, DatePicker, TimePicker, InputNew, InputBase, Text, FormRowNew} from '../../../../app-typescript/index';
 import { Carousel } from '../../../../app-typescript/index';
-import * as GridElements from '../../../../app-typescript/components/GridItem';
+import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
+
 
 import dummy_items from '../dummy-data/items';
 
@@ -23,6 +24,9 @@ interface IState {
     value5?: string;
     value6?: string;
     selctedTheme: string;
+    invalid: boolean;
+    date: any;
+    time: string;
 }
 
 export class TestGround extends React.Component<IProps, IState> {
@@ -40,6 +44,9 @@ export class TestGround extends React.Component<IProps, IState> {
             value5: undefined,
             value6: undefined,
             selctedTheme: 'light',
+            invalid: false,
+            date: '01/08/2022',
+            time: '16:50',
         }
     }
 
@@ -56,17 +63,283 @@ export class TestGround extends React.Component<IProps, IState> {
             <Components.Layout header='Testing Ground'>
                 <Components.LayoutContainer>
                     <Components.MainPanel>
-                        <h3 className="docs-page__h3 sd-margin-y--0">Table list</h3>
+
+                        
+                        <h3 className="docs-page__h3 sd-margin-y--0">Form test</h3>
                         <hr />
-                        <ul className='table-list'>
-                            <li className='table-list__item table-list__item--clickable table-list__item--draggable'>
+                        <div className="input-wrap">
+                            <FormLabel invalid required={true} state='focused' text="Form Label" forId="input1" />
+                            <IconButton size='small' icon="settings" ariaValue="Screen-reader text" onClick={()=> false} />
+                            <InputBase placeholder='Test placeholder' boxedStyle invalid type='text' id="input1" value='' onChange={(value) => {}} />
+                            <div className="input-wrap__message-box">
+                                <div className="sd-input__hint">Error message</div>
+                            </div>
+                            <span className="sd-input__char-count">0 / 40</span>
+                        </div>
+
+                        <hr />
+
+                        <div className="input-wrap input-wrap--boxed">
+                            <FormLabel style='boxed' text="Form Label" required={true} forId="input2" />
+                            <IconButton size='small' icon="settings" ariaValue="Screen-reader text" onClick={()=> false} />
+                            <InputBase disabled size='medium' placeholder='Test placeholder' boxedStyle type='text' id="input2" value='' onChange={(value) => {}} />
+                            <div className="input-wrap__message-box">
+                                <div className="sd-input__hint">Error message</div>
+                            </div>
+                            <span className="sd-input__char-count">0 / 40</span>
+                        </div>
+
+                        <hr />
+                        <hr />
+
+                        <InputNew
+                            label='test'
+                            value=''
+                            onChange={(value) => false}
+                            placeholder='test'
+                            required={true}
+                            info='Nullam Sollicitudin'
+                            maxLength={20}
+                            error='Error message'
+                            inlineLabel={true}
+                            labelHidden={true}
+                            type='text' />
+                        
+                        <hr />
+                        <div className='form__group-new'>
+                            <Input
+                                value=''
+                                onChange={(value) => {}}
+                                type='text'
+                                label='Text input'
+                                placeholder='Enter text'
+                                disabled={true} />
+                            <Input value=''
+                                onChange={(value) => {}}
+                                type='text'
+                                label='Text input'
+                                placeholder='Enter text'
+                                disabled={true} />
+                            <DatePicker
+                                value={this.state.date}
+                                onChange={(date) => {
+                                    this.setState({date});
+                                }}
+                                disabled={true}
+                                dateFormat="DD-MM-YYYY"
+                                label='Date'
+                                info='Nullam Sollicitudin'
+                                error='Error message'
+                                inlineLabel={false}
+                                shortcuts={[
+                                    {label: 'tomorrow', days: 1},
+                                    {label: 'yesterday', days: -1},
+                                ]}
+                            />
+                            <TimePicker
+                                value={this.state.time}
+                                disabled={true}
+                                required={true}
+                                label='Time'
+                                onChange={(time) => {
+                                    this.setState({time});
+                                }}
+                            />
+                            <Button text="Clear" onClick={()=> false} />
+                            <Button text="Cancel" onClick={()=> false} />
+                            <Button text="Save" type='primary' onClick={()=> false} />
+                        </div>
+                        <hr />
+
+                        <FormRowNew rowLabel='My group label' inlineLabels={true}>
+                            <Input
+                                value=''
+                                onChange={(value) => {}}
+                                type='text'
+                                label='Text input'
+                                placeholder='Enter text'
+                                inlineLabel={true}
+                                labelHidden={true}
+                                disabled={false} />
+                            <Text size='small' align='center'>To:</Text>
+                            <Input
+                                value=''
+                                onChange={(value) => {}}
+                                type='text'
+                                label='Text input'
+                                placeholder='Enter text'
+                                inlineLabel={true}
+                                labelHidden={true}
+                                disabled={false} />
+                            <DatePicker
+                                value={this.state.date}
+                                onChange={(date) => {
+                                    this.setState({date});
+                                }}
+                                // disabled={true}
+                                dateFormat="DD-MM-YYYY"
+                                label='Date'
+                                info='Nullam Sollicitudin'
+                                error='Error message'
+                                inlineLabel={true}
+                                labelHidden={true}
+                                shortcuts={[
+                                    {label: 'tomorrow', days: 1},
+                                    {label: 'yesterday', days: -1},
+                                ]}
+                            />
+                            <TimePicker
+                                value={this.state.time}
+                                // disabled={true}
+                                required={true}
+                                inlineLabel={true}
+                                labelHidden={true}
+                                label='Time'
+                                onChange={(time) => {
+                                    this.setState({time});
+                                }}
+                            />
+                            <Button text="Save" type='primary' onClick={()=> false} />
+                        </FormRowNew>
+
+                        <hr />
+
+                        <FormRowNew>
+                            <Input
+                                value=''
+                                onChange={(value) => {}}
+                                type='text'
+                                label='Text input'
+                                placeholder='Enter text'
+                                disabled={false} />
+                            <Text size='small' align='center'>To:</Text>
+                            <Input
+                                value=''
+                                onChange={(value) => {}}
+                                type='text'
+                                label='Text input'
+                                placeholder='Enter text'
+                                labelHidden={true}
+                                disabled={false} />
+                            <DatePicker
+                                value={this.state.date}
+                                onChange={(date) => {
+                                    this.setState({date});
+                                }}
+                                // disabled={true}
+                                dateFormat="DD-MM-YYYY"
+                                label='Date'
+                                info='Nullam Sollicitudin'
+                                error='Error message'
+                                inlineLabel={false}
+                                shortcuts={[
+                                    {label: 'tomorrow', days: 1},
+                                    {label: 'yesterday', days: -1},
+                                ]}
+                            />
+                            <TimePicker
+                                value={this.state.time}
+                                // disabled={true}
+                                required={true}
+                                label='Time'
+                                onChange={(time) => {
+                                    this.setState({time});
+                                }}
+                            />
+                            <Button text="Save" type='primary' onClick={()=> false} />
+                        </FormRowNew>
+
+                        <hr />
+                        <h3 className="docs-page__h3 sd-margin-y--0">Table list (draggable)</h3>
+                        <hr />
+                        <h4 className="docs-page__h4 sd-margin-y--1">Handles visible</h4>
+                        <ul className='table-list table-list--gap-s'>
+                            <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always'>
+                                <div className='table-list__item-border'></div>
+                                <div className='table-list__item-content'>
+                                    <div className='table-list__item-content-block'>
+                                        <Label text='Uvod' />
+                                        <Label type='primary' text='prlg' />
+                                    </div>
+                                    <div className='table-list__item-content-block table-list__item-content-block--center'>
+                                        <span>Handle visible. Nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
+                                    </div>
+                                    <div className='table-list__item-content-block'>
+                                        <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                                    </div>
+                                </div>
+                                <div className='table-list__slide-in-actions'>
+                                    <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
+                                </div>
+                            </li>
+                            <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always'>
+                                <div className='table-list__item-border'></div>
+                                <div className='table-list__item-content'>
+                                    <div className='table-list__item-content-block'>
+                                        <Label text='Gost' />
+                                        <Label type='primary' text='prlg' />
+                                    </div>
+                                    <div className='table-list__item-content-block table-list__item-content-block--center'>
+                                        <span>Handle visible. Duis mollis, est non commodo luctus, nisi erat porttitor ligula..</span>
+                                    </div>
+                                    <div className='table-list__item-content-block'>
+                                        <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                                    </div>
+                                </div>
+                                <div className='table-list__slide-in-actions'>
+                                    <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
+                                </div>
+                            </li>
+                            <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always'>
+                                <div style={{background:'#83cf7e',}} className='table-list__item-border'></div>
+                                <div className='table-list__item-content'>
+                                    <div className='table-list__item-content-block'>
+                                        <Label text='Podatak' />
+                                        <Label type='primary' text='Gost' />
+                                    </div>
+                                    <div className='table-list__item-content-block table-list__item-content-block--center'>
+                                        <span>Handle visible. Mollis est non commodo luctus, nisi erat porttitor ligula.</span>
+                                    </div>
+                                    <div className='table-list__item-content-block'>
+                                        <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                                    </div>
+                                </div>
+                                <div className='table-list__slide-in-actions'>
+                                    <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
+                                </div>
+                            </li>
+                            <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always table-list__item--selected'>
+                                <div className='table-list__item-border'></div>
+                                <div className='table-list__item-content'>
+                                    <div className='table-list__item-content-block'>
+                                        <Label text='Odjava' />
+                                        <Label type='warning' text='Slika' />
+                                    </div>
+                                    <div className='table-list__item-content-block table-list__item-content-block--center'>
+                                        <span>Handle visible. Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
+                                    </div>
+                                    <div className='table-list__item-content-block'>
+                                        <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                                    </div>
+                                </div>
+                                <div className='table-list__slide-in-actions'>
+                                    <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
+                                </div>
+                            </li>
+                        </ul>
+
+                        <hr />
+                        <h4 className="docs-page__h4 sd-margin-y--1">Handles hidden</h4>
+                        <ul className='table-list table-list--gap-s'>
+                            <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none'>
+                                <div className='table-list__item-border'></div>
                                 <div className='table-list__item-content'>
                                     <div className='table-list__item-content-block'>
-                                        <Label style='translucent' text='aacc' />
-                                        <Label style='translucent' type='primary' text='prlg' />
+                                        <Label text='Uvod' />
+                                        <Label type='primary' text='prlg' />
                                     </div>
                                     <div className='table-list__item-content-block table-list__item-content-block--center'>
-                                        <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
+                                        <span>Handle hidden. Nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
                                     </div>
                                     <div className='table-list__item-content-block'>
                                         <IconLabel style='translucent' text='Label success' type='success' icon='time' />
@@ -76,14 +349,74 @@ export class TestGround extends React.Component<IProps, IState> {
                                     <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
                                 </div>
                             </li>
+                            <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none'>
+                                <div className='table-list__item-border'></div>
+                                <div className='table-list__item-content'>
+                                    <div className='table-list__item-content-block'>
+                                        <Label text='Gost' />
+                                        <Label type='primary' text='prlg' />
+                                    </div>
+                                    <div className='table-list__item-content-block table-list__item-content-block--center'>
+                                        <span>Handle hidden. Duis mollis, est non commodo luctus, nisi erat porttitor ligula..</span>
+                                    </div>
+                                    <div className='table-list__item-content-block'>
+                                        <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                                    </div>
+                                </div>
+                                <div className='table-list__slide-in-actions'>
+                                    <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
+                                </div>
+                            </li>
+                            <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none'>
+                                <div style={{background:'#83cf7e',}} className='table-list__item-border'></div>
+                                <div className='table-list__item-content'>
+                                    <div className='table-list__item-content-block'>
+                                        <Label text='Podatak' />
+                                        <Label type='primary' text='Gost' />
+                                    </div>
+                                    <div className='table-list__item-content-block table-list__item-content-block--center'>
+                                        <span>Handle hidden. Mollis est non commodo luctus, nisi erat porttitor ligula.</span>
+                                    </div>
+                                    <div className='table-list__item-content-block'>
+                                        <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                                    </div>
+                                </div>
+                                <div className='table-list__slide-in-actions'>
+                                    <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
+                                </div>
+                            </li>
+                            <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none table-list__item--selected'>
+                                <div className='table-list__item-border'></div>
+                                <div className='table-list__item-content'>
+                                    <div className='table-list__item-content-block'>
+                                        <Label text='Odjava' />
+                                        <Label type='warning' text='Slika' />
+                                    </div>
+                                    <div className='table-list__item-content-block table-list__item-content-block--center'>
+                                        <span>Handle hidden. Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
+                                    </div>
+                                    <div className='table-list__item-content-block'>
+                                        <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                                    </div>
+                                </div>
+                                <div className='table-list__slide-in-actions'>
+                                    <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
+                                </div>
+                            </li>
+                        </ul>
+
+                        <hr />
+                        <h4 className="docs-page__h4 sd-margin-y--1">Handles on hover</h4>
+                        <ul className='table-list table-list--gap-s'>
                             <li className='table-list__item table-list__item--clickable table-list__item--draggable'>
+                                <div className='table-list__item-border'></div>
                                 <div className='table-list__item-content'>
                                     <div className='table-list__item-content-block'>
-                                        <Label style='translucent' type='warning' text='pokr' />
-                                        <Label style='translucent' text='slika' />
+                                        <Label text='Uvod' />
+                                        <Label type='primary' text='prlg' />
                                     </div>
                                     <div className='table-list__item-content-block table-list__item-content-block--center'>
-                                        <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
+                                        <span>Handle on hover. Nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
                                     </div>
                                     <div className='table-list__item-content-block'>
                                         <IconLabel style='translucent' text='Label success' type='success' icon='time' />
@@ -93,32 +426,33 @@ export class TestGround extends React.Component<IProps, IState> {
                                     <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
                                 </div>
                             </li>
-                            <li className='table-list__item table-list__item--clickable'>
+                            <li className='table-list__item table-list__item--clickable table-list__item--draggable'>
+                                <div className='table-list__item-border'></div>
                                 <div className='table-list__item-content'>
                                     <div className='table-list__item-content-block'>
-                                        <Label style='translucent' type='warning' text='pokr' />
-                                        <Label style='translucent' text='slika' />
+                                        <Label text='Gost' />
+                                        <Label type='primary' text='prlg' />
                                     </div>
                                     <div className='table-list__item-content-block table-list__item-content-block--center'>
-                                        <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
+                                        <span>Handle on hover. Duis mollis, est non commodo luctus, nisi erat porttitor ligula..</span>
                                     </div>
                                     <div className='table-list__item-content-block'>
                                         <IconLabel style='translucent' text='Label success' type='success' icon='time' />
                                     </div>
                                 </div>
                                 <div className='table-list__slide-in-actions'>
-                                    <IconButton icon='pencil' size='small' ariaValue='More actions' onClick={()=> false} />
-                                    <IconButton icon='trash' size='small' ariaValue='More actions' onClick={()=> false} />
+                                    <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
                                 </div>
                             </li>
-                            <li className='table-list__item table-list__item--clickable table-list__item--selected'>
+                            <li className='table-list__item table-list__item--clickable table-list__item--draggable'>
+                                <div style={{background:'#83cf7e',}} className='table-list__item-border'></div>
                                 <div className='table-list__item-content'>
                                     <div className='table-list__item-content-block'>
-                                        <Label style='translucent' type='warning' text='pokr' />
-                                        <Label style='translucent' text='slika' />
+                                        <Label text='Podatak' />
+                                        <Label type='primary' text='Gost' />
                                     </div>
                                     <div className='table-list__item-content-block table-list__item-content-block--center'>
-                                        <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
+                                        <span>Handle on hover. Mollis est non commodo luctus, nisi erat porttitor ligula.</span>
                                     </div>
                                     <div className='table-list__item-content-block'>
                                         <IconLabel style='translucent' text='Label success' type='success' icon='time' />
@@ -128,14 +462,15 @@ export class TestGround extends React.Component<IProps, IState> {
                                     <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
                                 </div>
                             </li>
-                            <li className='table-list__item table-list__item--clickable'>
+                            <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--selected'>
+                                <div className='table-list__item-border'></div>
                                 <div className='table-list__item-content'>
                                     <div className='table-list__item-content-block'>
-                                        <Label style='translucent' type='warning' text='pokr' />
-                                        <Label style='translucent' text='slika' />
+                                        <Label text='Odjava' />
+                                        <Label type='warning' text='Slika' />
                                     </div>
                                     <div className='table-list__item-content-block table-list__item-content-block--center'>
-                                        <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
+                                        <span>Handle on hover. Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
                                     </div>
                                     <div className='table-list__item-content-block'>
                                         <IconLabel style='translucent' text='Label success' type='success' icon='time' />
@@ -146,6 +481,8 @@ export class TestGround extends React.Component<IProps, IState> {
                                 </div>
                             </li>
                         </ul>
+                        <hr />
+                        <hr />
 
                         <h3 className="docs-page__h3 sd-margin-y--0 sd-margin-t--3">Table list with items between</h3>
                         <hr />
@@ -263,6 +600,42 @@ export class TestGround extends React.Component<IProps, IState> {
                         </div>
 
                         <hr /><hr />
+                        <h3 className="docs-page__h3 sd-margin-y--0 sd-margin-b--3">Duration input</h3>
+
+                        
+                        <div className="sd-input">
+                            <label className="sd-input__label" id="duration01">Input label</label>
+                            <div className="sd-input__duration-input" id="id06" aria-describedby="duration01">
+                                <input type="number" className="" placeholder='00'/>
+                                <span className="sd-input__suffix">h</span>
+                                <input type="number" className="" placeholder='00'/>
+                                <span className="sd-input__suffix">m</span>
+                                <input type="number" className="" placeholder='00'/>
+                                <span className="sd-input__suffix">s</span>
+                            </div>
+                            <div className="sd-input__char-count">0 / 30</div>
+                            <div className="sd-input__message-box">
+                                <div className="sd-input__hint">This is some hint message</div>
+                            </div>
+                        </div>
+
+                        <h3 className="docs-page__h3 sd-margin-y--0 sd-margin-b--3">testiramt</h3>
+
+                        
+                        <div className="sd-input">
+                            <label className="sd-input__label" id="duration01">Input label</label>
+                            {/* temp */}
+                            <div id="pr_id_1" className="p-dropdown p-component p-inputwrapper p-dropdown-clearable"><div className="p-hidden-accessible"><input type="text" aria-haspopup="listbox" /></div><div className="p-hidden-accessible p-dropdown-hidden-select"><select aria-hidden="true"><option value=""> </option></select></div><span className="p-dropdown-label p-inputtext p-placeholder"><div>Select a color</div></span><div className="p-dropdown-trigger" role="button" aria-haspopup="listbox" aria-expanded="false"><span className="p-dropdown-trigger-icon pi pi-chevron-down p-clickable"></span></div></div>
+                            {/* temp */}
+                            
+                            
+                            <div className="sd-input__char-count">0 / 30</div>
+                            <div className="sd-input__message-box">
+                                <div className="sd-input__hint">This is some hint message</div>
+                            </div>
+                        </div>
+
+                        <hr />
 
                         <h3 className="docs-page__h3 sd-margin-t--2 sd-margin-b--0">Radio</h3>
                         <hr />
@@ -360,6 +733,23 @@ export class TestGround extends React.Component<IProps, IState> {
                             ]} onChange={($event)=>{this.setState({selctedTheme: $event})}} value={this.state.selctedTheme} />
                         </Container>
                         <hr />
+                        <Container className='sd-padding--4 sd-panel-bg--100 sd-radius--large'>
+                            <Button text="Exit" type='primary' onClick={()=> false} />
+                            <Divider />
+                            <Button text="Cancel" onClick={()=> false} />
+                            <Divider />
+                            <Button text="Save" type='primary' onClick={()=> false} />
+                        </Container>
+                        <hr />
+                        <Container className='sd-padding--4 sd-panel-bg--100 sd-radius--large'>
+                            
+                            <InputWrapper
+                                label="Label"
+                                invalid={false}>
+                                <input type='text' />
+                            </InputWrapper>
+                        </Container>
+                        <hr />
                         <Container className='sd-padding--4 sd-panel-bg--100 sd-radius--large'>
                             <div className='sd-dropzone__drop-target'>
                                 <div className='sd-dropzone__target-border'></div>

package/dist/playgrounds/react-playgrounds/components/Layout.tsx

@@ -27,8 +27,8 @@ export const Layout = ({
             <section id='1' className='sd-content sd-content-wrapper'>
                 {children}
             </section>
-            <footer className='bottom-bar'>
-                This is the footer.
+            <footer className='sd-bottom-bar'>
+                Footer
             </footer>
         </div>
     );

package/dist/playgrounds/swimlane-view.html

@@ -1969,7 +1969,7 @@
             <!-- END Editor content -->
         </div>
     </section>
-    <footer class="bottom-bar ">
+    <footer class="sd-bottom-bar">
         This is the optional footer.
     </footer>
 </div>

package/dist/playgrounds/toasts.html

@@ -19,7 +19,7 @@
 
             </div>
     </section>
-    <footer class="bottom-bar">
+    <footer class="sd-bottom-bar">
         This is the optional footer.
     </footer>
 </div>

package/dist/playgrounds/video-editor.html

@@ -538,7 +538,7 @@
             <!-- END Editor content -->
         </div>
     </section>
-    <footer class="bottom-bar ">
+    <footer class="sd-bottom-bar">
         This is the optional footer.
     </footer>
 

package/dist/react/Badges.tsx

@@ -89,6 +89,16 @@ export default class BadgeDoc extends React.Component {
                             <Badge text='E' color='purple--400' shape='square' />
                             <Badge text='F' color='purple--500' shape='square' />
                         </div>
+
+                        <p className="docs-page__paragraph">// Custom hex colours</p>
+                        <div className='docs-page__content-row'>
+                            <Badge text='1' hexColor='#008773' />
+                            <Badge text='2' hexColor='#0000FF' />
+                            <Badge text='3' hexColor='#00D100' />
+                            <Badge text='4' hexColor='#5531D9' shape='square' />
+                            <Badge text='5' hexColor='#960E0F' shape='square' />
+                            <Badge text='6' hexColor='#DB60FF' shape='square' />
+                        </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         // Basic colour palette
@@ -112,6 +122,13 @@ export default class BadgeDoc extends React.Component {
                         <Badge text='D' color='purple--300' shape='square'/>
                         <Badge text='E' color='purple--400' shape='square'/>
                         <Badge text='F' color='purple--500' shape='square'/>
+                        // Custom hex colours
+                        <Badge text='1' hexColor='#008773' />
+                        <Badge text='2' hexColor='#0000FF' />
+                        <Badge text='3' hexColor='#00D100' />
+                        <Badge text='4' hexColor='#5531D9' shape='square' />
+                        <Badge text='5' hexColor='#960E0F' shape='square' />
+                        <Badge text='6' hexColor='#DB60FF' shape='square' />
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
@@ -152,6 +169,7 @@ export default class BadgeDoc extends React.Component {
                     <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='color' isRequired={false} type='string' default='/' description='Extended color palette from the framework (e.g. red--500);  NOTE: The badge can have either a Type or Color defined, not both at the same time.' />
                     <Prop name='shape' isRequired={false} type='round | square' default='round' description='Make shape of badge square or default round.' />
+                    <Prop name='hexColor' isRequired={false} type='string' default='/' description='Define a custom Hex colour for the Badge.'/>
                 </PropsList>
             </section>
         )