@utahdts/utah-design-system 5.0.1 → 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.
- package/css/1-settings/_icons.scss +5 -0
- package/css/6-components/_components-index.scss +1 -0
- package/css/6-components/base-components/chatbot/_chatbot.scss +75 -0
- package/dist/style.css +66 -0
- package/dist/utah-design-system.es.js +3 -3
- package/dist/utah-design-system.umd.js +3 -3
- package/package.json +2 -2
- package/react/components/footer/FooterAgencyInformationInfo.jsx +1 -1
|
@@ -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
|
+
}
|
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;
|
|
@@ -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.
|
|
13
|
+
version: "5.0.2",
|
|
14
14
|
exports: {
|
|
15
15
|
".": {
|
|
16
16
|
"development-local": "./index.js",
|
|
@@ -73,7 +73,7 @@ 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.
|
|
76
|
+
"@utahdts/utah-design-system-header": "5.0.2",
|
|
77
77
|
"date-fns": "4.1.0",
|
|
78
78
|
"immer": "11.1.4",
|
|
79
79
|
"lodash-es": "4.18.1",
|
|
@@ -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
|
|
@@ -39,7 +39,7 @@
|
|
|
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.
|
|
42
|
+
version: "5.0.2",
|
|
43
43
|
exports: {
|
|
44
44
|
".": {
|
|
45
45
|
"development-local": "./index.js",
|
|
@@ -102,7 +102,7 @@
|
|
|
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.
|
|
105
|
+
"@utahdts/utah-design-system-header": "5.0.2",
|
|
106
106
|
"date-fns": "4.1.0",
|
|
107
107
|
"immer": "11.1.4",
|
|
108
108
|
"lodash-es": "4.18.1",
|
|
@@ -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
|
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.
|
|
5
|
+
"version": "5.0.2",
|
|
6
6
|
"exports": {
|
|
7
7
|
".": {
|
|
8
8
|
"development-local": "./index.js",
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
},
|
|
70
70
|
"dependencies": {
|
|
71
71
|
"@floating-ui/react-dom": "^2.1.8",
|
|
72
|
-
"@utahdts/utah-design-system-header": "5.0.
|
|
72
|
+
"@utahdts/utah-design-system-header": "5.0.2",
|
|
73
73
|
"date-fns": "4.1.0",
|
|
74
74
|
"immer": "11.1.4",
|
|
75
75
|
"lodash-es": "4.18.1",
|
|
@@ -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
|