@utahdts/utah-design-system 1.7.0 → 1.8.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.
- package/css/6-components/_components-index.scss +1 -0
- package/css/6-components/base-components/buttons/_tag.scss +111 -0
- package/css/6-components/base-components/forms/_select-input.scss +30 -1
- package/css/6-components/base-components/popups/_popups.scss +1 -0
- package/css/6-components/base-components/tablesAndLists/_table.scss +26 -3
- package/css/6-components/base-components/widgetsInicators/_spinner.scss +1 -1
- package/dist/style.css +156 -5
- package/dist/utah-design-system.es.js +6193 -458
- package/dist/utah-design-system.umd.js +6193 -458
- package/index.js +2 -0
- package/package.json +2 -2
- package/react/components/PROPTYPES.MD +17 -3
- package/react/components/buttons/Button.jsx +1 -1
- package/react/components/buttons/ClickableTag.jsx +109 -0
- package/react/components/buttons/Tag.jsx +111 -0
- package/react/components/forms/CharacterCount.jsx +1 -9
- package/react/components/forms/Select.jsx +102 -20
- package/react/components/forms/TextInput.jsx +7 -6
- package/react/components/forms/useFormContext.js +6 -0
- package/react/components/navigation/pagination/Pagination.jsx +20 -2
- package/react/components/navigation/pagination/PaginationLink.jsx +4 -0
- package/react/components/table/TableBodyData.jsx +21 -2
- package/react/components/table/TableCell.jsx +0 -12
- package/react/util/trailingS.js +10 -0
|
@@ -10,6 +10,7 @@ component specific, BEM (Block, Element, Modifier)
|
|
|
10
10
|
@use "base-components/containers/tab-group";
|
|
11
11
|
@use "base-components/buttons/button";
|
|
12
12
|
@use "base-components/buttons/icon-button";
|
|
13
|
+
@use "base-components/buttons/tag";
|
|
13
14
|
@use "base-components/footer/footer-agency-information";
|
|
14
15
|
@use "base-components/footer/footer-social-media-bar";
|
|
15
16
|
@use "base-components/forms/input-wrapper";
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
@use "../../../1-settings/class-vars";
|
|
2
|
+
|
|
3
|
+
#{class-vars.$base-class} {
|
|
4
|
+
.tag {
|
|
5
|
+
padding: var(--spacing-2xs) var(--spacing-xs);
|
|
6
|
+
display: flex;
|
|
7
|
+
align-items: center;
|
|
8
|
+
border-radius: var(--radius-small);
|
|
9
|
+
background-color: var(--gray-light-color);
|
|
10
|
+
min-height: var(--form-ele-small1x);
|
|
11
|
+
|
|
12
|
+
&__button[type="button"] {
|
|
13
|
+
border: 1px solid var(--gray-medium-color);
|
|
14
|
+
padding: var(--spacing-2xs) var(--spacing-xs);
|
|
15
|
+
border-radius: var(--radius-small);
|
|
16
|
+
background-color: var(--gray-light-color);
|
|
17
|
+
height: 100%;
|
|
18
|
+
line-height: 1.4;
|
|
19
|
+
|
|
20
|
+
&.tag--small {
|
|
21
|
+
padding: var(--spacing-3xs) var(--spacing-2xs);
|
|
22
|
+
min-height: 28px;
|
|
23
|
+
font-size: var(--font-size-xs);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&.tag--large {
|
|
27
|
+
min-height: var(--form-ele-small);
|
|
28
|
+
font-size: var(--font-size-m);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&.tag--selected {
|
|
32
|
+
background-color: var(--gray-color);
|
|
33
|
+
color: white;
|
|
34
|
+
fill: white;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
&:hover {
|
|
38
|
+
color: var(--gray-color);
|
|
39
|
+
background-color: var(--gray-medium-light-color);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&__clear-button {
|
|
44
|
+
position: absolute;
|
|
45
|
+
top: 50%;
|
|
46
|
+
transform: translateY(-50%);
|
|
47
|
+
right: var(--spacing-3xs);
|
|
48
|
+
font-weight: var(--font-weight-normal);
|
|
49
|
+
transition: transform;
|
|
50
|
+
|
|
51
|
+
[class*=utds-icon-before-]::before {
|
|
52
|
+
font-size: .7rem;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
&[disabled]:active {
|
|
56
|
+
transform: translateY(-50%);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
&__wrapper {
|
|
61
|
+
border-radius: var(--radius-small);
|
|
62
|
+
display: flex;
|
|
63
|
+
align-items: center;
|
|
64
|
+
line-height: 1.4;
|
|
65
|
+
position: relative;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
&--small {
|
|
69
|
+
font-size: var(--font-size-xs);
|
|
70
|
+
padding: var(--spacing-3xs) var(--spacing-2xs);
|
|
71
|
+
|
|
72
|
+
.tag--icon svg {
|
|
73
|
+
height: .65rem;
|
|
74
|
+
width: .65rem;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
&--large {
|
|
79
|
+
font-size: var(--font-size-m);
|
|
80
|
+
|
|
81
|
+
.tag--icon svg {
|
|
82
|
+
height: 1rem;
|
|
83
|
+
width: 1rem;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
&--icon {
|
|
88
|
+
display: flex;
|
|
89
|
+
align-items: center;
|
|
90
|
+
|
|
91
|
+
svg {
|
|
92
|
+
height: 0.8rem;
|
|
93
|
+
width: 0.8rem;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
&-left {
|
|
97
|
+
margin-right: var(--spacing-2xs);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
&-right {
|
|
101
|
+
margin-left: var(--spacing-2xs);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
&--clearable {
|
|
106
|
+
.tag {
|
|
107
|
+
padding: var(--spacing-2xs) var(--spacing-xl) var(--spacing-2xs) var(--spacing-xs);
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
@@ -9,12 +9,41 @@
|
|
|
9
9
|
box-sizing: border-box;
|
|
10
10
|
border: 1px solid var(--gray-color);
|
|
11
11
|
width: 100%;
|
|
12
|
-
padding: 0 var(--spacing-xs);
|
|
12
|
+
padding: 0 var(--spacing-l) 0 var(--spacing-xs);
|
|
13
13
|
appearance: none;
|
|
14
14
|
background: white var(--icon-chevron-dark) no-repeat right 5px center;
|
|
15
15
|
background-size: 16px;
|
|
16
16
|
|
|
17
17
|
@include tools-index.form-ele-hover-medium;
|
|
18
18
|
@include tools-index.form-ele-focus;
|
|
19
|
+
|
|
20
|
+
&.select-input {
|
|
21
|
+
&--clear-icon-visible {
|
|
22
|
+
padding: 0 var(--spacing-3xl) 0 var(--spacing-xs);
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
.select-input {
|
|
27
|
+
&__inner-wrapper {
|
|
28
|
+
position: relative;
|
|
29
|
+
}
|
|
30
|
+
&__clear-button {
|
|
31
|
+
position: absolute;
|
|
32
|
+
top: 50%;
|
|
33
|
+
transform: translateY(-50%);
|
|
34
|
+
right: var(--spacing-l);
|
|
35
|
+
font-weight: var(--font-weight-normal);
|
|
36
|
+
background: white;
|
|
37
|
+
transition: transform;
|
|
38
|
+
[class*=utds-icon-before-]::before {
|
|
39
|
+
font-size: .7rem;
|
|
40
|
+
}
|
|
41
|
+
&:hover {
|
|
42
|
+
background: var(--hover-gray-color-opaque);
|
|
43
|
+
}
|
|
44
|
+
&[disabled]:active {
|
|
45
|
+
transform: translateY(-50%);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
19
48
|
}
|
|
20
49
|
}
|
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
vertical-align: bottom;
|
|
15
15
|
font-weight: bold;
|
|
16
16
|
padding: var(--spacing-s);
|
|
17
|
+
line-height: 1.2;
|
|
17
18
|
&.text-center {
|
|
18
19
|
text-align: center;
|
|
19
20
|
}
|
|
@@ -87,14 +88,26 @@
|
|
|
87
88
|
thead {
|
|
88
89
|
tr {
|
|
89
90
|
th {
|
|
90
|
-
padding: var(--spacing-2xs);
|
|
91
|
+
padding: var(--spacing-2xs) var(--spacing-xs);
|
|
92
|
+
}
|
|
93
|
+
th.table-header--sortable {
|
|
94
|
+
padding: 0;
|
|
91
95
|
}
|
|
92
96
|
}
|
|
93
97
|
}
|
|
94
98
|
tbody {
|
|
95
99
|
tr {
|
|
96
100
|
td {
|
|
97
|
-
padding: var(--spacing-2xs);
|
|
101
|
+
padding: var(--spacing-2xs) var(--spacing-xs);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
&.table-header--sortable {
|
|
106
|
+
thead {
|
|
107
|
+
tr {
|
|
108
|
+
th.table-header--sortable {
|
|
109
|
+
padding: 0;
|
|
110
|
+
}
|
|
98
111
|
}
|
|
99
112
|
}
|
|
100
113
|
}
|
|
@@ -131,9 +144,10 @@
|
|
|
131
144
|
background: none;
|
|
132
145
|
border-radius: var(--radius-circle);
|
|
133
146
|
justify-content: flex-start;
|
|
134
|
-
padding: var(--spacing) var(--spacing-s);
|
|
147
|
+
padding: var(--spacing-s) var(--spacing-s);
|
|
135
148
|
width: 100%;
|
|
136
149
|
font-weight: bold;
|
|
150
|
+
line-height: 1.2;
|
|
137
151
|
&:hover {
|
|
138
152
|
background: var(--gray-light-color);
|
|
139
153
|
color: var(--primary-color);
|
|
@@ -226,6 +240,15 @@
|
|
|
226
240
|
}
|
|
227
241
|
}
|
|
228
242
|
}
|
|
243
|
+
&.table--condensed {
|
|
244
|
+
.table-header {
|
|
245
|
+
&--sortable {
|
|
246
|
+
button {
|
|
247
|
+
padding: var(--spacing-s) var(--spacing-xs);
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
}
|
|
229
252
|
}
|
|
230
253
|
|
|
231
254
|
// Other table class elements
|
package/dist/style.css
CHANGED
|
@@ -2566,6 +2566,112 @@ base color swatches for the design system
|
|
|
2566
2566
|
gap: var(--spacing-xs);
|
|
2567
2567
|
}
|
|
2568
2568
|
|
|
2569
|
+
.utah-design-system .tag {
|
|
2570
|
+
padding: var(--spacing-2xs) var(--spacing-xs);
|
|
2571
|
+
display: flex;
|
|
2572
|
+
align-items: center;
|
|
2573
|
+
border-radius: var(--radius-small);
|
|
2574
|
+
background-color: var(--gray-light-color);
|
|
2575
|
+
min-height: var(--form-ele-small1x);
|
|
2576
|
+
}
|
|
2577
|
+
|
|
2578
|
+
.utah-design-system .tag__button[type=button] {
|
|
2579
|
+
border: 1px solid var(--gray-medium-color);
|
|
2580
|
+
padding: var(--spacing-2xs) var(--spacing-xs);
|
|
2581
|
+
border-radius: var(--radius-small);
|
|
2582
|
+
background-color: var(--gray-light-color);
|
|
2583
|
+
height: 100%;
|
|
2584
|
+
line-height: 1.4;
|
|
2585
|
+
}
|
|
2586
|
+
|
|
2587
|
+
.utah-design-system .tag__button[type=button].tag--small {
|
|
2588
|
+
padding: var(--spacing-3xs) var(--spacing-2xs);
|
|
2589
|
+
min-height: 28px;
|
|
2590
|
+
font-size: var(--font-size-xs);
|
|
2591
|
+
}
|
|
2592
|
+
|
|
2593
|
+
.utah-design-system .tag__button[type=button].tag--large {
|
|
2594
|
+
min-height: var(--form-ele-small);
|
|
2595
|
+
font-size: var(--font-size-m);
|
|
2596
|
+
}
|
|
2597
|
+
|
|
2598
|
+
.utah-design-system .tag__button[type=button].tag--selected {
|
|
2599
|
+
background-color: var(--gray-color);
|
|
2600
|
+
color: white;
|
|
2601
|
+
fill: white;
|
|
2602
|
+
}
|
|
2603
|
+
|
|
2604
|
+
.utah-design-system .tag__button[type=button]:hover {
|
|
2605
|
+
color: var(--gray-color);
|
|
2606
|
+
background-color: var(--gray-medium-light-color);
|
|
2607
|
+
}
|
|
2608
|
+
|
|
2609
|
+
.utah-design-system .tag__clear-button {
|
|
2610
|
+
position: absolute;
|
|
2611
|
+
top: 50%;
|
|
2612
|
+
transform: translateY(-50%);
|
|
2613
|
+
right: var(--spacing-3xs);
|
|
2614
|
+
font-weight: var(--font-weight-normal);
|
|
2615
|
+
transition: transform;
|
|
2616
|
+
}
|
|
2617
|
+
|
|
2618
|
+
.utah-design-system .tag__clear-button [class*=utds-icon-before-]::before {
|
|
2619
|
+
font-size: 0.7rem;
|
|
2620
|
+
}
|
|
2621
|
+
|
|
2622
|
+
.utah-design-system .tag__clear-button[disabled]:active {
|
|
2623
|
+
transform: translateY(-50%);
|
|
2624
|
+
}
|
|
2625
|
+
|
|
2626
|
+
.utah-design-system .tag__wrapper {
|
|
2627
|
+
border-radius: var(--radius-small);
|
|
2628
|
+
display: flex;
|
|
2629
|
+
align-items: center;
|
|
2630
|
+
line-height: 1.4;
|
|
2631
|
+
position: relative;
|
|
2632
|
+
}
|
|
2633
|
+
|
|
2634
|
+
.utah-design-system .tag--small {
|
|
2635
|
+
font-size: var(--font-size-xs);
|
|
2636
|
+
padding: var(--spacing-3xs) var(--spacing-2xs);
|
|
2637
|
+
}
|
|
2638
|
+
|
|
2639
|
+
.utah-design-system .tag--small .tag--icon svg {
|
|
2640
|
+
height: 0.65rem;
|
|
2641
|
+
width: 0.65rem;
|
|
2642
|
+
}
|
|
2643
|
+
|
|
2644
|
+
.utah-design-system .tag--large {
|
|
2645
|
+
font-size: var(--font-size-m);
|
|
2646
|
+
}
|
|
2647
|
+
|
|
2648
|
+
.utah-design-system .tag--large .tag--icon svg {
|
|
2649
|
+
height: 1rem;
|
|
2650
|
+
width: 1rem;
|
|
2651
|
+
}
|
|
2652
|
+
|
|
2653
|
+
.utah-design-system .tag--icon {
|
|
2654
|
+
display: flex;
|
|
2655
|
+
align-items: center;
|
|
2656
|
+
}
|
|
2657
|
+
|
|
2658
|
+
.utah-design-system .tag--icon svg {
|
|
2659
|
+
height: 0.8rem;
|
|
2660
|
+
width: 0.8rem;
|
|
2661
|
+
}
|
|
2662
|
+
|
|
2663
|
+
.utah-design-system .tag--icon-left {
|
|
2664
|
+
margin-right: var(--spacing-2xs);
|
|
2665
|
+
}
|
|
2666
|
+
|
|
2667
|
+
.utah-design-system .tag--icon-right {
|
|
2668
|
+
margin-left: var(--spacing-2xs);
|
|
2669
|
+
}
|
|
2670
|
+
|
|
2671
|
+
.utah-design-system .tag--clearable .tag {
|
|
2672
|
+
padding: var(--spacing-2xs) var(--spacing-xl) var(--spacing-2xs) var(--spacing-xs);
|
|
2673
|
+
}
|
|
2674
|
+
|
|
2569
2675
|
.utah-design-system .footer-agency-information {
|
|
2570
2676
|
background: var(--gray-color);
|
|
2571
2677
|
color: white;
|
|
@@ -2910,7 +3016,7 @@ base color swatches for the design system
|
|
|
2910
3016
|
box-sizing: border-box;
|
|
2911
3017
|
border: 1px solid var(--gray-color);
|
|
2912
3018
|
width: 100%;
|
|
2913
|
-
padding: 0 var(--spacing-xs);
|
|
3019
|
+
padding: 0 var(--spacing-l) 0 var(--spacing-xs);
|
|
2914
3020
|
appearance: none;
|
|
2915
3021
|
background: white var(--icon-chevron-dark) no-repeat right 5px center;
|
|
2916
3022
|
background-size: 16px;
|
|
@@ -2929,6 +3035,36 @@ base color swatches for the design system
|
|
|
2929
3035
|
transition: none;
|
|
2930
3036
|
}
|
|
2931
3037
|
|
|
3038
|
+
.utah-design-system select.select-input--clear-icon-visible {
|
|
3039
|
+
padding: 0 var(--spacing-3xl) 0 var(--spacing-xs);
|
|
3040
|
+
}
|
|
3041
|
+
|
|
3042
|
+
.utah-design-system .select-input__inner-wrapper {
|
|
3043
|
+
position: relative;
|
|
3044
|
+
}
|
|
3045
|
+
|
|
3046
|
+
.utah-design-system .select-input__clear-button {
|
|
3047
|
+
position: absolute;
|
|
3048
|
+
top: 50%;
|
|
3049
|
+
transform: translateY(-50%);
|
|
3050
|
+
right: var(--spacing-l);
|
|
3051
|
+
font-weight: var(--font-weight-normal);
|
|
3052
|
+
background: white;
|
|
3053
|
+
transition: transform;
|
|
3054
|
+
}
|
|
3055
|
+
|
|
3056
|
+
.utah-design-system .select-input__clear-button [class*=utds-icon-before-]::before {
|
|
3057
|
+
font-size: 0.7rem;
|
|
3058
|
+
}
|
|
3059
|
+
|
|
3060
|
+
.utah-design-system .select-input__clear-button:hover {
|
|
3061
|
+
background: var(--hover-gray-color-opaque);
|
|
3062
|
+
}
|
|
3063
|
+
|
|
3064
|
+
.utah-design-system .select-input__clear-button[disabled]:active {
|
|
3065
|
+
transform: translateY(-50%);
|
|
3066
|
+
}
|
|
3067
|
+
|
|
2932
3068
|
.utah-design-system .info-box {
|
|
2933
3069
|
display: flex;
|
|
2934
3070
|
align-items: center;
|
|
@@ -4593,6 +4729,7 @@ Media Sizes - SCSS Variables
|
|
|
4593
4729
|
height: 9px;
|
|
4594
4730
|
background: inherit;
|
|
4595
4731
|
z-index: -1;
|
|
4732
|
+
box-sizing: content-box;
|
|
4596
4733
|
}
|
|
4597
4734
|
|
|
4598
4735
|
.utah-design-system .popup__arrow::before {
|
|
@@ -5080,7 +5217,7 @@ BEM standard: Block, Element, Modifier
|
|
|
5080
5217
|
}
|
|
5081
5218
|
}
|
|
5082
5219
|
@media (prefers-reduced-motion: reduce) {
|
|
5083
|
-
.utah-design-system .spinner__animation {
|
|
5220
|
+
.utah-design-system .spinner--indeterminate .spinner__animation {
|
|
5084
5221
|
animation: spinner-animation 2s linear 4;
|
|
5085
5222
|
}
|
|
5086
5223
|
}
|
|
@@ -5101,6 +5238,7 @@ BEM standard: Block, Element, Modifier
|
|
|
5101
5238
|
vertical-align: bottom;
|
|
5102
5239
|
font-weight: bold;
|
|
5103
5240
|
padding: var(--spacing-s);
|
|
5241
|
+
line-height: 1.2;
|
|
5104
5242
|
}
|
|
5105
5243
|
|
|
5106
5244
|
.utah-design-system table thead tr th.text-center {
|
|
@@ -5147,11 +5285,19 @@ BEM standard: Block, Element, Modifier
|
|
|
5147
5285
|
}
|
|
5148
5286
|
|
|
5149
5287
|
.utah-design-system table.table--condensed thead tr th {
|
|
5150
|
-
padding: var(--spacing-2xs);
|
|
5288
|
+
padding: var(--spacing-2xs) var(--spacing-xs);
|
|
5289
|
+
}
|
|
5290
|
+
|
|
5291
|
+
.utah-design-system table.table--condensed thead tr th.table-header--sortable {
|
|
5292
|
+
padding: 0;
|
|
5151
5293
|
}
|
|
5152
5294
|
|
|
5153
5295
|
.utah-design-system table.table--condensed tbody tr td {
|
|
5154
|
-
padding: var(--spacing-2xs);
|
|
5296
|
+
padding: var(--spacing-2xs) var(--spacing-xs);
|
|
5297
|
+
}
|
|
5298
|
+
|
|
5299
|
+
.utah-design-system table.table--condensed.table-header--sortable thead tr th.table-header--sortable {
|
|
5300
|
+
padding: 0;
|
|
5155
5301
|
}
|
|
5156
5302
|
|
|
5157
5303
|
.utah-design-system table.table--full-width {
|
|
@@ -5181,9 +5327,10 @@ BEM standard: Block, Element, Modifier
|
|
|
5181
5327
|
background: none;
|
|
5182
5328
|
border-radius: var(--radius-circle);
|
|
5183
5329
|
justify-content: flex-start;
|
|
5184
|
-
padding: var(--spacing) var(--spacing-s);
|
|
5330
|
+
padding: var(--spacing-s) var(--spacing-s);
|
|
5185
5331
|
width: 100%;
|
|
5186
5332
|
font-weight: bold;
|
|
5333
|
+
line-height: 1.2;
|
|
5187
5334
|
}
|
|
5188
5335
|
|
|
5189
5336
|
.utah-design-system table .table-header--sortable button:hover {
|
|
@@ -5279,6 +5426,10 @@ BEM standard: Block, Element, Modifier
|
|
|
5279
5426
|
padding: 0 var(--spacing-l) 0 var(--spacing-xs);
|
|
5280
5427
|
}
|
|
5281
5428
|
|
|
5429
|
+
.utah-design-system table.table--condensed .table-header--sortable button {
|
|
5430
|
+
padding: var(--spacing-s) var(--spacing-xs);
|
|
5431
|
+
}
|
|
5432
|
+
|
|
5282
5433
|
.utah-design-system .table__no-results-td {
|
|
5283
5434
|
text-align: center;
|
|
5284
5435
|
}
|