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

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 (97) 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 +10 -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/primereact/_pr-dialog.scss +1 -0
  18. package/app/styles/primereact/_pr-menu.scss +6 -5
  19. package/app-typescript/components/DurationInput.tsx +11 -17
  20. package/app-typescript/components/Form/FormLabel.tsx +8 -1
  21. package/app-typescript/components/Form/InputBase.tsx +12 -2
  22. package/dist/examples.bundle.css +8 -8
  23. package/dist/examples.bundle.js +860 -841
  24. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +1 -1
  25. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +2 -1
  26. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +11 -2
  27. package/dist/playgrounds/react-playgrounds/TestGround.tsx +198 -25
  28. package/dist/react/ContentDivider.tsx +4 -4
  29. package/dist/react/Inputs.tsx +1 -7
  30. package/dist/react/Togglebox.tsx +1 -1
  31. package/dist/superdesk-ui.bundle.css +457 -175
  32. package/dist/superdesk-ui.bundle.js +586 -672
  33. package/dist/vendor.bundle.js +2 -2
  34. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +1 -1
  35. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +2 -1
  36. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +11 -2
  37. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +198 -25
  38. package/examples/pages/react/ContentDivider.tsx +4 -4
  39. package/examples/pages/react/Inputs.tsx +1 -7
  40. package/examples/pages/react/Togglebox.tsx +1 -1
  41. package/package.json +1 -1
  42. package/react/components/DurationInput.js +13 -18
  43. package/react/components/Form/FormLabel.d.ts +4 -1
  44. package/react/components/Form/FormLabel.js +9 -3
  45. package/react/components/Form/InputBase.d.ts +0 -1
  46. package/react/components/Form/InputBase.js +15 -1
  47. package/.vscode/settings.json +0 -5
  48. package/app-typescript/dist/components/Alert.d.ts +0 -16
  49. package/app-typescript/dist/components/Autocomplete.d.ts +0 -48
  50. package/app-typescript/dist/components/Avatar.d.ts +0 -33
  51. package/app-typescript/dist/components/Badge.d.ts +0 -13
  52. package/app-typescript/dist/components/Button.d.ts +0 -23
  53. package/app-typescript/dist/components/ButtonGroup.d.ts +0 -12
  54. package/app-typescript/dist/components/CheckButtonGroup.d.ts +0 -11
  55. package/app-typescript/dist/components/CheckGroup.d.ts +0 -9
  56. package/app-typescript/dist/components/Checkbox.d.ts +0 -19
  57. package/app-typescript/dist/components/CheckboxButton.d.ts +0 -19
  58. package/app-typescript/dist/components/DatePicker.d.ts +0 -37
  59. package/app-typescript/dist/components/Divider.d.ts +0 -9
  60. package/app-typescript/dist/components/DonutChart.d.ts +0 -12
  61. package/app-typescript/dist/components/Dropdown.d.ts +0 -28
  62. package/app-typescript/dist/components/DropdownFirst.d.ts +0 -42
  63. package/app-typescript/dist/components/EmptyState.d.ts +0 -11
  64. package/app-typescript/dist/components/FormLabel.d.ts +0 -9
  65. package/app-typescript/dist/components/Genie.d.ts +0 -13
  66. package/app-typescript/dist/components/GridItem.d.ts +0 -69
  67. package/app-typescript/dist/components/GridList.d.ts +0 -14
  68. package/app-typescript/dist/components/HeadingText.d.ts +0 -10
  69. package/app-typescript/dist/components/HelloWorld.d.ts +0 -8
  70. package/app-typescript/dist/components/Icon.d.ts +0 -12
  71. package/app-typescript/dist/components/IconButton.d.ts +0 -12
  72. package/app-typescript/dist/components/IconLabel.d.ts +0 -11
  73. package/app-typescript/dist/components/Input.d.ts +0 -24
  74. package/app-typescript/dist/components/Label.d.ts +0 -15
  75. package/app-typescript/dist/components/LeftMenu.d.ts +0 -26
  76. package/app-typescript/dist/components/Loader.d.ts +0 -8
  77. package/app-typescript/dist/components/NavButton.d.ts +0 -15
  78. package/app-typescript/dist/components/Popover.d.ts +0 -13
  79. package/app-typescript/dist/components/PropsList.d.ts +0 -15
  80. package/app-typescript/dist/components/Radio.d.ts +0 -19
  81. package/app-typescript/dist/components/RadioButton.d.ts +0 -20
  82. package/app-typescript/dist/components/Select.d.ts +0 -29
  83. package/app-typescript/dist/components/SelectWithTemplate.d.ts +0 -32
  84. package/app-typescript/dist/components/SlidingToolbar.d.ts +0 -8
  85. package/app-typescript/dist/components/StrechBar.d.ts +0 -4
  86. package/app-typescript/dist/components/SubNav.d.ts +0 -10
  87. package/app-typescript/dist/components/Switch.d.ts +0 -12
  88. package/app-typescript/dist/components/TabCustom.d.ts +0 -25
  89. package/app-typescript/dist/components/TabList.d.ts +0 -22
  90. package/app-typescript/dist/components/Tag.d.ts +0 -9
  91. package/app-typescript/dist/components/TagInput.d.ts +0 -7
  92. package/app-typescript/dist/components/TagInputTest.d.ts +0 -18
  93. package/app-typescript/dist/components/TimePicker.d.ts +0 -11
  94. package/app-typescript/dist/components/Tooltip.d.ts +0 -11
  95. package/app-typescript/dist/components/_Positioner.d.ts +0 -27
  96. package/app-typescript/dist/index.d.ts +0 -56
  97. package/yarn-error.log +0 -111
@@ -14,6 +14,7 @@
14
14
  height: $form-input-height;
15
15
  border-radius: $border-radius__base--x-small $border-radius__base--x-small 0 0;
16
16
  display: block;
17
+ position: relative;
17
18
  &::placeholder {
18
19
  color: var(--color-text-lighter);
19
20
  font-weight: 400;
@@ -34,7 +35,9 @@
34
35
  }
35
36
 
36
37
  @mixin Form-label-base {
37
- display: inline-block;
38
+ display: inline-flex;
39
+ align-items: flex-start;
40
+ justify-content: flex-start;
38
41
  font-size: 1.1rem;
39
42
  margin: 0 0.5rem 0 0;
40
43
  line-height: 1;
@@ -50,15 +53,15 @@
50
53
  display: inline-flex;
51
54
  align-items: center;
52
55
  justify-content: center;
53
- padding: 2px 8px 1px;
56
+ padding: 2px 8px;
54
57
  font-size: 1.1rem;
55
58
  font-family: $baseFontFamily;
56
59
  font-weight: 400;
57
- line-height: 1.8rem;
60
+ line-height: 2rem;
58
61
  text-transform: uppercase;
59
62
  font-style: normal;
60
63
  letter-spacing: 0.08em;
61
- height: 1.8rem;
64
+ height: 2rem;
62
65
  transition: opacity ease 0.2s;
63
66
  justify-self: start;
64
67
  position: relative;
@@ -87,7 +90,50 @@
87
90
  content: "*";
88
91
  vertical-align: top;
89
92
  font-size: 1.2rem;
90
- padding-left: 0.3rem;
93
+ padding-inline-start: 0.3rem;
94
+ margin-top: -2px
95
+ }
96
+ }
97
+ &--invalid {
98
+ color: $red;
99
+ }
100
+ &--focused {
101
+ color: var(--sd-colour-interactive);
102
+ &.form-label--invalid {
103
+ color: $red;
104
+ }
105
+ }
106
+ &--boxed {
107
+ @include Boxed-label-base;
108
+ &--light {
109
+ background-color: hsla(214, 13%, 30%, 0.4);
110
+ color: hsl(214, 13%, 96%);
111
+ }
112
+ &--dark {
113
+ background-color: hsla(214, 13%, 30%, 0.4);
114
+ color: hsl(214, 13%, 96%);
115
+ }
116
+ &.form-label--required {
117
+ &::after {
118
+ margin-inline-start: 0.2rem;
119
+ color: #e41b21;
120
+ content: "*";
121
+ vertical-align: top;
122
+ font-size: 1.2rem;
123
+ padding-inline-start: 0.3rem;
124
+ position: absolute;
125
+ inset-block-start: -4px;
126
+ inset-inline-end: -10px;
127
+ }
128
+ }
129
+ &.form-label--invalid,
130
+ &.form-label--invalid.form-label--focused {
131
+ background-color: $red;
132
+ color: hsl(214, 13%, 96%);
133
+ }
134
+ &.form-label--focused {
135
+ background-color: var(--sd-colour-interactive);
136
+ color: hsl(214, 13%, 96%);
91
137
  }
92
138
  }
93
139
  }
@@ -118,7 +164,7 @@
118
164
  width: 100%;
119
165
  }
120
166
  &__value {
121
- margin-right: 6px;
167
+ margin-inline-end: 6px;
122
168
  text-transform: uppercase;
123
169
  }
124
170
  input, textarea {
@@ -175,25 +221,30 @@
175
221
  }
176
222
  .sd-line-input__info-left, .sd-line-input__info-right { // use for 1-2 letter info that appear inside inputs ("W" - for width; "H" - for height; px, mm - for units, etc.)
177
223
  position: absolute;
178
- top: 2.5rem;
224
+ inset-block-start: 2.5rem;
179
225
  opacity: 0.3;
180
226
  font-size: 1.5rem;
181
227
  font-weight: 300;
182
228
  }
183
229
  .sd-line-input__info-right {
184
- right: 0.8rem;
230
+ inset-inline-end: 0.8rem;
185
231
  }
186
232
  .sd-line-input__info-left {
187
- left: 0.8rem;
233
+ inset-inline-start: 0.8rem;
188
234
  }
189
235
 
190
236
  .sd-line-input__icon-left, .sd-line-input__icon-right {
191
237
  position: absolute;
192
- top: 1.6rem;
238
+ inset-block-start: 1.6rem;
193
239
  cursor: pointer;
194
240
  }
195
241
  .sd-line-input__icon-right {
196
- right: 0.2rem;
242
+ inset-inline-end: 0.2rem;
243
+ }
244
+ .sd-line-input__icon-right.icn-btn {
245
+ inset-inline-end: 0.2rem;
246
+ inset-block-start: 1.8rem;
247
+ z-index: 1;
197
248
  }
198
249
  .sd-line-input__icon-left {
199
250
  left: 0.2rem;
@@ -202,14 +253,14 @@
202
253
  &.sd-line-input--indent-l30 {
203
254
  input, textarea {
204
255
  &.sd-line-input__input {
205
- padding-left: 3rem;
256
+ padding-inline-start: 3rem;
206
257
  }
207
258
  }
208
259
  }
209
260
  &.sd-line-input--indent-r30 {
210
261
  input, textarea {
211
262
  &.sd-line-input__input {
212
- padding-right: 3rem;
263
+ padding-inline-end: 3rem;
213
264
  }
214
265
  }
215
266
  }
@@ -219,13 +270,13 @@
219
270
  position: absolute;
220
271
  line-height: 100%;
221
272
  margin: 0;
222
- top:0;
273
+ inset-block-start:0;
223
274
  &--required::after {
224
275
  color:$red;
225
276
  content: "*";
226
277
  vertical-align: top;
227
278
  font-size: 1.2rem;
228
- padding-left: 0.3rem;
279
+ padding-inline-start: 0.3rem;
229
280
  }
230
281
 
231
282
  }
@@ -241,15 +292,15 @@
241
292
  }
242
293
  .sd-line-input__hint {
243
294
  position: absolute;
244
- left: 1px;
245
- right: auto;
246
- padding-right: 5.5rem;
295
+ inset-inline-start: 1px;
296
+ inset-inline-end: auto;
297
+ padding-inline-end: 5.5rem;
247
298
  margin-top: 0.4rem;
248
299
  }
249
300
  .sd-line-input__char-count {
250
301
  position: absolute;
251
- right: 1px;
252
- left: auto;
302
+ inset-inline-end: 1px;
303
+ inset-inline-start: auto;
253
304
  margin-top: 0.5rem;
254
305
  font-size: 1.1rem;
255
306
  font-weight: 400;
@@ -347,12 +398,12 @@
347
398
  }
348
399
  &.sd-line-input--no-label {
349
400
  &::after {
350
- top: 1.4rem;
401
+ inset-block-start: 1.4rem;
351
402
  }
352
403
  }
353
404
  &.sd-line-input--label-left {
354
405
  &::after {
355
- top: 1.2rem;
406
+ inset-block-start: 1.2rem;
356
407
  }
357
408
  }
358
409
  }
@@ -368,7 +419,7 @@
368
419
  content: "*";
369
420
  vertical-align: top;
370
421
  font-size: 1.2rem;
371
- padding-left: 0.3rem;
422
+ padding-inline-start: 0.3rem;
372
423
  }
373
424
  }
374
425
  &.sd-line-input--no-label {
@@ -403,14 +454,14 @@
403
454
  position: static;
404
455
  grid-row: 2/3;
405
456
  grid-column: 3/4;
406
- padding-right: 0;
457
+ padding-inline-end: 0;
407
458
  }
408
459
  .sd-line-input__char-count {
409
460
  position: static;
410
461
  grid-row: 2/3;
411
462
  grid-column: 5/4;
412
463
  text-align: end;
413
- padding-left: 1.6rem;
464
+ padding-inline-start: 1.6rem;
414
465
  }
415
466
  }
416
467
  &--label-left-auto {
@@ -430,14 +481,14 @@
430
481
  &--with-icon-l {
431
482
  input, textarea {
432
483
  &.sd-line-input__input {
433
- padding-right: 3rem;
484
+ padding-inline-end: 3rem;
434
485
  }
435
486
  }
436
487
  }
437
488
  .sd-line-input__plus-btn {
438
489
  position: absolute;
439
- top: 1.8rem;
440
- left: 0;
490
+ inset-block-start: 1.8rem;
491
+ inset-inline-start: 0;
441
492
  height: 2.2rem;
442
493
  width: 2.2rem;
443
494
  background-color: var(--sd-colour-interactive--alpha-70);
@@ -463,6 +514,129 @@
463
514
 
464
515
  ///////////////// -------------------- NEW INPUTS --------------------- /////////////////
465
516
 
517
+ .sd-input__input {
518
+ @include Line-input-base;
519
+ &--invalid {
520
+ border-bottom: 1px solid $red;
521
+ background-color: hsla(357, 79%, 50%, 0.075);
522
+ &:hover {
523
+ background-color: hsla(357, 79%, 50%, 0.12);
524
+ border-bottom-color: $red;
525
+ }
526
+ &:focus {
527
+ background-color: hsla(357, 79%, 50%, 0.16);
528
+ border-bottom-color: $red;
529
+ box-shadow: 0 1px 0 0 $red;
530
+ }
531
+ }
532
+ &--disabled {
533
+ opacity: 0.5;
534
+ background-color: var(--color-input-bg);
535
+ border-bottom: 1px dotted var(--color-input-border);
536
+ cursor: not-allowed !important;
537
+ box-shadow: none;
538
+ &:hover {
539
+ background-color: var(--color-input-bg);
540
+ border-bottom-color: var(--color-input-border);
541
+ }
542
+ }
543
+ &--boxed-style {
544
+ border: 0;
545
+ border: 2px solid var(--color-input-border);
546
+ background-color: transparent;
547
+ transition: all ease 0.3s;
548
+ border-radius: var(--b-radius--large);
549
+ display: block;
550
+ &:hover {
551
+ border-color: var(--color-input-border-hover);
552
+ background-color: transparent;
553
+ }
554
+ &:focus {
555
+ outline: none;
556
+ border-color: var(--sd-colour-interactive--alpha-50);
557
+ box-shadow: inset 0 0 0 4px var(--sd-colour-interactive--alpha-20);
558
+ background-color: transparent;
559
+ }
560
+
561
+ &.sd-input__input--disabled {
562
+ border: 2px solid var(--color-input-border);
563
+ // cursor: not-allowed !important;
564
+ box-shadow: none;
565
+ &:hover {
566
+ //background-color: var(--color-input-bg);
567
+ border-color: var(--color-input-border);
568
+ }
569
+ }
570
+
571
+ &.sd-input__input--invalid {
572
+ background-color: hsla(357, 79%, 50%, 0.075);
573
+ border-color: $red;
574
+ &:hover,
575
+ &:focus {
576
+ background-color: hsla(357, 79%, 50%, 0.12);
577
+ box-shadow: none !important;
578
+ }
579
+ }
580
+ }
581
+ &--medium {
582
+ border-radius: var(--b-radius--medium);
583
+ &:focus {
584
+ box-shadow: inset 0 0 0 3px var(--sd-colour-interactive--alpha-20);
585
+ }
586
+ }
587
+ &--large {
588
+ padding: 0 1.6rem;
589
+ min-height: 4.8rem;
590
+ font-size: 2.4rem;
591
+ font-weight: 500;
592
+ }
593
+ &--x-large {
594
+ padding: 0 1.6rem;
595
+ min-height: 5.6rem;
596
+ font-size: 3.2rem;
597
+ font-weight: 500;
598
+ }
599
+ }
600
+
601
+ .sd-input__select {
602
+ display: block;
603
+ position: relative;
604
+ @include Line-input-base;
605
+ padding-inline-end: 2rem;
606
+ min-width: 5rem;
607
+ cursor: pointer;
608
+ option {
609
+ color:inherit;
610
+ font-size: 1.4rem;
611
+ line-height: 2rem;
612
+ background-color: var(--color-dropdown-menu-Bg);
613
+ color: var(--color-dropdown-menu-text);
614
+ }
615
+ }
616
+
617
+ .sd-input__hint,
618
+ .sd-input__message,
619
+ .sd-input__char-count {
620
+ font-size: 1.2rem;
621
+ line-height: 1.4rem;
622
+ transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
623
+ color: var(--color-text-light);
624
+ font-weight: 300;
625
+ letter-spacing: 0.03em;
626
+ display: block;
627
+ }
628
+ .sd-input__char-count {
629
+ font-size: 1.1rem;
630
+ font-weight: 400;
631
+ font-style: italic;
632
+ &--error {
633
+ color: $red;
634
+ }
635
+ }
636
+
637
+
638
+ //----
639
+
466
640
  .sd-input {
467
641
  padding-top: 0;
468
642
  margin: 0;
@@ -475,7 +649,7 @@
475
649
 
476
650
 
477
651
  .sd-input__input {
478
- @include Line-input-base;
652
+ //@include Line-input-base;
479
653
  grid-row: 2/3;
480
654
  grid-column: 2/4;
481
655
  }
@@ -501,21 +675,21 @@
501
675
  }
502
676
  }
503
677
  .sd-input__select {
504
- display: block;
505
- position: relative;
506
- @include Line-input-base;
507
- padding-inline-end: 2rem;
678
+ // display: block;
679
+ // position: relative;
680
+ // @include Line-input-base;
681
+ // padding-inline-end: 2rem;
508
682
  grid-row: 2/3;
509
683
  grid-column: 2/4;
510
- min-width: 5rem;
511
- cursor: pointer;
512
- option {
513
- color:inherit;
514
- font-size: 1.4rem;
515
- line-height: 2rem;
516
- background-color: var(--color-dropdown-menu-Bg);
517
- color: var(--color-dropdown-menu-text);
518
- }
684
+ // min-width: 5rem;
685
+ // cursor: pointer;
686
+ // option {
687
+ // color:inherit;
688
+ // font-size: 1.4rem;
689
+ // line-height: 2rem;
690
+ // background-color: var(--color-dropdown-menu-Bg);
691
+ // color: var(--color-dropdown-menu-text);
692
+ // }
519
693
  }
520
694
  &.sd-input--is-select {
521
695
  &::after {
@@ -556,24 +730,24 @@
556
730
  .sd-input__hint,
557
731
  .sd-input__message,
558
732
  .sd-input__char-count {
559
- font-size: 1.2rem;
560
- line-height: 1.4rem;
561
- transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
562
- color: var(--color-text-light);
563
- font-weight: 300;
733
+ // font-size: 1.2rem;
734
+ // line-height: 1.4rem;
735
+ // transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
736
+ // color: var(--color-text-light);
737
+ // font-weight: 300;
564
738
  margin: 0.5rem 0;
565
- letter-spacing: 0.03em;
566
- display: block;
739
+ // letter-spacing: 0.03em;
740
+ // display: block;
567
741
  }
568
742
  .sd-input__char-count {
569
- font-size: 1.1rem;
570
- font-weight: 400;
571
- font-style: italic;
743
+ // font-size: 1.1rem;
744
+ // font-weight: 400;
745
+ // font-style: italic;
572
746
  grid-row: 3/4;
573
747
  grid-column: 3/4;
574
- &--error {
575
- color: $red;
576
- }
748
+ // &--error {
749
+ // color: $red;
750
+ // }
577
751
  }
578
752
  .sd-input__label {
579
753
  @include Form-label-base;
@@ -661,7 +835,7 @@
661
835
  content: "*";
662
836
  vertical-align: top;
663
837
  font-size: 1.2rem;
664
- padding-left: 0.3rem;
838
+ padding-inline-start: 0.3rem;
665
839
  }
666
840
  .sd-input__label.sd-input__label--boxed::after {
667
841
  position: absolute;
@@ -994,8 +1168,3 @@
994
1168
  opacity: 0;
995
1169
  }
996
1170
  }
997
-
998
- //&--boxed-style
999
-
1000
-
1001
-
@@ -15,7 +15,7 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200);
15
15
  .side-panel__header {
16
16
  grid-column: 1/2;
17
17
  grid-row: 1/2;
18
- z-index: 1;
18
+ z-index: 2;
19
19
  position: relative;
20
20
  min-height: 4.8rem;
21
21
  display: flex;
@@ -2,6 +2,7 @@
2
2
  background-color: hsla(214, 13%, 16%, 0.5) !important;
3
3
  backdrop-filter: blur(1px);
4
4
  -webkit-backdrop-filter: blur(1px);
5
+ z-index: 1000;
5
6
  }
6
7
 
7
8
 
@@ -23,13 +23,14 @@
23
23
  padding: .8rem 1.6rem;
24
24
  min-width: 100px;
25
25
  font-size: 14px;
26
- color: $sd-text;
26
+ color: var(--color-text);
27
+ width: 100%;
27
28
 
28
29
  &:hover, &:focus-visible {
29
30
  background: $sd-colour-background__menu-item--hover;
30
31
  }
31
- }
32
-
33
- .p-menuitem-icon {
34
- margin-right: 0.8rem;
32
+ .p-menuitem-icon {
33
+ margin-right: 0.8rem;
34
+ color: var(--color-icon-default);
35
+ }
35
36
  }
@@ -367,25 +367,19 @@ export function getDurationString(seconds: number, zero?: boolean) {
367
367
  }
368
368
  }
369
369
 
370
- let hour;
371
- let minute;
372
- let second;
370
+ let hour = zeroPad(Math.floor(seconds / 3600));
371
+ let minute = zeroPad(Math.floor((seconds % 3600) / 60));
372
+ let second = zeroPad(Math.floor(seconds % 60));
373
373
 
374
374
  if (zero) {
375
- hour = zeroPad(Math.floor(seconds / 3600));
376
- minute = zeroPad(Math.floor((seconds % 3600) / 60));
377
- second = zeroPad(Math.floor(seconds % 60));
378
- } else {
379
- hour = Math.floor(seconds / 3600);
380
- minute = Math.floor((seconds % 3600) / 60);
381
- second = Math.floor(seconds % 60);
382
- }
383
-
384
- if (Number(hour) === 0 && Number(minute) > 0) {
385
- return `${minute}m ${second}s`;
386
- } else if (Number(hour) === 0 && Number(minute) === 0) {
387
- return `${second}s`;
388
- } else {
389
375
  return `${hour}h ${minute}m ${second}s`;
376
+ } else {
377
+ if (Number(hour) === 0 && Number(minute) > 0) {
378
+ return `${minute}m ${second}s`;
379
+ } else if (Number(hour) === 0 && Number(minute) === 0) {
380
+ return `${second}s`;
381
+ } else {
382
+ return `${hour}h ${minute}m ${second}s`;
383
+ }
390
384
  }
391
385
  }
@@ -2,15 +2,22 @@ import * as React from 'react';
2
2
  import classNames from 'classnames';
3
3
 
4
4
  interface IProps {
5
- style?: 'normal' | 'light';
5
+ style?: 'normal' | 'light' | 'boxed';
6
+ state?: 'default' | 'focused' | 'warning';
6
7
  text: string;
7
8
  forId?: string;
9
+ required?: boolean;
10
+ invalid?: boolean;
8
11
  }
9
12
 
10
13
  export class FormLabel extends React.PureComponent<IProps> {
11
14
  render() {
12
15
  let classes = classNames('form-label', {
13
16
  'form-label--light': this.props.style === 'light',
17
+ 'form-label--boxed': this.props.style === 'boxed',
18
+ 'form-label--required': this.props.required,
19
+ 'form-label--invalid': this.props.invalid,
20
+ [`form-label--${this.props.state}`]: this.props.state !== 'default' && this.props.state !== undefined,
14
21
 
15
22
  });
16
23
  return (
@@ -1,4 +1,5 @@
1
1
  import * as React from 'react';
2
+ import classNames from 'classnames';
2
3
 
3
4
  interface IPropsBase {
4
5
  error?: string;
@@ -8,7 +9,7 @@ interface IPropsBase {
8
9
  tabIndex?: number;
9
10
  fullWidth?: boolean;
10
11
  boxedStyle?: boolean;
11
- boxedLable?: boolean;
12
+ // boxedLable?: boolean;
12
13
  placeholder?: string;
13
14
  htmlId?: string;
14
15
  id?: string;
@@ -70,8 +71,17 @@ export class InputBase extends React.Component<IProps, IState> {
70
71
  }
71
72
 
72
73
  render() {
74
+ let classes = classNames('sd-input__input', {
75
+ 'sd-input__input--boxed-style': this.props.boxedStyle,
76
+ 'sd-input__input--required': this.props.required,
77
+ 'sd-input__input--invalid': this.props.invalid,
78
+ 'sd-input__input--disabled': this.props.disabled,
79
+ 'sd-input__input--medium': this.props.size === undefined,
80
+ [`sd-input__input--${this.props.size}`]: this.props.size || this.props.size !== undefined,
81
+
82
+ });
73
83
  return (
74
- <input className='sd-input__input'
84
+ <input className={classes}
75
85
  type={this.props.type ?? 'text'}
76
86
  id={this.props.htmlId}
77
87
  value={this.state.value}
@@ -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 {