superdesk-ui-framework 3.0.1-beta.14 → 3.0.1-beta.16

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 (56) hide show
  1. package/app/scripts/toggleBoxNext.js +1 -1
  2. package/app/styles/_buttons.scss +1 -1
  3. package/app/styles/_content-divider.scss +5 -5
  4. package/app/styles/_helpers.scss +24 -1
  5. package/app/styles/_icon-font.scss +9 -9
  6. package/app/styles/_modals.scss +3 -0
  7. package/app/styles/_normalize.scss +4 -0
  8. package/app/styles/_simple-list.scss +1 -0
  9. package/app/styles/_table-list.scss +14 -1
  10. package/app/styles/app.scss +1 -0
  11. package/app/styles/components/_list-item.scss +23 -16
  12. package/app/styles/components/_sd-collapse-box.scss +6 -6
  13. package/app/styles/design-tokens/_new-colors.scss +10 -5
  14. package/app/styles/form-elements/_input-wrap.scss +138 -0
  15. package/app/styles/form-elements/_inputs.scss +230 -61
  16. package/app/styles/interface-elements/_side-panel.scss +1 -1
  17. package/app/styles/layout/_editor.scss +1 -0
  18. package/app/styles/primereact/_pr-dialog.scss +1 -0
  19. package/app/styles/primereact/_pr-menu.scss +6 -5
  20. package/app-typescript/components/DurationInput.tsx +11 -17
  21. package/app-typescript/components/Form/FormLabel.tsx +8 -1
  22. package/app-typescript/components/Form/InputBase.tsx +12 -2
  23. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +1 -1
  24. package/app-typescript/components/Layouts/AuthoringMain.tsx +4 -2
  25. package/app-typescript/components/Lists/ContentList.tsx +7 -3
  26. package/app-typescript/components/Lists/TableList.tsx +29 -16
  27. package/dist/examples.bundle.css +8 -8
  28. package/dist/examples.bundle.js +877 -856
  29. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +1 -1
  30. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +2 -1
  31. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +11 -2
  32. package/dist/playgrounds/react-playgrounds/TestGround.tsx +198 -25
  33. package/dist/react/ContentDivider.tsx +4 -4
  34. package/dist/react/Inputs.tsx +1 -7
  35. package/dist/react/Togglebox.tsx +1 -1
  36. package/dist/superdesk-ui.bundle.css +462 -176
  37. package/dist/superdesk-ui.bundle.js +603 -687
  38. package/dist/vendor.bundle.js +2 -2
  39. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +1 -1
  40. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +2 -1
  41. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +11 -2
  42. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +198 -25
  43. package/examples/pages/react/ContentDivider.tsx +4 -4
  44. package/examples/pages/react/Inputs.tsx +1 -7
  45. package/examples/pages/react/Togglebox.tsx +1 -1
  46. package/package.json +1 -1
  47. package/react/components/DurationInput.js +13 -18
  48. package/react/components/Form/FormLabel.d.ts +4 -1
  49. package/react/components/Form/FormLabel.js +9 -3
  50. package/react/components/Form/InputBase.d.ts +0 -1
  51. package/react/components/Form/InputBase.js +15 -1
  52. package/react/components/Layouts/AuthoringInnerHeader.js +1 -1
  53. package/react/components/Layouts/AuthoringMain.js +1 -1
  54. package/react/components/Lists/ContentList.js +2 -2
  55. package/react/components/Lists/TableList.d.ts +4 -0
  56. package/react/components/Lists/TableList.js +13 -11
@@ -25,6 +25,8 @@ export interface IPropsArrayItem {
25
25
  hexColor?: string;
26
26
  onClick?(): void;
27
27
  onDoubleClick?(): void;
28
+ locked?: boolean;
29
+ positionLocked?: boolean;
28
30
  }
29
31
 
30
32
  interface IState {
@@ -113,7 +115,8 @@ class TableList extends React.PureComponent<IProps, IState> {
113
115
  ? <DragDropContext onDragEnd={this.onDragEnd}>
114
116
  <Droppable droppableId="droppable">
115
117
  {(provided, _snapshot) => (
116
- <ul
118
+ <div
119
+ role='list'
117
120
  className={classes}
118
121
  ref={provided.innerRef}
119
122
  {...provided.droppableProps} >
@@ -139,6 +142,8 @@ class TableList extends React.PureComponent<IProps, IState> {
139
142
  ? this.props.itemsDropdown(index)
140
143
  : []}
141
144
  hexColor={item.hexColor}
145
+ locked={item.locked}
146
+ positionLocked={item.positionLocked}
142
147
  onAddItem={() => this.props.onAddItem
143
148
  && this.props.onAddItem(index, item)}
144
149
  showDragHandle={this.props.showDragHandle}
@@ -149,19 +154,19 @@ class TableList extends React.PureComponent<IProps, IState> {
149
154
  ))}
150
155
  {provided.placeholder}
151
156
  {(this.props.addItem && !this.props.readOnly) &&
152
- <li className={`table-list__add-item table-list__item--margin`}>
157
+ <div className={`table-list__add-item table-list__item--margin`}>
153
158
  <Tooltip text='Add item' flow='top' appendToBody={true}>
154
159
  <div className='table-list__add-item--container sd-margin-x--auto'>
155
160
  {this.dropDown()}
156
161
  </div>
157
162
  </Tooltip>
158
- </li>
163
+ </div>
159
164
  }
160
- </ul>
165
+ </div>
161
166
  )}
162
167
  </Droppable>
163
168
  </DragDropContext>
164
- : <ul className={classes}>
169
+ : <div role='list' className={classes}>
165
170
  {this.state.items.map((item: IPropsArrayItem, index: number) => (
166
171
  <TableListItem
167
172
  key={index}
@@ -176,29 +181,31 @@ class TableList extends React.PureComponent<IProps, IState> {
176
181
  addItem={this.props.addItem}
177
182
  itemsDropdown={() => this.props.itemsDropdown ? this.props.itemsDropdown(index) : []}
178
183
  hexColor={item.hexColor}
184
+ locked={item.locked}
185
+ positionLocked={item.positionLocked}
179
186
  onAddItem={() => this.props.onAddItem
180
187
  && this.props.onAddItem(index, item)}
181
188
  />
182
189
  ))}
183
190
  {(this.props.addItem && !this.props.readOnly) &&
184
- <li className={`table-list__add-item table-list__item--margin`}>
191
+ <div className={`table-list__add-item table-list__item--margin`}>
185
192
  <Tooltip text='Add item' flow='top' appendToBody={true}>
186
193
  <div className='table-list__add-item--container sd-margin-x--auto'>
187
194
  {this.dropDown()}
188
195
  </div>
189
196
  </Tooltip>
190
- </li>
197
+ </div>
191
198
  }
192
- </ul>
193
- : (this.props.addItem && !this.props.readOnly) ? <ul className={classes}>
194
- <li className={`table-list__add-item table-list__item--margin`}>
199
+ </div>
200
+ : (this.props.addItem && !this.props.readOnly) ? <div role='list' className={classes}>
201
+ <div className={`table-list__add-item table-list__item--margin`}>
195
202
  <Tooltip text='Add item' flow='top' appendToBody={true}>
196
203
  <div className='table-list__add-item--container sd-margin-x--auto'>
197
204
  {this.dropDown()}
198
205
  </div>
199
206
  </Tooltip>
200
- </li>
201
- </ul>
207
+ </div>
208
+ </div>
202
209
  : null
203
210
  );
204
211
  }
@@ -213,6 +220,8 @@ export interface IPropsItem {
213
220
  dragAndDrop?: boolean;
214
221
  hexColor?: string;
215
222
  showDragHandle?: 'always' | 'onHover' | 'none';
223
+ locked?: boolean;
224
+ positionLocked?: boolean;
216
225
  onClick?(): void;
217
226
  onDoubleClick?(): void;
218
227
  onSelect?(): void;
@@ -251,14 +260,17 @@ class TableListItem extends React.PureComponent<IPropsItem> {
251
260
  let classes = classNames('table-list__item', {
252
261
  'table-list__item--clickable': this.props.onClick,
253
262
  'table-list__item--draggable': this.props.dragAndDrop,
263
+ 'table-list__item--locked': this.props.locked,
264
+ 'table-list__item--position-locked': this.props.positionLocked,
254
265
  'table-list__item--drag-handles-always': !this.props.showDragHandle,
255
266
  'table-list__item--drag-handles-none': this.props.showDragHandle === 'none',
256
267
  });
257
268
 
258
269
  return (
259
270
  this.props.addItem ?
260
- <li className='table-list__item-container'>
271
+ <div className='table-list__item-container'>
261
272
  <div
273
+ role='listitem'
262
274
  onClick={() => this.onSingleClick()}
263
275
  onDoubleClick={() => this.onDoubleClick()}
264
276
  className={classes}>
@@ -297,8 +309,9 @@ class TableListItem extends React.PureComponent<IPropsItem> {
297
309
  </div>
298
310
  </Tooltip>
299
311
  </div>
300
- </li>
301
- : <li
312
+ </div>
313
+ : <div
314
+ role='listitem'
302
315
  className={`${classes} table-list__item--margin`}
303
316
  onClick={() => this.onSingleClick()}
304
317
  onDoubleClick={() => this.onDoubleClick()}>
@@ -317,7 +330,7 @@ class TableListItem extends React.PureComponent<IPropsItem> {
317
330
  {this.props.action && <div className='table-list__slide-in-actions'>
318
331
  {this.props.action}
319
332
  </div>}
320
- </li>
333
+ </div>
321
334
  );
322
335
  }
323
336
  }
@@ -11118,11 +11118,11 @@ doc-react-playground {
11118
11118
  box-sizing: content-box;
11119
11119
  line-height: 100%;
11120
11120
  color: #9b27b0;
11121
- right: -0.5rem;
11122
- bottom: -0.7rem;
11121
+ inset-inline-end: -0.4rem;
11122
+ inset-block-end: -0.6rem;
11123
11123
  height: 1em;
11124
11124
  width: 1em;
11125
- background-color: var(--sd-item__main-Bg);
11125
+ background-color: var(--sd-item__main-Bg) !important;
11126
11126
  border-radius: var(--b-radius--full);
11127
11127
  padding: 1px;
11128
11128
  z-index: 1;
@@ -11138,8 +11138,8 @@ doc-react-playground {
11138
11138
  font-size: 32px; }
11139
11139
  .icn-mix--2x .icn-mix__sub-icn {
11140
11140
  font-size: 1.6rem;
11141
- right: -0.6rem;
11142
- bottom: -0.3rem; }
11141
+ inset-inline-end: -0.6rem;
11142
+ inset-block-end: -0.3rem; }
11143
11143
 
11144
11144
  .double-size-icn {
11145
11145
  display: inline-block;
@@ -11156,13 +11156,13 @@ doc-react-playground {
11156
11156
  opacity: 0.5; }
11157
11157
 
11158
11158
  .subnav .icn-mix__sub-icn {
11159
- background-color: var(--sd-colour-panel-bg--100); }
11159
+ background-color: var(--sd-colour-panel-bg--100) !important; }
11160
11160
 
11161
11161
  .subnav--darker .icn-mix__sub-icn {
11162
- background-color: var(--sd-colour-panel-bg--200); }
11162
+ background-color: var(--sd-colour-panel-bg--200) !important; }
11163
11163
 
11164
11164
  .subnav--dark-blue-grey .icn-mix__sub-icn {
11165
- background-color: var(--color-subnav-bg--blueGrey-10);
11165
+ background-color: var(--color-subnav-bg--blueGrey-10) !important;
11166
11166
  color: #d686e4; }
11167
11167
 
11168
11168
  .subnav--dark-blue-grey .icn-mix__icn {