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

package/examples/pages/react/DatePicker.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import * as Markup from '../../js/react';
-import {DatePicker, PropsList, Prop} from '../../../app-typescript';
+import {DatePicker, PropsList, Prop, DatePickerISO} from '../../../app-typescript';
 
 class DatePickerExample extends React.PureComponent<{}, {date: Date}> {
     constructor(props) {
@@ -48,6 +48,11 @@ export default class DatePickerDoc extends React.Component {
                                     onChange={(date) => {
                                         this.setState({date});
                                     }}
+                                    required
+                                    tabindex={1}
+                                    label={'This is Label'}
+                                    info={'This is info'}
+                                    error={'This is error'}
                                 />
                             );
                         }
@@ -58,6 +63,21 @@ export default class DatePickerDoc extends React.Component {
                         <div className='docs-page__content-row'>
                             <DatePickerExample />
                         </div>
+
+                        <p className="docs-page__paragraph">// DatePickerISO</p>
+                        <div className='docs-page__content-row'>
+                            <DatePickerISO
+                            value={'2019-01-01'}
+                            dateFormat="YYYY-MM-DD"
+                            onChange={(date) => {
+                                this.setState({date});
+                            }}   
+                            tabindex={1}
+                            label={'This is Label'}
+                            info={'This is info'}
+                            error={'This is error'}
+                            />
+                        </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                          <DatePicker

package/examples/pages/react/DurationInput.tsx

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

package/examples/pages/react/Index.tsx

@@ -61,6 +61,7 @@ import * as Playgrounds from '../playgrounds/react-playgrounds/Index';
 import { SelectWithTemplateDocs } from './SelectWithTemplate';
 import { MultiselectDocs } from './MultiSelect';
 import { TreeSelectDocs } from './TreeSelect';
+import DurationInputDoc from './DurationInput';
 import { PopoverDoc } from './Popover';
 import { MenuDocs } from './Menu';
 import {WithSizeObserverDocs} from './WithSizeObserver';
@@ -240,6 +241,9 @@ const pages = {
             'icon-picker': {
                 name: 'Icon Picker',
             },
+            'duration-input': {
+                name: 'Duration Input',
+            },
             'switch': {
                 name: 'Switch'
             },
@@ -337,6 +341,7 @@ class ReactDoc extends React.Component<IProps, IState> {
                         <Route path="/react/with-size-observer" component={WithSizeObserverDocs} />
                         <Route path="/react/multiselect" component={MultiselectDocs} />
                         <Route path="/react/treeselect" component={TreeSelectDocs} />
+                        <Route path="/react/duration-input" component={DurationInputDoc} />
                         <Route path="/react/popover" component={PopoverDoc} />
                         <Route path="/react/date-picker" component={DatePickerDoc} />
                         <Route path="/react/time-picker" component={TimePickerDoc} />

package/examples/pages/react/Inputs.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-
 import * as Markup from '../../js/react';
+import { Input, CheckGroup, Checkbox, PropsList, Prop, InputNew } from '../../../app-typescript';
+import { DurationInput } from '../../../app-typescript/components/DurationInput';
 
-import { Input, Select, CheckGroup, Checkbox, PropsList, Prop } from '../../../app-typescript';
 
 interface IState {
     inlineLabel: boolean;
@@ -46,6 +46,23 @@ export default class InputsDoc extends React.Component<{}, IState> {
                                     <Checkbox checked={this.state.inlineLabel} label={{text:'Label positioned inline'}} onChange={(value) => {this.setState({inlineLabel: value})}} />
                                 </CheckGroup>
                             </div>
+                            <div className='form__row'>
+                                <InputNew
+                                label='Label'
+                                value=''
+                                onChange={(value) => false
+                                }
+                            
+                                required={true}
+                                info='Nullam Sollicitudin'
+                                maxLength={20}
+                                //invalid={true}
+                                //disabled={true}
+                                error='Error message'
+                                //inlineLabel={true}
+                                //labelHidden={true}
+                                type='text' />
+                            </div>
 
                             <div className='form__row'>
                                 <Input label='Input label'
@@ -91,6 +108,12 @@ export default class InputsDoc extends React.Component<{}, IState> {
                                     tabindex={0}
                                     onChange={(value) => this.setState({value2: value})} />
                             </div>
+                            <div className='form__row'>
+                                <DurationInput
+                                onChange={(e) => {
+                                    console.log(e)
+                                }}
+                                />
                             <p className="docs-page__paragraph">// Boxed with hidden label</p>
                             <div className='form__row'>
                                 <Input label='Input label'
@@ -191,6 +214,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
                                     tabindex={0}
                                     onChange={(value) => this.setState({value2: value})} />
                             </div>
+                            </div>
                         </div>
 
                     </Markup.ReactMarkupPreview>
@@ -205,6 +229,128 @@ export default class InputsDoc extends React.Component<{}, IState> {
                             disabled={false}
                             invalid={false}
                             onChange={(value) => {}} />
+
+                        <Input label='Number Input'
+                            value={this.state.value}
+                            type='number'
+                            error='This is error message'
+                            info='Morbi leo risus porta ac consectetur ac.'
+                            inlineLabel={this.state.inlineLabel}
+                            required={this.state.required}
+                            disabled={this.state.disabled}
+                            invalid={this.state.invalid}
+                            tabindex={0}
+                            onChange={(value) => {}} />
+                        
+                        // Hidden label
+                        <Input label='Input label'
+                            value={''}
+                            maxLength={25}
+                            type='text'
+                            placeholder='Placeholder'
+                            error='This is error message'
+                            info='Donec id elit non mi porta gravida at eget metus.'
+                            inlineLabel={true}
+                            labelHidden={true}
+                            required={this.state.required}
+                            disabled={this.state.disabled}
+                            invalid={this.state.invalid}
+                            tabindex={0}
+                            onChange={(value) => {}} />
+
+                        // Boxed with hidden label
+                        <Input label='Input label'
+                            value={''}
+                            boxedStyle={true}
+                            maxLength={25}
+                            type='text'
+                            placeholder='Default boxed input'
+                            error='This is error message'
+                            inlineLabel={true}
+                            labelHidden={true}
+                            required={this.state.required}
+                            disabled={this.state.disabled}
+                            invalid={this.state.invalid}
+                            tabindex={0}
+                            onChange={(value) => {}} />
+
+                        <Input label='Input label'
+                            value={''}
+                            boxedStyle={true}
+                            size='large'
+                            maxLength={25}
+                            type='text'
+                            placeholder='Large boxed input'
+                            error='This is error message'
+                            inlineLabel={true}
+                            labelHidden={true}
+                            required={this.state.required}
+                            disabled={this.state.disabled}
+                            invalid={this.state.invalid}
+                            tabindex={0}
+                            onChange={(value) => {}} />
+
+                        <Input label='Input label'
+                            value={''}
+                            boxedStyle={true}
+                            size='x-large'
+                            maxLength={25}
+                            type='text'
+                            placeholder='Extra large boxed input'
+                            error='This is error message'
+                            inlineLabel={true}
+                            labelHidden={true}
+                            required={this.state.required}
+                            disabled={this.state.disabled}
+                            invalid={this.state.invalid}
+                            tabindex={0}
+                            onChange={(value) => {}} />
+
+                        // Boxed with default label
+                        <Input label='Input label'
+                            value={''}
+                            boxedStyle={true}
+                            size='large'
+                            maxLength={25}
+                            placeholder='Placeholder'
+                            type='text'
+                            error='This is error message'
+                            required={this.state.required}
+                            disabled={this.state.disabled}
+                            invalid={this.state.invalid}
+                            tabindex={0}
+                            onChange={(value) => {}} />
+                        
+                        // Boxed with boxed label
+                        <Input label='Input label'
+                            value={''}
+                            boxedStyle={true}
+                            boxedLable={true}
+                            size='large'
+                            maxLength={25}
+                            placeholder='Placeholder'
+                            type='text'
+                            error='This is error message'
+                            required={this.state.required}
+                            disabled={this.state.disabled}
+                            invalid={this.state.invalid}
+                            tabindex={0}
+                            onChange={(value) => {}} />
+                        
+                        <Input label='Input label'
+                            value={''}
+                            boxedStyle={true}
+                            boxedLable={true}
+                            size='large'
+                            placeholder='Hide my label'
+                            labelHidden={true}
+                            type='text'
+                            error='This is error message'
+                            required={this.state.required}
+                            disabled={this.state.disabled}
+                            invalid={this.state.invalid}
+                            tabindex={0}
+                            onChange={(value) => {}} />
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
@@ -221,6 +367,11 @@ export default class InputsDoc extends React.Component<{}, IState> {
                     <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled'/>
                     <Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid'/>
                     <Prop name='tabindex' isRequired={false} type='number' default='/' description='Indicates an element can be focused on, and determines how that focus is handled.'/>
+                    <Prop name='placeholder' isRequired={false} type='string' default='/' description='Defines the text for the placeholder pseudo-element.'/>
+                    <Prop name='fullWidth' isRequired={false} type='boolean' default='false' description='Forces the input to take 100% of the container width.'/>
+                    <Prop name='boxedStyle' isRequired={false} type='boolean' default='false' description='Applies a boxed style to the input. This style should be used only in the authoring enviroment and similar.'/>
+                    <Prop name='boxedLable' isRequired={false} type='boolean' default='false' description='Applies a boxed style to the input label. This label style should be used only in combination with the boxedStyle input inside the authoring enviroment.'/>
+                    <Prop name='size' isRequired={false} type='medium | large | x-large' default='medium' description='Specifies the size of the input. Defaults to medium and should be changed only in special cases (e.g. titles, headlines etc.).'/>
                 </PropsList>
             </section>
         )

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

@@ -73,7 +73,6 @@ export class MultiselectDocs extends React.Component<{}, IState> {
                                     tabindex={1}
                                     label={'This is Label'}
                                     info={'This is info'}
-                                    error={'This is error'}
                                 />
                             </div>
                         </div>
@@ -88,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>
 

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>