superdesk-ui-framework 3.0.1-beta.7 → 3.0.1-beta.8
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.
- package/app/fonts/sd_icons.eot +0 -0
- package/app/fonts/sd_icons.svg +14 -7
- package/app/fonts/sd_icons.ttf +0 -0
- package/app/fonts/sd_icons.woff +0 -0
- package/app/styles/_icon-font.scss +7 -0
- package/app/styles/_sd-tag-input.scss +1 -0
- package/app/styles/components/_sd-grid-item.scss +30 -16
- package/app/styles/design-tokens/_design-tokens-general.scss +1 -1
- package/app/styles/form-elements/_forms-general.scss +64 -5
- package/app/styles/grids/_grid-layout.scss +25 -1
- package/app/styles/layout/_basic-layout.scss +2 -2
- package/app/styles/layout/_editor.scss +4 -4
- package/app-typescript/components/EmptyState.tsx +2 -1
- package/app-typescript/components/Form/FormRowNew.tsx +41 -0
- package/app-typescript/components/Form/index.tsx +1 -0
- package/app-typescript/components/Layouts/AuthoringContainer.tsx +2 -1
- package/app-typescript/components/LeftMenu.tsx +127 -122
- package/app-typescript/components/TimePicker.tsx +2 -0
- package/dist/examples.bundle.css +273 -0
- package/dist/examples.bundle.js +997 -875
- package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +1 -1
- package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +12 -3
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +120 -14
- package/dist/react/LeftNavigations.tsx +71 -44
- package/dist/react/TimePicker.tsx +6 -4
- package/dist/react/TreeSelect.tsx +1 -1
- package/dist/sd_icons.eot +0 -0
- package/dist/sd_icons.svg +14 -7
- package/dist/sd_icons.ttf +0 -0
- package/dist/sd_icons.woff +0 -0
- package/dist/superdesk-ui.bundle.css +928 -24
- package/dist/superdesk-ui.bundle.js +617 -534
- package/dist/vendor.bundle.js +14 -14
- package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +1 -1
- package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +12 -3
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +120 -14
- package/examples/pages/react/LeftNavigations.tsx +71 -44
- package/examples/pages/react/TimePicker.tsx +6 -4
- package/examples/pages/react/TreeSelect.tsx +1 -1
- package/package.json +1 -1
- package/react/components/EmptyState.d.ts +1 -0
- package/react/components/EmptyState.js +1 -1
- package/react/components/Form/FormRowNew.d.ts +12 -0
- package/react/components/Form/FormRowNew.js +67 -0
- package/react/components/Form/index.d.ts +1 -0
- package/react/components/Form/index.js +3 -1
- package/react/components/Layouts/AuthoringContainer.d.ts +1 -0
- package/react/components/Layouts/AuthoringContainer.js +1 -1
- package/react/components/LeftMenu.d.ts +3 -1
- package/react/components/LeftMenu.js +8 -1
- package/react/components/TimePicker.d.ts +1 -0
- package/react/components/TimePicker.js +1 -1
package/dist/vendor.bundle.js
CHANGED
|
@@ -70,7 +70,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|
|
70
70
|
/******/ __webpack_require__.p = "";
|
|
71
71
|
/******/
|
|
72
72
|
/******/ // Load entry module and return exports
|
|
73
|
-
/******/ return __webpack_require__(__webpack_require__.s =
|
|
73
|
+
/******/ return __webpack_require__(__webpack_require__.s = 514);
|
|
74
74
|
/******/ })
|
|
75
75
|
/************************************************************************/
|
|
76
76
|
/******/ ({
|
|
@@ -28246,7 +28246,7 @@ module.exports = function(module) {
|
|
|
28246
28246
|
|
|
28247
28247
|
/***/ }),
|
|
28248
28248
|
|
|
28249
|
-
/***/
|
|
28249
|
+
/***/ 514:
|
|
28250
28250
|
/***/ (function(module, exports, __webpack_require__) {
|
|
28251
28251
|
|
|
28252
28252
|
"use strict";
|
|
@@ -28256,11 +28256,11 @@ __webpack_require__(34);
|
|
|
28256
28256
|
|
|
28257
28257
|
__webpack_require__(41);
|
|
28258
28258
|
|
|
28259
|
-
__webpack_require__(
|
|
28259
|
+
__webpack_require__(515);
|
|
28260
28260
|
|
|
28261
|
-
__webpack_require__(
|
|
28261
|
+
__webpack_require__(517);
|
|
28262
28262
|
|
|
28263
|
-
__webpack_require__(
|
|
28263
|
+
__webpack_require__(519);
|
|
28264
28264
|
|
|
28265
28265
|
__webpack_require__(0);
|
|
28266
28266
|
|
|
@@ -28268,7 +28268,7 @@ __webpack_require__(9);
|
|
|
28268
28268
|
|
|
28269
28269
|
/***/ }),
|
|
28270
28270
|
|
|
28271
|
-
/***/
|
|
28271
|
+
/***/ 515:
|
|
28272
28272
|
/***/ (function(module, exports, __webpack_require__) {
|
|
28273
28273
|
|
|
28274
28274
|
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_
|
|
|
28292
28292
|
if ( true ) {
|
|
28293
28293
|
|
|
28294
28294
|
// AMD. Register as an anonymous module.
|
|
28295
|
-
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(41), __webpack_require__(
|
|
28295
|
+
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(41), __webpack_require__(516) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
|
|
28296
28296
|
__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
|
|
28297
28297
|
(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
|
|
28298
28298
|
__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
|
|
@@ -29030,7 +29030,7 @@ return $.widget;
|
|
|
29030
29030
|
|
|
29031
29031
|
/***/ }),
|
|
29032
29032
|
|
|
29033
|
-
/***/
|
|
29033
|
+
/***/ 516:
|
|
29034
29034
|
/***/ (function(module, exports, __webpack_require__) {
|
|
29035
29035
|
|
|
29036
29036
|
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";
|
|
|
29060
29060
|
|
|
29061
29061
|
/***/ }),
|
|
29062
29062
|
|
|
29063
|
-
/***/
|
|
29063
|
+
/***/ 517:
|
|
29064
29064
|
/***/ (function(module, exports, __webpack_require__) {
|
|
29065
29065
|
|
|
29066
|
-
__webpack_require__(
|
|
29066
|
+
__webpack_require__(518);
|
|
29067
29067
|
module.exports = angular;
|
|
29068
29068
|
|
|
29069
29069
|
|
|
29070
29070
|
/***/ }),
|
|
29071
29071
|
|
|
29072
|
-
/***/
|
|
29072
|
+
/***/ 518:
|
|
29073
29073
|
/***/ (function(module, exports, __webpack_require__) {
|
|
29074
29074
|
|
|
29075
29075
|
/* WEBPACK VAR INJECTION */(function(__webpack_provided_window_dot_jQuery) {/**
|
|
@@ -65676,16 +65676,16 @@ $provide.value("$locale", {
|
|
|
65676
65676
|
|
|
65677
65677
|
/***/ }),
|
|
65678
65678
|
|
|
65679
|
-
/***/
|
|
65679
|
+
/***/ 519:
|
|
65680
65680
|
/***/ (function(module, exports, __webpack_require__) {
|
|
65681
65681
|
|
|
65682
|
-
__webpack_require__(
|
|
65682
|
+
__webpack_require__(520);
|
|
65683
65683
|
module.exports = 'ngAnimate';
|
|
65684
65684
|
|
|
65685
65685
|
|
|
65686
65686
|
/***/ }),
|
|
65687
65687
|
|
|
65688
|
-
/***/
|
|
65688
|
+
/***/ 520:
|
|
65689
65689
|
/***/ (function(module, exports) {
|
|
65690
65690
|
|
|
65691
65691
|
/**
|
|
@@ -337,7 +337,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
|
337
337
|
</Layout.MainPanel>
|
|
338
338
|
|
|
339
339
|
<Layout.RightPanel open={this.state.rightPanelOpen}>
|
|
340
|
-
<Layout.Panel size='
|
|
340
|
+
<Layout.Panel size='full' side='right'>
|
|
341
341
|
<Layout.PanelContent>
|
|
342
342
|
<Layout.AuthoringFrame
|
|
343
343
|
main={
|
|
@@ -141,7 +141,10 @@ export class SamsPlayground extends React.Component<IProps, IState> {
|
|
|
141
141
|
<Components.PanelContentBlock>
|
|
142
142
|
<div className="form__group">
|
|
143
143
|
<div className="form__item">
|
|
144
|
-
<Input
|
|
144
|
+
<Input
|
|
145
|
+
label='Title'
|
|
146
|
+
type='text'
|
|
147
|
+
value=''
|
|
145
148
|
error='This is error message'
|
|
146
149
|
inlineLabel={false}
|
|
147
150
|
disabled={false}
|
|
@@ -167,7 +170,10 @@ export class SamsPlayground extends React.Component<IProps, IState> {
|
|
|
167
170
|
|
|
168
171
|
<div className="form__group">
|
|
169
172
|
<div className="form__item">
|
|
170
|
-
<Input
|
|
173
|
+
<Input
|
|
174
|
+
label='Keyword'
|
|
175
|
+
type='text'
|
|
176
|
+
value=''
|
|
171
177
|
error='This is error message'
|
|
172
178
|
inlineLabel={false}
|
|
173
179
|
disabled={false}
|
|
@@ -232,8 +238,11 @@ export class SamsPlayground extends React.Component<IProps, IState> {
|
|
|
232
238
|
<Badge text={item.urgency} color={item.urgencyColor} />
|
|
233
239
|
<Badge text={item.priority} shape='square' color={item.priorityColor} />
|
|
234
240
|
</GridElements.GridItemFooterBlock>
|
|
241
|
+
<GridElements.GridItemFooterBlock align='right'>
|
|
242
|
+
<Label type='success' style='translucent' text='In progress' />
|
|
243
|
+
</GridElements.GridItemFooterBlock>
|
|
235
244
|
<GridElements.GridItemFooterActions>
|
|
236
|
-
<IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> this.changeStatus(item, 'archived')} />
|
|
245
|
+
<IconButton size='small' icon='dots-vertical' ariaValue='More actions' onClick={()=> this.changeStatus(item, 'archived')} />
|
|
237
246
|
</GridElements.GridItemFooterActions>
|
|
238
247
|
</GridElements.GridItemFooter>
|
|
239
248
|
</GridElements.GridItem>
|
|
@@ -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, Divider, InputWrapper, DatePicker, TimePicker, InputNew, InputBase } 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, Text, FormRowNew } from '../../../../app-typescript/index';
|
|
4
4
|
import { Carousel } from '../../../../app-typescript/index';
|
|
5
5
|
import * as GridElements from '../../../../app-typescript/components/GridItem';
|
|
6
6
|
|
|
@@ -63,24 +63,33 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
63
63
|
<Components.LayoutContainer>
|
|
64
64
|
<Components.MainPanel>
|
|
65
65
|
<InputNew
|
|
66
|
-
label='
|
|
66
|
+
label='test'
|
|
67
67
|
value=''
|
|
68
68
|
onChange={(value) => false}
|
|
69
|
-
|
|
69
|
+
placeholder='test'
|
|
70
70
|
required={true}
|
|
71
71
|
info='Nullam Sollicitudin'
|
|
72
72
|
maxLength={20}
|
|
73
|
-
//invalid={true}
|
|
74
|
-
//disabled={true}
|
|
75
73
|
error='Error message'
|
|
76
|
-
|
|
77
|
-
|
|
74
|
+
inlineLabel={true}
|
|
75
|
+
labelHidden={true}
|
|
78
76
|
type='text' />
|
|
79
77
|
|
|
80
78
|
<hr />
|
|
81
79
|
<div className='form__group-new'>
|
|
82
|
-
<Input
|
|
83
|
-
|
|
80
|
+
<Input
|
|
81
|
+
value=''
|
|
82
|
+
onChange={(value) => {}}
|
|
83
|
+
type='text'
|
|
84
|
+
label='Text input'
|
|
85
|
+
placeholder='Enter text'
|
|
86
|
+
disabled={true} />
|
|
87
|
+
<Input value=''
|
|
88
|
+
onChange={(value) => {}}
|
|
89
|
+
type='text'
|
|
90
|
+
label='Text input'
|
|
91
|
+
placeholder='Enter text'
|
|
92
|
+
disabled={true} />
|
|
84
93
|
<DatePicker
|
|
85
94
|
value={this.state.date}
|
|
86
95
|
onChange={(date) => {
|
|
@@ -91,8 +100,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
91
100
|
label='Date'
|
|
92
101
|
info='Nullam Sollicitudin'
|
|
93
102
|
error='Error message'
|
|
94
|
-
inlineLabel={
|
|
95
|
-
|
|
103
|
+
inlineLabel={false}
|
|
96
104
|
shortcuts={[
|
|
97
105
|
{label: 'tomorrow', days: 1},
|
|
98
106
|
{label: 'yesterday', days: -1},
|
|
@@ -107,12 +115,110 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
107
115
|
this.setState({time});
|
|
108
116
|
}}
|
|
109
117
|
/>
|
|
110
|
-
<Button text="
|
|
111
|
-
|
|
118
|
+
<Button text="Clear" onClick={()=> false} />
|
|
112
119
|
<Button text="Cancel" onClick={()=> false} />
|
|
113
|
-
|
|
114
120
|
<Button text="Save" type='primary' onClick={()=> false} />
|
|
115
121
|
</div>
|
|
122
|
+
<hr />
|
|
123
|
+
|
|
124
|
+
<FormRowNew rowLabel='My group label' inlineLabels={true}>
|
|
125
|
+
<Input
|
|
126
|
+
value=''
|
|
127
|
+
onChange={(value) => {}}
|
|
128
|
+
type='text'
|
|
129
|
+
label='Text input'
|
|
130
|
+
placeholder='Enter text'
|
|
131
|
+
inlineLabel={true}
|
|
132
|
+
labelHidden={true}
|
|
133
|
+
disabled={false} />
|
|
134
|
+
<Text size='small' align='center'>To:</Text>
|
|
135
|
+
<Input
|
|
136
|
+
value=''
|
|
137
|
+
onChange={(value) => {}}
|
|
138
|
+
type='text'
|
|
139
|
+
label='Text input'
|
|
140
|
+
placeholder='Enter text'
|
|
141
|
+
inlineLabel={true}
|
|
142
|
+
labelHidden={true}
|
|
143
|
+
disabled={false} />
|
|
144
|
+
<DatePicker
|
|
145
|
+
value={this.state.date}
|
|
146
|
+
onChange={(date) => {
|
|
147
|
+
this.setState({date});
|
|
148
|
+
}}
|
|
149
|
+
// disabled={true}
|
|
150
|
+
dateFormat="DD-MM-YYYY"
|
|
151
|
+
label='Date'
|
|
152
|
+
info='Nullam Sollicitudin'
|
|
153
|
+
error='Error message'
|
|
154
|
+
inlineLabel={true}
|
|
155
|
+
labelHidden={true}
|
|
156
|
+
shortcuts={[
|
|
157
|
+
{label: 'tomorrow', days: 1},
|
|
158
|
+
{label: 'yesterday', days: -1},
|
|
159
|
+
]}
|
|
160
|
+
/>
|
|
161
|
+
<TimePicker
|
|
162
|
+
value={this.state.time}
|
|
163
|
+
// disabled={true}
|
|
164
|
+
required={true}
|
|
165
|
+
inlineLabel={true}
|
|
166
|
+
labelHidden={true}
|
|
167
|
+
label='Time'
|
|
168
|
+
onChange={(time) => {
|
|
169
|
+
this.setState({time});
|
|
170
|
+
}}
|
|
171
|
+
/>
|
|
172
|
+
<Button text="Save" type='primary' onClick={()=> false} />
|
|
173
|
+
</FormRowNew>
|
|
174
|
+
|
|
175
|
+
<hr />
|
|
176
|
+
|
|
177
|
+
<FormRowNew>
|
|
178
|
+
<Input
|
|
179
|
+
value=''
|
|
180
|
+
onChange={(value) => {}}
|
|
181
|
+
type='text'
|
|
182
|
+
label='Text input'
|
|
183
|
+
placeholder='Enter text'
|
|
184
|
+
disabled={false} />
|
|
185
|
+
<Text size='small' align='center'>To:</Text>
|
|
186
|
+
<Input
|
|
187
|
+
value=''
|
|
188
|
+
onChange={(value) => {}}
|
|
189
|
+
type='text'
|
|
190
|
+
label='Text input'
|
|
191
|
+
placeholder='Enter text'
|
|
192
|
+
labelHidden={true}
|
|
193
|
+
disabled={false} />
|
|
194
|
+
<DatePicker
|
|
195
|
+
value={this.state.date}
|
|
196
|
+
onChange={(date) => {
|
|
197
|
+
this.setState({date});
|
|
198
|
+
}}
|
|
199
|
+
// disabled={true}
|
|
200
|
+
dateFormat="DD-MM-YYYY"
|
|
201
|
+
label='Date'
|
|
202
|
+
info='Nullam Sollicitudin'
|
|
203
|
+
error='Error message'
|
|
204
|
+
inlineLabel={false}
|
|
205
|
+
shortcuts={[
|
|
206
|
+
{label: 'tomorrow', days: 1},
|
|
207
|
+
{label: 'yesterday', days: -1},
|
|
208
|
+
]}
|
|
209
|
+
/>
|
|
210
|
+
<TimePicker
|
|
211
|
+
value={this.state.time}
|
|
212
|
+
// disabled={true}
|
|
213
|
+
required={true}
|
|
214
|
+
label='Time'
|
|
215
|
+
onChange={(time) => {
|
|
216
|
+
this.setState({time});
|
|
217
|
+
}}
|
|
218
|
+
/>
|
|
219
|
+
<Button text="Save" type='primary' onClick={()=> false} />
|
|
220
|
+
</FormRowNew>
|
|
221
|
+
|
|
116
222
|
<hr />
|
|
117
223
|
<h3 className="docs-page__h3 sd-margin-y--0">Table list</h3>
|
|
118
224
|
<hr />
|
|
@@ -13,11 +13,17 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
|
|
|
13
13
|
<LeftMenu
|
|
14
14
|
activeItemId='1'
|
|
15
15
|
groups={[
|
|
16
|
-
{ label: 'SYSTEM SETTINGS', items: [
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
{ label: 'SYSTEM SETTINGS', items: [
|
|
17
|
+
{id: '1', label: 'General'},
|
|
18
|
+
{id: '2', label: 'Email settings'},
|
|
19
|
+
]},
|
|
20
|
+
{ label: 'WORKFLOW', items: [
|
|
21
|
+
{ id: '4', label: 'Desk' },
|
|
22
|
+
{ id: '5', label: 'User Roles & Privileges'},
|
|
23
|
+
]}
|
|
19
24
|
]}
|
|
20
|
-
onSelect={() => false}
|
|
25
|
+
onSelect={() => false}
|
|
26
|
+
/>
|
|
21
27
|
`}
|
|
22
28
|
</Markup.ReactMarkupCodePreview>
|
|
23
29
|
|
|
@@ -32,25 +38,41 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
|
|
|
32
38
|
<p className="sd-top-menu__header">Top menu</p>
|
|
33
39
|
</div>
|
|
34
40
|
</div>
|
|
35
|
-
<LeftMenu ariaLabel={'Left navigation'}
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
]}
|
|
41
|
-
|
|
41
|
+
<LeftMenu ariaLabel={'Left navigation'}
|
|
42
|
+
className={'docs-page__grid-page-example__side'}
|
|
43
|
+
activeItemId='3'
|
|
44
|
+
groups={[
|
|
45
|
+
{label: 'SYSTEM SETTINGS', items: [{id: '1', label: 'General'}, {id: '2', label: 'Email settings'}, {id: '3', label: 'Spell checking'}]},
|
|
46
|
+
{label: 'WORKFLOW', items: [{id: '4', label: 'Desk'}, {id: '5', label: 'User Roles & Privileges'}]},
|
|
47
|
+
{label: 'CONTENT CONFIG', items: [{id: '6', label: 'Image renditions'}, {id: '7', label: 'Controlled Vocabularies'}]}
|
|
48
|
+
]}
|
|
49
|
+
onSelect={() => false} />
|
|
42
50
|
<div className='docs-page__grid-page-example__main'></div>
|
|
43
51
|
</div>
|
|
44
52
|
</div>
|
|
45
53
|
</Markup.ReactMarkupPreview>
|
|
46
54
|
<Markup.ReactMarkupCode>{`
|
|
47
|
-
<LeftMenu
|
|
55
|
+
<LeftMenu
|
|
56
|
+
ariaLabel={'Left navigation'}
|
|
57
|
+
className={'docs-page__grid-page-example__side'}
|
|
58
|
+
activeItemId='1'
|
|
48
59
|
groups={[
|
|
49
|
-
|
|
50
|
-
{
|
|
51
|
-
{
|
|
60
|
+
{label: 'SYSTEM SETTINGS', items: [
|
|
61
|
+
{id: '1', label: 'General'},
|
|
62
|
+
{id: '2', label: 'Email settings'},
|
|
63
|
+
{id: '3', label: 'Spell checking'},
|
|
64
|
+
]},
|
|
65
|
+
{label: 'WORKFLOW', items: [
|
|
66
|
+
{id: '4', label: 'Desk'},
|
|
67
|
+
{id: '5', label: 'User Roles & Privileges'},
|
|
68
|
+
]},
|
|
69
|
+
{label: 'CONTENT CONFIG', items: [
|
|
70
|
+
{id: '6', label: 'Image renditions'},
|
|
71
|
+
{id: '7', label: 'Controlled Vocabularies'},
|
|
52
72
|
]}
|
|
53
|
-
|
|
73
|
+
]}
|
|
74
|
+
onSelect={() => false}
|
|
75
|
+
/>
|
|
54
76
|
`}
|
|
55
77
|
</Markup.ReactMarkupCode>
|
|
56
78
|
</Markup.ReactMarkup>
|
|
@@ -67,26 +89,26 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
|
|
|
67
89
|
</div>
|
|
68
90
|
</div>
|
|
69
91
|
<LeftMenu ariaLabel={'Left navigation'}
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
]}
|
|
92
|
+
className={'docs-page__grid-page-example__side'}
|
|
93
|
+
scrollSpy='#scrollContainer'
|
|
94
|
+
offset={-300}
|
|
95
|
+
//scrollTo={'section4'}
|
|
96
|
+
groups={[
|
|
97
|
+
{ label: 'MAIN SECTIONS', items: [
|
|
98
|
+
{ id: '1', label: 'Section 1', ref:'section1'},
|
|
99
|
+
{ id: '2', label: 'Section 2', ref: 'section2' },
|
|
100
|
+
{ id: '3', label: 'Section 3', ref: 'section3' },
|
|
101
|
+
|
|
102
|
+
]},
|
|
103
|
+
{ label:'OTHER SECTIONS', items: [
|
|
104
|
+
{ id: '4', label: 'Section 4', ref: 'section4' },
|
|
105
|
+
{ id: '5', label: 'Section 5', ref: 'section5' }
|
|
106
|
+
]},
|
|
107
|
+
{ label:'OTHER SECTIONS', items: [
|
|
108
|
+
{ id: '6', label: 'Section 6', ref: 'section6' },
|
|
109
|
+
{ id: '7', label: 'Section 7', ref: 'section7' }
|
|
89
110
|
]}
|
|
111
|
+
]}
|
|
90
112
|
onSelect={() => false} />
|
|
91
113
|
<div className='docs-page__grid-page-example__main sd-padding--4' id='scrollContainer' style={{height:600}}>
|
|
92
114
|
<SimpleList density='comfortable'>
|
|
@@ -160,16 +182,17 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
|
|
|
160
182
|
</Markup.ReactMarkupPreview>
|
|
161
183
|
<Markup.ReactMarkupCode>
|
|
162
184
|
{`
|
|
163
|
-
<LeftMenu
|
|
185
|
+
<LeftMenu
|
|
186
|
+
ariaLabel={'Left navigation'}
|
|
164
187
|
className={'docs-page__grid-page-example__side'}
|
|
165
188
|
scrollSpy='#scrollContainer'
|
|
189
|
+
offset={-300}
|
|
166
190
|
activeItemId='1'
|
|
167
191
|
groups={[
|
|
168
192
|
{ label: 'MAIN SECTIONS', items: [
|
|
169
193
|
{ id: '1', label: 'Section 1', ref:'section1'},
|
|
170
194
|
{ id: '2', label: 'Section 2', ref: 'section2' },
|
|
171
|
-
{ id: '3', label: 'Section 3', ref: 'section3' }
|
|
172
|
-
|
|
195
|
+
{ id: '3', label: 'Section 3', ref: 'section3' }
|
|
173
196
|
]},
|
|
174
197
|
{label:'OTHER SECTIONS', items: [
|
|
175
198
|
{ id: '4', label: 'Section 4', ref: 'section4' },
|
|
@@ -180,7 +203,8 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
|
|
|
180
203
|
{ id: '5', label: 'Section 7', ref: 'section7' }
|
|
181
204
|
]}
|
|
182
205
|
]}
|
|
183
|
-
onSelect={() => false}
|
|
206
|
+
onSelect={() => false}
|
|
207
|
+
/>
|
|
184
208
|
|
|
185
209
|
<div id='#scrollContainer'>...</div>
|
|
186
210
|
`}
|
|
@@ -189,16 +213,19 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
|
|
|
189
213
|
|
|
190
214
|
<h3 className="docs-page__h3">Props</h3>
|
|
191
215
|
<PropsList>
|
|
192
|
-
<Prop name='groups' isRequired={true} type='Array<menugroup>' default='/' description='Array of groups'/>
|
|
193
|
-
<Prop name='activeItemId' isRequired={true} type='string' default='/' description='Id of active item'/>
|
|
216
|
+
<Prop name='groups' isRequired={true} type='Array<menugroup>' default='/' description='Array of groups.'/>
|
|
194
217
|
<Prop name='menugroup label' isRequired={true} type='string' default='/' description='Menugroup label text value.'/>
|
|
195
|
-
<Prop name='menugroup items' isRequired={true} type='Array<menuitem>' default='/' description='Array of items'/>
|
|
196
|
-
<Prop name='menuitem id' isRequired={true} type='string' default='/' description='Menugroup id value'/>
|
|
218
|
+
<Prop name='menugroup items' isRequired={true} type='Array<menuitem>' default='/' description='Array of items.'/>
|
|
219
|
+
<Prop name='menuitem id' isRequired={true} type='string' default='/' description='Menugroup id value.'/>
|
|
197
220
|
<Prop name='menuitem label' isRequired={true} type='string' default='/' description='Menugroup label text value.'/>
|
|
221
|
+
<Prop name='menuitem ref' isRequired={false} type='string' default='/' description='Menugroup ref.'/>
|
|
222
|
+
<Prop name='menuitem route' isRequired={false} type='string' default='/' description='Menugroup route value.'/>
|
|
223
|
+
<Prop name='menuitem onCLick' isRequired={true} type='string' default='/' description='On click function.'/>
|
|
198
224
|
<Prop name='scrollSpy' isRequired={false} type='string' default='HTML' description='Name of the element of scrollable container.'/>
|
|
199
225
|
<Prop name='offset' isRequired={false} type='number' default='-300' description='Offset value that adjusts to determine the elements are in the viewport.'/>
|
|
226
|
+
<Prop name='activeItemId' isRequired={false} type='string' default='/' description='Id of active item'/>
|
|
227
|
+
<Prop name='scrollTo' isRequired={false} type='string' default='/' description='Ref of active item.'/>
|
|
200
228
|
</PropsList>
|
|
201
|
-
|
|
202
229
|
</section>
|
|
203
230
|
)
|
|
204
231
|
}
|
|
@@ -24,6 +24,7 @@ class TimePickerExample extends React.PureComponent<{}, {time: string}> {
|
|
|
24
24
|
label={'This is Label'}
|
|
25
25
|
info={'This is info'}
|
|
26
26
|
error={'This is error'}
|
|
27
|
+
allowSeconds
|
|
27
28
|
/>
|
|
28
29
|
);
|
|
29
30
|
}
|
|
@@ -75,14 +76,15 @@ export default class TimePickerDoc extends React.Component {
|
|
|
75
76
|
|
|
76
77
|
<h3 className='docs-page__h3'>Props</h3>
|
|
77
78
|
<PropsList>
|
|
78
|
-
<Prop name='value' isRequired={true} type='string' default='/' description='Item value' />
|
|
79
|
-
<Prop name='
|
|
80
|
-
<Prop name='
|
|
79
|
+
<Prop name='value' isRequired={true} type='string' default='/' description='Item value.' />
|
|
80
|
+
<Prop name='allowSeconds' isRequired={true} type='string' default='/' description='Allow seconds.' />
|
|
81
|
+
<Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required.' />
|
|
82
|
+
<Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled.' />
|
|
81
83
|
</PropsList>
|
|
82
84
|
|
|
83
85
|
<h3 className='docs-page__h3'>Events</h3>
|
|
84
86
|
<PropsList>
|
|
85
|
-
<Prop name='onChange' isRequired={true} type='function' default='/' description='Returns value of time input' />
|
|
87
|
+
<Prop name='onChange' isRequired={true} type='function' default='/' description='Returns value of time input.' />
|
|
86
88
|
</PropsList>
|
|
87
89
|
</section>
|
|
88
90
|
);
|
package/package.json
CHANGED
|
@@ -53,7 +53,7 @@ var EmptyState = /** @class */ (function (_super) {
|
|
|
53
53
|
_a["content-state__image--".concat(this.props.size)] = this.props.size || this.props.size !== undefined,
|
|
54
54
|
_a));
|
|
55
55
|
var image = require("../../app/img/empty_states/empty-state--".concat(this.props.size ? this.props.size : 'small', "-").concat(this.props.illustration ? this.props.illustration : '1', ".svg"));
|
|
56
|
-
return (React.createElement("div", { className: 'content-state--empty-container' },
|
|
56
|
+
return (React.createElement("div", { className: 'content-state--empty-container' + (this.props.absolutePositioned ? ' content-state__empty-container--absolute' : '') },
|
|
57
57
|
React.createElement("div", { className: 'content-state__empty-info' },
|
|
58
58
|
React.createElement("figure", { className: classes },
|
|
59
59
|
React.createElement("img", { src: image, alt: this.props.illustration })),
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
interface IProps {
|
|
3
|
+
children: React.ReactNode;
|
|
4
|
+
spaces?: 'default' | 'condensed' | 'relaxed';
|
|
5
|
+
marginBottom?: '0' | '1' | '2' | '3' | '4';
|
|
6
|
+
inlineLabels?: boolean;
|
|
7
|
+
rowLabel?: string;
|
|
8
|
+
}
|
|
9
|
+
export declare class FormRowNew extends React.PureComponent<IProps> {
|
|
10
|
+
render(): JSX.Element;
|
|
11
|
+
}
|
|
12
|
+
export {};
|