superdesk-ui-framework 4.0.47 → 4.0.49

package/dist/components/Container.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as Markup from '../../js/react';
-import { PropsList, Prop, Container, Text, Heading, Button, ButtonGroup } from '../../../app-typescript';
+import {PropsList, Prop, Container, Text, Heading, Button, ButtonGroup} from '../../../app-typescript';
 
 interface IProps {
     children?: React.ReactNode;
@@ -9,10 +9,11 @@ interface IProps {
 export default class ContainerDoc extends React.Component<IProps> {
     render() {
         return (
-            <section className='docs-page__container'>
-                <h2 className='docs-page__h2'>Container</h2>
-                
-                <Markup.ReactMarkupCodePreview>{`
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">Container</h2>
+
+                <Markup.ReactMarkupCodePreview>
+                    {`
                     <Container>
                         Cum sociis natoque penatibus et magnis dis parturient...
                     </Container>
@@ -20,71 +21,87 @@ export default class ContainerDoc extends React.Component<IProps> {
                 </Markup.ReactMarkupCodePreview>
 
                 <p className="docs-page__paragraph">
-                    The Container is a convenient layout component with different layout options and support for external CSS classes.
-                    The display model is <code>flex</code> by default, but can be changed with the <code>display</code> prop. It is 
-                    intended to be used with helper CSS classes to achieve desired styling options
+                    The Container is a convenient layout component with different layout options and support for
+                    external CSS classes. The display model is <code>flex</code> by default, but can be changed with the{' '}
+                    <code>display</code> prop. It is intended to be used with helper CSS classes to achieve desired
+                    styling options
                 </p>
 
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <p className="docs-page__paragraph">// Basic</p>
-                        <div className='docs-page__content-row'>
+                        <div className="docs-page__content-row">
                             <Container>
-                                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. 
+                                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.
                             </Container>
                         </div>
 
                         <p className="docs-page__paragraph">// Usage examples</p>
 
-                        <div className='docs-page__content-row'>
-                            <Container gap="large" className='sd-border--medium sd-font-size--medium sd-padding--2 sd-radius--large'>
+                        <div className="docs-page__content-row">
+                            <Container
+                                gap="large"
+                                className="sd-border--medium sd-font-size--medium sd-padding--2 sd-radius--large"
+                            >
                                 <span>Curabitur blandit tempus porttitor.</span>
-                                <Button text="Test button" type="primary" onClick={()=> false} />
-                                <Button text="Test button" type="highlight" onClick={()=> false} />
+                                <Button text="Test button" type="primary" onClick={() => false} />
+                                <Button text="Test button" type="highlight" onClick={() => false} />
                                 <ButtonGroup align="end">
-                                    <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
-                                    <Button text="Submit" onClick={()=> false} type="primary" />
+                                    <Button text="Cancel" onClick={() => false} type="default" style="hollow" />
+                                    <Button text="Submit" onClick={() => false} type="primary" />
                                 </ButtonGroup>
                             </Container>
                         </div>
 
-                        <div className='docs-page__content-row'>
-                            <Container gap="large" direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
-                                <Heading type='h3'>Curabitur blandit tempus porttitor.</Heading>
-                                <Text color='light'>
-                                    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.
+                        <div className="docs-page__content-row">
+                            <Container
+                                gap="large"
+                                direction="column"
+                                className="sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus"
+                            >
+                                <Heading type="h3">Curabitur blandit tempus porttitor.</Heading>
+                                <Text color="light">
+                                    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.
                                 </Text>
                                 <ButtonGroup align="end">
-                                    <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
-                                    <Button text="Submit" onClick={()=> false} type="primary" />
+                                    <Button text="Cancel" onClick={() => false} type="default" style="hollow" />
+                                    <Button text="Submit" onClick={() => false} type="primary" />
                                 </ButtonGroup>
                             </Container>
                         </div>
 
-                        <div className='docs-page__content-row'>
-                            <Container gap="large" theme='dark' direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
-                                <Heading type='h3'>Curabitur blandit tempus porttitor.</Heading>
-                                <Text color='light'>
-                                    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.
+                        <div className="docs-page__content-row">
+                            <Container
+                                gap="large"
+                                theme="dark"
+                                direction="column"
+                                className="sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus"
+                            >
+                                <Heading type="h3">Curabitur blandit tempus porttitor.</Heading>
+                                <Text color="light">
+                                    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.
                                 </Text>
                                 <ButtonGroup align="end">
-                                    <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
-                                    <Button text="Submit" onClick={()=> false} type="primary" />
+                                    <Button text="Cancel" onClick={() => false} type="default" style="hollow" />
+                                    <Button text="Submit" onClick={() => false} type="primary" />
                                 </ButtonGroup>
                             </Container>
                         </div>
-                        
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         // Basic
 
                         <Container>
@@ -131,13 +148,43 @@ export default class ContainerDoc extends React.Component<IProps> {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='display' isRequired={false} type='flex | inline-flex | block' default='flex' description='Change the default display mode (flex).'/>
-                    <Prop name='direction' isRequired={false} type='row | column' default='row' description='Change the flex-direction property.'/>
-                    <Prop name='gap' isRequired={false} type='none | x-small | small |  medium | large' default='none' description='Set the gap between elements inside the Container.'/>
-                    <Prop name='theme' isRequired={false} type='light | dark' default='/' description='Choose the UI theme. It will inherit the default theme if not set. All items inside will inherit the theme of the Container if it is set.'/>
-                    <Prop name='className' isRequired={false} type='string' default='/' description='Add helper classes or custom CSS styles'/>
+                    <Prop
+                        name="display"
+                        isRequired={false}
+                        type="flex | inline-flex | block"
+                        default="flex"
+                        description="Change the default display mode (flex)."
+                    />
+                    <Prop
+                        name="direction"
+                        isRequired={false}
+                        type="row | column"
+                        default="row"
+                        description="Change the flex-direction property."
+                    />
+                    <Prop
+                        name="gap"
+                        isRequired={false}
+                        type="none | x-small | small |  medium | large"
+                        default="none"
+                        description="Set the gap between elements inside the Container."
+                    />
+                    <Prop
+                        name="theme"
+                        isRequired={false}
+                        type="light | dark"
+                        default="/"
+                        description="Choose the UI theme. It will inherit the default theme if not set. All items inside will inherit the theme of the Container if it is set."
+                    />
+                    <Prop
+                        name="className"
+                        isRequired={false}
+                        type="string"
+                        default="/"
+                        description="Add helper classes or custom CSS styles"
+                    />
                 </PropsList>
             </section>
-        )
+        );
     }
-}
+}

package/dist/components/ContentDivider.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import * as Markup from '../../js/react';
-import { ContentDivider, Button, Prop, PropsList } from '../../../app-typescript';
+import {ContentDivider, Button, Prop, PropsList} from '../../../app-typescript';
 
 export default class ContentDividerDoc extends React.Component {
-
     render() {
         return (
             <section className="docs-page__container">
                 <h2 className="docs-page__h2">Content Divider</h2>
-                <Markup.ReactMarkupCodePreview>{`
+                <Markup.ReactMarkupCodePreview>
+                    {`
                     <ContentDivider>
                         Child element
                     </ContentDivider>
@@ -18,29 +18,37 @@ export default class ContentDividerDoc extends React.Component {
                 <p className="docs-page__paragraph"></p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <div className='docs-page__content-row'>
-                            <p>Maecenas sed diam eget risus varius blandit sit amet non magna.
-                            Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus
-                            auctor fringilla.</p>
+                        <div className="docs-page__content-row">
+                            <p>
+                                Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis
+                                interdum. Donec ullamcorper nulla non metus auctor fringilla.
+                            </p>
                             <ContentDivider />
-                            <p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat
-                            a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum
-                            nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum
-                            at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                            <p>
+                                Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis
+                                dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Morbi leo
+                                risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet,
+                                consectetur adipiscing elit.
+                            </p>
                             <ContentDivider type="dashed" />
-                            <p>Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet,
-                            consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.
-                            Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur
-                            purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue.</p>
-                            <ContentDivider type="dotted" margin='x-small' />
-                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus
-                            ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet
-                            risus. Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac
-                            facilisis in, egestas eget quam.</p>
-                            <ContentDivider type="dotted" margin='x-small' />
+                            <p>
+                                Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet,
+                                consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Morbi
+                                leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus
+                                sit amet fermentum. Nulla vitae elit libero, a pharetra augue.
+                            </p>
+                            <ContentDivider type="dotted" margin="x-small" />
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus
+                                commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec
+                                id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in,
+                                egestas eget quam.
+                            </p>
+                            <ContentDivider type="dotted" margin="x-small" />
                         </div>
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         <p>Maecenas sed diam eget risus varius...</p>
 
                         <ContentDivider />
@@ -64,32 +72,36 @@ export default class ContentDividerDoc extends React.Component {
                 <p className="docs-page__paragraph"></p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <div className='docs-page__content-row'>
-                            <ContentDivider>
-                                Centered (default)
-                            </ContentDivider>
-                            <p>Maecenas sed diam eget risus varius blandit sit amet non magna.
-                            Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus
-                            auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia
-                            quam venenatis vestibulum.</p>
-                            <ContentDivider margin='small' align="left">
+                        <div className="docs-page__content-row">
+                            <ContentDivider>Centered (default)</ContentDivider>
+                            <p>
+                                Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis
+                                interdum. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam.
+                                Pellentesque ornare sem lacinia quam venenatis vestibulum.
+                            </p>
+                            <ContentDivider margin="small" align="left">
                                 Left aligned, small margin
                             </ContentDivider>
-                            <p>Maecenas sed diam eget risus varius blandit sit amet non magna.
-                            Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur
-                            purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod.
-                            Cras mattis consectetur purus sit amet fermentum.</p>
+                            <p>
+                                Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi
+                                porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Etiam
+                                porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet
+                                fermentum.
+                            </p>
                             <ContentDivider align="right" type="dotted">
                                 Right aligned, dotted
                             </ContentDivider>
-                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-                            Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna,
-                            vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.
-                            Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
-                            massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+                            <p>
+                                Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi
+                                porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl
+                                consectetur et. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac
+                                cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
+                                Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+                            </p>
                         </div>
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         <ContentDivider>
                             Centered (default)
                         </ContentDivider>
@@ -116,33 +128,38 @@ export default class ContentDividerDoc extends React.Component {
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <p className="docs-page__paragraph">// Basic</p>
-                        <div className='docs-page__content-row'>
+                        <div className="docs-page__content-row">
                             <span>Option one</span>
-                            <ContentDivider margin='small' orientation="vertical" type="dotted" />
+                            <ContentDivider margin="small" orientation="vertical" type="dotted" />
                             <span>Option two</span>
-                            <ContentDivider margin='small' orientation="vertical" type="dotted" />
+                            <ContentDivider margin="small" orientation="vertical" type="dotted" />
                             <span>Option three</span>
                         </div>
                         <p className="docs-page__paragraph ">// With text</p>
-                        <p className="docs-page__paragraph--small sd-margin-b--3">Inside a flex container (flex-direction: column;).</p>
-                        <div className='docs-page__content-row d-flex'>
-                            <div style={{width:'100%'}}>
-                                Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et
-                                magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit
-                                sit amet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla
-                                sed consectetur. Vivamus sagittis lacus vel augue.
+                        <p className="docs-page__paragraph--small sd-margin-b--3">
+                            Inside a flex container (flex-direction: column;).
+                        </p>
+                        <div className="docs-page__content-row d-flex">
+                            <div style={{width: '100%'}}>
+                                Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque
+                                penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam
+                                eget risus varius blandit sit amet. Morbi leo risus, porta ac consectetur ac, vestibulum
+                                at eros. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel
+                                augue.
                             </div>
-                            <ContentDivider orientation="vertical" margin='large'>
+                            <ContentDivider orientation="vertical" margin="large">
                                 or
                             </ContentDivider>
-                            <div style={{width:'100%'}}>
-                                Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus.
-                                Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna.
-                                Nullam id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui. Nulla vitae elit libero, a pharetra augue.
+                            <div style={{width: '100%'}}>
+                                Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi
+                                porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Maecenas
+                                sed diam eget risus varius blandit sit amet non magna. Nullam id dolor id nibh ultricies
+                                vehicula ut id elit. Donec sed odio dui. Nulla vitae elit libero, a pharetra augue.
                             </div>
                         </div>
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         // Basic
 
                         <span>Option one</span>
@@ -170,13 +187,43 @@ export default class ContentDividerDoc extends React.Component {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='type' isRequired={false} type='dashed | dotted | solid' default='solid' description='Border style of the divider.'/>
-                    <Prop name='orientation' isRequired={false} type='horizontal | vertical' default='horizontal' description='Defines if the divider is horizontal or vertical. Default is horizontal.'/>
-                    <Prop name='align' isRequired={false} type='center | left | right' default='right' description='Text alignment inside the divider. Should not be used without any text inside the divider. The vertical divider has no alignment options.'/>
-                    <Prop name='border' isRequired={false} type='boolean' default='true' description='Removes the border if set to true. Should be generally avoided especially if there is textual content. It can be used to add space between elements if there is no other option.'/>
-                    <Prop name='margin' isRequired={false} type='x-small | small | medium | large | none' default='medium' description='Vertical or horizontal margins (depending on the orientation) of the ContentDivider. Default to medium if not set.'/>
+                    <Prop
+                        name="type"
+                        isRequired={false}
+                        type="dashed | dotted | solid"
+                        default="solid"
+                        description="Border style of the divider."
+                    />
+                    <Prop
+                        name="orientation"
+                        isRequired={false}
+                        type="horizontal | vertical"
+                        default="horizontal"
+                        description="Defines if the divider is horizontal or vertical. Default is horizontal."
+                    />
+                    <Prop
+                        name="align"
+                        isRequired={false}
+                        type="center | left | right"
+                        default="right"
+                        description="Text alignment inside the divider. Should not be used without any text inside the divider. The vertical divider has no alignment options."
+                    />
+                    <Prop
+                        name="border"
+                        isRequired={false}
+                        type="boolean"
+                        default="true"
+                        description="Removes the border if set to true. Should be generally avoided especially if there is textual content. It can be used to add space between elements if there is no other option."
+                    />
+                    <Prop
+                        name="margin"
+                        isRequired={false}
+                        type="x-small | small | medium | large | none"
+                        default="medium"
+                        description="Vertical or horizontal margins (depending on the orientation) of the ContentDivider. Default to medium if not set."
+                    />
                 </PropsList>
             </section>
-        )
+        );
     }
 }