superdesk-ui-framework 4.0.46 → 4.0.48

package/dist/components/BigIconFont.tsx

@@ -1,36 +1,48 @@
 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';
 
 import * as bigIconFont from '../../../app/styles/_big-icon-font.scss';
 
-export default class BigIconFontDoc extends React.PureComponent{
-    render(){
+export default class BigIconFontDoc extends React.PureComponent {
+    render() {
         const array = bigIconFont.icon.split(', ');
-        const icons = array.map((icon, index) =>
+        const icons = array.map((icon, index) => (
             <li key={index}>
-                <Icon name={icon} size='big'/>
+                <Icon name={icon} size="big" />
                 <span>{icon}</span>
             </li>
-            );
-        return(
-            <section className="docs-page__container"> 
+        ));
+        return (
+            <section className="docs-page__container">
                 <h2 className="docs-page__h2 docs-page__text-align--center">Big icon font</h2>
-                <Markup.ReactMarkupCodePreview>{`
+                <Markup.ReactMarkupCodePreview>
+                    {`
                     <Icon name="dashboard" size="big" />
                 `}
                 </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>
+        );
     }
 }

package/dist/components/BoxedList.tsx

@@ -1,14 +1,31 @@
 import * as React from 'react';
 import * as Markup from '../../js/react';
-import { BoxedList, BoxedListItem, BoxedListContentRow, Prop, PropsList, Icon, IconButton, AvatarWrapper, AvatarContentText, ButtonGroup, Button, Heading, Text, Label, Container } from '../../../app-typescript';
+import {
+    BoxedList,
+    BoxedListItem,
+    BoxedListContentRow,
+    Prop,
+    PropsList,
+    Icon,
+    IconButton,
+    AvatarWrapper,
+    AvatarContentText,
+    ButtonGroup,
+    Button,
+    Heading,
+    Text,
+    Label,
+    Container,
+} from '../../../app-typescript';
 
 export default class BoxedListDoc extends React.Component {
     render() {
         return (
-            <section className='docs-page__container'>
-                <h2 className='docs-page__h2'>BoxedList</h2>
-                
-                <Markup.ReactMarkupCodePreview>{`
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">BoxedList</h2>
+
+                <Markup.ReactMarkupCodePreview>
+                    {`
                     <BoxedList>
                         <BoxedListItem>...</BoxedListItem> 
                     </BoxedList>
@@ -23,20 +40,36 @@ export default class BoxedListDoc extends React.Component {
 
                         <BoxedList>
                             <BoxedListItem>None, nulla vitae elit libero, a pharetra augue.</BoxedListItem>
-                            <BoxedListItem type='default'>Default. Nulla vitae elit libero, a pharetra augue.</BoxedListItem>
-                            <BoxedListItem type='success'>Succes, donec sed odio dui.</BoxedListItem>
-                            <BoxedListItem type='warning'>Warning, maecenas sed diam eget risus varius.</BoxedListItem>
-                            <BoxedListItem type='alert'>Alert. Nullam quis risus eget urna mollis ornare vel eu leo.</BoxedListItem>
-                            <BoxedListItem type='highlight'>Highlight type, cras mattis consectetur purus sit amet fermentum.</BoxedListItem>
+                            <BoxedListItem type="default">
+                                Default. Nulla vitae elit libero, a pharetra augue.
+                            </BoxedListItem>
+                            <BoxedListItem type="success">Succes, donec sed odio dui.</BoxedListItem>
+                            <BoxedListItem type="warning">Warning, maecenas sed diam eget risus varius.</BoxedListItem>
+                            <BoxedListItem type="alert">
+                                Alert. Nullam quis risus eget urna mollis ornare vel eu leo.
+                            </BoxedListItem>
+                            <BoxedListItem type="highlight">
+                                Highlight type, cras mattis consectetur purus sit amet fermentum.
+                            </BoxedListItem>
                         </BoxedList>
 
-                        <p className="docs-page__paragraph">// with colored background (affects only success, warning, alert and highlight types)</p>
+                        <p className="docs-page__paragraph">
+                            // with colored background (affects only success, warning, alert and highlight types)
+                        </p>
 
                         <BoxedList>
-                            <BoxedListItem coloredBg type='success'>Succes, donec sed odio dui.</BoxedListItem>
-                            <BoxedListItem coloredBg type='warning'>Warning, maecenas sed diam eget risus varius.</BoxedListItem>
-                            <BoxedListItem coloredBg type='alert'>Alert. Nullam quis risus eget urna mollis ornare vel eu leo.</BoxedListItem>
-                            <BoxedListItem coloredBg type='highlight'>Highlight type, cras mattis consectetur purus sit amet fermentum.</BoxedListItem>
+                            <BoxedListItem coloredBg type="success">
+                                Succes, donec sed odio dui.
+                            </BoxedListItem>
+                            <BoxedListItem coloredBg type="warning">
+                                Warning, maecenas sed diam eget risus varius.
+                            </BoxedListItem>
+                            <BoxedListItem coloredBg type="alert">
+                                Alert. Nullam quis risus eget urna mollis ornare vel eu leo.
+                            </BoxedListItem>
+                            <BoxedListItem coloredBg type="highlight">
+                                Highlight type, cras mattis consectetur purus sit amet fermentum.
+                            </BoxedListItem>
                         </BoxedList>
 
                         <p className="docs-page__paragraph">// clickable, with media and actions</p>
@@ -44,56 +77,57 @@ export default class BoxedListDoc extends React.Component {
                         <BoxedList>
                             <BoxedListItem
                                 type="success"
-                                clickable={true} 
-                                media={(
-                                    <Icon name='slideshow'  />
-                                )}
-                                actions={(
-                                    <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
-                                )}
-                                >
+                                clickable={true}
+                                media={<Icon name="slideshow" />}
+                                actions={
+                                    <IconButton icon="dots-vertical" ariaValue="More actions" onClick={() => false} />
+                                }
+                            >
                                 <BoxedListContentRow>
                                     Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula
-                                    porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Curabitur
-                                    blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes,
-                                    nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.
+                                    porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum.
+                                    Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis
+                                    parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet
+                                    fermentum.
                                 </BoxedListContentRow>
                             </BoxedListItem>
                             <BoxedListItem
                                 type="primary"
-                                clickable={true} 
-                                media={(
+                                clickable={true}
+                                media={
                                     <AvatarWrapper size="medium">
                                         <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
                                     </AvatarWrapper>
-                                )}
-                                actions={(
-                                    <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
-                                )}
-                                >
+                                }
+                                actions={
+                                    <IconButton icon="dots-vertical" ariaValue="More actions" onClick={() => false} />
+                                }
+                            >
                                 <BoxedListContentRow>
-                                    Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque
-                                    nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Nulla
-                                    vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+                                    Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel
+                                    scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla.
+                                    Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Morbi leo risus,
+                                    porta ac consectetur ac, vestibulum at eros.
                                 </BoxedListContentRow>
                             </BoxedListItem>
                             <BoxedListItem
                                 type="alert"
                                 selected={true}
-                                media={(
+                                media={
                                     <AvatarWrapper size="medium">
                                         <AvatarContentText text="WS" tooltipText="Walter Sobchak" />
                                     </AvatarWrapper>
-                                )}
-                                actions={(
-                                    <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
-                                )}
-                                >
+                                }
+                                actions={
+                                    <IconButton icon="dots-vertical" ariaValue="More actions" onClick={() => false} />
+                                }
+                            >
                                 <BoxedListContentRow>
-                                    Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper.
-                                    Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Nullam
-                                    id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. Duis mollis,
-                                    est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
+                                    Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta
+                                    felis euismod semper. Etiam porta sem malesuada magna mollis euismod. Cras mattis
+                                    consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut
+                                    id elit. Vestibulum id ligula porta felis euismod semper. Duis mollis, est non
+                                    commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
                                 </BoxedListContentRow>
                             </BoxedListItem>
                         </BoxedList>
@@ -103,101 +137,119 @@ export default class BoxedListDoc extends React.Component {
                         <BoxedList>
                             <BoxedListItem
                                 type="warning"
-                                clickable={true} 
-                                media={(
-                                    <Icon name='calendar-list'  />
-                                )}
-                                actions={(
-                                    <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
-                                )}
-                                >
+                                clickable={true}
+                                media={<Icon name="calendar-list" />}
+                                actions={
+                                    <IconButton icon="dots-vertical" ariaValue="More actions" onClick={() => false} />
+                                }
+                            >
                                 <BoxedListContentRow>
-                                    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis
-                                    dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna
-                                    mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem
+                                    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer
+                                    posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum
+                                    nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Aenean
+                                    lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem
                                     lacinia quam venenatis vestibulum.
                                 </BoxedListContentRow>
                             </BoxedListItem>
                             <BoxedListItem
                                 type="primary"
-                                clickable={true} 
-                                media={(
+                                clickable={true}
+                                media={
                                     <AvatarWrapper size="medium">
                                         <AvatarContentText text="JC" tooltipText="Joel Coen" />
                                     </AvatarWrapper>
-                                )}
-                                footer={(
-                                    <ButtonGroup align='end'>
-                                        <Button size='small' style='hollow' text='Decline' onClick={()=> false} />
-                                        <Button size='small' style='hollow' type='primary' text='Accept' onClick={()=> false} />
+                                }
+                                footer={
+                                    <ButtonGroup align="end">
+                                        <Button size="small" style="hollow" text="Decline" onClick={() => false} />
+                                        <Button
+                                            size="small"
+                                            style="hollow"
+                                            type="primary"
+                                            text="Accept"
+                                            onClick={() => false}
+                                        />
                                     </ButtonGroup>
-                                )}
-                                >
-                                <Heading className='sd-margin-b--1' type='h5'>Amet Mollis Porta</Heading>
+                                }
+                            >
+                                <Heading className="sd-margin-b--1" type="h5">
+                                    Amet Mollis Porta
+                                </Heading>
                                 <BoxedListContentRow>
-                                    Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.
-                                    Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
-                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper.
+                                    Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh
+                                    ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Integer
+                                    posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit
+                                    amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper.
                                     Cras mattis consectetur purus sit amet fermentum.
                                 </BoxedListContentRow>
                             </BoxedListItem>
                             <BoxedListItem
                                 type="success"
-                                clickable={true} 
-                                media={(
+                                clickable={true}
+                                media={
                                     <AvatarWrapper size="medium">
                                         <AvatarContentText text="EC" tooltipText="Ethan Coen" />
                                     </AvatarWrapper>
-                                )}
-                                actions={(
+                                }
+                                actions={
                                     <React.Fragment>
-                                        <IconButton icon="pencil" ariaValue="Edit" onClick={()=> false} />
-                                        <IconButton icon="trash" ariaValue="Delete" onClick={()=> false} />
+                                        <IconButton icon="pencil" ariaValue="Edit" onClick={() => false} />
+                                        <IconButton icon="trash" ariaValue="Delete" onClick={() => false} />
                                     </React.Fragment>
-                                )}
-                                >
+                                }
+                            >
                                 <BoxedListContentRow>
-                                    Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-                                    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.
+                                    Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel
+                                    scelerisque nisl consectetur et. 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.
                                 </BoxedListContentRow>
                                 <BoxedListContentRow>
-                                    <Label type='success' text='In progress' style='translucent' />
+                                    <Label type="success" text="In progress" style="translucent" />
                                 </BoxedListContentRow>
                             </BoxedListItem>
                             <BoxedListItem
                                 type="warning"
-                                clickable={true} 
-                                media={(
+                                clickable={true}
+                                media={
                                     <AvatarWrapper size="medium">
                                         <AvatarContentText text="BL" tooltipText="Bunny Lebowski" />
                                     </AvatarWrapper>
-                                )}
-                                actions={(
-                                    <IconButton icon="pencil" ariaValue="Edit" onClick={()=> false} />
-                                )}
-                                footer={(
-                                    <ButtonGroup align='end'>
-                                        <Button size='small' style='hollow' text='Decline' onClick={()=> false} />
-                                        <Button size='small' style='hollow' type='primary' text='Accept' onClick={()=> false} />
+                                }
+                                actions={<IconButton icon="pencil" ariaValue="Edit" onClick={() => false} />}
+                                footer={
+                                    <ButtonGroup align="end">
+                                        <Button size="small" style="hollow" text="Decline" onClick={() => false} />
+                                        <Button
+                                            size="small"
+                                            style="hollow"
+                                            type="primary"
+                                            text="Accept"
+                                            onClick={() => false}
+                                        />
                                     </ButtonGroup>
-                                )}
-                                >
+                                }
+                            >
                                 <BoxedListContentRow>
-                                    <Heading className='sd-margin-e--auto' align='start' type='h4'>Dolor Bibenduma</Heading>
-                                    <Text align='end' color='light'>23.12.2021</Text>
+                                    <Heading className="sd-margin-e--auto" align="start" type="h4">
+                                        Dolor Bibenduma
+                                    </Heading>
+                                    <Text align="end" color="light">
+                                        23.12.2021
+                                    </Text>
                                 </BoxedListContentRow>
                                 <BoxedListContentRow>
                                     <Text>
-                                        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam
-                                        venenatis vestibulum. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.
+                                        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam.
+                                        Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui.
+                                        Nullam quis risus eget urna mollis ornare vel eu leo.
                                     </Text>
                                 </BoxedListContentRow>
                             </BoxedListItem>
                         </BoxedList>
-
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         // basic
 
                         <BoxedList>
@@ -364,24 +416,102 @@ export default class BoxedListDoc extends React.Component {
                 <h3 className="docs-page__h3">Props</h3>
                 <p className="docs-page__paragraph">BoxedList</p>
                 <PropsList>
-                    <Prop name='density' isRequired={false} type='compact | comfortable' default='compact' description='Increase the gap beetween list items.'/>
+                    <Prop
+                        name="density"
+                        isRequired={false}
+                        type="compact | comfortable"
+                        default="compact"
+                        description="Increase the gap beetween list items."
+                    />
                 </PropsList>
                 <p className="docs-page__paragraph">BoxedListItem</p>
                 <PropsList>
-                    <Prop name='density' isRequired={false} type='compact | comfortable | loose' default='comfortable' description='Changes the outside padding of the list item.'/>
-                    <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight' default='/' description='Adds a clour coded border on the right, based on the selected type.'/>
-                    <Prop name='clickable' isRequired={false} type='boolean' default='false' description='Adds hover effect and changes the cursor to poiter.'/>
-                    <Prop name='selected' isRequired={false} type='boolean' default='false' description='Changes the state to selected and adds apropriate styling for it.'/>
-                    <Prop name='unread' isRequired={false} type='boolean' default='false' description='Changes the state to unread and adds apropriate styling for it.'/>
-                    <Prop name='alignVertical' isRequired={false} type='start | center' default='/' description='Changes the verticla alignment of the content inside list items.'/>
-                    <Prop name='slideInActions' isRequired={false} type='boolean' default='false' description='If set to true, the action buttons will be hidden and slide in from the right on hover.'/>
-                    <Prop name='coloredBg' isRequired={false} type='boolean' default='false' description='Adds a colored background to the list item (affects only success, warning, alert and highlight types).'/>
-                    <Prop name='onClick' isRequired={false} type='function' default='/' description='Callback fired when pressed (combine with clickable prop).'/>
-                    <Prop name='media' isRequired={false} type='React.ReactNode' default='/' description='Adds a media element (icon, avatar, etc.) to the list item.'/>
-                    <Prop name='footer' isRequired={false} type='React.ReactNode' default='/' description='Adds a footer to the list item.'/>
-                    <Prop name='actions' isRequired={false} type='React.ReactNode' default='/' description='Adds a actions to the list item.'/>
+                    <Prop
+                        name="density"
+                        isRequired={false}
+                        type="compact | comfortable | loose"
+                        default="comfortable"
+                        description="Changes the outside padding of the list item."
+                    />
+                    <Prop
+                        name="type"
+                        isRequired={false}
+                        type="default | primary | success | warning | alert | highlight"
+                        default="/"
+                        description="Adds a clour coded border on the right, based on the selected type."
+                    />
+                    <Prop
+                        name="clickable"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="Adds hover effect and changes the cursor to poiter."
+                    />
+                    <Prop
+                        name="selected"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="Changes the state to selected and adds apropriate styling for it."
+                    />
+                    <Prop
+                        name="unread"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="Changes the state to unread and adds apropriate styling for it."
+                    />
+                    <Prop
+                        name="alignVertical"
+                        isRequired={false}
+                        type="start | center"
+                        default="/"
+                        description="Changes the verticla alignment of the content inside list items."
+                    />
+                    <Prop
+                        name="slideInActions"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="If set to true, the action buttons will be hidden and slide in from the right on hover."
+                    />
+                    <Prop
+                        name="coloredBg"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="Adds a colored background to the list item (affects only success, warning, alert and highlight types)."
+                    />
+                    <Prop
+                        name="onClick"
+                        isRequired={false}
+                        type="function"
+                        default="/"
+                        description="Callback fired when pressed (combine with clickable prop)."
+                    />
+                    <Prop
+                        name="media"
+                        isRequired={false}
+                        type="React.ReactNode"
+                        default="/"
+                        description="Adds a media element (icon, avatar, etc.) to the list item."
+                    />
+                    <Prop
+                        name="footer"
+                        isRequired={false}
+                        type="React.ReactNode"
+                        default="/"
+                        description="Adds a footer to the list item."
+                    />
+                    <Prop
+                        name="actions"
+                        isRequired={false}
+                        type="React.ReactNode"
+                        default="/"
+                        description="Adds a actions to the list item."
+                    />
                 </PropsList>
             </section>
-        )
+        );
     }
 }