superdesk-ui-framework 3.0.1-beta.28 → 3.0.1-beta.30

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 (72) hide show
  1. package/app/styles/_big-icon-font.scss +1 -1
  2. package/app/styles/_labels.scss +0 -1
  3. package/app/styles/_simple-list.scss +0 -3
  4. package/app/styles/components/_sd-media-carousel.scss +37 -2
  5. package/app/styles/components/_subnav.scss +470 -470
  6. package/app/styles/design-tokens/_new-colors.scss +19 -7
  7. package/app/styles/primereact/_pr-datepicker.scss +4 -2
  8. package/app/styles/variables/_colors.scss +21 -21
  9. package/app-typescript/components/Lists/TableList.tsx +46 -41
  10. package/app-typescript/components/NavButton.tsx +2 -1
  11. package/dist/examples.bundle.css +62 -62
  12. package/dist/examples.bundle.js +20 -4
  13. package/dist/react/NavButtons.tsx +31 -1
  14. package/dist/superdesk-ui.bundle.css +210 -167
  15. package/dist/superdesk-ui.bundle.js +6 -2
  16. package/examples/css/docs-page.css +4 -4
  17. package/examples/pages/react/NavButtons.tsx +31 -1
  18. package/package.json +1 -1
  19. package/react/components/Lists/TableList.d.ts +1 -0
  20. package/react/components/Lists/TableList.js +6 -2
  21. package/react/components/NavButton.d.ts +1 -1
  22. package/.vscode/settings.json +0 -5
  23. package/app-typescript/dist/components/Alert.d.ts +0 -16
  24. package/app-typescript/dist/components/Autocomplete.d.ts +0 -48
  25. package/app-typescript/dist/components/Avatar.d.ts +0 -33
  26. package/app-typescript/dist/components/Badge.d.ts +0 -13
  27. package/app-typescript/dist/components/Button.d.ts +0 -23
  28. package/app-typescript/dist/components/ButtonGroup.d.ts +0 -12
  29. package/app-typescript/dist/components/CheckButtonGroup.d.ts +0 -11
  30. package/app-typescript/dist/components/CheckGroup.d.ts +0 -9
  31. package/app-typescript/dist/components/Checkbox.d.ts +0 -19
  32. package/app-typescript/dist/components/CheckboxButton.d.ts +0 -19
  33. package/app-typescript/dist/components/DatePicker.d.ts +0 -37
  34. package/app-typescript/dist/components/Divider.d.ts +0 -9
  35. package/app-typescript/dist/components/DonutChart.d.ts +0 -12
  36. package/app-typescript/dist/components/Dropdown.d.ts +0 -28
  37. package/app-typescript/dist/components/DropdownFirst.d.ts +0 -42
  38. package/app-typescript/dist/components/EmptyState.d.ts +0 -11
  39. package/app-typescript/dist/components/FormLabel.d.ts +0 -9
  40. package/app-typescript/dist/components/Genie.d.ts +0 -13
  41. package/app-typescript/dist/components/GridItem.d.ts +0 -69
  42. package/app-typescript/dist/components/GridList.d.ts +0 -14
  43. package/app-typescript/dist/components/HeadingText.d.ts +0 -10
  44. package/app-typescript/dist/components/HelloWorld.d.ts +0 -8
  45. package/app-typescript/dist/components/Icon.d.ts +0 -12
  46. package/app-typescript/dist/components/IconButton.d.ts +0 -12
  47. package/app-typescript/dist/components/IconLabel.d.ts +0 -11
  48. package/app-typescript/dist/components/Input.d.ts +0 -24
  49. package/app-typescript/dist/components/Label.d.ts +0 -15
  50. package/app-typescript/dist/components/LeftMenu.d.ts +0 -26
  51. package/app-typescript/dist/components/Loader.d.ts +0 -8
  52. package/app-typescript/dist/components/NavButton.d.ts +0 -15
  53. package/app-typescript/dist/components/Popover.d.ts +0 -13
  54. package/app-typescript/dist/components/PropsList.d.ts +0 -15
  55. package/app-typescript/dist/components/Radio.d.ts +0 -19
  56. package/app-typescript/dist/components/RadioButton.d.ts +0 -20
  57. package/app-typescript/dist/components/Select.d.ts +0 -29
  58. package/app-typescript/dist/components/SelectWithTemplate.d.ts +0 -32
  59. package/app-typescript/dist/components/SlidingToolbar.d.ts +0 -8
  60. package/app-typescript/dist/components/StrechBar.d.ts +0 -4
  61. package/app-typescript/dist/components/SubNav.d.ts +0 -10
  62. package/app-typescript/dist/components/Switch.d.ts +0 -12
  63. package/app-typescript/dist/components/TabCustom.d.ts +0 -25
  64. package/app-typescript/dist/components/TabList.d.ts +0 -22
  65. package/app-typescript/dist/components/Tag.d.ts +0 -9
  66. package/app-typescript/dist/components/TagInput.d.ts +0 -7
  67. package/app-typescript/dist/components/TagInputTest.d.ts +0 -18
  68. package/app-typescript/dist/components/TimePicker.d.ts +0 -11
  69. package/app-typescript/dist/components/Tooltip.d.ts +0 -11
  70. package/app-typescript/dist/components/_Positioner.d.ts +0 -27
  71. package/app-typescript/dist/index.d.ts +0 -56
  72. package/yarn-error.log +0 -111
@@ -850,7 +850,7 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
850
850
  margin: 0;
851
851
  font-size: 13px;
852
852
  line-height: 1.42857143;
853
- color: #333;
853
+ color: hsl(214, 13%, 20%);
854
854
  word-break: break-all;
855
855
  word-wrap: break-word;
856
856
  background-color: #eee;
@@ -858,11 +858,11 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
858
858
  border-radius: 2px;
859
859
  }
860
860
  .docs-page__code-window {
861
- border: 1px solid rgba(123, 123, 123, 0.2);
861
+ border: 1px solid hsla(0, 0%, 48%, 0.2);
862
862
  border-radius: 2px;
863
863
  margin: 10px 0 20px;
864
- -webkit-box-shadow: 0 2px 8px rgba(0,0,0,.07);
865
- box-shadow: 0 2px 8px rgba(0,0,0,.07);
864
+ -webkit-box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.07);
865
+ box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.07);
866
866
  }
867
867
  .docs-page__window-bar {
868
868
  padding: 10px;
@@ -3640,7 +3640,7 @@ doc-react-playground {
3640
3640
  color: var(--sd-colour-interactive) !important; }
3641
3641
 
3642
3642
  .icon--white {
3643
- color: #fff !important; }
3643
+ color: white !important; }
3644
3644
 
3645
3645
  .icon--light-blue {
3646
3646
  color: #68abc8 !important;
@@ -13481,7 +13481,7 @@ doc-react-playground {
13481
13481
  font-weight: normal;
13482
13482
  font-variant: normal;
13483
13483
  text-transform: none;
13484
- color: #333333;
13484
+ color: var(--color-icon-default);
13485
13485
  /* Better Font Rendering =========== */
13486
13486
  -webkit-font-smoothing: antialiased;
13487
13487
  -moz-osx-font-smoothing: grayscale; }
@@ -13490,7 +13490,7 @@ doc-react-playground {
13490
13490
  color: var(--sd-colour-interactive); }
13491
13491
 
13492
13492
  .big-icon--white {
13493
- color: #fff !important; }
13493
+ color: white !important; }
13494
13494
 
13495
13495
  [class*=big-icon--].red,
13496
13496
  .big-icon--red {
@@ -13499,7 +13499,7 @@ doc-react-playground {
13499
13499
  .big-icon--dashboard {
13500
13500
  content: ""; }
13501
13501
  .big-icon--dashboard.color--default {
13502
- color: #333333; }
13502
+ color: #2c323a; }
13503
13503
  .big-icon--dashboard.color--primary {
13504
13504
  color: var(--sd-colour-primary) !important; }
13505
13505
  .big-icon--dashboard.color--success {
@@ -13530,7 +13530,7 @@ doc-react-playground {
13530
13530
  .big-icon--view {
13531
13531
  content: ""; }
13532
13532
  .big-icon--view.color--default {
13533
- color: #333333; }
13533
+ color: #2c323a; }
13534
13534
  .big-icon--view.color--primary {
13535
13535
  color: var(--sd-colour-primary) !important; }
13536
13536
  .big-icon--view.color--success {
@@ -13561,7 +13561,7 @@ doc-react-playground {
13561
13561
  .big-icon--tasks {
13562
13562
  content: ""; }
13563
13563
  .big-icon--tasks.color--default {
13564
- color: #333333; }
13564
+ color: #2c323a; }
13565
13565
  .big-icon--tasks.color--primary {
13566
13566
  color: var(--sd-colour-primary) !important; }
13567
13567
  .big-icon--tasks.color--success {
@@ -13592,7 +13592,7 @@ doc-react-playground {
13592
13592
  .big-icon--calendar {
13593
13593
  content: ""; }
13594
13594
  .big-icon--calendar.color--default {
13595
- color: #333333; }
13595
+ color: #2c323a; }
13596
13596
  .big-icon--calendar.color--primary {
13597
13597
  color: var(--sd-colour-primary) !important; }
13598
13598
  .big-icon--calendar.color--success {
@@ -13623,7 +13623,7 @@ doc-react-playground {
13623
13623
  .big-icon--marked-star {
13624
13624
  content: ""; }
13625
13625
  .big-icon--marked-star.color--default {
13626
- color: #333333; }
13626
+ color: #2c323a; }
13627
13627
  .big-icon--marked-star.color--primary {
13628
13628
  color: var(--sd-colour-primary) !important; }
13629
13629
  .big-icon--marked-star.color--success {
@@ -13654,7 +13654,7 @@ doc-react-playground {
13654
13654
  .big-icon--archive {
13655
13655
  content: ""; }
13656
13656
  .big-icon--archive.color--default {
13657
- color: #333333; }
13657
+ color: #2c323a; }
13658
13658
  .big-icon--archive.color--primary {
13659
13659
  color: var(--sd-colour-primary) !important; }
13660
13660
  .big-icon--archive.color--success {
@@ -13685,7 +13685,7 @@ doc-react-playground {
13685
13685
  .big-icon--spike {
13686
13686
  content: ""; }
13687
13687
  .big-icon--spike.color--default {
13688
- color: #333333; }
13688
+ color: #2c323a; }
13689
13689
  .big-icon--spike.color--primary {
13690
13690
  color: var(--sd-colour-primary) !important; }
13691
13691
  .big-icon--spike.color--success {
@@ -13716,7 +13716,7 @@ doc-react-playground {
13716
13716
  .big-icon--unspike {
13717
13717
  content: ""; }
13718
13718
  .big-icon--unspike.color--default {
13719
- color: #333333; }
13719
+ color: #2c323a; }
13720
13720
  .big-icon--unspike.color--primary {
13721
13721
  color: var(--sd-colour-primary) !important; }
13722
13722
  .big-icon--unspike.color--success {
@@ -13747,7 +13747,7 @@ doc-react-playground {
13747
13747
  .big-icon--personal {
13748
13748
  content: ""; }
13749
13749
  .big-icon--personal.color--default {
13750
- color: #333333; }
13750
+ color: #2c323a; }
13751
13751
  .big-icon--personal.color--primary {
13752
13752
  color: var(--sd-colour-primary) !important; }
13753
13753
  .big-icon--personal.color--success {
@@ -13778,7 +13778,7 @@ doc-react-playground {
13778
13778
  .big-icon--global-search {
13779
13779
  content: ""; }
13780
13780
  .big-icon--global-search.color--default {
13781
- color: #333333; }
13781
+ color: #2c323a; }
13782
13782
  .big-icon--global-search.color--primary {
13783
13783
  color: var(--sd-colour-primary) !important; }
13784
13784
  .big-icon--global-search.color--success {
@@ -13809,7 +13809,7 @@ doc-react-playground {
13809
13809
  .big-icon--analytics {
13810
13810
  content: ""; }
13811
13811
  .big-icon--analytics.color--default {
13812
- color: #333333; }
13812
+ color: #2c323a; }
13813
13813
  .big-icon--analytics.color--primary {
13814
13814
  color: var(--sd-colour-primary) !important; }
13815
13815
  .big-icon--analytics.color--success {
@@ -13840,7 +13840,7 @@ doc-react-playground {
13840
13840
  .big-icon--web {
13841
13841
  content: ""; }
13842
13842
  .big-icon--web.color--default {
13843
- color: #333333; }
13843
+ color: #2c323a; }
13844
13844
  .big-icon--web.color--primary {
13845
13845
  color: var(--sd-colour-primary) !important; }
13846
13846
  .big-icon--web.color--success {
@@ -13871,7 +13871,7 @@ doc-react-playground {
13871
13871
  .big-icon--cog {
13872
13872
  content: ""; }
13873
13873
  .big-icon--cog.color--default {
13874
- color: #333333; }
13874
+ color: #2c323a; }
13875
13875
  .big-icon--cog.color--primary {
13876
13876
  color: var(--sd-colour-primary) !important; }
13877
13877
  .big-icon--cog.color--success {
@@ -13902,7 +13902,7 @@ doc-react-playground {
13902
13902
  .big-icon--send-to {
13903
13903
  content: ""; }
13904
13904
  .big-icon--send-to.color--default {
13905
- color: #333333; }
13905
+ color: #2c323a; }
13906
13906
  .big-icon--send-to.color--primary {
13907
13907
  color: var(--sd-colour-primary) !important; }
13908
13908
  .big-icon--send-to.color--success {
@@ -13933,7 +13933,7 @@ doc-react-playground {
13933
13933
  .big-icon--info {
13934
13934
  content: ""; }
13935
13935
  .big-icon--info.color--default {
13936
- color: #333333; }
13936
+ color: #2c323a; }
13937
13937
  .big-icon--info.color--primary {
13938
13938
  color: var(--sd-colour-primary) !important; }
13939
13939
  .big-icon--info.color--success {
@@ -13964,7 +13964,7 @@ doc-react-playground {
13964
13964
  .big-icon--find-replace {
13965
13965
  content: ""; }
13966
13966
  .big-icon--find-replace.color--default {
13967
- color: #333333; }
13967
+ color: #2c323a; }
13968
13968
  .big-icon--find-replace.color--primary {
13969
13969
  color: var(--sd-colour-primary) !important; }
13970
13970
  .big-icon--find-replace.color--success {
@@ -13995,7 +13995,7 @@ doc-react-playground {
13995
13995
  .big-icon--comments {
13996
13996
  content: ""; }
13997
13997
  .big-icon--comments.color--default {
13998
- color: #333333; }
13998
+ color: #2c323a; }
13999
13999
  .big-icon--comments.color--primary {
14000
14000
  color: var(--sd-colour-primary) !important; }
14001
14001
  .big-icon--comments.color--success {
@@ -14026,7 +14026,7 @@ doc-react-playground {
14026
14026
  .big-icon--history {
14027
14027
  content: ""; }
14028
14028
  .big-icon--history.color--default {
14029
- color: #333333; }
14029
+ color: #2c323a; }
14030
14030
  .big-icon--history.color--primary {
14031
14031
  color: var(--sd-colour-primary) !important; }
14032
14032
  .big-icon--history.color--success {
@@ -14057,7 +14057,7 @@ doc-react-playground {
14057
14057
  .big-icon--package {
14058
14058
  content: ""; }
14059
14059
  .big-icon--package.color--default {
14060
- color: #333333; }
14060
+ color: #2c323a; }
14061
14061
  .big-icon--package.color--primary {
14062
14062
  color: var(--sd-colour-primary) !important; }
14063
14063
  .big-icon--package.color--success {
@@ -14088,7 +14088,7 @@ doc-react-playground {
14088
14088
  .big-icon--create-package {
14089
14089
  content: ""; }
14090
14090
  .big-icon--create-package.color--default {
14091
- color: #333333; }
14091
+ color: #2c323a; }
14092
14092
  .big-icon--create-package.color--primary {
14093
14093
  color: var(--sd-colour-primary) !important; }
14094
14094
  .big-icon--create-package.color--success {
@@ -14119,7 +14119,7 @@ doc-react-playground {
14119
14119
  .big-icon--add-to-package {
14120
14120
  content: ""; }
14121
14121
  .big-icon--add-to-package.color--default {
14122
- color: #333333; }
14122
+ color: #2c323a; }
14123
14123
  .big-icon--add-to-package.color--primary {
14124
14124
  color: var(--sd-colour-primary) !important; }
14125
14125
  .big-icon--add-to-package.color--success {
@@ -14150,7 +14150,7 @@ doc-react-playground {
14150
14150
  .big-icon--fetch {
14151
14151
  content: ""; }
14152
14152
  .big-icon--fetch.color--default {
14153
- color: #333333; }
14153
+ color: #2c323a; }
14154
14154
  .big-icon--fetch.color--primary {
14155
14155
  color: var(--sd-colour-primary) !important; }
14156
14156
  .big-icon--fetch.color--success {
@@ -14181,7 +14181,7 @@ doc-react-playground {
14181
14181
  .big-icon--fetch-as {
14182
14182
  content: ""; }
14183
14183
  .big-icon--fetch-as.color--default {
14184
- color: #333333; }
14184
+ color: #2c323a; }
14185
14185
  .big-icon--fetch-as.color--primary {
14186
14186
  color: var(--sd-colour-primary) !important; }
14187
14187
  .big-icon--fetch-as.color--success {
@@ -14212,7 +14212,7 @@ doc-react-playground {
14212
14212
  .big-icon--macro {
14213
14213
  content: ""; }
14214
14214
  .big-icon--macro.color--default {
14215
- color: #333333; }
14215
+ color: #2c323a; }
14216
14216
  .big-icon--macro.color--primary {
14217
14217
  color: var(--sd-colour-primary) !important; }
14218
14218
  .big-icon--macro.color--success {
@@ -14243,7 +14243,7 @@ doc-react-playground {
14243
14243
  .big-icon--related {
14244
14244
  content: ""; }
14245
14245
  .big-icon--related.color--default {
14246
- color: #333333; }
14246
+ color: #2c323a; }
14247
14247
  .big-icon--related.color--primary {
14248
14248
  color: var(--sd-colour-primary) !important; }
14249
14249
  .big-icon--related.color--success {
@@ -14274,7 +14274,7 @@ doc-react-playground {
14274
14274
  .big-icon--minimize {
14275
14275
  content: ""; }
14276
14276
  .big-icon--minimize.color--default {
14277
- color: #333333; }
14277
+ color: #2c323a; }
14278
14278
  .big-icon--minimize.color--primary {
14279
14279
  color: var(--sd-colour-primary) !important; }
14280
14280
  .big-icon--minimize.color--success {
@@ -14305,7 +14305,7 @@ doc-react-playground {
14305
14305
  .big-icon--settings {
14306
14306
  content: ""; }
14307
14307
  .big-icon--settings.color--default {
14308
- color: #333333; }
14308
+ color: #2c323a; }
14309
14309
  .big-icon--settings.color--primary {
14310
14310
  color: var(--sd-colour-primary) !important; }
14311
14311
  .big-icon--settings.color--success {
@@ -14336,7 +14336,7 @@ doc-react-playground {
14336
14336
  .big-icon--multiedit {
14337
14337
  content: ""; }
14338
14338
  .big-icon--multiedit.color--default {
14339
- color: #333333; }
14339
+ color: #2c323a; }
14340
14340
  .big-icon--multiedit.color--primary {
14341
14341
  color: var(--sd-colour-primary) !important; }
14342
14342
  .big-icon--multiedit.color--success {
@@ -14367,7 +14367,7 @@ doc-react-playground {
14367
14367
  .big-icon--export {
14368
14368
  content: ""; }
14369
14369
  .big-icon--export.color--default {
14370
- color: #333333; }
14370
+ color: #2c323a; }
14371
14371
  .big-icon--export.color--primary {
14372
14372
  color: var(--sd-colour-primary) !important; }
14373
14373
  .big-icon--export.color--success {
@@ -14398,7 +14398,7 @@ doc-react-playground {
14398
14398
  .big-icon--create-list {
14399
14399
  content: ""; }
14400
14400
  .big-icon--create-list.color--default {
14401
- color: #333333; }
14401
+ color: #2c323a; }
14402
14402
  .big-icon--create-list.color--primary {
14403
14403
  color: var(--sd-colour-primary) !important; }
14404
14404
  .big-icon--create-list.color--success {
@@ -14429,7 +14429,7 @@ doc-react-playground {
14429
14429
  .big-icon--add-to-list {
14430
14430
  content: ""; }
14431
14431
  .big-icon--add-to-list.color--default {
14432
- color: #333333; }
14432
+ color: #2c323a; }
14433
14433
  .big-icon--add-to-list.color--primary {
14434
14434
  color: var(--sd-colour-primary) !important; }
14435
14435
  .big-icon--add-to-list.color--success {
@@ -14460,7 +14460,7 @@ doc-react-playground {
14460
14460
  .big-icon--text {
14461
14461
  content: ""; }
14462
14462
  .big-icon--text.color--default {
14463
- color: #333333; }
14463
+ color: #2c323a; }
14464
14464
  .big-icon--text.color--primary {
14465
14465
  color: var(--sd-colour-primary) !important; }
14466
14466
  .big-icon--text.color--success {
@@ -14491,7 +14491,7 @@ doc-react-playground {
14491
14491
  .big-icon--desk {
14492
14492
  content: ""; }
14493
14493
  .big-icon--desk.color--default {
14494
- color: #333333; }
14494
+ color: #2c323a; }
14495
14495
  .big-icon--desk.color--primary {
14496
14496
  color: var(--sd-colour-primary) !important; }
14497
14497
  .big-icon--desk.color--success {
@@ -14522,7 +14522,7 @@ doc-react-playground {
14522
14522
  .big-icon--chevron-left {
14523
14523
  content: ""; }
14524
14524
  .big-icon--chevron-left.color--default {
14525
- color: #333333; }
14525
+ color: #2c323a; }
14526
14526
  .big-icon--chevron-left.color--primary {
14527
14527
  color: var(--sd-colour-primary) !important; }
14528
14528
  .big-icon--chevron-left.color--success {
@@ -14553,7 +14553,7 @@ doc-react-playground {
14553
14553
  .big-icon--chevron-right {
14554
14554
  content: ""; }
14555
14555
  .big-icon--chevron-right.color--default {
14556
- color: #333333; }
14556
+ color: #2c323a; }
14557
14557
  .big-icon--chevron-right.color--primary {
14558
14558
  color: var(--sd-colour-primary) !important; }
14559
14559
  .big-icon--chevron-right.color--success {
@@ -14584,7 +14584,7 @@ doc-react-playground {
14584
14584
  .big-icon--dashboard-alt {
14585
14585
  content: ""; }
14586
14586
  .big-icon--dashboard-alt.color--default {
14587
- color: #333333; }
14587
+ color: #2c323a; }
14588
14588
  .big-icon--dashboard-alt.color--primary {
14589
14589
  color: var(--sd-colour-primary) !important; }
14590
14590
  .big-icon--dashboard-alt.color--success {
@@ -14615,7 +14615,7 @@ doc-react-playground {
14615
14615
  .big-icon--master {
14616
14616
  content: ""; }
14617
14617
  .big-icon--master.color--default {
14618
- color: #333333; }
14618
+ color: #2c323a; }
14619
14619
  .big-icon--master.color--primary {
14620
14620
  color: var(--sd-colour-primary) !important; }
14621
14621
  .big-icon--master.color--success {
@@ -14646,7 +14646,7 @@ doc-react-playground {
14646
14646
  .big-icon--attachment {
14647
14647
  content: ""; }
14648
14648
  .big-icon--attachment.color--default {
14649
- color: #333333; }
14649
+ color: #2c323a; }
14650
14650
  .big-icon--attachment.color--primary {
14651
14651
  color: var(--sd-colour-primary) !important; }
14652
14652
  .big-icon--attachment.color--success {
@@ -14677,7 +14677,7 @@ doc-react-playground {
14677
14677
  .big-icon--upload-alt {
14678
14678
  content: ""; }
14679
14679
  .big-icon--upload-alt.color--default {
14680
- color: #333333; }
14680
+ color: #2c323a; }
14681
14681
  .big-icon--upload-alt.color--primary {
14682
14682
  color: var(--sd-colour-primary) !important; }
14683
14683
  .big-icon--upload-alt.color--success {
@@ -14708,7 +14708,7 @@ doc-react-playground {
14708
14708
  .big-icon--document-default {
14709
14709
  content: ""; }
14710
14710
  .big-icon--document-default.color--default {
14711
- color: #333333; }
14711
+ color: #2c323a; }
14712
14712
  .big-icon--document-default.color--primary {
14713
14713
  color: var(--sd-colour-primary) !important; }
14714
14714
  .big-icon--document-default.color--success {
@@ -14739,7 +14739,7 @@ doc-react-playground {
14739
14739
  .big-icon--document-pdf {
14740
14740
  content: ""; }
14741
14741
  .big-icon--document-pdf.color--default {
14742
- color: #333333; }
14742
+ color: #2c323a; }
14743
14743
  .big-icon--document-pdf.color--primary {
14744
14744
  color: var(--sd-colour-primary) !important; }
14745
14745
  .big-icon--document-pdf.color--success {
@@ -14770,7 +14770,7 @@ doc-react-playground {
14770
14770
  .big-icon--document-doc {
14771
14771
  content: ""; }
14772
14772
  .big-icon--document-doc.color--default {
14773
- color: #333333; }
14773
+ color: #2c323a; }
14774
14774
  .big-icon--document-doc.color--primary {
14775
14775
  color: var(--sd-colour-primary) !important; }
14776
14776
  .big-icon--document-doc.color--success {
@@ -14801,7 +14801,7 @@ doc-react-playground {
14801
14801
  .big-icon--semantics {
14802
14802
  content: ""; }
14803
14803
  .big-icon--semantics.color--default {
14804
- color: #333333; }
14804
+ color: #2c323a; }
14805
14805
  .big-icon--semantics.color--primary {
14806
14806
  color: var(--sd-colour-primary) !important; }
14807
14807
  .big-icon--semantics.color--success {
@@ -14832,7 +14832,7 @@ doc-react-playground {
14832
14832
  .big-icon--picture {
14833
14833
  content: ""; }
14834
14834
  .big-icon--picture.color--default {
14835
- color: #333333; }
14835
+ color: #2c323a; }
14836
14836
  .big-icon--picture.color--primary {
14837
14837
  color: var(--sd-colour-primary) !important; }
14838
14838
  .big-icon--picture.color--success {
@@ -14863,7 +14863,7 @@ doc-react-playground {
14863
14863
  .big-icon--manage-package {
14864
14864
  content: ""; }
14865
14865
  .big-icon--manage-package.color--default {
14866
- color: #333333; }
14866
+ color: #2c323a; }
14867
14867
  .big-icon--manage-package.color--primary {
14868
14868
  color: var(--sd-colour-primary) !important; }
14869
14869
  .big-icon--manage-package.color--success {
@@ -14894,7 +14894,7 @@ doc-react-playground {
14894
14894
  .big-icon--live {
14895
14895
  content: ""; }
14896
14896
  .big-icon--live.color--default {
14897
- color: #333333; }
14897
+ color: #2c323a; }
14898
14898
  .big-icon--live.color--primary {
14899
14899
  color: var(--sd-colour-primary) !important; }
14900
14900
  .big-icon--live.color--success {
@@ -14925,7 +14925,7 @@ doc-react-playground {
14925
14925
  .big-icon--live-alt {
14926
14926
  content: ""; }
14927
14927
  .big-icon--live-alt.color--default {
14928
- color: #333333; }
14928
+ color: #2c323a; }
14929
14929
  .big-icon--live-alt.color--primary {
14930
14930
  color: var(--sd-colour-primary) !important; }
14931
14931
  .big-icon--live-alt.color--success {
@@ -14956,7 +14956,7 @@ doc-react-playground {
14956
14956
  .big-icon--meta-search {
14957
14957
  content: ""; }
14958
14958
  .big-icon--meta-search.color--default {
14959
- color: #333333; }
14959
+ color: #2c323a; }
14960
14960
  .big-icon--meta-search.color--primary {
14961
14961
  color: var(--sd-colour-primary) !important; }
14962
14962
  .big-icon--meta-search.color--success {
@@ -14987,7 +14987,7 @@ doc-react-playground {
14987
14987
  .big-icon--chat {
14988
14988
  content: ""; }
14989
14989
  .big-icon--chat.color--default {
14990
- color: #333333; }
14990
+ color: #2c323a; }
14991
14991
  .big-icon--chat.color--primary {
14992
14992
  color: var(--sd-colour-primary) !important; }
14993
14993
  .big-icon--chat.color--success {
@@ -15018,7 +15018,7 @@ doc-react-playground {
15018
15018
  .big-icon--annotation {
15019
15019
  content: ""; }
15020
15020
  .big-icon--annotation.color--default {
15021
- color: #333333; }
15021
+ color: #2c323a; }
15022
15022
  .big-icon--annotation.color--primary {
15023
15023
  color: var(--sd-colour-primary) !important; }
15024
15024
  .big-icon--annotation.color--success {
@@ -15049,7 +15049,7 @@ doc-react-playground {
15049
15049
  .big-icon--suggestion {
15050
15050
  content: ""; }
15051
15051
  .big-icon--suggestion.color--default {
15052
- color: #333333; }
15052
+ color: #2c323a; }
15053
15053
  .big-icon--suggestion.color--primary {
15054
15054
  color: var(--sd-colour-primary) !important; }
15055
15055
  .big-icon--suggestion.color--success {
@@ -15080,7 +15080,7 @@ doc-react-playground {
15080
15080
  .big-icon--publisher {
15081
15081
  content: ""; }
15082
15082
  .big-icon--publisher.color--default {
15083
- color: #333333; }
15083
+ color: #2c323a; }
15084
15084
  .big-icon--publisher.color--primary {
15085
15085
  color: var(--sd-colour-primary) !important; }
15086
15086
  .big-icon--publisher.color--success {
@@ -15111,7 +15111,7 @@ doc-react-playground {
15111
15111
  .big-icon--tag {
15112
15112
  content: ""; }
15113
15113
  .big-icon--tag.color--default {
15114
- color: #333333; }
15114
+ color: #2c323a; }
15115
15115
  .big-icon--tag.color--primary {
15116
15116
  color: var(--sd-colour-primary) !important; }
15117
15117
  .big-icon--tag.color--success {
@@ -15142,7 +15142,7 @@ doc-react-playground {
15142
15142
  .big-icon--rundown {
15143
15143
  content: ""; }
15144
15144
  .big-icon--rundown.color--default {
15145
- color: #333333; }
15145
+ color: #2c323a; }
15146
15146
  .big-icon--rundown.color--primary {
15147
15147
  color: var(--sd-colour-primary) !important; }
15148
15148
  .big-icon--rundown.color--success {
@@ -15173,7 +15173,7 @@ doc-react-playground {
15173
15173
  .big-icon--checkmark-circle {
15174
15174
  content: ""; }
15175
15175
  .big-icon--checkmark-circle.color--default {
15176
- color: #333333; }
15176
+ color: #2c323a; }
15177
15177
  .big-icon--checkmark-circle.color--primary {
15178
15178
  color: var(--sd-colour-primary) !important; }
15179
15179
  .big-icon--checkmark-circle.color--success {
@@ -41247,6 +41247,10 @@ var TableListItem = /** @class */ (function (_super) {
41247
41247
  _this.prevent = false;
41248
41248
  }, _this.delay);
41249
41249
  };
41250
+ _this.onActionMenuClick = function (event) {
41251
+ event.preventDefault();
41252
+ event.stopPropagation();
41253
+ };
41250
41254
  return _this;
41251
41255
  }
41252
41256
  TableListItem.prototype.render = function () {
@@ -41267,7 +41271,7 @@ var TableListItem = /** @class */ (function (_super) {
41267
41271
  React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
41268
41272
  React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' }, this.props.center && this.props.center),
41269
41273
  React.createElement("div", { className: 'table-list__item-content-block' }, this.props.end && this.props.end)),
41270
- this.props.action && React.createElement("div", { className: 'table-list__slide-in-actions' }, this.props.action)),
41274
+ this.props.action && React.createElement("div", { className: 'table-list__slide-in-actions', onClick: this.onActionMenuClick }, this.props.action)),
41271
41275
  React.createElement("div", { className: 'table-list__add-bar-container' },
41272
41276
  React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
41273
41277
  React.createElement("div", { className: 'table-list__add-bar' },
@@ -41279,7 +41283,7 @@ var TableListItem = /** @class */ (function (_super) {
41279
41283
  React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
41280
41284
  React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' }, this.props.center && this.props.center),
41281
41285
  React.createElement("div", { className: 'table-list__item-content-block' }, this.props.end && this.props.end)),
41282
- this.props.action && React.createElement("div", { className: 'table-list__slide-in-actions' }, this.props.action)));
41286
+ this.props.action && React.createElement("div", { className: 'table-list__slide-in-actions', onClick: this.onActionMenuClick }, this.props.action)));
41283
41287
  };
41284
41288
  return TableListItem;
41285
41289
  }(React.PureComponent));
@@ -130800,12 +130804,24 @@ var NavButtonsDoc = /** @class */ (function (_super) {
130800
130804
  React.createElement(app_typescript_1.Tooltip, { text: 'Send to / Publish', flow: 'left' },
130801
130805
  React.createElement(app_typescript_1.NavButton, { icon: 'expand-thin', text: 'Send to / Publish', type: 'highlight', onClick: function () { return false; } }))))),
130802
130806
  React.createElement(Markup.ReactMarkupCode, null, "\n <SubNav zIndex={2}>\n <ButtonGroup align='start' spaces='no-space'>\n <Tooltip text='Filters' flow='right'>\n <NavButton icon='filter-large' type='darker' state=\"active\" text=\"Filter\" onClick={() => false} />\n </Tooltip>\n <NavButton icon='search' text=\"Search\" onClick={() => false} />\n </ButtonGroup>\n <ButtonGroup align='end' spaces='no-space'>\n <NavButton icon='list-plus' text=\"Add to list\" onClick={() => false} />\n <Tooltip text='More actions' flow='down'>\n <NavButton icon='dots-vertical' text=\"More actions\" onClick={() => false} />\n </Tooltip>\n <Tooltip text='Send to / Publish' flow='left'>\n <NavButton icon='expand-thin' text='Send to / Publish' type='highlight' onClick={() => false} />\n </Tooltip>\n </ButtonGroup>\n </SubNav> \n ")),
130807
+ React.createElement("h3", { className: "docs-page__h3" }, "Styles / Types"),
130808
+ React.createElement(Markup.ReactMarkup, null,
130809
+ React.createElement(Markup.ReactMarkupPreview, null,
130810
+ React.createElement(app_typescript_1.SubNav, { zIndex: 2 },
130811
+ React.createElement(app_typescript_1.ButtonGroup, { align: 'start', spaces: 'no-space' },
130812
+ React.createElement(app_typescript_1.NavButton, { icon: 'adjust', type: 'default', text: "Adjust", onClick: function () { return false; } }),
130813
+ React.createElement(app_typescript_1.NavButton, { icon: 'eye-open', type: 'darker', text: "View", onClick: function () { return false; } }),
130814
+ React.createElement(app_typescript_1.NavButton, { icon: 'refresh', type: 'dark', text: "Refresh", onClick: function () { return false; } })),
130815
+ React.createElement(app_typescript_1.ButtonGroup, { align: 'end', spaces: 'no-space' },
130816
+ React.createElement(app_typescript_1.NavButton, { icon: 'edit-line', type: 'primary', text: "Edit", onClick: function () { return false; } }),
130817
+ React.createElement(app_typescript_1.NavButton, { icon: 'expand-thin', type: 'highlight', text: "Expand", onClick: function () { return false; } })))),
130818
+ React.createElement(Markup.ReactMarkupCode, null, "\n <SubNav zIndex={2}>\n <ButtonGroup align='start' spaces='no-space'>\n <NavButton icon='adjust' type='default' text=\"Adjust\" onClick={() => false} />\n <NavButton icon='eye-open' type='darker' text=\"View\" onClick={() => false} />\n <NavButton icon='refresh' type='dark' text=\"Refresh\" onClick={() => false} />\n </ButtonGroup>\n <ButtonGroup align='end' spaces='no-space'>\n <NavButton icon='edit-line' type='primary' text=\"Edit\" onClick={() => false} />\n <NavButton icon='expand-thin' type='highlight' text=\"Expand\" onClick={() => false} />\n </ButtonGroup>\n </SubNav> \n ")),
130803
130819
  React.createElement("h3", { className: "docs-page__h3" }, "Props"),
130804
130820
  React.createElement(app_typescript_1.PropsList, null,
130805
130821
  React.createElement(app_typescript_1.Prop, { name: 'icon', isRequired: false, type: 'string', default: '/', description: 'Icon class name without the icon- part.' }),
130806
130822
  React.createElement(app_typescript_1.Prop, { name: 'text', isRequired: false, type: 'string', default: '/', description: 'Defines the value for aria-label, for screen-readers accessibility.' }),
130807
130823
  React.createElement(app_typescript_1.Prop, { name: 'iconSize', isRequired: false, type: 'small | big', default: 'small', description: 'Specifies a small or big button' }),
130808
- React.createElement(app_typescript_1.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.).' }),
130824
+ React.createElement(app_typescript_1.Prop, { name: 'type', isRequired: false, type: 'default | primary | highlight | darker | dark', default: 'default', description: 'Default + colour variations.' }),
130809
130825
  React.createElement(app_typescript_1.Prop, { name: 'state', isRequired: false, type: 'normal | active', default: 'normal', description: 'Defines the optional state of the button (e.g. active)' }),
130810
130826
  React.createElement(app_typescript_1.Prop, { name: 'theme', isRequired: false, type: 'light | dark', default: 'light', description: 'Styles nav button for diffrent background.' }),
130811
130827
  React.createElement(app_typescript_1.Prop, { name: 'value', isRequired: false, type: 'button | submit | reset', default: 'button', description: 'Specifies a value of nav button' }))));
@@ -138292,7 +138308,7 @@ exports.WithSizeObserverDocs = WithSizeObserverDocs;
138292
138308
  /* 651 */
138293
138309
  /***/ (function(module, exports) {
138294
138310
 
138295
- module.exports = {"name":"superdesk-ui-framework","version":"3.0.1-beta.28","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build"},"devDependencies":{"@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/lodash":"^4.14.161","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"5.14.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","lodash":"4.17.21","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","tslint":"^5.18.0","typescript":"4.5.2","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","moment":"^2.29.3","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
138311
+ module.exports = {"name":"superdesk-ui-framework","version":"3.0.1-beta.30","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build"},"devDependencies":{"@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/lodash":"^4.14.161","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"5.14.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","lodash":"4.17.21","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","tslint":"^5.18.0","typescript":"4.5.2","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","moment":"^2.29.3","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
138296
138312
 
138297
138313
  /***/ }),
138298
138314
  /* 652 */
@@ -56,13 +56,43 @@ export default class NavButtonsDoc extends React.Component {
56
56
  `}
57
57
  </Markup.ReactMarkupCode>
58
58
  </Markup.ReactMarkup>
59
+ <h3 className="docs-page__h3">Styles / Types</h3>
60
+ <Markup.ReactMarkup>
61
+ <Markup.ReactMarkupPreview>
62
+ <SubNav zIndex={2}>
63
+ <ButtonGroup align='start' spaces='no-space'>
64
+ <NavButton icon='adjust' type='default' text="Adjust" onClick={() => false} />
65
+ <NavButton icon='eye-open' type='darker' text="View" onClick={() => false} />
66
+ <NavButton icon='refresh' type='dark' text="Refresh" onClick={() => false} />
67
+ </ButtonGroup>
68
+ <ButtonGroup align='end' spaces='no-space'>
69
+ <NavButton icon='edit-line' type='primary' text="Edit" onClick={() => false} />
70
+ <NavButton icon='expand-thin' type='highlight' text="Expand" onClick={() => false} />
71
+ </ButtonGroup>
72
+ </SubNav>
73
+ </Markup.ReactMarkupPreview>
74
+ <Markup.ReactMarkupCode>{`
75
+ <SubNav zIndex={2}>
76
+ <ButtonGroup align='start' spaces='no-space'>
77
+ <NavButton icon='adjust' type='default' text="Adjust" onClick={() => false} />
78
+ <NavButton icon='eye-open' type='darker' text="View" onClick={() => false} />
79
+ <NavButton icon='refresh' type='dark' text="Refresh" onClick={() => false} />
80
+ </ButtonGroup>
81
+ <ButtonGroup align='end' spaces='no-space'>
82
+ <NavButton icon='edit-line' type='primary' text="Edit" onClick={() => false} />
83
+ <NavButton icon='expand-thin' type='highlight' text="Expand" onClick={() => false} />
84
+ </ButtonGroup>
85
+ </SubNav>
86
+ `}
87
+ </Markup.ReactMarkupCode>
88
+ </Markup.ReactMarkup>
59
89
 
60
90
  <h3 className="docs-page__h3">Props</h3>
61
91
  <PropsList>
62
92
  <Prop name='icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.' />
63
93
  <Prop name='text' isRequired={false} type='string' default='/' description='Defines the value for aria-label, for screen-readers accessibility.' />
64
94
  <Prop name='iconSize' isRequired={false} type='small | big' default='small' description='Specifies a small or big button' />
65
- <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.).' />
95
+ <Prop name='type' isRequired={false} type='default | primary | highlight | darker | dark' default='default' description='Default + colour variations.' />
66
96
  <Prop name='state' isRequired={false} type='normal | active' default='normal' description='Defines the optional state of the button (e.g. active)' />
67
97
  <Prop name='theme' isRequired={false} type='light | dark' default='light' description='Styles nav button for diffrent background.' />
68
98
  <Prop name='value' isRequired={false} type='button | submit | reset' default='button' description='Specifies a value of nav button' />