superdesk-ui-framework 4.0.51 → 4.0.53

package/examples/pages/design/layout-principles.html

@@ -1,45 +0,0 @@
-<section class="docs-page__container">
-    <h2 class="docs-page__h2">Layout Principles</h2>
-    <p class="docs-page__paragraph">To achieve consistency and visuall balance most measurements in Superdesk are based on an 8-pixel grid.
-        A subgrid of 4px can be used for smaller elements (e.g. icons), the spacing between small text blocks and similar.</p>
-    <div class="docs-page__content-block">
-        <div class="docs-page__content-block-item">
-            <figure class="docs-page__figure-media docs-page__figure-media--light">
-                <img src="/layout--grid-01.png" alt="Layout grid">
-            </figure>
-        </div>
-    </div>
-
-    <div class="docs-page__button-grid">
-        <a class="docs-page__graphic-btn" href="#/components/spacing" target="_blank">
-            <figure class="docs-page__graphic-btn-graphic">
-                <img src="/illustration-small--components.svg" alt="Components">
-            </figure>
-            <label class="docs-page__graphic-btn-label">
-                <span>View spacing helper classes</span>
-                <span class="docs-page__small-text">Components</span>
-            </label>
-        </a>
-    </div>
-
-    <h3 class="docs-page__h3">Example</h3>
-    <p class="docs-page__paragraph"></p>
-        <div class="docs-page__content-block">
-            <div class="docs-page__content-block-item">
-                <figure class="docs-page__figure-media">
-                    <img src="/layout--size-example-01.png" alt="Size example">
-                </figure>
-            </div>
-        </div>
-</section>
-
-
-
-
-
-
-
-
-
-
-

package/examples/pages/design/modules.html

@@ -1,22 +0,0 @@
-<section class="docs-page__container">
-    <h2 class="docs-page__h2">Modules</h2>
-    <p class="docs-page__paragraph"></p>
-    <div class="docs-page__content-block">
-        <div class="docs-page__content-block-item">
-            <div class="sd-alert sd-alert--hollow sd-alert--primary">
-               <div class="sd-margin-x--auto">Coming soon!</div>
-            </div>
-        </div>
-    </div>
-</section>
-
-
-
-
-
-
-
-
-
-
-

package/examples/pages/design/pages.html

@@ -1,22 +0,0 @@
-<section class="docs-page__container">
-    <h2 class="docs-page__h2">Page layouts</h2>
-    <p class="docs-page__paragraph"></p>
-    <div class="docs-page__content-block">
-        <div class="docs-page__content-block-item">
-            <div class="sd-alert sd-alert--hollow sd-alert--primary">
-               <div class="sd-margin-x--auto">Coming soon!</div>
-            </div>
-        </div>
-    </div>
-</section>
-
-
-
-
-
-
-
-
-
-
-

package/examples/pages/design/switch.html

@@ -1,55 +0,0 @@
-<section class="docs-page__container">
-        <h2 class="docs-page__h2">Switch usage guidlines</h2>
-        <div class="docs-page__content-block">
-            <div class="docs-page__content-block-item">
-                <figure class="docs-page__figure-media">
-                    <img src="/switch--do-01.png" alt="Switch - Do">
-                </figure>
-                <figcaption class="docs-page__figure-caption">
-                    <p class="docs-page__caption-heading docs-page__caption-heading--do">Do.</p>
-                    <p class="docs-page__caption-text">List multiple switches in a vertical list. If the containing block has text-align set to left the labels should always be on the right side of the switch. Always use plain labels, in the same line as the switch.</p>
-                </figcaption>
-            </div>
-            <div class="docs-page__content-block-item">
-                <figure class="docs-page__figure-media">
-                    <img src="/switch--do-02.png" alt="Switch - Caution">
-                </figure>
-                <figcaption class="docs-page__figure-caption">
-                    <p class="docs-page__caption-heading docs-page__caption-heading--caution">Caution.</p>
-                    <p class="docs-page__caption-text">In contained modules, not wider than 400 pixels, it is allowed to place labels on the left and align the switches to the right. This should be avoided though, as it makes it more difficult for the user to pair the labels with belonging switches. Consider placing label & switch pairs in dotted list items in such cases.</p>
-                </figcaption>
-            </div>
-        </div>
-        <div class="docs-page__content-block">
-            <div class="docs-page__content-block-item">
-                <figure class="docs-page__figure-media">
-                    <img src="/switch--dont-01.png" alt="Switch - Don't">
-                </figure>
-                <figcaption class="docs-page__figure-caption">
-                    <p class="docs-page__caption-heading docs-page__caption-heading--dont">Don't.</p>
-                    <p class="docs-page__caption-text">Never list switches with the label on the left. Place labels to the left only if the containing block has text-align set to right.</p>
-                </figcaption>
-            </div>
-            <div class="docs-page__content-block-item">
-                <figure class="docs-page__figure-media">
-                    <img src="/switch--dont-02.png" alt="Switch - Don't">
-                </figure>
-                <figcaption class="docs-page__figure-caption">
-                    <p class="docs-page__caption-heading docs-page__caption-heading--dont">Don't</p>
-                    <p class="docs-page__caption-text">Never list multiple switches in-line.</p>
-                </figcaption>
-            </div>
-        </div>
-
-        <div class="docs-page__button-grid">
-            <a class="docs-page__graphic-btn" href="#/react/switch" target="_blank">
-                <figure class="docs-page__graphic-btn-graphic">
-                    <img src="/illustration-small--react.svg" alt="React components">
-                </figure>
-                <label class="docs-page__graphic-btn-label">
-                    <span>View react component</span>
-                    <span class="docs-page__small-text">React components</span>
-                </label>
-            </a>
-        </div>
-    </section>

package/examples/pages/design-patterns/Index.tsx

@@ -1,42 +0,0 @@
-import * as React from 'react';
-
-import {ReactNav, PatternsDefault} from '../../js/react';
-import {Dropdown} from '../../../app-typescript/index';
-
-import {Switch, Route} from 'react-router-dom';
-
-import {ThreePaneLayoutPattern} from './ThreePaneLayoutPattern';
-
-const pages = {
-    basicComponents: {
-        name: 'Layout',
-        items: {
-            'three-pane-layout': {
-                name: 'Three Pane Layout',
-            },
-            // 'icon-buttons': {
-            //     name: 'Icon Buttons'
-            // },
-            // 'button-groups': {
-            //     name: 'Button Group & Divider'
-            // },
-        },
-    },
-};
-class DesignPatternsDoc extends React.Component<> {
-    render() {
-        return (
-            <React.Fragment>
-                <ReactNav pages={pages} base="design-patterns" />
-                <main className="docs-page__content docs-page__container-fluid">
-                    <Switch>
-                        <Route path="/design-patterns/three-pane-layout" component={ThreePaneLayoutPattern} />
-                        <Route path="/" component={PatternsDefault} />
-                    </Switch>
-                </main>
-            </React.Fragment>
-        );
-    }
-}
-
-export {DesignPatternsDoc};

package/examples/pages/design-patterns/ThreePaneLayoutPattern.tsx

@@ -1,378 +0,0 @@
-import * as React from 'react';
-import * as Markup from '../../js/react';
-import {Prop, PropsList} from '../../../app-typescript';
-import {
-    ButtonGroup,
-    Button,
-    NavButton,
-    SubNav,
-    Dropdown,
-    Icon,
-    IconButton,
-    Checkbox,
-    GridList,
-    Badge,
-    Divider,
-    BoxedList,
-    BoxedListItem,
-    EmptyState,
-    Tooltip,
-    Heading,
-    Container,
-    Label,
-} from '../../../app-typescript/index';
-import * as Layout from '../../../app-typescript/components/Layouts';
-
-interface IProps {
-    children?: React.ReactNode;
-}
-
-interface IState {
-    theme: 'dark' | 'light' | string;
-    itemType: string;
-    dropDownState: string;
-    itemSelected1: boolean;
-    itemSelected2: boolean;
-    itemSelected3: boolean;
-    value1: boolean;
-    leftPanelOpen: boolean;
-    rightPanelOpen: boolean;
-}
-
-class ThreePaneLayoutPattern extends React.Component<IProps, IState> {
-    constructor(props: IProps) {
-        super(props);
-        this.state = {
-            theme: 'light',
-            itemType: 'itemtype01',
-            dropDownState: '',
-            itemSelected1: false,
-            itemSelected2: false,
-            itemSelected3: false,
-            value1: false,
-            leftPanelOpen: false,
-            rightPanelOpen: false,
-        };
-    }
-
-    changeStatus(item: any, status: string) {
-        if (item.status.includes(status)) {
-            item.status.splice(item.status.indexOf(status), 1);
-        } else {
-            item.status.push(status);
-        }
-    }
-
-    render() {
-        return (
-            <section className="docs-page__container">
-                <h2 className="docs-page__h2">Three Pane Layout</h2>
-
-                <Markup.ReactMarkupCodePreview>
-                    {`
-                    <PageLayout
-                        header={(
-                            ...
-                        )}
-                        leftPanelOpen={true}
-                        leftPanel={(
-                            ...
-                        )}
-                        rightPanelOpen={false}
-                        rightPanel={(
-                            ...
-                        )}
-                        main={(
-                            ...
-                        )}
-                    />
-                `}
-                </Markup.ReactMarkupCodePreview>
-
-                <p className="docs-page__paragraph"></p>
-
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                        <div style={{height: 600}} className="sd-border--light">
-                            <Layout.PageLayout
-                                fullHeight={true}
-                                header={
-                                    <SubNav>
-                                        <ButtonGroup align="inline">
-                                            <Tooltip text="Click to toggle left panel" flow="right">
-                                                <NavButton
-                                                    type="darker"
-                                                    icon="filter-large"
-                                                    onClick={() =>
-                                                        this.setState({leftPanelOpen: !this.state.leftPanelOpen})
-                                                    }
-                                                />
-                                            </Tooltip>
-                                        </ButtonGroup>
-                                        <Heading type="h3" className="ms-2">
-                                            Layout example
-                                        </Heading>
-                                        <ButtonGroup align="end">
-                                            <NavButton icon="dots-vertical" onClick={() => false} />
-                                        </ButtonGroup>
-                                    </SubNav>
-                                }
-                                leftPanelOpen={this.state.leftPanelOpen}
-                                leftPanel={
-                                    <Layout.Panel
-                                        side="left"
-                                        background="grey"
-                                        open={this.state.leftPanelOpen}
-                                        size="x-small"
-                                    >
-                                        <Layout.PanelHeader
-                                            title="Left Panel title"
-                                            onClose={() => this.setState({leftPanelOpen: false})}
-                                        />
-                                        <Layout.PanelContent>
-                                            <EmptyState
-                                                title={'No content yet'}
-                                                description={'Please come later.'}
-                                                size="small"
-                                                illustration="1"
-                                            />
-                                        </Layout.PanelContent>
-                                    </Layout.Panel>
-                                }
-                                rightPanelOpen={this.state.rightPanelOpen}
-                                rightPanel={
-                                    <Layout.Panel side="right" open={this.state.rightPanelOpen} size="x-small">
-                                        <Layout.PanelHeader
-                                            title="Right Panel title"
-                                            onClose={() => this.setState({rightPanelOpen: false})}
-                                        />
-                                        <Layout.PanelContent>
-                                            <Layout.PanelContentBlock>
-                                                <p className="mb-2">
-                                                    Preview of the items in the main panel would go here.
-                                                </p>
-                                                <p>
-                                                    Maecenas sed diam eget risus varius blandit sit amet non magna.
-                                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                                                </p>
-                                            </Layout.PanelContentBlock>
-                                        </Layout.PanelContent>
-                                    </Layout.Panel>
-                                }
-                                main={
-                                    <BoxedList>
-                                        <BoxedListItem
-                                            alignVertical="center"
-                                            clickable={true}
-                                            density="compact"
-                                            selected={this.state.rightPanelOpen}
-                                            onClick={() => this.setState({rightPanelOpen: !this.state.rightPanelOpen})}
-                                            actions={
-                                                <IconButton
-                                                    icon="dots-vertical"
-                                                    size="small"
-                                                    ariaValue="More actions"
-                                                    onClick={() => false}
-                                                />
-                                            }
-                                        >
-                                            <Container gap="small">
-                                                <Label style="translucent" text="Published" type="success" />
-                                                <span>Click to open the right panel</span>
-                                            </Container>
-                                        </BoxedListItem>
-                                        <BoxedListItem
-                                            alignVertical="center"
-                                            clickable={true}
-                                            density="compact"
-                                            selected={false}
-                                            onClick={() => false}
-                                            actions={
-                                                <IconButton
-                                                    icon="dots-vertical"
-                                                    size="small"
-                                                    ariaValue="More actions"
-                                                    onClick={() => false}
-                                                />
-                                            }
-                                        >
-                                            <Container gap="small">
-                                                <Label style="translucent" text="In progress" type="warning" />
-                                                <span>Parturient pellentesque aenean commodo</span>
-                                            </Container>
-                                        </BoxedListItem>
-                                        <BoxedListItem
-                                            alignVertical="center"
-                                            clickable={true}
-                                            density="compact"
-                                            selected={false}
-                                            onClick={() => false}
-                                            actions={
-                                                <IconButton
-                                                    icon="dots-vertical"
-                                                    size="small"
-                                                    ariaValue="More actions"
-                                                    onClick={() => false}
-                                                />
-                                            }
-                                        >
-                                            <Container gap="small">
-                                                <Label style="translucent" text="Canceled" type="alert" />
-                                                <span>Lorem fringilla malesuada cursus</span>
-                                            </Container>
-                                        </BoxedListItem>
-                                    </BoxedList>
-                                }
-                            />
-                        </div>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>
-                        {`
-                        <Layout.PageLayout
-                            header={(
-                                <SubNav>
-                                    <ButtonGroup align="inline">
-                                        <Tooltip text='Click to toggle left panel' flow='right'>
-                                            <NavButton 
-                                                type='darker'
-                                                icon='filter-large'
-                                                onClick={() => this.setState({'leftPanelOpen': !this.state.leftPanelOpen})}
-                                            />
-                                        </Tooltip>
-                                    </ButtonGroup>
-                                    <Heading type='h3' className='ms-2'>Layout example</Heading>
-                                    <ButtonGroup align='end'>
-                                        <NavButton 
-                                            icon='dots-vertical'
-                                            onClick={()=> false}
-                                        />
-                                    </ButtonGroup>
-                                </SubNav>
-                            )}
-                            leftPanelOpen={this.state.leftPanelOpen}
-                            leftPanel={(
-                                <Layout.Panel
-                                    side='left'
-                                    background='grey'
-                                    open={this.state.leftPanelOpen}
-                                    size='x-small'
-                                >
-                                    <Layout.PanelHeader
-                                        title='Left Panel title'
-                                        onClose={() => this.setState({'leftPanelOpen': false})}
-                                    />
-                                    <Layout.PanelContent>
-                                        <EmptyState
-                                            title={'No content yet'} 
-                                            description={'Please come later.'} 
-                                            size='small' 
-                                            illustration="1"
-                                        />
-                                    </Layout.PanelContent>
-                                </Layout.Panel>
-                            )}
-                            rightPanelOpen={this.state.rightPanelOpen}
-                            rightPanel={(
-                                <Layout.Panel
-                                    side='right'
-                                    open={this.state.rightPanelOpen}
-                                    size='x-small'
-                                >
-                                    <Layout.PanelHeader
-                                        title='Right Panel title'
-                                        onClose={() => this.setState({'rightPanelOpen': false})}
-                                    />
-                                    <Layout.PanelContent>
-                                        <Layout.PanelContentBlock>
-                                            <p className='mb-2'>
-                                                Preview of the items in the main panel would go here.
-                                            </p>
-                                            <p>
-                                                Maecenas sed diam eget risus varius blandit sit amet non magna.
-                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                                            </p>
-                                        </Layout.PanelContentBlock>
-                                    </Layout.PanelContent>
-                                </Layout.Panel>
-                            )}
-                            main={(
-                                <BoxedList>
-                                    <BoxedListItem
-                                        alignVertical='center'
-                                        clickable={true}
-                                        density='compact'
-                                        selected={this.state.rightPanelOpen}
-                                        onClick={() => this.setState({rightPanelOpen: !this.state.rightPanelOpen})}
-                                        actions={(
-                                            <IconButton
-                                                icon="dots-vertical"
-                                                size='small'
-                                                ariaValue="More actions"
-                                                onClick={()=> false}
-                                            />
-                                        )}
-                                    >
-                                        <Container gap='small' >
-                                            <Label style='translucent' text='Published' type='success' />
-                                            <span>Click to open the right panel</span>
-                                        </Container>
-                                    </BoxedListItem>
-                                    <BoxedListItem
-                                        alignVertical='center'
-                                        clickable={true}
-                                        density='compact'
-                                        selected={false}
-                                        onClick={()=> false}
-                                        actions={(
-                                            <IconButton
-                                                icon="dots-vertical"
-                                                size='small'
-                                                ariaValue="More actions"
-                                                onClick={()=> false}
-                                            />
-                                        )}
-                                    >
-                                        <Container gap='small' >
-                                            <Label style='translucent' text='In progress' type='warning' />
-                                            <span>Parturient pellentesque aenean commodo</span>
-                                        </Container>
-                                    </BoxedListItem>
-                                    <BoxedListItem
-                                        alignVertical='center'
-                                        clickable={true}
-                                        density='compact'
-                                        selected={false}
-                                        onClick={()=> false}
-                                        actions={(
-                                            <IconButton
-                                                icon="dots-vertical"
-                                                size='small'
-                                                ariaValue="More actions"
-                                                onClick={()=> false}
-                                            />
-                                        )}
-                                    >
-                                        <Container gap='small' >
-                                            <Label style='translucent' text='Canceled' type='alert' />
-                                            <span>Lorem fringilla malesuada cursus</span>
-                                        </Container>
-                                    </BoxedListItem>
-                                </BoxedList>
-                            )}
-                        />   
-                    `}
-                    </Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-
-                {/* <h3 className="docs-page__h3">Props</h3>
-                <PropsList>
-                    <Prop name='size' isRequired={false} type='x-small | small | medium | large' default='small' description='Specifies the size of the items in the grid. '/>
-                    <Prop name='gap' isRequired={false} type='small | medium | large | x-large' default='small' description='Defines the gap between the items inside the Grid list. '/>
-                    <Prop name='margin' isRequired={false} type='0 | 1 | 2 | 3' default='3' description='Defines the margin around the Grid list. The values are based on multipliers of the the $sd-base-increment (equal to 8px). Setting the value to 3 results in a margin of 24px.'/>
-                </PropsList> */}
-            </section>
-        );
-    }
-}
-
-export {ThreePaneLayoutPattern};

package/examples/pages/design-patterns.html

@@ -1,14 +0,0 @@
-<header class="docs-page__header">
-    <a href="#/" class="docs-page__header-logo"></a>
-    <h1 class="docs-page__h1">Superdesk UI</h1>
-    <ul class="docs-page__header-nav">
-        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/">Home</a></li>
-        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/components">Components</a></li>
-        <li class="docs-page__header-nav-item docs-page__header-nav-item--active"><a class="docs-page__header-nav-link" href="#/design-patterns">Design Patterns</a></li>
-        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design">Design guidelines</a></li>
-        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/playgrounds">Playground</a></li>
-    </ul>
-    <doc-theme-picker></doc-theme-picker>
-</header>
-
-<doc-design-patterns class="d-contents"></doc-react>

package/examples/pages/design.html

@@ -1,39 +0,0 @@
-<header class="docs-page__header">
-    <a href="#/" class="docs-page__header-logo"></a>
-    <h1 class="docs-page__h1">Superdesk UI</h1>
-    <ul class="docs-page__header-nav">
-        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/">Home</a></li>
-        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/components">Components</a></li>
-        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design-patterns">Design Patterns</a></li>
-        <li class="docs-page__header-nav-item docs-page__header-nav-item--active"><a class="docs-page__header-nav-link" href="#/design">Design guidelines</a></li>
-        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/playgrounds">Playground</a></li>
-    </ul>
-    <doc-theme-picker></doc-theme-picker>
-</header>
-
-<aside class="docs-page__sidebar">
-    <ul class="docs-page__nav" doc-nav>
-        <li ng-repeat="group in design">
-            <span class="docs-page__nav-title">{{group.name}}</span>
-            <ul class="docs-page__nav--sub-level">
-                <li class="docs-page__nav-item" ng-repeat="(name, item) in group.items">
-                    <a ng-class="{'docs-page__nav-item--active': isActive(name)}" href="#/design/{{name}}">{{item.name}}</a>
-                </li>
-            </ul>
-        </li>
-    </ul>
-</aside>
-
-<main class="docs-page__content docs-page__container-fluid" ng-if="page" ng-include="'design/' + page + '.html'"></main>
-
-<main class="docs-page__content docs-page__container-fluid" ng-if="!page">
-    <section class="docs-page__container">
-        <div class="docs-page__hero">
-            <figure class="docs-page__hero-image">
-                <img src="/illustration--design.svg" alt="Design guidelines">
-            </figure>
-            <h2 class="docs-page__hero-h2 docs-page__color--primary">Superdesk Design guidelines</h2>
-            <p class="docs-page__hero-text">What to do and what not while creating user interfaces in Superdesk.</p>
-        </div>
-    </section>
-</main>