@utahdts/utah-design-system 5.0.0 → 5.0.2

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.
@@ -370,4 +370,9 @@
370
370
  .utds-icon-after-mail-open::after {
371
371
  content: "\e93f";
372
372
  }
373
+
374
+ .utds-icon-before-ai::before,
375
+ .utds-icon-after-ai::after {
376
+ content: "\e940";
377
+ }
373
378
  }
@@ -13,6 +13,7 @@ component specific, BEM (Block, Element, Modifier)
13
13
  @use "base-components/buttons/button";
14
14
  @use "base-components/buttons/icon-button";
15
15
  @use "base-components/buttons/tag";
16
+ @use "base-components/chatbot/chatbot";
16
17
  @use "base-components/footer/footer-agency-information";
17
18
  @use "base-components/footer/footer-social-media-bar";
18
19
  @use "base-components/forms/input-wrapper";
@@ -0,0 +1,75 @@
1
+ @use "../../../1-settings/class-vars";
2
+
3
+ #{class-vars.$base-class} {
4
+ .chatbot {
5
+ &__wrapper {
6
+ max-width: calc(100% - 2 * (1rem + var(--spacing-2xs)));
7
+ }
8
+
9
+ &__input-wrapper {
10
+ label.text-area__label {
11
+ display: flex;
12
+ align-items: center;
13
+ position: relative;
14
+
15
+ &:before {
16
+ content: '\e940';
17
+ display: inline-block;
18
+ font-family: "utah design system";
19
+ font-style: normal;
20
+ font-weight: normal;
21
+ font-size: 1em;
22
+ line-height: 1;
23
+ -webkit-font-smoothing: antialiased;
24
+ -moz-osx-font-smoothing: grayscale;
25
+ position: absolute;
26
+ left: calc(-1rem - var(--spacing-2xs));
27
+ }
28
+ }
29
+ }
30
+
31
+ &__answer-wrapper {
32
+ display: flex;
33
+ flex-direction: column;
34
+ }
35
+
36
+ &__answer-user {
37
+ align-self: flex-end;
38
+ background-color: var(--gray-light-color);
39
+ padding: var(--spacing-s) var(--spacing);
40
+ border-radius: var(--radius-medium) var(--radius-medium) 0 var(--radius-medium);
41
+ margin-bottom: var(--spacing);
42
+ max-width: 85%;
43
+ position: relative;
44
+ &:after {
45
+ content: '';
46
+ display: block;
47
+ width: 0;
48
+ height: 0;
49
+ position: absolute;
50
+ bottom: 0;
51
+ right: -10px;
52
+ border-style: solid;
53
+ border-width: 5px;
54
+ border-color: transparent transparent var(--gray-light-color) var(--gray-light-color);
55
+ }
56
+ }
57
+
58
+ &__answer-ai {
59
+ position: relative;
60
+ &:before {
61
+ content: '\e940';
62
+ display: inline-block;
63
+ font-family: "utah design system";
64
+ font-style: normal;
65
+ font-weight: normal;
66
+ font-size: 1em;
67
+ line-height: 1;
68
+ -webkit-font-smoothing: antialiased;
69
+ -moz-osx-font-smoothing: grayscale;
70
+ position: absolute;
71
+ left: calc(-1rem - var(--spacing-2xs));
72
+ }
73
+ }
74
+ }
75
+ }
@@ -5,7 +5,9 @@
5
5
  &.main-menu__outer {
6
6
  position: relative;
7
7
  z-index: 2500;
8
- &:hover {
8
+
9
+ // Only elevate z-index if a child popup is currently active/visible
10
+ &:has(.popup__wrapper:not(.popup__wrapper--hidden)) {
9
11
  z-index: 4000;
10
12
  }
11
13
  }
@@ -18,7 +20,7 @@
18
20
  padding: 0 var(--spacing-l) 0 var(--spacing-xs);
19
21
 
20
22
  .utds-icon-before-search::before {
21
- font-size: 1.1rem;
23
+ font-size: 1.1rem;
22
24
  }
23
25
  }
24
26
 
@@ -52,7 +54,7 @@
52
54
  padding: var(--spacing-3xs) var(--spacing);
53
55
  margin: var(--spacing-xs) 0;
54
56
  border-radius: 999px;
55
- transition: all var(--timing-quick) ease-in-out;
57
+ transition: box-shadow var(--timing-quick) ease-in-out;
56
58
  position: relative;
57
59
  box-sizing: border-box;
58
60
  font-size: var(--font-size);
@@ -75,6 +75,7 @@
75
75
  padding: var(--spacing-2xs) var(--spacing);
76
76
  text-align: left;
77
77
  text-decoration: none;
78
+ transition: background-color var(--timing-quick) ease-in-out;
78
79
  width: 100%;
79
80
  position: relative;
80
81
 
@@ -1,3 +1,5 @@
1
+ @use "../../1-settings/class-vars";
2
+
1
3
  .utds-citizen-experience-wrapper {
2
4
  display: flex;
3
5
  justify-content: flex-end;
@@ -10,4 +12,18 @@
10
12
  .main-menu__search {
11
13
  margin-right: var(--spacing);
12
14
  }
15
+
16
+ }
17
+
18
+ #{class-vars.$base-class} {
19
+ .utds-utah-id__button {
20
+ overflow: hidden;
21
+ text-overflow: ellipsis;
22
+ -webkit-line-clamp: 2;
23
+ line-clamp: 2;
24
+ display: -webkit-box;
25
+ -webkit-box-orient: vertical;
26
+ padding: 0 var(--spacing);
27
+ }
13
28
  }
29
+
@@ -125,3 +125,16 @@
125
125
  }
126
126
  }
127
127
 
128
+ @media screen and (max-width: #{media-size-vars.$media-size-mobile}) {
129
+ .utah-design-system {
130
+ .utds {
131
+ &-title-wrapper__logo {
132
+ flex: 1 0 auto;
133
+ }
134
+ &-title-wrapper__title {
135
+ flex: 1 1 auto;
136
+ white-space: normal;
137
+ }
138
+ }
139
+ }
140
+ }
@@ -32,6 +32,12 @@
32
32
  transform: rotate(180deg);
33
33
  }
34
34
  }
35
+
36
+ &:focus-visible {
37
+ outline: 2px solid #FFF;
38
+ outline-offset: 2px;
39
+ border-radius: var(--radius-small1x);
40
+ }
35
41
  }
36
42
  }
37
43
 
@@ -72,6 +78,7 @@
72
78
  }
73
79
  .utds-official-website__button {
74
80
  width: 100%;
81
+ outline-offset: 0 !important;
75
82
  justify-content: flex-start !important;
76
83
  padding: 0 var(--spacing-l) !important;
77
84
  }
package/dist/style.css CHANGED
@@ -766,6 +766,10 @@ variables and settings
766
766
  .utah-design-system .utds-icon-after-mail-open::after {
767
767
  content: "\e93f";
768
768
  }
769
+ .utah-design-system .utds-icon-before-ai::before,
770
+ .utah-design-system .utds-icon-after-ai::after {
771
+ content: "\e940";
772
+ }
769
773
  /*
770
774
  ############ _media-size-vars.scss ############
771
775
  Media Sizes - SCSS Variables
@@ -2422,6 +2426,68 @@ component specific, BEM (Block, Element, Modifier)
2422
2426
  .utah-design-system .tag--clearable .tag--small {
2423
2427
  padding: 0 0 0 var(--spacing-xs);
2424
2428
  }
2429
+ .utah-design-system .chatbot__wrapper {
2430
+ max-width: calc(100% - 2 * (1rem + var(--spacing-2xs)));
2431
+ }
2432
+ .utah-design-system .chatbot__input-wrapper label.text-area__label {
2433
+ display: flex;
2434
+ align-items: center;
2435
+ position: relative;
2436
+ }
2437
+ .utah-design-system .chatbot__input-wrapper label.text-area__label:before {
2438
+ content: "\e940";
2439
+ display: inline-block;
2440
+ font-family: "utah design system";
2441
+ font-style: normal;
2442
+ font-weight: normal;
2443
+ font-size: 1em;
2444
+ line-height: 1;
2445
+ -webkit-font-smoothing: antialiased;
2446
+ -moz-osx-font-smoothing: grayscale;
2447
+ position: absolute;
2448
+ left: calc(-1rem - var(--spacing-2xs));
2449
+ }
2450
+ .utah-design-system .chatbot__answer-wrapper {
2451
+ display: flex;
2452
+ flex-direction: column;
2453
+ }
2454
+ .utah-design-system .chatbot__answer-user {
2455
+ align-self: flex-end;
2456
+ background-color: var(--gray-light-color);
2457
+ padding: var(--spacing-s) var(--spacing);
2458
+ border-radius: var(--radius-medium) var(--radius-medium) 0 var(--radius-medium);
2459
+ margin-bottom: var(--spacing);
2460
+ max-width: 85%;
2461
+ position: relative;
2462
+ }
2463
+ .utah-design-system .chatbot__answer-user:after {
2464
+ content: "";
2465
+ display: block;
2466
+ width: 0;
2467
+ height: 0;
2468
+ position: absolute;
2469
+ bottom: 0;
2470
+ right: -10px;
2471
+ border-style: solid;
2472
+ border-width: 5px;
2473
+ border-color: transparent transparent var(--gray-light-color) var(--gray-light-color);
2474
+ }
2475
+ .utah-design-system .chatbot__answer-ai {
2476
+ position: relative;
2477
+ }
2478
+ .utah-design-system .chatbot__answer-ai:before {
2479
+ content: "\e940";
2480
+ display: inline-block;
2481
+ font-family: "utah design system";
2482
+ font-style: normal;
2483
+ font-weight: normal;
2484
+ font-size: 1em;
2485
+ line-height: 1;
2486
+ -webkit-font-smoothing: antialiased;
2487
+ -moz-osx-font-smoothing: grayscale;
2488
+ position: absolute;
2489
+ left: calc(-1rem - var(--spacing-2xs));
2490
+ }
2425
2491
  .utah-design-system .footer-agency-information {
2426
2492
  background: var(--gray-color);
2427
2493
  color: white;
@@ -3532,7 +3598,7 @@ component specific, BEM (Block, Element, Modifier)
3532
3598
  position: relative;
3533
3599
  z-index: 2500;
3534
3600
  }
3535
- .utah-design-system.main-menu__outer:hover {
3601
+ .utah-design-system.main-menu__outer:has(.popup__wrapper:not(.popup__wrapper--hidden)) {
3536
3602
  z-index: 4000;
3537
3603
  }
3538
3604
  .utah-design-system .main-menu__wrapper {
@@ -3569,7 +3635,7 @@ component specific, BEM (Block, Element, Modifier)
3569
3635
  padding: var(--spacing-3xs) var(--spacing);
3570
3636
  margin: var(--spacing-xs) 0;
3571
3637
  border-radius: 999px;
3572
- transition: all var(--timing-quick) ease-in-out;
3638
+ transition: box-shadow var(--timing-quick) ease-in-out;
3573
3639
  position: relative;
3574
3640
  box-sizing: border-box;
3575
3641
  font-size: var(--font-size);
@@ -3916,6 +3982,7 @@ component specific, BEM (Block, Element, Modifier)
3916
3982
  padding: var(--spacing-2xs) var(--spacing);
3917
3983
  text-align: left;
3918
3984
  text-decoration: none;
3985
+ transition: background-color var(--timing-quick) ease-in-out;
3919
3986
  width: 100%;
3920
3987
  position: relative;
3921
3988
  }
@@ -5145,6 +5212,15 @@ BEM standard: Block, Element, Modifier
5145
5212
  .utds-citizen-experience-wrapper .main-menu__search {
5146
5213
  margin-right: var(--spacing);
5147
5214
  }
5215
+ .utah-design-system .utds-utah-id__button {
5216
+ overflow: hidden;
5217
+ text-overflow: ellipsis;
5218
+ -webkit-line-clamp: 2;
5219
+ line-clamp: 2;
5220
+ display: -webkit-box;
5221
+ -webkit-box-orient: vertical;
5222
+ padding: 0 var(--spacing);
5223
+ }
5148
5224
  .utah-design-system .utds-action-items-wrapper {
5149
5225
  display: flex;
5150
5226
  gap: var(--spacing);
@@ -5315,6 +5391,15 @@ BEM standard: Block, Element, Modifier
5315
5391
  font-size: 1.9rem;
5316
5392
  }
5317
5393
  }
5394
+ @media screen and (max-width: 640px) {
5395
+ .utah-design-system .utds-title-wrapper__logo {
5396
+ flex: 1 0 auto;
5397
+ }
5398
+ .utah-design-system .utds-title-wrapper__title {
5399
+ flex: 1 1 auto;
5400
+ white-space: normal;
5401
+ }
5402
+ }
5318
5403
  .utds-official-website__wrapper button {
5319
5404
  padding: 0;
5320
5405
  border: none;
@@ -5341,6 +5426,11 @@ BEM standard: Block, Element, Modifier
5341
5426
  .utds-official-website__wrapper button[aria-expanded=true] svg {
5342
5427
  transform: rotate(180deg);
5343
5428
  }
5429
+ .utds-official-website__wrapper button:focus-visible {
5430
+ outline: 2px solid #FFF;
5431
+ outline-offset: 2px;
5432
+ border-radius: var(--radius-small1x);
5433
+ }
5344
5434
  .utds-official-website__banner {
5345
5435
  padding: var(--spacing-3xs) var(--spacing-l);
5346
5436
  background: var(--gray-color);
@@ -5373,6 +5463,7 @@ BEM standard: Block, Element, Modifier
5373
5463
  }
5374
5464
  .utds-official-website__button {
5375
5465
  width: 100%;
5466
+ outline-offset: 0 !important;
5376
5467
  justify-content: flex-start !important;
5377
5468
  padding: 0 var(--spacing-l) !important;
5378
5469
  }
@@ -10,7 +10,7 @@ var package_default = {
10
10
  name: "@utahdts/utah-design-system",
11
11
  description: "Utah Design System React Library",
12
12
  displayName: "Utah Design System React Library",
13
- version: "5.0.0",
13
+ version: "5.0.2",
14
14
  exports: {
15
15
  ".": {
16
16
  "development-local": "./index.js",
@@ -73,25 +73,25 @@ var package_default = {
73
73
  peerDependencies: { "react": "^18.0.0 || ^19.0.0" },
74
74
  dependencies: {
75
75
  "@floating-ui/react-dom": "^2.1.8",
76
- "@utahdts/utah-design-system-header": "5.0.0",
76
+ "@utahdts/utah-design-system-header": "5.0.2",
77
77
  "date-fns": "4.1.0",
78
78
  "immer": "11.1.4",
79
- "lodash-es": "4.17.23",
79
+ "lodash-es": "4.18.1",
80
80
  "use-immer": "0.11.0",
81
- "uuid": "13.0.0"
81
+ "uuid": "14.0.0"
82
82
  },
83
83
  devDependencies: {
84
84
  "@types/lodash-es": "4.17.12",
85
- "@types/react": "^19.2.13",
85
+ "@types/react": "^19.2.14",
86
86
  "@vitejs/plugin-react": "^6.0.1",
87
- "@vitest/coverage-istanbul": "^4.1.2",
88
- "@vitest/ui": "^4.1.2",
89
- "jsdom": "^29.0.1",
87
+ "@vitest/coverage-istanbul": "^4.1.5",
88
+ "@vitest/ui": "^4.1.5",
89
+ "jsdom": "^29.1.1",
90
90
  "prop-types": "15.8.1",
91
- "sass": "^1.98.0",
92
- "typescript": "^6.0.2",
93
- "vite": "^8.0.3",
94
- "vitest": "^4.1.2"
91
+ "sass": "^1.99.0",
92
+ "typescript": "^6.0.3",
93
+ "vite": "^8.0.10",
94
+ "vitest": "^4.1.5"
95
95
  },
96
96
  type: "module"
97
97
  };
@@ -1234,7 +1234,7 @@ function FooterAgencyInformationColumn({ children }) {
1234
1234
  /**
1235
1235
  * @param {object} props
1236
1236
  * @param {string} props.agencyTitleFirstLine ie Utah Department of (smaller font above main title)
1237
- * @param {string} props.agencyTitleSecondLine ie Government Operations (larger font below firstLine)
1237
+ * @param {string} [props.agencyTitleSecondLine] ie Government Operations (larger font below firstLine)
1238
1238
  * @param {Address} props.address
1239
1239
  * @param {string} props.email
1240
1240
  * @param {import('react').ReactNode} props.logo
@@ -7006,6 +7006,11 @@ function TableWrapper({ allowScrollOverflow, ariaLabelledBy, children, className
7006
7006
  unregisterSortingRule: (recordFieldPath) => setState((draftState) => {
7007
7007
  delete draftState.sortingRules[recordFieldPath];
7008
7008
  }),
7009
+ /**
7010
+ * data recording per table body section so as to form a full picture of the currently exposed data
7011
+ * @param {TableDataT[] | null} allData the data for this component (or null on unmount)
7012
+ * @param {TableDataT[] | null} [filteredData] the filtered data for this component (optional, defaults to [])
7013
+ */
7009
7014
  setBodyData: (allData, filteredData) => {
7010
7015
  setState((draftState) => {
7011
7016
  draftState.tableData = {
@@ -34,12 +34,12 @@
34
34
  enumerable: true
35
35
  }) : target, mod));
36
36
  //#endregion
37
- react = __toESM(react);
37
+ react = __toESM(react, 1);
38
38
  var package_default = {
39
39
  name: "@utahdts/utah-design-system",
40
40
  description: "Utah Design System React Library",
41
41
  displayName: "Utah Design System React Library",
42
- version: "5.0.0",
42
+ version: "5.0.2",
43
43
  exports: {
44
44
  ".": {
45
45
  "development-local": "./index.js",
@@ -102,25 +102,25 @@
102
102
  peerDependencies: { "react": "^18.0.0 || ^19.0.0" },
103
103
  dependencies: {
104
104
  "@floating-ui/react-dom": "^2.1.8",
105
- "@utahdts/utah-design-system-header": "5.0.0",
105
+ "@utahdts/utah-design-system-header": "5.0.2",
106
106
  "date-fns": "4.1.0",
107
107
  "immer": "11.1.4",
108
- "lodash-es": "4.17.23",
108
+ "lodash-es": "4.18.1",
109
109
  "use-immer": "0.11.0",
110
- "uuid": "13.0.0"
110
+ "uuid": "14.0.0"
111
111
  },
112
112
  devDependencies: {
113
113
  "@types/lodash-es": "4.17.12",
114
- "@types/react": "^19.2.13",
114
+ "@types/react": "^19.2.14",
115
115
  "@vitejs/plugin-react": "^6.0.1",
116
- "@vitest/coverage-istanbul": "^4.1.2",
117
- "@vitest/ui": "^4.1.2",
118
- "jsdom": "^29.0.1",
116
+ "@vitest/coverage-istanbul": "^4.1.5",
117
+ "@vitest/ui": "^4.1.5",
118
+ "jsdom": "^29.1.1",
119
119
  "prop-types": "15.8.1",
120
- "sass": "^1.98.0",
121
- "typescript": "^6.0.2",
122
- "vite": "^8.0.3",
123
- "vitest": "^4.1.2"
120
+ "sass": "^1.99.0",
121
+ "typescript": "^6.0.3",
122
+ "vite": "^8.0.10",
123
+ "vitest": "^4.1.5"
124
124
  },
125
125
  type: "module"
126
126
  };
@@ -1263,7 +1263,7 @@
1263
1263
  /**
1264
1264
  * @param {object} props
1265
1265
  * @param {string} props.agencyTitleFirstLine ie Utah Department of (smaller font above main title)
1266
- * @param {string} props.agencyTitleSecondLine ie Government Operations (larger font below firstLine)
1266
+ * @param {string} [props.agencyTitleSecondLine] ie Government Operations (larger font below firstLine)
1267
1267
  * @param {Address} props.address
1268
1268
  * @param {string} props.email
1269
1269
  * @param {import('react').ReactNode} props.logo
@@ -7035,6 +7035,11 @@
7035
7035
  unregisterSortingRule: (recordFieldPath) => setState((draftState) => {
7036
7036
  delete draftState.sortingRules[recordFieldPath];
7037
7037
  }),
7038
+ /**
7039
+ * data recording per table body section so as to form a full picture of the currently exposed data
7040
+ * @param {TableDataT[] | null} allData the data for this component (or null on unmount)
7041
+ * @param {TableDataT[] | null} [filteredData] the filtered data for this component (optional, defaults to [])
7042
+ */
7038
7043
  setBodyData: (allData, filteredData) => {
7039
7044
  setState((draftState) => {
7040
7045
  draftState.tableData = {
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@utahdts/utah-design-system",
3
3
  "description": "Utah Design System React Library",
4
4
  "displayName": "Utah Design System React Library",
5
- "version": "5.0.0",
5
+ "version": "5.0.2",
6
6
  "exports": {
7
7
  ".": {
8
8
  "development-local": "./index.js",
@@ -69,25 +69,25 @@
69
69
  },
70
70
  "dependencies": {
71
71
  "@floating-ui/react-dom": "^2.1.8",
72
- "@utahdts/utah-design-system-header": "5.0.0",
72
+ "@utahdts/utah-design-system-header": "5.0.2",
73
73
  "date-fns": "4.1.0",
74
74
  "immer": "11.1.4",
75
- "lodash-es": "4.17.23",
75
+ "lodash-es": "4.18.1",
76
76
  "use-immer": "0.11.0",
77
- "uuid": "13.0.0"
77
+ "uuid": "14.0.0"
78
78
  },
79
79
  "devDependencies": {
80
80
  "@types/lodash-es": "4.17.12",
81
- "@types/react": "^19.2.13",
81
+ "@types/react": "^19.2.14",
82
82
  "@vitejs/plugin-react": "^6.0.1",
83
- "@vitest/coverage-istanbul": "^4.1.2",
84
- "@vitest/ui": "^4.1.2",
85
- "jsdom": "^29.0.1",
83
+ "@vitest/coverage-istanbul": "^4.1.5",
84
+ "@vitest/ui": "^4.1.5",
85
+ "jsdom": "^29.1.1",
86
86
  "prop-types": "15.8.1",
87
- "sass": "^1.98.0",
88
- "typescript": "^6.0.2",
89
- "vite": "^8.0.3",
90
- "vitest": "^4.1.2"
87
+ "sass": "^1.99.0",
88
+ "typescript": "^6.0.3",
89
+ "vite": "^8.0.10",
90
+ "vitest": "^4.1.5"
91
91
  },
92
92
  "type": "module"
93
93
  }
@@ -3,7 +3,7 @@
3
3
  /**
4
4
  * @param {object} props
5
5
  * @param {string} props.agencyTitleFirstLine ie Utah Department of (smaller font above main title)
6
- * @param {string} props.agencyTitleSecondLine ie Government Operations (larger font below firstLine)
6
+ * @param {string} [props.agencyTitleSecondLine] ie Government Operations (larger font below firstLine)
7
7
  * @param {Address} props.address
8
8
  * @param {string} props.email
9
9
  * @param {import('react').ReactNode} props.logo
@@ -100,7 +100,6 @@ export function useCurrentValuesFromStateContext({
100
100
  currentValue = defaultValueRef.current;
101
101
  }
102
102
 
103
- // @ts-expect-error I dont know how to fix this Austin
104
103
  return useMemo(
105
104
  () => ({
106
105
  currentOnChange: (
@@ -127,7 +126,7 @@ export function useCurrentValuesFromStateContext({
127
126
  setStateLocal(defaultOnChange(e));
128
127
  })
129
128
  ),
130
- currentValue: currentValue ?? '',
129
+ currentValue: currentValue ?? /** @type {any} */(''),
131
130
  setValue,
132
131
  }),
133
132
  [