Feat: Update Table of Contents styles (#239)

* feat: update ToC styles, add h3 headers to ToC

* feat: increase ToC left margin, temporarily hide h3 from ToC

Author: vi-nastya

src/components/pages/doc-page/table-of-contents/table-of-contents.js

@@ -7,6 +7,8 @@ import styles from './table-of-contents.module.scss';
 
 const components = {
   h2: HeadingLandmark('h2'),
+  // uncomment the next line to add h3 to ToC
+  // h3: HeadingLandmark('h3'),
 };
 
 const TableOfContents = forwardRef(
@@ -22,7 +24,7 @@ const TableOfContents = forwardRef(
     const links = useLandmark(
       {
         containerRef: contentContainerRef,
-        markSelector: 'h2',
+        markSelector: 'h2', // replace to 'h2, h3' to include h3 in ToC
       },
       [],
     );
@@ -53,10 +55,14 @@ const TableOfContents = forwardRef(
       >
         <nav className={`${styles.anchorBar} ${label ?? ''}`}>
           <ul className={styles.anchorWrapper}>
-            {links.map(({ title, anchor }, i) => (
+            {links.map(({ title, anchor, tagName }, i) => (
               <li className={styles.anchorBox} key={`al-${i}`}>
                 <a
-                  className={classNames(styles.anchor)}
+                  className={
+                    tagName === 'H2'
+                      ? classNames(styles.h2)
+                      : classNames(styles.h3)
+                  }
                   href={`${anchor}`}
                   onClick={(e) => handleAnchorClick(e, anchor)}
                 >

src/components/pages/doc-page/table-of-contents/table-of-contents.module.scss

@@ -5,6 +5,9 @@
   display: flex;
   justify-content: flex-end;
   padding-top: 15px;
+
+  margin-right: -30px;
+
   @include lg-down {
     display: none;
   }
@@ -20,34 +23,55 @@
 .anchor-wrapper {
   padding: 0;
   margin: 0;
-  box-shadow: $light-block-shadow;
+  //box-shadow: $light-block-shadow;
   display: flex;
   flex-flow: column;
-  border: 1px solid $color-additional-2;
+  //border: 1px solid $color-additional-2;
   list-style: none;
 }
 
 .anchor-box {
   &:not(:last-child) {
-    border-bottom: 1px solid $color-additional-2;
+    //border-bottom: 1px solid $color-additional-2;
   }
   display: flex;
   align-items: center;
-  min-height: 50px;
+  // min-height: 50px;
+
+  & > * {
+    width: 100%;
+    margin-bottom: 10px;
+  }
 }
 
-.anchor {
+.h2 {
+  text-decoration: none;
+  box-sizing: border-box;
+  display: block;
   text-decoration: none;
-  font-size: $font-size-base;
-  line-height: 20px;
-  color: $color-secondary;
-  transition: all 0.3s ease;
-  display: inline-block;
-  width: 100%;
-  padding: 15px 20px;
-  &_active {
+  font-family: $font-family-primary;
+  font-size: $font-size-sm;
+  line-height: $line-height-sm;
+  color: $color-primary;
+  font-weight: 500;
+  transition: color 0.3s;
+
+  &:hover {
     color: $color-accent-primary;
   }
+}
+
+.h3 {
+  box-sizing: border-box;
+  padding-left: 15px;
+  display: block;
+  text-decoration: none;
+  font-family: $font-family-primary;
+  font-size: $font-size-sm;
+  line-height: $line-height-sm;
+  color: $color-primary;
+  transition: color 0.3s;
+
   &:hover {
     color: $color-accent-primary;
   }

src/components/templates/doc-page/doc-page-content/doc-page-content.view.js

@@ -55,7 +55,7 @@ export const DocPageContent = ({ label, content, mod }) => {
           <Sticky topOffset={-15} bottomOffset={0} disableCompensation>
             {({ style }) => (
               <TableOfContents
-                style={style}
+                style={{ ...style, left: 350 }}
                 contentContainerRef={contentContainerRef}
               />
             )}

src/hooks/use-landmark.js

@@ -8,7 +8,7 @@ const useLandmark = ({ containerRef, markSelector }, deps = []) => {
       // get all marks of a parent
       const allMarks = containerRef.current.querySelectorAll(markSelector);
       setLinks(
-        Array.from(allMarks).map(({ id, innerText }) => ({
+        Array.from(allMarks).map(({ id, innerText, tagName }) => ({
           title: innerText,
           anchor: `#${
             id ||
@@ -18,6 +18,7 @@ const useLandmark = ({ containerRef, markSelector }, deps = []) => {
               .replace(/^-*/g, '')
               .replace(/-*$/g, '')
           }`,
+          tagName,
         })),
       );
     }

src/templates/docs/cloud.js

@@ -215,7 +215,7 @@ export default function ({ pageContext: { sidebarTree, navLinks } }) {
           <Sticky topOffset={-15} bottomOffset={0} disableCompensation>
             {({ style }) => (
               <TableOfContents
-                style={style}
+                style={{ ...style, left: 350 }}
                 contentContainerRef={contentContainerRef}
                 shouldMakeReplacement
               />

src/templates/docs/examples.js

@@ -64,7 +64,7 @@ export default function ({ pageContext: { sidebarTree, navLinks } }) {
           <Sticky topOffset={-15} bottomOffset={0} disableCompensation>
             {({ style }) => (
               <TableOfContents
-                style={style}
+                style={{ ...style, left: 350 }}
                 contentContainerRef={contentContainerRef}
                 shouldMakeReplacement
               />

src/templates/docs/guides.js

@@ -65,7 +65,7 @@ export default function ({ pageContext: { sidebarTree, navLinks } }) {
           <Sticky topOffset={-15} bottomOffset={10} disableCompensation>
             {({ style }) => (
               <TableOfContents
-                style={style}
+                style={{ ...style, left: 350 }}
                 contentContainerRef={contentContainerRef}
                 shouldMakeReplacement
               />

src/templates/docs/integrations.js

@@ -422,7 +422,7 @@ export default function ({ pageContext: { sidebarTree, navLinks } }) {
           <Sticky topOffset={-15} bottomOffset={0} disableCompensation>
             {({ style }) => (
               <TableOfContents
-                style={style}
+                style={{ ...style, left: 350 }}
                 contentContainerRef={contentContainerRef}
                 shouldMakeReplacement
               />

src/templates/docs/javascript-api.js

@@ -79,7 +79,7 @@ export default function ({ data, pageContext: { sidebarTree, navLinks } }) {
           <Sticky topOffset={-15} bottomOffset={10} disableCompensation>
             {({ style }) => (
               <TableOfContents
-                style={style}
+                style={{ ...style, left: 350 }}
                 contentContainerRef={contentContainerRef}
                 shouldMakeReplacement
               />