superdesk-ui-framework 4.0.52 → 4.0.54

package/examples/pages/components/DurationInput.tsx

@@ -1,157 +0,0 @@
-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';
-
-interface IState {
-    inlineLabel: boolean;
-    required: boolean;
-    disabled: boolean;
-    value: any;
-}
-
-export default class DurationInputDoc extends React.Component<{}, IState> {
-    constructor(props) {
-        super(props);
-        this.state = {
-            inlineLabel: false,
-            required: false,
-            disabled: false,
-            value: 3661,
-        };
-    }
-
-    render() {
-        return (
-            <section className="docs-page__container">
-                <h2 className="docs-page__h2">Duration Input</h2>
-                <Markup.ReactMarkupCodePreview>
-                    {`
-                    <DurationInput
-                        seconds={this.state.value}
-                        onChange={(e) => {
-                            this.setState({value: 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.inlineLabel}
-                                        label={{text: 'Label positioned inline'}}
-                                        onChange={(value) => {
-                                            this.setState({inlineLabel: value});
-                                        }}
-                                    />
-                                </CheckGroup>
-                            </div>
-
-                            <div className="form__row">
-                                <DurationInput
-                                    seconds={this.state.value}
-                                    label="Label"
-                                    info="info message"
-                                    disabled={this.state.disabled}
-                                    required={this.state.required}
-                                    inlineLabel={this.state.inlineLabel}
-                                    onChange={(value) => {
-                                        this.setState({value});
-                                    }}
-                                />
-                            </div>
-                        </div>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
-                        <DurationInput
-                            seconds={this.state.value}
-                            label='Label'
-                            info='info message'
-                            disabled={this.state.disabled}
-                            required={this.state.required}
-                            inlineLabel={this.state.inlineLabel}
-                            onChange={(value) => {
-                                this.setState({value})
-                            }}
-                        />
-                    `}</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="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,171 +0,0 @@
-import * as React from 'react';
-import * as Markup from '../../js/react';
-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>
-                    {`
-                    <EmptyState
-                        title={gettext('This is an empty state example')}
-                        description={gettext('Morbi leo risus, porta ac consectetur ac.')}
-                    />
-                `}
-                </Markup.ReactMarkupCodePreview>
-
-                <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} />
-                                <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} />
-                            </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"
-                                />
-                            </div>
-                            <div className="flex-grid__item content-state--empty" style={{height: 500}}>
-                                <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} />
-                            </div>
-                        </div>
-                        <div className="flex-grid flex-grid--boxed flex-grid--wrap-items flex-grid--small-1">
-                            <div className="flex-grid__item">
-                                <EmptyState
-                                    title={'Empty state title'}
-                                    description={'Integer posuere erat a ante venenatis dapibus posuere velit aliquet.'}
-                                    size="large"
-                                    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"
-                                />
-                            </div>
-                            <div className="flex-grid__item">
-                                <EmptyState
-                                    title={'Empty state heading'}
-                                    description={'Vestibulum id ligula porta felis euismod semper.'}
-                                    size="large"
-                                    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.'
-                                    }
-                                    size="large"
-                                    illustration="dashboard"
-                                />
-                            </div>
-                        </div>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>
-                        {`
-                        // Small 
-                        <EmptyState
-                            title={'This is an example title'}
-                            description={'Morbi leo risus, porta ac consectetur ac.'}
-                            size="small"
-                            illustration="1"/>
-                        <EmptyState
-                            title={'Empty state title'}
-                            description={'Nulla vitae elit libero, a pharetra augue.'}
-                            size="small"
-                            illustration="2"/>
-                        <EmptyState
-                            title={'Empty state example'}
-                            description={'Nulla vitae elit libero, a pharetra augue.'}
-                            size="small"
-                            illustration="3"/>
-
-                        // Large
-                        <EmptyState
-                            title={'Empty state title'}
-                            description={'Integer posuere erat a ante venenatis dapibus posuere velit aliquet.'}
-                            size="large"
-                            illustration="1"/> 
-                        <EmptyState
-                            title={'Some title'}
-                            description={'Maecenas sed diam eget risus varius blandit sit amet non magna.'}
-                            size="large"
-                            illustration="2"/>
-                        <EmptyState
-                            title={'Empty state heading'}
-                            description={'Vestibulum id ligula porta felis euismod semper.'}
-                            size="large"
-                            illustration="3"/>
-                        <EmptyState
-                            title={'Dashboard heading'}
-                            description={'Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.'}
-                            size="large"
-                            illustration="dashboard"/>      
-                    `}
-                    </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)."
-                    />
-                </PropsList>
-            </section>
-        );
-    }
-}