@utahdts/utah-design-system 5.0.1 → 5.1.0

package/css/1-settings/_icons.scss

@@ -370,4 +370,14 @@
   .utds-icon-after-mail-open::after {
     content: "\e93f";
   }
+
+  .utds-icon-before-ai::before,
+  .utds-icon-after-ai::after {
+    content: "\e940";
+  }
+
+  .utds-icon-before-send::before,
+  .utds-icon-after-send::after {
+    content: "\e941";
+  }
 }

package/css/6-components/_components-index.scss

@@ -13,6 +13,7 @@ component specific, BEM (Block, Element, Modifier)
 @use "base-components/buttons/button";
 @use "base-components/buttons/icon-button";
 @use "base-components/buttons/tag";
+@use "base-components/chatbot/chatbot";
 @use "base-components/footer/footer-agency-information";
 @use "base-components/footer/footer-social-media-bar";
 @use "base-components/forms/input-wrapper";

package/css/6-components/base-components/chatbot/_chatbot.scss

@@ -0,0 +1,94 @@
+@use "../../../1-settings/class-vars";
+
+#{class-vars.$base-class} {
+  .chatbot {
+    &__wrapper {
+      max-width: calc(100% - 2 * (1rem + var(--spacing-2xs)));
+
+      .button--confirm {
+        padding: 0 var(--spacing-xs);
+      }
+    }
+
+    &__input-wrapper {
+      background: var(--gray-light-color);
+      border-radius: var(--radius-small);
+      padding: var(--spacing-s) var(--spacing);
+
+      label.text-area__label {
+        /*
+        display: flex;
+        align-items: center;
+        position: relative;
+        margin-left: calc(1rem + var(--spacing-2xs));
+
+        &:before {
+          content: '\e940';
+          display: inline-block;
+          font-family: "utah design system";
+          font-style: normal;
+          font-weight: normal;
+          font-size: 1em;
+          line-height: 1;
+          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: grayscale;
+          position: absolute;
+          left: calc(-1rem - var(--spacing-2xs));
+        }
+         */
+      }
+
+      textarea {
+        border: none;
+        background: none;
+        padding: var(--spacing-xs) 0;
+        field-sizing: content;
+      }
+    }
+
+    &__answer-wrapper {
+      display: flex;
+      flex-direction: column;
+    }
+
+    &__answer-user {
+      align-self: flex-end;
+      background-color: var(--gray-light-color);
+      padding: var(--spacing-s) var(--spacing);
+      border-radius: var(--radius-medium) var(--radius-medium) 0 var(--radius-medium);
+      margin-bottom: var(--spacing);
+      max-width: 85%;
+      position: relative;
+      &:after {
+        content: '';
+        display: block;
+        width: 0;
+        height: 0;
+        position: absolute;
+        bottom: 0;
+        right: -10px;
+        border-style: solid;
+        border-width: 5px;
+        border-color: transparent transparent var(--gray-light-color) var(--gray-light-color);
+      }
+    }
+
+    &__answer-ai {
+      position: relative;
+      padding-left: calc(1rem + var(--spacing-2xs));
+      &:before {
+        content: '\e940';
+        display: inline-block;
+        font-family: "utah design system";
+        font-style: normal;
+        font-weight: normal;
+        font-size: 1em;
+        line-height: 1;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        position: absolute;
+        left: 0;
+      }
+    }
+  }
+}

package/css/6-components/base-components/templates/_on-this-page.scss

@@ -1,4 +1,5 @@
 @use "../../../1-settings/class-vars";
+@use "../../../1-settings/media-size-vars";
 
 #{class-vars.$base-class} {
   .on-this-page {
@@ -31,3 +32,13 @@
     }
   }
 }
+
+@media screen and (max-width: #{media-size-vars.$media-size-tablet-portrait}) {
+  #{class-vars.$base-class} {
+    .on-this-page__list {
+      .back-to-top {
+        display: none;
+      }
+    }
+  }
+}

package/dist/style.css

@@ -766,6 +766,14 @@ variables and settings
 .utah-design-system .utds-icon-after-mail-open::after {
   content: "\e93f";
 }
+.utah-design-system .utds-icon-before-ai::before,
+.utah-design-system .utds-icon-after-ai::after {
+  content: "\e940";
+}
+.utah-design-system .utds-icon-before-send::before,
+.utah-design-system .utds-icon-after-send::after {
+  content: "\e941";
+}
 /*
 ############     _media-size-vars.scss      ############
 Media Sizes - SCSS Variables
@@ -2422,6 +2430,87 @@ component specific, BEM (Block, Element, Modifier)
 .utah-design-system .tag--clearable .tag--small {
   padding: 0 0 0 var(--spacing-xs);
 }
+.utah-design-system .chatbot__wrapper {
+  max-width: calc(100% - 2 * (1rem + var(--spacing-2xs)));
+}
+.utah-design-system .chatbot__wrapper .button--confirm {
+  padding: 0 var(--spacing-xs);
+}
+.utah-design-system .chatbot__input-wrapper {
+  background: var(--gray-light-color);
+  border-radius: var(--radius-small);
+  padding: var(--spacing-s) var(--spacing);
+}
+.utah-design-system .chatbot__input-wrapper label.text-area__label {
+  /*
+  display: flex;
+  align-items: center;
+  position: relative;
+  margin-left: calc(1rem + var(--spacing-2xs));
+
+  &:before {
+    content: '\e940';
+    display: inline-block;
+    font-family: "utah design system";
+    font-style: normal;
+    font-weight: normal;
+    font-size: 1em;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    position: absolute;
+    left: calc(-1rem - var(--spacing-2xs));
+  }
+   */
+}
+.utah-design-system .chatbot__input-wrapper textarea {
+  border: none;
+  background: none;
+  padding: var(--spacing-xs) 0;
+  field-sizing: content;
+}
+.utah-design-system .chatbot__answer-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+.utah-design-system .chatbot__answer-user {
+  align-self: flex-end;
+  background-color: var(--gray-light-color);
+  padding: var(--spacing-s) var(--spacing);
+  border-radius: var(--radius-medium) var(--radius-medium) 0 var(--radius-medium);
+  margin-bottom: var(--spacing);
+  max-width: 85%;
+  position: relative;
+}
+.utah-design-system .chatbot__answer-user:after {
+  content: "";
+  display: block;
+  width: 0;
+  height: 0;
+  position: absolute;
+  bottom: 0;
+  right: -10px;
+  border-style: solid;
+  border-width: 5px;
+  border-color: transparent transparent var(--gray-light-color) var(--gray-light-color);
+}
+.utah-design-system .chatbot__answer-ai {
+  position: relative;
+  padding-left: calc(1rem + var(--spacing-2xs));
+}
+.utah-design-system .chatbot__answer-ai:before {
+  content: "\e940";
+  display: inline-block;
+  font-family: "utah design system";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 1em;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  position: absolute;
+  left: 0;
+}
 .utah-design-system .footer-agency-information {
   background: var(--gray-color);
   color: white;
@@ -5084,6 +5173,11 @@ BEM standard: Block, Element, Modifier
   box-shadow: inset 0 0 0 1000px var(--hover-gray-color);
   color: var(--primary-color);
 }
+@media screen and (max-width: 768px) {
+  .utah-design-system .on-this-page__list .back-to-top {
+    display: none;
+  }
+}
 /* ---- Project Components ---- */
 /*
 ############     _popup.scss      ############

package/dist/utah-design-system.es.js

@@ -10,7 +10,7 @@ var package_default = {
 	name: "@utahdts/utah-design-system",
 	description: "Utah Design System React Library",
 	displayName: "Utah Design System React Library",
-	version: "5.0.1",
+	version: "5.1.0",
 	exports: {
 		".": {
 			"development-local": "./index.js",
@@ -73,7 +73,7 @@ var package_default = {
 	peerDependencies: { "react": "^18.0.0 || ^19.0.0" },
 	dependencies: {
 		"@floating-ui/react-dom": "^2.1.8",
-		"@utahdts/utah-design-system-header": "5.0.1",
+		"@utahdts/utah-design-system-header": "5.1.0",
 		"date-fns": "4.1.0",
 		"immer": "11.1.4",
 		"lodash-es": "4.18.1",
@@ -702,7 +702,10 @@ function Accordion({ children, className, contentClassName, headingLevel = 2, he
 			id: `accordion-button__${id}`,
 			onClick: handleEvent(toggleAccordion),
 			type: "button",
-			children: [/* @__PURE__ */ jsx(HeadingTag, { children: headerContent }), /* @__PURE__ */ jsx("span", {
+			children: [/* @__PURE__ */ jsx(HeadingTag, {
+				id: `accordion-heading__${id}`,
+				children: headerContent
+			}), /* @__PURE__ */ jsx("span", {
 				className: `utds-icon-before-circle-chevron-up icon-button__icon ${stateIsOpen ? "" : "icon-button__icon--rotate180"}`,
 				"aria-hidden": "true"
 			})]
@@ -1234,7 +1237,7 @@ function FooterAgencyInformationColumn({ children }) {
 /**
 * @param {object} props
 * @param {string} props.agencyTitleFirstLine ie Utah Department of (smaller font above main title)
-* @param {string} props.agencyTitleSecondLine ie Government Operations (larger font below firstLine)
+* @param {string} [props.agencyTitleSecondLine] ie Government Operations (larger font below firstLine)
 * @param {Address} props.address
 * @param {string} props.email
 * @param {import('react').ReactNode} props.logo
@@ -4440,19 +4443,26 @@ function htmlDecode(input) {
 /**
 * @param {object} props
 * @param {HierarchyNode[]} props.headersLevel
+* @param {boolean} [props.backToTop]
 * @returns {import('react').JSX.Element}
 */
-function OnThisPageHeadersLevel({ headersLevel }) {
-	return /* @__PURE__ */ jsx("ul", {
+function OnThisPageHeadersLevel({ headersLevel, backToTop = false }) {
+	return /* @__PURE__ */ jsxs("ul", {
 		className: "on-this-page__list",
-		children: headersLevel.map((header) => {
+		children: [backToTop ? /* @__PURE__ */ jsx("li", {
+			className: "back-to-top",
+			children: /* @__PURE__ */ jsx("a", {
+				href: "#",
+				children: "Back to top"
+			})
+		}) : "", headersLevel.map((header) => {
 			let node = null;
 			if (header.node.id) node = /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("a", {
 				href: `#${header.node.id}`,
 				children: htmlDecode(header.node.innerHTML)
 			}), header.children?.length ? /* @__PURE__ */ jsx(OnThisPageHeadersLevel, { headersLevel: header.children }) : null] }, `on-this-page-ul-${header.node.id}`);
 			return node;
-		})
+		})]
 	});
 }
 //#endregion
@@ -4536,20 +4546,13 @@ function OnThisPage({ contentRef }) {
 	const headersTree = groupElementsByHeaderLevel(findElementsByTagNameMatch(contentRef.current));
 	return /* @__PURE__ */ jsx("div", {
 		className: "on-this-page",
-		children: headersTree?.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
-			/* @__PURE__ */ jsx("h2", {
-				className: "on-this-page__header",
-				children: "On this page"
-			}),
-			/* @__PURE__ */ jsx("ul", {
-				className: "on-this-page__list",
-				children: /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
-					href: "#",
-					children: "Back to top"
-				}) })
-			}),
-			/* @__PURE__ */ jsx(OnThisPageHeadersLevel, { headersLevel: headersTree })
-		] }) : null
+		children: headersTree?.length ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("h2", {
+			className: "on-this-page__header",
+			children: "On this page"
+		}), /* @__PURE__ */ jsx(OnThisPageHeadersLevel, {
+			headersLevel: headersTree,
+			backToTop: true
+		})] }) : null
 	});
 }
 //#endregion

package/dist/utah-design-system.umd.js

@@ -39,7 +39,7 @@
 		name: "@utahdts/utah-design-system",
 		description: "Utah Design System React Library",
 		displayName: "Utah Design System React Library",
-		version: "5.0.1",
+		version: "5.1.0",
 		exports: {
 			".": {
 				"development-local": "./index.js",
@@ -102,7 +102,7 @@
 		peerDependencies: { "react": "^18.0.0 || ^19.0.0" },
 		dependencies: {
 			"@floating-ui/react-dom": "^2.1.8",
-			"@utahdts/utah-design-system-header": "5.0.1",
+			"@utahdts/utah-design-system-header": "5.1.0",
 			"date-fns": "4.1.0",
 			"immer": "11.1.4",
 			"lodash-es": "4.18.1",
@@ -731,7 +731,10 @@
 				id: `accordion-button__${id}`,
 				onClick: handleEvent(toggleAccordion),
 				type: "button",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeadingTag, { children: headerContent }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeadingTag, {
+					id: `accordion-heading__${id}`,
+					children: headerContent
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: `utds-icon-before-circle-chevron-up icon-button__icon ${stateIsOpen ? "" : "icon-button__icon--rotate180"}`,
 					"aria-hidden": "true"
 				})]
@@ -1263,7 +1266,7 @@
 	/**
 	* @param {object} props
 	* @param {string} props.agencyTitleFirstLine ie Utah Department of (smaller font above main title)
-	* @param {string} props.agencyTitleSecondLine ie Government Operations (larger font below firstLine)
+	* @param {string} [props.agencyTitleSecondLine] ie Government Operations (larger font below firstLine)
 	* @param {Address} props.address
 	* @param {string} props.email
 	* @param {import('react').ReactNode} props.logo
@@ -4469,19 +4472,26 @@
 	/**
 	* @param {object} props
 	* @param {HierarchyNode[]} props.headersLevel
+	* @param {boolean} [props.backToTop]
 	* @returns {import('react').JSX.Element}
 	*/
-	function OnThisPageHeadersLevel({ headersLevel }) {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+	function OnThisPageHeadersLevel({ headersLevel, backToTop = false }) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ul", {
 			className: "on-this-page__list",
-			children: headersLevel.map((header) => {
+			children: [backToTop ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+				className: "back-to-top",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+					href: "#",
+					children: "Back to top"
+				})
+			}) : "", headersLevel.map((header) => {
 				let node = null;
 				if (header.node.id) node = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
 					href: `#${header.node.id}`,
 					children: htmlDecode(header.node.innerHTML)
 				}), header.children?.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OnThisPageHeadersLevel, { headersLevel: header.children }) : null] }, `on-this-page-ul-${header.node.id}`);
 				return node;
-			})
+			})]
 		});
 	}
 	//#endregion
@@ -4565,20 +4575,13 @@
 		const headersTree = groupElementsByHeaderLevel(findElementsByTagNameMatch(contentRef.current));
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "on-this-page",
-			children: headersTree?.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
-					className: "on-this-page__header",
-					children: "On this page"
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-					className: "on-this-page__list",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-						href: "#",
-						children: "Back to top"
-					}) })
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(OnThisPageHeadersLevel, { headersLevel: headersTree })
-			] }) : null
+			children: headersTree?.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+				className: "on-this-page__header",
+				children: "On this page"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OnThisPageHeadersLevel, {
+				headersLevel: headersTree,
+				backToTop: true
+			})] }) : null
 		});
 	}
 	//#endregion

package/package.json

@@ -2,7 +2,7 @@
   "name": "@utahdts/utah-design-system",
   "description": "Utah Design System React Library",
   "displayName": "Utah Design System React Library",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "exports": {
     ".": {
       "development-local": "./index.js",
@@ -69,7 +69,7 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.8",
-    "@utahdts/utah-design-system-header": "5.0.1",
+    "@utahdts/utah-design-system-header": "5.1.0",
     "date-fns": "4.1.0",
     "immer": "11.1.4",
     "lodash-es": "4.18.1",

package/react/components/containers/accordion/Accordion.jsx

@@ -52,7 +52,7 @@ export function Accordion({
         type="button"
       >
         {/* @ts-expect-error */}
-        <HeadingTag>{headerContent}</HeadingTag>
+        <HeadingTag id={`accordion-heading__${id}`}>{headerContent}</HeadingTag>
         <span className={`utds-icon-before-circle-chevron-up icon-button__icon ${stateIsOpen ? '' : 'icon-button__icon--rotate180'}`} aria-hidden="true" />
       </button>
 

package/react/components/footer/FooterAgencyInformationInfo.jsx

@@ -3,7 +3,7 @@
 /**
  * @param {object} props
  * @param {string} props.agencyTitleFirstLine ie Utah Department of (smaller font above main title)
- * @param {string} props.agencyTitleSecondLine ie Government Operations (larger font below firstLine)
+ * @param {string} [props.agencyTitleSecondLine] ie Government Operations (larger font below firstLine)
  * @param {Address} props.address
  * @param {string} props.email
  * @param {import('react').ReactNode} props.logo

package/react/components/navigation/OnThisPage.jsx

@@ -18,13 +18,7 @@ export function OnThisPage({ contentRef }) {
           ? (
             <>
               <h2 className="on-this-page__header">On this page</h2>
-              <ul className="on-this-page__list">
-                <li>
-                  {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-                  <a href="#">Back to top</a>
-                </li>
-              </ul>
-              <OnThisPageHeadersLevel headersLevel={headersTree} />
+              <OnThisPageHeadersLevel headersLevel={headersTree} backToTop={true}/>
             </>
           )
           : null

package/react/components/navigation/OnThisPageHeadersLevel.jsx

@@ -13,11 +13,13 @@ import { htmlDecode } from '../../util/htmlDecode';
 /**
  * @param {object} props
  * @param {HierarchyNode[]} props.headersLevel
+ * @param {boolean} [props.backToTop]
  * @returns {import('react').JSX.Element}
  */
-export function OnThisPageHeadersLevel({ headersLevel }) {
+export function OnThisPageHeadersLevel({ headersLevel, backToTop = false }) {
   return (
     <ul className="on-this-page__list">
+      {backToTop ? <li className="back-to-top"><a href="#">Back to top</a></li> : ''}
       {
         headersLevel.map((header) => {
           let node = null;