superdesk-ui-framework 4.0.52 → 4.0.53

package/examples/pages/components/Popover.tsx

@@ -1,90 +0,0 @@
-import * as React from 'react';
-import {Popover, PropsList, Prop} from '../../../app-typescript';
-
-import * as Markup from '../../js/react';
-
-export class PopoverDoc extends React.Component {
-    buttonRef: HTMLButtonElement | null;
-
-    render() {
-        return (
-            <section className="docs-page__container">
-                <h2 className="docs-page__h2">Popover</h2>
-                <Markup.ReactMarkupCodePreview>
-                    {`
-                    <Popover triggerSelector="#trigger-button-id" title="Popover title">
-                        Popover content.
-                    </Popover>
-                `}
-                </Markup.ReactMarkupCodePreview>
-
-                <p className="docs-page__paragraph"></p>
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                        <div className="docs-page__content-row docs-page__content-row--no-margin">
-                            <div className="form__row">
-                                <button
-                                    className="btn btn-default btn--small"
-                                    aria-haspopup="true"
-                                    id="button-view-content"
-                                >
-                                    Open popover
-                                </button>
-
-                                <Popover
-                                    triggerSelector="#button-view-content"
-                                    title="Popover test"
-                                    placement="top-end"
-                                >
-                                    Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.
-                                </Popover>
-                            </div>
-                        </div>
-                    </Markup.ReactMarkupPreview>
-
-                    <Markup.ReactMarkupCode>{`
-                        <Popover
-                            triggerSelector="#button-view-content"
-                            title="Popover test"
-                            placement="top-end"
-                        >
-                            Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.
-                        </Popover>
-                    `}</Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-
-                <h3 className="docs-page__h3">Props</h3>
-                <PropsList>
-                    <Prop
-                        name="title"
-                        isRequired={true}
-                        type="string"
-                        default="null"
-                        description="Title of the popover component."
-                    />
-                    <Prop
-                        name="triggerSelector"
-                        isRequired={true}
-                        type="string"
-                        default="null"
-                        description="ID selector for an element that will be used to toggle the popover."
-                    />
-                    <Prop
-                        name="displayCloseButton"
-                        isRequired={false}
-                        type="boolean"
-                        default="true"
-                        description="Show or hide the close button."
-                    />
-                    <Prop
-                        name="placement"
-                        isRequired={false}
-                        type="auto | auto-end | auto-start | bottom | bottom-end | bottom-start | left | left-end | left-start | right | right-end | right-start | top | top-end | top-start"
-                        default="auto"
-                        description="Define the placement of the Popover."
-                    />
-                </PropsList>
-            </section>
-        );
-    }
-}

package/examples/pages/components/QuickNavigationBar.tsx

@@ -1,278 +0,0 @@
-import * as React from 'react';
-import * as Markup from '../../js/react';
-import {
-    Button,
-    ButtonGroup,
-    Container,
-    Heading,
-    LeftMenu,
-    Prop,
-    PropsList,
-    QuickNavBar,
-    SimpleList,
-    SimpleListItem,
-} from '../../../app-typescript';
-
-export default class QuickNavBarDoc extends React.Component<{}> {
-    render() {
-        return (
-            <section className="docs-page__container">
-                <h2 className="docs-page__h2">Quick navigation bar</h2>
-
-                <Markup.ReactMarkupCodePreview>
-                    {`
-                    <QuickNavBar
-                        items={[
-                            { icon: 'heading-1', onClick:()=> false, id: 'section1' },
-                            { icon: 'align-left', onClick:()=> false, id: 'section2' },
-                            { icon: 'picture', onClick:()=> false, id: 'section3' },
-                            { icon: 'attachment-large', onClick:()=> false, id: 'section4' }]} />
-                `}
-                </Markup.ReactMarkupCodePreview>
-                <p className="docs-page__paragraph">
-                    If you want the default variant, follow the instructions in the description above.
-                </p>
-                <p className="docs-page__paragraph">
-                    The component also supports the scrollspy variant. It is necessary to add ID value to items and add
-                    the ID value of the scrollable container in the <code>scrollSpy</code> attribute.
-                </p>
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                        <div className="docs-page__content-row">
-                            <div className="docs-page__grid-page-example">
-                                <div className="docs-page__grid-page-example__top">
-                                    <div className="sd-top-menu">
-                                        <a className="sd-top-menu__collapse-nav">
-                                            <i className="icon-collapse icon--white"></i>
-                                        </a>
-                                        <p className="sd-top-menu__header">Top menu</p>
-                                    </div>
-                                </div>
-                                <QuickNavBar
-                                    scrollSpy="#scrollContainer"
-                                    offset={-300}
-                                    items={[
-                                        {icon: 'heading-1', tooltip: 'Headline', onClick: () => false, id: 'section1'},
-                                        {icon: 'align-left', tooltip: 'Body', onClick: () => false, id: 'section2'},
-                                        {icon: 'picture', tooltip: 'Media', onClick: () => false, id: 'section3'},
-                                        {
-                                            icon: 'attachment-large',
-                                            tooltip: 'Attachments',
-                                            onClick: () => false,
-                                            id: 'section4',
-                                        },
-                                    ]}
-                                />
-                                <div
-                                    className="docs-page__grid-page-example__main sd-padding--4"
-                                    id="scrollContainer"
-                                    style={{height: 600}}
-                                >
-                                    <SimpleList density="comfortable">
-                                        <SimpleListItem stacked={true} id="section1">
-                                            <Heading type="h2" className="sd-padding--2">
-                                                Section 1
-                                            </Heading>
-                                            <Container
-                                                direction="column"
-                                                className="sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--2 sd-margin-b--3"
-                                            >
-                                                <p>
-                                                    Lorem ipsum, dolor sit amet consectetur adipisicing elit.
-                                                    Repellendus ab porro nihil facilis beatae amet labore laudantium
-                                                    repellat enim non sunt aspernatur magni consequuntur tempore,
-                                                    aperiam qui doloremque perspiciatis tenetur.
-                                                </p>
-                                            </Container>
-                                            <Container
-                                                direction="column"
-                                                className="sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--2 sd-margin-b--3"
-                                            >
-                                                <p>
-                                                    Lorem ipsum, dolor sit amet consectetur adipisicing elit.
-                                                    Repellendus ab porro nihil facilis beatae amet labore laudantium
-                                                    repellat enim non sunt aspernatur magni consequuntur tempore,
-                                                    aperiam qui doloremque perspiciatis tenetur.
-                                                </p>
-                                            </Container>
-                                            <Container gap="large" display="flex">
-                                                <ButtonGroup align="end">
-                                                    <Button text="button" type="primary" onClick={() => false} />
-                                                    <Button text="button" type="highlight" onClick={() => false} />
-                                                </ButtonGroup>
-                                            </Container>
-                                        </SimpleListItem>
-                                        <SimpleListItem stacked={true} id="section2">
-                                            <Heading type="h2" className="sd-padding--2">
-                                                Section 2
-                                            </Heading>
-                                            <Container
-                                                direction="column"
-                                                className="sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--2 sd-margin-b--3"
-                                            >
-                                                <p>
-                                                    Lorem ipsum, dolor sit amet consectetur adipisicing elit.
-                                                    Repellendus ab porro nihil facilis beatae amet labore laudantium
-                                                    repellat enim non sunt aspernatur magni consequuntur tempore,
-                                                    aperiam qui doloremque perspiciatis tenetur.
-                                                </p>
-                                            </Container>
-                                            <Container
-                                                direction="column"
-                                                className="sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--2 sd-margin-b--3"
-                                            >
-                                                <p>
-                                                    Lorem ipsum, dolor sit amet consectetur adipisicing elit.
-                                                    Repellendus ab porro nihil facilis beatae amet labore laudantium
-                                                    repellat enim non sunt aspernatur magni consequuntur tempore,
-                                                    aperiam qui doloremque perspiciatis tenetur.
-                                                </p>
-                                            </Container>
-                                            <Container gap="large" display="flex">
-                                                <ButtonGroup align="end">
-                                                    <Button text="button" type="primary" onClick={() => false} />
-                                                    <Button text="button" type="highlight" onClick={() => false} />
-                                                </ButtonGroup>
-                                            </Container>
-                                        </SimpleListItem>
-                                        <SimpleListItem stacked={true} id="section3">
-                                            <Heading type="h2" className="sd-padding--2">
-                                                Section 3
-                                            </Heading>
-                                            <Container
-                                                direction="column"
-                                                className="sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--2 sd-margin-b--3"
-                                            >
-                                                <p>
-                                                    Lorem ipsum, dolor sit amet consectetur adipisicing elit.
-                                                    Repellendus ab porro nihil facilis beatae amet labore laudantium
-                                                    repellat enim non sunt aspernatur magni consequuntur tempore,
-                                                    aperiam qui doloremque perspiciatis tenetur.
-                                                </p>
-                                            </Container>
-                                            <Container
-                                                direction="column"
-                                                className="sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--2 sd-margin-b--3"
-                                            >
-                                                <p>
-                                                    Lorem ipsum, dolor sit amet consectetur adipisicing elit.
-                                                    Repellendus ab porro nihil facilis beatae amet labore laudantium
-                                                    repellat enim non sunt aspernatur magni consequuntur tempore,
-                                                    aperiam qui doloremque perspiciatis tenetur.
-                                                </p>
-                                            </Container>
-                                            <Container gap="large" display="flex">
-                                                <ButtonGroup align="end">
-                                                    <Button text="button" type="primary" onClick={() => false} />
-                                                    <Button text="button" type="highlight" onClick={() => false} />
-                                                </ButtonGroup>
-                                            </Container>
-                                        </SimpleListItem>
-                                        <SimpleListItem stacked={true} id="section4">
-                                            <Heading type="h2" className="sd-padding--2">
-                                                Section 4
-                                            </Heading>
-                                            <Container
-                                                direction="column"
-                                                className="sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--2 sd-margin-b--3"
-                                            >
-                                                <p>
-                                                    Lorem ipsum, dolor sit amet consectetur adipisicing elit.
-                                                    Repellendus ab porro nihil facilis beatae amet labore laudantium
-                                                    repellat enim non sunt aspernatur magni consequuntur tempore,
-                                                    aperiam qui doloremque perspiciatis tenetur.
-                                                </p>
-                                            </Container>
-                                            <Container
-                                                direction="column"
-                                                className="sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--2 sd-margin-b--3"
-                                            >
-                                                <p>
-                                                    Lorem ipsum, dolor sit amet consectetur adipisicing elit.
-                                                    Repellendus ab porro nihil facilis beatae amet labore laudantium
-                                                    repellat enim non sunt aspernatur magni consequuntur tempore,
-                                                    aperiam qui doloremque perspiciatis tenetur.
-                                                </p>
-                                            </Container>
-                                        </SimpleListItem>
-                                        <Container gap="large" display="flex">
-                                            <ButtonGroup align="end">
-                                                <Button text="button" type="primary" onClick={() => false} />
-                                                <Button text="button" type="highlight" onClick={() => false} />
-                                            </ButtonGroup>
-                                        </Container>
-                                    </SimpleList>
-                                </div>
-                            </div>
-                        </div>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>
-                        {`
-                            <QuickNavBar
-                            scrollSpy='#scrollContainer'
-                            offset={-300}
-                            items={[
-                                { icon: 'heading-1', tooltip: 'Headline', onClick:()=> false, id: 'section1' },
-                                { icon: 'align-left', tooltip: 'Body', onClick:()=> false, id: 'section2' },
-                                { icon: 'picture', tooltip: 'Media', onClick:()=> false, id: 'section3' },
-                                { icon: 'attachment-large', tooltip: 'Attachments', onClick:()=> false, id: 'section4' }]}
-                            />
-                            
-                            <div id='#scrollContainer'>...</div>
-                        `}
-                    </Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-
-                <h3 className="docs-page__h3">Props</h3>
-                <PropsList>
-                    <Prop name="items" isRequired={true} type="Array<Items>" default="/" description="Array of items" />
-                    <Prop
-                        name="scrollSpy"
-                        isRequired={false}
-                        type="string"
-                        default="/"
-                        description="Name of the element of scrollable container."
-                    />
-                    <Prop
-                        name="offset"
-                        isRequired={false}
-                        type="Array<menuitem>"
-                        default="/"
-                        description="Offset value that adjusts to determine the elements are in the viewport."
-                    />
-                </PropsList>
-                <p className="docs-page__paragraph">Items:</p>
-                <PropsList>
-                    <Prop
-                        name="icon"
-                        isRequired={true}
-                        type="string"
-                        default="/"
-                        description="Icon class name without the icon- part."
-                    />
-                    <Prop
-                        name="tooltip"
-                        isRequired={false}
-                        type="string"
-                        default="/"
-                        description="Defines the possition of the ToolTip."
-                    />
-                    <Prop
-                        name="id"
-                        isRequired={false}
-                        type="string"
-                        default="/"
-                        description="Item id value. It is necessary for scrollspy."
-                    />
-                    <Prop
-                        name="onClick"
-                        isRequired={false}
-                        type="function"
-                        default="/"
-                        description="Callback fired when a button is pressed."
-                    />
-                </PropsList>
-            </section>
-        );
-    }
-}