@utahdts/utah-design-system 5.0.2 → 5.1.0

package/css/1-settings/_icons.scss

@@ -375,4 +375,9 @@
   .utds-icon-after-ai::after {
     content: "\e940";
   }
+
+  .utds-icon-before-send::before,
+  .utds-icon-after-send::after {
+    content: "\e941";
+  }
 }

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

@@ -4,13 +4,23 @@
   .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';
@@ -25,6 +35,14 @@
           position: absolute;
           left: calc(-1rem - var(--spacing-2xs));
         }
+         */
+      }
+
+      textarea {
+        border: none;
+        background: none;
+        padding: var(--spacing-xs) 0;
+        field-sizing: content;
       }
     }
 
@@ -57,6 +75,7 @@
 
     &__answer-ai {
       position: relative;
+      padding-left: calc(1rem + var(--spacing-2xs));
       &:before {
         content: '\e940';
         display: inline-block;
@@ -68,7 +87,7 @@
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
         position: absolute;
-        left: calc(-1rem - var(--spacing-2xs));
+        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

@@ -770,6 +770,10 @@ variables and settings
 .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
@@ -2429,23 +2433,41 @@ component specific, BEM (Block, Element, Modifier)
 .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 label.text-area__label: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;
@@ -2474,6 +2496,7 @@ component specific, BEM (Block, Element, Modifier)
 }
 .utah-design-system .chatbot__answer-ai {
   position: relative;
+  padding-left: calc(1rem + var(--spacing-2xs));
 }
 .utah-design-system .chatbot__answer-ai:before {
   content: "\e940";
@@ -2486,7 +2509,7 @@ component specific, BEM (Block, Element, Modifier)
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   position: absolute;
-  left: calc(-1rem - var(--spacing-2xs));
+  left: 0;
 }
 .utah-design-system .footer-agency-information {
   background: var(--gray-color);
@@ -5150,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.2",
+	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.2",
+		"@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"
 			})]
@@ -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.2",
+		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.2",
+			"@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"
 				})]
@@ -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.2",
+  "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.2",
+    "@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/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;