superdesk-ui-framework 3.1.8 → 3.1.12

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 (89) hide show
  1. package/app/styles/_helpers.scss +913 -780
  2. package/app/styles/_master-desk.scss +2 -2
  3. package/app/styles/components/_sd-collapse-box.scss +113 -0
  4. package/app/styles/components/_subnav.scss +0 -1
  5. package/app/styles/design-tokens/_design-tokens-general.scss +19 -5
  6. package/app/styles/design-tokens/_new-colors.scss +11 -1
  7. package/app/styles/grids/_grid-layout.scss +0 -1
  8. package/app/styles/layout/_editor.scss +5 -5
  9. package/app-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx +56 -0
  10. package/app-typescript/components/{Togglebox.tsx → ToggleBox/SimpleToggleBox.tsx} +3 -14
  11. package/app-typescript/components/ToggleBox/index.tsx +41 -0
  12. package/app-typescript/components/TreeMenu.tsx +4 -2
  13. package/app-typescript/index.ts +1 -1
  14. package/dist/components/Alerts.tsx +1 -1
  15. package/dist/components/ContentDivider.tsx +1 -1
  16. package/dist/components/DragHandleDocs.tsx +2 -2
  17. package/dist/components/Index.tsx +105 -50
  18. package/dist/components/Panel.tsx +13 -13
  19. package/dist/components/Tags.tsx +2 -2
  20. package/dist/components/Togglebox.tsx +154 -15
  21. package/dist/components/utilities/BorderRadiusUtilities.tsx +56 -0
  22. package/dist/components/utilities/BorderUtilities.tsx +170 -0
  23. package/dist/components/utilities/DisplayUtilities.tsx +116 -0
  24. package/dist/components/utilities/FlexAndGridUtilities.tsx +551 -0
  25. package/dist/components/utilities/ObjectFitUtilities.tsx +53 -0
  26. package/dist/components/utilities/ObjectPositionUtilities.tsx +68 -0
  27. package/dist/components/utilities/OpacityUtilities.tsx +64 -0
  28. package/dist/components/utilities/OverflowUtilities.tsx +93 -0
  29. package/dist/components/utilities/PositionUtilities.tsx +52 -0
  30. package/dist/components/utilities/ShadowUtilities.tsx +123 -0
  31. package/dist/components/utilities/SpacingUtilities.tsx +2 -2
  32. package/dist/components/utilities/TextUtilities.tsx +44 -4
  33. package/dist/components.html +2 -4
  34. package/dist/components_deprecated/modals.html +2 -2
  35. package/dist/components_deprecated.html +1 -0
  36. package/dist/design-patterns/Index.tsx +1 -42
  37. package/dist/design-patterns.html +2 -4
  38. package/dist/design.html +1 -0
  39. package/dist/examples.bundle.css +15 -7
  40. package/dist/examples.bundle.js +3104 -1270
  41. package/dist/main.html +1 -0
  42. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +1 -1
  43. package/dist/playgrounds/react-playgrounds/TestGround.tsx +214 -2
  44. package/dist/playgrounds.html +1 -0
  45. package/dist/superdesk-ui.bundle.css +1331 -1006
  46. package/dist/superdesk-ui.bundle.js +1094 -919
  47. package/dist/vendor.bundle.js +13 -13
  48. package/examples/css/docs-page.css +15 -7
  49. package/examples/js/doc.js +13 -1
  50. package/examples/pages/components/Alerts.tsx +1 -1
  51. package/examples/pages/components/ContentDivider.tsx +1 -1
  52. package/examples/pages/components/DragHandleDocs.tsx +2 -2
  53. package/examples/pages/components/Index.tsx +105 -50
  54. package/examples/pages/components/Panel.tsx +13 -13
  55. package/examples/pages/components/Tags.tsx +2 -2
  56. package/examples/pages/components/Togglebox.tsx +154 -15
  57. package/examples/pages/components/utilities/BorderRadiusUtilities.tsx +56 -0
  58. package/examples/pages/components/utilities/BorderUtilities.tsx +170 -0
  59. package/examples/pages/components/utilities/DisplayUtilities.tsx +116 -0
  60. package/examples/pages/components/utilities/FlexAndGridUtilities.tsx +551 -0
  61. package/examples/pages/components/utilities/ObjectFitUtilities.tsx +53 -0
  62. package/examples/pages/components/utilities/ObjectPositionUtilities.tsx +68 -0
  63. package/examples/pages/components/utilities/OpacityUtilities.tsx +64 -0
  64. package/examples/pages/components/utilities/OverflowUtilities.tsx +93 -0
  65. package/examples/pages/components/utilities/PositionUtilities.tsx +52 -0
  66. package/examples/pages/components/utilities/ShadowUtilities.tsx +123 -0
  67. package/examples/pages/components/utilities/SpacingUtilities.tsx +2 -2
  68. package/examples/pages/components/utilities/TextUtilities.tsx +44 -4
  69. package/examples/pages/components.html +2 -4
  70. package/examples/pages/components_deprecated/modals.html +2 -2
  71. package/examples/pages/components_deprecated.html +1 -0
  72. package/examples/pages/design-patterns/Index.tsx +1 -42
  73. package/examples/pages/design-patterns.html +2 -4
  74. package/examples/pages/design.html +1 -0
  75. package/examples/pages/main.html +1 -0
  76. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +1 -1
  77. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +214 -2
  78. package/examples/pages/playgrounds.html +1 -0
  79. package/package.json +1 -1
  80. package/react/components/ToggleBox/CustomHeaderToggleBox.d.ts +11 -0
  81. package/react/components/ToggleBox/CustomHeaderToggleBox.js +78 -0
  82. package/react/components/ToggleBox/SimpleToggleBox.d.ts +18 -0
  83. package/react/components/{Togglebox.js → ToggleBox/SimpleToggleBox.js} +7 -7
  84. package/react/components/ToggleBox/index.d.ts +26 -0
  85. package/react/components/ToggleBox/index.js +71 -0
  86. package/react/components/TreeMenu.js +4 -2
  87. package/react/index.d.ts +1 -1
  88. package/react/index.js +2 -2
  89. package/react/components/Togglebox.d.ts +0 -28
package/dist/main.html CHANGED
@@ -8,6 +8,7 @@
8
8
  <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design">Design guidelines</a></li>
9
9
  <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/playgrounds">Playground</a></li>
10
10
  </ul>
11
+ <doc-theme-picker></doc-theme-picker>
11
12
  </header>
12
13
 
13
14
  <main class="docs-page__content">
package/dist/playgrounds/react-playgrounds/Rundowns.tsx CHANGED
@@ -728,7 +728,7 @@ export class Rundowns extends React.Component<IProps, IState> {
728
728
  contentBg='medium'
729
729
  size='medium' onHide={() => {this.setState({modalNewShowSuccess: false})}}
730
730
  >
731
- <Container direction='column' className='sd-flex--justify-center sd-flex--items-center sd-padding-y--2' gap='medium'>
731
+ <Container direction='column' className='justify-center items-center py-2' gap='medium'>
732
732
  <Icon name='checkmark-circle' type='success' size='big' scale='3x' />
733
733
  <Text align='center' size='medium'>
734
734
  The show <strong>Marker</strong> has been successfully created.<br />
package/dist/playgrounds/react-playgrounds/TestGround.tsx CHANGED
@@ -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, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, TreeSelect, DatePicker, ContentDivider, Select, Option, AvatarGroup, SvgIconIllustration, IllustrationButton, SubNav, NavButton } 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, TreeSelect, DatePicker, ContentDivider, Select, Option, AvatarGroup, Avatar, SvgIconIllustration, IllustrationButton, SubNav, NavButton } from '../../../../app-typescript/index';
4
4
  import { IAvatarInGroup } from '../../../../app-typescript/components/avatar/avatar-group';
5
5
  import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
6
6
 
@@ -33,6 +33,9 @@ interface IState {
33
33
  valueS2: any;
34
34
  thisTheme: string;
35
35
  isExpanded: boolean;
36
+ openCollapsibleOne: boolean;
37
+ openCollapsibleTwo: boolean;
38
+ openCollapsibleThree: boolean;
36
39
  }
37
40
 
38
41
  let options2 = [
@@ -75,6 +78,9 @@ export class TestGround extends React.Component<IProps, IState> {
75
78
  valueS2: undefined,
76
79
  thisTheme: 'light-ui',
77
80
  isExpanded: false,
81
+ openCollapsibleOne: false,
82
+ openCollapsibleTwo: false,
83
+ openCollapsibleThree: false,
78
84
  }
79
85
  }
80
86
 
@@ -153,6 +159,212 @@ export class TestGround extends React.Component<IProps, IState> {
153
159
 
154
160
  <hr />
155
161
 
162
+ <div style={{maxWidth: '600px'}} className={`sd-shadow--z1 new-collapse-box ${this.state.openCollapsibleOne ? 'new-collapse-box--open' : ''}`}>
163
+ {/* Header */}
164
+ <div className='new-collapse-box__header'>
165
+ <div className='new-collapse-box__header-inner'>
166
+ <div role="listitem" className="sd-list-item sd-list-item--no-hover">
167
+ <div className="sd-list-item__border sd-list-item__border--locked"></div>
168
+ <div className="sd-list-item__column sd-list-item__column--no-border pe-0-5">
169
+ <Icon type='primary' name='calendar' scale='1.5x' ariaHidden={true} />
170
+ </div>
171
+ <div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
172
+ <div className="sd-list-item__row">
173
+ <span className="sd-list-item__slugline">Planning Slug</span>
174
+ <span className="sd-overflow-ellipsis sd-list-item--element-grow">
175
+ <span className="sd-list-item__text-strong">Cras justo odio, dapibus ac facilisis in.</span>
176
+ </span>
177
+ </div>
178
+ <div className="sd-list-item__row sd-list-item__row--overflow-visible me-1 mb-1-5">
179
+ <Label text='draft' style='translucent'/>
180
+ <span className="sd-margin-s--auto">
181
+ <AvatarGroup
182
+ size="x-small"
183
+ items={avatars}
184
+ />
185
+ </span>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ <button className='new-collapse-box__divider' onClick={() => this.setState(prevState => ({openCollapsibleOne: !prevState.openCollapsibleOne}))}>
191
+ <span className='label label--translucent new-collapse-box__divider-label'>
192
+ {this.state.openCollapsibleOne ? 'Show less' : 'Show more'}
193
+ </span>
194
+ </button>
195
+ </div>
196
+
197
+ {/* Content */}
198
+ <div className='new-collapse-box__content'>
199
+ <div className='new-collapse-box__content-inner p-2 pt-0-5'>
200
+ <div>
201
+ <FormLabel text='Name'/>
202
+ <Text size='small' weight='medium'>Australian Open 2024</Text>
203
+ </div>
204
+ <ContentDivider type="dashed" margin='x-small' />
205
+ <div>
206
+ <FormLabel text='Current Date'/>
207
+ <Text size='small' weight='medium'>05.02.2024 @ 10:00</Text>
208
+ </div>
209
+ <ContentDivider type="dashed" margin='x-small' />
210
+ <div>
211
+ <FormLabel text='Current Repeat Summary'/>
212
+ <Text size='small' weight='medium'>Every 1 day(s) until CET 28 Feb 2024</Text>
213
+ </div>
214
+ <ContentDivider type="dashed" margin='x-small' />
215
+ <div>
216
+ <FormLabel text='No. of events'/>
217
+ <Text size='small' weight='medium'>1</Text>
218
+ </div>
219
+ <ContentDivider type="dashed" margin='x-small' />
220
+
221
+ {/* NESTED BOX */}
222
+ <div className={`sd-shadow--z1 new-collapse-box ${this.state.openCollapsibleTwo ? 'new-collapse-box--open' : ''}`}>
223
+ {/* Header */}
224
+ <div className='new-collapse-box__header'>
225
+ <div className='new-collapse-box__header-inner'>
226
+ <div role="listitem" className="sd-list-item sd-list-item--no-hover">
227
+ <div className="sd-list-item__column sd-list-item__column--no-border pe-1">
228
+ <Avatar
229
+ displayName="Jeffrey Lebowski"
230
+ imageUrl={null}
231
+ initials='JL'
232
+ size="medium"
233
+ icon={{name: 'photo', color: 'var(--sd-colour-highlight)'}}
234
+ />
235
+
236
+ </div>
237
+ <div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
238
+ <div className="sd-list-item__row">
239
+ <span className="sd-overflow-ellipsis sd-list-item--element-grow">
240
+ <span className="sd-list-item__compound-text">
241
+ <span className="sd-list-item__text-strong">Photo</span>
242
+ <span className="sd-list-item__text-light">//</span>
243
+ <span className="sd-list-item__text">Archive</span>
244
+ </span>
245
+
246
+ </span>
247
+ <time className="sd-margin-s--auto" title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
248
+ </div>
249
+ <div className="sd-list-item__row sd-list-item__row--overflow-visible mb-1-5">
250
+ <span className="sd-list-item__compound-text">
251
+ <span className="sd-list-item__text-label">Desk:</span>
252
+ <span>Sports</span>
253
+ </span>
254
+ <span className="sd-list-item__compound-text">
255
+ <span className="sd-list-item__text-label">Assignee:</span>
256
+ <span>Jeffrey Lebowski</span>
257
+ </span>
258
+ <span className='sd-margin-s--auto'>
259
+ <Label text='in progress' style='translucent' type='success'/>
260
+ </span>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ <button className='new-collapse-box__divider' onClick={() => this.setState(prevState => ({openCollapsibleTwo: !prevState.openCollapsibleTwo}))}>
266
+ <span className='label label--translucent new-collapse-box__divider-label'>
267
+ {this.state.openCollapsibleTwo ? 'Show less' : 'Show more'}
268
+ </span>
269
+ </button>
270
+ </div>
271
+
272
+ {/* Content */}
273
+ <div className='new-collapse-box__content'>
274
+ <div className='new-collapse-box__content-inner p-2 pt-0-5'>
275
+ <div>
276
+ <FormLabel text='Name'/>
277
+ <Text size='small' weight='medium'>Australian Open 2024</Text>
278
+ </div>
279
+ <ContentDivider type="dashed" margin='x-small' />
280
+ <div>
281
+ <FormLabel text='Current Date'/>
282
+ <Text size='small' weight='medium'>05.02.2024 @ 10:00</Text>
283
+ </div>
284
+ <ContentDivider type="dashed" margin='x-small' />
285
+ <div>
286
+ <FormLabel text='Current Repeat Summary'/>
287
+ <Text size='small' weight='medium'>Every 1 day(s) until CET 28 Feb 2024</Text>
288
+ </div>
289
+ <ContentDivider type="dashed" margin='x-small' />
290
+ <div>
291
+ <FormLabel text='No. of events'/>
292
+ <Text size='small' weight='medium'>1</Text>
293
+ </div>
294
+ {/* <ContentDivider type="dashed" margin='x-small' /> */}
295
+ </div>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ </div>
300
+ </div>
301
+
302
+ {/* Second Collapsible */}
303
+
304
+ <div style={{maxWidth: '600px'}} className={`mt-2 sd-shadow--z1 new-collapse-box ${this.state.openCollapsibleThree ? 'new-collapse-box--open' : ''}`}>
305
+ {/* Header */}
306
+ <div className='new-collapse-box__header'>
307
+ <div className='new-collapse-box__header-inner'>
308
+ <div role="listitem" className="sd-list-item sd-list-item--no-hover">
309
+ <div className="sd-list-item__border sd-list-item__border--active"></div>
310
+ <div className="sd-list-item__column sd-list-item__column--no-border pe-0-5">
311
+ <Icon type='primary' name='calendar' scale='1.5x' ariaHidden={true} />
312
+ </div>
313
+ <div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
314
+ <div className="sd-list-item__row">
315
+ <span className="sd-list-item__slugline">Planning Item Slug</span>
316
+ <span className="sd-overflow-ellipsis sd-list-item--element-grow">
317
+ <span className="sd-list-item__text-strong">Aenean eu leo quam. Pellentesque ornare sem lacinia quam</span>
318
+ </span>
319
+ </div>
320
+ <div className="sd-list-item__row sd-list-item__row--overflow-visible me-1 mb-1-5">
321
+ <Label text='in progress' type='success' style='translucent'/>
322
+ <span className="sd-margin-s--auto">
323
+ <AvatarGroup
324
+ size="x-small"
325
+ items={avatars}
326
+ />
327
+ </span>
328
+ </div>
329
+ </div>
330
+ </div>
331
+ </div>
332
+ <button className='new-collapse-box__divider' onClick={() => this.setState(prevState => ({openCollapsibleThree: !prevState.openCollapsibleThree}))}>
333
+ <span className='label label--translucent new-collapse-box__divider-label'>
334
+ {this.state.openCollapsibleThree ? 'Show less' : 'Show more'}
335
+ </span>
336
+ </button>
337
+ </div>
338
+
339
+ {/* Content */}
340
+ <div className='new-collapse-box__content'>
341
+ <div className='new-collapse-box__content-inner p-2 pt-0-5'>
342
+ <div>
343
+ <FormLabel text='Name'/>
344
+ <Text size='small' weight='medium'>Australian Open 2024</Text>
345
+ </div>
346
+ <ContentDivider type="dashed" margin='x-small' />
347
+ <div>
348
+ <FormLabel text='Current Date'/>
349
+ <Text size='small' weight='medium'>05.02.2024 @ 10:00</Text>
350
+ </div>
351
+ <ContentDivider type="dashed" margin='x-small' />
352
+ <div>
353
+ <FormLabel text='Current Repeat Summary'/>
354
+ <Text size='small' weight='medium'>Every 1 day(s) until CET 28 Feb 2024</Text>
355
+ </div>
356
+ <ContentDivider type="dashed" margin='x-small' />
357
+ <div>
358
+ <FormLabel text='No. of events'/>
359
+ <Text size='small' weight='medium'>1</Text>
360
+ </div>
361
+ <ContentDivider type="dashed" margin='x-small' />
362
+ </div>
363
+ </div>
364
+ </div>
365
+
366
+ <hr />
367
+
156
368
  <SubNav color='darker'>
157
369
  <Tooltip text={this.state.isExpanded ? "Revert Authoring" : "Expand Authoring"} flow='right' appendToBody={true}>
158
370
  <button
@@ -162,7 +374,7 @@ export class TestGround extends React.Component<IProps, IState> {
162
374
  <Icon name='chevron-left-thin' />
163
375
  </button>
164
376
  </Tooltip>
165
- <div className='text-2xs text-uppercase sd-display--flex ms-2 gap-0-5'>
377
+ <div className='text-2xs text-uppercase d-flex ms-2 gap-0-5'>
166
378
  <span className='font-medium'>News desk</span>
167
379
  <span className='font-light text-color-subdued'>/</span>
168
380
  <span className='text-color-muted'>Working stage</span>
package/dist/playgrounds.html CHANGED
@@ -8,6 +8,7 @@
8
8
  <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design">Design guidelines</a></li>
9
9
  <li class="docs-page__header-nav-item docs-page__header-nav-item--active"><a class="docs-page__header-nav-link" href="#/playgrounds">Playground</a></li>
10
10
  </ul>
11
+ <doc-theme-picker></doc-theme-picker>
11
12
  </header>
12
13
  <main class="docs-page__content">
13
14
  <div class="docs-page__hero sd-margin-b--0">