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

package/examples/pages/react/Inputs.tsx

@@ -1,15 +1,16 @@
 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;
     required: boolean;
     disabled: boolean;
     invalid: boolean;
-    value: number;
+    value: any;
+    value2: any;
 }
 
 export default class InputsDoc extends React.Component<{}, IState> {
@@ -20,7 +21,8 @@ export default class InputsDoc extends React.Component<{}, IState> {
             required: true,
             disabled: false,
             invalid: false,
-            value: null
+            value: null,
+            value2: '',
         }
     }
     
@@ -44,12 +46,29 @@ 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'
-                                    value={this.state.value}
+                                    value={''}
                                     maxLength={30}
-                                    type='number'
+                                    type='text'
                                     error='This is error message'
                                     info='This is some hint message'
                                     inlineLabel={this.state.inlineLabel}
@@ -57,8 +76,145 @@ export default class InputsDoc extends React.Component<{}, IState> {
                                     disabled={this.state.disabled}
                                     invalid={this.state.invalid}
                                     tabindex={0}
+                                    onChange={(value) => this.setState({value2: value})} />
+                            </div>
+                            <div className='form__row'>
+                                <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) => this.setState({value: value})} />
                             </div>
+                            <p className="docs-page__paragraph">// Hidden label</p>
+                            <div className='form__row'>
+                                <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) => 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'
+                                    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) => this.setState({value2: value})} />
+                            </div>
+                            <div className='form__row'>
+                                <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) => this.setState({value2: value})} />
+                            </div>
+                            <div className='form__row'>
+                                <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) => this.setState({value2: value})} />
+                            </div>
+                            <p className="docs-page__paragraph">// Boxed with default label</p>
+                            <div className='form__row'>
+                                <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) => this.setState({value2: value})} />
+                            </div>
+                            <p className="docs-page__paragraph">// Boxed with boxed label</p>
+                            <div className='form__row'>
+                                <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) => this.setState({value2: value})} />
+                            </div>
+                            <div className='form__row'>
+                                <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) => this.setState({value2: value})} />
+                            </div>
+                            </div>
                         </div>
 
                     </Markup.ReactMarkupPreview>
@@ -73,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>
 
@@ -89,8 +367,13 @@ 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/Modal.tsx

@@ -187,6 +187,7 @@ export default class ModalDoc extends React.Component<{}, IState> {
                                visible={this.state.modalFull} 
                                theme='dark'
                                maximized={true}
+                               className='testClass'
                                onHide={() => {this.setState({modalFull: false})}}>
                             <p className="sd-margin-b--3">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes,
                             nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.

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>