superdesk-ui-framework 4.0.52 → 4.0.54

package/examples/pages/components/TagInputDocs.tsx

@@ -1,130 +0,0 @@
-import * as React from 'react';
-import {Prop, PropsList} from '../../../app-typescript';
-import {TagInput} from '../../../app-typescript/components/TagInput';
-import * as Markup from '../../js/react';
-
-export default class TagInputDocs extends React.Component<{}, {value: Array<string>}> {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            value: ['Item 1', 'item 2'],
-        };
-    }
-
-    render() {
-        return (
-            <section className="docs-page__container">
-                <h2 className="docs-page__h2">Tag Input</h2>
-                <Markup.ReactMarkupCodePreview>
-                    {`
-                    <TagInput
-                        value={this.state.value}
-                        placeholder="Type Here"
-                        onChange={(value) => false}
-                    />
-                `}
-                </Markup.ReactMarkupCodePreview>
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                        <div className="docs-page__content-row">
-                            <TagInput
-                                value={this.state.value}
-                                placeholder="Type Here"
-                                label="Tag-input Label"
-                                info="Info Message"
-                                onChange={(value) => {
-                                    this.setState({
-                                        value: value,
-                                    });
-                                }}
-                            />
-                        </div>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>
-                        {`
-                        <TagInput
-                            value={this.state.value}
-                            placeholder="Type Here"
-                            label='Tag-input Label'
-                            info='Info Message'
-                            onChange={(value) => {
-                                this.setState({
-                                    value: value,
-                                });
-                            }}
-                        />
-                    `}
-                    </Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-                <h3 className="docs-page__h3">Props</h3>
-                <PropsList>
-                    <Prop
-                        name="value"
-                        isRequired={false}
-                        type="Array<T>"
-                        default="/"
-                        description="Value of the component."
-                    />
-                    <Prop
-                        name="placeholder"
-                        isRequired={false}
-                        type="string"
-                        default="/"
-                        description="Input placeholder."
-                    />
-                    <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/Tags.tsx

@@ -1,154 +0,0 @@
-import * as React from 'react';
-import * as Markup from '../../js/react';
-import {clone} from 'lodash';
-import {Tag, Prop, PropsList} from '../../../app-typescript';
-
-interface ITag {
-    tags: Array<any>;
-    tags2: Array<any>;
-}
-export default class TagDoc extends React.Component<{}, ITag> {
-    constructor(props) {
-        super(props);
-        this.state = {
-            tags: [
-                {text: 'This is a tag'},
-                {text: 'This is another tag', shade: 'darker'},
-                {text: 'Inverse tag', shade: 'inverse'},
-                {text: 'Lorem ipsum', shade: 'highlight1'},
-                {text: 'Dolor amet', shade: 'highlight2', shape: 'square'},
-                {text: 'Read only tag', readOnly: true},
-                {text: 'Draggable tag', draggable: true},
-            ],
-            tags2: [
-                {text: 'Tag with label', label: 'Label'},
-                {text: 'I am', draggable: true, label: 'Draggable'},
-            ],
-        };
-        this.handleClick = this.handleClick.bind(this);
-        this.handleClick2 = this.handleClick2.bind(this);
-    }
-
-    handleClick(i: number) {
-        let newTags = clone(this.state.tags);
-        newTags.splice(i, 1);
-        this.setState({
-            tags: newTags,
-        });
-    }
-
-    handleClick2(i: number) {
-        let newTags2 = clone(this.state.tags2);
-        newTags2.splice(i, 1);
-        this.setState({
-            tags2: newTags2,
-        });
-    }
-    render() {
-        return (
-            <section className="docs-page__container">
-                <h2 className="docs-page__h2">Tag</h2>
-                <Markup.ReactMarkupCodePreview>
-                    {`
-               <Tag text='This is a tag' onClick={()=>false}/>
-            `}
-                </Markup.ReactMarkupCodePreview>
-
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                        <div className="docs-page__content-row d-flex gap-1">
-                            {this.state.tags.map((tag, index) => {
-                                return (
-                                    <React.Fragment key={index}>
-                                        <Tag
-                                            keyValue={index}
-                                            text={tag.text}
-                                            shade={tag.shade}
-                                            shape={tag.shape}
-                                            label={tag.label}
-                                            readOnly={tag.readOnly}
-                                            draggable={tag.draggable}
-                                            onClick={() => this.handleClick(index)}
-                                        />
-                                    </React.Fragment>
-                                );
-                            })}
-                        </div>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>
-                        {`
-                    <Tag text='This is a tag' onClick={()=>false}/>
-                    <Tag text='This is a another tag' shade='darker' onClick={()=>false}/>
-                    <Tag text='Inverse tag' shade='inverse' onClick={()=>false}/>
-                    <Tag text='Lorem ipsum' shade='highlight1' onClick={()=>false}/>
-                    <Tag text='Dolor amet' shade='highlight2' shape='square' onClick={()=>false}/>
-                    <Tag text='Read only tag' readOnly={true} onClick={()=>false}/>
-                    
-                `}
-                    </Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                        <div className="docs-page__content-row d-flex gap-1">
-                            {this.state.tags2.map((tag, index) => {
-                                return (
-                                    <React.Fragment key={index}>
-                                        <Tag
-                                            keyValue={index}
-                                            text={tag.text}
-                                            label={tag.label}
-                                            draggable={tag.draggable}
-                                            onClick={() => this.handleClick2(index)}
-                                        />
-                                    </React.Fragment>
-                                );
-                            })}
-                        </div>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>
-                        {`
-                    <Tag text='Tag with label'
-                        label='Label'
-                        onClick={() => false} />
-                `}
-                    </Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-
-                <h3 className="docs-page__h3">Props</h3>
-                <PropsList>
-                    <Prop name="text" isRequired={true} type="string" default="/" description="Tag text value." />
-                    <Prop
-                        name="shade"
-                        isRequired={false}
-                        type="light | darker | highlight1 | highlight2 | inverse"
-                        default="light"
-                        description="Shade colour of the tag."
-                    />
-                    <Prop
-                        name="shape"
-                        isRequired={false}
-                        type="round | square"
-                        default="round"
-                        description="Shape of tag. Round (default) or square."
-                    />
-                    <Prop
-                        name="readOnly"
-                        isRequired={false}
-                        type="boolean"
-                        default="false"
-                        description="Removes the option to delete the tag if set to true."
-                    />
-                    <Prop
-                        name="keyValue"
-                        isRequired={false}
-                        type="number"
-                        default="/"
-                        description="Value of the tag key."
-                    />
-                    <Prop name="label" isRequired={false} type="string" default="/" description="Text of label." />
-                </PropsList>
-            </section>
-        );
-    }
-}

package/examples/pages/components/Text.tsx

@@ -1,184 +0,0 @@
-import * as React from 'react';
-import * as Markup from '../../js/react';
-import {PropsList, Prop, Text} from '../../../app-typescript';
-
-interface IProps {
-    children?: React.ReactNode;
-}
-
-export default class TextDoc extends React.Component<IProps> {
-    render() {
-        return (
-            <section className="docs-page__container">
-                <h2 className="docs-page__h2">Text</h2>
-
-                <Markup.ReactMarkupCodePreview>
-                    {`
-                    <Text>Cum sociis natoque penatibus et magnis dis parturient...</Text>
-                `}
-                </Markup.ReactMarkupCodePreview>
-
-                <p className="docs-page__paragraph">Text component.</p>
-
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                        <p className="docs-page__paragraph">// Sizes and alignments</p>
-                        <div className="docs-page__content-row sd-margin-b--5">
-                            <Text size="x-small" style="italic">
-                                Extra small size (x-small), default alignment (start), italic. Fusce dapibus, tellus ac
-                                cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
-                                Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum.
-                                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                            </Text>
-                        </div>
-                        <div className="docs-page__content-row sd-margin-b--5">
-                            <Text align="end">
-                                Default size (small), align to end. Praesent commodo cursus magna, vel scelerisque nisl
-                                consectetur et. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel
-                                augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac,
-                                vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
-                                Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent
-                                commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a
-                                pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-                            </Text>
-                        </div>
-                        <div className="docs-page__content-row sd-margin-b--5">
-                            <Text size="medium" align="center">
-                                Medium size, center aligned. Praesent commodo cursus magna, vel scelerisque nisl
-                                consectetur et. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel
-                                augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac,
-                                vestibulum at eros.
-                            </Text>
-                        </div>
-                        <div className="docs-page__content-row sd-margin-b--5">
-                            <Text size="large" align="justify">
-                                Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur
-                                et. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet
-                                rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at
-                                eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
-                                sem lacinia quam venenatis vestibulum.
-                            </Text>
-                        </div>
-
-                        <p className="docs-page__paragraph">// Variations</p>
-                        <div className="docs-page__content-row sd-margin-b--5">
-                            <Text weight="light" size="medium">
-                                Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur
-                                et. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet
-                                rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at
-                                eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
-                                sem lacinia quam venenatis vestibulum.
-                            </Text>
-                        </div>
-                        <div className="docs-page__content-row sd-margin-b--5">
-                            <Text fontStyle="serif" weight="strong" size="medium" color="light" align="center">
-                                Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur
-                                et. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet
-                                rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at
-                                eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
-                                sem lacinia quam venenatis vestibulum.
-                            </Text>
-                        </div>
-                        <div className="docs-page__content-row sd-margin-b--5">
-                            <Text fontStyle="serif" weight="light" size="small" align="start">
-                                Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur
-                                et. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet
-                                rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at
-                                eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
-                                sem lacinia quam venenatis vestibulum.
-                            </Text>
-                        </div>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>
-                        {`
-                        // Sizes and alignments
-
-                        <Text size='x-small' style='italic'>
-                            Extra small size (x-small), default alignment (start), italic. Fusce dapibus, tellus...
-                        </Text>
-
-                        <Text align='end'>
-                            Default size (small), align to end. Praesent commodo cursus magna...
-                        </Text>
-
-                        <Text size='medium' align='center'>
-                            Medium size, center aligned. Praesent commodo cursus magna, vel scelerisque...
-                        </Text>
-
-                        <Text size='large' align='justify'>
-                            Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl...
-                        </Text>
-
-                        // Variations
-
-                        <Text weight='light' size='medium'>
-                            Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
-                        </Text>
-
-                        <Text fontStyle='serif' weight='medium' size='medium' color='light' align='center'>
-                            Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et... 
-                        </Text>
-
-                        <Text className='' fontStyle='serif' weight='medium' size='medium' color='light' align='center'>
-                            Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et... 
-                        </Text>
-                    `}
-                    </Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-
-                <h3 className="docs-page__h3">Props</h3>
-                <PropsList>
-                    <Prop
-                        name="weight"
-                        isRequired={false}
-                        type="light | normal | medium | strong"
-                        default="normal"
-                        description="Change the default font weight."
-                    />
-                    <Prop
-                        name="size"
-                        isRequired={true}
-                        type="x-small | small | medium | large"
-                        default="small"
-                        description="Choose between four predefined font sizes."
-                    />
-                    <Prop
-                        name="style"
-                        isRequired={false}
-                        type="normal | italic"
-                        default="normal"
-                        description="Change the default text style."
-                    />
-                    <Prop
-                        name="align"
-                        isRequired={false}
-                        type="start | end | center | justify"
-                        default="start"
-                        description="Text-align"
-                    />
-                    <Prop
-                        name="fontStyle"
-                        isRequired={false}
-                        type="sans | serif"
-                        default="sans"
-                        description="Choose between the default – sans (Roboto) – and serif (Merriweather) font styles. "
-                    />
-                    <Prop
-                        name="color"
-                        isRequired={false}
-                        type="normal | light | lighter"
-                        default="normal"
-                        description="Choose a different text colour. Additional two lighter shades are available."
-                    />
-                    <Prop
-                        name="className"
-                        isRequired={false}
-                        type="string"
-                        default="/"
-                        description="Add helper classes or custom CSS styles"
-                    />
-                </PropsList>
-            </section>
-        );
-    }
-}

package/examples/pages/components/TimePicker.tsx

@@ -1,179 +0,0 @@
-import * as React from 'react';
-import * as Markup from '../../js/react';
-import {PropsList, Prop} from '../../../app-typescript';
-import {TimePicker} from '../../../app-typescript/components/TimePicker';
-import {TimePickerV2} from '../../../app-typescript/components/TimePickerV2';
-
-let minutes = Array.from(Array(60).keys());
-let changedMinutes = minutes.filter((num) => num % 15 !== 0);
-
-class TimePickerExample extends React.PureComponent<{}, {time: string | null}> {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            time: null,
-        };
-    }
-
-    render() {
-        return (
-            <TimePicker
-                value={this.state.time}
-                onChange={(time) => {
-                    this.setState({time});
-                }}
-                allowSeconds
-                label="This is Label"
-                info="This is info"
-            />
-        );
-    }
-}
-
-export default class TimePickerDoc extends React.Component<{}, {time: string}> {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            time: '14:00',
-        };
-    }
-
-    render() {
-        return (
-            <section className="docs-page__container">
-                <h2 className="docs-page__h2">Time picker</h2>
-                <Markup.ReactMarkupCodePreview>{`
-                    <TimePicker
-                        value={this.state.time}
-                        onChange={(time) => {
-                            this.setState({time});
-                        }}
-                    />
-                `}</Markup.ReactMarkupCodePreview>
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                        <div className="docs-page__content-row">
-                            <TimePickerExample />
-                        </div>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
-                        <TimePicker
-                            value={this.state.time}
-                            onChange={(time) => {
-                                this.setState({time});
-                            }}
-                            allowSeconds
-                            label='This is Label'
-                            info='This is info'
-                        />
-                    `}</Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-
-                <p className="docs-page__paragraph">TimePickerV2:</p>
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                        <div className="docs-page__content-row">
-                            <TimePickerV2
-                                value={this.state.time}
-                                label="This is Label"
-                                disabledOptions={{
-                                    minutes: changedMinutes,
-                                }}
-                                onChange={(time) => {
-                                    this.setState({time});
-                                }}
-                            />
-                        </div>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
-                        <TimePickerV2
-                            value={this.state.time}
-                            label='This is Label'
-                            disableOptions={{
-                                minutes: changedMinutes,
-                            }}
-                            onChange={(time) => {
-                                this.setState({time})
-                            }}
-                        />
-                    `}</Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-
-                <h3 className="docs-page__h3">Props</h3>
-                <PropsList>
-                    <Prop name="value" isRequired={true} type="string" default="/" description="Item value." />
-                    <Prop
-                        name="allowSeconds"
-                        isRequired={true}
-                        type="string"
-                        default="/"
-                        description="Allow seconds."
-                    />
-                    <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>
-
-                <h3 className="docs-page__h3">Events</h3>
-                <PropsList>
-                    <Prop
-                        name="onChange"
-                        isRequired={true}
-                        type="function"
-                        default="/"
-                        description="Returns value of time input."
-                    />
-                </PropsList>
-            </section>
-        );
-    }
-}