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

package/examples/pages/react/Labels.tsx

@@ -67,6 +67,12 @@ export default class LabelsDoc extends React.Component {
                             <Label text='deep-orange--700' color='deep-orange--700'/>
                             <Label text='lime--700' color='lime--700'/>  
                         </div>
+                        <p className="docs-page__paragraph">// Custom Hex colors</p>
+                        <div className='docs-page__content-row'>
+                            <Label text='Hex: #008773' hexColor='#008773'/>
+                            <Label text='Hex: #000FB5' hexColor='#000FB5'/>
+                            <Label text='Hex: #696B00' hexColor='#696B00'/>
+                        </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         <Label text='default label'/>
@@ -82,7 +88,11 @@ export default class LabelsDoc extends React.Component {
                         <Label text='cyan--600' color='cyan--600'/>
                         <Label text='light-green--700' color='light-green--700'/>
                         <Label text='deep-orange--700' color='deep-orange--700'/>
-                        <Label text='lime--700' color='lime--700'/>  
+                        <Label text='lime--700' color='lime--700'/> 
+                        // Custom Hex colors
+                        <Label text='Hex: #008773' hexColor='#008773'/>
+                        <Label text='Hex: #000FB5' hexColor='#000FB5'/>
+                        <Label text='Hex: #696B00' hexColor='#696B00'/>
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
@@ -113,6 +123,12 @@ export default class LabelsDoc extends React.Component {
                             <Label text='light-green--700 label' style='hollow' color='light-green--700'/>
                             <Label text='deep-purple--600 label' style='hollow' color='deep-purple--600'/>
                         </div>
+                        <p className="docs-page__paragraph">// Custom Hex colours</p>
+                        <div className='docs-page__content-row'>
+                            <Label text='Hex: #008773' style='hollow' hexColor='#008773'/>
+                            <Label text='Hex: #000FB5' style='hollow' hexColor='#000FB5'/>
+                            <Label text='Hex: #696B00' style='hollow' hexColor='#696B00'/>
+                        </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         <Label text='default label' style='hollow'/>
@@ -133,6 +149,11 @@ export default class LabelsDoc extends React.Component {
                         <Label text='blue-grey--600 label' style='hollow' color='blue-grey--600'/>
                         <Label text='light-green--700 label' style='hollow' color='light-green--700'/>
                         <Label text='deep-purple--600 label' style='hollow' color='deep-purple--600'/>
+
+                        // Custom Hex colours
+                        <Label text='Hex: #008773' style='hollow' hexColor='#008773'/>
+                        <Label text='Hex: #000FB5' style='hollow' hexColor='#000FB5'/>
+                        <Label text='Hex: #696B00' style='hollow' hexColor='#696B00'/>
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
@@ -156,6 +177,12 @@ export default class LabelsDoc extends React.Component {
                             <Label text='Translucent large' size='large' type='primary' style='translucent'/>
                             <Label text='Translucent, large & no text transformation' type='highlight' size='large' style='translucent' noTransform={true}/>
                         </div>
+                        <p className="docs-page__paragraph">// Custom Hex colours</p>
+                        <div className='docs-page__content-row'>
+                            <Label text='Hex: #008773' style='translucent' hexColor='#008773'/>
+                            <Label text='Hex: #000FB5' style='translucent' hexColor='#000FB5'/>
+                            <Label text='Hex: #696B00' style='translucent' hexColor='#696B00'/>
+                        </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         <Label text='default label' style='hollow'/>
@@ -169,6 +196,11 @@ export default class LabelsDoc extends React.Component {
                         <Label text='Translucent large' size='large' style='translucent'/>
                         <Label text='Translucent large' size='large' type='primary' style='translucent'/>
                         <Label text='Translucent, large & no text transformation' type='highlight' size='large' style='translucent' noTransform={true}/>
+
+                        // Custom Hex colours
+                        <Label text='Hex: #008773' style='translucent' hexColor='#008773'/>
+                        <Label text='Hex: #000FB5' style='translucent' hexColor='#000FB5'/>
+                        <Label text='Hex: #696B00' style='translucent' hexColor='#696B00'/>
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
@@ -195,6 +227,15 @@ export default class LabelsDoc extends React.Component {
                             <Label text='success label' type='success' style='translucent' onClick={()=> false}/>
                             <Label text='alert label' type='alert' style='translucent' onClick={()=> false}/>
                         </div>
+                        <p className="docs-page__paragraph">// Custom Hex colours</p>
+                        <div className='docs-page__content-row'>
+                            <Label text='Hex: #008773' hexColor='#008773' onClick={()=> false}/>
+                            <Label text='Hex: #000FB5' hexColor='#000FB5' onClick={()=> false}/>
+                            <Label style='hollow' text='Hex: #008773' hexColor='#008773' onClick={()=> false}/>
+                            <Label style='hollow' text='Hex: #000FB5' hexColor='#000FB5' onClick={()=> false}/>
+                            <Label style='translucent' text='Hex: #008773' hexColor='#008773' onClick={()=> false}/>
+                            <Label style='translucent' text='Hex: #000FB5' hexColor='#000FB5' onClick={()=> false}/>
+                        </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         <Label text='default label' onClick={()=> false}/>
@@ -211,6 +252,14 @@ export default class LabelsDoc extends React.Component {
                         <Label text='primary label' type='primary' style='translucent' onClick={()=> false}/>
                         <Label text='success label' type='success' style='translucent' onClick={()=> false}/>
                         <Label text='alert label' type='alert' style='translucent' onClick={()=> false}/>
+
+                        // Custom Hex colours
+                        <Label text='Hex: #008773' hexColor='#008773' onClick={()=> false}/>
+                        <Label text='Hex: #000FB5' hexColor='#000FB5' onClick={()=> false}/>
+                        <Label style='hollow' text='Hex: #008773' hexColor='#008773' onClick={()=> false}/>
+                        <Label style='hollow' text='Hex: #000FB5' hexColor='#000FB5' onClick={()=> false}/>
+                        <Label style='translucent' text='Hex: #008773' hexColor='#008773' onClick={()=> false}/>
+                        <Label style='translucent' text='Hex: #000FB5' hexColor='#000FB5' onClick={()=> false}/>
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
@@ -223,6 +272,7 @@ export default class LabelsDoc extends React.Component {
                     <Prop name='size' isRequired={false} type='small | normal | large' default='normal' description='Specifies a small, normal or large label.'/>
                     <Prop name='noTransform' isRequired={false} type='boolean' default='false' description='Transforms text to uppercase.'/>
                     <Prop name='style' isRequired={false} type='filled | hollow | translucent' default='filled' description='Label may have one of these styles - filled (default), hollow or translucent.'/>
+                    <Prop name='hexColor' isRequired={false} type='string' default='/' description='Define a custom Hex colour for the label.'/>
                 </PropsList>
             </section>
         )

package/examples/pages/react/MultiSelect.tsx

@@ -69,6 +69,10 @@ export class MultiselectDocs extends React.Component<{}, IState> {
                                     showSelectAll
                                     placeholder='Select a color'
                                     optionLabel='name'
+                                    required
+                                    tabindex={1}
+                                    label={'This is Label'}
+                                    info={'This is info'}
                                 />
                             </div>
                         </div>
@@ -83,6 +87,10 @@ export class MultiselectDocs extends React.Component<{}, IState> {
                             showSelectAll
                             placeholder='Select a color'
                             optionLabel='name'
+                            required
+                            tabindex={1}
+                            label={'This is Label'}
+                            info={'This is info'}
                         />
                     `}</Markup.ReactMarkupCode>
 
@@ -190,4 +198,4 @@ export class MultiselectDocs extends React.Component<{}, IState> {
             </section>
         )
     }
-}
+}

package/examples/pages/react/SelectWithTemplate.tsx

@@ -80,9 +80,14 @@ export class SelectWithTemplateDocs extends React.Component<{}, IState> {
                                         }
                                     }}
                                     getLabel={(option) => option.name}
-                                    areEqual={(a, b) => a.colorCode === b.colorCode}
+                                    areEqual={(a, b) => a?.colorCode === b?.colorCode}
                                     filterPlaceholder="Search..."
                                     noResultsFoundMessage="No results found."
+                                    required
+                                    tabindex={1}
+                                    label={'This is Label'}
+                                    info={'This is info'}
+                                    error={'This is error'}
                                 />
                             </div>
                         </div>

package/examples/pages/react/Selects.tsx

@@ -62,6 +62,61 @@ export default class InputsDoc extends React.Component<{}, IState> {
                                     <Option>Option 2</Option>
                                 </Select>
                             </div>
+
+                            <p className="docs-page__paragraph">// Boxed with hidden label</p>
+                            <div className='form__row'>
+                                <Select label='Select label'
+                                    value='Option 2'
+                                    boxedStyle
+                                    labelHidden
+                                    error='This is error message'
+                                    info='This is some hint message'
+                                    inlineLabel={this.state.inlineLabel}
+                                    required={this.state.required}
+                                    disabled={this.state.disabled}
+                                    invalid={this.state.invalid}
+                                    tabindex={0}
+                                    onChange={(value) => { console.log(value) }}>
+                                    <Option>Option 1</Option>
+                                    <Option>Option 2</Option>
+                                </Select>
+                            </div>
+                            <div className='form__row'>
+                                <Select label='Select label'
+                                    value='Option 2'
+                                    boxedStyle
+                                    labelHidden
+                                    size='large'
+                                    error='This is error message'
+                                    info='This is some hint message'
+                                    inlineLabel={this.state.inlineLabel}
+                                    required={this.state.required}
+                                    disabled={this.state.disabled}
+                                    invalid={this.state.invalid}
+                                    tabindex={0}
+                                    onChange={(value) => { console.log(value) }}>
+                                    <Option>Option 1</Option>
+                                    <Option>Option 2</Option>
+                                </Select>
+                            </div>
+                            <div className='form__row'>
+                                <Select label='Select label'
+                                    value='Option 2'
+                                    boxedStyle
+                                    labelHidden
+                                    size='x-large'
+                                    error='This is error message'
+                                    info='This is some hint message'
+                                    inlineLabel={this.state.inlineLabel}
+                                    required={this.state.required}
+                                    disabled={this.state.disabled}
+                                    invalid={this.state.invalid}
+                                    tabindex={0}
+                                    onChange={(value) => { console.log(value) }}>
+                                    <Option>Option 1</Option>
+                                    <Option>Option 2</Option>
+                                </Select>
+                            </div>
                         </div>
 
                     </Markup.ReactMarkupPreview>

package/examples/pages/react/TableList.tsx

@@ -82,12 +82,6 @@ export default class TableListDoc extends React.Component<IProps, IState> {
 
                         <TableList>
                             <TableListItem
-                            addItem
-                            itemsDropdown={[
-                                { label: <Label style='translucent' text='aacc' />, onSelect: () => 1 },
-                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
-                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
-                            ]}
                             start={
                                 <>
                                     <Label style='translucent' text='aacc' />
@@ -104,12 +98,6 @@ export default class TableListDoc extends React.Component<IProps, IState> {
                                 <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
                             } />
                             <TableListItem
-                            addItem
-                            itemsDropdown={[
-                                { label: <Label style='translucent' text='aacc' />, onSelect: () => 1 },
-                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
-                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
-                            ]}
                             start={
                                 <>
                                     <Label style='hollow' text='aacc' />
@@ -123,12 +111,6 @@ export default class TableListDoc extends React.Component<IProps, IState> {
                                 <IconLabel style='translucent' text='Label success' type='success' icon='time' />
                             } />
                             <TableListItem
-                            addItem
-                            itemsDropdown={[
-                                { label: <Label style='translucent' text='aacc' />, onSelect: () => 1 },
-                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
-                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
-                            ]}
                             start={
                                 <>
                                     <Label style='translucent' text='aacc' />
@@ -149,13 +131,7 @@ export default class TableListDoc extends React.Component<IProps, IState> {
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         <TableList>
-                            <TableListItem 
-                            addItem
-                            itemsDropdown={[
-                                { label: <Label style='translucent' text='aacc' />, onSelect: () => 1 },
-                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
-                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
-                            ]}
+                            <TableListItem
                             start={
                                 <>
                                     <Label style='translucent' text='aacc' />
@@ -172,12 +148,6 @@ export default class TableListDoc extends React.Component<IProps, IState> {
                                 <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
                             } />
                             <TableListItem
-                            addItem
-                            itemsDropdown={[
-                                { label: <Label style='translucent' text='aacc' />, onSelect: () => 1 },
-                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
-                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
-                            ]}
                             start={
                                 <>
                                     <Label style='hollow' text='aacc' />
@@ -191,12 +161,6 @@ export default class TableListDoc extends React.Component<IProps, IState> {
                                 <IconLabel style='translucent' text='Label success' type='success' icon='time' />
                             } />
                             <TableListItem
-                            addItem
-                            itemsDropdown={[
-                                { label: <Label style='translucent' text='aacc' />, onSelect: () => 1 },
-                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
-                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
-                            ]}
                             start={
                                 <>
                                     <Label style='translucent' text='aacc' />
@@ -250,16 +214,30 @@ export default class TableListDoc extends React.Component<IProps, IState> {
                 </Markup.ReactMarkup>
 
                 <h3 className="docs-page__h3">Props</h3>
-                <p className="docs-page__paragraph">BoxedList</p>
+                <p className="docs-page__paragraph">TableList</p>
+                <PropsList>
+                    <Prop name='array' isRequired={false} type='Array' default='false' description='Array of object.'/>
+                    <Prop name='children' isRequired={false} type='React.ReactNode' default='false' description='Children of component.'/>
+                    <Prop name='addItem' isRequired={false} type='boolean' default='false' description='Functionality to add items to the list.'/>
+                    <Prop name='dragAndDrop' isRequired={false} type='boolean' default='false' description='Drag&Drop functionality.'/>
+                    <Prop name='itemsDropdown' isRequired={false} type='React.ReactNode | any' default='false' description='Dropdown for functionality to add items to the list.'/>
+                    <Prop name='className' isRequired={false} type='string' default='false' description='Add class on TableList container.'/>
+                    <Prop name='onClick' isRequired={false} type='function' default='false' description='onClick functionality.'/>
+                </PropsList>
+                <p className="docs-page__paragraph">array:</p>
                 <PropsList>
-                    <Prop name='density' isRequired={false} type='compact | comfortable' default='compact' description='Increase the gap beetween list items.'/>
+                    <Prop name='start' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.'/>
+                    <Prop name='center' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.'/>
+                    <Prop name='end' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.'/>
+                    <Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='Column of individual list items that is displayed on hover.'/>
                 </PropsList>
-                <p className="docs-page__paragraph">BoxedListItem</p>
+                <p className="docs-page__paragraph">TableListItem</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='start' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.'/>
+                    <Prop name='center' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.'/>
+                    <Prop name='end' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.'/>
+                    <Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='Column of individual list items that is displayed on hover.'/>
+                    <Prop name='onClick' isRequired={false} type='function' default='false' description='onClick functionality.'/>
                 </PropsList>
 
             </section>

package/examples/pages/react/TimePicker.tsx

@@ -15,10 +15,15 @@ class TimePickerExample extends React.PureComponent<{}, {time: string}> {
     render() {
         return (
             <TimePicker
-                value={this.state.time}
-                onChange={(time) => {
-                    this.setState({time});
-                }}
+            value={this.state.time}
+            onChange={(time) => {
+                this.setState({time});
+            }}
+            required
+            tabindex={1}
+            label={'This is Label'}
+            info={'This is info'}
+            error={'This is error'}
             />
         );
     }
@@ -38,10 +43,13 @@ export default class TimePickerDoc extends React.Component {
                         render() {
                             return (
                                 <TimePicker
-                                    value={this.state.time}
-                                    onChange={(time) => {
-                                        this.setState({time});
-                                    }}
+                                value={this.state.time}
+                                onChange={(time) => {
+                                    this.setState({time});
+                                }}
+                                label={'This is Label'}
+                                info={'This is info'}
+                                error={'This is error'}
                                 />
                             );
                         }