superdesk-ui-framework 3.0.1-beta.1 → 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) {
@@ -14,11 +14,16 @@ class DatePickerExample extends React.PureComponent<{}, {date: Date}> {
     render() {
         return (
             <DatePicker
-                value={this.state.date}
-                dateFormat="YYYY-MM-DD"
-                onChange={(date) => {
-                    this.setState({date});
-                }}
+            value={this.state.date}
+            dateFormat="YYYY-MM-DD"
+            onChange={(date) => {
+                this.setState({date});
+            }}
+            required
+            tabindex={1}
+            label={'This is Label'}
+            info={'This is info'}
+            error={'This is error'}
             />
         );
     }
@@ -43,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'}
                                 />
                             );
                         }
@@ -53,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/DropZone.tsx

@@ -29,19 +29,27 @@ export default class DropZoneDoc extends React.Component<IProps> {
                     <Markup.ReactMarkupPreview>
                         <p className="docs-page__paragraph">// Basic</p>
                         <div className='docs-page__content-row'>
-                            <DropZone actionText='Attach file' text="Drag one or more files here to upload them, or just click on the field.">
-                                 
+                            <DropZone text="Drag one or more files here to upload them, or just click on the field.">               
                             </DropZone>
                         </div>
 
-                        <p className="docs-page__paragraph">// Usage examples</p>
-
-
-
+                        <p className="docs-page__paragraph">// With heading</p>
                         <div className='docs-page__content-row'>
+                            <DropZone heading="Nothing here yet" text="Drag one or more files here to upload them, or just click on the field.">               
+                            </DropZone>
+                        </div>
 
+                        <p className="docs-page__paragraph">// With icon</p>
+                        <div className='docs-page__content-row'>
+                            <DropZone icon={true} text="Drag one or more files here to upload them, or just click on the field.">               
+                            </DropZone>
                         </div>
 
+                        <p className="docs-page__paragraph">// With heading & icon</p>
+                        <div className='docs-page__content-row'>
+                            <DropZone icon={true} heading="Nothing here yet" text="Drag one or more files here to upload them, or just click on the field.">               
+                            </DropZone>
+                        </div>
                         
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`

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/IconButtons.tsx

@@ -46,9 +46,9 @@ export default class IconButtonDoc extends React.Component {
                         <p className="docs-page__paragraph--small">The 'outlineWhite' syle forces a white icon and outline. It can be used on dark overlays for example.</p>
                         <div style={{background: 'hsla(214, 13%, 12%, 1)'}} className="sd-container sd-container--flex sd-container--gap-large sd-radius--medium sd-shadow--z2 sd-padding--3">
                             <ButtonGroup align='center' spaces='loose'>
-                                <IconButton style='outlineWhite' size='x-large' icon='pencil' ariaValue='Add' onClick={()=> false} />
-                                <IconButton style='outlineWhite' disabled={true} size='x-large' icon='switches' ariaValue='Add' onClick={()=> false} />
-                                <IconButton style='outlineWhite' size='x-large' icon='crop' ariaValue='Close' onClick={()=> false} />
+                                <IconButton style='outlineWhite' size='x-large' icon='pencil' ariaValue='Edit metadata' onClick={()=> false} />
+                                <IconButton style='outlineWhite' disabled={true} size='x-large' icon='switches' ariaValue='Edit image' onClick={()=> false} />
+                                <IconButton style='outlineWhite' size='x-large' icon='crop' ariaValue='Edit crops' onClick={()=> false} />
                             </ButtonGroup>
                         </div>
 
@@ -74,9 +74,9 @@ export default class IconButtonDoc extends React.Component {
 
                         // Xtra large, outlineWhite style
                         <ButtonGroup align='center' spaces='loose'>
-                            <IconButton style='outlineWhite' size='x-large' icon='pencil' ariaValue='Add' onClick={()=> false} />
-                            <IconButton style='outlineWhite' disabled={true} size='x-large' icon='switches' ariaValue='Add' onClick={()=> false} />
-                            <IconButton style='outlineWhite' size='x-large' icon='crop' ariaValue='Close' onClick={()=> false} />
+                            <IconButton style='outlineWhite' size='x-large' icon='pencil' ariaValue='Edit metadata' onClick={()=> false} />
+                            <IconButton style='outlineWhite' disabled={true} size='x-large' icon='switches' ariaValue='Edit image' onClick={()=> false} />
+                            <IconButton style='outlineWhite' size='x-large' icon='crop' ariaValue='Edit crops' onClick={()=> false} />
                         </ButtonGroup>
                     `}
                     </Markup.ReactMarkupCode>

package/examples/pages/react/IconLabels.tsx

@@ -27,12 +27,34 @@ export default class IconLabelDoc extends React.Component {
                             <IconLabel text='Label sd-green' icon='video' type='sd-green' />
 
                             <p className="docs-page__paragraph">// Translucent</p>
-                            <IconLabel style='translucent' text='Label success' type='success' icon='time' />
-                            <IconLabel style='translucent' text='Label warning' type='warning' icon='time' />
+                            <IconLabel innerLabel='Start:' style='translucent' text='00:45' type='success' icon='time' />
+                            <IconLabel innerLabel='end:' style='translucent' text='00:30' type='warning' icon='time' />
                             <IconLabel style='translucent' text='Label alert' type='alert' icon='time' />
                             <IconLabel style='translucent' text='Label highlight' type='highlight' icon='calendar' />
                             <IconLabel style='translucent' text='Label sd-green' type='sd-green' icon='calendar' />
                             <IconLabel style='translucent' text='Default label' icon='bell' />
+                            <br />
+                            <IconLabel innerLabel='Start:' style='translucent' text='00:45' type='success'/>
+                            <IconLabel innerLabel='end:' style='translucent' text='00:30' type='warning'/>
+                            <IconLabel style='translucent' text='Label alert' type='alert' />
+
+                            <p className="docs-page__paragraph">// Translucent & Large</p>
+                            <IconLabel innerLabel='Start:' size='large' style='translucent' text='00:45' type='success' icon='time' />
+                            <IconLabel innerLabel='Start:' size='large' style='translucent' text='00:55' type='warning' icon='time' />
+                            <IconLabel innerLabel='Start:' size='large' style='translucent' text='00:15' type='alert' icon='time' />
+                            <br />
+                            <IconLabel innerLabel='Start:' size='large' style='translucent' text='18:30' type='success' />
+                            <IconLabel innerLabel='End:' size='large' style='translucent' text='20:30' type='highlight' />
+                            <IconLabel innerLabel='Duration:' size='large' style='translucent' text='00:30' type='primary' />
+
+                            <p className="docs-page__paragraph">// Translucent & Small</p>
+                            <IconLabel innerLabel='Start:' size='small' style='translucent' text='00:45' type='success' icon='time' />
+                            <IconLabel innerLabel='Start:' size='small' style='translucent' text='00:55' type='warning' icon='time' />
+                            <IconLabel innerLabel='Start:' size='small' style='translucent' text='00:15' type='alert' icon='time' />
+                            <br />
+                            <IconLabel innerLabel='Start:' size='small' style='translucent' text='18:30' type='success' />
+                            <IconLabel innerLabel='End:' size='small' style='translucent' text='20:30' type='highlight' />
+                            <IconLabel innerLabel='Duration:' size='small' style='translucent' text='00:30' type='primary' />
                         </div>
 
                     </Markup.ReactMarkupPreview>

package/examples/pages/react/Index.tsx

@@ -49,17 +49,22 @@ import SelectGridDocs from './SelectGrid';
 import IconPickerDocs from "./IconPicker";
 import SimpleListDoc from "./SimpleList";
 import BoxedListDoc from "./BoxedList";
+import TableListDoc from "./TableList";
+import ContentListDoc from "./ContentList";
 import HeadingDoc from "./Heading";
 import TextDoc from "./Text";
 import ContainerDoc from './Container';
 import DropZoneDoc from './DropZone';
+import CreateButtonDoc from './CreateButton';
 
 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';
 
 const pages = {
     basicComponents: {
@@ -189,6 +194,12 @@ const pages = {
             'boxed-list': {
                 name: 'Boxed list'
             },
+            'table-list': {
+                name: 'Table list'
+            },
+            'content-list': {
+                name: 'Content list'
+            },
         }
     },
     formComponents: {
@@ -212,6 +223,9 @@ const pages = {
             'select-with-template': {
                 name: 'Select with template',
             },
+            'with-size-observer': {
+                name: 'With size observer',
+            },
             'multiselect': {
                 name: 'MultiSelect',
             },
@@ -227,6 +241,9 @@ const pages = {
             'icon-picker': {
                 name: 'Icon Picker',
             },
+            'duration-input': {
+                name: 'Duration Input',
+            },
             'switch': {
                 name: 'Switch'
             },
@@ -239,6 +256,9 @@ const pages = {
             'dropzone': {
                 name: 'DropZone'
             },
+            'create-button': {
+                name: 'CreateButton'
+            },
         }
     },
     generalComponents: {
@@ -318,8 +338,10 @@ class ReactDoc extends React.Component<IProps, IState> {
                         <Route path="/react/autocomplete" component={AutocompleteDoc} />
                         <Route path="/react/select" component={SelectsDoc} />
                         <Route path="/react/select-with-template" component={SelectWithTemplateDocs} />
+                        <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} />
@@ -350,10 +372,13 @@ class ReactDoc extends React.Component<IProps, IState> {
                         <Route path="/react/icon-picker" component={IconPickerDocs} />
                         <Route path="/react/simple-list" component={SimpleListDoc} />
                         <Route path="/react/boxed-list" component={BoxedListDoc} />
+                        <Route path="/react/table-list" component={TableListDoc} />
+                        <Route path="/react/content-list" component={ContentListDoc} />
                         <Route path="/react/heading" component={HeadingDoc} />
                         <Route path="/react/text" component={TextDoc} />
                         <Route path="/react/container" component={ContainerDoc} />
                         <Route path="/react/dropzone" component={DropZoneDoc} />
+                        <Route path="/react/create-button" component={CreateButtonDoc} />
                         <Route path="/" component={ReactDefault} />
                     </Switch>
                 </main>