superdesk-ui-framework 3.1.12 → 3.1.13

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 (48) hide show
  1. package/app/styles/_helpers.scss +17 -0
  2. package/app/styles/_toggle-box.scss +45 -28
  3. package/app/styles/form-elements/_inputs.scss +14 -0
  4. package/app/styles/grids/_grid-layout.scss +3 -0
  5. package/app-typescript/components/DatePicker.tsx +6 -0
  6. package/app-typescript/components/Layouts/LayoutContainer.tsx +7 -1
  7. package/app-typescript/components/Layouts/PageLayout.tsx +2 -1
  8. package/app-typescript/components/TimePickerV2.tsx +222 -0
  9. package/app-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx +6 -1
  10. package/app-typescript/components/ToggleBox/SimpleToggleBox.tsx +10 -20
  11. package/app-typescript/components/ToggleBox/index.tsx +3 -1
  12. package/app-typescript/components/TreeMenu.tsx +8 -5
  13. package/app-typescript/components/TreeSelect/TreeSelect.tsx +13 -12
  14. package/app-typescript/components/TreeSelect/TreeSelectItem.tsx +11 -1
  15. package/app-typescript/index.ts +1 -0
  16. package/dist/components/TimePicker.tsx +43 -1
  17. package/dist/components/Togglebox.tsx +19 -4
  18. package/dist/components/TreeMenu.tsx +2 -0
  19. package/dist/components/utilities/TextUtilities.tsx +39 -0
  20. package/dist/design-patterns/ThreePaneLayoutPattern.tsx +1 -1
  21. package/dist/examples.bundle.js +2184 -1924
  22. package/dist/superdesk-ui.bundle.css +72 -20
  23. package/dist/superdesk-ui.bundle.js +1815 -1604
  24. package/dist/vendor.bundle.js +16 -16
  25. package/examples/pages/components/TimePicker.tsx +43 -1
  26. package/examples/pages/components/Togglebox.tsx +19 -4
  27. package/examples/pages/components/TreeMenu.tsx +2 -0
  28. package/examples/pages/components/utilities/TextUtilities.tsx +39 -0
  29. package/examples/pages/design-patterns/ThreePaneLayoutPattern.tsx +1 -1
  30. package/package.json +1 -1
  31. package/react/components/DatePicker.d.ts +3 -0
  32. package/react/components/DatePicker.js +2 -2
  33. package/react/components/Layouts/LayoutContainer.d.ts +1 -0
  34. package/react/components/Layouts/LayoutContainer.js +8 -1
  35. package/react/components/Layouts/PageLayout.d.ts +1 -0
  36. package/react/components/Layouts/PageLayout.js +1 -1
  37. package/react/components/TimePickerV2.d.ts +28 -0
  38. package/react/components/TimePickerV2.js +189 -0
  39. package/react/components/ToggleBox/CustomHeaderToggleBox.d.ts +1 -0
  40. package/react/components/ToggleBox/CustomHeaderToggleBox.js +6 -3
  41. package/react/components/ToggleBox/SimpleToggleBox.js +8 -6
  42. package/react/components/ToggleBox/index.d.ts +2 -1
  43. package/react/components/TreeMenu.js +7 -7
  44. package/react/components/TreeSelect/TreeSelect.js +9 -11
  45. package/react/components/TreeSelect/TreeSelectItem.d.ts +1 -0
  46. package/react/components/TreeSelect/TreeSelectItem.js +7 -4
  47. package/react/index.d.ts +1 -0
  48. package/react/index.js +5 -3
package/dist/superdesk-ui.bundle.css CHANGED
@@ -18548,6 +18548,21 @@ h6 {
18548
18548
  .break-all {
18549
18549
  word-break: break-all; }
18550
18550
 
18551
+ .line-height-1 {
18552
+ line-height: 1; }
18553
+
18554
+ .line-height-xs {
18555
+ line-height: 1.1; }
18556
+
18557
+ .line-height-sm {
18558
+ line-height: 1.2; }
18559
+
18560
+ .line-height-md {
18561
+ line-height: 1.4; }
18562
+
18563
+ .line-height-lg {
18564
+ line-height: 1.5; }
18565
+
18551
18566
  .sd-line-clamp--1,
18552
18567
  .line-clamp-1 {
18553
18568
  overflow: hidden;
@@ -36124,22 +36139,36 @@ a.label {
36124
36139
 
36125
36140
  .toggle-box {
36126
36141
  position: relative;
36127
- align-self: stretch; }
36128
- .toggle-box.hidden .toggle-box__chevron i {
36129
- transform: rotate(0); }
36130
- .toggle-box.hidden .toggle-box__chevron--circle {
36131
- background-color: var(--sd-colour-btn-bg-neutral); }
36132
- .toggle-box.hidden .toggle-box__chevron--circle i {
36133
- color: var(--color-text-light); }
36134
- .toggle-box.hidden .toggle-box__content-wraper {
36135
- max-height: 0;
36136
- transition: all ease-out .5s; }
36137
- .toggle-box.hidden .toggle-box__header {
36138
- margin-block-end: 0; }
36142
+ display: grid;
36143
+ grid-template-columns: 1fr;
36144
+ grid-template-rows: auto 1fr auto;
36145
+ transition: grid-template-rows 0.2s ease; }
36146
+ .toggle-box.hidden {
36147
+ grid-template-rows: auto 0fr auto;
36148
+ transition: grid-template-rows 0.2s ease; }
36149
+ .toggle-box.hidden .toggle-box__chevron i {
36150
+ transform: rotate(0); }
36151
+ .toggle-box.hidden .toggle-box__chevron--circle {
36152
+ background-color: var(--sd-colour-btn-bg-neutral); }
36153
+ .toggle-box.hidden .toggle-box__chevron--circle i {
36154
+ color: var(--color-text-light); }
36155
+ .toggle-box.hidden .toggle-box__content-wraper {
36156
+ transition: all ease-out .5s; }
36157
+ .toggle-box.open .toggle-box__content {
36158
+ animation: fadeIn 0.3s ease-in 0s 1; }
36139
36159
  .toggle-box.toggle-box--circle .toggle-box__chevron {
36140
36160
  background-color: var(--sd-colour-btn-bg-neutral); }
36141
36161
  .toggle-box.toggle-box--circle .toggle-box__chevron i {
36142
36162
  color: var(--sd-colour-btn-txt-neutral); }
36163
+ .toggle-box.toggle-box--large-title .toggle-box__header .toggle-box__label,
36164
+ .toggle-box.toggle-box--large-title a.toggle-box__header .toggle-box__label {
36165
+ font-size: var(--text-size-medium);
36166
+ color: var(--color-text);
36167
+ text-transform: none;
36168
+ font-weight: 500; }
36169
+ .toggle-box.toggle-box--large-title .toggle-box__header:hover .toggle-box__label,
36170
+ .toggle-box.toggle-box--large-title a.toggle-box__header:hover .toggle-box__label {
36171
+ color: var(--sd-colour-interactive); }
36143
36172
  .toggle-box.toggle-box--marg-b10 {
36144
36173
  margin-block-end: 1rem; }
36145
36174
  .toggle-box.toggle-box--margin-none {
@@ -36162,21 +36191,23 @@ a.label {
36162
36191
 
36163
36192
  .toggle-box__header,
36164
36193
  a.toggle-box__header {
36194
+ grid-row: 1 / 2;
36165
36195
  display: flex;
36166
36196
  cursor: pointer;
36167
- margin-block-end: 1.8rem;
36168
36197
  align-items: center;
36169
- text-decoration: none !important; }
36198
+ text-decoration: none !important;
36199
+ align-self: flex-start; }
36170
36200
  .toggle-box__header .toggle-box__chevron i,
36171
36201
  a.toggle-box__header .toggle-box__chevron i {
36172
36202
  transition: all .3s;
36173
36203
  transform: rotate(90deg); }
36174
36204
  .toggle-box__header .toggle-box__label,
36175
36205
  a.toggle-box__header .toggle-box__label {
36176
- font-size: 1.2rem;
36177
- padding: 0 1rem 0 0.8rem;
36178
- color: var(--color-label-text);
36179
- text-transform: uppercase; }
36206
+ font-size: var(--text-size-x-small);
36207
+ padding: 0 var(--space--2) 0 var(--space--1);
36208
+ color: var(--color-text-light);
36209
+ text-transform: uppercase;
36210
+ transition: color 0.2s ease; }
36180
36211
  .toggle-box__header .toggle-box__line,
36181
36212
  a.toggle-box__header .toggle-box__line {
36182
36213
  flex: 1;
@@ -36201,10 +36232,18 @@ a.toggle-box__header {
36201
36232
  text-decoration: none !important; }
36202
36233
 
36203
36234
  .toggle-box__content-wraper {
36204
- transition: all ease-out .5s; }
36235
+ grid-row: 2 / 3;
36236
+ transition: grid-template-rows 0.2s ease;
36237
+ display: flex;
36238
+ flex-direction: column;
36239
+ justify-content: flex-start;
36240
+ align-items: stretch;
36241
+ overflow: hidden; }
36205
36242
 
36206
36243
  .toggle-box__content {
36207
- animation: fadeIn 0.3s ease-in 0s 1; }
36244
+ overflow-y: auto;
36245
+ padding-block-start: 1.8rem;
36246
+ flex: 1; }
36208
36247
 
36209
36248
  .toggle-box__button {
36210
36249
  color: #8c97a6;
@@ -41840,6 +41879,8 @@ input.sd-inset-search__input {
41840
41879
  grid-template-columns: [slideInLeft] auto [mainContent] 1fr [slideInRight] auto [overlayContainer] 0;
41841
41880
  grid-template-rows: [headerToolbar] auto [contentBlock] 1fr;
41842
41881
  overflow: auto; }
41882
+ .sd-main-content-grid.sd-main-content-grid--full-height {
41883
+ height: 100%; }
41843
41884
 
41844
41885
  .sd-main-content-grid__header {
41845
41886
  grid-column: 1/4;
@@ -51153,6 +51194,17 @@ textarea.sd-media-carousel__media-title {
51153
51194
  50% {
51154
51195
  opacity: 0; } }
51155
51196
 
51197
+ .sd__input__time-picker-v2 {
51198
+ display: flex; }
51199
+
51200
+ .input-wrapper__time-picker-v2 {
51201
+ display: flex;
51202
+ align-items: center; }
51203
+
51204
+ .time-picker-v2-suffix {
51205
+ padding: 0 8px;
51206
+ font-size: 1.6rem; }
51207
+
51156
51208
  .sd-toggle, .sd-switch {
51157
51209
  display: inline-block;
51158
51210
  flex-shrink: 0;