superdesk-ui-framework 4.0.52 → 4.0.53

package/examples/pages/components/CreateButton.tsx

@@ -1,121 +0,0 @@
-import * as React from 'react';
-
-import * as Markup from '../../js/react';
-
-import {SubNav, NavButton, ButtonGroup, Tooltip, CreateButton, PropsList, Prop} from '../../../app-typescript';
-
-export default class CreateButtonDoc extends React.Component {
-    render() {
-        return (
-            <section className="docs-page__container">
-                <h2 className="docs-page__h2">Navigation button</h2>
-                <p></p>
-                <Markup.ReactMarkupCodePreview>
-                    {`
-                    <NavButton type='default' icon='home' onClick={()=> false} />
-                `}
-                </Markup.ReactMarkupCodePreview>
-
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                        <SubNav>
-                            <ButtonGroup align="start" spaces="no-space">
-                                <Tooltip text="Filters" flow="right">
-                                    <NavButton
-                                        icon="filter-large"
-                                        type="darker"
-                                        state="active"
-                                        text="Filter"
-                                        onClick={() => false}
-                                    />
-                                </Tooltip>
-                                <NavButton icon="search" text="Search" onClick={() => false} />
-                            </ButtonGroup>
-                            <ButtonGroup align="end" spaces="no-space">
-                                <NavButton icon="list-plus" text="Add to list" onClick={() => false} />
-                                <Tooltip text="More actions" flow="down">
-                                    <NavButton icon="dots-vertical" text="More actions" onClick={() => false} />
-                                </Tooltip>
-                                <CreateButton ariaValue="Create" onClick={() => false} />
-                            </ButtonGroup>
-                        </SubNav>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>
-                        {`
-                        <SubNav>
-                            <ButtonGroup align='start' spaces='no-space'>
-                                <Tooltip text='Filters' flow='right'>
-                                    <NavButton icon='filter-large' type='darker' state="active" text="Filter" onClick={() => false} />
-                                </Tooltip>
-                                <NavButton icon='search' text="Search" onClick={() => false} />
-                            </ButtonGroup>
-                            <ButtonGroup align='end' spaces='no-space'>
-                                <NavButton icon='list-plus' text="Add to list" onClick={() => false} />
-                                <Tooltip text='More actions' flow='down'>
-                                    <NavButton icon='dots-vertical' text="More actions" onClick={() => false} />
-                                </Tooltip>
-                                <Tooltip text='Send to / Publish' flow='left'>
-                                    <NavButton icon='expand-thin' text='Send to / Publish' type='highlight' onClick={() => false} />
-                                </Tooltip>
-                            </ButtonGroup>
-                        </SubNav>        
-                    `}
-                    </Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-
-                <h3 className="docs-page__h3">Props</h3>
-                <PropsList>
-                    <Prop
-                        name="icon"
-                        isRequired={false}
-                        type="string"
-                        default="/"
-                        description="Icon class name without the icon- part."
-                    />
-                    <Prop
-                        name="text"
-                        isRequired={false}
-                        type="string"
-                        default="/"
-                        description="Defines the value for aria-label, for screen-readers accessibility."
-                    />
-                    <Prop
-                        name="iconSize"
-                        isRequired={false}
-                        type="small | big"
-                        default="small"
-                        description="Specifies a small or big button"
-                    />
-                    <Prop
-                        name="type"
-                        isRequired={false}
-                        type="default | primary | success | warning | alert | highlight | sd-green"
-                        default="default"
-                        description="Default + semantic colour variations (e.g. primary, success etc.)."
-                    />
-                    <Prop
-                        name="state"
-                        isRequired={false}
-                        type="normal | active"
-                        default="normal"
-                        description="Defines the optional state of the button (e.g. active)"
-                    />
-                    <Prop
-                        name="theme"
-                        isRequired={false}
-                        type="light | dark"
-                        default="light"
-                        description="Styles nav button for diffrent background."
-                    />
-                    <Prop
-                        name="value"
-                        isRequired={false}
-                        type="button | submit | reset"
-                        default="button"
-                        description="Specifies a value of nav button"
-                    />
-                </PropsList>
-            </section>
-        );
-    }
-}

package/examples/pages/components/DatePicker.tsx

@@ -1,245 +0,0 @@
-import * as React from 'react';
-import * as Markup from '../../js/react';
-import {DatePicker, PropsList, Prop, DatePickerISO} from '../../../app-typescript';
-
-class DatePickerExample extends React.PureComponent<{}, {date: Date | null}> {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            date: new Date(),
-        };
-    }
-
-    render() {
-        return (
-            <DatePicker
-                value={this.state.date}
-                dateFormat="YYYY-MM-DD"
-                onChange={(date) => {
-                    this.setState({date});
-                }}
-                label="This is Label"
-                info="This is info"
-            />
-        );
-    }
-}
-
-interface IState {
-    today: string;
-    date: Date | null;
-}
-
-export default class DatePickerDoc extends React.Component<{}, IState> {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            today: '',
-            date: new Date(),
-        };
-    }
-
-    render() {
-        return (
-            <section className="docs-page__container">
-                <h2 className="docs-page__h2">Date picker</h2>
-                <Markup.ReactMarkupCodePreview>{`
-                    <DatePicker
-                        value={this.state.date}
-                        dateFormat="YYYY-MM-DD"
-                        onChange={(date) => {
-                            this.setState({date});
-                        }}
-                    />
-                `}</Markup.ReactMarkupCodePreview>
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                        <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({today: date});
-                                }}
-                                label="This is Label"
-                                info="This is info"
-                            />
-                        </div>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
-                        <DatePicker
-                            value={this.state.date}
-                            onChange={(date) => {
-                                this.setState({date});
-                            }}
-                            dateFormat="YYYY-MM-DD"
-                            shortcuts={[
-                                {label: 'tomorrow', days: 1},
-                                {label: 'yesterday', days: -1},
-                            ]}
-                            locale={{
-                                firstDayOfWeek: 1,
-                                dayNames: [
-                                    "domingo", "lunes", "martes", "miércoles",
-                                    "jueves", "viernes", "sábado",
-                                ],
-                                dayNamesShort: [
-                                    "dom", "lun", "mar", "mié",
-                                    "jue", "vie", "sáb",
-                                ],
-                                dayNamesMin: [
-                                    "D", "L", "M", "X",
-                                    "J", "V", "S",
-                                ],
-                                monthNames: [
-                                    "enero", "febrero", "marzo", "abril",
-                                    "mayo", "junio", "julio", "agosto",
-                                    "septiembre", "octubre", "noviembre",
-                                    "diciembre",
-                                ],
-                                monthNamesShort: [
-                                    "ene", "feb", "mar", "abr", "may",
-                                    "jun", "jul", "ago", "sep", "oct",
-                                    "nov", "dic",
-                                ],
-                            }}
-                        />
-                    `}</Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-                <p className="docs-page__paragraph">DatePicker with headerButtonBar:</p>
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                        <div className="docs-page__content-row">
-                            <DatePicker
-                                value={this.state.date}
-                                dateFormat="YYYY-MM-DD"
-                                onChange={(date) => {
-                                    this.setState({date});
-                                }}
-                                label="This is Label"
-                                info="This is info"
-                                headerButtonBar={[
-                                    {days: 0, label: 'today'},
-                                    {days: 1, label: 'tomorow'},
-                                    {days: 2, label: 'in 2 days'},
-                                ]}
-                            />
-                        </div>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
-                        <DatePicker
-                            value={this.state.date}
-                            dateFormat="YYYY-MM-DD"
-                            onChange={(date) => {
-                                this.setState({date});
-                            }}
-                            label='This is Label'
-                            info='This is info'
-                            headerButtonBar={[{days: 0, label: 'today'}, {days: 1, label: 'tomorow'}, {days: 2, label: 'in 2 days'}]}
-                        />
-                    `}</Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-
-                <h3 className="docs-page__h3">Props</h3>
-                <PropsList>
-                    <Prop
-                        name="value"
-                        isRequired={false}
-                        type="Date"
-                        default="/"
-                        description="Value of the component."
-                    />
-                    <Prop
-                        name="dateFormat"
-                        isRequired={true}
-                        type="string"
-                        default="/"
-                        description='Date format to use, i.e. "MM/DD/YYYY".'
-                    />
-                    <Prop
-                        name="locale"
-                        isRequired={false}
-                        type="string"
-                        default="/"
-                        description="see: https://primefaces.org/primereact/showcase/#/calendar."
-                    />
-                    <Prop
-                        name="headerButtonBar"
-                        isRequired={false}
-                        type="Array"
-                        default="/"
-                        description='Aditional button in header, ex. [{label: "today", days: 0}, {label: "tomorrow", days: 1}].'
-                    />
-                    <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 date input"
-                    />
-                </PropsList>
-            </section>
-        );
-    }
-}

package/examples/pages/components/DateTimePicker.tsx

@@ -1,141 +0,0 @@
-import * as React from 'react';
-import * as Markup from '../../js/react';
-import {PropsList, Prop, DateTimePicker} from '../../../app-typescript';
-
-class DateTimePickerExample extends React.PureComponent<{}, {dateTime: Date | null}> {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            dateTime: null,
-        };
-    }
-
-    render() {
-        return (
-            <DateTimePicker
-                label="Planning date"
-                labelHidden
-                inlineLabel
-                fullWidth
-                valueType="date"
-                value={this.state.dateTime}
-                dateFormat="YYYY-MM-DD"
-                fullWidth
-                onChange={(val) => {
-                    const parsedVal = val != null ? new Date(val) : null;
-
-                    this.setState({dateTime: parsedVal});
-                }}
-            />
-        );
-    }
-}
-
-interface IState {
-    today: string;
-    dateTime: Date | null;
-}
-
-export default class DateTimePickerDoc extends React.Component<{}, IState> {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            today: '',
-            dateTime: new Date(),
-        };
-    }
-
-    render() {
-        return (
-            <section className="docs-page__container">
-                <h2 className="docs-page__h2">Date picker</h2>
-                <Markup.ReactMarkupCodePreview>{`
-                    <DateTimePicker
-                        label="Planning date"
-                        value={this.state.dateTime}
-                        dateFormat="YYYY-MM-DD"
-                        fullWidth
-                        onChange={(val) => {
-                            const parsedVal = val != null ? new Date(val) : null;
-
-                            this.setState({dateTime: parsedVal});
-                        }}
-                    />
-                `}</Markup.ReactMarkupCodePreview>
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                        <div className="docs-page__content-row">
-                            <DateTimePickerExample />
-                        </div>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
-                        <DateTimePicker
-                            label="Planning date"
-                            value={this.state.dateTime}
-                            dateFormat="YYYY-MM-DD"
-                            fullWidth
-                            onChange={(val) => {
-                                const parsedVal = val != null ? new Date(val) : null;
-
-                                this.setState({dateTime: parsedVal});
-                            }}
-                        />
-                    `}</Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-
-                <h3 className="docs-page__h3">Props</h3>
-                <PropsList>
-                    <Prop
-                        name="value"
-                        isRequired={false}
-                        type="Date"
-                        default="null"
-                        description="Value of the component."
-                    />
-                    <Prop
-                        name="dateFormat"
-                        isRequired={true}
-                        type="string"
-                        default="/"
-                        description='Date format to use, i.e. "MM/DD/YYYY".'
-                    />
-                    <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="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 date input"
-                    />
-                </PropsList>
-            </section>
-        );
-    }
-}

package/examples/pages/components/DragHandleDocs.tsx

@@ -1,122 +0,0 @@
-import * as React from 'react';
-import {DragHandle, Prop, PropsList} from '../../../app-typescript';
-import * as Markup from '../../js/react';
-
-export default class DragHandleDocs extends React.Component {
-    render() {
-        return (
-            <section className="docs-page__container">
-                <h2 className="docs-page__h2">Drag handle</h2>
-                <Markup.ReactMarkupCodePreview>
-                    {`
-                    <DragHandle />
-                `}
-                </Markup.ReactMarkupCodePreview>
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                        <p className="docs-page__paragraph">// Default</p>
-                        <div className="docs-page__content-row">
-                            <DragHandle />
-                        </div>
-                        <p className="mt-2 docs-page__paragraph">// Some size examples</p>
-                        <p className="docs-page__paragraph--small">
-                            The number of dotted rows and dots in each row can be adjusted independently, offering a
-                            wide range of size options.
-                        </p>
-                        <div className="docs-page__content-row">
-                            <div className="d-flex items-start sd-gap--medium">
-                                <DragHandle dotsInRow="2" dotRows="5" />
-                                <DragHandle dotsInRow="2" dotRows="8" />
-                                <DragHandle dotsInRow="3" dotRows="6" />
-                                <DragHandle dotsInRow="3" dotRows="8" />
-                                <DragHandle dotsInRow="3" dotRows="10" />
-                                <DragHandle dotsInRow="5" dotRows="4" />
-                            </div>
-                        </div>
-                        <p className="docs-page__paragraph">// Blank</p>
-                        <p className="docs-page__paragraph--small">
-                            This option will remove all default styles from the components container, like padding and
-                            background color. To be used within list items, draggable labels, and similar contexts.
-                        </p>
-                        <div className="docs-page__content-row">
-                            <div className="d-flex items-start sd-gap--medium">
-                                <DragHandle blank={true} />
-                                <DragHandle dotsInRow="2" dotRows="10" blank={true} />
-                                <DragHandle dotsInRow="4" dotRows="10" blank={true} />
-                                <DragHandle dotsInRow="5" dotRows="4" blank={true} />
-                                <DragHandle dotsInRow="3" dotRows="4" blank={true} />
-                            </div>
-                        </div>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>
-                        {`
-                    // Default
-                    <DragHandle />
-
-                    // Some size examples
-                    // The number of dotted rows and dots in each row can be adjusted independently,
-                    offering a wide range of size options.   
-                    
-                    <DragHandle dotsInRow='2' dotRows='5' />
-                    <DragHandle dotsInRow='2' dotRows='8' />
-                    <DragHandle dotsInRow='3' dotRows='6' />
-                    <DragHandle dotsInRow='3' dotRows='8' />
-                    <DragHandle dotsInRow='3' dotRows='10' />
-                    <DragHandle dotsInRow='5' dotRows='4' />
-
-                    // Blank
-                    // This option will remove all default styles from the components container, like padding and background color.
-                    To be used within list items, draggable labels, and similar contexts.
-
-                    <DragHandle blank={true} />
-                    <DragHandle dotsInRow='2' dotRows='10' blank={true} />
-                    <DragHandle dotsInRow='4' dotRows='10' blank={true} />
-                    <DragHandle dotsInRow='5' dotRows='4' blank={true} />
-                    <DragHandle dotsInRow='3' dotRows='4' blank={true} />
-
-                    `}
-                    </Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-
-                <h3 className="docs-page__h3">Props</h3>
-                <PropsList>
-                    <Prop
-                        name="blank"
-                        isRequired={false}
-                        type="boolean"
-                        default="false"
-                        description="Set to true to remove all the default styling from the wrapper, leaving only the dots exposed. This should be applied if the drag handle is used in list items, draggable labels, or similar contexts."
-                    />
-                    <Prop
-                        name="dotRows"
-                        isRequired={false}
-                        type="4 | 5 | 6 | 7 | 8 | 10"
-                        default="4"
-                        description="Set the number of dotted rows and, as a result, the height of the drag handle."
-                    />
-                    <Prop
-                        name="dotsInRow"
-                        isRequired={false}
-                        type="2 | 3 | 4 | 5"
-                        default="2"
-                        description="Set the number of dots in the row. This will also affect the overall wdth of the component."
-                    />
-                    <Prop
-                        name="dotColor"
-                        isRequired={false}
-                        type="light | dark"
-                        default="currentColor"
-                        description="The dots are using the theme text color by default, so this option should be used in rare cases where there is a need to explicitly change this."
-                    />
-                    <Prop
-                        name="className"
-                        isRequired={false}
-                        type="string"
-                        default="/"
-                        description="Add custom classes to modify or override the default styles of the component."
-                    />
-                </PropsList>
-            </section>
-        );
-    }
-}