superdesk-ui-framework 3.0.0-rc12 → 3.0.0

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 (107) hide show
  1. package/.vscode/settings.json +5 -0
  2. package/app/fonts/sd_icons.eot +0 -0
  3. package/app/fonts/sd_icons.svg +1 -0
  4. package/app/fonts/sd_icons.ttf +0 -0
  5. package/app/fonts/sd_icons.woff +0 -0
  6. package/app/styles/_icon-font.scss +1 -0
  7. package/app/styles/_master-desk.scss +2 -2
  8. package/app/styles/_modals.scss +1 -0
  9. package/app/styles/app.scss +1 -0
  10. package/app/styles/components/_sd-pagination.scss +41 -0
  11. package/app/styles/grids/_grid-layout.scss +4 -14
  12. package/app/styles/menus/_sd-sidebar-menu.scss +1 -1
  13. package/app/styles/primereact/_pr-datepicker.scss +12 -0
  14. package/app/styles/primereact/_pr-dialog.scss +4 -0
  15. package/app/styles/variables/_colors.scss +37 -37
  16. package/app/template/search-handler.html +2 -2
  17. package/app-typescript/components/DatePicker.tsx +8 -9
  18. package/app-typescript/components/Layouts/CoreLayout.tsx +2 -1
  19. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +4 -1
  20. package/app-typescript/components/Lists/ContentList.tsx +3 -2
  21. package/app-typescript/components/Lists/TableList.tsx +17 -8
  22. package/app-typescript/components/Modal.tsx +6 -2
  23. package/app-typescript/components/Navigation/SideBarMenu.tsx +30 -4
  24. package/app-typescript/dist/components/Alert.d.ts +16 -0
  25. package/app-typescript/dist/components/Autocomplete.d.ts +48 -0
  26. package/app-typescript/dist/components/Avatar.d.ts +33 -0
  27. package/app-typescript/dist/components/Badge.d.ts +13 -0
  28. package/app-typescript/dist/components/Button.d.ts +23 -0
  29. package/app-typescript/dist/components/ButtonGroup.d.ts +12 -0
  30. package/app-typescript/dist/components/CheckButtonGroup.d.ts +11 -0
  31. package/app-typescript/dist/components/CheckGroup.d.ts +9 -0
  32. package/app-typescript/dist/components/Checkbox.d.ts +19 -0
  33. package/app-typescript/dist/components/CheckboxButton.d.ts +19 -0
  34. package/app-typescript/dist/components/DatePicker.d.ts +37 -0
  35. package/app-typescript/dist/components/Divider.d.ts +9 -0
  36. package/app-typescript/dist/components/DonutChart.d.ts +12 -0
  37. package/app-typescript/dist/components/Dropdown.d.ts +28 -0
  38. package/app-typescript/dist/components/DropdownFirst.d.ts +42 -0
  39. package/app-typescript/dist/components/EmptyState.d.ts +11 -0
  40. package/app-typescript/dist/components/FormLabel.d.ts +9 -0
  41. package/app-typescript/dist/components/Genie.d.ts +13 -0
  42. package/app-typescript/dist/components/GridItem.d.ts +69 -0
  43. package/app-typescript/dist/components/GridList.d.ts +14 -0
  44. package/app-typescript/dist/components/HeadingText.d.ts +10 -0
  45. package/app-typescript/dist/components/HelloWorld.d.ts +8 -0
  46. package/app-typescript/dist/components/Icon.d.ts +12 -0
  47. package/app-typescript/dist/components/IconButton.d.ts +12 -0
  48. package/app-typescript/dist/components/IconLabel.d.ts +11 -0
  49. package/app-typescript/dist/components/Input.d.ts +24 -0
  50. package/app-typescript/dist/components/Label.d.ts +15 -0
  51. package/app-typescript/dist/components/LeftMenu.d.ts +26 -0
  52. package/app-typescript/dist/components/Loader.d.ts +8 -0
  53. package/app-typescript/dist/components/NavButton.d.ts +15 -0
  54. package/app-typescript/dist/components/Popover.d.ts +13 -0
  55. package/app-typescript/dist/components/PropsList.d.ts +15 -0
  56. package/app-typescript/dist/components/Radio.d.ts +19 -0
  57. package/app-typescript/dist/components/RadioButton.d.ts +20 -0
  58. package/app-typescript/dist/components/Select.d.ts +29 -0
  59. package/app-typescript/dist/components/SelectWithTemplate.d.ts +32 -0
  60. package/app-typescript/dist/components/SlidingToolbar.d.ts +8 -0
  61. package/app-typescript/dist/components/StrechBar.d.ts +4 -0
  62. package/app-typescript/dist/components/SubNav.d.ts +10 -0
  63. package/app-typescript/dist/components/Switch.d.ts +12 -0
  64. package/app-typescript/dist/components/TabCustom.d.ts +25 -0
  65. package/app-typescript/dist/components/TabList.d.ts +22 -0
  66. package/app-typescript/dist/components/Tag.d.ts +9 -0
  67. package/app-typescript/dist/components/TagInput.d.ts +7 -0
  68. package/app-typescript/dist/components/TagInputTest.d.ts +18 -0
  69. package/app-typescript/dist/components/TimePicker.d.ts +11 -0
  70. package/app-typescript/dist/components/Tooltip.d.ts +11 -0
  71. package/app-typescript/dist/components/_Positioner.d.ts +27 -0
  72. package/app-typescript/dist/index.d.ts +56 -0
  73. package/dist/examples.bundle.css +39 -0
  74. package/dist/examples.bundle.js +1905 -1471
  75. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +505 -3
  76. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +12 -9
  77. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +6 -6
  78. package/dist/playgrounds/react-playgrounds/TestGround.tsx +29 -1
  79. package/dist/react/DatePicker.tsx +50 -2
  80. package/dist/react/Modal.tsx +154 -22
  81. package/dist/sd_icons.eot +0 -0
  82. package/dist/sd_icons.svg +1 -0
  83. package/dist/sd_icons.ttf +0 -0
  84. package/dist/sd_icons.woff +0 -0
  85. package/dist/superdesk-ui.bundle.css +175 -21
  86. package/dist/superdesk-ui.bundle.js +1059 -1033
  87. package/dist/vendor.bundle.js +7 -7
  88. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +505 -3
  89. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +12 -9
  90. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +6 -6
  91. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +29 -1
  92. package/examples/pages/react/DatePicker.tsx +50 -2
  93. package/examples/pages/react/Modal.tsx +154 -22
  94. package/package.json +1 -1
  95. package/react/components/DatePicker.d.ts +2 -2
  96. package/react/components/DatePicker.js +3 -3
  97. package/react/components/Layouts/CoreLayout.d.ts +1 -0
  98. package/react/components/Layouts/CoreLayout.js +1 -1
  99. package/react/components/Layouts/CoreLayoutMain.d.ts +1 -0
  100. package/react/components/Layouts/CoreLayoutMain.js +1 -1
  101. package/react/components/Lists/ContentList.js +3 -2
  102. package/react/components/Lists/TableList.js +12 -4
  103. package/react/components/Modal.d.ts +2 -0
  104. package/react/components/Modal.js +3 -3
  105. package/react/components/Navigation/SideBarMenu.d.ts +6 -0
  106. package/react/components/Navigation/SideBarMenu.js +19 -2
  107. package/yarn-error.log +111 -0
@@ -9783,6 +9783,45 @@
9783
9783
  --icon-base-size: 64px
9784
9784
  ; }
9785
9785
 
9786
+ .icon-text-block:before {
9787
+ content: ""; }
9788
+
9789
+ .icon-text-block.color--default {
9790
+ color: var(--color-icon-default); }
9791
+
9792
+ .icon-text-block.color--primary {
9793
+ color: var(--sd-colour-primary) !important; }
9794
+
9795
+ .icon-text-block.color--success {
9796
+ color: var(--sd-colour-success) !important; }
9797
+
9798
+ .icon-text-block.color--warning {
9799
+ color: var(--sd-colour-warning) !important; }
9800
+
9801
+ .icon-text-block.color--alert {
9802
+ color: var(--sd-colour-alert) !important; }
9803
+
9804
+ .icon-text-block.color--highlight {
9805
+ color: var(--sd-colour-highlight) !important; }
9806
+
9807
+ .icon-text-block.color--light {
9808
+ color: var(--color-text-lighter) !important; }
9809
+
9810
+ .icon-text-block.color--white {
9811
+ color: #e2e5e9 !important; }
9812
+
9813
+ .icon-text-block.scale--2x {
9814
+ --icon-base-size: 32px
9815
+ ; }
9816
+
9817
+ .icon-text-block.scale--3x {
9818
+ --icon-base-size: 48px
9819
+ ; }
9820
+
9821
+ .icon-text-block.scale--4x {
9822
+ --icon-base-size: 64px
9823
+ ; }
9824
+
9786
9825
  .icn-mix {
9787
9826
  position: relative;
9788
9827
  display: inline-flex !important;
@@ -28070,6 +28109,45 @@ a.label {
28070
28109
  --icon-base-size: 64px
28071
28110
  ; }
28072
28111
 
28112
+ .icon-text-block:before {
28113
+ content: ""; }
28114
+
28115
+ .icon-text-block.color--default {
28116
+ color: var(--color-icon-default); }
28117
+
28118
+ .icon-text-block.color--primary {
28119
+ color: var(--sd-colour-primary) !important; }
28120
+
28121
+ .icon-text-block.color--success {
28122
+ color: var(--sd-colour-success) !important; }
28123
+
28124
+ .icon-text-block.color--warning {
28125
+ color: var(--sd-colour-warning) !important; }
28126
+
28127
+ .icon-text-block.color--alert {
28128
+ color: var(--sd-colour-alert) !important; }
28129
+
28130
+ .icon-text-block.color--highlight {
28131
+ color: var(--sd-colour-highlight) !important; }
28132
+
28133
+ .icon-text-block.color--light {
28134
+ color: var(--color-text-lighter) !important; }
28135
+
28136
+ .icon-text-block.color--white {
28137
+ color: #e2e5e9 !important; }
28138
+
28139
+ .icon-text-block.scale--2x {
28140
+ --icon-base-size: 32px
28141
+ ; }
28142
+
28143
+ .icon-text-block.scale--3x {
28144
+ --icon-base-size: 48px
28145
+ ; }
28146
+
28147
+ .icon-text-block.scale--4x {
28148
+ --icon-base-size: 64px
28149
+ ; }
28150
+
28073
28151
  .icn-mix {
28074
28152
  position: relative;
28075
28153
  display: inline-flex !important;
@@ -32290,7 +32368,8 @@ a.label {
32290
32368
  padding: 0.8rem 1.6rem;
32291
32369
  border-top: 1px solid var(--sd-colour-line--x-light);
32292
32370
  text-align: end;
32293
- min-height: 48px; }
32371
+ min-height: 48px;
32372
+ display: flex; }
32294
32373
  .modal p {
32295
32374
  margin: 0 0 1em 0; }
32296
32375
 
@@ -34464,13 +34543,13 @@ tags-input,
34464
34543
  line-height: 1.4;
34465
34544
  text-transform: uppercase;
34466
34545
  font-weight: 400;
34467
- color: #788597;
34546
+ color: var(--sd-colour-bg--10);
34468
34547
  max-width: 10rem; }
34469
34548
  .sd-board__count-label--l {
34470
34549
  max-width: 14rem; }
34471
34550
  .sd-board__count-label strong {
34472
34551
  font-weight: 500;
34473
- color: #49535f;
34552
+ color: var(--sd-colour-bg--07);
34474
34553
  font-size: 1.3rem; }
34475
34554
 
34476
34555
  .sd-board__doughnut-chart {
@@ -39046,7 +39125,7 @@ input.sd-inset-search__input {
39046
39125
  top: 0;
39047
39126
  bottom: 0;
39048
39127
  width: 0;
39049
- background: #ededed;
39128
+ background: var(--sd-colour-panel-bg--100);
39050
39129
  color: var(--color-text);
39051
39130
  overflow: hidden;
39052
39131
  transition: all 0.1s ease-out; }
@@ -39060,13 +39139,6 @@ input.sd-inset-search__input {
39060
39139
  .sd-overlay-panel-2--right {
39061
39140
  box-shadow: -2px 0px 0px 0px #666666, -2px 0px 12px 0px rgba(0, 0, 0, 0.3);
39062
39141
  right: 0; }
39063
- .sd-overlay-panel-2--dark-ui {
39064
- background-color: #3b3b3b;
39065
- color: white; }
39066
- .sd-overlay-panel-2--dark-ui.sd-overlay-panel-2--left {
39067
- box-shadow: 2px 0px 12px 0px rgba(0, 0, 0, 0.3); }
39068
- .sd-overlay-panel-2--dark-ui.sd-overlay-panel-2--right {
39069
- box-shadow: -2px 0px 12px 0px rgba(0, 0, 0, 0.3); }
39070
39142
  .sd-overlay-panel-2--open {
39071
39143
  width: 32.8rem;
39072
39144
  overflow: auto; }
@@ -45644,6 +45716,39 @@ textarea.sd-media-carousel__media-title {
45644
45716
  position: relative;
45645
45717
  padding: 1.6rem; }
45646
45718
 
45719
+ .sd-pagination {
45720
+ display: flex;
45721
+ align-items: center;
45722
+ justify-content: center;
45723
+ gap: var(--gap--small); }
45724
+ .sd-pagination--align-start {
45725
+ justify-content: flex-start; }
45726
+ .sd-pagination--align-end {
45727
+ justify-content: flex-end; }
45728
+
45729
+ .sd-pagination__item {
45730
+ display: flex;
45731
+ align-items: center;
45732
+ justify-content: center;
45733
+ height: 3.2rem;
45734
+ min-width: 3.2rem;
45735
+ border-radius: var(--b-radius--full);
45736
+ transition: all 0.2s ease;
45737
+ border: 1px solid transparent; }
45738
+ .sd-pagination__item:hover {
45739
+ border: 1px solid var(--sd-colour-interactive--alpha-30); }
45740
+ .sd-pagination__item:active {
45741
+ background-color: var(--sd-colour-interactive--alpha-10);
45742
+ border: 1px solid var(--sd-colour-interactive); }
45743
+ .sd-pagination__item--active {
45744
+ background-color: var(--sd-colour-interactive--alpha-10);
45745
+ color: var(--sd-colour-interactive); }
45746
+ .sd-pagination__item:disabled, .sd-pagination__item--disabled {
45747
+ opacity: 0.5;
45748
+ pointer-events: none; }
45749
+ .sd-pagination__item--more {
45750
+ pointer-events: none; }
45751
+
45647
45752
  .dropdown {
45648
45753
  position: relative;
45649
45754
  display: inline-block;
@@ -48434,23 +48539,23 @@ label + .sd-radio {
48434
48539
  left: 3rem;
48435
48540
  transition: left 0.2s ease-out, transform 0.2s; }
48436
48541
 
48437
- .authoring-active .sd-sidebar-menu__btn--active .sd-sidebar-menu__main-icon, .authoring-active .sd-sidebar-menu__btn--active .sd-sidebar-menu__helper-icon {
48542
+ .authoring-active__item .sd-sidebar-menu__btn--active .sd-sidebar-menu__main-icon, .authoring-active__item .sd-sidebar-menu__btn--active .sd-sidebar-menu__helper-icon {
48438
48543
  color: #fff; }
48439
48544
 
48440
- .authoring-active .sd-sidebar-menu__btn--active:hover .sd-sidebar-menu__main-icon {
48545
+ .authoring-active__item .sd-sidebar-menu__btn--active:hover .sd-sidebar-menu__main-icon {
48441
48546
  left: -3rem; }
48442
48547
 
48443
- .authoring-active .sd-sidebar-menu__btn--active:hover .sd-sidebar-menu__helper-icon {
48548
+ .authoring-active__item .sd-sidebar-menu__btn--active:hover .sd-sidebar-menu__helper-icon {
48444
48549
  left: 0.5rem; }
48445
48550
 
48446
- .authoring-active.list-hidden .sd-sidebar-menu__btn--active .sd-sidebar-menu__helper-icon {
48551
+ .authoring-active__item.list-hidden .sd-sidebar-menu__btn--active .sd-sidebar-menu__helper-icon {
48447
48552
  transform: rotate(180deg);
48448
48553
  left: -3rem; }
48449
48554
 
48450
- .authoring-active.list-hidden .sd-sidebar-menu__btn--active:hover .sd-sidebar-menu__main-icon {
48555
+ .authoring-active__item.list-hidden .sd-sidebar-menu__btn--active:hover .sd-sidebar-menu__main-icon {
48451
48556
  left: 4rem; }
48452
48557
 
48453
- .authoring-active.list-hidden .sd-sidebar-menu__btn--active:hover .sd-sidebar-menu__helper-icon {
48558
+ .authoring-active__item.list-hidden .sd-sidebar-menu__btn--active:hover .sd-sidebar-menu__helper-icon {
48454
48559
  left: 0.5rem; }
48455
48560
 
48456
48561
  .sd-sidetab-menu {
@@ -59247,6 +59352,45 @@ i.sd-sidetab-menu__helper-icon {
59247
59352
  --icon-base-size: 64px
59248
59353
  ; }
59249
59354
 
59355
+ .icon-text-block:before {
59356
+ content: ""; }
59357
+
59358
+ .icon-text-block.color--default {
59359
+ color: var(--color-icon-default); }
59360
+
59361
+ .icon-text-block.color--primary {
59362
+ color: var(--sd-colour-primary) !important; }
59363
+
59364
+ .icon-text-block.color--success {
59365
+ color: var(--sd-colour-success) !important; }
59366
+
59367
+ .icon-text-block.color--warning {
59368
+ color: var(--sd-colour-warning) !important; }
59369
+
59370
+ .icon-text-block.color--alert {
59371
+ color: var(--sd-colour-alert) !important; }
59372
+
59373
+ .icon-text-block.color--highlight {
59374
+ color: var(--sd-colour-highlight) !important; }
59375
+
59376
+ .icon-text-block.color--light {
59377
+ color: var(--color-text-lighter) !important; }
59378
+
59379
+ .icon-text-block.color--white {
59380
+ color: #e2e5e9 !important; }
59381
+
59382
+ .icon-text-block.scale--2x {
59383
+ --icon-base-size: 32px
59384
+ ; }
59385
+
59386
+ .icon-text-block.scale--3x {
59387
+ --icon-base-size: 48px
59388
+ ; }
59389
+
59390
+ .icon-text-block.scale--4x {
59391
+ --icon-base-size: 64px
59392
+ ; }
59393
+
59250
59394
  .icn-mix {
59251
59395
  position: relative;
59252
59396
  display: inline-flex !important;
@@ -60266,6 +60410,15 @@ i.sd-sidetab-menu__helper-icon {
60266
60410
  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible [class^="icon-"],
60267
60411
  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible [class*=" icon-"] {
60268
60412
  opacity: 1; }
60413
+ .p-datepicker .p-datepicker-header .datepicker-header-toolbar {
60414
+ width: 100%;
60415
+ display: flex;
60416
+ justify-content: center;
60417
+ align-items: center;
60418
+ margin-bottom: 16px;
60419
+ gap: 0.8rem; }
60420
+ .p-datepicker .p-datepicker-header .datepicker-header-toolbar button {
60421
+ flex: 1 1; }
60269
60422
  .p-datepicker table {
60270
60423
  border: none; }
60271
60424
 
@@ -60520,7 +60673,8 @@ i.sd-sidetab-menu__helper-icon {
60520
60673
  height: 100%; }
60521
60674
 
60522
60675
  .p-dialog-maximized .p-dialog-content {
60523
- flex-grow: 1; }
60676
+ flex-grow: 1;
60677
+ width: 100%; }
60524
60678
 
60525
60679
  /* Position */
60526
60680
  .p-dialog-left {
@@ -60667,13 +60821,13 @@ i.sd-sidetab-menu__helper-icon {
60667
60821
  .p-dialog-content--l-padding {
60668
60822
  padding: 3.2rem; }
60669
60823
 
60670
- .p-dialog-content--default {
60824
+ .p-dialog-content-bg--default {
60671
60825
  background-color: transparent !important; }
60672
60826
 
60673
- .p-dialog-content--dark {
60827
+ .p-dialog-content-bg--dark {
60674
60828
  background-color: var(--sd-colour-panel-bg--200) !important; }
60675
60829
 
60676
- .p-dialog-content--medium {
60830
+ .p-dialog-content-bg--medium {
60677
60831
  background-color: var(--sd-colour-panel-bg--100) !important; }
60678
60832
 
60679
60833
  .p-dialog-content .sd-main-content-grid {