@utahdts/utah-design-system 1.1.1 → 1.2.0

package/dist/style.css

@@ -1,8 +1,37 @@
 /*
+BEM standard: Block, Element, Modifier
+   Block: use dashes to separate words:
+     - my-react-component
+     - super-list
+     - cats-r-great
+  Element: use two underscores for elements
+    Elements are children at any level of the Block:
+    - my-react-component__block
+    - super-list__name
+    - super-list__info
+    - cats-r-great__whiskers
+  Modifier: use two dashes for modifiers
+    - my-react-component--alt
+    - super-list--flat
+    - cats-r-great--black
+ */
+/*
+############     _settings-index.scss      ############
+variables and settings
+*/
+/*
 ############     _class-vars.scss      ############
 CSS Classes - SCSS Variables
 */
 /*
+############     _settings-index.scss      ############
+variables and settings
+*/
+/*
+############     _settings-index.scss      ############
+variables and settings
+*/
+/*
 ############     _spacing.scss      ############
 8px horizontal spacing
 */
@@ -205,6 +234,10 @@ CSS Classes - SCSS Variables
   margin-bottom: auto;
 }
 
+/*
+############     _settings-index.scss      ############
+variables and settings
+*/
 /*
 ############     _font-size.scss      ############
 Grid variables
@@ -242,6 +275,10 @@ Grid variables
   grid-column: span 2;
 }
 
+/*
+############     _settings-index.scss      ############
+variables and settings
+*/
 /*
 ############     _font-size.scss      ############
 Font size variables
@@ -350,6 +387,10 @@ Font size variables
 ############     _color-swatches.scss      ############
 base color swatches for the design system
 */
+/*
+############     _settings-index.scss      ############
+variables and settings
+*/
 /* Generated by Glyphter (http://www.glyphter.com) on  Fri Jan 20 2023*/
 @font-face {
   font-family: "utah design system";
@@ -552,10 +593,6 @@ base color swatches for the design system
 ############     _media-size-vars.scss      ############
 Media Sizes - SCSS Variables
 */
-/*
-############     _settings-index.scss      ############
-variables and settings
-*/
 .utah-design-system {
   /* color */
   /* ######## Pick these colors to match your desired style ######## */
@@ -712,27 +749,22 @@ variables and settings
 }
 
 /*
-BEM standard: Block, Element, Modifier
-   Block: use dashes to separate words:
-     - my-react-component
-     - super-list
-     - cats-r-great
-  Element: use two underscores for elements
-    Elements are children at any level of the Block:
-    - my-react-component__block
-    - super-list__name
-    - super-list__info
-    - cats-r-great__whiskers
-  Modifier: use two dashes for modifiers
-    - my-react-component--alt
-    - super-list--flat
-    - cats-r-great--black
- */
+############     _settings-index.scss      ############
+variables and settings
+*/
 /*
 ############     _class-vars.scss      ############
 CSS Classes - SCSS Variables
 */
 /*
+############     _settings-index.scss      ############
+variables and settings
+*/
+/*
+############     _settings-index.scss      ############
+variables and settings
+*/
+/*
 ############     _spacing.scss      ############
 8px horizontal spacing
 */
@@ -991,6 +1023,10 @@ CSS Classes - SCSS Variables
   margin-bottom: auto;
 }
 
+/*
+############     _settings-index.scss      ############
+variables and settings
+*/
 /*
 ############     _font-size.scss      ############
 Grid variables
@@ -1032,6 +1068,10 @@ Grid variables
   grid-column: span 2;
 }
 
+/*
+############     _settings-index.scss      ############
+variables and settings
+*/
 /*
 ############     _font-size.scss      ############
 Font size variables
@@ -1140,6 +1180,10 @@ Font size variables
 ############     _color-swatches.scss      ############
 base color swatches for the design system
 */
+/*
+############     _settings-index.scss      ############
+variables and settings
+*/
 /* Generated by Glyphter (http://www.glyphter.com) on  Fri Jan 20 2023*/
 @font-face {
   font-family: "utah design system";
@@ -1384,10 +1428,6 @@ base color swatches for the design system
 ############     _media-size-vars.scss      ############
 Media Sizes - SCSS Variables
 */
-/*
-############     _settings-index.scss      ############
-variables and settings
-*/
 .utah-design-system {
   /* color */
   /* ######## Pick these colors to match your desired style ######## */
@@ -1685,6 +1725,12 @@ containers and general design patterns, 2up, 3up, layout grids, etc.
   line-height: 1.6rem;
 }
 
+/*
+############     _components-index.scss      ############
+component specific, BEM (Block, Element, Modifier)
+@media for each component should be contained with the component.
+*/
+/* ---- Base Components ---- */
 /*
 ############     _class-vars.scss      ############
 CSS Classes - SCSS Variables
@@ -1880,7 +1926,8 @@ CSS Classes - SCSS Variables
 /*
 ############     _tools-index.scss      ############
 scss mixins and functions
-*/ /*
+*/
+/*
 ############     _button.scss      ############
 */
 .utah-design-system {
@@ -3362,6 +3409,35 @@ base color swatches for the design system
   color: var(--primary-color);
 }
 
+/*
+BEM standard: Block, Element, Modifier
+   Block: use dashes to separate words:
+     - my-react-component
+     - super-list
+     - cats-r-great
+  Element: use two underscores for elements
+    Elements are children at any level of the Block:
+    - my-react-component__block
+    - super-list__name
+    - super-list__info
+    - cats-r-great__whiskers
+  Modifier: use two dashes for modifiers
+    - my-react-component--alt
+    - super-list--flat
+    - cats-r-great--black
+ */
+/*
+############     _settings-index.scss      ############
+variables and settings
+*/
+/*
+############     _settings-index.scss      ############
+variables and settings
+*/
+/*
+############     _settings-index.scss      ############
+variables and settings
+*/
 /*
 ############     _spacing.scss      ############
 8px horizontal spacing
@@ -3621,6 +3697,10 @@ base color swatches for the design system
   margin-bottom: auto;
 }
 
+/*
+############     _settings-index.scss      ############
+variables and settings
+*/
 /*
 ############     _font-size.scss      ############
 Grid variables
@@ -3662,6 +3742,10 @@ Grid variables
   grid-column: span 2;
 }
 
+/*
+############     _settings-index.scss      ############
+variables and settings
+*/
 /*
 ############     _font-size.scss      ############
 Font size variables
@@ -3766,6 +3850,10 @@ Font size variables
   font-weight: var(--font-weight-black);
 }
 
+/*
+############     _settings-index.scss      ############
+variables and settings
+*/
 /* Generated by Glyphter (http://www.glyphter.com) on  Fri Jan 20 2023*/
 @font-face {
   font-family: "utah design system";
@@ -4010,10 +4098,6 @@ Font size variables
 ############     _media-size-vars.scss      ############
 Media Sizes - SCSS Variables
 */
-/*
-############     _settings-index.scss      ############
-variables and settings
-*/
 .utah-design-system {
   /* color */
   /* ######## Pick these colors to match your desired style ######## */
@@ -4314,6 +4398,23 @@ variables and settings
   border-left: 1px solid var(--gray-3-1-contrast);
 }
 
+/*
+BEM standard: Block, Element, Modifier
+   Block: use dashes to separate words:
+     - my-react-component
+     - super-list
+     - cats-r-great
+  Element: use two underscores for elements
+    Elements are children at any level of the Block:
+    - my-react-component__block
+    - super-list__name
+    - super-list__info
+    - cats-r-great__whiskers
+  Modifier: use two dashes for modifiers
+    - my-react-component--alt
+    - super-list--flat
+    - cats-r-great--black
+ */
 .utah-design-system .tooltip__wrapper {
   position: absolute;
   z-index: 110;
@@ -4400,6 +4501,23 @@ variables and settings
   left: -3px;
 }
 
+/*
+BEM standard: Block, Element, Modifier
+   Block: use dashes to separate words:
+     - my-react-component
+     - super-list
+     - cats-r-great
+  Element: use two underscores for elements
+    Elements are children at any level of the Block:
+    - my-react-component__block
+    - super-list__name
+    - super-list__info
+    - cats-r-great__whiskers
+  Modifier: use two dashes for modifiers
+    - my-react-component--alt
+    - super-list--flat
+    - cats-r-great--black
+ */
 .utah-design-system .modal-backdrop {
   position: fixed;
   width: 100vw;
@@ -4409,6 +4527,23 @@ variables and settings
   z-index: 1000;
 }
 
+/*
+BEM standard: Block, Element, Modifier
+   Block: use dashes to separate words:
+     - my-react-component
+     - super-list
+     - cats-r-great
+  Element: use two underscores for elements
+    Elements are children at any level of the Block:
+    - my-react-component__block
+    - super-list__name
+    - super-list__info
+    - cats-r-great__whiskers
+  Modifier: use two dashes for modifiers
+    - my-react-component--alt
+    - super-list--flat
+    - cats-r-great--black
+ */
 .utah-design-system .search-modal__form {
   position: fixed;
   top: 25%;
@@ -4789,6 +4924,7 @@ variables and settings
   color: var(--primary-color);
 }
 
+/* ---- Project Components ---- */
 /*
 ############     _popup.scss      ############
 */
@@ -4845,12 +4981,9 @@ variables and settings
 }
 
 /*
-############     _components-index.scss      ############
-component specific, BEM (Block, Element, Modifier)
-@media for each component should be contained with the component.
+############     _utilities.scss      ############
+utility classes, atomic css
 */
-/* ---- Base Components ---- */
-/* ---- Project Components ---- */
 @keyframes fade-in {
   0% {
     opacity: 0;
@@ -4889,10 +5022,6 @@ component specific, BEM (Block, Element, Modifier)
     transform: scale(1) translateX(-50%);
   }
 }
-/*
-############     _utilities.scss      ############
-utility classes, atomic css
-*/
 .content-width {
   width: 100%;
   max-width: var(--content-width);
@@ -5146,6 +5275,10 @@ utility classes, atomic css
   white-space: nowrap;
 }
 
+/*
+############     _super-index.scss      ############
+Overall overrides, @media, themes, etc. that supersede styles higher in the pyramid
+*/
 /*
 PRINT SCSS
  */
@@ -5177,10 +5310,6 @@ PRINT SCSS
   }
 }
 /*
-############     _super-index.scss      ############
-Overall overrides, @media, themes, etc. that supersede styles higher in the pyramid
-*/
-/*
 ############     _tip-index.scss      ############
 A place to add css temporarily
 NOTE: CSS added this this file should eventually be removed or

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

@@ -7,7 +7,7 @@ const index = "";
 const name = "@utahdts/utah-design-system";
 const description = "Utah Design System React Library";
 const displayName = "Utah Design System React Library";
-const version$1 = "1.1.1";
+const version$1 = "1.2.0";
 const exports = {
   ".": {
     "development-local": "./index.js",
@@ -64,7 +64,7 @@ const bugs = {
 };
 const homepage = "https://github.com/utahdts/utah-design-system";
 const dependencies = {
-  "@utahdts/utah-design-system-header": "1.1.1",
+  "@utahdts/utah-design-system-header": "1.2.0",
   lodash: "4.17.21",
   "prop-types": "15.8.1",
   react: "18.x",
@@ -74,14 +74,14 @@ const dependencies = {
   uuid: "9.0.0"
 };
 const devDependencies = {
-  "@types/react": "18.2.15",
+  "@types/react": "18.2.18",
   "@types/react-dom": "18.2.7",
-  "@vitejs/plugin-react": "4.0.3",
-  "@vitest/coverage-istanbul": "0.33.0",
+  "@vitejs/plugin-react": "4.0.4",
+  "@vitest/coverage-istanbul": "0.34.1",
   jsdom: "22.1.0",
-  sass: "1.63.6",
-  vite: "4.4.4",
-  vitest: "0.33.0"
+  sass: "1.64.2",
+  vite: "4.4.8",
+  vitest: "0.34.1"
 };
 const type = "module";
 const packageJson = {
@@ -5102,6 +5102,7 @@ function OnThisPage({ contentRef }) {
   const headersTree = groupElementsByHeaderLevel(headers);
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "on-this-page", children: (headersTree == null ? void 0 : headersTree.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "on-this-page__header", children: "On this page" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "on-this-page__list", children: /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: "#", children: "Back to top" }) }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(OnThisPageHeadersLevel, { headersLevel: headersTree })
   ] }) : null });
 }

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

@@ -23,7 +23,7 @@
   const name = "@utahdts/utah-design-system";
   const description = "Utah Design System React Library";
   const displayName = "Utah Design System React Library";
-  const version$1 = "1.1.1";
+  const version$1 = "1.2.0";
   const exports$1 = {
     ".": {
       "development-local": "./index.js",
@@ -80,7 +80,7 @@
   };
   const homepage = "https://github.com/utahdts/utah-design-system";
   const dependencies = {
-    "@utahdts/utah-design-system-header": "1.1.1",
+    "@utahdts/utah-design-system-header": "1.2.0",
     lodash: "4.17.21",
     "prop-types": "15.8.1",
     react: "18.x",
@@ -90,14 +90,14 @@
     uuid: "9.0.0"
   };
   const devDependencies = {
-    "@types/react": "18.2.15",
+    "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7",
-    "@vitejs/plugin-react": "4.0.3",
-    "@vitest/coverage-istanbul": "0.33.0",
+    "@vitejs/plugin-react": "4.0.4",
+    "@vitest/coverage-istanbul": "0.34.1",
     jsdom: "22.1.0",
-    sass: "1.63.6",
-    vite: "4.4.4",
-    vitest: "0.33.0"
+    sass: "1.64.2",
+    vite: "4.4.8",
+    vitest: "0.34.1"
   };
   const type = "module";
   const packageJson = {
@@ -5118,6 +5118,7 @@
     const headersTree = groupElementsByHeaderLevel(headers);
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "on-this-page", children: (headersTree == null ? void 0 : headersTree.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "on-this-page__header", children: "On this page" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "on-this-page__list", children: /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: "#", children: "Back to top" }) }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(OnThisPageHeadersLevel, { headersLevel: headersTree })
     ] }) : null });
   }

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": "1.1.1",
+  "version": "1.2.0",
   "exports": {
     ".": {
       "development-local": "./index.js",
@@ -59,7 +59,7 @@
   },
   "homepage": "https://github.com/utahdts/utah-design-system",
   "dependencies": {
-    "@utahdts/utah-design-system-header": "1.1.1",
+    "@utahdts/utah-design-system-header": "1.2.0",
     "lodash": "4.17.21",
     "prop-types": "15.8.1",
     "react": "18.x",
@@ -69,14 +69,14 @@
     "uuid": "9.0.0"
   },
   "devDependencies": {
-    "@types/react": "18.2.15",
+    "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7",
-    "@vitejs/plugin-react": "4.0.3",
-    "@vitest/coverage-istanbul": "0.33.0",
+    "@vitejs/plugin-react": "4.0.4",
+    "@vitest/coverage-istanbul": "0.34.1",
     "jsdom": "22.1.0",
-    "sass": "1.63.6",
-    "vite": "4.4.4",
-    "vitest": "0.33.0"
+    "sass": "1.64.2",
+    "vite": "4.4.8",
+    "vitest": "0.34.1"
   },
   "type": "module"
 }

package/react/components/navigation/OnThisPage.jsx

@@ -19,6 +19,12 @@ 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} />
             </>
           )