@utahdts/utah-design-system 0.6.0-beta.0 → 0.6.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 (39) hide show
  1. package/css/4-elements/_elements-index.scss +3 -0
  2. package/css/6-components/base-components/forms/_checkbox.scss +59 -56
  3. package/css/6-components/base-components/forms/_info-box.scss +22 -18
  4. package/css/6-components/base-components/forms/_input-wrapper.scss +11 -7
  5. package/css/6-components/base-components/forms/_input.scss +11 -7
  6. package/css/6-components/base-components/forms/_radio-button.scss +42 -50
  7. package/css/6-components/base-components/forms/_select-input.scss +16 -13
  8. package/css/6-components/base-components/forms/_switch.scss +157 -154
  9. package/css/6-components/base-components/forms/_text-input.scss +18 -14
  10. package/css/6-components/base-components/tablesAndLists/_table.scss +73 -69
  11. package/css/6-components/base-components/templates/_documenation-template.scss +43 -40
  12. package/css/6-components/base-components/templates/_landing-page-template.scss +11 -7
  13. package/css/6-components/base-components/widgetsInicators/_spinner.scss +33 -29
  14. package/css/6-components/project-components/_popup.scss +18 -15
  15. package/css/build/utah-design-system.css +114 -100
  16. package/dist/utah-design-system.es.js +500 -248
  17. package/dist/utah-design-system.umd.js +500 -248
  18. package/index.js +3 -2
  19. package/package.json +2 -2
  20. package/react/components/navigation/OnThisPageHeadersLevel.jsx +1 -1
  21. package/react/components/navigation/pagination/Pagination.jsx +123 -0
  22. package/react/components/navigation/pagination/PaginationLink.jsx +50 -0
  23. package/react/components/{pagination → navigation/pagination/hooks}/usePaginatedList.js +1 -1
  24. package/react/components/navigation/pagination/util/determinePaginationLinks.js +134 -0
  25. package/react/components/navigation/util/findElementsByTagNameMatch.js +2 -1
  26. package/react/components/table/TableBodyData.jsx +10 -23
  27. package/react/components/table/TableFilterSelect.jsx +8 -12
  28. package/react/components/table/TableFilterSelectAllOptions.jsx +83 -37
  29. package/react/components/table/TableFilterTextInput.jsx +7 -0
  30. package/react/components/table/TableWrapper.jsx +1 -3
  31. package/react/components/table/hooks/useTableFilterRegistration.js +41 -0
  32. package/react/components/table/useCurrentValuesFromStateContext.js +3 -1
  33. package/react/components/table/util/convertRecordsToFilterValue.js +32 -0
  34. package/react/components/table/util/createTableFilterFunctions.js +36 -0
  35. package/react/components/table/util/filterTableRecords.js +21 -0
  36. package/react/enums/popupPlacement.js +4 -0
  37. package/react/hooks/forms/useComponentState.js +7 -2
  38. package/react/jsDocTypes.js +28 -0
  39. package/react/components/pagination/Pagination.jsx +0 -102
package/css/6-components/base-components/forms/_switch.scss CHANGED
@@ -1,184 +1,187 @@
1
1
  @use "../../../1-settings/color-swatches";
2
2
  @use "../../../2-tools/tools-index";
3
+ @use "../../../1-settings/class-vars";
3
4
 
4
- input[type=checkbox].switch {
5
- border: 0;
6
- clip: rect(0 0 0 0);
7
- height: 1px;
8
- margin: -1px;
9
- overflow: hidden;
10
- padding: 0;
11
- position: absolute;
12
- width: 1px;
13
- }
14
-
15
- .switch {
16
- &__label {
5
+ #{class-vars.$base-class} {
6
+ input[type=checkbox].switch {
7
+ border: 0;
8
+ clip: rect(0 0 0 0);
9
+ height: 1px;
10
+ margin: -1px;
11
+ overflow: hidden;
12
+ padding: 0;
17
13
  position: absolute;
18
- right: 0;
19
- transform: translateX(calc(100% + var(--spacing-2xs)));
20
- color: var(--gray-color);
21
- min-width: max-content;
14
+ width: 1px;
22
15
  }
23
- &__wrapper {
24
- min-width: 20px;
25
- background: color-swatches.$neutral-gray-08;
26
- color: white;
27
- border-radius: var(--radius-circle);
28
- min-height: var(--form-ele-small3x);
29
- padding: var(--spacing-3xs);
30
- position: relative;
31
- display: inline-flex;
32
- align-items: center;
33
- &--on {
34
- background: var(--form-ele-color);
35
- }
36
16
 
37
- @include tools-index.form-ele-hover-medium;
38
- &:has(input:focus) {
39
- @include tools-index.form-ele-focus-appearance;
40
- }
41
- }
42
- &--small {
43
- &.switch__wrapper {
44
- min-height: var(--form-ele-small4x);
17
+ .switch {
18
+ &__label {
19
+ position: absolute;
20
+ right: 0;
21
+ transform: translateX(calc(100% + var(--spacing-2xs)));
22
+ color: var(--gray-color);
23
+ min-width: max-content;
45
24
  }
25
+ &__wrapper {
26
+ min-width: 20px;
27
+ background: color-swatches.$neutral-gray-08;
28
+ color: white;
29
+ border-radius: var(--radius-circle);
30
+ min-height: var(--form-ele-small3x);
31
+ padding: var(--spacing-3xs);
32
+ position: relative;
33
+ display: inline-flex;
34
+ align-items: center;
35
+ &--on {
36
+ background: var(--form-ele-color);
37
+ }
46
38
 
47
- .switch__slider {
48
- height: var(--form-ele-small4x);
49
- width: var(--form-ele-small4x);
39
+ @include tools-index.form-ele-hover-medium;
40
+ &:has(input:focus) {
41
+ @include tools-index.form-ele-focus-appearance;
42
+ }
50
43
  }
44
+ &--small {
45
+ &.switch__wrapper {
46
+ min-height: var(--form-ele-small4x);
47
+ }
51
48
 
52
- .switch__inner-label {
53
- font-size: var(--font-size-xs);
54
- height: var(--form-ele-small4x);
55
- line-height: var(--form-ele-small4x);
56
- }
57
- }
58
- &--large {
59
- &.switch__wrapper {
60
- min-height: var(--form-ele-small1x);
49
+ .switch__slider {
50
+ height: var(--form-ele-small4x);
51
+ width: var(--form-ele-small4x);
52
+ }
53
+
54
+ .switch__inner-label {
55
+ font-size: var(--font-size-xs);
56
+ height: var(--form-ele-small4x);
57
+ line-height: var(--form-ele-small4x);
58
+ }
61
59
  }
60
+ &--large {
61
+ &.switch__wrapper {
62
+ min-height: var(--form-ele-small1x);
63
+ }
62
64
 
63
- .switch__slider {
64
- height: var(--form-ele-small1x);
65
- width: var(--form-ele-small1x);
65
+ .switch__slider {
66
+ height: var(--form-ele-small1x);
67
+ width: var(--form-ele-small1x);
68
+ }
66
69
  }
67
- }
68
- &__slider {
69
- height: var(--form-ele-small3x);
70
- width: var(--form-ele-small3x);
71
- border-radius: var(--radius-circle);
72
- background: white;
73
- position: absolute;
74
- left: 2px;
75
- transition: all var(--timing-quick);
76
- display: flex;
77
- align-items: center;
78
- justify-content: center;
79
- &--on {
80
- left: 100%;
81
- transform: translateX(calc(-100% - 2px));
70
+ &__slider {
71
+ height: var(--form-ele-small3x);
72
+ width: var(--form-ele-small3x);
73
+ border-radius: var(--radius-circle);
82
74
  background: white;
83
- }
84
- svg {
85
- fill: var(--gray-color);
86
- width: .65rem;
87
- height: .65rem;
88
- }
89
- }
90
- &__inner-label {
91
- position: relative;
92
- width: 100%;
93
- height: var(--form-ele-small3x);
94
- font-size: var(--font-size-s);
95
- line-height: var(--font-size-s);
96
- &-on, &-off {
97
- // display: none;
98
- // width: 25px;
99
- width: calc(100% - var(--form-ele-2small1x));
100
75
  position: absolute;
101
- right: 2px;
102
- opacity: 0;
103
- transition: opacity var(--timing-quick);
104
- text-align: center;
105
- display: inline-block;
106
- &.show {
107
- // display: block;
108
- opacity: 1;
76
+ left: 2px;
77
+ transition: all var(--timing-quick);
78
+ display: flex;
79
+ align-items: center;
80
+ justify-content: center;
81
+ &--on {
82
+ left: 100%;
83
+ transform: translateX(calc(-100% - 2px));
84
+ background: white;
85
+ }
86
+ svg {
87
+ fill: var(--gray-color);
88
+ width: .65rem;
89
+ height: .65rem;
109
90
  }
110
91
  }
111
- &-on {
112
- color: white;
113
- right: unset;
114
- left: 2px;
92
+ &__inner-label {
93
+ position: relative;
94
+ width: 100%;
95
+ height: var(--form-ele-small3x);
96
+ font-size: var(--font-size-s);
97
+ line-height: var(--font-size-s);
98
+ &-on, &-off {
99
+ // display: none;
100
+ // width: 25px;
101
+ width: calc(100% - var(--form-ele-2small1x));
102
+ position: absolute;
103
+ right: 2px;
104
+ opacity: 0;
105
+ transition: opacity var(--timing-quick);
106
+ text-align: center;
107
+ display: inline-block;
108
+ &.show {
109
+ // display: block;
110
+ opacity: 1;
111
+ }
112
+ }
113
+ &-on {
114
+ color: white;
115
+ right: unset;
116
+ left: 2px;
117
+ }
115
118
  }
116
- }
117
- &--disabled {
118
- background: var(--form-ele-disabled-color);
119
- cursor: not-allowed;
120
- &.switch__wrapper--on {
121
- background: var(--form-ele-color-light);
119
+ &--disabled {
120
+ background: var(--form-ele-disabled-color);
121
+ cursor: not-allowed;
122
+ &.switch__wrapper--on {
123
+ background: var(--form-ele-color-light);
124
+ }
122
125
  }
123
126
  }
124
- }
125
127
 
126
- .input-wrapper {
127
- &--switch {
128
- label {
129
- // padding: var(--spacing-3xs) var(--spacing) var(--spacing-3xs) var(--spacing-xl);
130
- padding: var(--spacing-3xs) var(--spacing-xs);
128
+ .input-wrapper {
129
+ &--switch {
130
+ label {
131
+ // padding: var(--spacing-3xs) var(--spacing) var(--spacing-3xs) var(--spacing-xl);
132
+ padding: var(--spacing-3xs) var(--spacing-xs);
133
+ }
131
134
  }
132
135
  }
133
- }
134
136
 
135
- .switch-old {
136
- display: block;
137
- box-sizing: border-box;
138
- border: none;
139
- background: none;
140
- padding: 0;
141
- position: relative;
142
- min-height: 20px;
143
- }
137
+ .switch-old {
138
+ display: block;
139
+ box-sizing: border-box;
140
+ border: none;
141
+ background: none;
142
+ padding: 0;
143
+ position: relative;
144
+ min-height: 20px;
145
+ }
144
146
 
145
- .switch-old:focus,
146
- .switch-old:hover {
147
- outline: none;
148
- }
147
+ .switch-old:focus,
148
+ .switch-old:hover {
149
+ outline: none;
150
+ }
149
151
 
150
- .switch-old:focus::before,
151
- .switch-old:hover::before {
152
- box-shadow: 0 0 0.5em color-swatches.$warm-gray-02;
153
- }
152
+ .switch-old:focus::before,
153
+ .switch-old:hover::before {
154
+ box-shadow: 0 0 0.5em color-swatches.$warm-gray-02;
155
+ }
154
156
 
155
- .switch-old::before,
156
- .switch-old::after {
157
- content: "";
158
- position: absolute;
159
- height: 16px;
160
- transition: all 0.25s ease;
161
- }
157
+ .switch-old::before,
158
+ .switch-old::after {
159
+ content: "";
160
+ position: absolute;
161
+ height: 16px;
162
+ transition: all 0.25s ease;
163
+ }
162
164
 
163
- .switch-old::before {
164
- left: 0;
165
- top: 0.2em;
166
- width: 32px;
167
- border: 1px solid color-swatches.$warm-gray-08;
168
- background: color-swatches.$warm-gray-08;
169
- border-radius: 16px;
170
- background-color: color-swatches.$aspen-green-08;
171
- border-color: color-swatches.$aspen-green-08;
172
- }
165
+ .switch-old::before {
166
+ left: 0;
167
+ top: 0.2em;
168
+ width: 32px;
169
+ border: 1px solid color-swatches.$warm-gray-08;
170
+ background: color-swatches.$warm-gray-08;
171
+ border-radius: 16px;
172
+ background-color: color-swatches.$aspen-green-08;
173
+ border-color: color-swatches.$aspen-green-08;
174
+ }
173
175
 
174
- .switch-old::after {
175
- top: 4px;
176
- background-color: #fff;
177
- border-radius: 50%;
178
- width: 14px;
179
- height: 14px;
180
- border: 1px solid color-swatches.$warm-gray-08;
181
- left: 16px;
182
- border-color: color-swatches.$aspen-green-08;
183
- color: color-swatches.$aspen-green-08;
176
+ .switch-old::after {
177
+ top: 4px;
178
+ background-color: #fff;
179
+ border-radius: 50%;
180
+ width: 14px;
181
+ height: 14px;
182
+ border: 1px solid color-swatches.$warm-gray-08;
183
+ left: 16px;
184
+ border-color: color-swatches.$aspen-green-08;
185
+ color: color-swatches.$aspen-green-08;
186
+ }
184
187
  }
package/css/6-components/base-components/forms/_text-input.scss CHANGED
@@ -1,19 +1,23 @@
1
1
  @use "../../../2-tools/tools-index";
2
2
 
3
- input[type="text"],
4
- textarea {
5
- color: var(--gray-color);
6
- min-height: var(--form-ele-medium);
7
- border-radius: var(--radius-small);
8
- box-sizing: border-box;
9
- border: 1px solid var(--gray-color);
10
- width: 100%;
11
- padding: 0 var(--spacing-xs);
3
+ @use "../../../1-settings/class-vars";
12
4
 
13
- @include tools-index.form-ele-hover-medium;
14
- @include tools-index.form-ele-focus;
15
- }
5
+ #{class-vars.$base-class} {
6
+ input[type="text"],
7
+ textarea {
8
+ color: var(--gray-color);
9
+ min-height: var(--form-ele-medium);
10
+ border-radius: var(--radius-small);
11
+ box-sizing: border-box;
12
+ border: 1px solid var(--gray-color);
13
+ width: 100%;
14
+ padding: 0 var(--spacing-xs);
15
+
16
+ @include tools-index.form-ele-hover-medium;
17
+ @include tools-index.form-ele-focus;
18
+ }
16
19
 
17
- textarea {
18
- padding: var(--spacing-xs);
20
+ textarea {
21
+ padding: var(--spacing-xs);
22
+ }
19
23
  }
package/css/6-components/base-components/tablesAndLists/_table.scss CHANGED
@@ -1,93 +1,97 @@
1
- table {
2
- border-collapse: collapse;
3
- thead {
4
- border-bottom: 1px solid var(--gray-color);
5
- tr {
6
- th {
7
- text-align: center;
8
- vertical-align: bottom;
9
- font-weight: bold;
10
- padding: var(--spacing-s);
11
- &.text-left {
12
- text-align: left;
13
- }
14
- &.text-right {
15
- text-align: right;
1
+ @use "../../../1-settings/class-vars";
2
+
3
+ #{class-vars.$base-class} {
4
+ table {
5
+ border-collapse: collapse;
6
+ thead {
7
+ border-bottom: 1px solid var(--gray-color);
8
+ tr {
9
+ th {
10
+ text-align: center;
11
+ vertical-align: bottom;
12
+ font-weight: bold;
13
+ padding: var(--spacing-s);
14
+ &.text-left {
15
+ text-align: left;
16
+ }
17
+ &.text-right {
18
+ text-align: right;
19
+ }
16
20
  }
17
21
  }
18
22
  }
19
- }
20
- tbody {
21
- tr {
22
- td {
23
- vertical-align: top;
24
- padding: var(--spacing-s);
23
+ tbody {
24
+ tr {
25
+ td {
26
+ vertical-align: top;
27
+ padding: var(--spacing-s);
28
+ }
25
29
  }
26
30
  }
27
- }
28
- &.table {
29
- &--alt {
30
- tbody {
31
- tr:nth-child(2n) {
32
- td {
33
- background-color: #F5F5F5;
31
+ &.table {
32
+ &--alt {
33
+ tbody {
34
+ tr:nth-child(2n) {
35
+ td {
36
+ background-color: #F5F5F5;
37
+ }
34
38
  }
35
39
  }
36
40
  }
37
- }
38
- &--lines-x {
39
- tbody {
40
- tr {
41
- td {
42
- border-bottom: 1px solid var(--gray-3-1-contrast)
41
+ &--lines-x {
42
+ tbody {
43
+ tr {
44
+ td {
45
+ border-bottom: 1px solid var(--gray-3-1-contrast)
46
+ }
43
47
  }
44
- }
45
- tr:last-child {
46
- td {
47
- border-bottom: 1px solid var(--gray-color)
48
+ tr:last-child {
49
+ td {
50
+ border-bottom: 1px solid var(--gray-color)
51
+ }
48
52
  }
49
53
  }
50
54
  }
51
- }
52
- &--v-align-center {
53
- tbody {
54
- tr {
55
- td {
56
- vertical-align: middle;
55
+ &--v-align-center {
56
+ tbody {
57
+ tr {
58
+ td {
59
+ vertical-align: middle;
60
+ }
57
61
  }
58
62
  }
59
63
  }
60
- }
61
- &--condensed {
62
- thead {
63
- tr {
64
- th {
65
- padding: var(--spacing-2xs);
64
+ &--condensed {
65
+ thead {
66
+ tr {
67
+ th {
68
+ padding: var(--spacing-2xs);
69
+ }
66
70
  }
67
71
  }
68
- }
69
- tbody {
70
- tr {
71
- td {
72
- padding: var(--spacing-2xs);
72
+ tbody {
73
+ tr {
74
+ td {
75
+ padding: var(--spacing-2xs);
76
+ }
73
77
  }
74
78
  }
75
79
  }
76
80
  }
77
- }
78
- .table-header {
79
- position: relative;
80
- &--sorted {
81
- &::before {
82
- content: '';
83
- height: 7px;
84
- width: 100%;
85
- background: var(--primary-color);
86
- display: block;
87
- position: absolute;
88
- left: 0;
89
- bottom: -4px;
90
- border-radius: var(--radius-circle);
81
+ .table-header {
82
+ position: relative;
83
+ &--sorted {
84
+ &::before {
85
+ content: '';
86
+ height: 7px;
87
+ width: 100%;
88
+ background: var(--primary-color);
89
+ display: block;
90
+ position: absolute;
91
+ left: 0;
92
+ bottom: -4px;
93
+ border-radius: var(--radius-circle);
94
+ }
91
95
  }
92
96
  }
93
97
  }
package/css/6-components/base-components/templates/_documenation-template.scss CHANGED
@@ -1,50 +1,53 @@
1
- .documentation-template {
2
- display: flex;
3
- flex-direction: row;
4
- width: 100%;
5
- max-width: var(--content-width-wide);
6
- justify-content: space-around;
7
- align-items: flex-start;
1
+ @use "../../../1-settings/class-vars";
8
2
 
9
- &__wrapper {
3
+ #{class-vars.$base-class} {
4
+ .documentation-template {
10
5
  display: flex;
11
- justify-content: center;
12
- }
6
+ flex-direction: row;
7
+ width: 100%;
8
+ max-width: var(--content-width-wide);
9
+ justify-content: space-around;
10
+ align-items: flex-start;
13
11
 
14
- &__side-panel-left {
15
- border-right: 1px solid var(--gray-border);
16
- padding: var(--documentation-padding);
17
- width: var(--documentation-left-width);
18
- }
19
- &__content {
20
- flex: 1 1 auto;
21
- max-width: var(--documentation-width);
22
- padding: var(--documentation-padding);
12
+ &__wrapper {
13
+ display: flex;
14
+ justify-content: center;
15
+ }
23
16
 
24
- h1 {
25
- margin: calc(-1 * var(--spacing-xs)) 0 0 0;
17
+ &__side-panel-left {
18
+ border-right: 1px solid var(--gray-border);
19
+ padding: var(--documentation-padding);
20
+ width: var(--documentation-left-width);
26
21
  }
27
- code {
28
- svg {
29
- height: 10px;
22
+ &__content {
23
+ flex: 1 1 auto;
24
+ max-width: var(--documentation-width);
25
+ padding: var(--documentation-padding);
26
+
27
+ h1 {
28
+ margin: calc(-1 * var(--spacing-xs)) 0 0 0;
30
29
  }
31
- }
32
- table {
33
- .props-code-wrapper {
34
- display: flex;
35
- flex-direction: row;
36
- gap: var(--spacing-xs);
37
- flex-wrap: wrap;
30
+ code {
31
+ svg {
32
+ height: 10px;
33
+ }
34
+ }
35
+ table {
36
+ .props-code-wrapper {
37
+ display: flex;
38
+ flex-direction: row;
39
+ gap: var(--spacing-xs);
40
+ flex-wrap: wrap;
41
+ }
38
42
  }
39
43
  }
40
- }
41
- &__side-panel-right{
42
- position: sticky;
43
- top: 0;
44
- border-left: 1px solid var(--gray-border);
45
- padding: var(--documentation-padding);
46
- width: var(--documentation-right-width);
47
- }
48
-
44
+ &__side-panel-right{
45
+ position: sticky;
46
+ top: 0;
47
+ border-left: 1px solid var(--gray-border);
48
+ padding: var(--documentation-padding);
49
+ width: var(--documentation-right-width);
50
+ }
49
51
 
52
+ }
50
53
  }
package/css/6-components/base-components/templates/_landing-page-template.scss CHANGED
@@ -1,10 +1,14 @@
1
- .landing-page-template {
2
- display: flex;
3
- justify-content: center;
4
- align-items: center;
5
- flex-direction: column;
1
+ @use "../../../1-settings/class-vars";
6
2
 
7
- .content-width {
8
- max-width: var(--content-width-narrow);
3
+ #{class-vars.$base-class} {
4
+ .landing-page-template {
5
+ display: flex;
6
+ justify-content: center;
7
+ align-items: center;
8
+ flex-direction: column;
9
+
10
+ .content-width {
11
+ max-width: var(--content-width-narrow);
12
+ }
9
13
  }
10
14
  }