superdesk-ui-framework 4.0.46 → 4.0.48

package/examples/pages/components/DurationInput.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import * as Markup from '../../js/react';
-import { CheckGroup, Checkbox, PropsList, Prop } from '../../../app-typescript';
-import { DurationInput } from '../../../app-typescript/components/DurationInput';
+import {CheckGroup, Checkbox, PropsList, Prop} from '../../../app-typescript';
+import {DurationInput} from '../../../app-typescript/components/DurationInput';
 
 interface IState {
     inlineLabel: boolean;
     required: boolean;
     disabled: boolean;
-    value: any
+    value: any;
 }
 
 export default class DurationInputDoc extends React.Component<{}, IState> {
@@ -18,14 +18,15 @@ export default class DurationInputDoc extends React.Component<{}, IState> {
             required: false,
             disabled: false,
             value: 3661,
-        }
+        };
     }
-    
+
     render() {
         return (
-            <section className='docs-page__container'>
-                <h2 className='docs-page__h2'>Duration Input</h2>
-                <Markup.ReactMarkupCodePreview>{`
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">Duration Input</h2>
+                <Markup.ReactMarkupCodePreview>
+                    {`
                     <DurationInput
                         seconds={this.state.value}
                         onChange={(e) => {
@@ -34,33 +35,50 @@ export default class DurationInputDoc extends React.Component<{}, IState> {
                     />
                 `}
                 </Markup.ReactMarkupCodePreview>
-                <p className='docs-page__paragraph'></p>
+                <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'>
+                        <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.inlineLabel} label={{text:'Label positioned inline'}} onChange={(value) => {this.setState({inlineLabel: value})}} />
+                                    <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.inlineLabel}
+                                        label={{text: 'Label positioned inline'}}
+                                        onChange={(value) => {
+                                            this.setState({inlineLabel: value});
+                                        }}
+                                    />
                                 </CheckGroup>
                             </div>
 
-                            <div className='form__row'>
+                            <div className="form__row">
                                 <DurationInput
                                     seconds={this.state.value}
-                                    label='Label'
-                                    info='info message'
+                                    label="Label"
+                                    info="info message"
                                     disabled={this.state.disabled}
                                     required={this.state.required}
                                     inlineLabel={this.state.inlineLabel}
                                     onChange={(value) => {
-                                        this.setState({value})
+                                        this.setState({value});
                                     }}
                                 />
                             </div>
                         </div>
-
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         <DurationInput
@@ -77,21 +95,63 @@ export default class DurationInputDoc extends React.Component<{}, IState> {
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
-                <h3 className='docs-page__h3'>Props</h3>
+                <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='onChange' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
-                    <Prop name='label' isRequired={false} type='string' default='/' description='Label of component.' />
-                    <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline.' />
-                    <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='info' isRequired={false} type='string' default='/' description='Info message of component.' />
-                    <Prop name='error' isRequired={false} type='string' default='/' description='Error message of component.' />
-                    <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="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="onChange"
+                        isRequired={true}
+                        type="Function"
+                        default="/"
+                        description="Callback to invoke when value changes."
+                    />
+                    <Prop name="label" isRequired={false} type="string" default="/" description="Label of component." />
+                    <Prop
+                        name="inlineLabel"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="Position labels as inline."
+                    />
+                    <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="info"
+                        isRequired={false}
+                        type="string"
+                        default="/"
+                        description="Info message of component."
+                    />
+                    <Prop
+                        name="error"
+                        isRequired={false}
+                        type="string"
+                        default="/"
+                        description="Error message of component."
+                    />
+                    <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."
+                    />
                 </PropsList>
             </section>
-        )
+        );
     }
 }

package/examples/pages/components/EmptyStates.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react';
 import * as Markup from '../../js/react';
-import { EmptyState, Button, Prop, PropsList } from '../../../app-typescript';
+import {EmptyState, Button, Prop, PropsList} from '../../../app-typescript';
 
 export default class EmptyStateDoc extends React.Component {
     render() {
         return (
-            <section className='docs-page__container'>
-                <h2 className='docs-page__h2'>Empty States</h2>
-                
-                <Markup.ReactMarkupCodePreview>{`
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">Empty States</h2>
+
+                <Markup.ReactMarkupCodePreview>
+                    {`
                     <EmptyState
                         title={gettext('This is an empty state example')}
                         description={gettext('Morbi leo risus, porta ac consectetur ac.')}
@@ -16,35 +17,40 @@ export default class EmptyStateDoc extends React.Component {
                 `}
                 </Markup.ReactMarkupCodePreview>
 
-                <p className="docs-page__paragraph">Text info and illustrations for empty content areas in Superdesk.</p>
+                <p className="docs-page__paragraph">
+                    Text info and illustrations for empty content areas in Superdesk.
+                </p>
 
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <div className="flex-grid flex-grid--boxed flex-grid--wrap-items flex-grid--small-3">
                             <div className="flex-grid__item content-state--empty" style={{height: 500}}>
-                                <Button text="Primary action"  type="primary" expand={true} onClick={()=> false} />
+                                <Button text="Primary action" type="primary" expand={true} onClick={() => false} />
                                 <EmptyState
                                     title={'This is an example title'}
                                     description={'Morbi leo risus, porta ac consectetur ac.'}
                                     size="small"
-                                    illustration="1"/>
-                                <Button text="Secondary action" style="hollow" expand={true} onClick={()=> false} />
+                                    illustration="1"
+                                />
+                                <Button text="Secondary action" style="hollow" expand={true} onClick={() => false} />
                             </div>
                             <div className="flex-grid__item content-state--empty" style={{height: 500}}>
                                 <EmptyState
                                     title={'Empty state title'}
                                     description={'Nulla vitae elit libero, a pharetra augue.'}
                                     size="small"
-                                    illustration="2"/>
+                                    illustration="2"
+                                />
                             </div>
                             <div className="flex-grid__item content-state--empty" style={{height: 500}}>
-                                <Button text="Primary action"  type="primary" expand={true} onClick={()=> false} />
+                                <Button text="Primary action" type="primary" expand={true} onClick={() => false} />
                                 <EmptyState
                                     title={'Empty state example'}
                                     description={'Nulla vitae elit libero, a pharetra augue.'}
                                     size="small"
-                                    illustration="3"/>
-                                <Button text="Secondary action" style="hollow" expand={true} onClick={()=> false} />
+                                    illustration="3"
+                                />
+                                <Button text="Secondary action" style="hollow" expand={true} onClick={() => false} />
                             </div>
                         </div>
                         <div className="flex-grid flex-grid--boxed flex-grid--wrap-items flex-grid--small-1">
@@ -53,32 +59,39 @@ export default class EmptyStateDoc extends React.Component {
                                     title={'Empty state title'}
                                     description={'Integer posuere erat a ante venenatis dapibus posuere velit aliquet.'}
                                     size="large"
-                                    illustration="1"/>
+                                    illustration="1"
+                                />
                             </div>
                             <div className="flex-grid__item">
                                 <EmptyState
                                     title={'Some title'}
                                     description={'Maecenas sed diam eget risus varius blandit sit amet non magna.'}
                                     size="large"
-                                    illustration="2"/>
+                                    illustration="2"
+                                />
                             </div>
                             <div className="flex-grid__item">
                                 <EmptyState
                                     title={'Empty state heading'}
                                     description={'Vestibulum id ligula porta felis euismod semper.'}
                                     size="large"
-                                    illustration="3"/>
+                                    illustration="3"
+                                />
                             </div>
                             <div className="flex-grid__item">
                                 <EmptyState
                                     title={'Dashboard heading'}
-                                    description={'Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.'}
+                                    description={
+                                        'Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.'
+                                    }
                                     size="large"
-                                    illustration="dashboard"/>
+                                    illustration="dashboard"
+                                />
                             </div>
                         </div>
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         // Small 
                         <EmptyState
                             title={'This is an example title'}
@@ -121,16 +134,38 @@ export default class EmptyStateDoc extends React.Component {
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
-
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='title' isRequired={true} type='string' default='false' description='Title of the Empty state info block.'/>
-                    <Prop name='description' isRequired={false} type='string' default='false' description='Additional information e.g. suggested actions etc.'/>
-                    <Prop name='size' isRequired={false} type='small | large' default='small' description='Specifies the size and type of the illustration. Small should be used for narrow areas, like side panels, while large is suited for wider content areas. '/>
-                    <Prop name='illustration' isRequired={false} type='string' default='1' description='In combination with the size prop this defines the illustration. Possible values: 1, 2, 3 and dashboard (with size large only).'/>
+                    <Prop
+                        name="title"
+                        isRequired={true}
+                        type="string"
+                        default="false"
+                        description="Title of the Empty state info block."
+                    />
+                    <Prop
+                        name="description"
+                        isRequired={false}
+                        type="string"
+                        default="false"
+                        description="Additional information e.g. suggested actions etc."
+                    />
+                    <Prop
+                        name="size"
+                        isRequired={false}
+                        type="small | large"
+                        default="small"
+                        description="Specifies the size and type of the illustration. Small should be used for narrow areas, like side panels, while large is suited for wider content areas. "
+                    />
+                    <Prop
+                        name="illustration"
+                        isRequired={false}
+                        type="string"
+                        default="1"
+                        description="In combination with the size prop this defines the illustration. Possible values: 1, 2, 3 and dashboard (with size large only)."
+                    />
                 </PropsList>
-
             </section>
-        )
+        );
     }
 }