fix(sidebar): unify sections by declaring them with CSS classes (#9930)

* fix(macros): add "no-link" class to text section titles Link section titles have two additional CSS properties that caused them to be positioned differently than pure text section titles. * refactor(sidebar): replace `<strong>` with .section class * chore(sidebar): reduce section margin-top to 1.5rem * chore(sidebar): remove unused data-default-state attrs * test(sidebar): update expectation * fixup! test(sidebar): update expectation
mdn · Apr 5, 2024 · b5bb96e · b5bb96e
1 parent 4c89c2a
commit b5bb96e
Show file tree

Hide file tree

Showing 21 changed files with 53 additions and 53 deletions.
diff --git a/client/src/document/organisms/sidebar/index.scss b/client/src/document/organisms/sidebar/index.scss
@@ -38,16 +38,16 @@
     }
   }
 
-  .no-link {
-    display: inline-flex;
-    padding: 0.25rem;
-  }
-
-  // TODO: Find these and add a class, if possible. These are section headings
-  strong {
+  li.section {
     display: flex;
     font-size: var(--type-base-font-size-rem);
-    margin-top: 1rem;
+    font-weight: var(--font-body-strong-weight);
+    letter-spacing: 0.02rem;
+    margin-top: 1.5rem;
+
+    &.no-link {
+      padding: 0.25rem;
+    }
   }
 
   li:first-of-type strong {

diff --git a/kumascript/macros/APIRef.ejs b/kumascript/macros/APIRef.ejs
@@ -217,10 +217,10 @@ function buildIFList(interfaces, title) {
 // output
 output = '<section id="Quick_links" data-macro="APIRef"><ol>';
 if (group && webAPIGroups[0][group] && webAPIGroups[0][group].overview) {
-  output += `<li><strong>${web.smartLink(APIHref + '/' + webAPIGroups[0][group].overview[0].replace(/ /g, '_'), null, webAPIGroups[0][group].overview[0], APIHref, null, "APIRef")}</strong></li>`;
+  output += `<li class="section">${web.smartLink(APIHref + '/' + webAPIGroups[0][group].overview[0].replace(/ /g, '_'), null, webAPIGroups[0][group].overview[0], APIHref, null, "APIRef")}</li>`;
 }
 
-output += `<li><strong>${web.smartLink(APIHref + '/' + mainIF, null, `<code>${mainIF}</code>`, APIHref, null, "APIRef")}</strong></li>`;
+output += `<li class="section">${web.smartLink(APIHref + '/' + mainIF, null, `<code>${mainIF}</code>`, APIHref, null, "APIRef")}</li>`;
 
 if (ctors.length > 0) {
   output += await buildSublist(ctors, text['Constructor']);

diff --git a/kumascript/macros/AddonSidebar.ejs b/kumascript/macros/AddonSidebar.ejs
@@ -146,7 +146,7 @@ var text = mdn.localStringMap({
 async function renderRootItem(slug) {
   const [link, title] = await getPageLinkAndTitle(slug);
 
-  return `<li><a href="${link}"><strong>${title}</strong></a></li>`
+  return `<li class="section"><a href="${link}">${title}</a></li>`
 }
 
 async function renderItems(slugs) {

diff --git a/kumascript/macros/AddonSidebarMain.ejs b/kumascript/macros/AddonSidebarMain.ejs
@@ -63,9 +63,9 @@ var text = mdn.localStringMap({
 
 <section id="Quick_links" data-macro="AddonSidebarMain">
   <ol>
-    <li><a href="<%=baseURL%>WebExtensions"><strong><%=text['WebExtensions']%></strong></a></li>
-    <li><a href="https://extensionworkshop.com/documentation/themes/"><strong><%=text['Themes']%></strong></a></li>
-    <li><a href="https://discourse.mozilla.org/c/add-ons"><strong><%=text['Community_and_Support']%></strong></a></li>
+    <li class="section"><a href="<%=baseURL%>WebExtensions"><%=text['WebExtensions']%></a></li>
+    <li class="section"><a href="https://extensionworkshop.com/documentation/themes/"><%=text['Themes']%></a></li>
+    <li class="section"><a href="https://discourse.mozilla.org/c/add-ons"><%=text['Community_and_Support']%></a></li>
     <li class="toggle">
       <details>
         <summary><%=text['Channels']%></summary>

diff --git a/kumascript/macros/CSSRef.ejs b/kumascript/macros/CSSRef.ejs
@@ -1111,8 +1111,8 @@ async function buildPropertylist(pages, title) {
 <section id="Quick_links" data-macro="CSSRef">
 
 <ol>
-  <li><a href="/<%=locale%>/docs/Web/CSS"><strong>CSS</strong></a></li>
-  <li><a href="<%=learnURL%>CSS"><strong><%=text['Tutorials']%></strong></a></li>
+  <li class="section"><a href="/<%=locale%>/docs/Web/CSS">CSS</a></li>
+  <li class="section"><a href="<%=learnURL%>CSS"><%=text['Tutorials']%></a></li>
   <li><a href="<%=learnURL%>Getting_started_with_the_web/CSS_basics"><%=text['CSS_basics']%></a></li>
   <li class="toggle">
       <details>
@@ -1189,7 +1189,7 @@ async function buildPropertylist(pages, title) {
       </details>
   </li>
 
-  <li><a href="/<%=locale%>/docs/Web/CSS/Reference"><strong><%=text['Reference']%></strong></a></li>
+  <li class="section"><a href="/<%=locale%>/docs/Web/CSS/Reference"><%=text['Reference']%></a></li>
   <%-await buildSublist(groups, 'Modules');%>
   <%-await buildPropertylist(properties, 'Properties');%>
   <%-await buildSublist(selectors, 'Selectors');%>
@@ -1200,7 +1200,7 @@ async function buildPropertylist(pages, title) {
   <%-await buildSublist(functions, 'Functions');%>
   <%-await buildSublist(types, 'Types');%>
 
-  <li><strong><%=text['Guides']%></strong></li>
+  <li class="section no-link"><%=text['Guides']%></li>
   <li class="toggle">
       <details>
           <summary><%=text['Animations']%></summary>
@@ -1450,7 +1450,7 @@ async function buildPropertylist(pages, title) {
       </details>
   </li>
 
-  <li><a href="/<%=locale%>/docs/Web/CSS/Layout_cookbook"><strong><%=text['Layout_cookbook']%></strong></a></li>
+  <li class="section"><a href="/<%=locale%>/docs/Web/CSS/Layout_cookbook"><%=text['Layout_cookbook']%></a></li>
   <li class="toggle">
     <ol>
       <li><%-smartLink(`${cssURL}Layout_cookbook/Media_objects`, null, text['Media_objects'], cssURL)%></li>
@@ -1466,7 +1466,7 @@ async function buildPropertylist(pages, title) {
     </ol>
   </li>
 
-  <li><strong><%=text['Tools']%></strong></li>
+  <li class="section no-link"><%=text['Tools']%></li>
   <li class="toggle">
     <ol>
       <li><%-smartLink(`${cssURL}CSS_Colors/Color_picker_tool`, null, text['Color_picker_tool'], cssURL)%></li>

diff --git a/kumascript/macros/DefaultAPISidebar.ejs b/kumascript/macros/DefaultAPISidebar.ejs
@@ -101,7 +101,7 @@ function convertEvent(eventName) {
 output = '<section id="Quick_links" data-macro="DefaultAPISidebar"><ol>';
 
 if (webAPIGroups[0][group].overview) {
-  output += '<li><strong><a href="' +  APIHref + '/' + webAPIGroups[0][group].overview[0].replace(/ /g, '_') + '">' + webAPIGroups[0][group].overview[0] + '</a></strong></li>';
+  output += '<li class="section"><a href="' +  APIHref + '/' + webAPIGroups[0][group].overview[0].replace(/ /g, '_') + '">' + webAPIGroups[0][group].overview[0] + '</a></li>';
 }
 
 if (guides.length > 0) {

diff --git a/kumascript/macros/GlossarySidebar.ejs b/kumascript/macros/GlossarySidebar.ejs
@@ -1,7 +1,7 @@
 <%
 async function renderRootItem(slug) {
   const [link, title] = await getPageLinkAndTitle(slug);
-  return `<li><a href="${link}"><strong>${title}</strong></a></li>`
+  return `<li class="section"><a href="${link}">${title}</a></li>`
 }
 
 async function getPageLinkAndTitle(slug) {

diff --git a/kumascript/macros/HTMLSidebar.ejs b/kumascript/macros/HTMLSidebar.ejs
@@ -315,8 +315,8 @@ var text = mdn.localStringMap({
 %>
 <section id="Quick_links" data-macro="HTMLSidebar">
  <ol>
-  <li><a href="/<%=locale%>/docs/Web/HTML"><strong>HTML</strong></a></li>
-  <li><a href="<%=learnBaseURL%>HTML"><strong><%=text['Tutorials']%></strong></a></li>
+  <li class="section"><a href="/<%=locale%>/docs/Web/HTML">HTML</a></li>
+  <li class="section"><a href="<%=learnBaseURL%>HTML"><%=text['Tutorials']%></a></li>
   <li><a href="<%=learnBaseURL%>Getting_started_with_the_web/HTML_basics"><%=text['HTML_basics']%></a></li>
   <li class="toggle">
     <details <%=state('Introduction_to_HTML')%>>
@@ -360,7 +360,7 @@ var text = mdn.localStringMap({
       </ol>
     </details>
   </li>
-  <li><strong><a href="/<%=locale%>/docs/Web/HTML/Reference"><%=text['Reference']%></a></strong></li>
+  <li class="section"><a href="/<%=locale%>/docs/Web/HTML/Reference"><%=text['Reference']%></a></li>
   <li class="toggle">
     <details <%=state('HTML_Elements')%>>
       <summary><%=text['HTML_Elements']%></summary>
@@ -400,7 +400,7 @@ var text = mdn.localStringMap({
       <%-await template("ListSubpagesForSidebar", ['/en-US/docs/Web/HTML/Element/input'])%>
     </details>
   </li>
-  <li><strong><%=text['Guides']%></strong></li>
+  <li class="section no-link"><%=text['Guides']%></li>
   <li>
     <ol>
       <li><a href="/<%=locale%>/docs/Web/HTML/Content_categories"><%=text["Content_categories"]%></a></li>

diff --git a/kumascript/macros/HTTPSidebar.ejs b/kumascript/macros/HTTPSidebar.ejs
@@ -288,8 +288,8 @@ var text = mdn.localStringMap({
 
 <section id="Quick_links" data-macro="HTTPSidebar">
   <ol>
-    <li><a href="/<%=locale%>/docs/Web/HTTP"><strong><%=text['HTTP']%></strong></a></li>
-    <li><strong><%=text['Guides']%></strong></li>
+    <li class="section"><a href="/<%=locale%>/docs/Web/HTTP"><%=text['HTTP']%></a></li>
+    <li class="section no-link"><%=text['Guides']%></li>
     <li class="toggle">
         <details>
             <summary><%=text['ResourcesURI']%></summary>
@@ -342,7 +342,7 @@ var text = mdn.localStringMap({
     <li><a href="/<%=locale%>/docs/Web/HTTP/Redirections"><%=text['Redirects']%></a></li>
     <li><a href="/<%=locale%>/docs/Web/HTTP/Resources_and_specifications"><%=text['Resources']%></a></li>
     <li><a href="/<%=locale%>/docs/Web/HTTP/Permissions_Policy"><%=text['Permissions_Policy']%></a></li>
-    <li><strong><%=text['Reference']%></strong></li>
+    <li class="section no-link"><%=text['Reference']%></li>
     <li class="toggle">
         <details <%=state('Web/HTTP/Headers')%>>
             <summary><%=text['Headers']%></summary>

diff --git a/kumascript/macros/JSRef.ejs b/kumascript/macros/JSRef.ejs
@@ -205,7 +205,7 @@ async function buildSublist(pages, title, opened) {
 async function renderOutput() {
   let output = '<section class="Quick_links" id="Quick_links" data-macro="JSRef"><ol>';
   const link = web.smartLink(slugStdlib, null, text.stdlib, slugStdlib, slugStdlib, "JSRef");
-  output += `<li><strong>${link}</strong></li>`;
+  output += `<li class="section">${link}</li>`;
 
   for (const [index, item] of Object.values(result).entries()) {
     const resultTitle        = item.title ?? "";
@@ -216,11 +216,11 @@ async function renderOutput() {
     const resultOpen         = item.defaultOpened ?? false;
 
     if (index === 1) {
-      output += `<li><strong>${text.Inheritance}</strong></li>`;
+      output += `<li class="section no-link">${text.Inheritance}</li>`;
     }
 
     const link = web.smartLink(`${slugStdlib}/${resultSubPath}`, null, `<code>${resultTitle}</code>`, null, slugStdlib, "JSRef");
-    output += `<li><strong>${link}</strong></li>`;
+    output += `<li class="section">${link}</li>`;
 
     if (resultConstructors.length > 0) {
       output += await buildSublist(resultConstructors, text.Constructor, resultOpen);
@@ -233,10 +233,10 @@ async function renderOutput() {
     }
 
     if (index === 0 && group.length > 0) {
-      output += `<li><strong>${text.Related}</strong></li>`;
+      output += `<li class="section no-link">${text.Related}</li>`;
       for (const groupItem of group) {
         const link = web.smartLink(`${slugStdlib}/${groupItem.replace(".", "/")}`, null, `<code>${groupItem}</code>`, null, slugStdlib, "JSRef");
-        output += `<li><strong>${link}</strong></li>`;
+        output += `<li class="section">${link}</li>`;
       }
     }
   }

diff --git a/kumascript/macros/JsSidebar.ejs b/kumascript/macros/JsSidebar.ejs
@@ -399,8 +399,8 @@ var text = mdn.localStringMap({
 %>
 <section id="Quick_links" data-macro="JsSidebar">
  <ol>
-  <li><a href="/<%=locale%>/docs/Web/JavaScript"><strong>JavaScript</strong></a></li>
-  <li><a href="/<%=locale%>/docs/Web/JavaScript/Tutorials"><strong><%=text['Tutorials']%></strong></a></li>
+  <li class="section"><a href="/<%=locale%>/docs/Web/JavaScript">JavaScript</a></li>
+  <li class="section"><a href="/<%=locale%>/docs/Web/JavaScript/Tutorials"><%=text['Tutorials']%></a></li>
   <li class="toggle">
     <details <%=state('Complete_beginners')%>>
       <summary><%=text['Complete_beginners']%></summary>
@@ -461,7 +461,7 @@ var text = mdn.localStringMap({
       </ol>
     </details>
   </li>
-  <li><strong><a href="/<%=locale%>/docs/Web/JavaScript/Reference"><%=text['Reference']%></a></strong></li>
+  <li class="section"><a href="/<%=locale%>/docs/Web/JavaScript/Reference"><%=text['Reference']%></a></li>
   <li class="toggle">
     <details <%=state('Objects')%>>
        <summary><%=text['Global_Objects']%></summary>

diff --git a/kumascript/macros/LearnSidebar.ejs b/kumascript/macros/LearnSidebar.ejs
@@ -858,7 +858,7 @@ async function renderSubsection(subsection) {
 }
 
 async function renderSection(section) {
-  let output = `<li><a href="${baseURL}${section.link}"><strong>${l10nStrings[section.name]}</strong></a></li>`;
+  let output = `<li class="section"><a href="${baseURL}${section.link}">${l10nStrings[section.name]}</a></li>`;
 
   for (const subsection of section.subsections) {
     output += await renderSubsection(subsection);

diff --git a/kumascript/macros/MathMLRef.ejs b/kumascript/macros/MathMLRef.ejs
@@ -56,16 +56,16 @@ async function getTitle(pageSlug) {
 %>
 <section id="Quick_links" data-macro="MathMLRef">
  <ol>
-  <li><a href="/<%=locale%>/docs/Web/MathML"><strong>MathML</strong></a></li>
-  <li><strong><%=text['Guides']%></strong></li>
+  <li class="section"><a href="/<%=locale%>/docs/Web/MathML">MathML</a></li>
+  <li class="section no-link"><%=text['Guides']%></li>
   <li>
     <ol>
     <li><a href="/<%=locale%>/docs/Web/MathML/Authoring"><%=await getTitle("Authoring")%></a></li>
     <li><a href="/<%=locale%>/docs/Web/MathML/Fonts"><%=await getTitle("Fonts")%></a></li>
     <li><a href="/<%=locale%>/docs/Web/MathML/Values"><%=await getTitle("Values")%></a></li>
     </ol>
   </li>
-  <li><strong><%=text['Reference']%></strong></li>
+  <li class="section no-link"><%=text['Reference']%></li>
   <li class="toggle">
     <details>
       <summary><%=text['Elements']%></summary>
@@ -79,7 +79,7 @@ async function getTitle(pageSlug) {
     </details>
   </li>
   <li><a href="/<%=locale%>/docs/Web/MathML/Attribute"><%=await getTitle("Attribute")%></a></li>
-  <li><strong><%=text['Examples']%></strong></li>
+  <li class="section no-link"><%=text['Examples']%></li>
   <li>
     <ol>
     <li><a href="/<%=locale%>/docs/Web/MathML/Examples/Deriving_the_Quadratic_Formula"><%=await getTitle("Examples/Deriving_the_Quadratic_Formula")%></a></li>

diff --git a/kumascript/macros/PWASidebar.ejs b/kumascript/macros/PWASidebar.ejs
@@ -75,7 +75,7 @@ async function getTitle(pageSlug) {
 }
 
 async function renderRootItem(item) {
-  return `<li><a href="${getLink(item)}"><strong>${await getTitle(item)}</strong></a></li>`
+  return `<li class="section"><a href="${getLink(item)}">${await getTitle(item)}</a></li>`
 }
 
 async function renderItem(item) {

diff --git a/kumascript/macros/SVGRef.ejs b/kumascript/macros/SVGRef.ejs
@@ -67,8 +67,8 @@ async function getTitle(pageSlug) {
 %>
 <section id="Quick_links" data-macro="SVGRef">
  <ol>
-  <li><a href="/<%=locale%>/docs/Web/SVG"><strong>SVG</strong></a></li>
-  <li><strong><%=text['Tutorials']%></strong></li>
+  <li class="section"><a href="/<%=locale%>/docs/Web/SVG">SVG</a></li>
+  <li class="section no-link"><%=text['Tutorials']%></li>
   <li class="toggle">
     <details>
       <summary><%=text['Introducing SVG from scratch']%></summary>
@@ -93,7 +93,7 @@ async function getTitle(pageSlug) {
       </ol>
     </details>
   </li>
-  <li><strong><%=text['Reference']%></strong></li>
+  <li class="section no-link"><%=text['Reference']%></li>
   <li class="toggle">
     <details>
       <summary><%=text['Elements']%></summary>
@@ -106,7 +106,7 @@ async function getTitle(pageSlug) {
       <%-await template("ListSubpagesForSidebar", ['/en-US/docs/Web/SVG/Attribute'])%>
     </details>
   </li>
-  <li><strong><%=text['Guides']%></strong></li>
+  <li class="section no-link"><%=text['Guides']%></li>
   <li>
     <ol>
     <li><a href="/<%=locale%>/docs/Web/SVG/Applying_SVG_effects_to_HTML_content"><%=await getTitle("Applying_SVG_effects_to_HTML_content")%></a></li>

diff --git a/kumascript/macros/WebAssemblySidebar.ejs b/kumascript/macros/WebAssemblySidebar.ejs
@@ -74,7 +74,7 @@ var text = mdn.localStringMap({
 <section id="Quick_links" data-macro="WebAssemblySidebar">
 
 <ol>
-  <li data-default-state="open"><a href="<%=baseURL%>"><strong><%=text['WebAssembly_home_page']%></strong></a>
+  <li class="section"><a href="<%=baseURL%>"><%=text['WebAssembly_home_page']%></a>
   <li class="toggle">
     <details open>
       <summary><%=text['Tutorials']%></summary>

diff --git a/kumascript/macros/WebExtAPISidebar.ejs b/kumascript/macros/WebExtAPISidebar.ejs
@@ -23,7 +23,7 @@ let text = {
 
 async function buildSublist(pages, title, ignoreBadges) {
   var result =
-    '<li data-default-state="open"><a href="#"><strong>' +
+    '<li class="section"><a href="#">' +
     title +
     "</strong></a><ol>";
 

diff --git a/kumascript/macros/XsltSidebar.ejs b/kumascript/macros/XsltSidebar.ejs
@@ -1,7 +1,7 @@
 <%
 async function renderRootItem(slug) {
   const [link, title] = await getPageLinkAndTitle(slug);
-  return `<li><a href="${link}"><strong>${title}</strong></a></li>`
+  return `<li class="section"><a href="${link}">${title}</a></li>`
 }
 
 async function getPageLinkAndTitle(slug) {

diff --git a/kumascript/tests/macros/DefaultAPISidebar.test.ts b/kumascript/tests/macros/DefaultAPISidebar.test.ts
@@ -262,7 +262,7 @@ async function checkResult(html, config) {
 
   if (config.expected.overview) {
     // Test overview link
-    const overviewLink = dom.querySelector("ol>li>strong");
+    const overviewLink = dom.querySelector("ol>li.section");
     checkItem(config.expected.overview, overviewLink, config.locale);
   }
 

diff --git a/kumascript/tests/macros/WebAssemblySidebar.test.ts b/kumascript/tests/macros/WebAssemblySidebar.test.ts
@@ -4,7 +4,7 @@ const expected = `\
 <section id="Quick_links" data-macro="WebAssemblySidebar">
 
 <ol>
-  <li data-default-state="open"><a href="/en-US/docs/WebAssembly"><strong>WebAssembly home page</strong></a>
+  <li class="section"><a href="/en-US/docs/WebAssembly">WebAssembly home page</a>
   <li class="toggle">
     <details open>
       <summary>Tutorials</summary>

diff --git a/kumascript/tests/macros/apiref.test.ts b/kumascript/tests/macros/apiref.test.ts
@@ -510,7 +510,7 @@ async function checkResult(html, config) {
   expect(num_valid_links).toEqual(num_total_links);
 
   // Test main interface link
-  const mainIfLink = dom.querySelector<HTMLAnchorElement>("ol>li>strong>a");
+  const mainIfLink = dom.querySelector<HTMLAnchorElement>("ol>li.section>a");
   expect(mainIfLink.textContent).toEqual(config.expected.mainIfLink.text);
 
   if (mainIfLink.href !== "") {