superdesk-ui-framework 2.4.14 → 2.4.18

package/examples/pages/react/Popover.tsx

@@ -59,13 +59,13 @@ export class PopoverDoc extends React.Component {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='title' isRequered={true} type='string' default='null' description='Title of the popover component.' />
-                    <Prop name='triggerSelector' isRequered={true} type='string' default='null' description='ID selector for an element that will be used to toggle the popover.' />
-                    <Prop name='displayCloseButton' isRequered={false} type='boolean' default='true' description='Show or hide the close button.' />
-                    <Prop name='placement' isRequered={false}
+                    <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.' />
-                    <Prop name='zIndex' isRequered={false} type='number' default='null' description='Defines the z-index of the Popover.' />
+                    <Prop name='zIndex' isRequired={false} type='number' default='null' description='Defines the z-index of the Popover.' />
                 </PropsList>
             </section>
         )

package/examples/pages/react/Radios.tsx

@@ -5,14 +5,14 @@ import * as Components from '../playgrounds/react-playgrounds/components/Index';
 import { Radio, RadioButton, CheckGroup, CheckButtonGroup, Alert, Prop, PropsList } from '../../../app-typescript';
 
 interface IState {
-    value1: any;
-    value2: any;
-    value3: any;
-    value4: any;
-    value5: any;
-    value6: any;
-    value7: any;
-    value8: any;
+    value1?: string;
+    value2?: string;
+    value3?: string;
+    value4?: string;
+    value5?: string;
+    value6?: string;
+    value7?: string;
+    value8?: string;
 }
 
 export default class RadiosDoc extends React.Component<{}, IState> {
@@ -20,14 +20,14 @@ export default class RadiosDoc extends React.Component<{}, IState> {
         super(props);
 
         this.state = {
-            value1: true,
-            value2: true,
-            value3: true,
-            value4: true,
-            value5: true,
-            value6: true,
-            value7: true,
-            value8: true,
+            value1: undefined,
+            value2: undefined,
+            value3: undefined,
+            value4: undefined,
+            value5: undefined,
+            value6: undefined,
+            value7: undefined,
+            value8: undefined,
         };
     }
     render() {
@@ -368,22 +368,22 @@ export default class RadiosDoc extends React.Component<{}, IState> {
                 <h3 className="docs-page__h3">Props</h3>
                 <p className="docs-page__paragraph">Radio</p>
                 <PropsList>
-                    <Prop name='value' isRequered={true} type='T' default='/' description='The value of the checked button.'/>
-                    <Prop name='options' isRequered={true} type='Array' default='/' description='Array of Radio options.'/>
-                    <Prop name='options label' isRequered={true} type='string' default='/' description='Label text value for Radio.'/>
-                    <Prop name='options value' isRequered={true} type='T' default='/' description='Value of the Radio.'/>
-                    <Prop name='options disabled' isRequered={false} type='boolean' default='false' description='Disables the Radio, preventing mouse events.'/>
-                    <Prop name='labelSide' isRequered={false} type='left | right' default='right' description='Position of label relative to the button.'/>
+                    <Prop name='value' isRequired={true} type='T' default='/' description='The value of the checked button.'/>
+                    <Prop name='options' isRequired={true} type='Array' default='/' description='Array of Radio options.'/>
+                    <Prop name='options label' isRequired={true} type='string' default='/' description='Label text value for Radio.'/>
+                    <Prop name='options value' isRequired={true} type='T' default='/' description='Value of the Radio.'/>
+                    <Prop name='options disabled' isRequired={false} type='boolean' default='false' description='Disables the Radio, preventing mouse events.'/>
+                    <Prop name='labelSide' isRequired={false} type='left | right' default='right' description='Position of label relative to the button.'/>
                 </PropsList>
                 <p className="docs-page__paragraph">Radio Button</p>
                 <PropsList>
-                    <Prop name='value' isRequered={true} type='any' default='/' description='The value of the checked button.'/>
-                    <Prop name='options' isRequered={true} type='Array<option>' default='/' description='Array of RadioButton options.'/>
-                    <Prop name='option label' isRequered={true} type='string' default='/' description='Label text value for RadioButton.'/>
-                    <Prop name='option value' isRequered={true} type='any' default='/' description='Value of the Radio.'/>
-                    <Prop name='option disabled' isRequered={false} type='boolean' default='false' description='Disables the Radio, preventing mouse events.'/>
-                    <Prop name='option labelHidden' isRequered={false} type='boolean' default='false' description='Hides visually the label and adds an aria-label for screen-reader support.'/>
-                    <Prop name='option icon' isRequered={false} type='string' default='/' description='Icon class name without the icon- part.'/>
+                    <Prop name='value' isRequired={true} type='any' default='/' description='The value of the checked button.'/>
+                    <Prop name='options' isRequired={true} type='Array<option>' default='/' description='Array of RadioButton options.'/>
+                    <Prop name='option label' isRequired={true} type='string' default='/' description='Label text value for RadioButton.'/>
+                    <Prop name='option value' isRequired={true} type='any' default='/' description='Value of the Radio.'/>
+                    <Prop name='option disabled' isRequired={false} type='boolean' default='false' description='Disables the Radio, preventing mouse events.'/>
+                    <Prop name='option labelHidden' isRequired={false} type='boolean' default='false' description='Hides visually the label and adds an aria-label for screen-reader support.'/>
+                    <Prop name='option icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.'/>
                 </PropsList>
             </section>
         )

package/examples/pages/react/SelectGrid.tsx

@@ -0,0 +1,121 @@
+import * as React from "react";
+import * as Markup from "../../js/react";
+import { SelectGrid, Alert, PropsList, Prop } from "../../../app-typescript";
+
+const SelectGridDocs = () => {
+    const letters = [
+        { value: 'A', label: 'A' },
+        { value: 'B', label: 'B' },
+        { value: 'C', label: 'C' },
+        { value: 'D', label: 'D' },
+        { value: 'E', label: 'E' },
+        { value: 'F', label: 'F' },
+        { value: 'G', label: 'G' },
+        { value: 'H', label: 'H' },
+        { value: 'K', label: 'K' },
+        { value: 'L', label: 'L' },
+        { value: 'M', label: 'M' },
+        { value: 'N', label: 'N' },
+        { value: 'O', label: 'O' },
+        { value: 'P', label: 'P' },
+        { value: 'R', label: 'R' },
+        { value: 'S', label: 'S' },
+        { value: 'T', label: 'T' },
+        { value: 'U', label: 'U' }
+    ];
+
+    const [selectedItem, setSelectedItem] = React.useState(letters[0]);
+
+    return (
+        <section className="docs-page__container">
+            <h2 className="docs-page__h2">Select Grid</h2>
+            <p className="docs-page__paragraph">Universal select component with grid display of items. You can define your own trigger and item template.</p>
+            <p className="docs-page__paragraph">IconPicker is built on top of it.</p>
+            <Markup.ReactMarkupCodePreview>{`
+                    <SelectGrid
+                        label="Label"
+                        filterPlaceholder="Search..."
+                        getItems={(searchString) => {
+                            return new Promise((resolve) => {
+                                resolve([{ value: 'value', label: 'Label' }]);
+                            });
+                        }}
+                        onChange={(value) => { }}
+                        itemTemplate={({ item }) => <div />}
+                        triggerTemplate={() => <button />}
+                    />
+                `}
+            </Markup.ReactMarkupCodePreview>
+            <Markup.ReactMarkup>
+                <Markup.ReactMarkupPreview>
+                    <SelectGrid
+                        label="Letter"
+                        filterPlaceholder="Search..."
+                        getItems={(searchString) => {
+                            return new Promise((resolve) => {
+                                if (searchString == null) {
+                                    resolve(letters);
+                                } else {
+                                    resolve(letters.filter(({ label }) => label.toLocaleLowerCase().includes(searchString.toLocaleLowerCase())));
+                                }
+                            });
+                        }}
+                        onChange={(value) => {
+                            setSelectedItem(value);
+                        }}
+                        itemTemplate={({ item }) => <div style={{ fontSize: '20px' }}>{item.label}</div>}
+                        triggerTemplate={({ onClick }) => <button className="btn" onClick={onClick}>{selectedItem.label}</button>}
+
+                    />
+                </Markup.ReactMarkupPreview>
+                <Markup.ReactMarkupCode>{`
+                    const letters = [
+                        { value: 'A', label: 'A' },
+                        { value: 'B', label: 'B' },
+                        { value: 'C', label: 'C' },
+                        ...
+                    ];
+
+                    const [selectedItem, setSelectedItem] = React.useState(letters[0]);
+                    ...
+                    <SelectGrid
+                        label="Letter"
+                        filterPlaceholder="Search..."
+                        getItems={(searchString) => {
+                            return new Promise((resolve) => {
+                                if (searchString == null) {
+                                    resolve(letters);
+                                } else {
+                                    resolve(letters.filter(({ label }) => label.toLocaleLowerCase().includes(searchString.toLocaleLowerCase())));
+                                }
+                            });
+                        }}
+                        onChange={(value) => {
+                            setSelectedItem(value);
+                        }}
+                        itemTemplate={({ item }) => <div style={{ fontSize: '20px' }}>{item.label}</div>}
+                        triggerTemplate={({ onClick }) => <button className="btn" onClick={onClick}>{selectedItem.label}</button>}
+
+                    />
+                `}</Markup.ReactMarkupCode>
+            </Markup.ReactMarkup>
+
+            <h3 className="docs-page__h3">Props</h3>
+            <PropsList>
+                <Prop name='label' isRequired={true} type='string' default='null' description='Select label' />
+                <Prop name='filterPlaceholder' isRequired={false} type='string' default='Search...' description='Filter placeholder' />
+                <Prop name='getItems' isRequired={true} type='function' default='false' description='Callback function that should return promise which resolves with array of items' />
+                <Prop name='onChange' isRequired={true} type='function' default='false' description='Callback on change event' />
+                <Prop name='itemTemplate' isRequired={true} type='Component' default='null' description='item renderer' />
+                <Prop name='triggerTemplate' isRequired={true} type='Component' default='null' description='trigger button renderer' />
+            </PropsList>
+            <Alert style='hollow' size='normal' type='alert' restoreIcon='info'>
+                1. triggerTemplate should include &#x3C;button /&#x3E; with onClick event. Otherwise keyboard controls won't work. <br />
+                2. Item should be an object with at least label and value.
+            </Alert>
+        </section>
+    )
+}
+
+
+export default SelectGridDocs;

package/examples/pages/react/Selects.tsx

@@ -37,7 +37,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
                 <p className='docs-page__paragraph'></p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                        <div className='docs-page__content-row'>
                             <div className='form__row'>
                                 <CheckGroup>
                                     <Checkbox checked={this.state.required} label={{ text: 'Required input' }} onChange={(value) => { this.setState({ required: value }) }} />
@@ -63,6 +63,27 @@ export default class InputsDoc extends React.Component<{}, IState> {
                             </div>
                         </div>
 
+                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                            <p className="docs-page__paragraph">// Hidden label</p>
+                            <div className='form__row'>
+                                <Select label='Hidden select label'
+                                    value='Option 1'
+                                    error='Error message'
+                                    info='This is a hint message'
+                                    inlineLabel={true}
+                                    labelHidden={true}
+                                    required={false}
+                                    disabled={false}
+                                    invalid={this.state.invalid}
+                                    onChange={(value) => { console.log(value) }}>
+                                    <Option>Option 1</Option>
+                                    <Option>Option 2</Option>
+                                    <Option>Option 3</Option>
+                                    <Option>Option 4</Option>
+                                </Select>
+                            </div>
+                        </div>
+
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         <Select label='Select label'
@@ -82,14 +103,15 @@ 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='labelHidden' isRequired={false} type='boolean' default='false' description='Hide the label. The label will still be accessible to screen-readers.'/>
+                    <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/examples/pages/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/examples/pages/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/examples/pages/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/examples/pages/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>
         )