superdesk-ui-framework 4.0.52 → 4.0.53

package/examples/pages/components/Toasts.tsx

@@ -1,283 +0,0 @@
-import * as React from 'react';
-
-import * as Markup from '../../js/react';
-import {HeadingText, Button, Prop, PropsList} from '../../../app-typescript';
-import {toasted} from '../../../app-typescript';
-
-export default class ToastsDoc extends React.Component {
-    // default
-    showDefault = () => {
-        toasted.notify("I'm a tasty default Toast message!", {position: 'top'});
-    };
-
-    // all positions
-    showAll = () => {
-        toasted.notify('Position top', {position: 'top'});
-        toasted.notify('Position top-left', {position: 'top-left'});
-        toasted.notify('Position top-right', {position: 'top-right'});
-        toasted.notify('Position bottom', {position: 'bottom'});
-        toasted.notify('Position bottom-left', {position: 'bottom-left'});
-        toasted.notify('Position bottom-right', {position: 'bottom-right'});
-    };
-
-    // duration
-    showDuration = () => {
-        toasted.notify('Curabitur blandit tempus porttitor.', {duration: 3000});
-    };
-    showNull = () => {
-        toasted.notify('Curabitur blandit tempus porttitor.', {});
-    };
-
-    // coloring and icon
-    showSuccess = () => {
-        toasted.notify("I'm a tasty default Toast message!", {type: 'success', icon: 'ok'});
-    };
-    showAlert = () => {
-        toasted.notify('Danger! Condimentum ridiculus ultricies ornare mollis.', {
-            type: 'alert',
-            icon: 'exclamation-sign',
-            position: 'bottom',
-        });
-    };
-
-    // size
-    showSizeS = () => {
-        toasted.notify('Et harum quidem rerum facilis est et expedita distinctio.', {
-            position: 'top-left',
-            size: 'fixed-s',
-        });
-    };
-    showSizeM = () => {
-        toasted.notify('Et harum quidem rerum facilis est et expedita distinctio.', {
-            position: 'top-left',
-            size: 'fixed-m',
-        });
-    };
-    showSizeL = () => {
-        toasted.notify('Et harum quidem rerum facilis est et expedita distinctio.', {
-            position: 'top-left',
-            size: 'fixed-l',
-        });
-    };
-    showSizeXL = () => {
-        toasted.notify('Et harum quidem rerum facilis est et expedita distinctio.', {
-            position: 'top-left',
-            size: 'fixed-xl',
-        });
-    };
-
-    // custom element
-    showCustomHeading = () => {
-        toasted.notify(
-            <HeadingText
-                heading="I have Toaster heading!"
-                text="Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus."
-            />,
-            {type: 'primary', icon: 'info-sign', position: 'bottom'},
-        );
-    };
-    showAnotherCustomElement = () => {
-        toasted.notify(
-            <React.Fragment>
-                <div className="sd-toast__icon"></div>
-                <figure className="sd-toast__avatar avatar">sd</figure>
-                <div className="sd-toast__message">
-                    <div className="sd-toast__message-header">
-                        <h4 className="sd-toast__heading">Martin Mustermann</h4>
-                        <time title="March 22, 2017 11:08 AM">16:50, 16.03.2019</time>
-                    </div>
-                    <p>
-                        Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id
-                        elit.
-                    </p>
-                </div>
-            </React.Fragment>,
-            {position: 'bottom-right', size: 'fixed-l'},
-        );
-    };
-
-    render() {
-        return (
-            <section className="docs-page__container">
-                <h2 className="docs-page__h2">Toasts</h2>
-                <Markup.ReactMarkupCodePreview>
-                    {`
-                   import {toasted} from 'superdesk-ui-framework/react';
-
-                   toasted.notify("I'm a tasty default Toast message!", {});
-                `}
-                </Markup.ReactMarkupCodePreview>
-
-                <h3 className="docs-page__h3">Position</h3>
-                <p className="docs-page__paragraph">
-                    Chose one of 6 placement options (<code>'top'</code>, <code>'top-right'</code>,{' '}
-                    <code>'top-left'</code>, <code>'bottom'</code>, <code>'bottom-right'</code>,{' '}
-                    <code>'bottom-left'</code>). The default value is ’top’ and will be rendered so without explicitly
-                    specifying it.
-                </p>
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                        <div className="docs-page__content-row">
-                            <Button text="default" onClick={this.showDefault}></Button>
-                            <Button text="all positions" onClick={this.showAll}></Button>
-                        </div>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>
-                        {`
-                        toasted.notify("I'm a tasty default Toast message!", {});
-
-                        toasted.notify('Position top', { position: 'top' });
-                        toasted.notify('Position top-left', { position: 'top-left' });
-                        toasted.notify('Position top-right', { position: 'top-right' });
-                        toasted.notify('Position bottom', { position: 'bottom' });
-                        toasted.notify('Position bottom-left', { position: 'bottom-left' });
-                        toasted.notify('Position bottom-right', { position: 'bottom-right' });
-                    `}
-                    </Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-
-                <h3 className="docs-page__h3">Duration</h3>
-                <p className="docs-page__paragraph">
-                    It can be set duration time off notification when is set <code>duration</code> option, otherwise the
-                    notification will appear indefinitely until manually closed by the user.
-                </p>
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                        <p className="docs-page__paragraph">// Duration time 3000ms and NULL</p>
-                        <div className="docs-page__content-row">
-                            <Button text="3000" onClick={this.showDuration}></Button>
-                            <Button text="null" onClick={this.showNull}></Button>
-                        </div>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>
-                        {`
-                        toasted.notify("Curabitur blandit tempus porttitor.", { duration: 3000 });
-                        toasted.notify("Curabitur blandit tempus porttitor.", {});
-                    `}
-                    </Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-
-                <h3 className="docs-page__h3">Coloring and Icon</h3>
-                <p className="docs-page__paragraph">
-                    For Superdesk only Default and Primary buttons should be used in most cases. Other semantic colour
-                    options are allowed but should be used only in cases where a clear distinction between similarly
-                    important actions is needed (e.g. Send To versus Publish action). Also it can be set icons for
-                    toast. Just add any of the available classes from the Icon font as a value of the icon prop
-                </p>
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                        <div className="docs-page__content-row">
-                            <Button type="success" text="success" onClick={this.showSuccess}></Button>
-                            <Button type="alert" text="alert" onClick={this.showAlert}></Button>
-                        </div>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>
-                        {`
-                        toasted.notify("I'm a tasty default Toast message!", { type: 'success', icon: 'ok'});
-                        toasted.notify("Danger! Condimentum ridiculus ultricies ornare mollis.", { type: 'alert', icon: 'exclamation-sign', position: 'bottom'});
-                    `}
-                    </Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-
-                <h3 className="docs-page__h3">Size</h3>
-                <p className="docs-page__paragraph">
-                    To change the default size set the size value either to <code>'fixed-s'</code>,{' '}
-                    <code>'fixed-m'</code>, <code>'fixed-l'</code> or <code>'fixed-xl'</code>.
-                </p>
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                        <div className="docs-page__content-row">
-                            <Button text="fixed-s" onClick={this.showSizeS}></Button>
-                            <Button text="fixed-m" onClick={this.showSizeM}></Button>
-                            <Button text="fixed-l" onClick={this.showSizeL}></Button>
-                            <Button text="fixed-xl" onClick={this.showSizeXL}></Button>
-                        </div>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>
-                        {`
-                       toasted.notify("Et harum quidem rerum facilis est et expedita distinctio.", { position: 'top-left', size: 'fixed-s' });
-                       toasted.notify("Et harum quidem rerum facilis est et expedita distinctio.", { position: 'top-left', size: 'fixed-m' });
-                       toasted.notify("Et harum quidem rerum facilis est et expedita distinctio.", { position: 'top-left', size: 'fixed-l' });
-                       toasted.notify("Et harum quidem rerum facilis est et expedita distinctio.", { position: 'top-left', size: 'fixed-xl' });
-                    `}
-                    </Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-
-                <h3 className="docs-page__h3">Custom</h3>
-                <p className="docs-page__paragraph"></p>
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                        <div className="docs-page__content-row">
-                            <Button text="heading" type="primary" onClick={this.showCustomHeading}></Button>
-                            <Button text="element" onClick={this.showAnotherCustomElement}></Button>
-                        </div>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>
-                        {`
-                        toasted.notify(<HeadingText heading='I have Toaster heading!' text='Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus.' />, { type: 'primary', icon: 'info-sign', position: 'bottom' });
-                        toasted.notify(
-                        <React.Fragment>
-                            <div className="sd-toast__icon"></div>
-                            <figure className="sd-toast__avatar avatar">sd</figure>
-                            <div className="sd-toast__message">
-                                <div className="sd-toast__message-header">
-                                    <h4 className="sd-toast__heading">Martin Mustermann</h4>
-                                    <time title="March 22, 2017 11:08 AM">16:50, 16.03.2019</time>
-                                </div>
-                                <p>Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
-                            </div>
-                        </React.Fragment>
-                        , { position: 'bottom-right', size: 'fixed-l' });
-                    `}
-                    </Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-
-                <h3 className="docs-page__h3">Props</h3>
-                <PropsList>
-                    <Prop
-                        name="message"
-                        isRequired={true}
-                        type="string | React.ReactNode"
-                        default="normal"
-                        description="Message value or custom message element"
-                    />
-                    <Prop
-                        name="icon"
-                        isRequired={false}
-                        type="string"
-                        default=""
-                        description="Icon class name without the icon- part."
-                    />
-                    <Prop
-                        name="type"
-                        isRequired={false}
-                        type="default | primary | success | warning | alert | highlight | light"
-                        default="default"
-                        description="Default + semantic colour variations (e.g. primary, success etc.)."
-                    />
-                    <Prop
-                        name="position"
-                        isRequired={false}
-                        type="top | bottom | top-right | top-left | bottom-right | bottom-left"
-                        default="top"
-                        description="Position of the toast"
-                    />
-                    <Prop
-                        name="size"
-                        isRequired={false}
-                        type="fixed-s | fixed-m | fixed-l | fixed-xl"
-                        default="normal"
-                        description="Specifies a different sizes of toast."
-                    />
-                    <Prop
-                        name="duration"
-                        isRequired={false}
-                        type="number | null"
-                        default="null"
-                        description="Specifies a duration time of toast."
-                    />
-                </PropsList>
-            </section>
-        );
-    }
-}

package/examples/pages/components/Togglebox.tsx

@@ -1,307 +0,0 @@
-import * as React from 'react';
-import * as Markup from '../../js/react';
-import {
-    PropsList,
-    Prop,
-    Badge,
-    Icon,
-    Label,
-    AvatarGroup,
-    ContentDivider,
-    FormLabel,
-    Text,
-} from '../../../app-typescript';
-import {ToggleBox} from './../../../app-typescript/components/ToggleBox/index';
-import {IAvatarInGroup} from '../../../app-typescript/components/avatar/avatar-group';
-
-const avatars: Array<IAvatarInGroup> = [
-    {
-        imageUrl: null,
-        initials: 'VS',
-        displayName: 'Vladimir Stefanovic',
-        icon: {name: 'text', color: 'var(--sd-colour-highlight)'},
-    },
-    {
-        imageUrl: null,
-        initials: 'JL',
-        displayName: 'Jeffrey Lebowski',
-        icon: {name: 'photo', color: 'var(--sd-colour-highlight)'},
-    },
-    {
-        imageUrl: null,
-        initials: 'WS',
-        displayName: 'Walter Sobchak',
-        icon: {name: 'video', color: 'var(--sd-colour-highlight)'},
-    },
-    {
-        imageUrl: null,
-        initials: 'ML',
-        displayName: 'Maude Lebowski',
-        icon: {name: 'file', color: 'var(--sd-colour-highlight)'},
-    },
-];
-
-const ToggleboxDocs = () => {
-    return (
-        <section className="docs-page__container">
-            <h2 className="docs-page__h2">Togglebox</h2>
-            <Markup.ReactMarkupCodePreview>
-                {`
-                    <ToggleBox variant="simple" title="togglebox title">togglebox content</ToggleBox>
-                `}
-            </Markup.ReactMarkupCodePreview>
-            <p className="docs-page__paragraph">Simple ToggleBox:</p>
-            <Markup.ReactMarkup>
-                <Markup.ReactMarkupPreview>
-                    <div style={{marginTop: '2em'}}>
-                        <ToggleBox variant="simple" title="Simple togglebox">
-                            Togglebox content
-                        </ToggleBox>
-                        <ToggleBox variant="simple" title="With badge" badge={<Badge text="2" type="primary" />}>
-                            Togglebox content
-                        </ToggleBox>
-                        <ToggleBox variant="simple" title="Togglebox - circled chevron" circledChevron={true}>
-                            Togglebox content
-                        </ToggleBox>
-                        <ToggleBox variant="simple" title="Large title" largeTitle={true} circledChevron={true}>
-                            <div className="px-4 text-sm line-height-lg">
-                                <p className="mb-2">
-                                    Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit
-                                    libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Integer
-                                    posuere erat a ante venenatis dapibus posuere velit aliquet. Curabitur blandit
-                                    tempus porttitor.
-                                </p>
-
-                                <p className="mb-2">
-                                    Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis
-                                    risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget
-                                    metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a
-                                    ante venenatis dapibus posuere velit aliquet.
-                                </p>
-
-                                <p className="">
-                                    Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur
-                                    ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Cras justo
-                                    odio, dapibus ac facilisis in, egestas eget quam.
-                                </p>
-                            </div>
-                        </ToggleBox>
-                    </div>
-                </Markup.ReactMarkupPreview>
-                <Markup.ReactMarkupCode>{`
-                    <ToggleBox variant='simple' title="Simple togglebox">Togglebox content</ToggleBox>
-                    <ToggleBox variant='simple' title="With badge" badge={<Badge text='2' type='primary' />}>Togglebox content</ToggleBox>
-                    <ToggleBox variant='simple' title="Togglebox - circled chevron" className="toggle-box--circle">Togglebox content</ToggleBox>
-                `}</Markup.ReactMarkupCode>
-            </Markup.ReactMarkup>
-
-            <p className="docs-page__paragraph">Custom header ToggleBox:</p>
-            <Markup.ReactMarkup>
-                <Markup.ReactMarkupPreview>
-                    <div style={{marginTop: '2em'}}>
-                        <ToggleBox
-                            variant="custom-header"
-                            header={
-                                <div role="listitem" className="sd-list-item sd-list-item--no-hover">
-                                    <div className="sd-list-item__border sd-list-item__border--locked"></div>
-                                    <div className="sd-list-item__column sd-list-item__column--no-border pe-0-5">
-                                        <Icon type="primary" name="calendar" scale="1.5x" ariaHidden={true} />
-                                    </div>
-                                    <div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
-                                        <div className="sd-list-item__row">
-                                            <span className="sd-list-item__slugline">Planning Slugline</span>
-                                        </div>
-                                        <div className="sd-list-item__row sd-list-item__row--overflow-visible me-1 mb-1-5">
-                                            <Label text="draft" style="translucent" />
-                                            <span className="sd-margin-s--auto">
-                                                <AvatarGroup size="x-small" items={avatars} />
-                                            </span>
-                                        </div>
-                                    </div>
-                                </div>
-                            }
-                            getToggleButtonLabel={(open) => (open ? 'show less' : 'show more')}
-                            onToggle={(isOpen) => false}
-                        >
-                            <div>
-                                <FormLabel text="Name" />
-                                <Text size="small" weight="medium">
-                                    Australian Open 2024
-                                </Text>
-                            </div>
-                            <ContentDivider type="dashed" margin="x-small" />
-                            <div>
-                                <FormLabel text="Current Date" />
-                                <Text size="small" weight="medium">
-                                    05.02.2024 @ 10:00
-                                </Text>
-                            </div>
-                            <ContentDivider type="dashed" margin="x-small" />
-                            <div>
-                                <FormLabel text="Current Repeat Summary" />
-                                <Text size="small" weight="medium">
-                                    Every 1 day(s) until CET 28 Feb 2024
-                                </Text>
-                            </div>
-                            <ContentDivider type="dashed" margin="x-small" />
-                            <div>
-                                <FormLabel text="No. of events" />
-                                <Text size="small" weight="medium">
-                                    1
-                                </Text>
-                            </div>
-                        </ToggleBox>
-                    </div>
-                </Markup.ReactMarkupPreview>
-                <Markup.ReactMarkupCode>{`
-                    <ToggleBox
-                        variant='custom-header'
-                        header={
-                            <div role="listitem" className="sd-list-item sd-list-item--no-hover">
-                                <div className="sd-list-item__border sd-list-item__border--locked"></div>
-                                <div className="sd-list-item__column sd-list-item__column--no-border pe-0-5">
-                                    <Icon type='primary' name='calendar' scale='1.5x' ariaHidden={true} />
-                                </div>
-                                <div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
-                                    <div className="sd-list-item__row">
-                                        <span className="sd-list-item__slugline">Planning Slugline</span>
-                                    </div>
-                                    <div className="sd-list-item__row sd-list-item__row--overflow-visible me-1 mb-1-5">
-                                        <Label text='draft' style='translucent'/>
-                                        <span className="sd-margin-s--auto">
-                                        <AvatarGroup
-                                            size="x-small"
-                                            items={avatars}
-                                        />
-                                        </span>
-                                    </div>
-                                </div>
-                            </div>
-                        }
-                        onToggle={() => false}
-                    >
-                        <div>
-                            <FormLabel text='Name'/>
-                            <Text size='small' weight='medium'>Australian Open 2024</Text>
-                        </div>
-                        <ContentDivider type="dashed" margin='x-small' />
-                        <div>
-                            <FormLabel text='Current Date'/>
-                            <Text size='small' weight='medium'>05.02.2024 @ 10:00</Text>
-                        </div>
-                        <ContentDivider type="dashed" margin='x-small' />
-                        <div>
-                            <FormLabel text='Current Repeat Summary'/>
-                            <Text size='small' weight='medium'>Every 1 day(s) until CET 28 Feb 2024</Text>
-                        </div>
-                        <ContentDivider type="dashed" margin='x-small' />
-                        <div>
-                            <FormLabel text='No. of events'/>
-                            <Text size='small' weight='medium'>1</Text>
-                        </div>
-                    </ToggleBox>
-                `}</Markup.ReactMarkupCode>
-            </Markup.ReactMarkup>
-
-            <h3 className="docs-page__h3">Props</h3>
-            <PropsList>
-                <Prop
-                    name="variant"
-                    isRequired={true}
-                    type="simple | custom header"
-                    default="null"
-                    description="Type of component."
-                />
-            </PropsList>
-
-            <h3 className="docs-page__h3">Props: variant: 'simple'</h3>
-            <PropsList>
-                <Prop name="title" isRequired={true} type="string" default="null" description="Togglebox title" />
-                <Prop name="badge" isRequired={false} type="JSX.Element" default="null" description="Badge" />
-                <Prop
-                    name="initiallyOpen"
-                    isRequired={false}
-                    type="boolean"
-                    default="false"
-                    description="Opens togglebox on initial render"
-                />
-                <Prop
-                    name="className"
-                    isRequired={false}
-                    type="string"
-                    default="null"
-                    description="Style class of the component"
-                />
-                <Prop
-                    name="margin"
-                    isRequired={false}
-                    type="none | small | normal | large"
-                    default="normal"
-                    description="Defines the bottom margin of the toggle box."
-                />
-                <Prop
-                    name="onOpen"
-                    isRequired={false}
-                    type="function"
-                    default="null"
-                    description="Callback on open event"
-                />
-                <Prop
-                    name="onClose"
-                    isRequired={false}
-                    type="function"
-                    default="null"
-                    description="Callback on close event"
-                />
-                <Prop
-                    name="circledChevron"
-                    isRequired={false}
-                    type="boolean"
-                    default="false"
-                    description="Adds a light, circle-shaped background around the chevron."
-                />
-                <Prop
-                    name="largeTitle"
-                    isRequired={false}
-                    type="boolean"
-                    default="false"
-                    description="This option will increase the size of the title. Always use a circled chevron (circledChevron) in combination with this option."
-                />
-            </PropsList>
-
-            <h3 className="docs-page__h3">Props: variant: 'custom-header'</h3>
-            <PropsList>
-                <Prop
-                    name="header"
-                    isRequired={true}
-                    type="JSX.Component"
-                    default="null"
-                    description="Always visible part of component."
-                />
-                <Prop
-                    name="children"
-                    isRequired={false}
-                    type="JSX.Component"
-                    default="null"
-                    description="Appear on clicking the button."
-                />
-                <Prop
-                    name="initiallyOpen"
-                    isRequired={false}
-                    type="boolean"
-                    default="false"
-                    description="Opens togglebox on initial render."
-                />
-                <Prop
-                    name="onClose"
-                    isRequired={false}
-                    type="function"
-                    default="null"
-                    description="Callback on toggle."
-                />
-            </PropsList>
-        </section>
-    );
-};
-
-export default ToggleboxDocs;

package/examples/pages/components/Tooltips.tsx

@@ -1,74 +0,0 @@
-import * as React from 'react';
-
-import * as Markup from '../../js/react';
-
-import {Tooltip, Prop, PropsList, Button} from '../../../app-typescript';
-
-export default class TooltipDoc extends React.Component {
-    render() {
-        return (
-            <section className="docs-page__container">
-                <h2 className="docs-page__h2">Tooltips</h2>
-                <Markup.ReactMarkupCodePreview>
-                    {`
-                    <Tooltip text="I'm on top" >
-                        <Button text='top' onClick={() => false} />
-                    </Tooltip>
-                `}
-                </Markup.ReactMarkupCodePreview>
-                <h3 className="docs-page__h3">Default</h3>
-                <p className="docs-page__paragraph">
-                    Chose one of 4 placement options (<code>’left’</code>, <code>’right’</code>, <code>down</code>, and{' '}
-                    <code>’top’</code>). The default value is <code>’top’</code> and will be rendered so without
-                    explicitly specifying it.
-                </p>
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                        <div className="docs-page__content-row docs-page__content-row--no-margin">
-                            <Tooltip text="I'm on top">
-                                <Button text="top" onClick={() => false} />
-                            </Tooltip>
-                            <Tooltip text="I'm at the bottom" flow="down">
-                                <Button text="bottom" onClick={() => false} />
-                            </Tooltip>
-                            <Tooltip text="I open on the left" flow="left">
-                                <Button text="left" onClick={() => false} />
-                            </Tooltip>
-                            <Tooltip text="Right on!" flow="right">
-                                <Button text="right" onClick={() => false} />
-                            </Tooltip>
-                        </div>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>
-                        {`
-                        <Tooltip text="I'm on top" >
-                            <Button text='top' onClick={() => false} />
-                        </Tooltip>
-                        <Tooltip text="I'm at the bottom" flow='down'>
-                            <Button text='bottom' onClick={() => false} />
-                        </Tooltip>
-                        <Tooltip text="I open on the left" flow='left'>
-                            <Button text='left' onClick={() => false} />
-                        </Tooltip>
-                        <Tooltip text="Right on!" flow='right'>
-                            <Button text='right' onClick={() => false} />
-                        </Tooltip>
-                    `}
-                    </Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-
-                <h3 className="docs-page__h3">Props</h3>
-                <PropsList>
-                    <Prop name="text" isRequired={true} type="string" default="/" description="Tooltip text value." />
-                    <Prop
-                        name="flow"
-                        isRequired={false}
-                        type="top | left | right | down"
-                        default="top"
-                        description="Position of tooltip text."
-                    />
-                </PropsList>
-            </section>
-        );
-    }
-}