superdesk-ui-framework 3.0.1-beta.3 → 3.0.1-beta.30

package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx

@@ -0,0 +1,321 @@
+import * as React from 'react';
+import * as Components from './components/Index';
+import { ButtonGroup, Button, NavButton, SubNav, Dropdown, Input, IconButton, Divider, Tooltip, Select, Option, Switch, Icon, AvatarWrapper, AvatarContentImage, AvatarContentText, Text, EmptyState, Alert, SlidingToolbar, TabLabel, Tabs, Heading, Modal } from '../../../../app-typescript/index';
+import * as Layout from '../../../../app-typescript/components/Layouts';
+import * as Form from '../../../../app-typescript/components/Form';
+import * as Nav from '../../../../app-typescript/components/Navigation';
+import { BoxedList, BoxedListItem, BoxedListContentRow } from '../../../../app-typescript/components/Lists';
+import { Spacer } from '../../../../app-typescript/components/Spacer';
+
+interface IProps {
+    children?: React.ReactNode;
+}
+
+interface IState {
+    theme: 'dark' | 'light' | string;
+    itemType: string;
+    dropDownState: string;
+    itemSelected1: boolean;
+    itemSelected2: boolean;
+    itemSelected3: boolean;
+    value1: boolean;
+    value2: boolean;
+    value3: boolean;
+    leftPanelOpen: boolean;
+    rightPanelOpen: boolean;
+    rightPanelPinned: boolean;
+    sideOverlayOpen: boolean;
+    sideBarOpen: boolean;
+    arr: any;
+}
+
+export class Multiedit extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+            theme: 'light',
+            itemType: 'itemtype01',
+            dropDownState: '',
+            itemSelected1: false,
+            itemSelected2: false,
+            itemSelected3: false,
+            value1: false,
+            value2: false,
+            value3: false,
+            leftPanelOpen: false,
+            rightPanelOpen: false,
+            rightPanelPinned: false,
+            sideOverlayOpen: false,
+            sideBarOpen: false,
+            arr: [<Editor />, <Editor />]
+            
+        }
+        this.handleTheme = this.handleTheme.bind(this);
+    }
+
+    handleTheme(newTheme: string) {
+        this.setState({
+            theme: newTheme
+        })
+    }
+
+    changeStatus(item: any, status: string) {
+        if (item.status.includes(status)) {
+            item.status.splice(item.status.indexOf(status), 1);
+        } else {
+            item.status.push(status);
+        }
+    }
+
+    render() {
+        return (    
+            <Modal
+            className='p-dialog-flex'
+            onHide={() => false}
+            maximized={true} contentPadding={"none"}
+            headerTemplate="Multiedit"
+            visible={true} >
+                <Spacer children={this.state.arr} gap={'0'}></Spacer>
+                <div style={{
+                    padding: '0 20px',
+                    display: 'flex',
+                    alignItems: 'center'
+                }}>
+                    <Dropdown
+                    append
+                    items={[
+                            { label: 'Action 1', onSelect: () => this.setState({arr: [...this.state.arr, <Editor />]}) },
+                    ]}>
+                        <Button type="primary" icon="plus-large" text="Add article" style="filled" size="large" shape="round" iconOnly={true} onClick={()=> false} />
+                    </Dropdown>
+                </div>
+            </Modal> 
+        );
+    }
+}
+
+interface IEditor {
+    sideBarOpen?: boolean;
+}
+
+export class Editor extends React.Component<IEditor, IEditor> {
+    constructor(props: IEditor) {
+        super(props);
+        this.state = {
+            sideBarOpen: false,
+            
+        }
+    }
+
+    render() {
+    return <div style={{borderRight: '4px solid grey'}}>
+        <Layout.AuthoringFrame
+        header={(
+            <SubNav zIndex={2}>
+                <ButtonGroup align='end'>
+                    <ButtonGroup subgroup={true} spaces="no-space">
+                        <Tooltip text='More actions' flow='left'>
+                            <NavButton type='default' icon='dots-vertical' text='More actions' onClick={()=> false} />
+                        </Tooltip>
+                        <Tooltip text='Send to / Publish' flow='left'>
+                            <NavButton type='highlight' icon='send-to' iconSize='big' text='Send to / Publish' onClick={()=> false} />
+                        </Tooltip>
+                        <Tooltip text='Send to / Publish' flow='left'>
+                            <NavButton type='darker' icon={this.state.sideBarOpen ? 'forward-thin' : 'backward-thin'} text='More actions' onClick={()=> this.setState({sideBarOpen: !this.state.sideBarOpen})} />
+                        </Tooltip>
+                    </ButtonGroup>
+                </ButtonGroup>
+            </SubNav>
+        )}
+        main={(
+            <Layout.AuthoringMain
+            headerPadding='medium'
+            toolBar={(
+                <React.Fragment>
+                    <div className="sd-editor-toolbar__content">
+                        <dl>
+                            <dt>Created</dt>
+                            <dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
+                            <dt>by</dt>
+                            <dt>Nareg Asmarian</dt>
+                        </dl>
+                        <dl>
+                            <dt>Modified</dt>
+                            <dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
+                        </dl>
+                    </div>
+                    <ButtonGroup align='end'>
+                        <IconButton icon="preview-mode" toolTipAppend={true} ariaValue="Print preview" onClick={()=> false} />
+                        <IconButton icon="adjust" ariaValue="Toogle theme" onClick={()=> false} />
+                        <IconButton icon="switches" ariaValue="Theme settings" onClick={()=> false} />
+                    </ButtonGroup>
+                </React.Fragment>
+            )}
+            authoringHeader ={(
+                <React.Fragment>
+                    <Form.FormGroup inlineLabel={true}>
+                        <Form.FormItem>
+                            <Input
+                                type='text'
+                                label='Slugline'
+                                value='This is some value'
+                                maxLength={30}
+                                error='This is error message'
+                                info='This is some hint message'
+                                required={false}
+                                disabled={false}
+                                invalid={false}
+                                onChange={(value) => {}} />
+                        </Form.FormItem>
+                        <Form.FormItem>
+                            <Input
+                                type='text'
+                                label='Slugline'
+                                value='This is some value'
+                                maxLength={30}
+                                error='This is error message'
+                                info='This is some hint message'
+                                required={false}
+                                disabled={false}
+                                invalid={false}
+                                onChange={(value) => {}} /> 
+                        </Form.FormItem>
+                    </Form.FormGroup>
+                    <Form.FormGroup inlineLabel={true}>
+                        <Form.FormItem>
+                            <Input
+                                type='text'
+                                label='Genre'
+                                value='This is some value'
+                                maxLength={30}
+                                error='This is error message'
+                                info='This is some hint message'
+                                required={false}
+                                disabled={false}
+                                invalid={false}
+                                onChange={(value) => {}} /> 
+                        </Form.FormItem>
+                    </Form.FormGroup>
+                    <Form.FormGroup marginBottom='0' inlineLabel={true}>
+                        <Form.FormItem>
+                            <Input
+                                type='text'
+                                label='Subject'
+                                value='This is some value'
+                                maxLength={30}
+                                error='This is error message'
+                                info='This is some hint message'
+                                required={true}
+                                disabled={false}
+                                invalid={false}
+                                onChange={(value) => {}} /> 
+                        </Form.FormItem>
+                        <Form.FormItem autoWidth={true}>
+                            <Form.FormText>Just testing:</Form.FormText>
+                        </Form.FormItem>
+                        <Form.FormItem>
+                            <Select
+                                label='Categories'
+                                labelHidden={true}
+                                value='This is some value'
+                                error='This is error message'
+                                info='This is some hint message'
+                                required={true}
+                                disabled={false}
+                                invalid={false}
+                                onChange={(value) => {}}>
+                                    <Option>Option 1</Option>
+                                    <Option>Option 2</Option>
+                            </Select>
+                        </Form.FormItem>
+                        <Form.FormItem autoWidth={true}>
+                            <ButtonGroup>
+                                <IconButton ariaValue="Submit" icon="picture" onClick={()=> false} />
+                                <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
+                                <Button text="Submit" onClick={()=> false} type="primary" />
+                            </ButtonGroup>
+                        </Form.FormItem>
+                    </Form.FormGroup>
+                </React.Fragment>
+            )}>
+            </Layout.AuthoringMain>
+        )}
+        sidePanel={(
+            <Layout.Panel side='right' background='grey' open={false} size='x-small'>
+                <Layout.PanelHeader title='Pinned content' onClose={() => false}>
+                </Layout.PanelHeader>
+                <Layout.PanelContent>
+                    <Layout.PanelContentBlock>
+                        <BoxedList density='comfortable'>
+                            <BoxedListItem 
+                                type="success"
+                                clickable={true}
+                                media={(
+                                    <Icon name='slideshow'  />
+                                )}
+                                actions={(
+                                    <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
+                                )}
+                            >
+                                <BoxedListContentRow>
+                                    Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.
+                                </BoxedListContentRow>
+                                <BoxedListContentRow>
+                                    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. 
+                                </BoxedListContentRow>
+                            </BoxedListItem>
+                            <BoxedListItem 
+                                type="warning"
+                                media={(
+                                    <AvatarWrapper
+                                        size="medium"
+                                        >
+                                        <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
+                                    </AvatarWrapper>
+                                )}
+                                footer={(
+                                    <ButtonGroup align="end">
+                                        <Button text="cancel" size="small" style="hollow" onClick={()=> false} />
+                                        <Button text="yes" size="small" style="hollow" type="primary" onClick={()=> false} />
+                                    </ButtonGroup>
+                                )}
+                                actions={(
+                                    <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
+                                )}
+                            >
+                                <BoxedListContentRow>
+                                    Maecenas sed diam eget risus varius blandit sit amet magna.
+                                </BoxedListContentRow>
+                            </BoxedListItem>
+                            <BoxedListItem 
+                                selected={true}
+                                actions={(
+                                    <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
+                                )}
+                            >
+                                <BoxedListContentRow>
+                                    Maecenas sed diam eget risus varius blandit sit amet magna. Vestibulum id ligula porta felis euismod semper.
+                                </BoxedListContentRow>
+                            </BoxedListItem>
+                        </BoxedList>
+                    </Layout.PanelContentBlock>
+                </Layout.PanelContent>
+            </Layout.Panel>
+        )}
+        
+        sideBarClosed={this.state.sideBarOpen}
+        sideBar={(
+            <Nav.SideBarTabs
+            items={[
+                { icon: 'info', size: 'big', tooltip: 'Info', onClick: () => false },
+                { icon: 'chat', size: 'big', tooltip: 'Comments', onClick: () => false },
+                { icon: 'history', size: 'big', tooltip: 'History', onClick: () => false },
+                { icon: 'package', size: 'big', tooltip: 'Packages', onClick: () => false },
+                { icon: 'attachment', size: 'big', tooltip: 'Attachments', onClick: () => false },
+                { icon: 'comments', size: 'big', tooltip: 'Inline Comments', onClick: () => false },
+                { icon: 'suggestion', size: 'big', tooltip: 'Suggestions', onClick: () => false }]} />
+        )}
+    />
+    </div>
+    }
+}

package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx

@@ -1,11 +1,8 @@
 import * as React from 'react';
-import * as Components from './components/Index';
-import { ButtonGroup, Button, NavButton, SubNav, Dropdown, Input, IconButton, Divider, Tooltip, Select, Option, Switch, Icon, AvatarWrapper, AvatarContentImage, AvatarContentText, Text, EmptyState, Alert, SlidingToolbar, TabLabel, Tabs, Heading, RadioButtonGroup, Container, Label, IconLabel } from '../../../../app-typescript/index';
+import { ButtonGroup, Button, NavButton, SubNav, Dropdown, Input, IconButton, Divider, Tooltip, Select, Option, Text, SlidingToolbar, Container, Label, IconLabel } from '../../../../app-typescript/index';
 import * as Layout from '../../../../app-typescript/components/Layouts';
 import * as Form from '../../../../app-typescript/components/Form';
 import * as Nav from '../../../../app-typescript/components/Navigation';
-import { BoxedList, BoxedListItem, BoxedListContentRow } from '../../../../app-typescript/components/Lists';
-import { SimpleList, SimpleListItem } from '../../../../app-typescript/components/Lists';
 import { TableList } from '../../../../app-typescript/components/Lists/TableList';
 
 interface IProps {
@@ -27,6 +24,7 @@ interface IState {
     rightPanelPinned: boolean;
     sideOverlayOpen: boolean;
     array: any;
+    inputValue: string;
 }
 
 export class RundownEditor extends React.Component<IProps, IState> {
@@ -46,6 +44,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
             rightPanelOpen: false,
             rightPanelPinned: false,
             sideOverlayOpen: false,
+            inputValue: 'string',
             array: [
                 {
                     start: <>
@@ -113,7 +112,6 @@ export class RundownEditor extends React.Component<IProps, IState> {
                     onClick: () => { this.setState({rightPanelOpen: !this.state.rightPanelOpen})}
                 },
             ]
-            
         }
         this.handleTheme = this.handleTheme.bind(this);
     }
@@ -137,7 +135,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
                 <Layout.HeaderPanel>       
                     <SubNav>
                         <ButtonGroup align='end'>
-                            <Button text="Cancel"  onClick={()=> false} type="default" />
+                            <Button text="Cancel" onClick={()=> false} type="default" />
                             <Button text="Save Rundown" onClick={()=> false} type="primary" />
                             <Divider size="mini" />
                             <ButtonGroup subgroup={true} spaces="no-space">
@@ -299,31 +297,35 @@ export class RundownEditor extends React.Component<IProps, IState> {
                         )}
                         >
                             <Container direction='column' className='sd-margin-y--2'>
-                                <input
-                                    onChange={()=> false}
+                                <Input 
+                                    label='Rundown title'
+                                    value={'Marker // 01.06.2022'}
+                                    boxedStyle={true}
+                                    boxedLable={true}
+                                    size='x-large'
+                                    placeholder='Rundown title'
+                                    labelHidden={true}
                                     type='text'
-                                    value='Marker // 01.06.2022'
-                                    className='sd-editor__input--title' />
+                                    tabindex={0}
+                                    onChange={(value) => this.setState({inputValue: value})} />
                             </Container>
                             <ButtonGroup>
                                 <IconLabel style='translucent' innerLabel='Airtime:' text='19:00 - 19:45' size='large' type='primary' icon='time' />
                                 <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='large' type='warning' />
                                 <Text color='light' size='medium' className='sd-margin--0'>OF</Text>
-                                <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='large' />
+                                <IconLabel style='translucent' innerLabel='Planned:'text='00:45' size='large' />
                             </ButtonGroup>
-
                             <TableList
-                            className='sd-margin-y--4'
-                            dragAndDrop
-                            addItem
-                            array={this.state.array}
-                            itemsDropdown={[
-                                { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
-                                { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
-                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
-                            ]}
-                            onClick={() => false}
-                            />   
+                                className='sd-margin-y--4'
+                                dragAndDrop
+                                addItem
+                                array={this.state.array}
+                                itemsDropdown={() => [
+                                    { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
+                                    { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
+                                    { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                                ]}
+                            />
 
                     </Layout.AuthoringMain>
                 </Layout.MainPanel>
@@ -336,6 +338,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                 <Layout.AuthoringMain
                                     headerPadding='medium'
                                     toolbarCustom={true}
+                                    headerCollapsed={true}
                                     toolBar={(
                                         <React.Fragment>
                                             <SubNav className='sd-shadow--z0'>

package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx

@@ -1,14 +1,9 @@
 import * as React from 'react';
-import * as Components from './components/Index';
 import { ButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, RadioGroup, RadioButtonGroup, Input, Select, Option, Label, IconLabel, Icon, IconButton, Checkbox, GridList, Badge, Tooltip, CreateButton, Modal, EmptyState, Container, BoxedList, BoxedListItem, BoxedListContentRow, Text, Heading, FormLabel, SlidingToolbar, Switch, SwitchGroup, SearchBar } from '../../../../app-typescript/index';
 import * as Layout from '../../../../app-typescript/components/Layouts';
 import * as Form from '../../../../app-typescript/components/Form';
 import {RundownEditor} from './RundownEditor';
 import * as Nav from '../../../../app-typescript/components/Navigation';
-import * as GridElements from '../../../../app-typescript/components/GridItem';
-
-
-import dummy_items from '../dummy-data/items';
 import { ContentList } from '../../../../app-typescript/components/Lists/ContentList';
 import { TableList } from '../../../../app-typescript/components/Lists/TableList';
 
@@ -137,6 +132,10 @@ export class Rundowns extends React.Component<IProps, IState> {
         })
     }
 
+    componentDidUpdate() {
+        console.log(this.state);
+    }
+
     changeStatus(item: any, status: string) {
         if (item.status.includes(status)) {
             item.status.splice(item.status.indexOf(status), 1);
@@ -487,7 +486,7 @@ export class Rundowns extends React.Component<IProps, IState> {
                                         <Container direction='row' gap='small'><Text color='light'>Updated 3 hours ago by </Text><Text weight='medium'>John Doe</Text></Container>
                                     </Container>
                                     <Container className='sd-margin-s--auto sd-flex--items-center'>
-                                        <Dropdown
+                                        {/* <Dropdown
                                             align = 'right'
                                             append = {true}
                                             items={[
@@ -500,7 +499,7 @@ export class Rundowns extends React.Component<IProps, IState> {
                                                     ]
                                                 }]}>
                                             <IconButton ariaValue='dropdown-more-options' icon='dots-vertical' onClick={() => false} />
-                                        </Dropdown>
+                                        </Dropdown> */}
                                     </Container>
                                 </Layout.PanelContentBlock>
 
@@ -524,15 +523,14 @@ export class Rundowns extends React.Component<IProps, IState> {
                                         <IconLabel style='translucent' innerLabel='Planned:'text='01:00' />
                                     </ButtonGroup>
                                     <TableList
-                                className='sd-margin-y--4'
-                                array={this.state.array}
-                                itemsDropdown={[
-                                    { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
-                                    { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
-                                    { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
-                                ]}
-                                onClick={() => false}
-                                />   
+                                        className='sd-margin-y--4'
+                                        array={this.state.array}
+                                        itemsDropdown={() => [
+                                            { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
+                                            { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
+                                            { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                                        ]}
+                                    />   
                                 </Layout.PanelContentBlock>
                             </Layout.PanelContent>
                         </Layout.Panel>
@@ -553,6 +551,7 @@ export class Rundowns extends React.Component<IProps, IState> {
             {/* Manage Templates Modal */}
             <Modal headerTemplate="Manage Templates"
                 visible={this.state.modalManageTemplate}
+                zIndex={1000}
                 contentBg='medium'
                 contentPadding='none'
                 size='x-large' onHide={() => {this.setState({modalManageTemplate: false})}}>
@@ -632,8 +631,6 @@ export class Rundowns extends React.Component<IProps, IState> {
                                             </Container>
                                         </BoxedListItem>
                                     </BoxedList> */}
-
-
                             </Layout.PanelContent>
                         </Layout.Panel>
                     </Layout.LeftPanel>
@@ -652,6 +649,7 @@ export class Rundowns extends React.Component<IProps, IState> {
             {/* New Show Modal */}
             <Modal headerTemplate="Create new Show"
                 visible={this.state.modalNewShow}
+                zIndex={1000}
                 footerTemplate={newShowFooter}
                 contentBg='medium'
                 size='medium' onHide={() => {this.setState({modalNewShow: false})}}>
@@ -683,6 +681,7 @@ export class Rundowns extends React.Component<IProps, IState> {
             {/* New Show Modal Success */}
             <Modal headerTemplate="Create new Show"
                 visible={this.state.modalNewShowSuccess}
+                zIndex={1000}
                 footerTemplate={newShowFooter2}
                 contentBg='medium'
                 size='medium' onHide={() => {this.setState({modalNewShowSuccess: false})}}>
@@ -692,14 +691,13 @@ export class Rundowns extends React.Component<IProps, IState> {
                         The show <strong>Marker</strong> has been successfully created.<br />
                         Do you want to cretate a template for this show right away?
                     </Text>
-
-
                 </Container>
             </Modal>
 
             {/* New Template Modal */}
             <Modal headerTemplate="Create new Template"
                 visible={this.state.modalNewTemplate}
+                zIndex={1000}
                 contentBg='medium'
                 contentPadding='none'
                 size='x-large' onHide={() => {this.setState({modalNewTemplate: false})}}>
@@ -733,7 +731,7 @@ export class Rundowns extends React.Component<IProps, IState> {
                                         </ButtonGroup>
                                     </Container>
                                     <BoxedList>
-                                    <BoxedListItem
+                                        <BoxedListItem
                                             alignVertical='center'
                                             clickable={true}
                                             density='compact'
@@ -805,6 +803,7 @@ export class Rundowns extends React.Component<IProps, IState> {
             {/* Manage Shows Modal */}
             <Modal headerTemplate="Manage Shows"
                 visible={this.state.modalManageShow}
+                zIndex={1000}
                 contentBg='medium'
                 contentPadding='none'
                 size='x-large' onHide={() => {this.setState({modalManageShow: false})}}>

package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx

@@ -141,7 +141,10 @@ export class SamsPlayground extends React.Component<IProps, IState> {
                                 <Components.PanelContentBlock>
                                     <div className="form__group">
                                         <div className="form__item">
-                                            <Input label='Title'
+                                            <Input
+                                                label='Title'
+                                                type='text'
+                                                value=''
                                                 error='This is error message'
                                                 inlineLabel={false}
                                                 disabled={false}
@@ -167,7 +170,10 @@ export class SamsPlayground extends React.Component<IProps, IState> {
 
                                     <div className="form__group">
                                         <div className="form__item">
-                                            <Input label='Keyword'
+                                            <Input 
+                                                label='Keyword'
+                                                type='text'
+                                                value=''
                                                 error='This is error message'
                                                 inlineLabel={false}
                                                 disabled={false}
@@ -232,8 +238,11 @@ export class SamsPlayground extends React.Component<IProps, IState> {
                                             <Badge text={item.urgency} color={item.urgencyColor} />
                                             <Badge text={item.priority} shape='square' color={item.priorityColor} />
                                         </GridElements.GridItemFooterBlock>
+                                        <GridElements.GridItemFooterBlock align='right'>
+                                            <Label type='success' style='translucent' text='In progress' />
+                                        </GridElements.GridItemFooterBlock>
                                         <GridElements.GridItemFooterActions>
-                                            <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> this.changeStatus(item, 'archived')} />
+                                            <IconButton size='small' icon='dots-vertical' ariaValue='More actions' onClick={()=> this.changeStatus(item, 'archived')} />
                                         </GridElements.GridItemFooterActions>
                                     </GridElements.GridItemFooter>
                                 </GridElements.GridItem>