update navigateTo routes API method to deal with dashboard routes that have # id's, and start adding id's to settings items

src/core/api/Routes.js

@@ -239,8 +239,38 @@ export default class Routes extends API {
       } else {
         path = pathOrRouteId;
       }
-      // Go to route
-      router.transitionTo(path);
+
+      /**
+       * Check if it's a Vizality route and has a # in the path.
+       */
+      if (path.startsWith('/vizality/') && path.includes('#')) {
+        router.transitionTo(path);
+        const hash = path.split('#')[1];
+        /**
+         * This is bad, but currently it's the only way I really know how to do it.
+         * We're adding a timeout here so that we can give the new route page elements
+         * (topOfElement and scroller) time to load into the DOM.
+         */
+        return setTimeout(() => {
+          const topOfElement = document.querySelector(`#${hash}`)?.offsetTop;
+          const scroller = document.querySelector('.vz-dashboard-scroller');
+          /**
+           * If the elements don't exist at the check, just load the page normally as if
+           * there was no hash.
+           */
+          if (!topOfElement || !scroller) {
+            return;
+          }
+          /**
+           * Try to set the scroller position to the hash element.
+           */
+          return scroller.scroll({ top: topOfElement - 30 });
+        }, 250);
+      }
+      /**
+       * Go to the route.
+       */
+      return router.transitionTo(path);
     } catch (err) {
       return this.error(err);
     }

src/core/modules/components/settings/ButtonItem.jsx

@@ -1,31 +1,40 @@
-import React, { memo } from 'react';
-
 import { getModule, getModuleByDisplayName } from '@vizality/webpack';
 import { joinClassNames } from '@vizality/util/dom';
+import { toKebabCase } from '@vizality/util/string';
+import { getCaller } from '@vizality/util/file';
+import { motion } from 'framer-motion';
+import React, { memo } from 'react';
 
 import { FormItem, FormText, Tooltip, Button, Divider } from '..';
 
+/**
+ * 
+ * @component
+ * @returns {React.MemoExoticComponent<function(): React.ReactElement>}
+ */
 export default memo(props => {
-  const { note, children, tooltipText, tooltipPosition, success, color, disabled, onClick, button } = props;
-
+  const { note, children, tooltipText, tooltipPosition, success, color, disabled, onClick, button, id } = props;
   const Flex = getModuleByDisplayName('Flex');
   const flex = joinClassNames(Flex.Direction.VERTICAL, Flex.Justify.START, Flex.Align.STRETCH, Flex.Wrap.NO_WRAP);
-  const { marginBottom20 } = getModule('marginTop20');
   const { description } = getModule('formText', 'description');
+  const { marginBottom20 } = getModule('marginTop20');
   const { labelRow, title } = getModule('labelRow');
-
   return (
-    <FormItem
-      className={joinClassNames('vz-settings-item', 'vz-settings-button-item', flex, marginBottom20)}>
-      <div className='vz-settings-button-item-inner'>
+    <FormItem className={joinClassNames('vz-settings-item', 'vz-settings-button-item', flex, marginBottom20)}>
+      <div
+        className='vz-settings-button-item-inner'
+        id={id || `setting-button-${toKebabCase(getCaller())}-${children.toString()}`}
+      >
         <div className='vz-settings-button-item-info'>
           <div className={labelRow}>
-            <label className={title}>
+            <motion.label layout='position' className={title}>
               {children}
-            </label>
+            </motion.label>
           </div>
           <FormText className={description}>
-            {note}
+            <motion.div layout='position'>
+              {note}
+            </motion.div>
           </FormText>
         </div>
         <Tooltip