superdesk-ui-framework 4.0.47 → 4.0.49

package/examples/pages/components/Tags.tsx

@@ -1,78 +1,82 @@
 import * as React from 'react';
 import * as Markup from '../../js/react';
-import { clone } from 'lodash';
-import { Tag, Prop, PropsList } from '../../../app-typescript';
+import {clone} from 'lodash';
+import {Tag, Prop, PropsList} from '../../../app-typescript';
 
-interface ITag{
+interface ITag {
     tags: Array<any>;
     tags2: Array<any>;
 }
 export default class TagDoc extends React.Component<{}, ITag> {
-    constructor(props){
+    constructor(props) {
         super(props);
         this.state = {
             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: '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},
                 {text: 'Draggable tag', draggable: true},
             ],
             tags2: [
                 {text: 'Tag with label', label: 'Label'},
-                {text: 'I am', draggable: true, label: 'Draggable'}
+                {text: 'I am', draggable: true, label: 'Draggable'},
             ],
-        }
-        this.handleClick=this.handleClick.bind(this);
-        this.handleClick2=this.handleClick2.bind(this);
+        };
+        this.handleClick = this.handleClick.bind(this);
+        this.handleClick2 = this.handleClick2.bind(this);
     }
 
-    handleClick(i:number){
+    handleClick(i: number) {
         let newTags = clone(this.state.tags);
         newTags.splice(i, 1);
         this.setState({
-            tags: newTags
+            tags: newTags,
         });
     }
 
-    handleClick2(i:number){
+    handleClick2(i: number) {
         let newTags2 = clone(this.state.tags2);
         newTags2.splice(i, 1);
         this.setState({
-            tags2: newTags2
+            tags2: newTags2,
         });
     }
     render() {
         return (
-            <section className="docs-page__container"> 
-            <h2 className="docs-page__h2">Tag</h2>
-            <Markup.ReactMarkupCodePreview>{`
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">Tag</h2>
+                <Markup.ReactMarkupCodePreview>
+                    {`
                <Tag text='This is a tag' onClick={()=>false}/>
             `}
-            </Markup.ReactMarkupCodePreview>
-            
-            <Markup.ReactMarkup>
-                <Markup.ReactMarkupPreview>
-                <div className='docs-page__content-row d-flex gap-1'>
-                    {this.state.tags.map((tag,index)=>{
-                        return (
-                            <React.Fragment key={index}>
-                                <Tag keyValue={index}
-                                    text={tag.text}
-                                    shade={tag.shade}
-                                    shape={tag.shape}
-                                    label={tag.label}
-                                    readOnly={tag.readOnly}
-                                    draggable={tag.draggable}
-                                    onClick={()=>this.handleClick(index)}/>
-                            </React.Fragment>
-                        )
-                    })}
-                </div>
-                </Markup.ReactMarkupPreview>
-                <Markup.ReactMarkupCode>{`
+                </Markup.ReactMarkupCodePreview>
+
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className="docs-page__content-row d-flex gap-1">
+                            {this.state.tags.map((tag, index) => {
+                                return (
+                                    <React.Fragment key={index}>
+                                        <Tag
+                                            keyValue={index}
+                                            text={tag.text}
+                                            shade={tag.shade}
+                                            shape={tag.shape}
+                                            label={tag.label}
+                                            readOnly={tag.readOnly}
+                                            draggable={tag.draggable}
+                                            onClick={() => this.handleClick(index)}
+                                        />
+                                    </React.Fragment>
+                                );
+                            })}
+                        </div>
+                    </Markup.ReactMarkupPreview>
+                    <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}/>
@@ -80,44 +84,71 @@ export default class TagDoc extends React.Component<{}, ITag> {
                     <Tag text='Dolor amet' shade='highlight2' shape='square' onClick={()=>false}/>
                     <Tag text='Read only tag' readOnly={true} onClick={()=>false}/>
                     
-                `}          
-                </Markup.ReactMarkupCode>
-            </Markup.ReactMarkup>
+                `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
 
-            <Markup.ReactMarkup>
-                <Markup.ReactMarkupPreview>
-                <div className='docs-page__content-row d-flex gap-1'>
-                    {this.state.tags2.map((tag,index)=>{
-                        return (
-                            <React.Fragment key={index}>
-                                <Tag keyValue={index}
-                                    text={tag.text}
-                                    label={tag.label}
-                                    draggable={tag.draggable}
-                                    onClick={() => this.handleClick2(index)}/>
-                            </React.Fragment>
-                        )
-                    })}
-                </div>
-                </Markup.ReactMarkupPreview>
-                <Markup.ReactMarkupCode>{`
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className="docs-page__content-row d-flex gap-1">
+                            {this.state.tags2.map((tag, index) => {
+                                return (
+                                    <React.Fragment key={index}>
+                                        <Tag
+                                            keyValue={index}
+                                            text={tag.text}
+                                            label={tag.label}
+                                            draggable={tag.draggable}
+                                            onClick={() => this.handleClick2(index)}
+                                        />
+                                    </React.Fragment>
+                                );
+                            })}
+                        </div>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>
+                        {`
                     <Tag text='Tag with label'
                         label='Label'
                         onClick={() => false} />
-                `}          
-                </Markup.ReactMarkupCode>
-            </Markup.ReactMarkup>
+                `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
 
-            <h3 className="docs-page__h3">Props</h3>
+                <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 | 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.'/>
+                    <Prop name="text" isRequired={true} type="string" default="/" description="Tag text value." />
+                    <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>
-        )
+            </section>
+        );
     }
 }

package/examples/pages/components/Text.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as Markup from '../../js/react';
-import { PropsList, Prop, Text } from '../../../app-typescript';
+import {PropsList, Prop, Text} from '../../../app-typescript';
 
 interface IProps {
     children?: React.ReactNode;
@@ -9,10 +9,11 @@ interface IProps {
 export default class TextDoc extends React.Component<IProps> {
     render() {
         return (
-            <section className='docs-page__container'>
-                <h2 className='docs-page__h2'>Text</h2>
-                
-                <Markup.ReactMarkupCodePreview>{`
+            <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>
@@ -22,67 +23,74 @@ export default class TextDoc extends React.Component<IProps> {
                 <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.
+                        <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.
+                        <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.
+                        <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. 
+                        <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. 
+                        <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. 
+                        <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. 
+                        <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>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         // Sizes and alignments
 
                         <Text size='x-small' style='italic'>
@@ -120,15 +128,57 @@ export default class TextDoc extends React.Component<IProps> {
 
                 <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'/>
+                    <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/examples/pages/components/TimePicker.tsx

@@ -5,14 +5,14 @@ import {TimePicker} from '../../../app-typescript/components/TimePicker';
 import {TimePickerV2} from '../../../app-typescript/components/TimePickerV2';
 
 let minutes = Array.from(Array(60).keys());
-let changedMinutes = minutes.filter((num) => num % 15 !== 0)
+let changedMinutes = minutes.filter((num) => num % 15 !== 0);
 
-class TimePickerExample extends React.PureComponent<{}, {time: string}> {
+class TimePickerExample extends React.PureComponent<{}, {time: string | null}> {
     constructor(props) {
         super(props);
 
         this.state = {
-            time: '',
+            time: null,
         };
     }
 
@@ -24,8 +24,8 @@ class TimePickerExample extends React.PureComponent<{}, {time: string}> {
                     this.setState({time});
                 }}
                 allowSeconds
-                label='This is Label'
-                info='This is info'
+                label="This is Label"
+                info="This is info"
             />
         );
     }
@@ -54,7 +54,7 @@ export default class TimePickerDoc extends React.Component<{}, {time: string}> {
                 `}</Markup.ReactMarkupCodePreview>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <div className='docs-page__content-row'>
+                        <div className="docs-page__content-row">
                             <TimePickerExample />
                         </div>
                     </Markup.ReactMarkupPreview>
@@ -71,13 +71,13 @@ export default class TimePickerDoc extends React.Component<{}, {time: string}> {
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
-                <p className='docs-page__paragraph'>TimePickerV2:</p>
+                <p className="docs-page__paragraph">TimePickerV2:</p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <div className='docs-page__content-row'>
+                        <div className="docs-page__content-row">
                             <TimePickerV2
                                 value={this.state.time}
-                                label='This is Label'
+                                label="This is Label"
                                 disabledOptions={{
                                     minutes: changedMinutes,
                                 }}
@@ -101,23 +101,77 @@ export default class TimePickerDoc extends React.Component<{}, {time: string}> {
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
-                <h3 className='docs-page__h3'>Props</h3>
+                <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='value' isRequired={true} type='string' default='/' description='Item value.' />
-                    <Prop name='allowSeconds' isRequired={true} type='string' default='/' description='Allow seconds.' />
-                    <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={true} type="string" default="/" description="Item value." />
+                    <Prop
+                        name="allowSeconds"
+                        isRequired={true}
+                        type="string"
+                        default="/"
+                        description="Allow seconds."
+                    />
+                    <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>
 
-                <h3 className='docs-page__h3'>Events</h3>
+                <h3 className="docs-page__h3">Events</h3>
                 <PropsList>
-                    <Prop name='onChange' isRequired={true} type='function' default='/' description='Returns value of time input.' />
+                    <Prop
+                        name="onChange"
+                        isRequired={true}
+                        type="function"
+                        default="/"
+                        description="Returns value of time input."
+                    />
                 </PropsList>
             </section>
         );