superdesk-ui-framework 4.0.47 → 4.0.49

package/dist/components/Tabs.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as Markup from '../../js/react';
 
-import { Tab, TabList, Prop, PropsList } from '../../../app-typescript';
+import {Tab, TabList, Prop, PropsList} from '../../../app-typescript';
 import {Tabs, TabLabel, TabPanel, TabContent} from '../../../app-typescript';
 
 interface IState {
@@ -9,30 +9,31 @@ interface IState {
 }
 
 export default class TabsDoc extends React.Component<{}, IState> {
-    constructor(props){
+    constructor(props) {
         super(props);
         this.state = {
-            indexValue: 0
-        }
-        this.handleClick=this.handleClick.bind(this);
+            indexValue: 0,
+        };
+        this.handleClick = this.handleClick.bind(this);
     }
     tabs: TabList;
 
     componentDidMount() {
-        this.tabs.goTo('Content')
+        this.tabs.goTo('Content');
     }
 
     handleClick = (number: number) => {
         this.setState({
             indexValue: number,
-        })
-    }
+        });
+    };
 
     render() {
         return (
             <section className="docs-page__container">
                 <h2 className="docs-page__h2">Tabs</h2>
-                <Markup.ReactMarkupCodePreview>{`
+                <Markup.ReactMarkupCodePreview>
+                    {`
                     <TabList>
                         <Tab label='Content'>Content here.</Tab>
                         <Tab label='Metadata'>Metadata here.</Tab>
@@ -41,20 +42,26 @@ export default class TabsDoc extends React.Component<{}, IState> {
                 `}
                 </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.</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;
-                            }}>
-                                <Tab label='Content'>Content here.</Tab>
-                                <Tab label='Metadata'>Metadata here.</Tab>
-                                <Tab label='Duplicates'>Duplicates here.</Tab>
+                        <div className="docs-page__content-row">
+                            <TabList
+                                ref={(tabs) => {
+                                    this.tabs = tabs;
+                                }}
+                            >
+                                <Tab label="Content">Content here.</Tab>
+                                <Tab label="Metadata">Metadata here.</Tab>
+                                <Tab label="Duplicates">Duplicates here.</Tab>
                             </TabList>
                         </div>
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         <TabList>
                             <Tab label='Content'>Content here.</Tab>
                             <Tab label='Metadata'>Metadata here.</Tab>
@@ -65,35 +72,40 @@ export default class TabsDoc extends React.Component<{}, IState> {
                 </Markup.ReactMarkup>
 
                 <h3 className="docs-page__h3">Sizes</h3>
-                <p className="docs-page__paragraph">Tabs come in three different sizes – normal, small and large. Add prop <code>size='large'</code> to the <code>TabList</code> component to create large tabs or <code>size='small'</code> for small ones. The default (normal) size doesn't need the <code>size</code> prop to be specified.</p>
+                <p className="docs-page__paragraph">
+                    Tabs come in three different sizes – normal, small and large. Add prop <code>size='large'</code> to
+                    the <code>TabList</code> component to create large tabs or <code>size='small'</code> for small ones.
+                    The default (normal) size doesn't need the <code>size</code> prop to be specified.
+                </p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <div className='docs-page__content-row'>
+                        <div className="docs-page__content-row">
                             <p className="docs-page__paragraph">// Normal tabs (default)</p>
                             <TabList>
-                                <Tab label='Content'>Content here.</Tab>
-                                <Tab label='Metadata'>Metadata here.</Tab>
-                                <Tab label='Duplicates'>Duplicates here.</Tab>
+                                <Tab label="Content">Content here.</Tab>
+                                <Tab label="Metadata">Metadata here.</Tab>
+                                <Tab label="Duplicates">Duplicates here.</Tab>
                             </TabList>
                         </div>
-                        <div className='docs-page__content-row'>
+                        <div className="docs-page__content-row">
                             <p className="docs-page__paragraph">// Small tabs</p>
-                            <TabList size='small'>
-                                <Tab label='Content'>Content here.</Tab>
-                                <Tab label='Metadata'>Metadata here.</Tab>
-                                <Tab label='Duplicates'>Duplicates here.</Tab>
+                            <TabList size="small">
+                                <Tab label="Content">Content here.</Tab>
+                                <Tab label="Metadata">Metadata here.</Tab>
+                                <Tab label="Duplicates">Duplicates here.</Tab>
                             </TabList>
                         </div>
-                        <div className='docs-page__content-row'>
+                        <div className="docs-page__content-row">
                             <p className="docs-page__paragraph">// Large tabs</p>
-                            <TabList size='large'>
-                                <Tab label='Content'>Content here.</Tab>
-                                <Tab label='Metadata'>Metadata here.</Tab>
-                                <Tab label='Duplicates'>Duplicates here.</Tab>
+                            <TabList size="large">
+                                <Tab label="Content">Content here.</Tab>
+                                <Tab label="Metadata">Metadata here.</Tab>
+                                <Tab label="Duplicates">Duplicates here.</Tab>
                             </TabList>
                         </div>
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         // Normal tabs (default)
                         <TabList>
                             <Tab label='Content'>Content here.</Tab>
@@ -116,30 +128,31 @@ export default class TabsDoc extends React.Component<{}, IState> {
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
-                <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>
+                <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'>
+                        <div className="docs-page__content-row">
                             <Tabs onClick={this.handleClick}>
-                                <TabLabel label='Content' indexValue={0}/>
-                                <TabLabel label='Metadata' indexValue={1}/>
-                                <TabLabel label='Duplicates' indexValue={2}/>
+                                <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>
+                                <TabPanel indexValue={0}>Content here.</TabPanel>
+                                <TabPanel indexValue={1}>Metadata here.</TabPanel>
+                                <TabPanel indexValue={2}>Duplicates here.</TabPanel>
                             </TabContent>
                         </div>
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                     const [activeIndex, setActiveIndex] = React.useState(0);
                     const handleClick = (index: number) => {
                         setActiveIndex(index);
@@ -167,25 +180,97 @@ export default class TabsDoc extends React.Component<{}, IState> {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <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='tab label' isRequired={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/>
+                <br />
                 <h4 className="docs-page__h4">Tabs Custom</h4>
                 <PropsList>
-                    <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="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'/>
+                    <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/components/TagInputDocs.tsx

@@ -9,14 +9,15 @@ export default class TagInputDocs extends React.Component<{}, {value: Array<stri
 
         this.state = {
             value: ['Item 1', 'item 2'],
-        }
+        };
     }
 
     render() {
         return (
             <section className="docs-page__container">
                 <h2 className="docs-page__h2">Tag Input</h2>
-                <Markup.ReactMarkupCodePreview>{`
+                <Markup.ReactMarkupCodePreview>
+                    {`
                     <TagInput
                         value={this.state.value}
                         placeholder="Type Here"
@@ -26,12 +27,12 @@ export default class TagInputDocs extends React.Component<{}, {value: Array<stri
                 </Markup.ReactMarkupCodePreview>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <div className='docs-page__content-row'>
+                        <div className="docs-page__content-row">
                             <TagInput
                                 value={this.state.value}
                                 placeholder="Type Here"
-                                label='Tag-input Label'
-                                info='Info Message'
+                                label="Tag-input Label"
+                                info="Info Message"
                                 onChange={(value) => {
                                     this.setState({
                                         value: value,
@@ -40,7 +41,8 @@ export default class TagInputDocs extends React.Component<{}, {value: Array<stri
                             />
                         </div>
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         <TagInput
                             value={this.state.value}
                             placeholder="Type Here"
@@ -57,18 +59,72 @@ export default class TagInputDocs extends React.Component<{}, {value: Array<stri
                 </Markup.ReactMarkup>
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='value' isRequired={false} type='Array<T>' default='/' description='Value of the component.'/>
-                    <Prop name='placeholder' isRequired={false} type='string' default='/' description='Input placeholder.'/>
-                    <Prop name='onChange' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
-                    <Prop name='label' isRequired={false} type='string' default='/' description='Label of component.' />
-                    <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline.' />
-                    <Prop name='tabindex' isRequired={false} type='number' default='/' description='Indicates an element can be focused on, and determines how that focus is handled.'/>
-                    <Prop name='info' isRequired={false} type='string' default='/' description='Info message of component.' />
-                    <Prop name='error' isRequired={false} type='string' default='/' description='Error message of component.' />
-                    <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="value"
+                        isRequired={false}
+                        type="Array<T>"
+                        default="/"
+                        description="Value of the component."
+                    />
+                    <Prop
+                        name="placeholder"
+                        isRequired={false}
+                        type="string"
+                        default="/"
+                        description="Input placeholder."
+                    />
+                    <Prop
+                        name="onChange"
+                        isRequired={true}
+                        type="Function"
+                        default="/"
+                        description="Callback to invoke when value changes."
+                    />
+                    <Prop name="label" isRequired={false} type="string" default="/" description="Label of component." />
+                    <Prop
+                        name="inlineLabel"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="Position labels as inline."
+                    />
+                    <Prop
+                        name="tabindex"
+                        isRequired={false}
+                        type="number"
+                        default="/"
+                        description="Indicates an element can be focused on, and determines how that focus is handled."
+                    />
+                    <Prop
+                        name="info"
+                        isRequired={false}
+                        type="string"
+                        default="/"
+                        description="Info message of component."
+                    />
+                    <Prop
+                        name="error"
+                        isRequired={false}
+                        type="string"
+                        default="/"
+                        description="Error message of component."
+                    />
+                    <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>
             </section>
-        )
+        );
     }
 }