superdesk-ui-framework 4.0.47 → 4.0.49

package/dist/components/Heading.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as Markup from '../../js/react';
-import { PropsList, Prop, Heading } from '../../../app-typescript';
+import {PropsList, Prop, Heading} from '../../../app-typescript';
 
 interface IProps {
     children?: React.ReactNode;
@@ -9,60 +9,64 @@ interface IProps {
 export default class HeadingDoc extends React.Component<IProps> {
     render() {
         return (
-            <section className='docs-page__container'>
-                <h2 className='docs-page__h2'>Heading</h2>
-                
-                <Markup.ReactMarkupCodePreview>{`
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">Heading</h2>
+
+                <Markup.ReactMarkupCodePreview>
+                    {`
                     <Heading type='h2'>
                         Purus Dolor Ligula
                     </Heading>
                 `}
                 </Markup.ReactMarkupCodePreview>
 
-                <p className="docs-page__paragraph">Heading component. By choosing the type (h1, h2, h3...) appropriate HTML tags will be rendered, preserving the semantcs.</p>
+                <p className="docs-page__paragraph">
+                    Heading component. By choosing the type (h1, h2, h3...) appropriate HTML tags will be rendered,
+                    preserving the semantcs.
+                </p>
 
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <p className="docs-page__paragraph">// Basic</p>
-                        <div className='docs-page__content-row'>
-                            <Heading type='h1'>Heading one example</Heading>
+                        <div className="docs-page__content-row">
+                            <Heading type="h1">Heading one example</Heading>
                         </div>
-                        <div className='docs-page__content-row'>
-                            <Heading type='h2'>Heading two example</Heading>
+                        <div className="docs-page__content-row">
+                            <Heading type="h2">Heading two example</Heading>
                         </div>
-                        <div className='docs-page__content-row'>
-                            <Heading type='h3'>Heading three example</Heading>
+                        <div className="docs-page__content-row">
+                            <Heading type="h3">Heading three example</Heading>
                         </div>
-                        <div className='docs-page__content-row'>
-                            <Heading type='h4'>Heading four example</Heading>
+                        <div className="docs-page__content-row">
+                            <Heading type="h4">Heading four example</Heading>
                         </div>
-                        <div className='docs-page__content-row'>
-                            <Heading type='h5'>Heading five example</Heading>
+                        <div className="docs-page__content-row">
+                            <Heading type="h5">Heading five example</Heading>
                         </div>
-                        <div className='docs-page__content-row'>
-                            <Heading type='h6'>Heading six example</Heading>
+                        <div className="docs-page__content-row">
+                            <Heading type="h6">Heading six example</Heading>
                         </div>
 
                         <p className="docs-page__paragraph">// Variations</p>
 
-                        <div className='docs-page__content-row'>
-                            <Heading fontStyle='serif' color='light' weight='strong' type='h1'>
+                        <div className="docs-page__content-row">
+                            <Heading fontStyle="serif" color="light" weight="strong" type="h1">
                                 Maecenas faucibus mollis interdum.
                             </Heading>
                         </div>
-                        <div className='docs-page__content-row'>
-                            <Heading type='h2' style='italic' align='end'>
+                        <div className="docs-page__content-row">
+                            <Heading type="h2" style="italic" align="end">
                                 Cras mattis consectetur purus sit amet fermentum.
                             </Heading>
                         </div>
-                        <div className='docs-page__content-row'>
-                            <Heading fontStyle='serif' type='h3' align='center' color='lighter'>
+                        <div className="docs-page__content-row">
+                            <Heading fontStyle="serif" type="h3" align="center" color="lighter">
                                 Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla.
                             </Heading>
                         </div>
-
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         // Basic
 
                         <Heading type='h1'>Heading one example</Heading>
@@ -92,15 +96,57 @@ export default class HeadingDoc extends React.Component<IProps> {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='type' isRequired={true} type='h1 | h2 | h3 | h4 | h5 | h6' default='/' description='Heading type (eg. H1, H2, H3... etc.)'/>
-                    <Prop name='weight' isRequired={false} type='normal | medium | strong' default='normal' description='Change the default font weight.'/>
-                    <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 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="type"
+                        isRequired={true}
+                        type="h1 | h2 | h3 | h4 | h5 | h6"
+                        default="/"
+                        description="Heading type (eg. H1, H2, H3... etc.)"
+                    />
+                    <Prop
+                        name="weight"
+                        isRequired={false}
+                        type="normal | medium | strong"
+                        default="normal"
+                        description="Change the default font weight."
+                    />
+                    <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 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/components/IconButtons.tsx

@@ -2,58 +2,109 @@ import * as React from 'react';
 
 import * as Markup from '../../js/react';
 
-import { IconButton, Prop, PropsList, Tooltip, Container, ButtonGroup } from '../../../app-typescript';
+import {IconButton, Prop, PropsList, Tooltip, Container, ButtonGroup} from '../../../app-typescript';
 
 export default class IconButtonDoc extends React.Component {
     render() {
         return (
             <section className="docs-page__container">
                 <h2 className="docs-page__h2">Plain icon button</h2>
-                <Markup.ReactMarkupCodePreview>{`
+                <Markup.ReactMarkupCodePreview>
+                    {`
                     <IconButton icon="close-small" ariaValue="Screen-reader text" onClick={()=> false} />
                 `}
                 </Markup.ReactMarkupCodePreview>
-                <p className="docs-page__paragraph">The IconButton component is mostly used for action buttons in toolbars, inside other UI components. They can be combined with the Tooltip component to dsplay tooltips.
-                The small version should be generally avoided and used only where the footprint of the default version is to large.</p>
+                <p className="docs-page__paragraph">
+                    The IconButton component is mostly used for action buttons in toolbars, inside other UI components.
+                    They can be combined with the Tooltip component to dsplay tooltips. The small version should be
+                    generally avoided and used only where the footprint of the default version is to large.
+                </p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <p className="docs-page__paragraph">// Default</p>
                         <p className="docs-page__paragraph--small">Hover buttons to see tooltips.</p>
                         <div className="docs-page__content-row docs-page__content-row--white">
-                            <IconButton icon='close-small' disabled ariaValue='Close' onClick={()=> false} />
-                            <IconButton icon='plus-large'  ariaValue='Add' onClick={()=> false} />
-                            <IconButton icon='dots-vertical' ariaValue='More options' onClick={()=> false} />
-                            <IconButton icon='trash' ariaValue='Move to trash' onClick={()=> false} />
-                            <IconButton icon='close-small' ariaValue='Close' onClick={()=> false} />
+                            <IconButton icon="close-small" disabled ariaValue="Close" onClick={() => false} />
+                            <IconButton icon="plus-large" ariaValue="Add" onClick={() => false} />
+                            <IconButton icon="dots-vertical" ariaValue="More options" onClick={() => false} />
+                            <IconButton icon="trash" ariaValue="Move to trash" onClick={() => false} />
+                            <IconButton icon="close-small" ariaValue="Close" onClick={() => false} />
                         </div>
                         <p className="docs-page__paragraph">// Small</p>
                         <div className="docs-page__content-row docs-page__content-row--white sd-d-flex ">
-                            <IconButton size='small' icon='plus-large' ariaValue='Add' onClick={()=> false} />
+                            <IconButton size="small" icon="plus-large" ariaValue="Add" onClick={() => false} />
                             <span className="sd-margin-x--auto"></span>
-                            <IconButton size='small' icon='close-small' ariaValue='Close' onClick={()=> false} />
+                            <IconButton size="small" icon="close-small" ariaValue="Close" onClick={() => false} />
                         </div>
 
                         <p className="docs-page__paragraph">// Xtra large, 'outline' style</p>
-                        <Container gap="large" className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--3'>
-                            <ButtonGroup align='center' spaces='loose'>
-                                <IconButton style='outline' size='x-large' icon='pencil' ariaValue='Add' onClick={()=> false} />
-                                <IconButton style='outline' disabled={true} size='x-large' icon='switches' ariaValue='Add' onClick={()=> false} />
-                                <IconButton style='outline' size='x-large' icon='crop' ariaValue='Close' onClick={()=> false} />
+                        <Container
+                            gap="large"
+                            className="sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--3"
+                        >
+                            <ButtonGroup align="center" spaces="loose">
+                                <IconButton
+                                    style="outline"
+                                    size="x-large"
+                                    icon="pencil"
+                                    ariaValue="Add"
+                                    onClick={() => false}
+                                />
+                                <IconButton
+                                    style="outline"
+                                    disabled={true}
+                                    size="x-large"
+                                    icon="switches"
+                                    ariaValue="Add"
+                                    onClick={() => false}
+                                />
+                                <IconButton
+                                    style="outline"
+                                    size="x-large"
+                                    icon="crop"
+                                    ariaValue="Close"
+                                    onClick={() => false}
+                                />
                             </ButtonGroup>
                         </Container>
 
                         <p className="docs-page__paragraph">// Xtra large, outlineWhite style</p>
-                        <p className="docs-page__paragraph--small">The 'outlineWhite' syle forces a white icon and outline. It can be used on dark overlays for example.</p>
-                        <div style={{background: 'hsla(214, 13%, 12%, 1)'}} className="sd-container sd-container--flex sd-container--gap-large sd-radius--medium sd-shadow--z2 sd-padding--3">
-                            <ButtonGroup align='center' spaces='loose'>
-                                <IconButton style='outlineWhite' size='x-large' icon='pencil' ariaValue='Edit metadata' onClick={()=> false} />
-                                <IconButton style='outlineWhite' disabled={true} size='x-large' icon='switches' ariaValue='Edit image' onClick={()=> false} />
-                                <IconButton style='outlineWhite' size='x-large' icon='crop' ariaValue='Edit crops' onClick={()=> false} />
+                        <p className="docs-page__paragraph--small">
+                            The 'outlineWhite' syle forces a white icon and outline. It can be used on dark overlays for
+                            example.
+                        </p>
+                        <div
+                            style={{background: 'hsla(214, 13%, 12%, 1)'}}
+                            className="sd-container sd-container--flex sd-container--gap-large sd-radius--medium sd-shadow--z2 sd-padding--3"
+                        >
+                            <ButtonGroup align="center" spaces="loose">
+                                <IconButton
+                                    style="outlineWhite"
+                                    size="x-large"
+                                    icon="pencil"
+                                    ariaValue="Edit metadata"
+                                    onClick={() => false}
+                                />
+                                <IconButton
+                                    style="outlineWhite"
+                                    disabled={true}
+                                    size="x-large"
+                                    icon="switches"
+                                    ariaValue="Edit image"
+                                    onClick={() => false}
+                                />
+                                <IconButton
+                                    style="outlineWhite"
+                                    size="x-large"
+                                    icon="crop"
+                                    ariaValue="Edit crops"
+                                    onClick={() => false}
+                                />
                             </ButtonGroup>
                         </div>
-
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         <IconButton icon='close-small' disabled ariaValue='Close' onClick={()=> false} />
                         <IconButton icon='plus-large' ariaValue='Add' onClick={()=> false} />
                         <IconButton icon='dots-vertical' ariaValue='More options' onClick={()=> false} />
@@ -84,15 +135,57 @@ export default class IconButtonDoc extends React.Component {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.'/>
-                    <Prop name='ariaValue' isRequired={true} type='string' default='/' description='Description for screen readers, also used as the ToolTip value.'/>
-                    <Prop name='size' isRequired={false} type='default | small | x-large' default='default' description='Creates an IconButton with a smaller or larger footprint.'/>
-                    <Prop name='style' isRequired={false} type='default | outline | outlineWhite' default='default' description='Different styling options.'/>
-                    <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Disables the Button, preventing mouse events.'/>
-                    <Prop name='toolTipFlow' isRequired={false} type='top | left | right | down' default='top' description='Defines the possition of the ToolTip.'/>
-                    <Prop name='toolTipAppend' isRequired={false} type='boolean' default='false' description='Uses the append to body version of the ToolTips if set to true.'/>
+                    <Prop
+                        name="icon"
+                        isRequired={false}
+                        type="string"
+                        default="/"
+                        description="Icon class name without the icon- part."
+                    />
+                    <Prop
+                        name="ariaValue"
+                        isRequired={true}
+                        type="string"
+                        default="/"
+                        description="Description for screen readers, also used as the ToolTip value."
+                    />
+                    <Prop
+                        name="size"
+                        isRequired={false}
+                        type="default | small | x-large"
+                        default="default"
+                        description="Creates an IconButton with a smaller or larger footprint."
+                    />
+                    <Prop
+                        name="style"
+                        isRequired={false}
+                        type="default | outline | outlineWhite"
+                        default="default"
+                        description="Different styling options."
+                    />
+                    <Prop
+                        name="disabled"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="Disables the Button, preventing mouse events."
+                    />
+                    <Prop
+                        name="toolTipFlow"
+                        isRequired={false}
+                        type="top | left | right | down"
+                        default="top"
+                        description="Defines the possition of the ToolTip."
+                    />
+                    <Prop
+                        name="toolTipAppend"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="Uses the append to body version of the ToolTips if set to true."
+                    />
                 </PropsList>
             </section>
-        )
+        );
     }
 }

package/dist/components/IconFont.tsx

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