superdesk-ui-framework 2.4.18 → 2.4.21

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 (44) hide show
  1. package/app/scripts/check.js +1 -1
  2. package/app/styles/_accessibility.scss +7 -3
  3. package/app/styles/_buttons.scss +52 -1
  4. package/app/styles/_spinner.scss +46 -0
  5. package/app-typescript/components/Button.tsx +7 -1
  6. package/app-typescript/components/Input.tsx +16 -5
  7. package/app-typescript/components/Select.tsx +7 -0
  8. package/app-typescript/components/Spinner.tsx +33 -0
  9. package/app-typescript/components/TabCustom.tsx +89 -40
  10. package/app-typescript/components/TabList.tsx +43 -18
  11. package/app-typescript/components/Tag.tsx +3 -3
  12. package/app-typescript/index.ts +1 -1
  13. package/dist/components/checkbox.html +1 -1
  14. package/dist/examples.bundle.css +36 -1
  15. package/dist/examples.bundle.js +1638 -1201
  16. package/dist/react/Buttons.tsx +25 -0
  17. package/dist/react/Inputs.tsx +7 -3
  18. package/dist/react/Tabs.tsx +225 -72
  19. package/dist/react/Tags.tsx +9 -7
  20. package/dist/superdesk-ui.bundle.css +74 -13
  21. package/dist/superdesk-ui.bundle.js +1269 -957
  22. package/dist/vendor.bundle.js +23 -23
  23. package/examples/pages/components/checkbox.html +1 -1
  24. package/examples/pages/react/Buttons.tsx +25 -0
  25. package/examples/pages/react/Inputs.tsx +7 -3
  26. package/examples/pages/react/Tabs.tsx +225 -72
  27. package/examples/pages/react/Tags.tsx +9 -7
  28. package/package.json +2 -2
  29. package/react/components/Button.d.ts +2 -0
  30. package/react/components/Button.js +4 -2
  31. package/react/components/Input.d.ts +3 -0
  32. package/react/components/Input.js +15 -5
  33. package/react/components/Select.d.ts +1 -0
  34. package/react/components/Select.js +7 -0
  35. package/react/components/Spinner.d.ts +12 -0
  36. package/react/components/Spinner.js +70 -0
  37. package/react/components/TabCustom.d.ts +22 -12
  38. package/react/components/TabCustom.js +52 -23
  39. package/react/components/TabList.d.ts +11 -2
  40. package/react/components/TabList.js +32 -11
  41. package/react/components/Tag.d.ts +2 -2
  42. package/react/components/Tag.js +2 -2
  43. package/react/index.d.ts +1 -1
  44. package/react/index.js +2 -2
package/dist/superdesk-ui.bundle.css CHANGED
@@ -1,3 +1,38 @@
1
+ .sd-spinner {
2
+ animation: rotate 2s linear infinite;
3
+ z-index: 1; }
4
+ .sd-spinner--mini {
5
+ width: 1.8rem;
6
+ height: 1.8rem; }
7
+ .sd-spinner--small {
8
+ width: 2.4rem;
9
+ height: 2.4rem; }
10
+ .sd-spinner--medium {
11
+ width: 3.2rem;
12
+ height: 3.2rem; }
13
+ .sd-spinner--large {
14
+ width: 4.8rem;
15
+ height: 4.8rem; }
16
+
17
+ .sd-spinner__path {
18
+ stroke: var(--color-text-light);
19
+ stroke-linecap: round;
20
+ animation: dash 1.5s ease-in-out infinite; }
21
+
22
+ @keyframes rotate {
23
+ 100% {
24
+ transform: rotate(360deg); } }
25
+
26
+ @keyframes dash {
27
+ 0% {
28
+ stroke-dasharray: 1, 150;
29
+ stroke-dashoffset: 0; }
30
+ 50% {
31
+ stroke-dasharray: 90, 150;
32
+ stroke-dashoffset: -32; }
33
+ 100% {
34
+ stroke-dasharray: 90, 150;
35
+ stroke-dashoffset: -124; } }
1
36
  @charset "UTF-8";
2
37
  :root {
3
38
  --sd-slugline-color: #005b7f; }
@@ -7558,6 +7593,7 @@ time {
7558
7593
  text-align: center;
7559
7594
  text-decoration: none;
7560
7595
  cursor: pointer;
7596
+ gap: 0.6rem;
7561
7597
  background-color: rgba(51, 51, 51, 0.25);
7562
7598
  color: #333; }
7563
7599
  .btn:hover, .btn:focus {
@@ -7906,7 +7942,7 @@ time {
7906
7942
  border-color: rgba(30, 176, 108, 0.4) transparent transparent transparent;
7907
7943
  background-color: rgba(30, 176, 108, 0.19); }
7908
7944
  .btn.btn--disabled, .btn[disabled] {
7909
- opacity: 0.25;
7945
+ opacity: 0.6;
7910
7946
  cursor: not-allowed;
7911
7947
  box-shadow: none; }
7912
7948
  .btn.btn--disabled:hover, .btn.btn--disabled:focus, .btn[disabled]:hover, .btn[disabled]:focus {
@@ -7916,7 +7952,7 @@ time {
7916
7952
  border: 1px solid transparent;
7917
7953
  box-shadow: none; }
7918
7954
  .btn.btn--disabled.btn--default, .btn[disabled].btn--default {
7919
- opacity: 0.25;
7955
+ opacity: 0.6;
7920
7956
  cursor: not-allowed;
7921
7957
  box-shadow: none; }
7922
7958
  .btn.btn--disabled.btn--default:hover, .btn.btn--disabled.btn--default:focus, .btn[disabled].btn--default:hover, .btn[disabled].btn--default:focus {
@@ -7926,7 +7962,7 @@ time {
7926
7962
  border: 1px solid transparent;
7927
7963
  box-shadow: none; }
7928
7964
  .btn.btn--disabled.btn--primary, .btn[disabled].btn--primary {
7929
- opacity: 0.25;
7965
+ opacity: 0.6;
7930
7966
  cursor: not-allowed;
7931
7967
  box-shadow: none; }
7932
7968
  .btn.btn--disabled.btn--primary:hover, .btn.btn--disabled.btn--primary:focus, .btn[disabled].btn--primary:hover, .btn[disabled].btn--primary:focus {
@@ -7936,7 +7972,7 @@ time {
7936
7972
  border: 1px solid transparent;
7937
7973
  box-shadow: none; }
7938
7974
  .btn.btn--disabled.btn--success, .btn[disabled].btn--success {
7939
- opacity: 0.25;
7975
+ opacity: 0.6;
7940
7976
  cursor: not-allowed;
7941
7977
  box-shadow: none; }
7942
7978
  .btn.btn--disabled.btn--success:hover, .btn.btn--disabled.btn--success:focus, .btn[disabled].btn--success:hover, .btn[disabled].btn--success:focus {
@@ -7946,7 +7982,7 @@ time {
7946
7982
  border: 1px solid transparent;
7947
7983
  box-shadow: none; }
7948
7984
  .btn.btn--disabled.btn--warning, .btn[disabled].btn--warning {
7949
- opacity: 0.25;
7985
+ opacity: 0.6;
7950
7986
  cursor: not-allowed;
7951
7987
  box-shadow: none; }
7952
7988
  .btn.btn--disabled.btn--warning:hover, .btn.btn--disabled.btn--warning:focus, .btn[disabled].btn--warning:hover, .btn[disabled].btn--warning:focus {
@@ -7956,7 +7992,7 @@ time {
7956
7992
  border: 1px solid transparent;
7957
7993
  box-shadow: none; }
7958
7994
  .btn.btn--disabled.btn--alert, .btn[disabled].btn--alert {
7959
- opacity: 0.25;
7995
+ opacity: 0.6;
7960
7996
  cursor: not-allowed;
7961
7997
  box-shadow: none; }
7962
7998
  .btn.btn--disabled.btn--alert:hover, .btn.btn--disabled.btn--alert:focus, .btn[disabled].btn--alert:hover, .btn[disabled].btn--alert:focus {
@@ -7966,7 +8002,7 @@ time {
7966
8002
  border: 1px solid transparent;
7967
8003
  box-shadow: none; }
7968
8004
  .btn.btn--disabled.btn--highlight, .btn[disabled].btn--highlight {
7969
- opacity: 0.25;
8005
+ opacity: 0.6;
7970
8006
  cursor: not-allowed;
7971
8007
  box-shadow: none; }
7972
8008
  .btn.btn--disabled.btn--highlight:hover, .btn.btn--disabled.btn--highlight:focus, .btn[disabled].btn--highlight:hover, .btn[disabled].btn--highlight:focus {
@@ -7976,7 +8012,7 @@ time {
7976
8012
  border: 1px solid transparent;
7977
8013
  box-shadow: none; }
7978
8014
  .btn.btn--disabled.btn--sd-green, .btn[disabled].btn--sd-green {
7979
- opacity: 0.25;
8015
+ opacity: 0.6;
7980
8016
  cursor: not-allowed;
7981
8017
  box-shadow: none; }
7982
8018
  .btn.btn--disabled.btn--sd-green:hover, .btn.btn--disabled.btn--sd-green:focus, .btn[disabled].btn--sd-green:hover, .btn[disabled].btn--sd-green:focus {
@@ -8697,6 +8733,10 @@ time {
8697
8733
  .btn.btn--ui-dark.btn--text-only.btn--disabled.btn--sd-green:hover, .btn.btn--ui-dark.btn--text-only.btn--disabled.btn--sd-green:focus, .btn.btn--ui-dark.btn--text-only.btn--disabled.btn--sd-green:active, .btn.btn--ui-dark.btn--text-only[disabled].btn--sd-green:hover, .btn.btn--ui-dark.btn--text-only[disabled].btn--sd-green:focus, .btn.btn--ui-dark.btn--text-only[disabled].btn--sd-green:active {
8698
8734
  box-shadow: none;
8699
8735
  border-color: transparent; }
8736
+ .btn.btn--ui-dark.btn--text-only.btn--primary, .btn.btn--ui-dark.btn--text-only.btn--success, .btn.btn--ui-dark.btn--text-only.btn--warning, .btn.btn--ui-dark.btn--text-only.btn--alert, .btn.btn--ui-dark.btn--text-only.btn--highlight, .btn.btn--ui-dark.btn--text-only.btn--sd-green, .btn.btn--ui-dark.btn--text-only.btn--secondary {
8737
+ color: var(--sd-btn-txt); }
8738
+ .btn.btn--ui-dark.btn--text-only.btn--primary .sd-spinner__path, .btn.btn--ui-dark.btn--text-only.btn--success .sd-spinner__path, .btn.btn--ui-dark.btn--text-only.btn--warning .sd-spinner__path, .btn.btn--ui-dark.btn--text-only.btn--alert .sd-spinner__path, .btn.btn--ui-dark.btn--text-only.btn--highlight .sd-spinner__path, .btn.btn--ui-dark.btn--text-only.btn--sd-green .sd-spinner__path, .btn.btn--ui-dark.btn--text-only.btn--secondary .sd-spinner__path {
8739
+ stroke: var(--sd-btn-txt); }
8700
8740
  .btn.btn--ui-dark.btn--hollow {
8701
8741
  border: 1px solid rgba(245, 245, 245, 0.28);
8702
8742
  color: rgba(245, 245, 245, 0.7);
@@ -8787,6 +8827,10 @@ time {
8787
8827
  box-shadow: 0 0 0 3px rgba(94, 169, 200, 0.3); }
8788
8828
  .btn.btn--ui-dark.btn--hollow.btn--sd-green:active {
8789
8829
  box-shadow: inset 0 1px 0 0 #1eb06c; }
8830
+ .btn.btn--ui-dark.btn--hollow.btn--primary, .btn.btn--ui-dark.btn--hollow.btn--success, .btn.btn--ui-dark.btn--hollow.btn--warning, .btn.btn--ui-dark.btn--hollow.btn--alert, .btn.btn--ui-dark.btn--hollow.btn--highlight, .btn.btn--ui-dark.btn--hollow.btn--sd-green, .btn.btn--ui-dark.btn--hollow.btn--secondary {
8831
+ color: var(--sd-btn-color); }
8832
+ .btn.btn--ui-dark.btn--hollow.btn--primary .sd-spinner__path, .btn.btn--ui-dark.btn--hollow.btn--success .sd-spinner__path, .btn.btn--ui-dark.btn--hollow.btn--warning .sd-spinner__path, .btn.btn--ui-dark.btn--hollow.btn--alert .sd-spinner__path, .btn.btn--ui-dark.btn--hollow.btn--highlight .sd-spinner__path, .btn.btn--ui-dark.btn--hollow.btn--sd-green .sd-spinner__path, .btn.btn--ui-dark.btn--hollow.btn--secondary .sd-spinner__path {
8833
+ stroke: var(--sd-btn-color); }
8790
8834
  .btn.btn--ui-dark.btn--hollow.btn--disabled, .btn.btn--ui-dark.btn--hollow[disabled] {
8791
8835
  border: 1px solid 0;
8792
8836
  color: #F5F5F5;
@@ -8948,6 +8992,12 @@ time {
8948
8992
  background-color: rgba(35, 35, 35, 0.2); }
8949
8993
  .btn.btn--icon-only-circle.btn--text-only.btn--ui-dark [class^="icon-"], .btn.btn--icon-only-circle.btn--text-only.btn--ui-dark [class*=" icon-"] {
8950
8994
  color: #fff; }
8995
+ .btn--primary, .btn--success, .btn--warning, .btn--alert, .btn--highlight, .btn--sd-green, .btn--secondary {
8996
+ color: #fff; }
8997
+ .btn--primary [class^="icon-"], .btn--primary [class*=" icon-"], .btn--success [class^="icon-"], .btn--success [class*=" icon-"], .btn--warning [class^="icon-"], .btn--warning [class*=" icon-"], .btn--alert [class^="icon-"], .btn--alert [class*=" icon-"], .btn--highlight [class^="icon-"], .btn--highlight [class*=" icon-"], .btn--sd-green [class^="icon-"], .btn--sd-green [class*=" icon-"], .btn--secondary [class^="icon-"], .btn--secondary [class*=" icon-"] {
8998
+ color: #fff; }
8999
+ .btn--primary .sd-spinner__path, .btn--success .sd-spinner__path, .btn--warning .sd-spinner__path, .btn--alert .sd-spinner__path, .btn--highlight .sd-spinner__path, .btn--sd-green .sd-spinner__path, .btn--secondary .sd-spinner__path {
9000
+ stroke: #fff; }
8951
9001
 
8952
9002
  .sd-create-btn {
8953
9003
  width: 4.8rem;
@@ -9040,7 +9090,7 @@ time {
9040
9090
  color: #5ea9c8;
9041
9091
  opacity: 1; }
9042
9092
  .icn-btn--disabled {
9043
- opacity: 0.25; }
9093
+ opacity: 0.6; }
9044
9094
  .icn-btn--small {
9045
9095
  height: 1.25em;
9046
9096
  width: 1.25em; }
@@ -10057,6 +10107,13 @@ time {
10057
10107
  position: absolute;
10058
10108
  width: 1px; }
10059
10109
 
10110
+ .btn[data-loading="true"] {
10111
+ pointer-events: none; }
10112
+ .btn[data-loading="true"] .sd-spinner {
10113
+ margin-inline-start: -0.3rem; }
10114
+ .btn[data-loading="true"].btn--icon-only .sd-spinner {
10115
+ margin-inline-start: 0; }
10116
+
10060
10117
  .label {
10061
10118
  display: inline-block;
10062
10119
  padding: 0 0.8rem;
@@ -19096,10 +19153,14 @@ tags-input {
19096
19153
  top: 0;
19097
19154
  z-index: -1;
19098
19155
  pointer-events: none;
19099
- opacity: 0;
19100
- height: 1px !important;
19101
- width: 1px !important;
19102
- overflow: hidden; }
19156
+ opacity: 0 !important;
19157
+ height: 0;
19158
+ width: 0;
19159
+ min-width: 0;
19160
+ overflow: hidden;
19161
+ font-size: 0.01px !important;
19162
+ padding: 0 !important;
19163
+ margin: 0 !important; }
19103
19164
 
19104
19165
  .sd-popover {
19105
19166
  background: #333;