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

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 (100) hide show
  1. package/app/styles/_sd-tag-input.scss +201 -296
  2. package/app/styles/components/_list-item.scss +13 -1
  3. package/app/styles/components/_sd-photo-preview.scss +1 -1
  4. package/app/styles/design-tokens/_new-colors.scss +1 -1
  5. package/app/styles/form-elements/_forms-general.scss +22 -7
  6. package/app/styles/form-elements/_inputs.scss +133 -54
  7. package/app-typescript/components/Badge.tsx +3 -2
  8. package/app-typescript/components/DatePicker.tsx +40 -52
  9. package/app-typescript/components/DurationInput.tsx +342 -0
  10. package/app-typescript/components/Form/InputBase.tsx +85 -0
  11. package/app-typescript/components/Form/InputNew.tsx +107 -0
  12. package/app-typescript/components/Form/InputWrapper.tsx +79 -0
  13. package/app-typescript/components/Form/index.tsx +3 -0
  14. package/app-typescript/components/Input.tsx +28 -45
  15. package/app-typescript/components/Label.tsx +49 -10
  16. package/app-typescript/components/Layouts/Layout.tsx +1 -1
  17. package/app-typescript/components/Lists/ContentList.tsx +4 -4
  18. package/app-typescript/components/MultiSelect.tsx +37 -50
  19. package/app-typescript/components/Navigation/BottomNav.tsx +3 -2
  20. package/app-typescript/components/Select.tsx +23 -41
  21. package/app-typescript/components/SelectWithTemplate.tsx +32 -7
  22. package/app-typescript/components/TimePicker.tsx +48 -16
  23. package/app-typescript/components/TreeSelect.tsx +423 -195
  24. package/app-typescript/index.ts +4 -1
  25. package/dist/examples.bundle.js +16733 -15633
  26. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +64 -54
  27. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +24 -16
  28. package/dist/playgrounds/react-playgrounds/TestGround.tsx +76 -1
  29. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +1 -1
  30. package/dist/react/Badges.tsx +18 -0
  31. package/dist/react/ContentList.tsx +15 -9
  32. package/dist/react/DatePicker.tsx +21 -1
  33. package/dist/react/DurationInput.tsx +104 -0
  34. package/dist/react/Index.tsx +5 -0
  35. package/dist/react/Inputs.tsx +153 -2
  36. package/dist/react/Labels.tsx +51 -1
  37. package/dist/react/MultiSelect.tsx +4 -1
  38. package/dist/react/SelectWithTemplate.tsx +6 -1
  39. package/dist/react/TableList.tsx +22 -44
  40. package/dist/react/TimePicker.tsx +16 -8
  41. package/dist/react/TreeSelect.tsx +301 -48
  42. package/dist/react/tree-select/TreeSelect.tsx +273 -0
  43. package/dist/react/tree-select/example-1.tsx +71 -0
  44. package/dist/react/tree-select/example-2.tsx +59 -0
  45. package/dist/superdesk-ui.bundle.css +413 -370
  46. package/dist/superdesk-ui.bundle.js +15879 -14782
  47. package/dist/vendor.bundle.js +27 -27
  48. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +64 -54
  49. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +24 -16
  50. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +76 -1
  51. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +1 -1
  52. package/examples/pages/react/Badges.tsx +18 -0
  53. package/examples/pages/react/ContentList.tsx +15 -9
  54. package/examples/pages/react/DatePicker.tsx +21 -1
  55. package/examples/pages/react/DurationInput.tsx +104 -0
  56. package/examples/pages/react/Index.tsx +5 -0
  57. package/examples/pages/react/Inputs.tsx +153 -2
  58. package/examples/pages/react/Labels.tsx +51 -1
  59. package/examples/pages/react/MultiSelect.tsx +4 -1
  60. package/examples/pages/react/SelectWithTemplate.tsx +6 -1
  61. package/examples/pages/react/TableList.tsx +22 -44
  62. package/examples/pages/react/TimePicker.tsx +16 -8
  63. package/examples/pages/react/TreeSelect.tsx +301 -48
  64. package/examples/pages/react/tree-select/TreeSelect.tsx +273 -0
  65. package/examples/pages/react/tree-select/example-1.tsx +71 -0
  66. package/examples/pages/react/tree-select/example-2.tsx +59 -0
  67. package/package.json +2 -1
  68. package/patches/@superdesk+primereact+5.0.2-4.patch +10 -1
  69. package/react/components/Badge.d.ts +1 -0
  70. package/react/components/Badge.js +2 -2
  71. package/react/components/DatePicker.d.ts +1 -0
  72. package/react/components/DatePicker.js +6 -22
  73. package/react/components/DurationInput.d.ts +41 -0
  74. package/react/components/DurationInput.js +303 -0
  75. package/react/components/Form/InputBase.d.ts +42 -0
  76. package/react/components/Form/InputBase.js +72 -0
  77. package/react/components/Form/InputNew.d.ts +45 -0
  78. package/react/components/Form/InputNew.js +75 -0
  79. package/react/components/Form/InputWrapper.d.ts +28 -0
  80. package/react/components/Form/InputWrapper.js +91 -0
  81. package/react/components/Form/index.d.ts +3 -0
  82. package/react/components/Form/index.js +7 -1
  83. package/react/components/Input.js +5 -34
  84. package/react/components/Label.d.ts +1 -0
  85. package/react/components/Label.js +18 -2
  86. package/react/components/Layouts/Layout.js +1 -1
  87. package/react/components/Lists/ContentList.d.ts +45 -0
  88. package/react/components/Lists/ContentList.js +85 -0
  89. package/react/components/Navigation/BottomNav.d.ts +1 -0
  90. package/react/components/Navigation/BottomNav.js +2 -2
  91. package/react/components/Select.d.ts +1 -1
  92. package/react/components/Select.js +4 -26
  93. package/react/components/SelectWithTemplate.d.ts +11 -1
  94. package/react/components/SelectWithTemplate.js +19 -10
  95. package/react/components/TimePicker.d.ts +15 -2
  96. package/react/components/TimePicker.js +15 -4
  97. package/react/components/TreeSelect.d.ts +75 -0
  98. package/react/components/TreeSelect.js +448 -0
  99. package/react/index.d.ts +4 -0
  100. package/react/index.js +10 -3
@@ -5,6 +5,7 @@ import * as Layout from '../../../../app-typescript/components/Layouts';
5
5
  import * as Form from '../../../../app-typescript/components/Form';
6
6
  import * as Nav from '../../../../app-typescript/components/Navigation';
7
7
  import { BottomNav } from '../../../../app-typescript/components/Navigation/BottomNav';
8
+ import { clone } from 'lodash';
8
9
 
9
10
  interface IProps {
10
11
  children?: React.ReactNode;
@@ -19,6 +20,7 @@ interface IState {
19
20
  theme: 'dark' | 'light' | string;
20
21
  mainMenuOpen: boolean;
21
22
  notificationsOpen: boolean;
23
+ botNavArray: any;
22
24
  }
23
25
 
24
26
  export class CoreLayout extends React.Component<IProps, IState> {
@@ -28,9 +30,16 @@ export class CoreLayout extends React.Component<IProps, IState> {
28
30
  theme: 'light',
29
31
  mainMenuOpen: false,
30
32
  notificationsOpen: false,
33
+ botNavArray: [
34
+ { icon:'photo', title: 'Sed posuere consectetur est at lobortis.', onClick: () => false, onRemove: (e) => this.handleDelete(e) },
35
+ { title: 'Nullam id dolor id nibh ultricies.', onClick: () => false, onRemove: (e) => this.handleDelete(e)},
36
+ { icon:'video', title: 'Nulla vitae elit libero, a pharetra augue.', onClick: () => false, onRemove: (e) => this.handleDelete(e)},
37
+ { title: 'Donec sed odio dui.', onClick: () => false, onRemove: (e) => this.handleDelete(e)},
38
+ ]
31
39
  }
32
40
  this.handleMainMenu = this.handleMainMenu.bind(this);
33
41
  this.handleNotifications = this.handleNotifications.bind(this);
42
+ this.handleDelete = this.handleDelete.bind(this);
34
43
  }
35
44
 
36
45
  handleMainMenu() {
@@ -38,56 +47,64 @@ export class CoreLayout extends React.Component<IProps, IState> {
38
47
  mainMenuOpen: !state.mainMenuOpen,
39
48
  }));
40
49
  }
50
+
41
51
  handleNotifications() {
42
52
  this.setState((state) => ({
43
53
  notificationsOpen: !state.notificationsOpen,
44
54
  }));
45
55
  }
56
+
57
+ handleDelete(indexNumber: number) {
58
+ const newItems = clone(this.state.botNavArray);
59
+ newItems.splice(indexNumber, 1);
46
60
 
61
+ this.setState({
62
+ botNavArray: newItems,
63
+ });
64
+ }
47
65
 
48
66
  render() {
49
67
  return (
50
68
  <Layout.CoreLayout
51
- heading='Core Layout'
52
- menuOpen={this.state.mainMenuOpen}
53
- onClick={this.handleMainMenu}
54
- active={this.state.mainMenuOpen}
55
- ariaControls='main-menu'
56
- menuId='main-menu'
57
- slideInMenu={(
58
- <Layout.MainMenu
59
- headerTitle='Main Menu'
60
- poweredBy='Powered by Superdesk technology'
61
- header={(null)}
62
- footerContent={true}
63
- footer={(
64
- <p>Menu footer testing</p>
65
- )}
66
- >
67
- <LeftMenu
68
- style='blanc'
69
- reverseItemBorder={true}
70
- size='large'
71
- ariaLabel={'Left navigation'}
72
- activeItemId='1'
73
- groups={[
74
- { label: 'MAIN SECTIONS', items: [
75
- { id: '1', label: 'Section 1', ref:'section1'},
76
- { id: '2', label: 'Section 2', ref: 'section2' },
77
- { id: '3', label: 'Section 3', ref: 'section3' },
78
-
79
- ]},
80
- { label:'OTHER SECTIONS', items: [
81
- { id: '4', label: 'Section 4', ref: 'section4' },
82
- { id: '5', label: 'Section 5', ref: 'section5' },
83
- ]},
84
- { label:'OTHER SECTIONS', items: [
85
- { id: '6', label: 'Section 6', ref: 'section6' },
86
- { id: '7', label: 'Section 7', ref: 'section7' },
87
- ]}
88
- ]}
89
- onSelect={() => false} />
90
- </Layout.MainMenu>
69
+ heading='Core Layout'
70
+ menuOpen={this.state.mainMenuOpen}
71
+ onClick={this.handleMainMenu}
72
+ active={this.state.mainMenuOpen}
73
+ ariaControls='main-menu'
74
+ menuId='main-menu'
75
+ slideInMenu={(
76
+ <Layout.MainMenu
77
+ headerTitle='Main Menu'
78
+ poweredBy='Powered by Superdesk technology'
79
+ header={(null)}
80
+ footerContent={true}
81
+ footer={(
82
+ <p>Menu footer testing</p>
83
+ )}>
84
+ <LeftMenu
85
+ style='blanc'
86
+ reverseItemBorder={true}
87
+ size='large'
88
+ ariaLabel={'Left navigation'}
89
+ activeItemId='1'
90
+ groups={[
91
+ { label: 'MAIN SECTIONS', items: [
92
+ { id: '1', label: 'Section 1', ref:'section1'},
93
+ { id: '2', label: 'Section 2', ref: 'section2' },
94
+ { id: '3', label: 'Section 3', ref: 'section3' },
95
+
96
+ ]},
97
+ { label:'OTHER SECTIONS', items: [
98
+ { id: '4', label: 'Section 4', ref: 'section4' },
99
+ { id: '5', label: 'Section 5', ref: 'section5' },
100
+ ]},
101
+ { label:'OTHER SECTIONS', items: [
102
+ { id: '6', label: 'Section 6', ref: 'section6' },
103
+ { id: '7', label: 'Section 7', ref: 'section7' },
104
+ ]}
105
+ ]}
106
+ onSelect={() => false} />
107
+ </Layout.MainMenu>
91
108
  )}
92
109
  topMenu={(
93
110
  <NavButton badgeValue='6' icon='bell' text='Show notifications' onClick={this.handleNotifications} />
@@ -96,22 +113,16 @@ export class CoreLayout extends React.Component<IProps, IState> {
96
113
  <>
97
114
  <Layout.BottomBarAction onClick={()=> false} />
98
115
  <BottomNav
99
- items={[
100
- { icon:'photo', title: 'Sed posuere consectetur est at lobortis.', onClick: () => console.log('test1') },
101
- { title: 'Nullam id dolor id nibh ultricies.', onClick: () => console.log('test2')},
102
- { icon:'video', title: 'Nulla vitae elit libero, a pharetra augue.', onClick: () => false},
103
- { title: 'Donec sed odio dui.', onClick: () => false},
104
- ]} />
116
+ items={this.state.botNavArray} />
105
117
  </>
106
118
  )}
107
119
  overlay={(
108
120
  <Layout.NotificationPanel
109
- header={(null)}
110
- headerTitle='Notifications'
111
- open={this.state.notificationsOpen}
112
- onClick={this.handleNotifications}
113
- theme='dark'
114
- >
121
+ header={(null)}
122
+ headerTitle='Notifications'
123
+ open={this.state.notificationsOpen}
124
+ onClick={this.handleNotifications}
125
+ theme='dark'>
115
126
  <BoxedList>
116
127
  <BoxedListItem unread={true}>
117
128
  <Time datetime='29.06.2022'>29.06.2022</Time>
@@ -137,8 +148,7 @@ export class CoreLayout extends React.Component<IProps, IState> {
137
148
  </BoxedList>
138
149
 
139
150
  </Layout.NotificationPanel>
140
- )}
141
- >
151
+ )}>
142
152
  </Layout.CoreLayout>
143
153
  );
144
154
  }
@@ -27,6 +27,7 @@ interface IState {
27
27
  rightPanelPinned: boolean;
28
28
  sideOverlayOpen: boolean;
29
29
  array: any;
30
+ inputValue: string;
30
31
  }
31
32
 
32
33
  export class RundownEditor extends React.Component<IProps, IState> {
@@ -46,6 +47,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
46
47
  rightPanelOpen: false,
47
48
  rightPanelPinned: false,
48
49
  sideOverlayOpen: false,
50
+ inputValue: 'string',
49
51
  array: [
50
52
  {
51
53
  start: <>
@@ -137,7 +139,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
137
139
  <Layout.HeaderPanel>
138
140
  <SubNav>
139
141
  <ButtonGroup align='end'>
140
- <Button text="Cancel" onClick={()=> false} type="default" />
142
+ <Button text="Cancel" onClick={()=> false} type="default" />
141
143
  <Button text="Save Rundown" onClick={()=> false} type="primary" />
142
144
  <Divider size="mini" />
143
145
  <ButtonGroup subgroup={true} spaces="no-space">
@@ -299,30 +301,36 @@ export class RundownEditor extends React.Component<IProps, IState> {
299
301
  )}
300
302
  >
301
303
  <Container direction='column' className='sd-margin-y--2'>
302
- <input
303
- onChange={()=> false}
304
+ <Input
305
+ label='Rundown title'
306
+ value={'Marker // 01.06.2022'}
307
+ boxedStyle={true}
308
+ boxedLable={true}
309
+ size='x-large'
310
+ placeholder='Rundown title'
311
+ labelHidden={true}
304
312
  type='text'
305
- value='Marker // 01.06.2022'
306
- className='sd-editor__input--title' />
313
+ tabindex={0}
314
+ onChange={(value) => this.setState({inputValue: value})} />
307
315
  </Container>
308
316
  <ButtonGroup>
309
317
  <IconLabel style='translucent' innerLabel='Airtime:' text='19:00 - 19:45' size='large' type='primary' icon='time' />
310
318
  <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='large' type='warning' />
311
319
  <Text color='light' size='medium' className='sd-margin--0'>OF</Text>
312
- <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='large' />
320
+ <IconLabel style='translucent' innerLabel='Planned:'text='00:45' size='large' />
313
321
  </ButtonGroup>
314
322
 
315
323
  <TableList
316
- className='sd-margin-y--4'
317
- dragAndDrop
318
- addItem
319
- array={this.state.array}
320
- itemsDropdown={[
321
- { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
322
- { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
323
- { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
324
- ]}
325
- onClick={() => false}
324
+ className='sd-margin-y--4'
325
+ dragAndDrop
326
+ addItem
327
+ array={this.state.array}
328
+ itemsDropdown={[
329
+ { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
330
+ { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
331
+ { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
332
+ ]}
333
+ onClick={() => false}
326
334
  />
327
335
 
328
336
  </Layout.AuthoringMain>
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import * as Components from './components/Index';
3
- import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, Input, Select, Option, Label, Icon, IconButton, CheckGroup, GridList, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner } from '../../../../app-typescript/index';
3
+ import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, Input, Select, Option, Label, Icon, IconButton, CheckGroup, GridList, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, DatePicker, TimePicker, InputNew, InputBase } from '../../../../app-typescript/index';
4
4
  import { Carousel } from '../../../../app-typescript/index';
5
5
  import * as GridElements from '../../../../app-typescript/components/GridItem';
6
6
 
@@ -23,6 +23,9 @@ interface IState {
23
23
  value5?: string;
24
24
  value6?: string;
25
25
  selctedTheme: string;
26
+ invalid: boolean;
27
+ date: any;
28
+ time: string;
26
29
  }
27
30
 
28
31
  export class TestGround extends React.Component<IProps, IState> {
@@ -40,6 +43,9 @@ export class TestGround extends React.Component<IProps, IState> {
40
43
  value5: undefined,
41
44
  value6: undefined,
42
45
  selctedTheme: 'light',
46
+ invalid: false,
47
+ date: '01/08/2022',
48
+ time: '16:50',
43
49
  }
44
50
  }
45
51
 
@@ -56,6 +62,58 @@ export class TestGround extends React.Component<IProps, IState> {
56
62
  <Components.Layout header='Testing Ground'>
57
63
  <Components.LayoutContainer>
58
64
  <Components.MainPanel>
65
+ <InputNew
66
+ label='testt'
67
+ value=''
68
+ onChange={(value) => false}
69
+ //placeholder='test'
70
+ required={true}
71
+ info='Nullam Sollicitudin'
72
+ maxLength={20}
73
+ //invalid={true}
74
+ //disabled={true}
75
+ error='Error message'
76
+ //inlineLabel={true}
77
+ //labelHidden={true}
78
+ type='text' />
79
+
80
+ <hr />
81
+ <div className='form__group-new'>
82
+ <Input value='' onChange={(value) => {}} type='text' label='Text input' placeholder='Enter text' disabled={true} />
83
+ <Input value='' onChange={(value) => {}} type='text' label='Text input' placeholder='Enter text' disabled={true} />
84
+ <DatePicker
85
+ value={this.state.date}
86
+ onChange={(date) => {
87
+ this.setState({date});
88
+ }}
89
+ disabled={true}
90
+ dateFormat="DD-MM-YYYY"
91
+ label='Date'
92
+ info='Nullam Sollicitudin'
93
+ error='Error message'
94
+ inlineLabel={true}
95
+
96
+ shortcuts={[
97
+ {label: 'tomorrow', days: 1},
98
+ {label: 'yesterday', days: -1},
99
+ ]}
100
+ />
101
+ <TimePicker
102
+ value={this.state.time}
103
+ disabled={true}
104
+ required={true}
105
+ label='Time'
106
+ onChange={(time) => {
107
+ this.setState({time});
108
+ }}
109
+ />
110
+ <Button text="Exit" type='primary' onClick={()=> false} />
111
+
112
+ <Button text="Cancel" onClick={()=> false} />
113
+
114
+ <Button text="Save" type='primary' onClick={()=> false} />
115
+ </div>
116
+ <hr />
59
117
  <h3 className="docs-page__h3 sd-margin-y--0">Table list</h3>
60
118
  <hr />
61
119
  <ul className='table-list'>
@@ -396,6 +454,23 @@ export class TestGround extends React.Component<IProps, IState> {
396
454
  ]} onChange={($event)=>{this.setState({selctedTheme: $event})}} value={this.state.selctedTheme} />
397
455
  </Container>
398
456
  <hr />
457
+ <Container className='sd-padding--4 sd-panel-bg--100 sd-radius--large'>
458
+ <Button text="Exit" type='primary' onClick={()=> false} />
459
+ <Divider />
460
+ <Button text="Cancel" onClick={()=> false} />
461
+ <Divider />
462
+ <Button text="Save" type='primary' onClick={()=> false} />
463
+ </Container>
464
+ <hr />
465
+ <Container className='sd-padding--4 sd-panel-bg--100 sd-radius--large'>
466
+
467
+ <InputWrapper
468
+ label="Label"
469
+ invalid={false}>
470
+ <input type='text' />
471
+ </InputWrapper>
472
+ </Container>
473
+ <hr />
399
474
  <Container className='sd-padding--4 sd-panel-bg--100 sd-radius--large'>
400
475
  <div className='sd-dropzone__drop-target'>
401
476
  <div className='sd-dropzone__target-border'></div>
@@ -28,7 +28,7 @@ export const Layout = ({
28
28
  {children}
29
29
  </section>
30
30
  <footer className='sd-bottom-bar'>
31
- This is the footer.
31
+ Footer
32
32
  </footer>
33
33
  </div>
34
34
  );
@@ -89,6 +89,16 @@ export default class BadgeDoc extends React.Component {
89
89
  <Badge text='E' color='purple--400' shape='square' />
90
90
  <Badge text='F' color='purple--500' shape='square' />
91
91
  </div>
92
+
93
+ <p className="docs-page__paragraph">// Custom hex colours</p>
94
+ <div className='docs-page__content-row'>
95
+ <Badge text='1' hexColor='#008773' />
96
+ <Badge text='2' hexColor='#0000FF' />
97
+ <Badge text='3' hexColor='#00D100' />
98
+ <Badge text='4' hexColor='#5531D9' shape='square' />
99
+ <Badge text='5' hexColor='#960E0F' shape='square' />
100
+ <Badge text='6' hexColor='#DB60FF' shape='square' />
101
+ </div>
92
102
  </Markup.ReactMarkupPreview>
93
103
  <Markup.ReactMarkupCode>{`
94
104
  // Basic colour palette
@@ -112,6 +122,13 @@ export default class BadgeDoc extends React.Component {
112
122
  <Badge text='D' color='purple--300' shape='square'/>
113
123
  <Badge text='E' color='purple--400' shape='square'/>
114
124
  <Badge text='F' color='purple--500' shape='square'/>
125
+ // Custom hex colours
126
+ <Badge text='1' hexColor='#008773' />
127
+ <Badge text='2' hexColor='#0000FF' />
128
+ <Badge text='3' hexColor='#00D100' />
129
+ <Badge text='4' hexColor='#5531D9' shape='square' />
130
+ <Badge text='5' hexColor='#960E0F' shape='square' />
131
+ <Badge text='6' hexColor='#DB60FF' shape='square' />
115
132
  `}
116
133
  </Markup.ReactMarkupCode>
117
134
  </Markup.ReactMarkup>
@@ -152,6 +169,7 @@ export default class BadgeDoc extends React.Component {
152
169
  <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.)' />
153
170
  <Prop name='color' isRequired={false} type='string' default='/' description='Extended color palette from the framework (e.g. red--500); NOTE: The badge can have either a Type or Color defined, not both at the same time.' />
154
171
  <Prop name='shape' isRequired={false} type='round | square' default='round' description='Make shape of badge square or default round.' />
172
+ <Prop name='hexColor' isRequired={false} type='string' default='/' description='Define a custom Hex colour for the Badge.'/>
155
173
  </PropsList>
156
174
  </section>
157
175
  )
@@ -98,7 +98,8 @@ export default class ContentListDoc extends React.Component {
98
98
  fullwidth: true,
99
99
  }
100
100
  ],
101
- locked: true,
101
+ //locked: true,
102
+ selected: true,
102
103
  action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
103
104
  },
104
105
  {
@@ -262,18 +263,23 @@ export default class ContentListDoc extends React.Component {
262
263
  </Markup.ReactMarkup>
263
264
 
264
265
  <h3 className="docs-page__h3">Props</h3>
265
- <p className="docs-page__paragraph">BoxedList</p>
266
+ <p className="docs-page__paragraph">ContentList</p>
266
267
  <PropsList>
267
- <Prop name='density' isRequired={false} type='compact | comfortable' default='compact' description='Increase the gap beetween list items.'/>
268
+ <Prop name='items' isRequired={true} type='Array' default='compact' description='An array of object.'/>
268
269
  </PropsList>
269
- <p className="docs-page__paragraph">BoxedListItem</p>
270
+ <p className="docs-page__paragraph">Items:</p>
270
271
  <PropsList>
271
- <Prop name='clickable' isRequired={false} type='boolean' default='false' description='Adds hover effect and changes the cursor to poiter.'/>
272
- <Prop name='selected' isRequired={false} type='boolean' default='false' description='Changes the state to selected and adds apropriate styling for it.'/>
273
- <Prop name='slideInActions' isRequired={false} type='boolean' default='false' description='If set to true, the action buttons will be hidden and slide in from the right on hover.'/>
274
- <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight' default='/' description='Adds a clour coded border on the right, based on the selected type.'/>
272
+ <Prop name='itemColum' isRequired={true} type='Array<{itemRow: Array<{content: any}>, border?: boolean, fullwidth?: boolean}>' default='false' description='An array of objects for defining column of individual items.'/>
273
+ <Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='On hover displays an additional menu.'/>
274
+ <Prop name='locked' isRequired={false} type='boolean' default='false' description='If is true, the individual item of list change state and change style.'/>
275
+ <Prop name='activated' isRequired={false} type='boolean' default='false' description='If is true, the individual item of list change state and change style.'/>
276
+ <Prop name='selected' isRequired={false} type='boolean' default='false' description='If is true, the individual item of list change state and change style.'/>
277
+ <Prop name='archived' isRequired={false} type='boolean' default='false' description='If is true, the individual item of list change state and change style.'/>
278
+ <Prop name='loading' isRequired={false} type='boolean' default='false' description='If is true, the individual item of list change state and change style.'/>
279
+ <Prop name='onClick' isRequired={false} type='function' default='/' description='onClick functionality.'/>
280
+ <Prop name='onDoubleClick' isRequired={false} type='function' default='/' description='onDoubleClick functionality.'/>
275
281
  </PropsList>
276
-
282
+
277
283
  </section>
278
284
  )
279
285
  }
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
 
3
3
  import * as Markup from '../../js/react';
4
- import {DatePicker, PropsList, Prop} from '../../../app-typescript';
4
+ import {DatePicker, PropsList, Prop, DatePickerISO} from '../../../app-typescript';
5
5
 
6
6
  class DatePickerExample extends React.PureComponent<{}, {date: Date}> {
7
7
  constructor(props) {
@@ -48,6 +48,11 @@ export default class DatePickerDoc extends React.Component {
48
48
  onChange={(date) => {
49
49
  this.setState({date});
50
50
  }}
51
+ required
52
+ tabindex={1}
53
+ label={'This is Label'}
54
+ info={'This is info'}
55
+ error={'This is error'}
51
56
  />
52
57
  );
53
58
  }
@@ -58,6 +63,21 @@ export default class DatePickerDoc extends React.Component {
58
63
  <div className='docs-page__content-row'>
59
64
  <DatePickerExample />
60
65
  </div>
66
+
67
+ <p className="docs-page__paragraph">// DatePickerISO</p>
68
+ <div className='docs-page__content-row'>
69
+ <DatePickerISO
70
+ value={'2019-01-01'}
71
+ dateFormat="YYYY-MM-DD"
72
+ onChange={(date) => {
73
+ this.setState({date});
74
+ }}
75
+ tabindex={1}
76
+ label={'This is Label'}
77
+ info={'This is info'}
78
+ error={'This is error'}
79
+ />
80
+ </div>
61
81
  </Markup.ReactMarkupPreview>
62
82
  <Markup.ReactMarkupCode>{`
63
83
  <DatePicker
@@ -0,0 +1,104 @@
1
+ import * as React from 'react';
2
+
3
+ import * as Markup from '../../js/react';
4
+
5
+ import { Input, Select, CheckGroup, Checkbox, PropsList, Prop } from '../../../app-typescript';
6
+ import { DurationInput } from '../../../app-typescript/components/DurationInput';
7
+
8
+ interface IState {
9
+ inlineLabel: boolean;
10
+ required: boolean;
11
+ disabled: boolean;
12
+ invalid: boolean;
13
+ }
14
+
15
+ export default class DurationInputDoc extends React.Component<{}, IState> {
16
+ constructor(props) {
17
+ super(props);
18
+ this.state = {
19
+ inlineLabel: false,
20
+ required: true,
21
+ disabled: false,
22
+ invalid: false,
23
+ }
24
+ }
25
+
26
+ render() {
27
+ return (
28
+ <section className='docs-page__container'>
29
+ <h2 className='docs-page__h2'>Duration Input</h2>
30
+ <Markup.ReactMarkupCodePreview>{`
31
+ <DurationInput
32
+ label='Label'
33
+ info='info message'
34
+ disabled={this.state.disabled}
35
+ required={this.state.required}
36
+ invalid={this.state.invalid}
37
+ inlineLabel={this.state.inlineLabel}
38
+ onChange={(e) => {
39
+ console.log(e)
40
+ }}
41
+ />
42
+ `}
43
+ </Markup.ReactMarkupCodePreview>
44
+ <p className='docs-page__paragraph'></p>
45
+ <Markup.ReactMarkup>
46
+ <Markup.ReactMarkupPreview>
47
+ <div className='docs-page__content-row docs-page__content-row--no-margin'>
48
+ <div className='form__row'>
49
+ <CheckGroup>
50
+ <Checkbox checked={this.state.required} label={{text:'Required input'}} onChange={(value) => {this.setState({required: value})}} />
51
+ <Checkbox checked={this.state.disabled} label={{text:'Disabled input'}} onChange={(value) => {this.setState({disabled: value})}} />
52
+ <Checkbox checked={this.state.invalid} label={{text:'Invalid input'}} onChange={(value) => {this.setState({invalid: value})}} />
53
+ <Checkbox checked={this.state.inlineLabel} label={{text:'Label positioned inline'}} onChange={(value) => {this.setState({inlineLabel: value})}} />
54
+ </CheckGroup>
55
+ </div>
56
+
57
+ <div className='form__row'>
58
+ <DurationInput
59
+ label='Label'
60
+ info='info message'
61
+ disabled={this.state.disabled}
62
+ required={this.state.required}
63
+ invalid={this.state.invalid}
64
+ inlineLabel={this.state.inlineLabel}
65
+ onChange={(e) => {
66
+ console.log(e)
67
+ }}
68
+ />
69
+ </div>
70
+ </div>
71
+
72
+ </Markup.ReactMarkupPreview>
73
+ <Markup.ReactMarkupCode>{`
74
+ <DurationInput
75
+ label='Label'
76
+ info='info message'
77
+ disabled={this.state.disabled}
78
+ required={this.state.required}
79
+ invalid={this.state.invalid}
80
+ inlineLabel={this.state.inlineLabel}
81
+ onChange={(e) => {
82
+ console.log(e)
83
+ }}
84
+ />
85
+ `}</Markup.ReactMarkupCode>
86
+ </Markup.ReactMarkup>
87
+
88
+ <h3 className='docs-page__h3'>Props</h3>
89
+ <PropsList>
90
+ <Prop name='hours' isRequired={false} type='number' default='00' description='Hours value'/>
91
+ <Prop name='minutes' isRequired={false} type='number' default='00' description='Minutes value'/>
92
+ <Prop name='seconds' isRequired={false} type='number' default='00' description='Seconds value'/>
93
+ <Prop name='label' isRequired={false} type='string' default='/' description='Input label'/>
94
+ <Prop name='info' isRequired={false} type='string' default='/' description='Hint text'/>
95
+ <Prop name='error' isRequired={false} type='string' default='/' description='Error text'/>
96
+ <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline'/>
97
+ <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required'/>
98
+ <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled'/>
99
+ <Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid'/>
100
+ </PropsList>
101
+ </section>
102
+ )
103
+ }
104
+ }
@@ -61,6 +61,7 @@ import * as Playgrounds from '../playgrounds/react-playgrounds/Index';
61
61
  import { SelectWithTemplateDocs } from './SelectWithTemplate';
62
62
  import { MultiselectDocs } from './MultiSelect';
63
63
  import { TreeSelectDocs } from './TreeSelect';
64
+ import DurationInputDoc from './DurationInput';
64
65
  import { PopoverDoc } from './Popover';
65
66
  import { MenuDocs } from './Menu';
66
67
  import {WithSizeObserverDocs} from './WithSizeObserver';
@@ -240,6 +241,9 @@ const pages = {
240
241
  'icon-picker': {
241
242
  name: 'Icon Picker',
242
243
  },
244
+ 'duration-input': {
245
+ name: 'Duration Input',
246
+ },
243
247
  'switch': {
244
248
  name: 'Switch'
245
249
  },
@@ -337,6 +341,7 @@ class ReactDoc extends React.Component<IProps, IState> {
337
341
  <Route path="/react/with-size-observer" component={WithSizeObserverDocs} />
338
342
  <Route path="/react/multiselect" component={MultiselectDocs} />
339
343
  <Route path="/react/treeselect" component={TreeSelectDocs} />
344
+ <Route path="/react/duration-input" component={DurationInputDoc} />
340
345
  <Route path="/react/popover" component={PopoverDoc} />
341
346
  <Route path="/react/date-picker" component={DatePickerDoc} />
342
347
  <Route path="/react/time-picker" component={TimePickerDoc} />