superdesk-ui-framework 3.0.1-beta.17 → 3.0.1-beta.19

package/dist/react/ContentDivider.tsx

@@ -32,11 +32,12 @@ export default class ContentDividerDoc extends React.Component {
                             consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.
                             Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur
                             purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue.</p>
-                            <ContentDivider type="dotted" />
+                            <ContentDivider type="dotted" margin='x-small' />
                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus
                             ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet
                             risus. Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac
                             facilisis in, egestas eget quam.</p>
+                            <ContentDivider type="dotted" margin='x-small' />
                         </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
@@ -50,9 +51,11 @@ export default class ContentDividerDoc extends React.Component {
 
                         <p>Donec ullamcorper nulla non metus auctor fringilla...</p>
 
-                        <ContentDivider type="dotted" />
+                        <ContentDivider type="dotted" margin='x-small' />
 
                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
+
+                        <ContentDivider type="dotted" margin='x-small' />
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
@@ -69,15 +72,15 @@ export default class ContentDividerDoc extends React.Component {
                             Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus
                             auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia
                             quam venenatis vestibulum.</p>
-                            <ContentDivider align="left">
-                                Left aligned
+                            <ContentDivider margin='small' align="left">
+                                Left aligned, small margin
                             </ContentDivider>
                             <p>Maecenas sed diam eget risus varius blandit sit amet non magna.
                             Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur
                             purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod.
                             Cras mattis consectetur purus sit amet fermentum.</p>
                             <ContentDivider align="right" type="dotted">
-                                Right aligned
+                                Right aligned, dotted
                             </ContentDivider>
                             <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
                             Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna,
@@ -93,14 +96,14 @@ export default class ContentDividerDoc extends React.Component {
 
                         <p>Maecenas sed diam eget...</p>
 
-                        <ContentDivider align="left">
-                            Left aligned
+                        <ContentDivider margin='small' align="left">
+                            Left aligned, small margin
                         </ContentDivider>
 
                         <p>Maecenas sed diam eget risus...</p>
 
                         <ContentDivider align="right" type="dotted">
-                            Right aligned
+                            Right aligned, dotted
                         </ContentDivider>
 
                         <p>Praesent commodo cursus magna...</p>
@@ -115,9 +118,9 @@ export default class ContentDividerDoc extends React.Component {
                         <p className="docs-page__paragraph">// Basic</p>
                         <div className='docs-page__content-row'>
                             <span>Option one</span>
-                            <ContentDivider orientation="vertical" type="dotted" />
+                            <ContentDivider margin='small' orientation="vertical" type="dotted" />
                             <span>Option two</span>
-                            <ContentDivider orientation="vertical" type="dotted" />
+                            <ContentDivider margin='small' orientation="vertical" type="dotted" />
                             <span>Option three</span>
                         </div>
                         <p className="docs-page__paragraph ">// With text</p>
@@ -129,7 +132,7 @@ export default class ContentDividerDoc extends React.Component {
                                 sit amet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla
                                 sed consectetur. Vivamus sagittis lacus vel augue.
                             </div>
-                            <ContentDivider orientation="vertical">
+                            <ContentDivider orientation="vertical" margin='large'>
                                 or
                             </ContentDivider>
                             <div style={{width:'100%'}}>
@@ -143,9 +146,9 @@ export default class ContentDividerDoc extends React.Component {
                         // Basic
 
                         <span>Option one</span>
-                        <ContentDivider orientation="vertical" type="dotted" />
+                        <ContentDivider margin='small' orientation="vertical" type="dotted" />
                         <span>Option two</span>
-                        <ContentDivider orientation="vertical" type="dotted" />
+                        <ContentDivider margin='small' orientation="vertical" type="dotted" />
                         <span>Option three</span>
 
                         // With text
@@ -154,7 +157,7 @@ export default class ContentDividerDoc extends React.Component {
                             Cras justo odio, dapibus ac facilisis in, egestas eget quam...
                         </div>
 
-                        <ContentDivider orientation="vertical">
+                        <ContentDivider orientation="vertical" margin='large'>
                             or
                         </ContentDivider>
 
@@ -171,6 +174,7 @@ export default class ContentDividerDoc extends React.Component {
                     <Prop name='orientation' isRequired={false} type='horizontal | vertical' default='horizontal' description='Defines if the divider is horizontal or vertical. Default is horizontal.'/>
                     <Prop name='align' isRequired={false} type='center | left | right' default='right' description='Text alignment inside the divider. Should not be used without any text inside the divider. The vertical divider has no alignment options.'/>
                     <Prop name='border' isRequired={false} type='boolean' default='true' description='Removes the border if set to true. Should be generally avoided especially if there is textual content. It can be used to add space between elements if there is no other option.'/>
+                    <Prop name='margin' isRequired={false} type='x-small | small | medium | large | none' default='medium' description='Vertical or horizontal margins (depending on the orientation) of the ContentDivider. Default to medium if not set.'/>
                 </PropsList>
             </section>
         )

package/dist/react/ContentList.tsx

@@ -56,7 +56,6 @@ export default class ContentListDoc extends React.Component {
                                     }
                                 ],
                                 action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
-                                loading: true,
                             },
                             {
                                 itemColum: [
@@ -93,8 +92,6 @@ export default class ContentListDoc extends React.Component {
                                         fullwidth: true,
                                     }
                                 ],
-                                //locked: true,
-                                selected: true,
                                 action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
                             },
                             {
@@ -136,6 +133,141 @@ export default class ContentListDoc extends React.Component {
                             },
                         ]} />
                     </Markup.ReactMarkupPreview>
+
+                    <Markup.ReactMarkupPreview>
+                        <p className="docs-page__paragraph">// loading</p>
+                        <ContentList
+                        items={[
+                            {
+                                itemColum: [
+                                    {
+                                        itemRow: [{content:<>
+                                                    <i className="icon-rundown"></i>
+                                                </>}],
+                                        border: true
+                                    },
+                                    {
+                                        itemRow: [
+                                            {
+                                                content:
+                                                <>
+                                                    <span className="sd-list-item__slugline">19:00 – 19:45</span>
+                                                    <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
+                                                    <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
+                                                    <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
+                                                </>
+                                            },
+                                            {
+                                                content:
+                                                <>
+                                                    <Label text='Marker' color='blue--800'/>
+                                                        <span className='sd-list-item__compound-text'>
+                                                            <span className='sd-list-item__text-label'>Template:</span>
+                                                            <span>Marker Daily</span>
+                                                        </span>
+                                                        <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>    
+                                                    <Label style='translucent' text='In Progress' type='warning' />
+                                                </>
+                                            },
+                                        ],
+                                        fullwidth: true,
+                                    }
+                                ],
+                                action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
+                                loading: true
+                            },
+                        ]} />
+                    </Markup.ReactMarkupPreview>
+
+                    <Markup.ReactMarkupPreview>
+                        <p className="docs-page__paragraph">// selected</p>
+                        <ContentList
+                        items={[
+                            {
+                                itemColum: [
+                                    {
+                                        itemRow: [{content:<>
+                                                    <i className="icon-rundown"></i>
+                                                </>}],
+                                        border: true
+                                    },
+                                    {
+                                        itemRow: [
+                                            {
+                                                content:
+                                                <>
+                                                    <span className="sd-list-item__slugline">19:00 – 19:45</span>
+                                                    <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
+                                                    <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
+                                                    <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
+                                                </>
+                                            },
+                                            {
+                                                content:
+                                                <>
+                                                    <Label text='Marker' color='blue--800'/>
+                                                        <span className='sd-list-item__compound-text'>
+                                                            <span className='sd-list-item__text-label'>Template:</span>
+                                                            <span>Marker Daily</span>
+                                                        </span>
+                                                        <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>    
+                                                    <Label style='translucent' text='In Progress' type='warning' />
+                                                </>
+                                            },
+                                        ],
+                                        fullwidth: true,
+                                    }
+                                ],
+                                action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
+                                selected: true,
+                            },
+                        ]} />
+                    </Markup.ReactMarkupPreview>
+
+                    <Markup.ReactMarkupPreview>
+                        <p className="docs-page__paragraph">// locked</p>
+                        <ContentList
+                        items={[
+                            {
+                                itemColum: [
+                                    {
+                                        itemRow: [{content:<>
+                                                    <i className="icon-rundown"></i>
+                                                </>}],
+                                        border: true
+                                    },
+                                    {
+                                        itemRow: [
+                                            {
+                                                content:
+                                                <>
+                                                    <span className="sd-list-item__slugline">19:00 – 19:45</span>
+                                                    <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
+                                                    <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
+                                                    <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
+                                                </>
+                                            },
+                                            {
+                                                content:
+                                                <>
+                                                    <Label text='Marker' color='blue--800'/>
+                                                        <span className='sd-list-item__compound-text'>
+                                                            <span className='sd-list-item__text-label'>Template:</span>
+                                                            <span>Marker Daily</span>
+                                                        </span>
+                                                        <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>    
+                                                    <Label style='translucent' text='In Progress' type='warning' />
+                                                </>
+                                            },
+                                        ],
+                                        fullwidth: true,
+                                    }
+                                ],
+                                action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
+                                locked: true,
+                            },
+                        ]} />
+                    </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         <ContentList
                         items={[
@@ -252,6 +384,52 @@ export default class ContentListDoc extends React.Component {
                                 action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
                             },
                         ]} />
+
+                        // loading, slected & locked
+
+                        <ContentList
+                        items={[
+                            {
+                                itemColum: [
+                                    {
+                                        itemRow: [{content:<>
+                                                    <i className="icon-rundown"></i>
+                                                </>}],
+                                        border: true
+                                    },
+                                    {
+                                        itemRow: [
+                                            {
+                                                content:
+                                                <>
+                                                    <span className="sd-list-item__slugline">19:00 – 19:45</span>
+                                                    <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
+                                                    <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
+                                                    <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
+                                                </>
+                                            },
+                                            {
+                                                content:
+                                                <>
+                                                    <Label text='Marker' color='blue--800'/>
+                                                        <span className='sd-list-item__compound-text'>
+                                                            <span className='sd-list-item__text-label'>Template:</span>
+                                                            <span>Marker Daily</span>
+                                                        </span>
+                                                        <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>    
+                                                    <Label style='translucent' text='In Progress' type='warning' />
+                                                </>
+                                            },
+                                        ],
+                                        fullwidth: true,
+                                    }
+                                ],
+                                action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
+                                loading: true,
+                                selected: true,
+                                locked: true,
+                            },
+                        ]} />
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
@@ -272,6 +450,12 @@ export default class ContentListDoc extends React.Component {
                     <Prop name='onClick' isRequired={false} type='function' default='/' description='onClick functionality.'/>
                     <Prop name='onDoubleClick' isRequired={false} type='function' default='/' description='onDoubleClick functionality.'/>
                 </PropsList>
+                <p className="docs-page__paragraph">itemColum:</p>
+                <PropsList>
+                    <Prop name='itemRow' isRequired={true} type='Array<{content: any}>' default='ture' description='An array of objects for defining rows of individual items.'/>
+                    <Prop name='border' isRequired={false} type='boolean' default='false' description='If is true, the individual item of list change style.'/>
+                    <Prop name='fullwidth' isRequired={false} type='boolean' default='false' description='If is true, the individual item of list change style.'/>
+                </PropsList>
             </section>
         )
     }

package/dist/react/DurationInput.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react';
-
 import * as Markup from '../../js/react';
-
 import { Input, Select, CheckGroup, Checkbox, PropsList, Prop } from '../../../app-typescript';
 import { DurationInput } from '../../../app-typescript/components/DurationInput';
+import { getDurationString } from '../../../app-typescript/components/DurationInput';
 
 interface IState {
     inlineLabel: boolean;
     required: boolean;
     disabled: boolean;
     invalid: boolean;
+    value: any
 }
 
 export default class DurationInputDoc extends React.Component<{}, IState> {
@@ -20,10 +20,12 @@ export default class DurationInputDoc extends React.Component<{}, IState> {
             required: true,
             disabled: false,
             invalid: false,
+            value: 3661,
         }
     }
     
     render() {
+        
         return (
             <section className='docs-page__container'>
                 <h2 className='docs-page__h2'>Duration Input</h2>
@@ -62,8 +64,10 @@ export default class DurationInputDoc extends React.Component<{}, IState> {
                                 required={this.state.required}
                                 invalid={this.state.invalid}
                                 inlineLabel={this.state.inlineLabel}
+                                seconds={this.state.value}
                                 onChange={(e) => {
-                                    console.log(e)
+                                    this.setState({value: e})
+                                    console.log(e);
                                 }}
                                 />
                             </div>

package/dist/react/TableList.tsx

@@ -71,13 +71,28 @@ export default class TableListDoc extends React.Component<IProps, IState> {
                     addItem
                     array={this.state.array}
                     itemsDropdown={(index) => [
-                        { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => console.log(index) },
-                        { label: <Label style='translucent' text='prlg' />, onSelect: () => console.log(index) },
-                        { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => console.log(index) },
+                        { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => false },
+                        { label: <Label style='translucent' text='prlg' />, onSelect: () => false },
+                        { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => false },
                     ]} />
                 `}
                 </Markup.ReactMarkupCodePreview>
 
+                <p className="docs-page__paragraph">Simple list without drag and drop functionality and without functionality for adding item in list:</p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <TableList
+                            array={this.state.array}
+                        />
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <TableList
+                        array={this.state.array}
+                        />
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
                 <p className="docs-page__paragraph">With drag and drop functionality:</p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
@@ -130,7 +145,9 @@ export default class TableListDoc extends React.Component<IProps, IState> {
                     <Prop name='center' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
                     <Prop name='end' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
                     <Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='Column of individual list items that is displayed on hover.' />
-                    <Prop name='hexColor' isRequired={false} type='string' default='false' description='' />
+                    <Prop name='hexColor' isRequired={false} type='string' default='false' description='Color of left border for item status.' />
+                    <Prop name='locked' isRequired={false} type='function' default='false' description='If is true, the individual item of list change state and change style (border).' />
+                    <Prop name='positionLocked' isRequired={false} type='function' default='false' description='Work in progress...' />
                     <Prop name='onClick' isRequired={false} type='function' default='false' description='onClick functionality.' />
                     <Prop name='onDoubleClick' isRequired={false} type='function' default='false' description='onDoubleClick functionality.' />
                 </PropsList>

package/dist/superdesk-ui.bundle.css

@@ -35139,6 +35139,9 @@ input.sd-inset-search__input {
   padding: 0;
   color: var(--color-text);
   list-style: none;
+  border-bottom: 0;
+  border-left: 0;
+  border-right: 0;
   border-top: 1px var(--sd-colour-line--medium);
   border-style: solid; }
   .sd-content-divider.sd-content-divider--with-text {
@@ -35149,14 +35152,26 @@ input.sd-inset-search__input {
     white-space: nowrap;
     text-align: center;
     border-top: 0;
+    border-bottom: 0;
+    border-left: 0;
+    border-right: 0;
     border-top-color: var(--sd-colour-line--medium);
     border-style: solid; }
   .sd-content-divider.sd-content-divider--horizontal {
     display: flex;
     clear: both;
     width: 100%;
-    min-width: 100%;
-    margin: 2.4rem 0; }
+    min-width: 100%; }
+    .sd-content-divider.sd-content-divider--horizontal.sd-content-divider--margin-x-small {
+      margin: 0.8rem 0; }
+    .sd-content-divider.sd-content-divider--horizontal.sd-content-divider--margin-small {
+      margin: 1.6rem 0; }
+    .sd-content-divider.sd-content-divider--horizontal.sd-content-divider--margin-medium {
+      margin: 2.4rem 0; }
+    .sd-content-divider.sd-content-divider--horizontal.sd-content-divider--margin-large {
+      margin: 3.2rem 0; }
+    .sd-content-divider.sd-content-divider--horizontal.sd-content-divider--margin-none {
+      margin: 0 0; }
   .sd-content-divider.sd-content-divider--horizontal.sd-content-divider--with-text {
     margin: 1.6rem 0; }
     .sd-content-divider.sd-content-divider--horizontal.sd-content-divider--with-text::before, .sd-content-divider.sd-content-divider--horizontal.sd-content-divider--with-text::after {
@@ -35168,6 +35183,8 @@ input.sd-inset-search__input {
       border-top-color: transparent;
       border-top-color: inherit;
       border-bottom: 0;
+      border-left: 0;
+      border-right: 0;
       transform: translateY(50%);
       border-style: inherit; }
     .sd-content-divider.sd-content-divider--horizontal.sd-content-divider--with-text.sd-content-divider--text-left::before {
@@ -35178,10 +35195,19 @@ input.sd-inset-search__input {
       width: 95%; }
     .sd-content-divider.sd-content-divider--horizontal.sd-content-divider--with-text.sd-content-divider--text-right::after {
       width: 5%; }
+    .sd-content-divider.sd-content-divider--horizontal.sd-content-divider--with-text.sd-content-divider--margin-x-small {
+      margin: 0.8rem 0; }
+    .sd-content-divider.sd-content-divider--horizontal.sd-content-divider--with-text.sd-content-divider--margin-small {
+      margin: 1.6rem 0; }
+    .sd-content-divider.sd-content-divider--horizontal.sd-content-divider--with-text.sd-content-divider--margin-medium {
+      margin: 2.4rem 0; }
+    .sd-content-divider.sd-content-divider--horizontal.sd-content-divider--with-text.sd-content-divider--margin-large {
+      margin: 3.2rem 0; }
+    .sd-content-divider.sd-content-divider--horizontal.sd-content-divider--with-text.sd-content-divider--margin-none {
+      margin: 0.4rem 0; }
   .sd-content-divider.sd-content-divider--vertical {
     position: relative;
     display: inline-block;
-    margin: 0.4rem 1.2rem;
     vertical-align: middle;
     border-top: 0;
     border-left: 1px var(--sd-colour-line--medium);
@@ -35204,7 +35230,9 @@ input.sd-inset-search__input {
         position: relative;
         height: 50%;
         border-left: 1px var(--sd-colour-line--medium);
+        border-right: 0;
         border-bottom: 0;
+        border-top: 0;
         width: 1px;
         border-style: solid; }
       .sd-content-divider.sd-content-divider--vertical.sd-content-divider--with-text.sd-content-divider--dashed::before, .sd-content-divider.sd-content-divider--vertical.sd-content-divider--with-text.sd-content-divider--dashed::after {
@@ -35212,6 +35240,16 @@ input.sd-inset-search__input {
       .sd-content-divider.sd-content-divider--vertical.sd-content-divider--with-text.sd-content-divider--dotted::before, .sd-content-divider.sd-content-divider--vertical.sd-content-divider--with-text.sd-content-divider--dotted::after {
         border-style: dotted;
         border-color: var(--sd-colour-line--strong); }
+    .sd-content-divider.sd-content-divider--vertical.sd-content-divider--margin-x-small {
+      margin: 0 0.8rem; }
+    .sd-content-divider.sd-content-divider--vertical.sd-content-divider--margin-small {
+      margin: 0 1.6rem; }
+    .sd-content-divider.sd-content-divider--vertical.sd-content-divider--margin-medium {
+      margin: 0 2.4rem; }
+    .sd-content-divider.sd-content-divider--vertical.sd-content-divider--margin-large {
+      margin: 0 3.2rem; }
+    .sd-content-divider.sd-content-divider--vertical.sd-content-divider--margin-none {
+      margin: 0 0; }
   .sd-content-divider.sd-content-divider--dashed {
     border-style: dashed; }
   .sd-content-divider.sd-content-divider--dotted {