superdesk-ui-framework 3.0.74 → 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,7 @@
 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} 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';
 
 interface IProps {
@@ -23,7 +24,14 @@ interface IState {
     date: any;
     time: string;
     modalPlanningTemplates: boolean;
+    modalSaveEvent: boolean;
+    modalSaveEvent2: boolean;
+    modalSaveEvent3: boolean;
+    modalSaveEvent4: boolean;
     treeSelectValue: any;
+    value: any;
+    valueS2: any;
+    thisTheme: string;
 }
 
 let options2 = [
@@ -57,7 +65,14 @@ export class TestGround extends React.Component<IProps, IState> {
             date: new Date('2022-01-08'),
             time: '16:50',
             modalPlanningTemplates: false,
+            modalSaveEvent: false,
+            modalSaveEvent2: false,
+            modalSaveEvent3: false,
+            modalSaveEvent4: false,
             treeSelectValue: [],
+            value: undefined,
+            valueS2: undefined,
+            thisTheme: 'light-ui',
         }
     }
 
@@ -69,12 +84,457 @@ 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> = [
+            {
+                imageUrl: null,
+                initials: "VS",
+                displayName: 'Vladimir Stefanovic',
+                icon:{name: 'text', color: 'var(--sd-colour-highlight)'},
+            },
+            {
+                imageUrl: null,
+                initials: "JL",
+                displayName: 'Jeffrey Lebowski',
+                icon:{name: 'photo', color: 'var(--sd-colour-highlight)'}
+            },
+            {
+                imageUrl: null,
+                initials: "WS",
+                displayName: 'Walter Sobchak',
+                icon:{name: 'video', color: 'var(--sd-colour-highlight)'}
+            },
+            {
+                imageUrl: null,
+                initials: "ML",
+                displayName: 'Maude Lebowski',
+                icon:{name: 'file', color: 'var(--sd-colour-highlight)'}
+            },
+        ];
+
+        const modalSaveEventFooterOne=(
+            <ButtonGroup align="end">
+                <Button text='Cancel' onClick={() => this.setState({modalSaveEvent:false})} />
+                <Button type='primary' text='Save' onClick={() => this.setState({modalSaveEvent:false})} />
+            </ButtonGroup>
+        );
+        const modalSaveEventFooterTwo=(
+            <ButtonGroup align="end">
+                <Button text='Cancel' onClick={() => this.setState({modalSaveEvent2:false})} />
+                <Button type='primary' text='Save' onClick={() => this.setState({modalSaveEvent2:false})} />
+            </ButtonGroup>
+        );
+        const modalSaveEventFooterThree=(
+            <ButtonGroup align="end">
+                <Button text='Cancel' onClick={() => this.setState({modalSaveEvent3:false})} />
+                <Button type='primary' text='Save' onClick={() => this.setState({modalSaveEvent3:false})} />
+            </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>
+                                <span className="sd-dropdown-button__text-value">Events &amp; Coverages</span>
+                            </span>
+                            <Icon name='chevron-down-thin' />
+                        </button> */}
+                        
+                        <hr />
+
                         <Button text="Planning Templates" onClick={() => this.setState({modalPlanningTemplates: true})} />
+                        <span></span>
+                        
+                        
+                         {/* Event Saving modals */}
+                         {/* Event Only (This one existed Before) */}
+                        <Modal 
+                            headerTemplate="Save Event"
+                            zIndex={10000}
+                            visible={this.state.modalSaveEvent}
+                            contentPadding='medium'
+                            contentBg='medium'
+                            size='medium'
+                            footerTemplate={modalSaveEventFooterOne}
+                            onHide={() => {this.setState({modalSaveEvent: false})}}
+                        >
+                            <div>
+                                <FormLabel text='Name'/>
+                                <Text size='small' weight='medium'>Australian Open 2024</Text>
+                            </div>
+                            <ContentDivider type="dashed" margin='x-small' />
+                            <div>
+                                <FormLabel text='Current Date'/>
+                                <Text size='small' weight='medium'>05.02.2024 @ 10:00</Text>
+                            </div>
+                            <ContentDivider type="dashed" margin='x-small' />
+                            <div>
+                                <FormLabel text='Current Repeat Summary'/>
+                                <Text size='small' weight='medium'>Every 1 day(s) until CET 28 Feb 2024</Text>
+                            </div>
+                            <ContentDivider type="dashed" margin='x-small' />
+                            <div>
+                                <FormLabel text='No. of events'/>
+                                <Text size='small' weight='medium'>1</Text>
+                            </div>
+                            <ContentDivider type="dashed" margin='x-small' />
+                            <Text size='small' className='mb-1 mt-0-5'><strong>This is a recurring event</strong>. Update all recurring events or just this one?</Text>
+                            <Select
+                                value={this.state.value}
+                                label='Update:'
+                                required={false}
+                                disabled={false}
+                                inlineLabel={true}
+                                labelHidden={true}
+                                onChange={(value) => {
+                                    this.setState({
+                                        value: value,
+                                    })
+                                }}
+                            >
+                                <Option>This event only</Option>
+                                <Option>This and all future events</Option>
+                                <Option>All events</Option>
+                            </Select>
+                        </Modal>
+
+                        {/* Event and Planning */}
+                        <Modal 
+                            headerTemplate="Save Event"
+                            zIndex={10000}
+                            visible={this.state.modalSaveEvent2}
+                            contentPadding='medium'
+                            contentBg='medium'
+                            size='medium'
+                            footerTemplate={modalSaveEventFooterTwo}
+                            onHide={() => {this.setState({modalSaveEvent2: false})}}
+                        >
+                            <div>
+                                <FormLabel text='Name'/>
+                                <Text size='small' weight='medium'>Australian Open 2024</Text>
+                            </div>
+                            <ContentDivider type="dashed" margin='x-small' />
+                            <div>
+                                <FormLabel text='Current Date'/>
+                                <Text size='small' weight='medium'>05.02.2024 @ 10:00</Text>
+                            </div>
+                            <ContentDivider type="dashed" margin='x-small' />
+                            <div>
+                                <FormLabel text='Current Repeat Summary'/>
+                                <Text size='small' weight='medium'>Every 1 day(s) until CET 28 Feb 2024</Text>
+                            </div>
+                            <ContentDivider type="dashed" margin='x-small' />
+                            <div>
+                                <FormLabel text='No. of events'/>
+                                <Text size='small' weight='medium'>1</Text>
+                            </div>
+                            <ContentDivider type="dashed" margin='x-small' />
+                            <Text size='small' className='mb-1 mt-0-5'><strong>This is a recurring event</strong>. Update all recurring events or just this one?</Text>
+                            <Select
+                                value={this.state.valueS2}
+                                label='Update:'
+                                required={false}
+                                disabled={false}
+                                inlineLabel={true}
+                                labelHidden={true}
+                                onChange={(value) => {
+                                    this.setState({
+                                        value: value,
+                                    })
+                                }}
+                            >
+                                <Option>This event only</Option>
+                                <Option>This and all future events</Option>
+                                <Option>All events</Option>
+                            </Select>
+                            <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>
+                                    <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="x-small"
+                                                items={avatars}
+                                            />
+                                            </span>
+                                        </div>
+                                    </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>
+
+                        </Modal>
+
+                        {/* Planning only */}
+                        <Modal 
+                            headerTemplate="Save Event"
+                            zIndex={10000}
+                            visible={this.state.modalSaveEvent3}
+                            contentPadding='medium'
+                            contentBg='medium'
+                            size='medium'
+                            footerTemplate={modalSaveEventFooterThree}
+                            onHide={() => {this.setState({modalSaveEvent3: false})}}
+                        >
+                            <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>
+                                    <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="x-small"
+                                                items={avatars}
+                                            />
+                                            </span>
+                                        </div>
+                                    </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>.
+                                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:'
+                                required={false}
+                                disabled={false}
+                                inlineLabel={true}
+                                labelHidden={true}
+                                onChange={(valueS3) => {
+                                    this.setState({
+                                        value: valueS3,
+                                    })
+                                }}
+                            >
+                                <Option>This planning only</Option>
+                                <Option>This and all future plannings</Option>
+                                <Option>All plannings</Option>
+                            </Select>
+
+                        </Modal>
+
+                        {/* Planning templates modal */}
                         <Modal headerTemplate="Planning templates"
                             zIndex={10000}
                             visible={this.state.modalPlanningTemplates}

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>