superdesk-ui-framework 2.4.20 → 3.0.1-beta.1

package/dist/react/Tabs.tsx

@@ -1,46 +1,30 @@
 import * as React from 'react';
-
 import * as Markup from '../../js/react';
 
-import { Tab, TabList, Prop, PropsList, TabNav, TabItem } from '../../../app-typescript';
-import {TabPanel, TabContent} from '../../../app-typescript';
-import { stringify } from 'querystring';
+import { Tab, TabList, Prop, PropsList } from '../../../app-typescript';
+import {Tabs, TabLabel, TabPanel, TabContent} from '../../../app-typescript';
 
 interface IState {
-    selected: string;
-    customSelected: string;
-    alternativeWaySelected: string;
+    indexValue: number;
 }
 
 export default class TabsDoc extends React.Component<{}, IState> {
     constructor(props){
         super(props);
         this.state = {
-            selected: null,
-            customSelected: 'metadata',
-            alternativeWaySelected: null,
+            indexValue: 0
         }
         this.handleClick=this.handleClick.bind(this);
-        this.handleClick_customTab=this.handleClick_customTab.bind(this);
-        this.handleClick_alternativeWay=this.handleClick_alternativeWay.bind(this);
     }
     tabs: TabList;
 
-    handleClick = (id: string) => {
-        this.setState({
-            selected: id,
-        })
-    }
-
-    handleClick_customTab = (id: string) => {
-        this.setState({
-            customSelected: id,
-        })
+    componentDidMount() {
+        this.tabs.goTo('Content')
     }
 
-    handleClick_alternativeWay = (id: string) => {
+    handleClick = (number: number) => {
         this.setState({
-            alternativeWaySelected: id,
+            indexValue: number,
         })
     }
 
@@ -49,78 +33,32 @@ export default class TabsDoc extends React.Component<{}, IState> {
             <section className="docs-page__container">
                 <h2 className="docs-page__h2">Tabs</h2>
                 <Markup.ReactMarkupCodePreview>{`
-                    <TabList  ref={(tabs) => {
-                        this.tabs = tabs;
-                    }}
-                    tabs={[
-                        {label: 'Content', content: 'Content here.', id: 'content'},
-                        {label: 'Metadata', content: 'Metadata here', id: 'metadata'},
-                        {label: 'Duplicate', content: 'Duplicate here.', id: 'duplicate'}
-                    ]}
-                    >
+                    <TabList>
+                        <Tab label='Content'>Content here.</Tab>
+                        <Tab label='Metadata'>Metadata here.</Tab>
+                        <Tab label='Duplicates'>Duplicates here.</Tab>
                     </TabList>
                 `}
                 </Markup.ReactMarkupCodePreview>
                 <h3 className="docs-page__h3">Default tabs</h3>
-                <p className="docs-page__paragraph">To have a tab-like navigation add the <code>TabList</code> component and multiple <code>Tab</code> components inside of it, or add the appropriate attributes on <code>TabList.</code></p>
+                <p className="docs-page__paragraph">To have a tab-like navigation add the <code>TabList</code> component and multiple <code>Tab</code> components inside of it.</p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <div className='docs-page__content-row'>
-                            <TabList  ref={(tabs) => {
-                                this.tabs = tabs;
-                            }}
-                            tabs={[
-                                {label: 'Content', content: 'Content here.', id: 'content'},
-                                {label: 'Metadata', content: 'Metadata here', id: 'metadata'},
-                                {label: 'Duplicate', content: 'Duplicate here.', id: 'duplicate'}
-                            ]}
-                            >
-                                {/* <Tab label='Content' id='content' >Content here.</Tab>
-                                <Tab label='Metadata' id='metadata' >Metadata here.</Tab>
-                                <Tab label='Duplicates' id='duplicate' >Duplicates here.</Tab> */}
-                            </TabList>
-                        </div>
-                        <p className="docs-page__paragraph">// Start width custom tab.</p>
-                        <div className='docs-page__content-row'>
-                            <TabList  ref={(tabs) => {
+                            <TabList ref={(tabs) => {
                                 this.tabs = tabs;
-                            }} 
-                            selected='metadata'
-                            tabs={[
-                                {label: 'Content', content: 'Content here.', id: 'content'},
-                                {label: 'Metadata', content: 'Metadata here', id: 'metadata'},
-                                {label: 'Duplicate', content: 'Duplicate here.', id: 'duplicate'}
-                            ]}
-                            >
-                                {/* <Tab label='Content' id='content' >Content here.</Tab>
-                                <Tab label='Metadata' id='metadata' >Metadata here.</Tab>
-                                <Tab label='Duplicates' id='duplicate' >Duplicates here.</Tab> */}
+                            }}>
+                                <Tab label='Content'>Content here.</Tab>
+                                <Tab label='Metadata'>Metadata here.</Tab>
+                                <Tab label='Duplicates'>Duplicates here.</Tab>
                             </TabList>
                         </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                        <TabList  ref={(tabs) => {
-                            this.tabs = tabs;
-                        }}
-                        tabs={[
-                            {label: 'Content', content: 'Content here.', id: 'content'},
-                            {label: 'Metadata', content: 'Metadata here', id: 'metadata'},
-                            {label: 'Duplicate', content: 'Duplicate here.', id: 'duplicate'}
-                        ]}
-                        >
-                        </TabList>
-
-                        // start with custom tab (add atributte selected)
-                        <TabList  ref={(tabs) => {
-                            this.tabs = tabs;
-                        }}
-                        selected='metadata' //tabs.id
-                        tabs={[
-                            {label: 'Content', content: 'Content here.', id: 'content'},
-                            {label: 'Metadata', content: 'Metadata here', id: 'metadata'},
-                            {label: 'Duplicate', content: 'Duplicate here.', id: 'duplicate'}
-                        ]}
-                        >
+                        <TabList>
+                            <Tab label='Content'>Content here.</Tab>
+                            <Tab label='Metadata'>Metadata here.</Tab>
+                            <Tab label='Duplicates'>Duplicates here.</Tab>
                         </TabList>
                     `}
                     </Markup.ReactMarkupCode>
@@ -178,188 +116,74 @@ export default class TabsDoc extends React.Component<{}, IState> {
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
-                <h3 className="docs-page__h3">Dark tab variation</h3>
-                <p className="docs-page__paragraph">Add prop <code>theme='dark'</code> to the <code>TabList</code> component. The Dark theme also works in combination with different size values.</p>
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                        <div className='docs-page__content-row docs-page__content-row--ui-dark'>
-                            <TabList theme='dark'>
-                                <Tab label='Content'>Content here.</Tab>
-                                <Tab label='Metadata'>Metadata here.</Tab>
-                                <Tab label='Duplicates'>Duplicates here.</Tab>
-                            </TabList>
-                        </div>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
-                        <TabList theme='dark'>
-                            <Tab label='Content'>Content here.</Tab>
-                            <Tab label='Metadata'>Metadata here.</Tab>
-                            <Tab label='Duplicates'>Duplicates here.</Tab>
-                        </TabList>
-                    `}
-                    </Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-
-                <h3 className="docs-page__h3">Tabs with two components ( <code>TabNav</code> and <code> TabContent</code> ) </h3>
-                <p className="docs-page__paragraph">If you want to use on one place list of tabs and on another place content of tabs, wrap all <code>TabItem</code> with <code>TabNav</code> component and all <code>TabPanel</code> components with <code>TabContent</code>, or add the appropriate attributes on <code>TabNav</code> and <code>TabContent</code></p>
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                        <div className='docs-page__content-row'>
-                            <TabNav onClick={this.handleClick}  activePanel={this.state.selected}
-                                tabs={[
-                                        {label: 'Content', id: 'content'},
-                                        {label: 'Metadata', id: 'metadata'},
-                                        {label: 'Duplicate', id: 'duplicate'}   
-                                    ]}
-                                    >
-                            </TabNav>
-                            <TabContent activePanel={this.state.selected}
-                                tabs={[
-                                        {content: 'Content here.', id: 'content'},
-                                        {content: 'Metadata here.', id: 'metadata'},
-                                        {content: 'Duplicates here.', id: 'duplicate'}
-                                    ]}
-                                    >
-                            </TabContent>
-                        </div>
-                        <p className="docs-page__paragraph">// Start width custom tab.</p>
-                        <div className='docs-page__content-row'>
-                            <TabNav onClick={this.handleClick_customTab}  activePanel={this.state.customSelected}
-                                tabs={[
-                                        {label: 'Content', id: 'content'},
-                                        {label: 'Metadata', id: 'metadata'},
-                                        {label: 'Duplicate', id: 'duplicate'}
-                                    ]}
-                                    >
-                            </TabNav>
-                            <TabContent activePanel={this.state.customSelected}
-                                tabs={[
-                                        {content: 'Content here.', id: 'content'},
-                                        {content: 'Metadata here.', id: 'metadata'},
-                                        {content: 'Duplicates here.', id: 'duplicate'}
-                                    ]}
-                                    >
-                            </TabContent>
-                        </div>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
-                    this.state = {
-                        selected: null,
-                    }
-                    handleClick = (id: string) => {
-                        this.setState({
-                            selected: id,
-                        })
-                    }
-
-                    <TabNav onClick={this.handleClick}  activePanel={this.state.selected}
-                        tabs={[
-                                {label: 'Content', id: 'content'},
-                                {label: 'Metadata', id: 'metadata'},
-                                {label: 'Duplicate', id: 'duplicate'}   
-                            ]}
-                            >
-                    </TabNav>
-                    <TabContent activePanel={this.state.selected}
-                        tabs={[
-                                {content: 'Content here.', id: 'content'},
-                                {content: 'Metadata here.', id: 'metadata'},
-                                {content: 'Duplicates here.', id: 'duplicate'}
-                            ]}
-                            >
-                    </TabContent>
-
-                    // start with custom tab
-                    this.state = {
-                        selected: 'metadata' //tabs.id,
-                    }
-                    `}
-                    </Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-
-                <p className="docs-page__paragraph">Alternative way with children:</p>
+                <h3 className="docs-page__h3">Tabs with two components ( <code>Tabs</code> and <code> TabContent</code> ) </h3>
+                <p className="docs-page__paragraph">If you want to use on one place list of tabs and on another place content of tabs, wrap all <code>TabLabel</code> with <code>Tabs</code> component and all <code>TabPanel</code> components with <code>TabContent.</code></p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <div className='docs-page__content-row'>
-                            <TabNav onClick={this.handleClick_alternativeWay}  activePanel={this.state.alternativeWaySelected}>
-                                <TabItem id='content'>Content</TabItem>
-                                <TabItem id='metadata'>Metadata</TabItem>
-                                <TabItem id='duplicate'>Duplicate</TabItem>
-                            </TabNav>
-                            <TabContent activePanel={this.state.alternativeWaySelected}>
-                                <TabPanel id='content'>Content here.</TabPanel>
-                                <TabPanel id='metadata'>Metadata here.</TabPanel>
-                                <TabPanel id='duplicate'>Duplicates here.</TabPanel>
+                            <Tabs onClick={this.handleClick}>
+                                <TabLabel label='Content' indexValue={0}/>
+                                <TabLabel label='Metadata' indexValue={1}/>
+                                <TabLabel label='Duplicates' indexValue={2}/>
+                            </Tabs>
+                            <TabContent activePanel={this.state.indexValue}>
+                                <TabPanel indexValue={0}>
+                                    Content here.
+                                </TabPanel>
+                                <TabPanel indexValue={1}>
+                                    Metadata here.
+                                </TabPanel>
+                                <TabPanel indexValue={2}>
+                                    Duplicates here.
+                                </TabPanel>
                             </TabContent>
                         </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                    this.state = {
-                        selected: null,
-                    }
-                    handleClick = (id: string) => {
-                        this.setState({
-                            selected: id,
-                        })
+                    const [activeIndex, setActiveIndex] = React.useState(0);
+                    const handleClick = (index: number) => {
+                        setActiveIndex(index);
                     }
 
-                    <TabNav onClick={this.handleClick}  activePanel={this.state.selected}>
-                        <TabItem id='content'>Content</TabItem>
-                        <TabItem id='metadata'>Metadata</TabItem>
-                        <TabItem id='duplicate'>Duplicate</TabItem>
-                    </TabNav>
-                    <TabContent activePanel={this.state.selected}>
-                        <TabPanel id='content'>Content here.</TabPanel>
-                        <TabPanel id='metadata'>Metadata here.</TabPanel>
-                        <TabPanel id='duplicate'>Duplicates here.</TabPanel>
-                    </TabContent>
+                       <Tabs onClick={handleClick}>
+                            <TabLabel label='Content' indexValue={0}/>
+                            <TabLabel label='Metadata' indexValue={1}/>
+                            <TabLabel label='Duplicates' indexValue={2}/>
+                        </Tabs>
+                        <TabContent activePanel={activeIndex}>
+                            <TabPanel indexValue={0}>
+                                Content here.
+                            </TabPanel>
+                            <TabPanel indexValue={1}>
+                                Metadata here.
+                            </TabPanel>
+                            <TabPanel indexValue={2}>
+                                Duplicates here.
+                            </TabPanel>
+                        </TabContent>
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
                 <h3 className="docs-page__h3">Props</h3>
-                <br/>
-                <h4 className="docs-page__h4">TabList</h4>
-                <PropsList>
-                    <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='TabList selected' isRequired={false} type='string' default='/' description='Specify which tab should be pre-selected'/>
-                    <Prop name='TabList tabs' isRequired={false} type='Array<label: string, content: React.ReactNode, id: string>' default='/' description='Array of objects'/>
-                    <Prop name='Tab label' isRequired={false} type='string' default='/' description='Text value of label'/>
-                    <Prop name='Tab id' isRequired={false} type='string' default='/' description='Id value of Tab component'/>
-                    <Prop name='Tab children' isRequired={false} type='React.ReactNode' default='/' description='Children of component'/>
-                </PropsList>
-                <p className='docs-page__paragraph'>tabs: TabList</p>
                 <PropsList>
-                    <Prop name='label' isRequired={true} type='string' default='/' description='Text value of label'/>
-                    <Prop name='content' isRequired={true} type='React.ReactNode' default='/' description='React.ReactNode'/>
-                    <Prop name='id' isRequired={true} type='string' default='/' description='Id value'/>
+                    <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">TabNav and TabContent</h4>
-                <PropsList>
-                    <Prop name='TabNav size' isRequired={false} type='small | normal | large' default='normal' description='Specifies a small, normal or large button'/>
-                    <Prop name='TabNav theme' isRequired={false} type='light | dark' default='light' description='Styles tablist for diffrent background'/>
-                    <Prop name='TabNav ariaLabel' isRequired={false} type='string' default='/' description='Text value of aria-label'/>
-                    <Prop name='TabNav onClick' isRequired={true} type='function' default='/' description='Use to return value of clicked label'/>
-                    <Prop name='TabNav activePanel' isRequired={true} type='string' default='/' description='Specify which tab should be pre-selected'/>
-                    <Prop name='TabNav tabs' isRequired={false} type='Array<label: string, id: string>' default='/' description='Array of objects'/>
-                    <Prop name='TabItem id' isRequired={true} type='string' default='/' description='Id value of Tab Item'/>
-                    <Prop name='TabItem label' isRequired={true} type='string' default='/' description='Text value of Tab label'/>
-                    <Prop name='TabContent theme' isRequired={false} type='light | dark' default='light' description='Styles tablist for diffrent background'/>
-                    <Prop name='TabContent activePanel' isRequired={true} type='string' default='/' description='Specify which tab should be pre-selected'/>
-                    <Prop name='TabContent tabs' isRequired={false} type='Array<content: React.ReactNode, id: string>' default='/' description='Array of objects'/>
-                    <Prop name='TabPanel id' isRequired={true} type='string' default='/' description='Id value of Tab Panel'/>
-                </PropsList>
-                <p className='docs-page__paragraph'>tabs: TabNav</p>
-                <PropsList>
-                    <Prop name='label' isRequired={true} type='string' default='/' description='Text value of label'/>
-                    <Prop name='id' isRequired={true} type='string' default='/' description='Unique identifier to connect tab nav and tab content'/>
-                </PropsList>
-                <p className='docs-page__paragraph'>tabs: TabContent</p>
+                <h4 className="docs-page__h4">Tabs Custom</h4>
                 <PropsList>
-                    <Prop name='content' isRequired={true} type='React.ReactNode' default='/' description='React.ReactNode'/>
-                    <Prop name='id' isRequired={true} type='string' default='/' description='Unique identifier to connect tab nav and tab content'/>
+                    <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' 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/Tags.tsx

@@ -5,6 +5,7 @@ import { Tag, Prop, PropsList } from '../../../app-typescript';
 
 interface ITag{
     tags: Array<any>;
+    tags2: Array<any>;
 }
 export default class TagDoc extends React.Component<{}, ITag> {
     constructor(props){
@@ -13,12 +14,17 @@ export default class TagDoc extends React.Component<{}, ITag> {
             tags: [
                 {text: 'This is a tag'},
                 {text: 'This is another tag', shade:'darker'},
+                {text: 'Inverse tag', shade:'inverse'},
                 {text: 'Lorem ipsum', shade:'highlight1'},
                 {text: 'Dolor amet', shade:'highlight2', shape:'square'},
                 {text: 'Read only tag', readOnly: true}
             ],
+            tags2: [
+                {text: 'Tag with label', label: 'Label'},
+            ],
         }
         this.handleClick=this.handleClick.bind(this);
+        this.handleClick2=this.handleClick2.bind(this);
     }
 
     handleClick(i:number){
@@ -28,6 +34,14 @@ export default class TagDoc extends React.Component<{}, ITag> {
             tags: newTags
         });
     }
+
+    handleClick2(i:number){
+        let newTags2 = clone(this.state.tags2);
+        newTags2.splice(i, 1);
+        this.setState({
+            tags2: newTags2
+        });
+    }
     render() {
         return (
             <section className="docs-page__container"> 
@@ -57,21 +71,48 @@ export default class TagDoc extends React.Component<{}, ITag> {
                 <Markup.ReactMarkupCode>{`
                     <Tag text='This is a tag' onClick={()=>false}/>
                     <Tag text='This is a another tag' shade='darker' onClick={()=>false}/>
+                    <Tag text='Inverse tag' shade='inverse' onClick={()=>false}/>
                     <Tag text='Lorem ipsum' shade='highlight1' onClick={()=>false}/>
                     <Tag text='Dolor amet' shade='highlight2' shape='square' onClick={()=>false}/>
+                    <Tag text='Read only tag' readOnly={trye} onClick={()=>false}/>
                     
                 `}          
                 </Markup.ReactMarkupCode>
             </Markup.ReactMarkup>
 
+            <Markup.ReactMarkup>
+                <Markup.ReactMarkupPreview>
+                <div className='docs-page__content-row'>
+                    {this.state.tags2.map((tag,index)=>{
+                            return (
+                                <React.Fragment key={index}>
+                                    <Tag keyValue={index}
+                                        text={tag.text}
+                                        label={tag.label}
+                                        onClick={() => this.handleClick2(index)}/>
+                                </React.Fragment>
+                        )
+                        })}
+                </div>
+                </Markup.ReactMarkupPreview>
+                <Markup.ReactMarkupCode>{`
+                    <Tag text='Tag with label'
+                        label='Label'
+                        onClick={() => false} />
+                `}          
+                </Markup.ReactMarkupCode>
+            </Markup.ReactMarkup>
+
             <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
                     <Prop name='text' isRequired={true} type='string' default='/' description='Tag text value.'/>
-                    <Prop name='shade' isRequired={false} type='light | darker | highlight1 | highlight2' default='light' description='Shade colour of tag'/>
-                    <Prop name='shape' isRequired={false} type='round | square' default='round' description='Make shape of tag square or default round.'/>
-                    <Prop name='keyValue' isRequired={false} type='number' default='/' description='Value of tag key'/>
+                    <Prop name='shade' isRequired={false} type='light | darker | highlight1 | highlight2 | inverse' default='light' description='Shade colour of the tag.'/>
+                    <Prop name='shape' isRequired={false} type='round | square' default='round' description='Shape of tag. Round (default) or square.'/>
+                    <Prop name='readOnly' isRequired={false} type='boolean' default='false' description='Removes the option to delete the tag if set to true.'/>
+                    <Prop name='keyValue' isRequired={false} type='number' default='/' description='Value of the tag key.'/>
+                    <Prop name='label' isRequired={false} type='string' default='/' description='Text of label.'/>
                 </PropsList>
         </section>
         )
     }
-}
+}

package/dist/react/Text.tsx

@@ -0,0 +1,134 @@
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import { PropsList, Prop, Text } from '../../../app-typescript';
+
+interface IProps {
+    children?: React.ReactNode;
+}
+
+export default class TextDoc extends React.Component<IProps> {
+    render() {
+        return (
+            <section className='docs-page__container'>
+                <h2 className='docs-page__h2'>Text</h2>
+                
+                <Markup.ReactMarkupCodePreview>{`
+                    <Text>Cum sociis natoque penatibus et magnis dis parturient...</Text>
+                `}
+                </Markup.ReactMarkupCodePreview>
+
+                <p className="docs-page__paragraph">Text component.</p>
+
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <p className="docs-page__paragraph">// Sizes and alignments</p>
+                        <div className='docs-page__content-row sd-margin-b--5'>
+                            <Text size='x-small' style='italic'>
+                                Extra small size (x-small), default alignment (start), italic. Fusce dapibus, tellus ac cursus commodo,
+                                tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis
+                                ornare vel eu leo. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                            </Text>
+                        </div>
+                        <div className='docs-page__content-row sd-margin-b--5'>
+                            <Text align='end'>
+                                Default size (small), align to end. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+                                Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+                                Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus
+                                posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent
+                                commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Morbi leo
+                                risus, porta ac consectetur ac, vestibulum at eros.
+                            </Text>
+                        </div>
+                        <div className='docs-page__content-row sd-margin-b--5'>
+                            <Text size='medium' align='center'>
+                                Medium size, center aligned. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere
+                                consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus,
+                                porta ac consectetur ac, vestibulum at eros.
+                            </Text>
+                        </div>
+                        <div className='docs-page__content-row sd-margin-b--5'>
+                            <Text size='large' align='justify'>
+                                Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur
+                                est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac
+                                consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
+                                sem lacinia quam venenatis vestibulum. 
+                            </Text>
+                        </div>
+
+                        <p className="docs-page__paragraph">// Variations</p>
+                        <div className='docs-page__content-row sd-margin-b--5'>
+                            <Text weight='light' size='medium'>
+                                Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur
+                                est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac
+                                consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
+                                sem lacinia quam venenatis vestibulum. 
+                            </Text>
+                        </div>
+                        <div className='docs-page__content-row sd-margin-b--5'>
+                            <Text fontStyle='serif' weight='strong' size='medium' color='light' align='center'>
+                                Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur
+                                est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac
+                                consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
+                                sem lacinia quam venenatis vestibulum. 
+                            </Text>
+                        </div>
+                        <div className='docs-page__content-row sd-margin-b--5'>
+                            <Text fontStyle='serif' weight='light' size='small' align='start'>
+                                Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur
+                                est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac
+                                consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
+                                sem lacinia quam venenatis vestibulum. 
+                            </Text>
+                        </div>
+                        
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        // Sizes and alignments
+
+                        <Text size='x-small' style='italic'>
+                            Extra small size (x-small), default alignment (start), italic. Fusce dapibus, tellus...
+                        </Text>
+
+                        <Text align='end'>
+                            Default size (small), align to end. Praesent commodo cursus magna...
+                        </Text>
+
+                        <Text size='medium' align='center'>
+                            Medium size, center aligned. Praesent commodo cursus magna, vel scelerisque...
+                        </Text>
+
+                        <Text size='large' align='justify'>
+                            Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl...
+                        </Text>
+
+                        // Variations
+
+                        <Text weight='light' size='medium'>
+                            Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
+                        </Text>
+
+                        <Text fontStyle='serif' weight='medium' size='medium' color='light' align='center'>
+                            Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et... 
+                        </Text>
+
+                        <Text className='' fontStyle='serif' weight='medium' size='medium' color='light' align='center'>
+                            Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et... 
+                        </Text>
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">Props</h3>
+                <PropsList>
+                    <Prop name='weight' isRequired={false} type='light | normal | medium | strong' default='normal' description='Change the default font weight.'/>
+                    <Prop name='size' isRequired={true} type='x-small | small | medium | large' default='small' description='Choose between four predefined font sizes.'/>
+                    <Prop name='style' isRequired={false} type='normal | italic' default='normal' description='Change the default text style.'/>
+                    <Prop name='align' isRequired={false} type='start | end | center | justify' default='start' description='Text-align'/>
+                    <Prop name='fontStyle' isRequired={false} type='sans | serif' default='sans' description='Choose between the default – sans (Roboto) – and serif (Merriweather) font styles. '/>
+                    <Prop name='color' isRequired={false} type='normal | light | lighter' default='normal' description='Choose a different text colour. Additional two lighter shades are available.'/>
+                    <Prop name='className' isRequired={false} type='string' default='/' description='Add helper classes or custom CSS styles'/>
+                </PropsList>
+            </section>
+        )
+    }
+}

package/dist/react/Tooltips.tsx

@@ -60,7 +60,7 @@ export default class TooltipDoc extends React.Component {
                        
                         <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"}}>
+                            <div className="docs-page__content-row docs-page__content-row--no-margin">
                                 <Tooltip text="I'm appended to body" flow='top' appendToBody={true}>
                                     <Button text='top' onClick={() => false} />
                                 </Tooltip>