superdesk-ui-framework 3.0.1-beta.3 → 3.0.1-beta.4

package/dist/vendor.bundle.js

@@ -7,7 +7,7 @@
 		var a = typeof exports === 'object' ? factory(require("react"), require("react-dom")) : factory(root["react"], root["react-dom"]);
 		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
 	}
-})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_8__) {
+})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_9__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -70,7 +70,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/ 	__webpack_require__.p = "";
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 483);
+/******/ 	return __webpack_require__(__webpack_require__.s = 488);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -82,7 +82,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
 
 /***/ }),
 
-/***/ 36:
+/***/ 33:
 /***/ (function(module, exports, __webpack_require__) {
 
 /* WEBPACK VAR INJECTION */(function(global, module) {var __WEBPACK_AMD_DEFINE_RESULT__;/**
@@ -17296,11 +17296,11 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
   }
 }.call(this));
 
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(38), __webpack_require__(46)(module)))
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(39), __webpack_require__(47)(module)))
 
 /***/ }),
 
-/***/ 38:
+/***/ 39:
 /***/ (function(module, exports) {
 
 var g;
@@ -17328,7 +17328,7 @@ module.exports = g;
 
 /***/ }),
 
-/***/ 39:
+/***/ 40:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -28217,7 +28217,7 @@ return jQuery;
 
 /***/ }),
 
-/***/ 46:
+/***/ 47:
 /***/ (function(module, exports) {
 
 module.exports = function(module) {
@@ -28246,29 +28246,29 @@ module.exports = function(module) {
 
 /***/ }),
 
-/***/ 483:
+/***/ 488:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-__webpack_require__(36);
+__webpack_require__(33);
 
-__webpack_require__(39);
+__webpack_require__(40);
 
-__webpack_require__(484);
+__webpack_require__(489);
 
-__webpack_require__(486);
+__webpack_require__(491);
 
-__webpack_require__(488);
+__webpack_require__(493);
 
 __webpack_require__(0);
 
-__webpack_require__(8);
+__webpack_require__(9);
 
 /***/ }),
 
-/***/ 484:
+/***/ 489:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -28292,7 +28292,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 	if ( true ) {
 
 		// AMD. Register as an anonymous module.
-		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(39), __webpack_require__(485) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
+		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(40), __webpack_require__(490) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
 				__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
 				(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
 				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
@@ -29030,7 +29030,7 @@ return $.widget;
 
 /***/ }),
 
-/***/ 485:
+/***/ 490:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;( function( factory ) {
@@ -29039,7 +29039,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 	if ( true ) {
 
 		// AMD. Register as an anonymous module.
-		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(39) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
+		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(40) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
 				__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
 				(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
 				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
@@ -29060,16 +29060,16 @@ return $.ui.version = "1.13.0";
 
 /***/ }),
 
-/***/ 486:
+/***/ 491:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(487);
+__webpack_require__(492);
 module.exports = angular;
 
 
 /***/ }),
 
-/***/ 487:
+/***/ 492:
 /***/ (function(module, exports, __webpack_require__) {
 
 /* WEBPACK VAR INJECTION */(function(__webpack_provided_window_dot_jQuery) {/**
@@ -65672,20 +65672,20 @@ $provide.value("$locale", {
 })(window);
 
 !window.angular.$$csp().noInlineStyle && window.angular.element(document.head).prepend(window.angular.element('<style>').text('@charset "UTF-8";[ng\\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}'));
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(39)))
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(40)))
 
 /***/ }),
 
-/***/ 488:
+/***/ 493:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(489);
+__webpack_require__(494);
 module.exports = 'ngAnimate';
 
 
 /***/ }),
 
-/***/ 489:
+/***/ 494:
 /***/ (function(module, exports) {
 
 /**
@@ -69964,10 +69964,10 @@ angular.module('ngAnimate', [], function initAngularHelpers() {
 
 /***/ }),
 
-/***/ 8:
+/***/ 9:
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_8__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_9__;
 
 /***/ })
 

package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx

@@ -5,6 +5,7 @@ import * as Layout from '../../../../app-typescript/components/Layouts';
 import * as Form from '../../../../app-typescript/components/Form';
 import * as Nav from '../../../../app-typescript/components/Navigation';
 import { BottomNav } from '../../../../app-typescript/components/Navigation/BottomNav';
+import { clone } from 'lodash';
 
 interface IProps {
     children?: React.ReactNode;
@@ -19,6 +20,7 @@ interface IState {
     theme: 'dark' | 'light' | string;
     mainMenuOpen: boolean;
     notificationsOpen: boolean;
+    botNavArray: any;
 }
 
 export class CoreLayout extends React.Component<IProps, IState> {
@@ -28,9 +30,16 @@ export class CoreLayout extends React.Component<IProps, IState> {
             theme: 'light',
             mainMenuOpen: false,
             notificationsOpen: false,
+            botNavArray: [
+                            { icon:'photo', title: 'Sed posuere consectetur est at lobortis.', onClick: () => false, onRemove: (e) => this.handleDelete(e) },
+                            { title: 'Nullam id dolor id nibh ultricies.', onClick: () => false, onRemove: (e) => this.handleDelete(e)},
+                            { icon:'video', title: 'Nulla vitae elit libero, a pharetra augue.', onClick: () => false, onRemove: (e) => this.handleDelete(e)},
+                            { title: 'Donec sed odio dui.', onClick: () => false, onRemove: (e) => this.handleDelete(e)},
+            ]
         }
         this.handleMainMenu = this.handleMainMenu.bind(this);
         this.handleNotifications = this.handleNotifications.bind(this);
+        this.handleDelete = this.handleDelete.bind(this);
     }
 
     handleMainMenu() {
@@ -38,56 +47,64 @@ export class CoreLayout extends React.Component<IProps, IState> {
             mainMenuOpen: !state.mainMenuOpen,
         }));
     }
+
     handleNotifications() {
         this.setState((state) => ({
             notificationsOpen: !state.notificationsOpen,
         }));
     }
+    
+    handleDelete(indexNumber: number) {
+        const newItems = clone(this.state.botNavArray);
+        newItems.splice(indexNumber, 1);
 
+        this.setState({
+            botNavArray: newItems,
+        });  
+    }
 
     render() {
         return (
             <Layout.CoreLayout
-                heading='Core Layout'
-                menuOpen={this.state.mainMenuOpen}
-                onClick={this.handleMainMenu}
-                active={this.state.mainMenuOpen}
-                ariaControls='main-menu'
-                menuId='main-menu'
-                slideInMenu={(
-                    <Layout.MainMenu
-                        headerTitle='Main Menu'
-                        poweredBy='Powered by Superdesk technology'
-                        header={(null)}
-                        footerContent={true}
-                        footer={(
-                            <p>Menu footer testing</p>
-                        )}
-                    >
-                        <LeftMenu 
-                            style='blanc'
-                            reverseItemBorder={true}
-                            size='large'
-                            ariaLabel={'Left navigation'}   
-                            activeItemId='1'
-                            groups={[
-                                { label: 'MAIN SECTIONS', items: [
-                                    { id: '1', label: 'Section 1', ref:'section1'},
-                                    { id: '2', label: 'Section 2', ref: 'section2' },
-                                    { id: '3', label: 'Section 3', ref: 'section3' },
-                                
-                                ]},
-                                { label:'OTHER SECTIONS', items: [
-                                    { id: '4', label: 'Section 4', ref: 'section4' },
-                                    { id: '5', label: 'Section 5', ref: 'section5' },
-                                ]},
-                                { label:'OTHER SECTIONS', items: [
-                                    { id: '6', label: 'Section 6', ref: 'section6' },
-                                    { id: '7', label: 'Section 7', ref: 'section7' },
-                                ]}
-                            ]}
-                        onSelect={() => false} />
-                    </Layout.MainMenu>
+            heading='Core Layout'
+            menuOpen={this.state.mainMenuOpen}
+            onClick={this.handleMainMenu}
+            active={this.state.mainMenuOpen}
+            ariaControls='main-menu'
+            menuId='main-menu'
+            slideInMenu={(
+                <Layout.MainMenu
+                headerTitle='Main Menu'
+                poweredBy='Powered by Superdesk technology'
+                header={(null)}
+                footerContent={true}
+                footer={(
+                    <p>Menu footer testing</p>
+                )}>
+                    <LeftMenu 
+                    style='blanc'
+                    reverseItemBorder={true}
+                    size='large'
+                    ariaLabel={'Left navigation'}   
+                    activeItemId='1'
+                    groups={[
+                        { label: 'MAIN SECTIONS', items: [
+                            { id: '1', label: 'Section 1', ref:'section1'},
+                            { id: '2', label: 'Section 2', ref: 'section2' },
+                            { id: '3', label: 'Section 3', ref: 'section3' },
+                        
+                        ]},
+                        { label:'OTHER SECTIONS', items: [
+                            { id: '4', label: 'Section 4', ref: 'section4' },
+                            { id: '5', label: 'Section 5', ref: 'section5' },
+                        ]},
+                        { label:'OTHER SECTIONS', items: [
+                            { id: '6', label: 'Section 6', ref: 'section6' },
+                            { id: '7', label: 'Section 7', ref: 'section7' },
+                        ]}
+                    ]}
+                    onSelect={() => false} />
+                </Layout.MainMenu>
                 )}
                 topMenu={(
                     <NavButton badgeValue='6' icon='bell' text='Show notifications' onClick={this.handleNotifications} />
@@ -96,22 +113,16 @@ export class CoreLayout extends React.Component<IProps, IState> {
                     <>
                     <Layout.BottomBarAction onClick={()=> false} />
                     <BottomNav
-                        items={[
-                            { icon:'photo', title: 'Sed posuere consectetur est at lobortis.', onClick: () => console.log('test1') },
-                            { title: 'Nullam id dolor id nibh ultricies.', onClick: () => console.log('test2')},
-                            { icon:'video', title: 'Nulla vitae elit libero, a pharetra augue.', onClick: () => false},
-                            { title: 'Donec sed odio dui.', onClick: () => false},
-                    ]} />
+                        items={this.state.botNavArray} />
                     </>
                 )}
                 overlay={(
                     <Layout.NotificationPanel
-                        header={(null)}
-                        headerTitle='Notifications'
-                        open={this.state.notificationsOpen}
-                        onClick={this.handleNotifications}
-                        theme='dark'
-                    >
+                    header={(null)}
+                    headerTitle='Notifications'
+                    open={this.state.notificationsOpen}
+                    onClick={this.handleNotifications}
+                    theme='dark'>
                         <BoxedList>
                             <BoxedListItem unread={true}>
                                 <Time datetime='29.06.2022'>29.06.2022</Time>
@@ -137,8 +148,7 @@ export class CoreLayout extends React.Component<IProps, IState> {
                         </BoxedList>
 
                     </Layout.NotificationPanel>
-                )}
-            >
+                )}>
             </Layout.CoreLayout>
         );
     }

package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx

@@ -27,6 +27,7 @@ interface IState {
     rightPanelPinned: boolean;
     sideOverlayOpen: boolean;
     array: any;
+    inputValue: string;
 }
 
 export class RundownEditor extends React.Component<IProps, IState> {
@@ -46,6 +47,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
             rightPanelOpen: false,
             rightPanelPinned: false,
             sideOverlayOpen: false,
+            inputValue: 'string',
             array: [
                 {
                     start: <>
@@ -137,7 +139,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
                 <Layout.HeaderPanel>       
                     <SubNav>
                         <ButtonGroup align='end'>
-                            <Button text="Cancel"  onClick={()=> false} type="default" />
+                            <Button text="Cancel" onClick={()=> false} type="default" />
                             <Button text="Save Rundown" onClick={()=> false} type="primary" />
                             <Divider size="mini" />
                             <ButtonGroup subgroup={true} spaces="no-space">
@@ -299,30 +301,36 @@ export class RundownEditor extends React.Component<IProps, IState> {
                         )}
                         >
                             <Container direction='column' className='sd-margin-y--2'>
-                                <input
-                                    onChange={()=> false}
+                                <Input 
+                                    label='Rundown title'
+                                    value={'Marker // 01.06.2022'}
+                                    boxedStyle={true}
+                                    boxedLable={true}
+                                    size='x-large'
+                                    placeholder='Rundown title'
+                                    labelHidden={true}
                                     type='text'
-                                    value='Marker // 01.06.2022'
-                                    className='sd-editor__input--title' />
+                                    tabindex={0}
+                                    onChange={(value) => this.setState({inputValue: value})} />
                             </Container>
                             <ButtonGroup>
                                 <IconLabel style='translucent' innerLabel='Airtime:' text='19:00 - 19:45' size='large' type='primary' icon='time' />
                                 <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='large' type='warning' />
                                 <Text color='light' size='medium' className='sd-margin--0'>OF</Text>
-                                <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='large' />
+                                <IconLabel style='translucent' innerLabel='Planned:'text='00:45' size='large' />
                             </ButtonGroup>
 
                             <TableList
-                            className='sd-margin-y--4'
-                            dragAndDrop
-                            addItem
-                            array={this.state.array}
-                            itemsDropdown={[
-                                { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
-                                { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
-                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
-                            ]}
-                            onClick={() => false}
+                                className='sd-margin-y--4'
+                                dragAndDrop
+                                addItem
+                                array={this.state.array}
+                                itemsDropdown={[
+                                    { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
+                                    { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
+                                    { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                                ]}
+                                onClick={() => false}
                             />   
 
                     </Layout.AuthoringMain>

package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx

@@ -1,6 +1,6 @@
 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 } from '../../../../app-typescript/index';
 import { Carousel } from '../../../../app-typescript/index';
 import * as GridElements from '../../../../app-typescript/components/GridItem';
 
@@ -23,6 +23,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 +43,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,6 +62,58 @@ export class TestGround extends React.Component<IProps, IState> {
             <Components.Layout header='Testing Ground'>
                 <Components.LayoutContainer>
                     <Components.MainPanel>
+                        <InputNew
+                            label='testt'
+                            value=''
+                            onChange={(value) => false}
+                            //placeholder='test'
+                            required={true}
+                            info='Nullam Sollicitudin'
+                            maxLength={20}
+                            //invalid={true}
+                            //disabled={true}
+                            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={true}
+
+                                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="Exit" type='primary' onClick={()=> false} />
+
+                            <Button text="Cancel" onClick={()=> false} />
+
+                            <Button text="Save" type='primary' onClick={()=> false} />
+                        </div>
+                        <hr />
                         <h3 className="docs-page__h3 sd-margin-y--0">Table list</h3>
                         <hr />
                         <ul className='table-list'>
@@ -396,6 +454,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/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx

@@ -28,7 +28,7 @@ export const Layout = ({
                 {children}
             </section>
             <footer className='sd-bottom-bar'>
-                This is the footer.
+                Footer
             </footer>
         </div>
     );

package/examples/pages/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>
         )

package/examples/pages/react/ContentList.tsx

@@ -98,7 +98,8 @@ export default class ContentListDoc extends React.Component {
                                         fullwidth: true,
                                     }
                                 ],
-                                locked: true,
+                                //locked: true,
+                                selected: true,
                                 action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
                             },
                             {
@@ -262,18 +263,23 @@ export default class ContentListDoc extends React.Component {
                 </Markup.ReactMarkup>
 
                 <h3 className="docs-page__h3">Props</h3>
-                <p className="docs-page__paragraph">BoxedList</p>
+                <p className="docs-page__paragraph">ContentList</p>
                 <PropsList>
-                    <Prop name='density' isRequired={false} type='compact | comfortable' default='compact' description='Increase the gap beetween list items.'/>
+                    <Prop name='items' isRequired={true} type='Array' default='compact' description='An array of object.'/>
                 </PropsList>
-                <p className="docs-page__paragraph">BoxedListItem</p>
+                <p className="docs-page__paragraph">Items:</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.'/>
+                    <Prop name='itemColum' isRequired={true} type='Array<{itemRow: Array<{content: any}>, border?: boolean, fullwidth?: boolean}>' default='false' description='An array of objects for defining column of individual items.'/>
+                    <Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='On hover displays an additional menu.'/>
+                    <Prop name='locked' isRequired={false} type='boolean' default='false' description='If is true, the individual item of list change state and change style.'/>
+                    <Prop name='activated' isRequired={false} type='boolean' default='false' description='If is true, the individual item of list change state and change style.'/>
+                    <Prop name='selected' isRequired={false} type='boolean' default='false' description='If is true, the individual item of list change state and change style.'/>
+                    <Prop name='archived' isRequired={false} type='boolean' default='false' description='If is true, the individual item of list change state and change style.'/>
+                    <Prop name='loading' isRequired={false} type='boolean' default='false' description='If is true, the individual item of list change state and change style.'/>
+                    <Prop name='onClick' isRequired={false} type='function' default='/' description='onClick functionality.'/>
+                    <Prop name='onDoubleClick' isRequired={false} type='function' default='/' description='onDoubleClick functionality.'/>
                 </PropsList>
-
+    
             </section>
         )
     }