superdesk-ui-framework 2.4.14 → 2.4.18

package/examples/pages/react/GridItem.tsx

@@ -378,26 +378,26 @@ export default class GridItemDoc extends React.Component<{}, IState> {
                 
                 <h3 className="docs-page__h3">GridItem Props</h3>
                 <PropsList>
-                    <Prop name='status' isRequered={false} type='actioning | selected | activated | string' default='/' description='Specifies the status of the item. Multiple values are possible.'/>
-                    <Prop name='itemtype' isRequered={false} type='audio | composite | file | graphic | photo | slideshow | text | video | string' default='file' description='Specifies the file type of the item.'/>
-                    <Prop name='fetched' isRequered={false} type='boolean' default='false' description='If set to true it will add a visual marker in the content area indicating that the item was fetched.'/>
-                    <Prop name='locked' isRequered={false} type='boolean' default='false' description='Visual indication if the item is locked (red border at the bottom).'/>
-                    <Prop name='onClick' isRequered={false} type='function' default='false' description='Callback fired when when the item is pressed. Should be added only if there is a click action on the whole item. Adds pointer cursor and hover action to the item if present.'/>
+                    <Prop name='status' isRequired={false} type='actioning | selected | activated | string' default='/' description='Specifies the status of the item. Multiple values are possible.'/>
+                    <Prop name='itemtype' isRequired={false} type='audio | composite | file | graphic | photo | slideshow | text | video | string' default='file' description='Specifies the file type of the item.'/>
+                    <Prop name='fetched' isRequired={false} type='boolean' default='false' description='If set to true it will add a visual marker in the content area indicating that the item was fetched.'/>
+                    <Prop name='locked' isRequired={false} type='boolean' default='false' description='Visual indication if the item is locked (red border at the bottom).'/>
+                    <Prop name='onClick' isRequired={false} type='function' default='false' description='Callback fired when when the item is pressed. Should be added only if there is a click action on the whole item. Adds pointer cursor and hover action to the item if present.'/>
                 </PropsList>
 
                 <h3 className="docs-page__h3">GridItemFooterBlock Props</h3>
                 <PropsList>
-                    <Prop name='align' isRequered={false} type='left | right' default='left' description='Sets the alignment of items inside the footer. Must be placed inside the GridItemFooter component.'/>
+                    <Prop name='align' isRequired={false} type='left | right' default='left' description='Sets the alignment of items inside the footer. Must be placed inside the GridItemFooter component.'/>
                 </PropsList>
 
                 <h3 className="docs-page__h3">GridItemFooterActions Props</h3>
                 <PropsList>
-                    <Prop name='autohide' isRequered={false} type='boolean' default='true' description='Action buttons in the footer are by default hidden and revealed only when the cursor hovers the item. Set to false to make the action buttons always visible.'/>
+                    <Prop name='autohide' isRequired={false} type='boolean' default='true' description='Action buttons in the footer are by default hidden and revealed only when the cursor hovers the item. Set to false to make the action buttons always visible.'/>
                 </PropsList>
 
                 <h3 className="docs-page__h3">GridItemTime Props</h3>
                 <PropsList>
-                    <Prop name='time' isRequered={true} type='sring' default='/' description='Sets the value of the time component.'/>
+                    <Prop name='time' isRequired={true} type='sring' default='/' description='Sets the value of the time component.'/>
                 </PropsList>
 
                 

package/examples/pages/react/GridList.tsx

@@ -95,9 +95,9 @@ export default class GridListDoc extends React.Component {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='size' isRequered={false} type='x-small | small | medium | large' default='small' description='Specifies the size of the items in the grid. '/>
-                    <Prop name='gap' isRequered={false} type='small | medium | large | x-large' default='small' description='Defines the gap between the items inside the Grid list. '/>
-                    <Prop name='margin' isRequered={false} type='0 | 1 | 2 | 3' default='3' description='Defines the margin around the Grid list. The values are based on multipliers of the the $sd-base-increment (equal to 8px). Setting the value to 3 results in a margin of 24px.'/>
+                    <Prop name='size' isRequired={false} type='x-small | small | medium | large' default='small' description='Specifies the size of the items in the grid. '/>
+                    <Prop name='gap' isRequired={false} type='small | medium | large | x-large' default='small' description='Defines the gap between the items inside the Grid list. '/>
+                    <Prop name='margin' isRequired={false} type='0 | 1 | 2 | 3' default='3' description='Defines the margin around the Grid list. The values are based on multipliers of the the $sd-base-increment (equal to 8px). Setting the value to 3 results in a margin of 24px.'/>
                 </PropsList>
 
             </section>

package/examples/pages/react/IconButtons.tsx

@@ -81,9 +81,9 @@ export default class IconButtonDoc extends React.Component {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='icon' isRequered={false} type='string' default='/' description='Icon class name without the icon- part.'/>
-                    <Prop name='ariaValue' isRequered={true} type='string' default='/' description='Description for screen readers'/>
-                    <Prop name='size' isRequered={false} type='small' default='normal' description='Creates an IconButton with a smaller footprint.'/>
+                    <Prop name='icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.'/>
+                    <Prop name='ariaValue' isRequired={true} type='string' default='/' description='Description for screen readers'/>
+                    <Prop name='size' isRequired={false} type='small' default='normal' description='Creates an IconButton with a smaller footprint.'/>
                 </PropsList>
             </section>
         )

package/examples/pages/react/IconFont.tsx

@@ -3,19 +3,20 @@ import * as Markup from "../../js/react";
 
 import { Icon, Prop, PropsList } from '../../../app-typescript';
 
+//@ts-ignore
 import * as iconFont from '../../../app/styles/_icon-font.scss';
 
-export default class IconFontDoc extends React.PureComponent{
-    render(){
+export default class IconFontDoc extends React.PureComponent {
+    render() {
         const array = iconFont.icon.split(', ');
         const icons = array.map((icon, index) =>
             <li key={index}>
-                <Icon name={icon}/>
+                <Icon name={icon} />
                 <span>{icon}</span>
             </li>
-            );
-        return(
-            <section className="docs-page__container"> 
+        );
+        return (
+            <section className="docs-page__container">
                 <h2 className="docs-page__h2 docs-page__text-align--center">Icon font</h2>
                 <Markup.ReactMarkupCodePreview>{`
                     <Icon name="photo" />
@@ -27,9 +28,9 @@ export default class IconFontDoc extends React.PureComponent{
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='name' isRequered={false} type='string' default='/' description='Icon name value.' />
-                    <Prop name='type' isRequered={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.)' />
-                    <Prop name='size' isRequered={false} type='small | big' default='small' description='Specifies a small or big size of Icon.' />
+                    <Prop name='name' isRequired={false} type='string' default='/' description='Icon name value.' />
+                    <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.)' />
+                    <Prop name='size' isRequired={false} type='small | big' default='small' description='Specifies a small or big size of Icon.' />
                 </PropsList>
             </section>);
     }

package/examples/pages/react/IconLabels.tsx

@@ -59,10 +59,10 @@ export default class IconLabelDoc extends React.Component {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='text' isRequered={true} type='string' default='/' description='IconLabel text value.'/>
-                    <Prop name='type' isRequered={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.).'/>
-                    <Prop name='icon' isRequered={false} type='string' default='/' description='Icon class name without the icon- part.'/>
-                    <Prop name='style' isRequered={false} type='basic | translucent' default='basic' description='Defines the style of the label (basic or translucent).'/>
+                    <Prop name='text' isRequired={true} type='string' default='/' description='IconLabel text value.'/>
+                    <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.).'/>
+                    <Prop name='icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.'/>
+                    <Prop name='style' isRequired={false} type='basic | translucent' default='basic' description='Defines the style of the label (basic or translucent).'/>
                 </PropsList>
             </section>
         )

package/examples/pages/react/IconPicker.tsx

@@ -0,0 +1,65 @@
+import * as React from "react";
+import * as Markup from "../../js/react";
+import { IconPicker, PropsList, Prop } from "../../../app-typescript";
+
+const IconPickerDocs = () => {
+
+    const [value, setValue] = React.useState('amp');
+
+    return (
+        <section className="docs-page__container">
+            <h2 className="docs-page__h2">Icon Picker</h2>
+            <Markup.ReactMarkupCodePreview>{`
+                    <IconPicker
+                        label="Icon"
+                        filterPlaceholder="Search..."
+                        translateFunction={(text: string): string => text}
+                        value={value}
+                        onChange={(value) => {
+                            setValue(value);
+                        }}     
+                    />
+                `}
+            </Markup.ReactMarkupCodePreview>
+            <Markup.ReactMarkup>
+                <Markup.ReactMarkupPreview>
+                    <IconPicker
+                        label="Icon"
+                        filterPlaceholder="Search..."
+                        translateFunction={(text: string): string => text}
+                        value={value}
+                        onChange={(value) => {
+                            setValue(value);
+                        }}
+                    />
+                </Markup.ReactMarkupPreview>
+                <Markup.ReactMarkupCode>{`
+                    
+                    const [value, setValue] = React.useState("amp");
+                    ...
+                    <IconPicker
+                        label="Icon"
+                        filterPlaceholder="Search..."
+                        translateFunction={(text: string): string => text}
+                        value={value}
+                        onChange={(value) => {
+                            setValue(value);
+                        }}
+                    />
+                `}</Markup.ReactMarkupCode>
+            </Markup.ReactMarkup>
+
+            <h3 className="docs-page__h3">Props</h3>
+            <PropsList>
+                <Prop name='label' isRequired={false} type='string' default='Icon' description='Select label' />
+                <Prop name='filterPlaceholder' isRequired={false} type='string' default='Search...' description='Filter placeholder' />
+                <Prop name='translateFunction' isRequired={false} type='function' default='(text) => text' description='eg: gettext' />
+                <Prop name='value' isRequired={true} type='string' default='null' description='Current value' />
+                <Prop name='onChange' isRequired={true} type='Function' default='null' description='Callback onChange event ' />
+            </PropsList>
+
+        </section>
+    )
+}
+
+export default IconPickerDocs;

package/examples/pages/react/Index.tsx

@@ -40,10 +40,15 @@ import GridListDoc from './GridList';
 import GridItemDoc from './GridItem';
 import ModalDoc from './Modal';
 import CarouselDoc from './Carousel';
+import ToggleboxDocs from './Togglebox';
+import ListItemsDoc from './ListItems';
+import SelectGridDocs from './SelectGrid';
+import IconPickerDocs from "./IconPicker";
 
 import * as Playgrounds from '../playgrounds/react-playgrounds/Index';
-import {SelectWithTemplateDocs} from './SelectWithTemplate';
-import {PopoverDoc} from './Popover';
+import { SelectWithTemplateDocs } from './SelectWithTemplate';
+import { PopoverDoc } from './Popover';
+import { MenuDocs } from './Menu';
 
 const pages = {
     basicComponents: {
@@ -96,6 +101,9 @@ const pages = {
             },
             'carousel': {
                 name: 'Carousel'
+            },
+            'menu': {
+                name: 'Menu',
             }
         }
     },
@@ -130,6 +138,12 @@ const pages = {
             'grid-list': {
                 name: 'Grid List'
             },
+            "togglebox": {
+                name: "Togglebox"
+            },
+            'list-items': {
+                name: 'List items'
+            },
         }
     },
     formComponents: {
@@ -147,6 +161,9 @@ const pages = {
             'select': {
                 name: 'Select',
             },
+            'select-grid': {
+                name: 'Select Grid',
+            },
             'select-with-template': {
                 name: 'Select with template',
             },
@@ -156,6 +173,9 @@ const pages = {
             'time-picker': {
                 name: 'Time Picker',
             },
+            'icon-picker': {
+                name: 'Icon Picker',
+            },
             'switch': {
                 name: 'Switch'
             },
@@ -221,6 +241,11 @@ class ReactDoc extends React.Component {
                         <Route path="/react/grid-item" component={GridItemDoc} />
                         <Route path="/react/modal" component={ModalDoc} />
                         <Route path="/react/carousel" component={CarouselDoc} />
+                        <Route path="/react/menu" component={MenuDocs} />
+                        <Route path="/react/togglebox" component={ToggleboxDocs} />
+                        <Route path="/react/list-items" component={ListItemsDoc} />
+                        <Route path="/react/select-grid" component={SelectGridDocs} />
+                        <Route path="/react/icon-picker" component={IconPickerDocs} />
                         <Route path="/" component={ReactDefault} />
                     </Switch>
                 </main>

package/examples/pages/react/Inputs.tsx

@@ -33,7 +33,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})}} />
@@ -45,7 +45,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
 
                             <div className='form__row'>
                                 <Input label='Input label'
-                                    value='This is some value'
+                                    value='This is the value'
                                     maxLength={30}
                                     error='This is error message'
                                     info='This is some hint message'
@@ -57,6 +57,23 @@ 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'>
+                                <Input label='Hidden input label'
+                                    value='Lorem ipsum input'
+                                    maxLength={30}
+                                    error='This is an error message'
+                                    info='This is a hint message'
+                                    inlineLabel={true}
+                                    labelHidden={true}
+                                    required={false}
+                                    disabled={false}
+                                    invalid={false}
+                                    onChange={(value) => {}} />
+                            </div>
+                        </div>
+
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         <Input label='Input label'
@@ -74,15 +91,16 @@ 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='maxLength' isRequered={false} type='number' default='/' description='Sets max length for input text'/>
-                    <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='maxLength' isRequired={false} type='number' default='/' description='Sets max length for input text'/>
+                    <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/Labels.tsx

@@ -217,12 +217,12 @@ export default class LabelsDoc extends React.Component {
                 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='text' isRequered={true} type='string' default='/' description='Label text value'/>
-                    <Prop name='type' isRequered={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.).'/>
-                    <Prop name='color' isRequered={false} type='string' default='/' description='Extended color palette from the framework (e.g. red--500);  NOTE: The label can have either a Type or Color defined, not both at the same time.'/>
-                    <Prop name='size' isRequered={false} type='small | normal | large' default='normal' description='Specifies a small, normal or large label.'/>
-                    <Prop name='noTransform' isRequered={false} type='boolean' default='false' description='Transforms text to uppercase.'/>
-                    <Prop name='style' isRequered={false} type='filled | hollow | translucent' default='filled' description='Label may have one of these styles - filled (default), hollow or translucent.'/>
+                    <Prop name='text' isRequired={true} type='string' default='/' description='Label text value'/>
+                    <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.).'/>
+                    <Prop name='color' isRequired={false} type='string' default='/' description='Extended color palette from the framework (e.g. red--500);  NOTE: The label can have either a Type or Color defined, not both at the same time.'/>
+                    <Prop name='size' isRequired={false} type='small | normal | large' default='normal' description='Specifies a small, normal or large label.'/>
+                    <Prop name='noTransform' isRequired={false} type='boolean' default='false' description='Transforms text to uppercase.'/>
+                    <Prop name='style' isRequired={false} type='filled | hollow | translucent' default='filled' description='Label may have one of these styles - filled (default), hollow or translucent.'/>
                 </PropsList>
             </section>
         )

package/examples/pages/react/LeftNavigations.tsx

@@ -40,12 +40,12 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='groups' isRequered={true} type='Array<menugroup>' default='/' description='Array of groups'/>
-                    <Prop name='activeItemId' isRequered={true} type='string' default='/' description='Id of active item'/>
-                    <Prop name='menugroup label' isRequered={true} type='string' default='/' description='Menugroup label text value.'/>
-                    <Prop name='menugroup items' isRequered={true} type='Array<menuitem>' default='/' description='Array of items'/>
-                    <Prop name='menuitem id' isRequered={true} type='string' default='/' description='Menugroup id value'/>
-                    <Prop name='menuitem label' isRequered={true} type='string' default='/' description='Menugroup label text value.'/>
+                    <Prop name='groups' isRequired={true} type='Array<menugroup>' default='/' description='Array of groups'/>
+                    <Prop name='activeItemId' isRequired={true} type='string' default='/' description='Id of active item'/>
+                    <Prop name='menugroup label' isRequired={true} type='string' default='/' description='Menugroup label text value.'/>
+                    <Prop name='menugroup items' isRequired={true} type='Array<menuitem>' default='/' description='Array of items'/>
+                    <Prop name='menuitem id' isRequired={true} type='string' default='/' description='Menugroup id value'/>
+                    <Prop name='menuitem label' isRequired={true} type='string' default='/' description='Menugroup label text value.'/>
                 </PropsList>
             </section>
         )

package/examples/pages/react/ListItems.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import * as Markup from "../../js/react";
+import { ListItemLoader, PropsList } from "../../../app-typescript";
+
+export default class ListItemsDoc extends React.Component {
+    render() {
+        return (
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">List Items</h2>
+                <Markup.ReactMarkupCodePreview>{`
+                    <ListItemLoader />
+                `}
+                </Markup.ReactMarkupCodePreview>
+                <h3 className="docs-page__h3 docs-page__h3--small-top-m">Loader type of list items</h3>
+                <p className="docs-page__paragraph">Basic layout structure for list elements. The content inside the elements serves just as an example.</p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className="docs-page__content-row">
+                            <ListItemLoader />
+                        </div>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <ListItemLoader />
+                    `}</Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+                
+                <h3 className="docs-page__h3">Props</h3>
+                <PropsList>
+
+                </PropsList>
+            </section>
+        )
+    }
+}

package/examples/pages/react/Menu.tsx

@@ -0,0 +1,159 @@
+import * as React from 'react';
+
+import * as Markup from '../../js/react';
+
+import {Button, Menu, Prop, PropsList} from '../../../app-typescript';
+import {IMenuItem} from '../../../app-typescript/components/Menu';
+
+const menuItems: Array<IMenuItem> = [
+    {
+        label: 'Edit',
+        icon: 'icon-pencil',
+        onClick: () => console.log('action: Edit'),
+    },
+    {
+        label: 'Edit in the new window',
+        icon: 'icon-pencil',
+        onClick: () => console.log('action: Edit in the new window'),
+    },
+    {
+        label: 'Translate',
+        icon: 'icon-globe',
+        children: [
+            {
+                label: 'German',
+                onClick: () => console.log('action: German'),
+            },
+            {
+                label: 'French',
+                onClick: () => console.log('action: French'),
+            },
+        ],
+    },
+    {
+        label: 'Export',
+        icon: 'icon-download',
+        disabled: true,
+        onClick: () => console.log('action: Export'),
+    },
+    {
+        label: 'Spike item',
+        icon: 'icon-trash',
+        onClick: () => console.log('action: Spike item'),
+    },
+    {separator: true},
+    {
+        label: 'Send to',
+        icon: 'icon-share-alt',
+        onClick: () => console.log('action: Send to'),
+    },
+    {
+        label: 'Export',
+        icon: 'icon-download',
+        onClick: () => console.log('action: Export'),
+    },
+    {
+        label: 'Spike item',
+        icon: 'icon-trash',
+        onClick: () => console.log('action: Spike item'),
+    },
+];
+
+export class MenuDocs extends React.Component {
+    render() {
+        return (
+            <section className='docs-page__container'>
+
+                <h2 className='docs-page__h2'>Menu</h2>
+
+                <p className='docs-page__paragraph'></p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                            <div className='form__row'>
+                                <Menu items={menuItems}>
+                                    {(toggle) => (
+                                        <Button
+                                            text="open menu"
+                                            onClick={(event) => {
+                                                toggle(event);
+                                            }}
+                                        />
+                                    )}
+                                </Menu>
+                            </div>
+                        </div>
+
+                    </Markup.ReactMarkupPreview>
+
+                    <Markup.ReactMarkupCode>{`
+                        const menuItems = [
+                            {
+                                label: 'Action 1',
+                                icon: 'icon-globe',
+                                children: [
+                                    {
+                                        label: 'Action item 2',
+                                        icon: 'icon-globe',
+                                        onClick: () => console.log('action: Action item 2'),
+                                    },
+                                ],
+                            },
+                        ];
+
+                        <Menu items={menuItems}>
+                            {(toggle) => (
+                                <Button
+                                    text="open menu"
+                                    onClick={(event) => {
+                                        toggle(event);
+                                    }}
+                                />
+                            )}
+                        </Menu>
+                    `}</Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">Props</h3>
+
+                <PropsList>
+                    <Prop name='items' isRequired={true} type='array' default='' description='Array of objects. Allowed objects are: "Menu branch", "Menu leaf" or "Divider"'/>
+
+                    <Prop
+                        name='children'
+                        isRequired={true}
+                        type='function'
+                        default=''
+                        description='Will have `toggle` function as an argument. Has to return a JSX element that will act a trigger for the menu.'
+                    />
+                </PropsList>
+
+                <p className='docs-page__paragraph'>Menu branch</p>
+                <PropsList>
+                    <Prop name='label' isRequired={true} type='string' default='' description='Name for menu group'/>
+                    <Prop name='icon' isRequired={false} type='string' default='' description='Available icons are listed in /#/react/icon-font'/>
+                    <Prop
+                        name='children'
+                        isRequired={true}
+                        type='array'
+                        default=''
+                        description='Array of objects. Allowed objects are: "Menu branch", "Menu leaf" or "Divider"'
+                    />
+                </PropsList>
+
+                <p className='docs-page__paragraph'>Menu leaf</p>
+                <PropsList>
+                    <Prop name='label' isRequired={true} type='string' default='' description='Name for menu item'/>
+                    <Prop name='icon' isRequired={false} type='string' default='' description='Available icons are listed in /#/react/icon-font'/>
+                    <Prop name='onClick' isRequired={true} type='function' default='' description=''/>
+                    <Prop name='disabled' isRequired={false} type='boolean' default='' description=''/>
+                </PropsList>
+
+                <p className='docs-page__paragraph'>Menu separator</p>
+                <PropsList>
+                    <Prop name='separator' isRequired={true} type='boolean' default='' description='Adds a separator between items.'/>
+                </PropsList>
+            </section>
+        )
+    }
+}

package/examples/pages/react/Modal.tsx

@@ -72,15 +72,15 @@ export default class ModalDoc extends React.Component<{}, IState> {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='id' isRequered={false} type='string' default='null' description='Unique identifier of the element' />
-                    <Prop name='className' isRequered={false} type='string' default='null' description='Style class of the component' />
-                    <Prop name='theme' isRequered={false} type='light | dark' default='light' description='Item style' />
-                    <Prop name='visible' isRequered={true} type='boolean' default='false' description='Specifies the visibility of the dialog' />
-                    <Prop name='headerTemplate' isRequered={false} type='element' default='null' description='Label of header' />
-                    <Prop name='footerTemplate' isRequered={false} type='element' default='null' description='Label of footer' />
-                    <Prop name='closeOnEscape' isRequered={false} type='boolean' default='null' description='An array of objects to display' />
-                    <Prop name='onShow' isRequered={false} type='function' default='null' description='Callback to invoke after modal is opened' />
-                    <Prop name='onHide' isRequered={true} type='function' default='null' description='Callback to invoke after modal is closed' />
+                    <Prop name='id' isRequired={false} type='string' default='null' description='Unique identifier of the element' />
+                    <Prop name='className' isRequired={false} type='string' default='null' description='Style class of the component' />
+                    <Prop name='theme' isRequired={false} type='light | dark' default='light' description='Item style' />
+                    <Prop name='visible' isRequired={true} type='boolean' default='false' description='Specifies the visibility of the dialog' />
+                    <Prop name='headerTemplate' isRequired={false} type='element' default='null' description='Label of header' />
+                    <Prop name='footerTemplate' isRequired={false} type='element' default='null' description='Label of footer' />
+                    <Prop name='closeOnEscape' isRequired={false} type='boolean' default='null' description='An array of objects to display' />
+                    <Prop name='onShow' isRequired={false} type='function' default='null' description='Callback to invoke after modal is opened' />
+                    <Prop name='onHide' isRequired={true} type='function' default='null' description='Callback to invoke after modal is closed' />
                 </PropsList>
             </section>
         )

package/examples/pages/react/NavButtons.tsx

@@ -59,13 +59,13 @@ export default class NavButtonsDoc extends React.Component {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='icon' isRequered={false} type='string' default='/' description='Icon class name without the icon- part.' />
-                    <Prop name='text' isRequered={false} type='string' default='/' description='Defines the value for aria-label, for screen-readers accessibility.' />
-                    <Prop name='iconSize' isRequered={false} type='small | big' default='small' description='Specifies a small or big button' />
-                    <Prop name='type' isRequered={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.).' />
-                    <Prop name='state' isRequered={false} type='normal | active' default='normal' description='Defines the optional state of the button (e.g. active)' />
-                    <Prop name='theme' isRequered={false} type='light | dark' default='light' description='Styles nav button for diffrent background.' />
-                    <Prop name='value' isRequered={false} type='button | submit | reset' default='button' description='Specifies a value of nav button' />
+                    <Prop name='icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.' />
+                    <Prop name='text' isRequired={false} type='string' default='/' description='Defines the value for aria-label, for screen-readers accessibility.' />
+                    <Prop name='iconSize' isRequired={false} type='small | big' default='small' description='Specifies a small or big button' />
+                    <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.).' />
+                    <Prop name='state' isRequired={false} type='normal | active' default='normal' description='Defines the optional state of the button (e.g. active)' />
+                    <Prop name='theme' isRequired={false} type='light | dark' default='light' description='Styles nav button for diffrent background.' />
+                    <Prop name='value' isRequired={false} type='button | submit | reset' default='button' description='Specifies a value of nav button' />
                 </PropsList>
             </section>
         );