superdesk-ui-framework 4.0.47 → 4.0.49

package/dist/components/IconLabels.tsx

@@ -2,63 +2,152 @@ import * as React from 'react';
 
 import * as Markup from '../../js/react';
 
-import { IconLabel, Prop, PropsList } from '../../../app-typescript';
+import {IconLabel, Prop, PropsList} from '../../../app-typescript';
 
 export default class IconLabelDoc extends React.Component {
     render() {
         return (
             <section className="docs-page__container">
                 <h2 className="docs-page__h2">Icon Labels</h2>
-                <Markup.ReactMarkupCodePreview>{`
+                <Markup.ReactMarkupCodePreview>
+                    {`
                     <IconLabel text='Label primary' icon='facebook' type='primary' />
                 `}
                 </Markup.ReactMarkupCodePreview>
-                <p className="docs-page__paragraph">Icon labels are inline styles for displaying a combination of icons from the icon font with a text label. Use the <code>type</code> prop to change semantic colour values based on the intended purpose.</p>
+                <p className="docs-page__paragraph">
+                    Icon labels are inline styles for displaying a combination of icons from the icon font with a text
+                    label. Use the <code>type</code> prop to change semantic colour values based on the intended
+                    purpose.
+                </p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                        <div className="docs-page__content-row docs-page__content-row--no-margin">
                             <p className="docs-page__paragraph">// Basic</p>
-                            <IconLabel text='Default label' icon='photo' />
-                            <IconLabel text='Label primary' icon='facebook' type='primary' />
-                            <IconLabel text='Label success' icon='text' type='success' />
-                            <IconLabel text='Label warning' icon='paywall' type='warning' />
-                            <IconLabel text='Label alert' icon='trash' type='alert' />
-                            <IconLabel text='Label highlight' icon='composite' type='highlight' />
-                            <IconLabel text='Label sd-green' icon='video' type='sd-green' />
+                            <IconLabel text="Default label" icon="photo" />
+                            <IconLabel text="Label primary" icon="facebook" type="primary" />
+                            <IconLabel text="Label success" icon="text" type="success" />
+                            <IconLabel text="Label warning" icon="paywall" type="warning" />
+                            <IconLabel text="Label alert" icon="trash" type="alert" />
+                            <IconLabel text="Label highlight" icon="composite" type="highlight" />
+                            <IconLabel text="Label sd-green" icon="video" type="sd-green" />
 
                             <p className="docs-page__paragraph">// Translucent</p>
-                            <IconLabel innerLabel='Start:' style='translucent' text='00:45' type='success' icon='time' />
-                            <IconLabel innerLabel='end:' style='translucent' text='00:30' type='warning' icon='time' />
-                            <IconLabel style='translucent' text='Label alert' type='alert' icon='time' />
-                            <IconLabel style='translucent' text='Label highlight' type='highlight' icon='calendar' />
-                            <IconLabel style='translucent' text='Label sd-green' type='sd-green' icon='calendar' />
-                            <IconLabel style='translucent' text='Default label' icon='bell' />
+                            <IconLabel
+                                innerLabel="Start:"
+                                style="translucent"
+                                text="00:45"
+                                type="success"
+                                icon="time"
+                            />
+                            <IconLabel innerLabel="end:" style="translucent" text="00:30" type="warning" icon="time" />
+                            <IconLabel style="translucent" text="Label alert" type="alert" icon="time" />
+                            <IconLabel style="translucent" text="Label highlight" type="highlight" icon="calendar" />
+                            <IconLabel style="translucent" text="Label sd-green" type="sd-green" icon="calendar" />
+                            <IconLabel style="translucent" text="Default label" icon="bell" />
                             <br />
-                            <IconLabel innerLabel='Start:' style='translucent' text='00:45' type='success'/>
-                            <IconLabel innerLabel='end:' style='translucent' text='00:30' type='warning'/>
-                            <IconLabel style='translucent' text='Label alert' type='alert' />
+                            <IconLabel innerLabel="Start:" style="translucent" text="00:45" type="success" />
+                            <IconLabel innerLabel="end:" style="translucent" text="00:30" type="warning" />
+                            <IconLabel style="translucent" text="Label alert" type="alert" />
 
                             <p className="docs-page__paragraph">// Translucent & Large</p>
-                            <IconLabel innerLabel='Start:' size='large' style='translucent' text='00:45' type='success' icon='time' />
-                            <IconLabel innerLabel='Start:' size='large' style='translucent' text='00:55' type='warning' icon='time' />
-                            <IconLabel innerLabel='Start:' size='large' style='translucent' text='00:15' type='alert' icon='time' />
+                            <IconLabel
+                                innerLabel="Start:"
+                                size="large"
+                                style="translucent"
+                                text="00:45"
+                                type="success"
+                                icon="time"
+                            />
+                            <IconLabel
+                                innerLabel="Start:"
+                                size="large"
+                                style="translucent"
+                                text="00:55"
+                                type="warning"
+                                icon="time"
+                            />
+                            <IconLabel
+                                innerLabel="Start:"
+                                size="large"
+                                style="translucent"
+                                text="00:15"
+                                type="alert"
+                                icon="time"
+                            />
                             <br />
-                            <IconLabel innerLabel='Start:' size='large' style='translucent' text='18:30' type='success' />
-                            <IconLabel innerLabel='End:' size='large' style='translucent' text='20:30' type='highlight' />
-                            <IconLabel innerLabel='Duration:' size='large' style='translucent' text='00:30' type='primary' />
+                            <IconLabel
+                                innerLabel="Start:"
+                                size="large"
+                                style="translucent"
+                                text="18:30"
+                                type="success"
+                            />
+                            <IconLabel
+                                innerLabel="End:"
+                                size="large"
+                                style="translucent"
+                                text="20:30"
+                                type="highlight"
+                            />
+                            <IconLabel
+                                innerLabel="Duration:"
+                                size="large"
+                                style="translucent"
+                                text="00:30"
+                                type="primary"
+                            />
 
                             <p className="docs-page__paragraph">// Translucent & Small</p>
-                            <IconLabel innerLabel='Start:' size='small' style='translucent' text='00:45' type='success' icon='time' />
-                            <IconLabel innerLabel='Start:' size='small' style='translucent' text='00:55' type='warning' icon='time' />
-                            <IconLabel innerLabel='Start:' size='small' style='translucent' text='00:15' type='alert' icon='time' />
+                            <IconLabel
+                                innerLabel="Start:"
+                                size="small"
+                                style="translucent"
+                                text="00:45"
+                                type="success"
+                                icon="time"
+                            />
+                            <IconLabel
+                                innerLabel="Start:"
+                                size="small"
+                                style="translucent"
+                                text="00:55"
+                                type="warning"
+                                icon="time"
+                            />
+                            <IconLabel
+                                innerLabel="Start:"
+                                size="small"
+                                style="translucent"
+                                text="00:15"
+                                type="alert"
+                                icon="time"
+                            />
                             <br />
-                            <IconLabel innerLabel='Start:' size='small' style='translucent' text='18:30' type='success' />
-                            <IconLabel innerLabel='End:' size='small' style='translucent' text='20:30' type='highlight' />
-                            <IconLabel innerLabel='Duration:' size='small' style='translucent' text='00:30' type='primary' />
+                            <IconLabel
+                                innerLabel="Start:"
+                                size="small"
+                                style="translucent"
+                                text="18:30"
+                                type="success"
+                            />
+                            <IconLabel
+                                innerLabel="End:"
+                                size="small"
+                                style="translucent"
+                                text="20:30"
+                                type="highlight"
+                            />
+                            <IconLabel
+                                innerLabel="Duration:"
+                                size="small"
+                                style="translucent"
+                                text="00:30"
+                                type="primary"
+                            />
                         </div>
-
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         // Basic
                         <IconLabel text='Default label' icon='photo' />
                         <IconLabel text='Label primary' icon='facebook' type='primary' />
@@ -81,12 +170,30 @@ export default class IconLabelDoc extends React.Component {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='text' isRequired={true} type='string' default='/' description='IconLabel text 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='icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.'/>
-                    <Prop name='style' isRequired={false} type='basic | translucent' default='basic' description='Defines the style of the label (basic or translucent).'/>
+                    <Prop name="text" isRequired={true} type="string" default="/" description="IconLabel text 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="icon"
+                        isRequired={false}
+                        type="string"
+                        default="/"
+                        description="Icon class name without the icon- part."
+                    />
+                    <Prop
+                        name="style"
+                        isRequired={false}
+                        type="basic | translucent"
+                        default="basic"
+                        description="Defines the style of the label (basic or translucent)."
+                    />
                 </PropsList>
             </section>
-        )
+        );
     }
 }

package/dist/components/IconPicker.tsx

@@ -1,15 +1,15 @@
-import * as React from "react";
-import * as Markup from "../../js/react";
-import { IconPicker, PropsList, Prop } from "../../../app-typescript";
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import {IconPicker, PropsList, Prop} from '../../../app-typescript';
 
 const IconPickerDocs = () => {
-
     const [value, setValue] = React.useState('amp');
 
     return (
         <section className="docs-page__container">
             <h2 className="docs-page__h2">Icon Picker</h2>
-            <Markup.ReactMarkupCodePreview>{`
+            <Markup.ReactMarkupCodePreview>
+                {`
                     <IconPicker
                         label="Icon"
                         filterPlaceholder="Search..."
@@ -51,15 +51,32 @@ const IconPickerDocs = () => {
 
             <h3 className="docs-page__h3">Props</h3>
             <PropsList>
-                <Prop name='label' isRequired={false} type='string' default='Icon' description='Select label' />
-                <Prop name='filterPlaceholder' isRequired={false} type='string' default='Search...' description='Filter placeholder' />
-                <Prop name='translateFunction' isRequired={false} type='function' default='(text) => text' description='eg: gettext' />
-                <Prop name='value' isRequired={true} type='string' default='null' description='Current value' />
-                <Prop name='onChange' isRequired={true} type='Function' default='null' description='Callback onChange event ' />
+                <Prop name="label" isRequired={false} type="string" default="Icon" description="Select label" />
+                <Prop
+                    name="filterPlaceholder"
+                    isRequired={false}
+                    type="string"
+                    default="Search..."
+                    description="Filter placeholder"
+                />
+                <Prop
+                    name="translateFunction"
+                    isRequired={false}
+                    type="function"
+                    default="(text) => text"
+                    description="eg: gettext"
+                />
+                <Prop name="value" isRequired={true} type="string" default="null" description="Current value" />
+                <Prop
+                    name="onChange"
+                    isRequired={true}
+                    type="Function"
+                    default="null"
+                    description="Callback onChange event "
+                />
             </PropsList>
-
         </section>
-    )
-}
+    );
+};
 
 export default IconPickerDocs;

package/dist/components/IllustrationButton.tsx

@@ -7,7 +7,8 @@ export class IllustrationButtonDoc extends React.Component {
         return (
             <section className="docs-page__container">
                 <h2 className="docs-page__h2">Illustration Button & SVG icon illustration</h2>
-                <Markup.ReactMarkupCodePreview>{`
+                <Markup.ReactMarkupCodePreview>
+                    {`
                     <IllustrationButton text='Headlines' onClick={()=> false}>
                         <SvgIconIllustration illustration='headlines' />
                     </IllustrationButton>
@@ -17,33 +18,34 @@ export class IllustrationButtonDoc extends React.Component {
                     <Markup.ReactMarkupPreview>
                         <div className="docs-page__content-row">
                             {/* Note: The style attribute is added only for the purpose of the demo */}
-                            <div 
-                                className='sd-grid-list sd-grid-list--xx-small sd-grid-list--gap-s sd-grid-list--no-margin'
-                                style={{width:'290px'}}
+                            <div
+                                className="sd-grid-list sd-grid-list--xx-small sd-grid-list--gap-s sd-grid-list--no-margin"
+                                style={{width: '290px'}}
                             >
-                                <IllustrationButton text='Headlines' onClick={()=> false}>
-                                    <SvgIconIllustration illustration='headlines' />
+                                <IllustrationButton text="Headlines" onClick={() => false}>
+                                    <SvgIconIllustration illustration="headlines" />
                                 </IllustrationButton>
 
-                                <IllustrationButton text='Keywords' onClick={()=> false}>
-                                    <SvgIconIllustration illustration='keywords' />
+                                <IllustrationButton text="Keywords" onClick={() => false}>
+                                    <SvgIconIllustration illustration="keywords" />
                                 </IllustrationButton>
 
-                                <IllustrationButton text='Optimise' onClick={()=> false}>
-                                    <SvgIconIllustration illustration='optimise' />
+                                <IllustrationButton text="Optimise" onClick={() => false}>
+                                    <SvgIconIllustration illustration="optimise" />
                                 </IllustrationButton>
 
-                                <IllustrationButton text='Summary' onClick={()=> false}>
-                                    <SvgIconIllustration illustration='summary' />
+                                <IllustrationButton text="Summary" onClick={() => false}>
+                                    <SvgIconIllustration illustration="summary" />
                                 </IllustrationButton>
 
-                                <IllustrationButton text='Translate' onClick={()=> false}>
-                                    <SvgIconIllustration illustration='translate' />
+                                <IllustrationButton text="Translate" onClick={() => false}>
+                                    <SvgIconIllustration illustration="translate" />
                                 </IllustrationButton>
                             </div>
                         </div>
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         // Note: The style attribute is added only for the purpose of the demo
                         <div className='sd-grid-list sd-grid-list--xx-small sd-grid-list--gap-s sd-grid-list--no-margin' style={{width:'290px'}}>
                             <IllustrationButton text='Headlines' onClick={()=> false}>
@@ -69,19 +71,37 @@ export class IllustrationButtonDoc extends React.Component {
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
-                
+
                 <h3 className="docs-page__h3">Props</h3>
                 <h4 className="docs-page__h4">IllustrationButton</h4>
                 <PropsList>
-                    <Prop name='text' isRequired={true} type='string' default='/' description='Button text label'/>
-                    <Prop name='onClick' isRequired={true} type='function' default='false' description='Callback fired when a button is pressed.'/>
-                    <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Disables the Button, preventing mouse events.'/>
+                    <Prop name="text" isRequired={true} type="string" default="/" description="Button text label" />
+                    <Prop
+                        name="onClick"
+                        isRequired={true}
+                        type="function"
+                        default="false"
+                        description="Callback fired when a button is pressed."
+                    />
+                    <Prop
+                        name="disabled"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="Disables the Button, preventing mouse events."
+                    />
                 </PropsList>
 
                 <h3 className="docs-page__h3">Props</h3>
                 <h4 className="docs-page__h4">SvgIconIllustration</h4>
                 <PropsList>
-                    <Prop name='illustration' isRequired={true} type='headlines | keywords | optimise | summary | translate' default='/' description='Choose the desired illustration.'/>
+                    <Prop
+                        name="illustration"
+                        isRequired={true}
+                        type="headlines | keywords | optimise | summary | translate"
+                        default="/"
+                        description="Choose the desired illustration."
+                    />
                 </PropsList>
             </section>
         );