superdesk-ui-framework 2.4.14 → 2.4.15

package/dist/react/Selects.tsx

@@ -82,14 +82,14 @@ export default class InputsDoc extends React.Component<{}, IState> {
 
                 <h3 className='docs-page__h3'>Props</h3>
                 <PropsList>
-                    <Prop name='value' isRequered={false} type='string' default='/' description='Item value' />
-                    <Prop name='label' isRequered={false} type='string' default='/' description='Input label' />
-                    <Prop name='info' isRequered={false} type='string' default='/' description='Hint text' />
-                    <Prop name='error' isRequered={false} type='string' default='/' description='Error text' />
-                    <Prop name='inlineLabel' isRequered={false} type='boolean' default='false' description='Position labels as inline' />
-                    <Prop name='required' isRequered={false} type='boolean' default='false' description='Mark field as required' />
-                    <Prop name='disabled' isRequered={false} type='boolean' default='false' description='Mark field as disabled' />
-                    <Prop name='invalid' isRequered={false} type='boolean' default='false' description='Mark field as invalid' />
+                    <Prop name='value' isRequired={false} type='string' default='/' description='Item value' />
+                    <Prop name='label' isRequired={false} type='string' default='/' description='Input label' />
+                    <Prop name='info' isRequired={false} type='string' default='/' description='Hint text' />
+                    <Prop name='error' isRequired={false} type='string' default='/' description='Error text' />
+                    <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline' />
+                    <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required' />
+                    <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled' />
+                    <Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid' />
                 </PropsList>
             </section>
         )

package/dist/react/Switch.tsx

@@ -140,14 +140,14 @@ export default class SwitchDoc extends React.Component<{}, IState> {
                 <h3 className="docs-page__h3">Props</h3>
                 <p className="docs-page__paragraph">Switch</p>
                 <PropsList>
-                    <Prop name='label text' isRequered={true} type='string' default='/' description='Label text value.'/>
-                    <Prop name='label side' isRequered={false} type='left | right' default='right' description='Position of label relative to the button.'/>
-                    <Prop name='disabled' isRequered={false} type='boolean' default='false' description='The disabled state of t.'/>
+                    <Prop name='label text' isRequired={true} type='string' default='/' description='Label text value.'/>
+                    <Prop name='label side' isRequired={false} type='left | right' default='right' description='Position of label relative to the button.'/>
+                    <Prop name='disabled' isRequired={false} type='boolean' default='false' description='The disabled state of t.'/>
                 </PropsList>
                 <p className="docs-page__paragraph">SwitchGroup</p>
                 <PropsList>
-                    <Prop name='orientation' isRequered={false} type='vertical | horizontal' default='vertical' description='Orientation of Switch components inside the group.'/>
-                    <Prop name='align' isRequered={false} type='left | right' default='left' description='Alignment of Switch components inside the group.'/>
+                    <Prop name='orientation' isRequired={false} type='vertical | horizontal' default='vertical' description='Orientation of Switch components inside the group.'/>
+                    <Prop name='align' isRequired={false} type='left | right' default='left' description='Alignment of Switch components inside the group.'/>
                 </PropsList>
             </section>
         )

package/dist/react/Tabs.tsx

@@ -190,23 +190,23 @@ export default class TabsDoc extends React.Component<{}, IState> {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='tablist size' isRequered={false} type='small | normal | large' default='normal' description='Specifies a small, normal or large button.'/>
-                    <Prop name='tablist theme' isRequered={false} type='light | dark' default='light' description='Styles tablist for diffrent background.'/>
-                    <Prop name='tab label' isRequered={false} type='string' default='/' description='Text value of Tab label'/>
+                    <Prop name='tablist size' isRequired={false} type='small | normal | large' default='normal' description='Specifies a small, normal or large button.'/>
+                    <Prop name='tablist theme' isRequired={false} type='light | dark' default='light' description='Styles tablist for diffrent background.'/>
+                    <Prop name='tab label' isRequired={false} type='string' default='/' description='Text value of Tab label'/>
                 </PropsList>
                 <br/>
                 <h4 className="docs-page__h4">Tabs Custom</h4>
                 <PropsList>
-                    <Prop name='tabs size' isRequered={false} type='small | normal | large' default='normal' description='Specifies a small, normal or large button.'/>
-                    <Prop name='tabs theme' isRequered={false} type='light | dark' default='light' description='Styles tablist for diffrent background.'/>
-                    <Prop name='tabs ariaLabel' isRequered={false} type='string' default='/' description='Text value of aria-label'/>
-                    <Prop name='tabs onClick' isRequered={true} type='function' default='/' description='Use to return value of clicked label'/>
-                    <Prop name='tablabel indexValue' isRequered={true} type='number' default='/' description='Index value of label'/>
-                    <Prop name='tablabel label' isRequered={true} type='string' default='/' description='Text value of Tab label'/>
+                    <Prop name='tabs size' isRequired={false} type='small | normal | large' default='normal' description='Specifies a small, normal or large button.'/>
+                    <Prop name='tabs theme' isRequired={false} type='light | dark' default='light' description='Styles tablist for diffrent background.'/>
+                    <Prop name='tabs ariaLabel' isRequired={false} type='string' default='/' description='Text value of aria-label'/>
+                    <Prop name='tabs onClick' isRequired={true} type='function' default='/' description='Use to return value of clicked label'/>
+                    <Prop name='tablabel indexValue' isRequired={true} type='number' default='/' description='Index value of label'/>
+                    <Prop name='tablabel label' isRequired={true} type='string' default='/' description='Text value of Tab label'/>
 
-                    <Prop name='tabcontent theme' isRequered={false} type='light | dark' default='light' description='Styles tablist for diffrent background.'/>
-                    <Prop name='tabcontent activePanel' isRequered={true} type='number' default='/' description='Index value of active Tab'/>
-                    <Prop name='tabpanel indexValue' isRequered={true} type='number' default='/' description='Index value of Tab Panel'/>
+                    <Prop name='tabcontent theme' isRequired={false} type='light | dark' default='light' description='Styles tablist for diffrent background.'/>
+                    <Prop name='tabcontent activePanel' isRequired={true} type='number' default='/' description='Index value of active Tab'/>
+                    <Prop name='tabpanel indexValue' isRequired={true} type='number' default='/' description='Index value of Tab Panel'/>
                 </PropsList>
             </section>
         )

package/dist/react/TimePicker.tsx

@@ -67,14 +67,14 @@ export default class TimePickerDoc extends React.Component {
 
                 <h3 className='docs-page__h3'>Props</h3>
                 <PropsList>
-                    <Prop name='value' isRequered={true} type='string' default='/' description='Item value' />
-                    <Prop name='required' isRequered={false} type='boolean' default='false' description='Mark field as required' />
-                    <Prop name='disabled' isRequered={false} type='boolean' default='false' description='Mark field as disabled' />
+                    <Prop name='value' isRequired={true} type='string' default='/' description='Item value' />
+                    <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required' />
+                    <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled' />
                 </PropsList>
 
                 <h3 className='docs-page__h3'>Events</h3>
                 <PropsList>
-                    <Prop name='onChange' isRequered={true} type='function' default='/' description='Returns value of time input' />
+                    <Prop name='onChange' isRequired={true} type='function' default='/' description='Returns value of time input' />
                 </PropsList>
             </section>
         );

package/dist/react/Toasts.tsx

@@ -2,62 +2,60 @@ import * as React from 'react';
 
 import * as Markup from '../../js/react';
 import { HeadingText, Button, Prop, PropsList } from '../../../app-typescript';
-import { Toasted } from '../../../app-typescript/components/Toast';
+import { toasted } from '../../../app-typescript';
 
 export default class ToastsDoc extends React.Component {
-    private toast = new Toasted();
-
     // default
     showDefault = () => {
-        this.toast.notify("I'm a tasty default Toast message!", {});
+        toasted.notify("I'm a tasty default Toast message!", {position: 'top'});
     }
 
     // all positions
     showAll = () => {
-        this.toast.notify('Position top', { position: 'top' });
-        this.toast.notify('Position top-left', { position: 'top-left' });
-        this.toast.notify('Position top-right', { position: 'top-right' });
-        this.toast.notify('Position bottom', { position: 'bottom' });
-        this.toast.notify('Position bottom-left', { position: 'bottom-left' });
-        this.toast.notify('Position bottom-right', { position: 'bottom-right' });
+        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 = () => {
-        this.toast.notify("Curabitur blandit tempus porttitor.", { duration: 3000 });
+        toasted.notify("Curabitur blandit tempus porttitor.", { duration: 3000 });
     }
     showNull = () => {
-        this.toast.notify("Curabitur blandit tempus porttitor.", {});
+        toasted.notify("Curabitur blandit tempus porttitor.", {});
     }
 
     // coloring and icon
     showSuccess = () => {
-        this.toast.notify("I'm a tasty default Toast message!", { type: 'success', icon: 'ok'});
+        toasted.notify("I'm a tasty default Toast message!", { type: 'success', icon: 'ok'});
     }
     showAlert = () => {
-        this.toast.notify("Danger! Condimentum ridiculus ultricies ornare mollis.", { type: 'alert', icon: 'exclamation-sign', position: 'bottom'});
+        toasted.notify("Danger! Condimentum ridiculus ultricies ornare mollis.", { type: 'alert', icon: 'exclamation-sign', position: 'bottom'});
     }
 
     // size
     showSizeS = () => {
-        this.toast.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-s' });
     }
     showSizeM = () => {
-        this.toast.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-m' });
     }
     showSizeL = () => {
-        this.toast.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-l' });
     }
     showSizeXL = () => {
-        this.toast.notify("Et harum quidem rerum facilis est et expedita distinctio.", { position: 'top-left', size: 'fixed-xl' });
+        toasted.notify("Et harum quidem rerum facilis est et expedita distinctio.", { position: 'top-left', size: 'fixed-xl' });
     }
 
     // custom element
     showCustomHeading = () => {
-        this.toast.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(<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 = () => {
-        this.toast.notify(
+        toasted.notify(
         <React.Fragment>
             <div className="sd-toast__icon"></div>
                 <figure className="sd-toast__avatar avatar">sd</figure>
@@ -77,9 +75,9 @@ export default class ToastsDoc extends React.Component {
             <section className="docs-page__container">
                 <h2 className="docs-page__h2">Toasts</h2>
                 <Markup.ReactMarkupCodePreview>{`
-                    const toast = new Toasted();
+                   import {toasted} from 'superdesk-ui-framework/react';
 
-                   toast.notify("I'm a tasty default Toast message!", {});
+                   toasted.notify("I'm a tasty default Toast message!", {});
                 `}
                 </Markup.ReactMarkupCodePreview>
                 
@@ -93,16 +91,14 @@ export default class ToastsDoc extends React.Component {
                     </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                        const toast = new Toasted();
-
-                        toast.notify("I'm a tasty default Toast message!", {});
-
-                        toast.notify('Position top', { position: 'top' });
-                        toast.notify('Position top-left', { position: 'top-left' });
-                        toast.notify('Position top-right', { position: 'top-right' });
-                        toast.notify('Position bottom', { position: 'bottom' });
-                        toast.notify('Position bottom-left', { position: 'bottom-left' });
-                        toast.notify('Position bottom-right', { position: 'bottom-right' });
+                        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>
@@ -118,10 +114,8 @@ export default class ToastsDoc extends React.Component {
                     </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                        const toast = new Toasted();
-
-                        toast.notify("Curabitur blandit tempus porttitor.", { duration: 3000 });
-                        toast.notify("Curabitur blandit tempus porttitor.", {});
+                        toasted.notify("Curabitur blandit tempus porttitor.", { duration: 3000 });
+                        toasted.notify("Curabitur blandit tempus porttitor.", {});
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
@@ -138,10 +132,8 @@ export default class ToastsDoc extends React.Component {
                     </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                        const toast = new Toasted();
-
-                        toast.notify("I'm a tasty default Toast message!", { type: 'success', icon: 'ok'});
-                        toast.notify("Danger! Condimentum ridiculus ultricies ornare mollis.", { type: 'alert', icon: 'exclamation-sign', position: 'bottom'});
+                        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>
@@ -158,12 +150,10 @@ export default class ToastsDoc extends React.Component {
                     </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                        const toast = new Toasted();
-
-                       toast.notify("Et harum quidem rerum facilis est et expedita distinctio.", { position: 'top-left', size: 'fixed-s' });
-                       toast.notify("Et harum quidem rerum facilis est et expedita distinctio.", { position: 'top-left', size: 'fixed-m' });
-                       toast.notify("Et harum quidem rerum facilis est et expedita distinctio.", { position: 'top-left', size: 'fixed-l' });
-                       toast.notify("Et harum quidem rerum facilis est et expedita distinctio.", { position: 'top-left', size: 'fixed-xl' });
+                       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>
@@ -178,10 +168,8 @@ export default class ToastsDoc extends React.Component {
                     </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                        const toast = new Toasted();
-
-                        toast.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' });
-                        toast.notify(
+                        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>
@@ -200,12 +188,12 @@ export default class ToastsDoc extends React.Component {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='message' isRequered={true} type='string | React.ReactNode' default='normal' description='Message value or custom message element'/>
-                    <Prop name='icon' isRequered={false} type='string' default='' description='Icon class name without the icon- part.'/>
-                    <Prop name='type' isRequered={false} type='default | primary | success | warning | alert | highlight | light' default='default' description='Default + semantic colour variations (e.g. primary, success etc.).'/>
-                    <Prop name='position' isRequered={false} type='top | bottom | top-right | top-left | bottom-right | bottom-left' default='top' description='Position of the toast'/>
-                    <Prop name='size' isRequered={false} type='fixed-s | fixed-m | fixed-l | fixed-xl' default='normal' description='Specifies a different sizes of toast.'/>
-                    <Prop name='duration' isRequered={false} type='number | null' default='null' description='Specifies a duration time of toast.'/>
+                    <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/dist/react/Togglebox.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+import * as Markup from "../../js/react";
+import { ToggleBox, PropsList, Prop, Button, Badge } from "../../../app-typescript";
+
+const ToggleboxDocs = () => {
+    const toggleRef = React.useRef();
+
+    return (
+        <section className="docs-page__container">
+            <h2 className="docs-page__h2">Togglebox</h2>
+            <p className="docs-page__paragraph">Simple toggle box element. It provides toggle() function that can be used with React's ref functionality and control close/open state from outside. Arrow left, Arrow right and Enter are supported keyboard events.</p>
+            <Markup.ReactMarkupCodePreview>{`
+                    <ToggleBox title="togglebox title">togglebox content</ToggleBox>
+                `}
+            </Markup.ReactMarkupCodePreview>
+            <Markup.ReactMarkup>
+                <Markup.ReactMarkupPreview>
+                    <Button text="Toggle programatically" onClick={() => { toggleRef.current.toggle() }} />
+                    <div style={{ marginTop: "2em" }}>
+                        <ToggleBox title="Simple togglebox" ref={toggleRef} initiallyOpen={true}>Togglebox content</ToggleBox>
+                        <ToggleBox title="With badge" badge={<Badge text='2' type='primary' />}>Togglebox content</ToggleBox>
+                        <ToggleBox title="With different badge" badge={<Badge text='!' type='alert' shape='square' />}>Togglebox content</ToggleBox>
+                        <ToggleBox title="Togglebox - circled chevron" className="toggle-box--circle">Togglebox content</ToggleBox>
+                    </div>
+                </Markup.ReactMarkupPreview>
+                <Markup.ReactMarkupCode>{`
+                    <Button text="Toggle programatically" onClick={() => { toggleRef.current.toggle() }} />
+                   
+                    <ToggleBox title="Simple togglebox" ref={toggleRef} initiallyOpen={true}>Togglebox content</ToggleBox>
+                    <ToggleBox title="With badge" badge={<Badge text='2' type='primary' />}>Togglebox content</ToggleBox>
+                    <ToggleBox title="With different badge" badge={<Badge text='!' type='alert' shape='square' />}>Togglebox content</ToggleBox>
+                    <ToggleBox title="Togglebox - circled chevron" className="toggle-box--circle">Togglebox content</ToggleBox>
+                `}</Markup.ReactMarkupCode>
+            </Markup.ReactMarkup>
+
+            <h3 className="docs-page__h3">Props</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='hideUsingCSS' isRequired={false} type='boolean' default='false' description='Usefull when working with forms. Content of togglebox will be hidden but remain rendered.' />
+                <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='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' />
+            </PropsList>
+        </section>
+    )
+}
+
+
+export default ToggleboxDocs;

package/dist/react/Tooltips.tsx

@@ -15,7 +15,8 @@ export default class TooltipDoc extends React.Component {
                     </Tooltip>
                 `}
                 </Markup.ReactMarkupCodePreview>
-                <p className="docs-page__paragraph">Chose one of 4 placement options (<code>’left’</code>, <code>’right’</code>, <code>’bottom’</code>, and <code>’top’</code>). The default value is <code>’top’</code> and will be rendered so without explicitly specifying it.</p>
+                <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">
@@ -30,7 +31,7 @@ export default class TooltipDoc extends React.Component {
                             </Tooltip>
                             <Tooltip text="Right on!" flow='right'>
                                 <Button text='right' onClick={() => false} />
-                            </Tooltip>
+                            </Tooltip>   
                         </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
@@ -50,10 +51,53 @@ export default class TooltipDoc extends React.Component {
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
+                <h3 className="docs-page__h3">Appended to body</h3>
+                <p className="docs-page__paragraph">
+                    Appends tooltip element to body therefore avoids overflow issues. For performance reasons don't use it if not necessary.
+                </p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                       
+                        <div className="docs-page__content-row docs-page__content-row--no-margin">
+                            
+                            <div className="docs-page__content-row docs-page__content-row--no-margin" style={{background: "#ebebeb", width: "100%", padding: "5px", overflow: "hidden"}}>
+                                <Tooltip text="I'm appended to body" flow='top' appendToBody={true}>
+                                    <Button text='top' onClick={() => false} />
+                                </Tooltip>
+                                <Tooltip text="I'm appended to body" flow='down' appendToBody={true}>
+                                    <Button text='Down' onClick={() => false} />
+                                </Tooltip>
+                                <Tooltip text="I'm appended to body" flow='left' appendToBody={true}>
+                                    <Button text='left' onClick={() => false} />
+                                </Tooltip>
+                                <Tooltip text="I'm appended to body" flow='right' appendToBody={true}>
+                                    <Button text='right' onClick={() => false} />
+                                </Tooltip>
+                            </div>
+                        </div>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <Tooltip text="I'm appended to body" flow='top' appendToBody={true}>
+                                    <Button text='top' onClick={() => false} />
+                                </Tooltip>
+                                <Tooltip text="I'm appended to body" flow='down' appendToBody={true}>
+                                    <Button text='Down' onClick={() => false} />
+                                </Tooltip>
+                                <Tooltip text="I'm appended to body" flow='left' appendToBody={true}>
+                                    <Button text='left' onClick={() => false} />
+                                </Tooltip>
+                                <Tooltip text="I'm appended to body" flow='right' appendToBody={true}>
+                                    <Button text='right' onClick={() => false} />
+                                </Tooltip>
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='text' isRequered={true} type='string' default='/' description='Tooltip text value.' />
-                    <Prop name='flow' isRequered={false} type='top | left | right | down' default='top' description='Position of tooltip text.' />
+                    <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.' />
+                    <Prop name='appendToBody' isRequired={false} type='boolean' default='false' description='Appends element to body therefore avoids overflow issues.' />
                 </PropsList>
             </section>
         )