superdesk-ui-framework 3.0.74 → 3.0.76

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/app/img/icon_illustrations/IconIllustration__headlines.svg +25 -0
  2. package/app/img/icon_illustrations/IconIllustration__keywords.svg +46 -0
  3. package/app/img/icon_illustrations/IconIllustration__optimise.svg +38 -0
  4. package/app/img/icon_illustrations/IconIllustration__summary.svg +27 -0
  5. package/app/img/icon_illustrations/IconIllustration__translate.svg +12 -0
  6. package/app/styles/_buttons.scss +47 -0
  7. package/app/styles/_simple-list.scss +13 -1
  8. package/app/styles/components/_list-item.scss +4 -0
  9. package/app/styles/components/_sd-grid-item.scss +4 -0
  10. package/app/styles/design-tokens/_design-tokens-general.scss +14 -1
  11. package/app/styles/form-elements/_inputs.scss +53 -11
  12. package/app-typescript/components/FormLabel.tsx +1 -1
  13. package/app-typescript/components/IllustrationButton.tsx +29 -0
  14. package/app-typescript/components/Lists/SimpleList.tsx +3 -0
  15. package/app-typescript/components/Select.tsx +13 -11
  16. package/app-typescript/components/SvgIconIllustration.tsx +191 -0
  17. package/app-typescript/index.ts +2 -0
  18. package/dist/examples.bundle.js +1143 -543
  19. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +1 -1
  20. package/dist/playgrounds/react-playgrounds/TestGround.tsx +462 -2
  21. package/dist/react/IllustrationButton.tsx +89 -0
  22. package/dist/react/Index.tsx +6 -1
  23. package/dist/superdesk-ui.bundle.css +110 -14
  24. package/dist/superdesk-ui.bundle.js +588 -306
  25. package/dist/vendor.bundle.js +13 -13
  26. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +1 -1
  27. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +462 -2
  28. package/examples/pages/react/IllustrationButton.tsx +89 -0
  29. package/examples/pages/react/Index.tsx +6 -1
  30. package/package.json +1 -4
  31. package/react/components/FormLabel.js +1 -1
  32. package/react/components/IllustrationButton.d.ts +11 -0
  33. package/react/components/IllustrationButton.js +62 -0
  34. package/react/components/Lists/SimpleList.d.ts +1 -0
  35. package/react/components/Lists/SimpleList.js +1 -0
  36. package/react/components/Select.js +2 -1
  37. package/react/components/SvgIconIllustration.d.ts +9 -0
  38. package/react/components/SvgIconIllustration.js +199 -0
  39. package/react/index.d.ts +2 -0
  40. package/react/index.js +6 -2
@@ -872,7 +872,7 @@ export class Rundowns extends React.Component<IProps, IState> {
872
872
  size='x-large' onHide={() => {this.setState({modalManageShow: false})}}
873
873
  >
874
874
  <Layout.LayoutContainer>
875
- <Layout.HeaderPanel>
875
+ <Layout.HeaderPanel>
876
876
  <SubNav zIndex={2}>
877
877
  <SearchBar placeholder='Search shows'></SearchBar>
878
878
  <ButtonGroup align='end' spaces='no-space'>
@@ -1,6 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import * as Components from './components/Index';
3
- 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';
3
+ 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';
4
+ import { IAvatarInGroup } from '../../../../app-typescript/components/avatar/avatar-group';
4
5
  import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
5
6
 
6
7
  interface IProps {
@@ -23,7 +24,14 @@ interface IState {
23
24
  date: any;
24
25
  time: string;
25
26
  modalPlanningTemplates: boolean;
27
+ modalSaveEvent: boolean;
28
+ modalSaveEvent2: boolean;
29
+ modalSaveEvent3: boolean;
30
+ modalSaveEvent4: boolean;
26
31
  treeSelectValue: any;
32
+ value: any;
33
+ valueS2: any;
34
+ thisTheme: string;
27
35
  }
28
36
 
29
37
  let options2 = [
@@ -57,7 +65,14 @@ export class TestGround extends React.Component<IProps, IState> {
57
65
  date: new Date('2022-01-08'),
58
66
  time: '16:50',
59
67
  modalPlanningTemplates: false,
68
+ modalSaveEvent: false,
69
+ modalSaveEvent2: false,
70
+ modalSaveEvent3: false,
71
+ modalSaveEvent4: false,
60
72
  treeSelectValue: [],
73
+ value: undefined,
74
+ valueS2: undefined,
75
+ thisTheme: 'light-ui',
61
76
  }
62
77
  }
63
78
 
@@ -69,12 +84,457 @@ export class TestGround extends React.Component<IProps, IState> {
69
84
  }
70
85
  }
71
86
 
87
+ toggleTheme = () => {
88
+ this.setState( {
89
+ thisTheme: this.state.thisTheme === 'light-ui' ? 'dark-ui' : 'light-ui',
90
+ });
91
+ };
92
+
72
93
  render() {
94
+ const avatars: Array<IAvatarInGroup> = [
95
+ {
96
+ imageUrl: null,
97
+ initials: "VS",
98
+ displayName: 'Vladimir Stefanovic',
99
+ icon:{name: 'text', color: 'var(--sd-colour-highlight)'},
100
+ },
101
+ {
102
+ imageUrl: null,
103
+ initials: "JL",
104
+ displayName: 'Jeffrey Lebowski',
105
+ icon:{name: 'photo', color: 'var(--sd-colour-highlight)'}
106
+ },
107
+ {
108
+ imageUrl: null,
109
+ initials: "WS",
110
+ displayName: 'Walter Sobchak',
111
+ icon:{name: 'video', color: 'var(--sd-colour-highlight)'}
112
+ },
113
+ {
114
+ imageUrl: null,
115
+ initials: "ML",
116
+ displayName: 'Maude Lebowski',
117
+ icon:{name: 'file', color: 'var(--sd-colour-highlight)'}
118
+ },
119
+ ];
120
+
121
+ const modalSaveEventFooterOne=(
122
+ <ButtonGroup align="end">
123
+ <Button text='Cancel' onClick={() => this.setState({modalSaveEvent:false})} />
124
+ <Button type='primary' text='Save' onClick={() => this.setState({modalSaveEvent:false})} />
125
+ </ButtonGroup>
126
+ );
127
+ const modalSaveEventFooterTwo=(
128
+ <ButtonGroup align="end">
129
+ <Button text='Cancel' onClick={() => this.setState({modalSaveEvent2:false})} />
130
+ <Button type='primary' text='Save' onClick={() => this.setState({modalSaveEvent2:false})} />
131
+ </ButtonGroup>
132
+ );
133
+ const modalSaveEventFooterThree=(
134
+ <ButtonGroup align="end">
135
+ <Button text='Cancel' onClick={() => this.setState({modalSaveEvent3:false})} />
136
+ <Button type='primary' text='Save' onClick={() => this.setState({modalSaveEvent3:false})} />
137
+ </ButtonGroup>
138
+ );
73
139
  return (
74
- <Components.Layout header='Testing Ground'>
140
+ <Components.Layout header='Testing Ground' theme={this.state.thisTheme}>
75
141
  <Components.LayoutContainer>
76
142
  <Components.MainPanel>
143
+
144
+ <ButtonGroup align='end'>
145
+ <IconButton icon="adjust" ariaValue="Toggle theme" onClick={this.toggleTheme} toolTipFlow='left' />
146
+ </ButtonGroup>
147
+
148
+ <hr />
149
+ <SvgIconIllustration illustration='headlines' />
150
+ <hr />
151
+
152
+ <div className='sd-grid-list sd-grid-list--xx-small sd-grid-list--gap-s sd-grid-list--no-margin' style={{width:'290px'}}>
153
+
154
+ <IllustrationButton text='Headlines' onClick={()=> false}>
155
+ <SvgIconIllustration illustration='headlines' />
156
+ </IllustrationButton>
157
+
158
+ <IllustrationButton text='Keywords' onClick={()=> false}>
159
+ <SvgIconIllustration illustration='keywords' />
160
+ </IllustrationButton>
161
+
162
+ <IllustrationButton text='Optimise' onClick={()=> false}>
163
+ <SvgIconIllustration illustration='optimise' />
164
+ </IllustrationButton>
165
+
166
+ <IllustrationButton text='Summary' onClick={()=> false}>
167
+ <SvgIconIllustration illustration='summary' />
168
+ </IllustrationButton>
169
+
170
+ <IllustrationButton text='Translate' onClick={()=> false}>
171
+ <SvgIconIllustration illustration='translate' />
172
+ </IllustrationButton>
173
+
174
+ {/* <button className='illustration-button illustration-button--headlines'>
175
+ <SvgIconIllustration illustration='headlines' />
176
+ <span className='illustration-button__text-label'>
177
+ Headlines
178
+ </span>
179
+ </button>
180
+
181
+ <button className='illustration-button illustration-button--headlines'>
182
+ <SvgIconIllustration illustration='keywords' />
183
+ <span className='illustration-button__text-label'>
184
+ Keywords
185
+ </span>
186
+ </button>
187
+
188
+ <button className='illustration-button illustration-button--headlines'>
189
+ <SvgIconIllustration illustration='optimise' />
190
+ <span className='illustration-button__text-label'>
191
+ Optimise
192
+ </span>
193
+ </button>
194
+
195
+ <button className='illustration-button illustration-button--headlines'>
196
+ <SvgIconIllustration illustration='summary' />
197
+ <span className='illustration-button__text-label'>
198
+ Summary
199
+ </span>
200
+ </button>
201
+
202
+ <button className='illustration-button illustration-button--headlines'>
203
+ <SvgIconIllustration illustration='translate' />
204
+ <span className='illustration-button__text-label'>
205
+ Translate
206
+ </span>
207
+ </button> */}
208
+
209
+ </div>
210
+
211
+ <hr />
212
+
213
+ <Heading type='h3'>Below is an example structure of the content inside the 'Headlines' AI Assistant section</Heading>
214
+ <Text size="small" weight="light">Note: The surrounding div with inline styles is only there for the purpose of this demo. </Text>
215
+
216
+ <div className='' style={{width:'290px', marginBlockStart:'32px'}}>
217
+ <Container gap="small" direction='column'>
218
+ <Text size="small" weight="medium">
219
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et aenean eu leo quam ultricies.
220
+ </Text>
221
+ <ButtonGroup>
222
+ <Button size='small' text="Apply" onClick={()=> false} type="default" style="hollow" />
223
+ <IconButton ariaValue='Copy' icon='copy' onClick={()=> false} />
224
+ </ButtonGroup>
225
+ </Container>
226
+
227
+ <ContentDivider type="dashed" margin='small' />
228
+
229
+ <Container gap="small" direction='column'>
230
+ <Text size="small" weight="medium">
231
+ Aenean eu leo quam pellentesque ornare sem lacinia quam venenatis vestibulum nullam id dolor id nibh ultricies vehicula elit.
232
+ </Text>
233
+ <ButtonGroup>
234
+ <Button size='small' text="Apply" onClick={()=> false} type="default" style="hollow" />
235
+ <IconButton ariaValue='Copy' icon='copy' onClick={()=> false} />
236
+ </ButtonGroup>
237
+ </Container>
238
+
239
+ <ContentDivider type="dashed" margin='small' />
240
+
241
+ <Container gap="small" direction='column'>
242
+ <Text size="small" weight="medium">
243
+ Vestibulum id ligula porta felis euismod semper morbi leo risus, porta ac consectetur ac, vestibulum at eros maecenas faucibus.
244
+ </Text>
245
+ <ButtonGroup>
246
+ <Button size='small' text="Apply" onClick={()=> false} type="default" style="hollow" />
247
+ <IconButton ariaValue='Copy' icon='copy' onClick={()=> false} />
248
+ </ButtonGroup>
249
+ </Container>
250
+
251
+ </div>
252
+
253
+ <hr />
254
+
255
+ <ButtonGroup>
256
+ <Button text="Save Event Modal (Event only)" onClick={() => this.setState({modalSaveEvent: true})} />
257
+ <Button text="Save Event Modal (Event & Planning)" onClick={() => this.setState({modalSaveEvent2: true})} />
258
+ <Button text="Save Event Modal (Planning only)" onClick={() => this.setState({modalSaveEvent3: true})} />
259
+ </ButtonGroup>
260
+
261
+ <hr />
262
+
263
+ {/* <button type="button" className="sd-dropdown-button" aria-haspopup="true" aria-expanded="false">
264
+ <span className="sd-dropdown-button__text-block">
265
+ <label className="sd-dropdown-button__text-label">Coverage:</label>
266
+ <span className="sd-dropdown-button__text-value">Events &amp; Coverages</span>
267
+ </span>
268
+ <Icon name='chevron-down-thin' />
269
+ </button> */}
270
+
271
+ <hr />
272
+
77
273
  <Button text="Planning Templates" onClick={() => this.setState({modalPlanningTemplates: true})} />
274
+ <span></span>
275
+
276
+
277
+ {/* Event Saving modals */}
278
+ {/* Event Only (This one existed Before) */}
279
+ <Modal
280
+ headerTemplate="Save Event"
281
+ zIndex={10000}
282
+ visible={this.state.modalSaveEvent}
283
+ contentPadding='medium'
284
+ contentBg='medium'
285
+ size='medium'
286
+ footerTemplate={modalSaveEventFooterOne}
287
+ onHide={() => {this.setState({modalSaveEvent: false})}}
288
+ >
289
+ <div>
290
+ <FormLabel text='Name'/>
291
+ <Text size='small' weight='medium'>Australian Open 2024</Text>
292
+ </div>
293
+ <ContentDivider type="dashed" margin='x-small' />
294
+ <div>
295
+ <FormLabel text='Current Date'/>
296
+ <Text size='small' weight='medium'>05.02.2024 @ 10:00</Text>
297
+ </div>
298
+ <ContentDivider type="dashed" margin='x-small' />
299
+ <div>
300
+ <FormLabel text='Current Repeat Summary'/>
301
+ <Text size='small' weight='medium'>Every 1 day(s) until CET 28 Feb 2024</Text>
302
+ </div>
303
+ <ContentDivider type="dashed" margin='x-small' />
304
+ <div>
305
+ <FormLabel text='No. of events'/>
306
+ <Text size='small' weight='medium'>1</Text>
307
+ </div>
308
+ <ContentDivider type="dashed" margin='x-small' />
309
+ <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>
310
+ <Select
311
+ value={this.state.value}
312
+ label='Update:'
313
+ required={false}
314
+ disabled={false}
315
+ inlineLabel={true}
316
+ labelHidden={true}
317
+ onChange={(value) => {
318
+ this.setState({
319
+ value: value,
320
+ })
321
+ }}
322
+ >
323
+ <Option>This event only</Option>
324
+ <Option>This and all future events</Option>
325
+ <Option>All events</Option>
326
+ </Select>
327
+ </Modal>
328
+
329
+ {/* Event and Planning */}
330
+ <Modal
331
+ headerTemplate="Save Event"
332
+ zIndex={10000}
333
+ visible={this.state.modalSaveEvent2}
334
+ contentPadding='medium'
335
+ contentBg='medium'
336
+ size='medium'
337
+ footerTemplate={modalSaveEventFooterTwo}
338
+ onHide={() => {this.setState({modalSaveEvent2: false})}}
339
+ >
340
+ <div>
341
+ <FormLabel text='Name'/>
342
+ <Text size='small' weight='medium'>Australian Open 2024</Text>
343
+ </div>
344
+ <ContentDivider type="dashed" margin='x-small' />
345
+ <div>
346
+ <FormLabel text='Current Date'/>
347
+ <Text size='small' weight='medium'>05.02.2024 @ 10:00</Text>
348
+ </div>
349
+ <ContentDivider type="dashed" margin='x-small' />
350
+ <div>
351
+ <FormLabel text='Current Repeat Summary'/>
352
+ <Text size='small' weight='medium'>Every 1 day(s) until CET 28 Feb 2024</Text>
353
+ </div>
354
+ <ContentDivider type="dashed" margin='x-small' />
355
+ <div>
356
+ <FormLabel text='No. of events'/>
357
+ <Text size='small' weight='medium'>1</Text>
358
+ </div>
359
+ <ContentDivider type="dashed" margin='x-small' />
360
+ <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>
361
+ <Select
362
+ value={this.state.valueS2}
363
+ label='Update:'
364
+ required={false}
365
+ disabled={false}
366
+ inlineLabel={true}
367
+ labelHidden={true}
368
+ onChange={(value) => {
369
+ this.setState({
370
+ value: value,
371
+ })
372
+ }}
373
+ >
374
+ <Option>This event only</Option>
375
+ <Option>This and all future events</Option>
376
+ <Option>All events</Option>
377
+ </Select>
378
+ <ContentDivider type="solid" margin="medium" />
379
+ <Heading type='h3' className='mb-1 sd-text--strong'>Related Planning(s)</Heading>
380
+ <Text size='small' className='mb-1'>
381
+ <strong>You made changes to a planning item that is a part of a recurring event</strong>.
382
+ Apply the changes to all recurring planning items or just this one?
383
+ </Text>
384
+ <div className='sd-list-item-group--space-between-items'>
385
+ <div role="listitem" className="sd-list-item sd-shadow--z1 mb-1">
386
+ <div className="sd-list-item__border sd-list-item__border--locked"></div>
387
+ <div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
388
+ <div className="sd-list-item__row">
389
+ <i role="presentation" className="icon-calendar icon--light-blue"></i>
390
+ <span className="sd-list-item__slugline">Planning Slug</span>
391
+ <span className="sd-overflow-ellipsis sd-list-item--element-grow">
392
+ <span className="sd-list-item__text-strong">Cras justo odio, dapibus ac facilisis in.</span>
393
+ </span>
394
+ </div>
395
+ <div className="sd-list-item__row sd-list-item__row--overflow-visible me-1">
396
+ <Label text='draft' style='translucent'/>
397
+ <span className="sd-margin-s--auto">
398
+ <AvatarGroup
399
+ size="x-small"
400
+ items={avatars}
401
+ />
402
+ </span>
403
+ </div>
404
+ </div>
405
+ </div>
406
+ </div>
407
+
408
+ <Select
409
+ value={this.state.valueS2}
410
+ label='Update:'
411
+ required={false}
412
+ disabled={false}
413
+ inlineLabel={true}
414
+ labelHidden={true}
415
+ onChange={(valueS2) => {
416
+ this.setState({
417
+ value: valueS2,
418
+ })
419
+ }}
420
+ >
421
+ <Option>This planning only</Option>
422
+ <Option>This and all future plannings</Option>
423
+ <Option>All plannings</Option>
424
+ </Select>
425
+
426
+ </Modal>
427
+
428
+ {/* Planning only */}
429
+ <Modal
430
+ headerTemplate="Save Event"
431
+ zIndex={10000}
432
+ visible={this.state.modalSaveEvent3}
433
+ contentPadding='medium'
434
+ contentBg='medium'
435
+ size='medium'
436
+ footerTemplate={modalSaveEventFooterThree}
437
+ onHide={() => {this.setState({modalSaveEvent3: false})}}
438
+ >
439
+ <Heading type='h3' className='mb-1 sd-text--strong'>Related Planning(s)</Heading>
440
+ <Text size='small' className='mb-1'>
441
+ <strong>You made changes to a planning item that is a part of a recurring event</strong>.
442
+ Apply the changes to all recurring planning items or just this one?
443
+ </Text>
444
+ <div className='sd-list-item-group--space-between-items'>
445
+ <div role="listitem" className="sd-list-item sd-shadow--z1 mb-1">
446
+ <div className="sd-list-item__border sd-list-item__border--locked"></div>
447
+ <div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
448
+ <div className="sd-list-item__row">
449
+ <i role="presentation" className="icon-calendar icon--light-blue"></i>
450
+ <span className="sd-list-item__slugline">Planning Slug</span>
451
+ <span className="sd-overflow-ellipsis sd-list-item--element-grow">
452
+ <span className="sd-list-item__text-strong">Cras justo odio, dapibus ac facilisis in.</span>
453
+ </span>
454
+ </div>
455
+ <div className="sd-list-item__row sd-list-item__row--overflow-visible me-1">
456
+ <Label text='draft' style='translucent'/>
457
+ <span className="sd-margin-s--auto">
458
+ <AvatarGroup
459
+ size="x-small"
460
+ items={avatars}
461
+ />
462
+ </span>
463
+ </div>
464
+ </div>
465
+ </div>
466
+ </div>
467
+
468
+ <Select
469
+ value={this.state.valueS2}
470
+ label='Update:'
471
+ required={false}
472
+ disabled={false}
473
+ inlineLabel={true}
474
+ labelHidden={true}
475
+ onChange={(valueS2) => {
476
+ this.setState({
477
+ value: valueS2,
478
+ })
479
+ }}
480
+ >
481
+ <Option>This planning only</Option>
482
+ <Option>This and all future plannings</Option>
483
+ <Option>All plannings</Option>
484
+ </Select>
485
+
486
+ <ContentDivider type="dashed" margin='small' />
487
+
488
+ <Text size='small' className='mb-1'>
489
+ <strong>You made changes to a planning item that is a part of a recurring event</strong>.
490
+ Apply the changes to all recurring planning items or just this one?
491
+ </Text>
492
+
493
+ <div className='sd-list-item-group--space-between-items'>
494
+ <div role="listitem" className="sd-list-item sd-shadow--z1 mb-1">
495
+ <div className="sd-list-item__border sd-list-item__border--locked"></div>
496
+ <div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
497
+ <div className="sd-list-item__row">
498
+ <i role="presentation" className="icon-calendar icon--light-blue"></i>
499
+ <span className="sd-list-item__slugline">Planning Slug</span>
500
+ <span className="sd-overflow-ellipsis sd-list-item--element-grow">
501
+ <span className="sd-list-item__text-strong">Cras justo odio, dapibus ac facilisis in.</span>
502
+ </span>
503
+ </div>
504
+ <div className="sd-list-item__row sd-list-item__row--overflow-visible me-1">
505
+ <Label text='draft' style='translucent'/>
506
+ <span className="sd-margin-s--auto">
507
+ <AvatarGroup
508
+ size="small"
509
+ items={avatars}
510
+ />
511
+ </span>
512
+ </div>
513
+ </div>
514
+ </div>
515
+ </div>
516
+
517
+ <Select
518
+ value={this.state.valueS2}
519
+ label='Update:'
520
+ required={false}
521
+ disabled={false}
522
+ inlineLabel={true}
523
+ labelHidden={true}
524
+ onChange={(valueS3) => {
525
+ this.setState({
526
+ value: valueS3,
527
+ })
528
+ }}
529
+ >
530
+ <Option>This planning only</Option>
531
+ <Option>This and all future plannings</Option>
532
+ <Option>All plannings</Option>
533
+ </Select>
534
+
535
+ </Modal>
536
+
537
+ {/* Planning templates modal */}
78
538
  <Modal headerTemplate="Planning templates"
79
539
  zIndex={10000}
80
540
  visible={this.state.modalPlanningTemplates}
@@ -0,0 +1,89 @@
1
+ import * as React from 'react';
2
+ import {IllustrationButton, SvgIconIllustration, Prop, PropsList} from '../../../app-typescript';
3
+ import * as Markup from '../../js/react';
4
+
5
+ export class IllustrationButtonDoc extends React.Component {
6
+ render() {
7
+ return (
8
+ <section className="docs-page__container">
9
+ <h2 className="docs-page__h2">Illustration Button & SVG icon illustration</h2>
10
+ <Markup.ReactMarkupCodePreview>{`
11
+ <IllustrationButton text='Headlines' onClick={()=> false}>
12
+ <SvgIconIllustration illustration='headlines' />
13
+ </IllustrationButton>
14
+ `}
15
+ </Markup.ReactMarkupCodePreview>
16
+ <Markup.ReactMarkup>
17
+ <Markup.ReactMarkupPreview>
18
+ <div className="docs-page__content-row">
19
+ {/* Note: The style attribute is added only for the purpose of the demo */}
20
+ <div
21
+ className='sd-grid-list sd-grid-list--xx-small sd-grid-list--gap-s sd-grid-list--no-margin'
22
+ style={{width:'290px'}}
23
+ >
24
+ <IllustrationButton text='Headlines' onClick={()=> false}>
25
+ <SvgIconIllustration illustration='headlines' />
26
+ </IllustrationButton>
27
+
28
+ <IllustrationButton text='Keywords' onClick={()=> false}>
29
+ <SvgIconIllustration illustration='keywords' />
30
+ </IllustrationButton>
31
+
32
+ <IllustrationButton text='Optimise' onClick={()=> false}>
33
+ <SvgIconIllustration illustration='optimise' />
34
+ </IllustrationButton>
35
+
36
+ <IllustrationButton text='Summary' onClick={()=> false}>
37
+ <SvgIconIllustration illustration='summary' />
38
+ </IllustrationButton>
39
+
40
+ <IllustrationButton text='Translate' onClick={()=> false}>
41
+ <SvgIconIllustration illustration='translate' />
42
+ </IllustrationButton>
43
+ </div>
44
+ </div>
45
+ </Markup.ReactMarkupPreview>
46
+ <Markup.ReactMarkupCode>{`
47
+ // Note: The style attribute is added only for the purpose of the demo
48
+ <div className='sd-grid-list sd-grid-list--xx-small sd-grid-list--gap-s sd-grid-list--no-margin' style={{width:'290px'}}>
49
+ <IllustrationButton text='Headlines' onClick={()=> false}>
50
+ <SvgIconIllustration illustration='headlines' />
51
+ </IllustrationButton>
52
+
53
+ <IllustrationButton text='Keywords' onClick={()=> false}>
54
+ <SvgIconIllustration illustration='keywords' />
55
+ </IllustrationButton>
56
+
57
+ <IllustrationButton text='Optimise' onClick={()=> false}>
58
+ <SvgIconIllustration illustration='optimise' />
59
+ </IllustrationButton>
60
+
61
+ <IllustrationButton text='Summary' onClick={()=> false}>
62
+ <SvgIconIllustration illustration='summary' />
63
+ </IllustrationButton>
64
+
65
+ <IllustrationButton text='Translate' onClick={()=> false}>
66
+ <SvgIconIllustration illustration='translate' />
67
+ </IllustrationButton>
68
+ </div>
69
+ `}
70
+ </Markup.ReactMarkupCode>
71
+ </Markup.ReactMarkup>
72
+
73
+ <h3 className="docs-page__h3">Props</h3>
74
+ <h4 className="docs-page__h4">IllustrationButton</h4>
75
+ <PropsList>
76
+ <Prop name='text' isRequired={true} type='string' default='/' description='Button text label'/>
77
+ <Prop name='onClick' isRequired={true} type='function' default='false' description='Callback fired when a button is pressed.'/>
78
+ <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Disables the Button, preventing mouse events.'/>
79
+ </PropsList>
80
+
81
+ <h3 className="docs-page__h3">Props</h3>
82
+ <h4 className="docs-page__h4">SvgIconIllustration</h4>
83
+ <PropsList>
84
+ <Prop name='illustration' isRequired={true} type='headlines | keywords | optimise | summary | translate' default='/' description='Choose the desired illustration.'/>
85
+ </PropsList>
86
+ </section>
87
+ );
88
+ }
89
+ }
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
 
3
3
  import { ReactNav, ReactDefault } from '../../js/react';
4
- import { ButtonGroup, Button, NavButton, Dropdown } from '../../../app-typescript/index';
4
+ import { ButtonGroup, Button, NavButton, Dropdown, IllustrationButton } from '../../../app-typescript/index';
5
5
 
6
6
  import {
7
7
  Switch,
@@ -69,6 +69,7 @@ import { PopoverDoc } from './Popover';
69
69
  import { MenuDocs } from './Menu';
70
70
  import {WithSizeObserverDocs} from './WithSizeObserver';
71
71
  import {ResizablePanelsDoc} from './ResizablePanels';
72
+ import { IllustrationButtonDoc } from './IllustrationButton';
72
73
 
73
74
  const pages = {
74
75
  basicComponents: {
@@ -130,6 +131,9 @@ const pages = {
130
131
  },
131
132
  "drag-handle": {
132
133
  name: 'Drag handle'
134
+ },
135
+ "illustration-button" : {
136
+ name: 'Illustration Button'
133
137
  }
134
138
  }
135
139
  },
@@ -399,6 +403,7 @@ class ReactDoc extends React.Component<IProps, IState> {
399
403
  <Route path="/react/dropzone" component={DropZoneDoc} />
400
404
  <Route path="/react/create-button" component={CreateButtonDoc} />
401
405
  <Route path="/react/resizable-panels" component={ResizablePanelsDoc} />
406
+ <Route path="/react/illustration-button" component={IllustrationButtonDoc} />
402
407
  <Route path="/" component={ReactDefault} />
403
408
  </Switch>
404
409
  </main>