superdesk-ui-framework 4.0.46 → 4.0.48

package/dist/components/Togglebox.tsx

@@ -1,64 +1,89 @@
-import * as React from "react";
-import * as Markup from "../../js/react";
-import { PropsList, Prop, Badge, Icon, Label, AvatarGroup, ContentDivider, FormLabel, Text } from "../../../app-typescript";
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import {
+    PropsList,
+    Prop,
+    Badge,
+    Icon,
+    Label,
+    AvatarGroup,
+    ContentDivider,
+    FormLabel,
+    Text,
+} from '../../../app-typescript';
 import {ToggleBox} from './../../../app-typescript/components/ToggleBox/index';
 import {IAvatarInGroup} from '../../../app-typescript/components/avatar/avatar-group';
 
 const avatars: Array<IAvatarInGroup> = [
     {
         imageUrl: null,
-        initials: "VS",
+        initials: 'VS',
         displayName: 'Vladimir Stefanovic',
-        icon:{name: 'text', color: 'var(--sd-colour-highlight)'},
+        icon: {name: 'text', color: 'var(--sd-colour-highlight)'},
     },
     {
         imageUrl: null,
-        initials: "JL",
+        initials: 'JL',
         displayName: 'Jeffrey Lebowski',
-        icon:{name: 'photo', color: 'var(--sd-colour-highlight)'}
+        icon: {name: 'photo', color: 'var(--sd-colour-highlight)'},
     },
     {
         imageUrl: null,
-        initials: "WS",
+        initials: 'WS',
         displayName: 'Walter Sobchak',
-        icon:{name: 'video', color: 'var(--sd-colour-highlight)'}
+        icon: {name: 'video', color: 'var(--sd-colour-highlight)'},
     },
     {
         imageUrl: null,
-        initials: "ML",
+        initials: 'ML',
         displayName: 'Maude Lebowski',
-        icon:{name: 'file', color: 'var(--sd-colour-highlight)'}
+        icon: {name: 'file', color: 'var(--sd-colour-highlight)'},
     },
 ];
 
-
 const ToggleboxDocs = () => {
     return (
         <section className="docs-page__container">
             <h2 className="docs-page__h2">Togglebox</h2>
-            <Markup.ReactMarkupCodePreview>{`
+            <Markup.ReactMarkupCodePreview>
+                {`
                     <ToggleBox variant="simple" title="togglebox title">togglebox content</ToggleBox>
                 `}
             </Markup.ReactMarkupCodePreview>
             <p className="docs-page__paragraph">Simple ToggleBox:</p>
             <Markup.ReactMarkup>
                 <Markup.ReactMarkupPreview>
-                    <div style={{ marginTop: "2em" }}>
-                        <ToggleBox variant="simple" title="Simple togglebox">Togglebox content</ToggleBox>
-                        <ToggleBox variant='simple' title="With badge" badge={<Badge text='2' type='primary' />}>Togglebox content</ToggleBox>
-                        <ToggleBox variant='simple' title="Togglebox - circled chevron" circledChevron={true}>Togglebox content</ToggleBox>
-                        <ToggleBox variant='simple' title="Large title" largeTitle={true} circledChevron={true}>
+                    <div style={{marginTop: '2em'}}>
+                        <ToggleBox variant="simple" title="Simple togglebox">
+                            Togglebox content
+                        </ToggleBox>
+                        <ToggleBox variant="simple" title="With badge" badge={<Badge text="2" type="primary" />}>
+                            Togglebox content
+                        </ToggleBox>
+                        <ToggleBox variant="simple" title="Togglebox - circled chevron" circledChevron={true}>
+                            Togglebox content
+                        </ToggleBox>
+                        <ToggleBox variant="simple" title="Large title" largeTitle={true} circledChevron={true}>
                             <div className="px-4 text-sm line-height-lg">
-                                <p className="mb-2">Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue.
-                                Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
-                                Curabitur blandit tempus porttitor.</p>
+                                <p className="mb-2">
+                                    Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit
+                                    libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Integer
+                                    posuere erat a ante venenatis dapibus posuere velit aliquet. Curabitur blandit
+                                    tempus porttitor.
+                                </p>
 
-                                <p className="mb-2">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo.
-                                Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere
-                                erat a ante venenatis dapibus posuere velit aliquet.</p>
+                                <p className="mb-2">
+                                    Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis
+                                    risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget
+                                    metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a
+                                    ante venenatis dapibus posuere velit aliquet.
+                                </p>
 
-                                <p className="">Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id
-                                ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+                                <p className="">
+                                    Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur
+                                    ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Cras justo
+                                    odio, dapibus ac facilisis in, egestas eget quam.
+                                </p>
                             </div>
                         </ToggleBox>
                     </div>
@@ -73,52 +98,57 @@ const ToggleboxDocs = () => {
             <p className="docs-page__paragraph">Custom header ToggleBox:</p>
             <Markup.ReactMarkup>
                 <Markup.ReactMarkupPreview>
-                    <div style={{ marginTop: "2em" }}>
+                    <div style={{marginTop: '2em'}}>
                         <ToggleBox
-                            variant='custom-header'
+                            variant="custom-header"
                             header={
                                 <div role="listitem" className="sd-list-item sd-list-item--no-hover">
                                     <div className="sd-list-item__border sd-list-item__border--locked"></div>
                                     <div className="sd-list-item__column sd-list-item__column--no-border pe-0-5">
-                                        <Icon type='primary' name='calendar' scale='1.5x' ariaHidden={true} />
+                                        <Icon type="primary" name="calendar" scale="1.5x" ariaHidden={true} />
                                     </div>
                                     <div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
                                         <div className="sd-list-item__row">
                                             <span className="sd-list-item__slugline">Planning Slugline</span>
                                         </div>
                                         <div className="sd-list-item__row sd-list-item__row--overflow-visible me-1 mb-1-5">
-                                            <Label text='draft' style='translucent'/>
+                                            <Label text="draft" style="translucent" />
                                             <span className="sd-margin-s--auto">
-                                            <AvatarGroup
-                                                size="x-small"
-                                                items={avatars}
-                                            />
+                                                <AvatarGroup size="x-small" items={avatars} />
                                             </span>
                                         </div>
                                     </div>
                                 </div>
                             }
-                            getToggleButtonLabel={(open) => open ? 'show less' : 'show more'}
+                            getToggleButtonLabel={(open) => (open ? 'show less' : 'show more')}
                             onToggle={(isOpen) => false}
                         >
                             <div>
-                                <FormLabel text='Name'/>
-                                <Text size='small' weight='medium'>Australian Open 2024</Text>
+                                <FormLabel text="Name" />
+                                <Text size="small" weight="medium">
+                                    Australian Open 2024
+                                </Text>
                             </div>
-                            <ContentDivider type="dashed" margin='x-small' />
+                            <ContentDivider type="dashed" margin="x-small" />
                             <div>
-                                <FormLabel text='Current Date'/>
-                                <Text size='small' weight='medium'>05.02.2024 @ 10:00</Text>
+                                <FormLabel text="Current Date" />
+                                <Text size="small" weight="medium">
+                                    05.02.2024 @ 10:00
+                                </Text>
                             </div>
-                            <ContentDivider type="dashed" margin='x-small' />
+                            <ContentDivider type="dashed" margin="x-small" />
                             <div>
-                                <FormLabel text='Current Repeat Summary'/>
-                                <Text size='small' weight='medium'>Every 1 day(s) until CET 28 Feb 2024</Text>
+                                <FormLabel text="Current Repeat Summary" />
+                                <Text size="small" weight="medium">
+                                    Every 1 day(s) until CET 28 Feb 2024
+                                </Text>
                             </div>
-                            <ContentDivider type="dashed" margin='x-small' />
+                            <ContentDivider type="dashed" margin="x-small" />
                             <div>
-                                <FormLabel text='No. of events'/>
-                                <Text size='small' weight='medium'>1</Text>
+                                <FormLabel text="No. of events" />
+                                <Text size="small" weight="medium">
+                                    1
+                                </Text>
                             </div>
                         </ToggleBox>
                     </div>
@@ -175,31 +205,103 @@ const ToggleboxDocs = () => {
 
             <h3 className="docs-page__h3">Props</h3>
             <PropsList>
-                <Prop name='variant' isRequired={true} type='simple | custom header' default='null' description='Type of component.' />
+                <Prop
+                    name="variant"
+                    isRequired={true}
+                    type="simple | custom header"
+                    default="null"
+                    description="Type of component."
+                />
             </PropsList>
 
             <h3 className="docs-page__h3">Props: variant: 'simple'</h3>
             <PropsList>
-                <Prop name='title' isRequired={true} type='string' default='null' description='Togglebox title' />
-                <Prop name='badge' isRequired={false} type='JSX.Element' default='null' description='Badge' />
-                <Prop name='initiallyOpen' isRequired={false} type='boolean' default='false' description='Opens togglebox on initial render' />
-                <Prop name='className' isRequired={false} type='string' default='null' description='Style class of the component' />
-                <Prop name='margin' isRequired={false} type='none | small | normal | large' default='normal' description='Defines the bottom margin of the toggle box.' />
-                <Prop name='onOpen' isRequired={false} type='function' default='null' description='Callback on open event' />
-                <Prop name='onClose' isRequired={false} type='function' default='null' description='Callback on close event' />
-                <Prop name='circledChevron' isRequired={false} type='boolean' default='false' description='Adds a light, circle-shaped background around the chevron.' />
-                <Prop name='largeTitle' isRequired={false} type='boolean' default='false' description='This option will increase the size of the title. Always use a circled chevron (circledChevron) in combination with this option.' />
+                <Prop name="title" isRequired={true} type="string" default="null" description="Togglebox title" />
+                <Prop name="badge" isRequired={false} type="JSX.Element" default="null" description="Badge" />
+                <Prop
+                    name="initiallyOpen"
+                    isRequired={false}
+                    type="boolean"
+                    default="false"
+                    description="Opens togglebox on initial render"
+                />
+                <Prop
+                    name="className"
+                    isRequired={false}
+                    type="string"
+                    default="null"
+                    description="Style class of the component"
+                />
+                <Prop
+                    name="margin"
+                    isRequired={false}
+                    type="none | small | normal | large"
+                    default="normal"
+                    description="Defines the bottom margin of the toggle box."
+                />
+                <Prop
+                    name="onOpen"
+                    isRequired={false}
+                    type="function"
+                    default="null"
+                    description="Callback on open event"
+                />
+                <Prop
+                    name="onClose"
+                    isRequired={false}
+                    type="function"
+                    default="null"
+                    description="Callback on close event"
+                />
+                <Prop
+                    name="circledChevron"
+                    isRequired={false}
+                    type="boolean"
+                    default="false"
+                    description="Adds a light, circle-shaped background around the chevron."
+                />
+                <Prop
+                    name="largeTitle"
+                    isRequired={false}
+                    type="boolean"
+                    default="false"
+                    description="This option will increase the size of the title. Always use a circled chevron (circledChevron) in combination with this option."
+                />
             </PropsList>
 
             <h3 className="docs-page__h3">Props: variant: 'custom-header'</h3>
             <PropsList>
-                <Prop name='header' isRequired={true} type='JSX.Component' default='null' description='Always visible part of component.' />
-                <Prop name='children' isRequired={false} type='JSX.Component' default='null' description='Appear on clicking the button.' />
-                <Prop name='initiallyOpen' isRequired={false} type='boolean' default='false' description='Opens togglebox on initial render.' />
-                <Prop name='onClose' isRequired={false} type='function' default='null' description='Callback on toggle.' />
+                <Prop
+                    name="header"
+                    isRequired={true}
+                    type="JSX.Component"
+                    default="null"
+                    description="Always visible part of component."
+                />
+                <Prop
+                    name="children"
+                    isRequired={false}
+                    type="JSX.Component"
+                    default="null"
+                    description="Appear on clicking the button."
+                />
+                <Prop
+                    name="initiallyOpen"
+                    isRequired={false}
+                    type="boolean"
+                    default="false"
+                    description="Opens togglebox on initial render."
+                />
+                <Prop
+                    name="onClose"
+                    isRequired={false}
+                    type="function"
+                    default="null"
+                    description="Callback on toggle."
+                />
             </PropsList>
         </section>
-    )
-}
+    );
+};
 
 export default ToggleboxDocs;

package/dist/components/Tooltips.tsx

@@ -2,39 +2,45 @@ import * as React from 'react';
 
 import * as Markup from '../../js/react';
 
-import { Tooltip, Prop, PropsList, Button } from '../../../app-typescript';
+import {Tooltip, Prop, PropsList, Button} from '../../../app-typescript';
 
 export default class TooltipDoc extends React.Component {
     render() {
         return (
             <section className="docs-page__container">
                 <h2 className="docs-page__h2">Tooltips</h2>
-                <Markup.ReactMarkupCodePreview>{`
+                <Markup.ReactMarkupCodePreview>
+                    {`
                     <Tooltip text="I'm on top" >
                         <Button text='top' onClick={() => false} />
                     </Tooltip>
                 `}
                 </Markup.ReactMarkupCodePreview>
                 <h3 className="docs-page__h3">Default</h3>
-                <p className="docs-page__paragraph">Chose one of 4 placement options (<code>’left’</code>, <code>’right’</code>, <code>down</code>, and <code>’top’</code>). The default value is <code>’top’</code> and will be rendered so without explicitly specifying it.</p>
+                <p className="docs-page__paragraph">
+                    Chose one of 4 placement options (<code>’left’</code>, <code>’right’</code>, <code>down</code>, and{' '}
+                    <code>’top’</code>). The default value is <code>’top’</code> and will be rendered so without
+                    explicitly specifying it.
+                </p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <div className="docs-page__content-row docs-page__content-row--no-margin">
-                            <Tooltip text="I'm on top" >
-                                <Button text='top' onClick={() => false} />
+                            <Tooltip text="I'm on top">
+                                <Button text="top" onClick={() => false} />
                             </Tooltip>
-                            <Tooltip text="I'm at the bottom" flow='down'>
-                                <Button text='bottom' onClick={() => false} />
+                            <Tooltip text="I'm at the bottom" flow="down">
+                                <Button text="bottom" onClick={() => false} />
                             </Tooltip>
-                            <Tooltip text="I open on the left" flow='left'>
-                                <Button text='left' onClick={() => false} />
+                            <Tooltip text="I open on the left" flow="left">
+                                <Button text="left" onClick={() => false} />
                             </Tooltip>
-                            <Tooltip text="Right on!" flow='right'>
-                                <Button text='right' onClick={() => false} />
+                            <Tooltip text="Right on!" flow="right">
+                                <Button text="right" onClick={() => false} />
                             </Tooltip>
                         </div>
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         <Tooltip text="I'm on top" >
                             <Button text='top' onClick={() => false} />
                         </Tooltip>
@@ -53,10 +59,16 @@ export default class TooltipDoc extends React.Component {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='text' isRequired={true} type='string' default='/' description='Tooltip text value.' />
-                    <Prop name='flow' isRequired={false} type='top | left | right | down' default='top' description='Position of tooltip text.' />
+                    <Prop name="text" isRequired={true} type="string" default="/" description="Tooltip text value." />
+                    <Prop
+                        name="flow"
+                        isRequired={false}
+                        type="top | left | right | down"
+                        default="top"
+                        description="Position of tooltip text."
+                    />
                 </PropsList>
             </section>
-        )
+        );
     }
 }