superdesk-ui-framework 3.0.75 → 3.0.76

package/dist/vendor.bundle.js

@@ -70,7 +70,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/ 	__webpack_require__.p = "";
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 574);
+/******/ 	return __webpack_require__(__webpack_require__.s = 576);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -28246,7 +28246,7 @@ module.exports = function(module) {
 
 /***/ }),
 
-/***/ 574:
+/***/ 576:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -28256,19 +28256,19 @@ __webpack_require__(21);
 
 __webpack_require__(44);
 
-__webpack_require__(575);
-
 __webpack_require__(577);
 
 __webpack_require__(579);
 
+__webpack_require__(581);
+
 __webpack_require__(0);
 
 __webpack_require__(8);
 
 /***/ }),
 
-/***/ 575:
+/***/ 577:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -28292,7 +28292,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 	if ( true ) {
 
 		// AMD. Register as an anonymous module.
-		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(44), __webpack_require__(576) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
+		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(44), __webpack_require__(578) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
 				__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
 				(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
 				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
@@ -29030,7 +29030,7 @@ return $.widget;
 
 /***/ }),
 
-/***/ 576:
+/***/ 578:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;( function( factory ) {
@@ -29060,16 +29060,16 @@ return $.ui.version = "1.13.0";
 
 /***/ }),
 
-/***/ 577:
+/***/ 579:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(578);
+__webpack_require__(580);
 module.exports = angular;
 
 
 /***/ }),
 
-/***/ 578:
+/***/ 580:
 /***/ (function(module, exports, __webpack_require__) {
 
 /* WEBPACK VAR INJECTION */(function(__webpack_provided_window_dot_jQuery) {/**
@@ -65676,16 +65676,16 @@ $provide.value("$locale", {
 
 /***/ }),
 
-/***/ 579:
+/***/ 581:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(580);
+__webpack_require__(582);
 module.exports = 'ngAnimate';
 
 
 /***/ }),
 
-/***/ 580:
+/***/ 582:
 /***/ (function(module, exports) {
 
 /**

package/examples/pages/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/examples/pages/playgrounds/react-playgrounds/TestGround.tsx

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

package/examples/pages/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/examples/pages/react/Index.tsx

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "3.0.75",
+  "version": "3.0.76",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",
@@ -72,7 +72,6 @@
     "prismjs": "^1.28.0",
     "prop-types": "^15.6.0",
     "react": "16.8.6",
-    "react-bootstrap": "^0.31.2",
     "react-dom": "16.8.6",
     "react-redux": "^5.0.6",
     "react-router-dom": "^5.1.2",
@@ -92,7 +91,6 @@
     "webpack-merge": "^4.2.1"
   },
   "dependencies": {
-    "@material-ui/lab": "^4.0.0-alpha.56",
     "@popperjs/core": "^2.4.0",
     "@superdesk/primereact": "^5.0.2-12",
     "@superdesk/react-resizable-panels": "0.0.39",
@@ -108,7 +106,6 @@
     "primeicons": "2.0.0",
     "react-beautiful-dnd": "^13.0.0",
     "react-id-generator": "^3.0.0",
-    "react-popper": "^2.2.3",
     "react-scrollspy": "^3.4.3"
   }
 }

package/react/components/IllustrationButton.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface IProps {
+    text: string;
+    onClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
+    children?: React.ReactNode;
+    disabled?: boolean;
+}
+export declare class IllustrationButton extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

package/react/components/IllustrationButton.js

@@ -0,0 +1,62 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IllustrationButton = void 0;
+var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var IllustrationButton = /** @class */ (function (_super) {
+    __extends(IllustrationButton, _super);
+    function IllustrationButton() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    IllustrationButton.prototype.render = function () {
+        var classes = (0, classnames_1.default)('illustration-button', {
+            'illustration-button--disabled': this.props.disabled,
+        });
+        return (React.createElement("button", { className: classes, tabIndex: 0, onClick: this.props.onClick },
+            this.props.children,
+            React.createElement("span", { className: 'illustration-button__text-label' }, this.props.text)));
+    };
+    return IllustrationButton;
+}(React.PureComponent));
+exports.IllustrationButton = IllustrationButton;

package/react/components/SvgIconIllustration.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface IProps {
+    illustration: 'headlines' | 'keywords' | 'optimise' | 'summary' | 'translate';
+}
+export declare class SvgIconIllustration extends React.PureComponent<IProps> {
+    renderSVG(): JSX.Element | null;
+    render(): JSX.Element;
+}
+export {};