superdesk-ui-framework 4.0.51 → 4.0.53

package/examples/pages/components/Heading.tsx

@@ -1,152 +0,0 @@
-import * as React from 'react';
-import * as Markup from '../../js/react';
-import {PropsList, Prop, Heading} from '../../../app-typescript';
-
-interface IProps {
-    children?: React.ReactNode;
-}
-
-export default class HeadingDoc extends React.Component<IProps> {
-    render() {
-        return (
-            <section className="docs-page__container">
-                <h2 className="docs-page__h2">Heading</h2>
-
-                <Markup.ReactMarkupCodePreview>
-                    {`
-                    <Heading type='h2'>
-                        Purus Dolor Ligula
-                    </Heading>
-                `}
-                </Markup.ReactMarkupCodePreview>
-
-                <p className="docs-page__paragraph">
-                    Heading component. By choosing the type (h1, h2, h3...) appropriate HTML tags will be rendered,
-                    preserving the semantcs.
-                </p>
-
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                        <p className="docs-page__paragraph">// Basic</p>
-                        <div className="docs-page__content-row">
-                            <Heading type="h1">Heading one example</Heading>
-                        </div>
-                        <div className="docs-page__content-row">
-                            <Heading type="h2">Heading two example</Heading>
-                        </div>
-                        <div className="docs-page__content-row">
-                            <Heading type="h3">Heading three example</Heading>
-                        </div>
-                        <div className="docs-page__content-row">
-                            <Heading type="h4">Heading four example</Heading>
-                        </div>
-                        <div className="docs-page__content-row">
-                            <Heading type="h5">Heading five example</Heading>
-                        </div>
-                        <div className="docs-page__content-row">
-                            <Heading type="h6">Heading six example</Heading>
-                        </div>
-
-                        <p className="docs-page__paragraph">// Variations</p>
-
-                        <div className="docs-page__content-row">
-                            <Heading fontStyle="serif" color="light" weight="strong" type="h1">
-                                Maecenas faucibus mollis interdum.
-                            </Heading>
-                        </div>
-                        <div className="docs-page__content-row">
-                            <Heading type="h2" style="italic" align="end">
-                                Cras mattis consectetur purus sit amet fermentum.
-                            </Heading>
-                        </div>
-                        <div className="docs-page__content-row">
-                            <Heading fontStyle="serif" type="h3" align="center" color="lighter">
-                                Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla.
-                            </Heading>
-                        </div>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>
-                        {`
-                        // Basic
-
-                        <Heading type='h1'>Heading one example</Heading>
-                        <Heading type='h2'>Heading two example</Heading>
-                        <Heading type='h3'>Heading three example</Heading>
-                        <Heading type='h4'>Heading four example</Heading>
-                        <Heading type='h5'>Heading five example</Heading>
-                        <Heading type='h6'>Heading six example</Heading>
-
-                        // Variations
-
-                        <Heading fontStyle='serif' color='light' weight='strong' type='h1'>
-                            Maecenas faucibus mollis interdum.
-                        </Heading>
-
-                        <Heading type='h2' style='italic' align='end'>
-                            Cras mattis consectetur purus sit amet fermentum.
-                        </Heading>
-
-                        <Heading  fontStyle='serif' type='h3' align='center' color='lighter'>
-                            Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla.
-                        </Heading>
-  
-                    `}
-                    </Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-
-                <h3 className="docs-page__h3">Props</h3>
-                <PropsList>
-                    <Prop
-                        name="type"
-                        isRequired={true}
-                        type="h1 | h2 | h3 | h4 | h5 | h6"
-                        default="/"
-                        description="Heading type (eg. H1, H2, H3... etc.)"
-                    />
-                    <Prop
-                        name="weight"
-                        isRequired={false}
-                        type="normal | medium | strong"
-                        default="normal"
-                        description="Change the default font weight."
-                    />
-                    <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 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/IconButtons.tsx

@@ -1,191 +0,0 @@
-import * as React from 'react';
-
-import * as Markup from '../../js/react';
-
-import {IconButton, Prop, PropsList, Tooltip, Container, ButtonGroup} from '../../../app-typescript';
-
-export default class IconButtonDoc extends React.Component {
-    render() {
-        return (
-            <section className="docs-page__container">
-                <h2 className="docs-page__h2">Plain icon button</h2>
-                <Markup.ReactMarkupCodePreview>
-                    {`
-                    <IconButton icon="close-small" ariaValue="Screen-reader text" onClick={()=> false} />
-                `}
-                </Markup.ReactMarkupCodePreview>
-                <p className="docs-page__paragraph">
-                    The IconButton component is mostly used for action buttons in toolbars, inside other UI components.
-                    They can be combined with the Tooltip component to dsplay tooltips. The small version should be
-                    generally avoided and used only where the footprint of the default version is to large.
-                </p>
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                        <p className="docs-page__paragraph">// Default</p>
-                        <p className="docs-page__paragraph--small">Hover buttons to see tooltips.</p>
-                        <div className="docs-page__content-row docs-page__content-row--white">
-                            <IconButton icon="close-small" disabled ariaValue="Close" onClick={() => false} />
-                            <IconButton icon="plus-large" ariaValue="Add" onClick={() => false} />
-                            <IconButton icon="dots-vertical" ariaValue="More options" onClick={() => false} />
-                            <IconButton icon="trash" ariaValue="Move to trash" onClick={() => false} />
-                            <IconButton icon="close-small" ariaValue="Close" onClick={() => false} />
-                        </div>
-                        <p className="docs-page__paragraph">// Small</p>
-                        <div className="docs-page__content-row docs-page__content-row--white sd-d-flex ">
-                            <IconButton size="small" icon="plus-large" ariaValue="Add" onClick={() => false} />
-                            <span className="sd-margin-x--auto"></span>
-                            <IconButton size="small" icon="close-small" ariaValue="Close" onClick={() => false} />
-                        </div>
-
-                        <p className="docs-page__paragraph">// Xtra large, 'outline' style</p>
-                        <Container
-                            gap="large"
-                            className="sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--3"
-                        >
-                            <ButtonGroup align="center" spaces="loose">
-                                <IconButton
-                                    style="outline"
-                                    size="x-large"
-                                    icon="pencil"
-                                    ariaValue="Add"
-                                    onClick={() => false}
-                                />
-                                <IconButton
-                                    style="outline"
-                                    disabled={true}
-                                    size="x-large"
-                                    icon="switches"
-                                    ariaValue="Add"
-                                    onClick={() => false}
-                                />
-                                <IconButton
-                                    style="outline"
-                                    size="x-large"
-                                    icon="crop"
-                                    ariaValue="Close"
-                                    onClick={() => false}
-                                />
-                            </ButtonGroup>
-                        </Container>
-
-                        <p className="docs-page__paragraph">// Xtra large, outlineWhite style</p>
-                        <p className="docs-page__paragraph--small">
-                            The 'outlineWhite' syle forces a white icon and outline. It can be used on dark overlays for
-                            example.
-                        </p>
-                        <div
-                            style={{background: 'hsla(214, 13%, 12%, 1)'}}
-                            className="sd-container sd-container--flex sd-container--gap-large sd-radius--medium sd-shadow--z2 sd-padding--3"
-                        >
-                            <ButtonGroup align="center" spaces="loose">
-                                <IconButton
-                                    style="outlineWhite"
-                                    size="x-large"
-                                    icon="pencil"
-                                    ariaValue="Edit metadata"
-                                    onClick={() => false}
-                                />
-                                <IconButton
-                                    style="outlineWhite"
-                                    disabled={true}
-                                    size="x-large"
-                                    icon="switches"
-                                    ariaValue="Edit image"
-                                    onClick={() => false}
-                                />
-                                <IconButton
-                                    style="outlineWhite"
-                                    size="x-large"
-                                    icon="crop"
-                                    ariaValue="Edit crops"
-                                    onClick={() => false}
-                                />
-                            </ButtonGroup>
-                        </div>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>
-                        {`
-                        <IconButton icon='close-small' disabled ariaValue='Close' onClick={()=> false} />
-                        <IconButton icon='plus-large' ariaValue='Add' onClick={()=> false} />
-                        <IconButton icon='dots-vertical' ariaValue='More options' onClick={()=> false} />
-                        <IconButton icon='trash' ariaValue='Move to trash' onClick={()=> false} />
-                        <IconButton icon='close-small' ariaValue='Close' onClick={()=> false} />
-
-                        // Small
-                        <IconButton size='small' icon='plus-large' ariaValue='Add' onClick={()=> false} />
-                        ...
-                        <IconButton size='small' icon='close-small' ariaValue='Close' onClick={()=> false} />
-
-                        // Xtra large, 'outline' style
-                        <ButtonGroup align='center' spaces='loose'>
-                            <IconButton style='outline' size='x-large' icon='pencil' ariaValue='Add' onClick={()=> false} />
-                            <IconButton style='outline' disabled={true} size='x-large' icon='switches' ariaValue='Add' onClick={()=> false} />
-                            <IconButton style='outline' size='x-large' icon='crop' ariaValue='Close' onClick={()=> false} />
-                        </ButtonGroup>
-
-                        // Xtra large, outlineWhite style
-                        <ButtonGroup align='center' spaces='loose'>
-                            <IconButton style='outlineWhite' size='x-large' icon='pencil' ariaValue='Edit metadata' onClick={()=> false} />
-                            <IconButton style='outlineWhite' disabled={true} size='x-large' icon='switches' ariaValue='Edit image' onClick={()=> false} />
-                            <IconButton style='outlineWhite' size='x-large' icon='crop' ariaValue='Edit crops' onClick={()=> false} />
-                        </ButtonGroup>
-                    `}
-                    </Markup.ReactMarkupCode>
-                </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="ariaValue"
-                        isRequired={true}
-                        type="string"
-                        default="/"
-                        description="Description for screen readers, also used as the ToolTip value."
-                    />
-                    <Prop
-                        name="size"
-                        isRequired={false}
-                        type="default | small | x-large"
-                        default="default"
-                        description="Creates an IconButton with a smaller or larger footprint."
-                    />
-                    <Prop
-                        name="style"
-                        isRequired={false}
-                        type="default | outline | outlineWhite"
-                        default="default"
-                        description="Different styling options."
-                    />
-                    <Prop
-                        name="disabled"
-                        isRequired={false}
-                        type="boolean"
-                        default="false"
-                        description="Disables the Button, preventing mouse events."
-                    />
-                    <Prop
-                        name="toolTipFlow"
-                        isRequired={false}
-                        type="top | left | right | down"
-                        default="top"
-                        description="Defines the possition of the ToolTip."
-                    />
-                    <Prop
-                        name="toolTipAppend"
-                        isRequired={false}
-                        type="boolean"
-                        default="false"
-                        description="Uses the append to body version of the ToolTips if set to true."
-                    />
-                </PropsList>
-            </section>
-        );
-    }
-}

package/examples/pages/components/IconFont.tsx

@@ -1,49 +0,0 @@
-import * as React from 'react';
-import * as Markup from '../../js/react';
-
-import {Icon, Prop, PropsList} from '../../../app-typescript';
-
-//@ts-ignore
-import * as iconFont from '../../../app/styles/_icon-font.scss';
-
-export default class IconFontDoc extends React.PureComponent {
-    render() {
-        const array = iconFont.icon.split(', ');
-        const icons = array.map((icon, index) => (
-            <li key={index}>
-                <Icon name={icon} />
-                <span>{icon}</span>
-            </li>
-        ));
-        return (
-            <section className="docs-page__container">
-                <h2 className="docs-page__h2 docs-page__text-align--center">Icon font</h2>
-                <Markup.ReactMarkupCodePreview>
-                    {`
-                    <Icon name="photo" />
-                `}
-                </Markup.ReactMarkupCodePreview>
-                <ul className="docs-page__icon-font-list">{icons}</ul>
-
-                <h3 className="docs-page__h3">Props</h3>
-                <PropsList>
-                    <Prop name="name" isRequired={false} type="string" default="/" description="Icon name value." />
-                    <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="size"
-                        isRequired={false}
-                        type="small | big"
-                        default="small"
-                        description="Specifies a small or big size of Icon."
-                    />
-                </PropsList>
-            </section>
-        );
-    }
-}

package/examples/pages/components/IconLabels.tsx

@@ -1,199 +0,0 @@
-import * as React from 'react';
-
-import * as Markup from '../../js/react';
-
-import {IconLabel, Prop, PropsList} from '../../../app-typescript';
-
-export default class IconLabelDoc extends React.Component {
-    render() {
-        return (
-            <section className="docs-page__container">
-                <h2 className="docs-page__h2">Icon Labels</h2>
-                <Markup.ReactMarkupCodePreview>
-                    {`
-                    <IconLabel text='Label primary' icon='facebook' type='primary' />
-                `}
-                </Markup.ReactMarkupCodePreview>
-                <p className="docs-page__paragraph">
-                    Icon labels are inline styles for displaying a combination of icons from the icon font with a text
-                    label. Use the <code>type</code> prop to change semantic colour values based on the intended
-                    purpose.
-                </p>
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                        <div className="docs-page__content-row docs-page__content-row--no-margin">
-                            <p className="docs-page__paragraph">// Basic</p>
-                            <IconLabel text="Default label" icon="photo" />
-                            <IconLabel text="Label primary" icon="facebook" type="primary" />
-                            <IconLabel text="Label success" icon="text" type="success" />
-                            <IconLabel text="Label warning" icon="paywall" type="warning" />
-                            <IconLabel text="Label alert" icon="trash" type="alert" />
-                            <IconLabel text="Label highlight" icon="composite" type="highlight" />
-                            <IconLabel text="Label sd-green" icon="video" type="sd-green" />
-
-                            <p className="docs-page__paragraph">// Translucent</p>
-                            <IconLabel
-                                innerLabel="Start:"
-                                style="translucent"
-                                text="00:45"
-                                type="success"
-                                icon="time"
-                            />
-                            <IconLabel innerLabel="end:" style="translucent" text="00:30" type="warning" icon="time" />
-                            <IconLabel style="translucent" text="Label alert" type="alert" icon="time" />
-                            <IconLabel style="translucent" text="Label highlight" type="highlight" icon="calendar" />
-                            <IconLabel style="translucent" text="Label sd-green" type="sd-green" icon="calendar" />
-                            <IconLabel style="translucent" text="Default label" icon="bell" />
-                            <br />
-                            <IconLabel innerLabel="Start:" style="translucent" text="00:45" type="success" />
-                            <IconLabel innerLabel="end:" style="translucent" text="00:30" type="warning" />
-                            <IconLabel style="translucent" text="Label alert" type="alert" />
-
-                            <p className="docs-page__paragraph">// Translucent & Large</p>
-                            <IconLabel
-                                innerLabel="Start:"
-                                size="large"
-                                style="translucent"
-                                text="00:45"
-                                type="success"
-                                icon="time"
-                            />
-                            <IconLabel
-                                innerLabel="Start:"
-                                size="large"
-                                style="translucent"
-                                text="00:55"
-                                type="warning"
-                                icon="time"
-                            />
-                            <IconLabel
-                                innerLabel="Start:"
-                                size="large"
-                                style="translucent"
-                                text="00:15"
-                                type="alert"
-                                icon="time"
-                            />
-                            <br />
-                            <IconLabel
-                                innerLabel="Start:"
-                                size="large"
-                                style="translucent"
-                                text="18:30"
-                                type="success"
-                            />
-                            <IconLabel
-                                innerLabel="End:"
-                                size="large"
-                                style="translucent"
-                                text="20:30"
-                                type="highlight"
-                            />
-                            <IconLabel
-                                innerLabel="Duration:"
-                                size="large"
-                                style="translucent"
-                                text="00:30"
-                                type="primary"
-                            />
-
-                            <p className="docs-page__paragraph">// Translucent & Small</p>
-                            <IconLabel
-                                innerLabel="Start:"
-                                size="small"
-                                style="translucent"
-                                text="00:45"
-                                type="success"
-                                icon="time"
-                            />
-                            <IconLabel
-                                innerLabel="Start:"
-                                size="small"
-                                style="translucent"
-                                text="00:55"
-                                type="warning"
-                                icon="time"
-                            />
-                            <IconLabel
-                                innerLabel="Start:"
-                                size="small"
-                                style="translucent"
-                                text="00:15"
-                                type="alert"
-                                icon="time"
-                            />
-                            <br />
-                            <IconLabel
-                                innerLabel="Start:"
-                                size="small"
-                                style="translucent"
-                                text="18:30"
-                                type="success"
-                            />
-                            <IconLabel
-                                innerLabel="End:"
-                                size="small"
-                                style="translucent"
-                                text="20:30"
-                                type="highlight"
-                            />
-                            <IconLabel
-                                innerLabel="Duration:"
-                                size="small"
-                                style="translucent"
-                                text="00:30"
-                                type="primary"
-                            />
-                        </div>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>
-                        {`
-                        // Basic
-                        <IconLabel text='Default label' icon='photo' />
-                        <IconLabel text='Label primary' icon='facebook' type='primary' />
-                        <IconLabel text='Label success' icon='text' type='success' />
-                        <IconLabel text='Label warning' icon='paywall' type='warning' />
-                        <IconLabel text='Label alert' icon='trash' type='alert' />
-                        <IconLabel text='Label highlight' icon='composite' type='highlight' />
-                        <IconLabel text='Label sd-green' icon='video' type='sd-green' />
-
-                        // Translucent
-                        <IconLabel style='translucent' text='Label success' type='success' icon='time' />
-                        <IconLabel style='translucent' text='Label warning' type='warning' icon='time' />
-                        <IconLabel style='translucent' text='Label alert' type='alert' icon='time' />
-                        <IconLabel style='translucent' text='Label highlight' type='highlight' icon='calendar' />
-                        <IconLabel style='translucent' text='Label sd-green' type='sd-green' icon='calendar' />
-                        <IconLabel style='translucent' text='Default label' icon='bell' />
-                    `}
-                    </Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-
-                <h3 className="docs-page__h3">Props</h3>
-                <PropsList>
-                    <Prop name="text" isRequired={true} type="string" default="/" description="IconLabel text value." />
-                    <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="icon"
-                        isRequired={false}
-                        type="string"
-                        default="/"
-                        description="Icon class name without the icon- part."
-                    />
-                    <Prop
-                        name="style"
-                        isRequired={false}
-                        type="basic | translucent"
-                        default="basic"
-                        description="Defines the style of the label (basic or translucent)."
-                    />
-                </PropsList>
-            </section>
-        );
-    }
-}