superdesk-ui-framework 3.0.75 → 3.0.76

package/dist/playgrounds/react-playgrounds/Rundowns.tsx

@@ -872,7 +872,7 @@ export class Rundowns extends React.Component<IProps, IState> {
                     size='x-large' onHide={() => {this.setState({modalManageShow: false})}}
                 >
                     <Layout.LayoutContainer>
-                    <Layout.HeaderPanel>
+                        <Layout.HeaderPanel>
                             <SubNav zIndex={2}>
                                 <SearchBar placeholder='Search shows'></SearchBar>
                                 <ButtonGroup align='end' spaces='no-space'>

package/dist/playgrounds/react-playgrounds/TestGround.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as Components from './components/Index';
-import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, DatePicker, TreeSelect, ContentDivider, Select, Option, AvatarGroup} from '../../../../app-typescript/index';
+import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, DatePicker, TreeSelect, ContentDivider, Select, Option, AvatarGroup, SvgIconIllustration, IllustrationButton} from '../../../../app-typescript/index';
 import { IAvatarInGroup } from '../../../../app-typescript/components/avatar/avatar-group';
 import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
 
@@ -27,9 +27,11 @@ interface IState {
     modalSaveEvent: boolean;
     modalSaveEvent2: boolean;
     modalSaveEvent3: boolean;
+    modalSaveEvent4: boolean;
     treeSelectValue: any;
     value: any;
     valueS2: any;
+    thisTheme: string;
 }
 
 let options2 = [
@@ -66,9 +68,11 @@ export class TestGround extends React.Component<IProps, IState> {
             modalSaveEvent: false,
             modalSaveEvent2: false,
             modalSaveEvent3: false,
+            modalSaveEvent4: false,
             treeSelectValue: [],
             value: undefined,
             valueS2: undefined,
+            thisTheme: 'light-ui',
         }
     }
 
@@ -80,6 +84,12 @@ export class TestGround extends React.Component<IProps, IState> {
         }
     }
 
+    toggleTheme = () => {
+        this.setState( {
+            thisTheme: this.state.thisTheme === 'light-ui' ? 'dark-ui' : 'light-ui',
+        });
+      };
+
     render() {
         const avatars: Array<IAvatarInGroup> = [
             {
@@ -107,6 +117,7 @@ export class TestGround extends React.Component<IProps, IState> {
                 icon:{name: 'file', color: 'var(--sd-colour-highlight)'}
             },
         ];
+
         const modalSaveEventFooterOne=(
             <ButtonGroup align="end">
                 <Button text='Cancel' onClick={() => this.setState({modalSaveEvent:false})} />
@@ -126,15 +137,129 @@ export class TestGround extends React.Component<IProps, IState> {
             </ButtonGroup>
         );
         return (
-            <Components.Layout header='Testing Ground'>
+            <Components.Layout header='Testing Ground' theme={this.state.thisTheme}>
                 <Components.LayoutContainer>
                     <Components.MainPanel>
+
+                        <ButtonGroup align='end'>
+                            <IconButton icon="adjust" ariaValue="Toggle theme" onClick={this.toggleTheme} toolTipFlow='left' />
+                        </ButtonGroup>
+
+                        <hr />
+                        <SvgIconIllustration illustration='headlines' />
+                        <hr />
+
+                        <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>
+
+                            <IllustrationButton text='Keywords' onClick={()=> false}>
+                                <SvgIconIllustration illustration='keywords' />
+                            </IllustrationButton>
+
+                            <IllustrationButton text='Optimise' onClick={()=> false}>
+                                <SvgIconIllustration illustration='optimise' />
+                            </IllustrationButton>
+
+                            <IllustrationButton text='Summary' onClick={()=> false}>
+                                <SvgIconIllustration illustration='summary' />
+                            </IllustrationButton>
+
+                            <IllustrationButton text='Translate' onClick={()=> false}>
+                                <SvgIconIllustration illustration='translate' />
+                            </IllustrationButton>
+
+                            {/* <button className='illustration-button illustration-button--headlines'>
+                                <SvgIconIllustration illustration='headlines' />
+                                <span className='illustration-button__text-label'>
+                                    Headlines
+                                </span>
+                            </button>
+
+                            <button className='illustration-button illustration-button--headlines'>
+                                <SvgIconIllustration illustration='keywords' />
+                                <span className='illustration-button__text-label'>
+                                    Keywords
+                                </span>
+                            </button>
+
+                            <button className='illustration-button illustration-button--headlines'>
+                                <SvgIconIllustration illustration='optimise' />
+                                <span className='illustration-button__text-label'>
+                                    Optimise
+                                </span>
+                            </button>
+
+                            <button className='illustration-button illustration-button--headlines'>
+                                <SvgIconIllustration illustration='summary' />
+                                <span className='illustration-button__text-label'>
+                                    Summary
+                                </span>
+                            </button>
+
+                            <button className='illustration-button illustration-button--headlines'>
+                                <SvgIconIllustration illustration='translate' />
+                                <span className='illustration-button__text-label'>
+                                    Translate
+                                </span>
+                            </button> */}
+
+                        </div>
+
+                        <hr />
+
+                        <Heading type='h3'>Below is an example structure of the content inside the 'Headlines' AI Assistant section</Heading>
+                        <Text size="small" weight="light">Note: The surrounding div with inline styles is only there for the purpose of this demo. </Text>
+
+                        <div className='' style={{width:'290px', marginBlockStart:'32px'}}>
+                            <Container gap="small" direction='column'>
+                                <Text size="small" weight="medium">
+                                Praesent commodo cursus magna, vel scelerisque nisl consectetur et aenean eu leo quam ultricies.
+                                </Text>
+                                <ButtonGroup>
+                                    <Button size='small' text="Apply" onClick={()=> false} type="default" style="hollow" />
+                                    <IconButton ariaValue='Copy' icon='copy' onClick={()=> false} />
+                                </ButtonGroup>
+                            </Container>
+
+                            <ContentDivider type="dashed" margin='small' />
+
+                            <Container gap="small" direction='column'>
+                                <Text size="small" weight="medium">
+                                Aenean eu leo quam pellentesque ornare sem lacinia quam venenatis vestibulum nullam id dolor id nibh ultricies vehicula elit.
+                                </Text>
+                                <ButtonGroup>
+                                    <Button size='small' text="Apply" onClick={()=> false} type="default" style="hollow" />
+                                    <IconButton ariaValue='Copy' icon='copy' onClick={()=> false} />
+                                </ButtonGroup>
+                            </Container>
+
+                            <ContentDivider type="dashed" margin='small' />
+
+                            <Container gap="small" direction='column'>
+                                <Text size="small" weight="medium">
+                                Vestibulum id ligula porta felis euismod semper morbi leo risus, porta ac consectetur ac, vestibulum at eros maecenas faucibus.
+                                </Text>
+                                <ButtonGroup>
+                                    <Button size='small' text="Apply" onClick={()=> false} type="default" style="hollow" />
+                                    <IconButton ariaValue='Copy' icon='copy' onClick={()=> false} />
+                                </ButtonGroup>
+                            </Container>
+
+                        </div>
+
+                        <hr />
+
                         <ButtonGroup>
                             <Button text="Save Event Modal (Event only)" onClick={() => this.setState({modalSaveEvent: true})} />
                             <Button text="Save Event Modal (Event & Planning)" onClick={() => this.setState({modalSaveEvent2: true})} />
                             <Button text="Save Event Modal (Planning only)" onClick={() => this.setState({modalSaveEvent3: true})} />
                         </ButtonGroup>
+
                         <hr />
+
                         {/* <button type="button" className="sd-dropdown-button" aria-haspopup="true" aria-expanded="false">
                             <span className="sd-dropdown-button__text-block">
                                 <label className="sd-dropdown-button__text-label">Coverage:</label>
@@ -144,6 +269,7 @@ export class TestGround extends React.Component<IProps, IState> {
                         </button> */}
                         
                         <hr />
+
                         <Button text="Planning Templates" onClick={() => this.setState({modalPlanningTemplates: true})} />
                         <span></span>
                         
@@ -249,8 +375,12 @@ export class TestGround extends React.Component<IProps, IState> {
                                 <Option>This and all future events</Option>
                                 <Option>All events</Option>
                             </Select>
-                            <ContentDivider type="dashed" margin='small' />
-                            <Heading type='h4' className='mb-1'>Related Planning(s)</Heading>
+                            <ContentDivider type="solid" margin="medium" />
+                            <Heading type='h3' className='mb-1 sd-text--strong'>Related Planning(s)</Heading>
+                            <Text size='small' className='mb-1'>
+                                <strong>You made changes to a planning item that is a part of a recurring event</strong>.
+                                Apply the changes to all recurring planning items or just this one?
+                            </Text>
                             <div className='sd-list-item-group--space-between-items'>
                                 <div role="listitem" className="sd-list-item sd-shadow--z1 mb-1">
                                     <div className="sd-list-item__border sd-list-item__border--locked"></div>
@@ -274,10 +404,7 @@ export class TestGround extends React.Component<IProps, IState> {
                                     </div>
                                 </div>
                             </div>
-                            <Text size='small' className='mb-1'>
-                                <strong>You made changes to a planning item that is a part of a recurring event</strong>.
-                                Update all recurring planning or just this one?
-                            </Text>
+
                             <Select
                                 value={this.state.valueS2}
                                 label='Update:'
@@ -309,7 +436,11 @@ export class TestGround extends React.Component<IProps, IState> {
                             footerTemplate={modalSaveEventFooterThree}
                             onHide={() => {this.setState({modalSaveEvent3: false})}}
                         >
-                            <Heading type='h4' className='mb-1'>Related Planning(s)</Heading>
+                            <Heading type='h3' className='mb-1 sd-text--strong'>Related Planning(s)</Heading>
+                            <Text size='small' className='mb-1'>
+                                <strong>You made changes to a planning item that is a part of a recurring event</strong>.
+                                Apply the changes to all recurring planning items or just this one?
+                            </Text>
                             <div className='sd-list-item-group--space-between-items'>
                                 <div role="listitem" className="sd-list-item sd-shadow--z1 mb-1">
                                     <div className="sd-list-item__border sd-list-item__border--locked"></div>
@@ -333,10 +464,56 @@ export class TestGround extends React.Component<IProps, IState> {
                                     </div>
                                 </div>
                             </div>
+
+                            <Select
+                                value={this.state.valueS2}
+                                label='Update:'
+                                required={false}
+                                disabled={false}
+                                inlineLabel={true}
+                                labelHidden={true}
+                                onChange={(valueS2) => {
+                                    this.setState({
+                                        value: valueS2,
+                                    })
+                                }}
+                            >
+                                <Option>This planning only</Option>
+                                <Option>This and all future plannings</Option>
+                                <Option>All plannings</Option>
+                            </Select>
+
+                            <ContentDivider type="dashed" margin='small' />
+
                             <Text size='small' className='mb-1'>
                                 <strong>You made changes to a planning item that is a part of a recurring event</strong>.
-                                Update all recurring planning or just this one?
+                                Apply the changes to all recurring planning items or just this one?
                             </Text>
+
+                            <div className='sd-list-item-group--space-between-items'>
+                                <div role="listitem" className="sd-list-item sd-shadow--z1 mb-1">
+                                    <div className="sd-list-item__border sd-list-item__border--locked"></div>
+                                    <div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
+                                        <div className="sd-list-item__row">
+                                            <i role="presentation" className="icon-calendar icon--light-blue"></i>
+                                            <span className="sd-list-item__slugline">Planning Slug</span>
+                                            <span className="sd-overflow-ellipsis sd-list-item--element-grow">
+                                                <span className="sd-list-item__text-strong">Cras justo odio, dapibus ac facilisis in.</span>
+                                            </span>
+                                        </div>
+                                        <div className="sd-list-item__row sd-list-item__row--overflow-visible me-1">
+                                            <Label text='draft' style='translucent'/>
+                                            <span className="sd-margin-s--auto">
+                                            <AvatarGroup
+                                                size="small"
+                                                items={avatars}
+                                            />
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
                             <Select
                                 value={this.state.valueS2}
                                 label='Update:'
@@ -344,9 +521,9 @@ export class TestGround extends React.Component<IProps, IState> {
                                 disabled={false}
                                 inlineLabel={true}
                                 labelHidden={true}
-                                onChange={(valueS2) => {
+                                onChange={(valueS3) => {
                                     this.setState({
-                                        value: valueS2,
+                                        value: valueS3,
                                     })
                                 }}
                             >

package/dist/react/IllustrationButton.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import {IllustrationButton, SvgIconIllustration, Prop, PropsList} from '../../../app-typescript';
+import * as Markup from '../../js/react';
+
+export class IllustrationButtonDoc extends React.Component {
+    render() {
+        return (
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">Illustration Button & SVG icon illustration</h2>
+                <Markup.ReactMarkupCodePreview>{`
+                    <IllustrationButton text='Headlines' onClick={()=> false}>
+                        <SvgIconIllustration illustration='headlines' />
+                    </IllustrationButton>
+                `}
+                </Markup.ReactMarkupCodePreview>
+                <Markup.ReactMarkup>
+                    <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'}}
+                            >
+                                <IllustrationButton text='Headlines' onClick={()=> false}>
+                                    <SvgIconIllustration illustration='headlines' />
+                                </IllustrationButton>
+
+                                <IllustrationButton text='Keywords' onClick={()=> false}>
+                                    <SvgIconIllustration illustration='keywords' />
+                                </IllustrationButton>
+
+                                <IllustrationButton text='Optimise' onClick={()=> false}>
+                                    <SvgIconIllustration illustration='optimise' />
+                                </IllustrationButton>
+
+                                <IllustrationButton text='Summary' onClick={()=> false}>
+                                    <SvgIconIllustration illustration='summary' />
+                                </IllustrationButton>
+
+                                <IllustrationButton text='Translate' onClick={()=> false}>
+                                    <SvgIconIllustration illustration='translate' />
+                                </IllustrationButton>
+                            </div>
+                        </div>
+                    </Markup.ReactMarkupPreview>
+                    <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}>
+                                <SvgIconIllustration illustration='headlines' />
+                            </IllustrationButton>
+
+                            <IllustrationButton text='Keywords' onClick={()=> false}>
+                                <SvgIconIllustration illustration='keywords' />
+                            </IllustrationButton>
+
+                            <IllustrationButton text='Optimise' onClick={()=> false}>
+                                <SvgIconIllustration illustration='optimise' />
+                            </IllustrationButton>
+
+                            <IllustrationButton text='Summary' onClick={()=> false}>
+                                <SvgIconIllustration illustration='summary' />
+                            </IllustrationButton>
+
+                            <IllustrationButton text='Translate' onClick={()=> false}>
+                                <SvgIconIllustration illustration='translate' />
+                            </IllustrationButton>
+                        </div>
+                    `}
+                    </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.'/>
+                </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.'/>
+                </PropsList>
+            </section>
+        );
+    }
+}

package/dist/react/Index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { ReactNav, ReactDefault } from '../../js/react';
-import { ButtonGroup, Button, NavButton, Dropdown } from '../../../app-typescript/index';
+import { ButtonGroup, Button, NavButton, Dropdown, IllustrationButton } from '../../../app-typescript/index';
 
 import {
     Switch,
@@ -69,6 +69,7 @@ import { PopoverDoc } from './Popover';
 import { MenuDocs } from './Menu';
 import {WithSizeObserverDocs} from './WithSizeObserver';
 import {ResizablePanelsDoc} from './ResizablePanels';
+import { IllustrationButtonDoc } from './IllustrationButton';
 
 const pages = {
     basicComponents: {
@@ -130,6 +131,9 @@ const pages = {
             },
             "drag-handle": {
                 name: 'Drag handle'
+            },
+            "illustration-button" : {
+                name: 'Illustration Button'
             }
         }
     },
@@ -399,6 +403,7 @@ class ReactDoc extends React.Component<IProps, IState> {
                         <Route path="/react/dropzone" component={DropZoneDoc} />
                         <Route path="/react/create-button" component={CreateButtonDoc} />
                         <Route path="/react/resizable-panels" component={ResizablePanelsDoc} />
+                        <Route path="/react/illustration-button" component={IllustrationButtonDoc} />
                         <Route path="/" component={ReactDefault} />
                     </Switch>
                 </main>

package/dist/superdesk-ui.bundle.css

@@ -18621,7 +18621,8 @@ h6 {
     border-inline-width: 0 1px; }
 
 .button-group--right, .button-group--end {
-  margin-inline-start: auto; }
+  margin-inline-start: auto;
+  justify-content: flex-end; }
 
 .button-group--center {
   margin-inline-start: auto;
@@ -18775,6 +18776,43 @@ h6 {
 .button-group .tag-label, .button-group .p-multiselect-token {
   margin: 0 !important; }
 
+.illustration-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space--1);
+  border-radius: var(--b-radius--large);
+  border: 1px solid var(--sd-colour-line--light);
+  padding-inline: var(--space--2);
+  padding-block-start: var(--space--2);
+  padding-block-end: var(--space--1-5);
+  box-shadow: inset var(--sd-colour-interactive--alpha-30) 0px 0px 0px 0, rgba(0, 0, 0, 0.16) 0px 6px 12px -6px, rgba(0, 0, 0, 0.4) 0px 2px 8px -8px;
+  transition: all 0.2s ease; }
+  .illustration-button:hover {
+    border: 1px solid var(--sd-colour-line--strong);
+    box-shadow: inset var(--sd-colour-interactive--alpha-30) 0px 0px 0px 0, rgba(0, 0, 0, 0.24) 0px 6px 12px -6px, rgba(0, 0, 0, 0.6) 0px 2px 8px -8px; }
+  .illustration-button:active {
+    border: 1px solid var(--sd-colour-interactive);
+    box-shadow: inset var(--sd-colour-interactive--alpha-30) 0px 0px 0px 4px; }
+  .illustration-button:focus-visible {
+    outline: 2px solid var(--sd-colour-interactive--alpha-60);
+    outline-offset: 1px; }
+  .illustration-button:disabled, .illustration-button.illustration-button--disabled {
+    box-shadow: none;
+    border: 1px solid var(--sd-colour-line--light);
+    pointer-events: none;
+    opacity: 0.6; }
+
+.illustration-button__illustration,
+.svg-icon-illustration {
+  display: inline-block; }
+
+.illustration-button__text-label {
+  font-size: var(--text-size-small);
+  font-weight: 500;
+  line-height: 1.2;
+  text-align: center; }
+
 .label {
   display: inline-flex;
   align-items: center;
@@ -43321,6 +43359,9 @@ a.text-link {
   grid-gap: 2.4rem;
   margin: 2.4rem; }
 
+.sd-grid-list--xx-small {
+  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
+
 .sd-grid-list--x-small {
   grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }