superdesk-ui-framework 4.0.46 → 4.0.48

package/dist/components/Avatar.tsx

@@ -7,32 +7,32 @@ import {IAvatarInGroup, IAvatarPlaceholderInGroup} from '../../../app-typescript
 const avatars: Array<IAvatarInGroup> = [
     {
         imageUrl: 'avatar.jpg',
-        initials: "U1",
+        initials: 'U1',
         displayName: 'User1',
     },
     {
         imageUrl: null,
-        initials: "U2",
+        initials: 'U2',
         displayName: 'User2',
     },
     {
         imageUrl: null,
-        initials: "U3",
+        initials: 'U3',
         displayName: 'User3',
     },
     {
         imageUrl: 'avatar-3.jpg',
-        initials: "U4",
+        initials: 'U4',
         displayName: 'User4',
     },
     {
         imageUrl: 'avatar-4.jpg',
-        initials: "U5",
+        initials: 'U5',
         displayName: 'User5',
     },
     {
         imageUrl: null,
-        initials: "A6",
+        initials: 'A6',
         displayName: 'User6',
     },
 ];
@@ -43,7 +43,8 @@ export default class AvatarDoc extends React.PureComponent {
             <section className="docs-page__container">
                 <h2 className="docs-page__h2">Avatar</h2>
 
-                <Markup.ReactMarkupCodePreview>{`
+                <Markup.ReactMarkupCodePreview>
+                    {`
                     <Avatar
                         size="large"
                         imageUrl="/avatar.jpg"
@@ -56,12 +57,11 @@ export default class AvatarDoc extends React.PureComponent {
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <p className="docs-page__paragraph">// Combo</p>
-                        <Container gap='medium' className='sd-margin-b--3'>
-
+                        <Container gap="medium" className="sd-margin-b--3">
                             <Avatar
                                 displayName="Jeffrey Lebowski"
                                 imageUrl="/avatar.jpg"
-                                initials='Jeffrey Lebowski'
+                                initials="Jeffrey Lebowski"
                                 size="large"
                                 icon={{name: 'print', color: 'red'}}
                                 statusIndicator="online"
@@ -81,17 +81,15 @@ export default class AvatarDoc extends React.PureComponent {
                             <Avatar
                                 displayName="Jeffrey Lebowski"
                                 imageUrl={null}
-                                initials='Jeffrey Lebowski'
+                                initials="Jeffrey Lebowski"
                                 size="large"
                                 icon={{name: 'print', color: 'var(--sd-colour-state--done)'}}
                                 administratorIndicator
                             />
-
                         </Container>
 
                         <p className="docs-page__paragraph">// Basic with size variations</p>
-                        <Container gap='medium' className='sd-margin-b--3'>
-
+                        <Container gap="medium" className="sd-margin-b--3">
                             <Avatar
                                 size="x-small"
                                 imageUrl="/avatar.jpg"
@@ -99,26 +97,11 @@ export default class AvatarDoc extends React.PureComponent {
                                 displayName="Jeffrey Lebowski"
                             />
 
-                            <Avatar
-                                size="small"
-                                imageUrl="/avatar.jpg"
-                                initials="JL"
-                                displayName="Jeffrey Lebowski"
-                            />
+                            <Avatar size="small" imageUrl="/avatar.jpg" initials="JL" displayName="Jeffrey Lebowski" />
 
-                            <Avatar
-                                size="medium"
-                                imageUrl="/avatar.jpg"
-                                initials="JL"
-                                displayName="Jeffrey Lebowski"
-                            />
+                            <Avatar size="medium" imageUrl="/avatar.jpg" initials="JL" displayName="Jeffrey Lebowski" />
 
-                            <Avatar
-                                size="large"
-                                imageUrl="/avatar.jpg"
-                                initials="JL"
-                                displayName="Jeffrey Lebowski"
-                            />
+                            <Avatar size="large" imageUrl="/avatar.jpg" initials="JL" displayName="Jeffrey Lebowski" />
 
                             <Avatar
                                 size="x-large"
@@ -133,12 +116,10 @@ export default class AvatarDoc extends React.PureComponent {
                                 initials="JL"
                                 displayName="Jeffrey Lebowski"
                             />
-
                         </Container>
 
                         <p className="docs-page__paragraph">// With status indicator</p>
-                        <Container gap='medium' className='sd-margin-b--3'>
-
+                        <Container gap="medium" className="sd-margin-b--3">
                             <Avatar
                                 size="large"
                                 imageUrl="/avatar.jpg"
@@ -146,11 +127,10 @@ export default class AvatarDoc extends React.PureComponent {
                                 displayName="Jeffrey Lebowski"
                                 statusIndicator="online"
                             />
-
                         </Container>
 
                         <p className="docs-page__paragraph">// With administrator indicator</p>
-                        <Container gap='medium' className='sd-margin-b--3'>
+                        <Container gap="medium" className="sd-margin-b--3">
                             <Avatar
                                 size="large"
                                 imageUrl="/avatar.jpg"
@@ -161,8 +141,7 @@ export default class AvatarDoc extends React.PureComponent {
                         </Container>
 
                         <p className="docs-page__paragraph">// With icon</p>
-                        <Container gap='medium' className='sd-margin-b--3'>
-
+                        <Container gap="medium" className="sd-margin-b--3">
                             <Avatar
                                 size="x-small"
                                 imageUrl={null}
@@ -200,14 +179,11 @@ export default class AvatarDoc extends React.PureComponent {
                                 imageUrl={null}
                                 initials={null}
                                 displayName="Unassigned"
-                                noAvatarPlaceholderColor='subtle'
+                                noAvatarPlaceholderColor="subtle"
                                 icon={{name: 'text', color: 'var(--sd-colour-state--canceled)'}}
                             />
 
-                            <AvatarPlaceholder 
-                                kind='plus-button'
-                                size='x-large'
-                            />
+                            <AvatarPlaceholder kind="plus-button" size="x-large" />
 
                             <Avatar
                                 size="x-large"
@@ -224,11 +200,10 @@ export default class AvatarDoc extends React.PureComponent {
                                 displayName="Jeffrey Lebowski"
                                 icon={{name: 'video-cancel', color: 'var(--sd-colour-state--canceled)'}}
                             />
-
                         </Container>
                         <p className="docs-page__paragraph">// With icon and Coverage status indicator</p>
-                        <Container gap='medium' className='sd-margin-b--3'>
-                            <Avatar 
+                        <Container gap="medium" className="sd-margin-b--3">
+                            <Avatar
                                 displayName="Unassigned"
                                 imageUrl={null}
                                 initials={null}
@@ -236,7 +211,7 @@ export default class AvatarDoc extends React.PureComponent {
                                 icon={{name: 'text', color: 'var(--sd-colour-state--assigned)'}}
                                 statusDot={{color: 'var(--sd-colour-coverage-state--on-merit)'}}
                             />
-                            <Avatar 
+                            <Avatar
                                 displayName="Unassigned"
                                 imageUrl={null}
                                 initials={null}
@@ -247,7 +222,8 @@ export default class AvatarDoc extends React.PureComponent {
                         </Container>
                     </Markup.ReactMarkupPreview>
 
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         // Combo
 
                         <Avatar
@@ -448,131 +424,94 @@ export default class AvatarDoc extends React.PureComponent {
                 </Markup.ReactMarkup>
 
                 <h3 className="docs-page__h3 docs-page__h3--small-top-m">AvatarGroup</h3>
-                <p className='docs-page__paragraph'></p>
+                <p className="docs-page__paragraph"></p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <p className="docs-page__paragraph">// With action</p>
-                        <AvatarGroup
-                            size="x-small"
-                            items={avatars}
-                        />
+                        <AvatarGroup size="x-small" items={avatars} />
 
                         <br />
 
-                        <AvatarGroup
-                            size="small"
-                            items={avatars}
-                        />
+                        <AvatarGroup size="small" items={avatars} />
 
                         <br />
 
-                        <AvatarGroup
-                            size="medium"
-                            items={avatars}
-                        />
+                        <AvatarGroup size="medium" items={avatars} />
 
                         <br />
 
-                        <AvatarGroup
-                            size="large"
-                            items={avatars}
-                            max={4}
-                        />
+                        <AvatarGroup size="large" items={avatars} max={4} />
 
                         <br />
 
-                        <AvatarGroup
-                            size="x-large"
-                            items={avatars}
-                        />
+                        <AvatarGroup size="x-large" items={avatars} />
 
-                        <AvatarGroup
-                            size="xx-large"
-                            items={avatars}
-                        />
+                        <AvatarGroup size="xx-large" items={avatars} />
 
                         <p className="docs-page__paragraph">// With icons</p>
                         {(() => {
                             const avatars: Array<IAvatarInGroup> = [
                                 {
                                     imageUrl: 'avatar.jpg',
-                                    initials: "U1",
+                                    initials: 'U1',
                                     displayName: 'User1',
-                                    icon:{name: 'print', color: 'red'},
+                                    icon: {name: 'print', color: 'red'},
                                 },
                                 {
                                     imageUrl: null,
-                                    initials: "U2",
+                                    initials: 'U2',
                                     displayName: 'User2',
-                                    icon:{name: 'print', color: 'green'},
+                                    icon: {name: 'print', color: 'green'},
                                 },
                                 {
                                     imageUrl: null,
-                                    initials: "U3",
+                                    initials: 'U3',
                                     displayName: 'User3',
-                                    icon:{name: 'print', color: 'var(--sd-colour-state--in-workflow)'},
+                                    icon: {name: 'print', color: 'var(--sd-colour-state--in-workflow)'},
                                 },
                                 {
                                     imageUrl: 'avatar-3.jpg',
-                                    initials: "U4",
+                                    initials: 'U4',
                                     displayName: 'User4',
-                                    icon:{name: 'print', color: 'var(--sd-colour-state--in-progress)'},
+                                    icon: {name: 'print', color: 'var(--sd-colour-state--in-progress)'},
                                 },
                                 {
                                     imageUrl: 'avatar-4.jpg',
-                                    initials: "U5",
+                                    initials: 'U5',
                                     displayName: 'User5',
-                                    icon:{name: 'print', color: 'var(--sd-colour-highlight)'},
+                                    icon: {name: 'print', color: 'var(--sd-colour-highlight)'},
                                 },
                                 {
                                     imageUrl: null,
-                                    initials: "U6",
+                                    initials: 'U6',
                                     displayName: 'User6',
-                                    icon:{name: 'print', color: 'var(--sd-colour-state--in-progress)'},
+                                    icon: {name: 'print', color: 'var(--sd-colour-state--in-progress)'},
                                 },
                             ];
 
                             return (
                                 <>
-                                    <AvatarGroup
-                                        size="x-small"
-                                        items={avatars}
-                                    />
+                                    <AvatarGroup size="x-small" items={avatars} />
 
                                     <br />
 
-                                    <AvatarGroup
-                                        size="small"
-                                        items={avatars}
-                                    />
+                                    <AvatarGroup size="small" items={avatars} />
 
                                     <br />
 
-                                    <AvatarGroup
-                                        size="medium"
-                                        items={avatars}
-                                    />
+                                    <AvatarGroup size="medium" items={avatars} />
 
                                     <br />
 
-                                    <AvatarGroup
-                                        size="large"
-                                        items={avatars}
-                                    />
+                                    <AvatarGroup size="large" items={avatars} />
 
                                     <br />
 
-                                    <AvatarGroup
-                                        size="x-large"
-                                        items={avatars}
-                                    />
+                                    <AvatarGroup size="x-large" items={avatars} />
 
                                     <br />
 
-                                    <AvatarGroup
-                                        size="xx-large"
-                                        items={avatars}
-                                    />
+                                    <AvatarGroup size="xx-large" items={avatars} />
 
                                     <br />
                                 </>
@@ -580,7 +519,8 @@ export default class AvatarDoc extends React.PureComponent {
                         })()}
                     </Markup.ReactMarkupPreview>
 
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         // Various sizes
 
                         <AvatarGroup

package/dist/components/Badges.tsx

@@ -2,44 +2,51 @@ import * as React from 'react';
 
 import * as Markup from '../../js/react';
 
-import { Badge, Button, Prop, PropsList } from '../../../app-typescript';
+import {Badge, Button, Prop, PropsList} from '../../../app-typescript';
 export default class BadgeDoc extends React.Component {
     render() {
-
         return (
             <section className="docs-page__container">
                 <h2 className="docs-page__h2">Badge</h2>
-                <Markup.ReactMarkupCodePreview>{`
+                <Markup.ReactMarkupCodePreview>
+                    {`
                    <Badge text='2' type='primary' />
                 `}
                 </Markup.ReactMarkupCodePreview>
-                <p className="docs-page__paragraph">Badges are inline styles that can be dropped into a text. They are usualy used for displaying digits or single uppercase letters. For full words the Label component should be used.</p>
+                <p className="docs-page__paragraph">
+                    Badges are inline styles that can be dropped into a text. They are usualy used for displaying digits
+                    or single uppercase letters. For full words the Label component should be used.
+                </p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <p className="docs-page__paragraph">// Circle (default)</p>
-                        <div className='docs-page__content-row'>
-                            <Badge text='1' />
-                            <Badge text='2' type='primary' />
-                            <Badge text='a' type='success' />
-                            <Badge text='b' type='warning' />
-                            <Badge text='6' type='alert' />
-                            <Badge text='2318' type='highlight' />
-                            <Badge text='76' type='light' />
+                        <div className="docs-page__content-row">
+                            <Badge text="1" />
+                            <Badge text="2" type="primary" />
+                            <Badge text="a" type="success" />
+                            <Badge text="b" type="warning" />
+                            <Badge text="6" type="alert" />
+                            <Badge text="2318" type="highlight" />
+                            <Badge text="76" type="light" />
                         </div>
 
                         <p className="docs-page__paragraph">// Square</p>
-                        <p className="docs-page__paragraph--small">Use this version only for single digits or numbers. For longer text use the <code>.label</code> class.</p>
-                        <div className='docs-page__content-row'>
-                            <Badge text='1' />
-                            <Badge text='2' type='primary' shape='square' />
-                            <Badge text='a' type='success' shape='square' />
-                            <Badge text='b' type='warning' shape='square' />
-                            <Badge text='6' type='alert' shape='square' />
-                            <Badge text='d' type='highlight' shape='square' />
-                            <Badge text='9' type='light' shape='square' />
+                        <p className="docs-page__paragraph--small">
+                            Use this version only for single digits or numbers. For longer text use the{' '}
+                            <code>.label</code> class.
+                        </p>
+                        <div className="docs-page__content-row">
+                            <Badge text="1" />
+                            <Badge text="2" type="primary" shape="square" />
+                            <Badge text="a" type="success" shape="square" />
+                            <Badge text="b" type="warning" shape="square" />
+                            <Badge text="6" type="alert" shape="square" />
+                            <Badge text="d" type="highlight" shape="square" />
+                            <Badge text="9" type="light" shape="square" />
                         </div>
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         // Circle (default)
                         <Badge text='1'/>
                         <Badge text='2' type='primary' />
@@ -61,46 +68,56 @@ export default class BadgeDoc extends React.Component {
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
                 <h3 className="docs-page__h3">Colours</h3>
-                <p className="docs-page__paragraph">By default, badges use the standard semantic colour palette (e.g. primary, success, warning etc.). Due to the considerable use of the badge component in Superdesk the standard palette is often not enough. In such cases, the colours can be extended by adding the <code>color</code> prop with a value of any of the colours from the <a className='link' href='#/components/colors' target='blank'>extended colour palette</a>.</p>
+                <p className="docs-page__paragraph">
+                    By default, badges use the standard semantic colour palette (e.g. primary, success, warning etc.).
+                    Due to the considerable use of the badge component in Superdesk the standard palette is often not
+                    enough. In such cases, the colours can be extended by adding the <code>color</code> prop with a
+                    value of any of the colours from the{' '}
+                    <a className="link" href="#/components/colors" target="blank">
+                        extended colour palette
+                    </a>
+                    .
+                </p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <p className="docs-page__paragraph">// Basic colour palette</p>
-                        <div className='docs-page__content-row'>
-                            <Badge text='1' shape='square' />
-                            <Badge text='A' type='primary' shape='square' />
-                            <Badge text='2' type='success' shape='square' />
-                            <Badge text='B' type='warning' shape='square' />
-                            <Badge text='3' type='alert' />
-                            <Badge text='C' type='highlight' />
-                            <Badge text='4' type='light' />
+                        <div className="docs-page__content-row">
+                            <Badge text="1" shape="square" />
+                            <Badge text="A" type="primary" shape="square" />
+                            <Badge text="2" type="success" shape="square" />
+                            <Badge text="B" type="warning" shape="square" />
+                            <Badge text="3" type="alert" />
+                            <Badge text="C" type="highlight" />
+                            <Badge text="4" type="light" />
                         </div>
                         <p className="docs-page__paragraph">// Extended colour palette examples</p>
-                        <div className='docs-page__content-row'>
-                            <Badge text='1' color='indigo--300' />
-                            <Badge text='2' color='indigo--400' />
-                            <Badge text='3' color='indigo--500' />
-                            <Badge text='A' color='deep-orange--400' shape='square' />
-                            <Badge text='B' color='deep-orange--500' shape='square' />
-                            <Badge text='C' color='deep-orange--600' shape='square' />
-                            <Badge text='4' color='light-green--500' />
-                            <Badge text='5' color='light-green--600' />
-                            <Badge text='6' color='light-green--700' />
-                            <Badge text='D' color='purple--300' shape='square' />
-                            <Badge text='E' color='purple--400' shape='square' />
-                            <Badge text='F' color='purple--500' shape='square' />
+                        <div className="docs-page__content-row">
+                            <Badge text="1" color="indigo--300" />
+                            <Badge text="2" color="indigo--400" />
+                            <Badge text="3" color="indigo--500" />
+                            <Badge text="A" color="deep-orange--400" shape="square" />
+                            <Badge text="B" color="deep-orange--500" shape="square" />
+                            <Badge text="C" color="deep-orange--600" shape="square" />
+                            <Badge text="4" color="light-green--500" />
+                            <Badge text="5" color="light-green--600" />
+                            <Badge text="6" color="light-green--700" />
+                            <Badge text="D" color="purple--300" shape="square" />
+                            <Badge text="E" color="purple--400" shape="square" />
+                            <Badge text="F" color="purple--500" shape="square" />
                         </div>
 
                         <p className="docs-page__paragraph">// Custom hex colours</p>
-                        <div className='docs-page__content-row'>
-                            <Badge text='1' hexColor='#008773' />
-                            <Badge text='2' hexColor='#0000FF' />
-                            <Badge text='3' hexColor='#00D100' />
-                            <Badge text='4' hexColor='#5531D9' shape='square' />
-                            <Badge text='5' hexColor='#960E0F' shape='square' />
-                            <Badge text='6' hexColor='#DB60FF' shape='square' />
+                        <div className="docs-page__content-row">
+                            <Badge text="1" hexColor="#008773" />
+                            <Badge text="2" hexColor="#0000FF" />
+                            <Badge text="3" hexColor="#00D100" />
+                            <Badge text="4" hexColor="#5531D9" shape="square" />
+                            <Badge text="5" hexColor="#960E0F" shape="square" />
+                            <Badge text="6" hexColor="#DB60FF" shape="square" />
                         </div>
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         // Basic colour palette
                         <Badge text='1' shape='square'/>
                         <Badge text='A' type='primary' shape='square'/>
@@ -134,22 +151,25 @@ export default class BadgeDoc extends React.Component {
                 </Markup.ReactMarkup>
 
                 <h3 className="docs-page__h3">Element with badge</h3>
-                <p className="docs-page__paragraph">Wrap another component with the Badge component, so that badge is applied to its children.</p>
+                <p className="docs-page__paragraph">
+                    Wrap another component with the Badge component, so that badge is applied to its children.
+                </p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <div className='docs-page__content-row'>
-                            <Badge text='8' type='primary'>
-                                <Button text='default' onClick={() => false} />
+                        <div className="docs-page__content-row">
+                            <Badge text="8" type="primary">
+                                <Button text="default" onClick={() => false} />
                             </Badge>
-                            <Badge text='6'>
-                                <Button text='primary' type='primary' onClick={() => false} />
+                            <Badge text="6">
+                                <Button text="primary" type="primary" onClick={() => false} />
                             </Badge>
-                            <Badge text='4' type='highlight'>
-                                <Button text='hollow' style='hollow' onClick={() => false} />
+                            <Badge text="4" type="highlight">
+                                <Button text="hollow" style="hollow" onClick={() => false} />
                             </Badge>
                         </div>
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         <Badge text='8' type='primary'>
                             <Button text='default' onClick={()=> false} />
                         </Badge>
@@ -165,13 +185,37 @@ export default class BadgeDoc extends React.Component {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='text' isRequired={false} type='string' default='/' description='Badge 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='color' isRequired={false} type='string' default='/' description='Extended color palette from the framework (e.g. red--500);  NOTE: The badge can have either a Type or Color defined, not both at the same time.' />
-                    <Prop name='shape' isRequired={false} type='round | square' default='round' description='Make shape of badge square or default round.' />
-                    <Prop name='hexColor' isRequired={false} type='string' default='/' description='Define a custom Hex colour for the Badge.'/>
+                    <Prop name="text" isRequired={false} type="string" default="/" description="Badge 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="color"
+                        isRequired={false}
+                        type="string"
+                        default="/"
+                        description="Extended color palette from the framework (e.g. red--500);  NOTE: The badge can have either a Type or Color defined, not both at the same time."
+                    />
+                    <Prop
+                        name="shape"
+                        isRequired={false}
+                        type="round | square"
+                        default="round"
+                        description="Make shape of badge square or default round."
+                    />
+                    <Prop
+                        name="hexColor"
+                        isRequired={false}
+                        type="string"
+                        default="/"
+                        description="Define a custom Hex colour for the Badge."
+                    />
                 </PropsList>
             </section>
-        )
+        );
     }
 }