Merge pull request #41 from sanctuarycomputer/qa/launch

Exclude subsections from SideNav, a11y audit
sanctuarycomputer · Dec 11, 2024 · a9ce5da · a9ce5da
2 parents 5a623bc + 6d68fe0
commit a9ce5da
Show file tree

Hide file tree

Showing 9 changed files with 35,287 additions and 14,083 deletions.
diff --git a/assets/shared-bundle.js b/assets/shared-bundle.js
diff --git a/assets/tailwind-output.css b/assets/tailwind-output.css
diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "Copenhagen",
   "author": "Sanctuary Computer",
-  "version": "4.2.15",
+  "version": "4.2.20",
   "api_version": 4,
   "default_locale": "en-us",
   "settings": [

diff --git a/src/modules/homepage/HomepageModule.tsx b/src/modules/homepage/HomepageModule.tsx
@@ -138,18 +138,18 @@ const Homepage: FC<Props> = ({ homepageData }) => {
               >
                 <ColoredCardsIconMap icon={card.icon} className="w-6 h-6" color={textColorName} />
                 <div className="mt-[1.875rem]">
-                  <h4
+                  <h3
                     className={cn('subheading-1', {
                       'text-light-orange-vibrant dark:text-dark-orange-vibrant':
                         textColorName === 'orange-vibrant',
                       'text-blue-base dark:text-blue-base': textColorName === 'blue-vibrant',
-                      'text-green-base dark:text-green-base': textColorName === 'green-base',
+                      'text-green-base dark:text-green-vibrant': textColorName === 'green-base',
                       'text-light-pink-vibrant dark:text-dark-pink-vibrant':
                         textColorName === 'pink-vibrant',
                     })}
                   >
                     {card.title}
-                  </h4>
+                  </h3>
                   <p className="body-3 text-light-neutral-2 dark:text-dark-neutral-2">
                     {card.description}
                   </p>

diff --git a/src/modules/side-nav/SideNavModule.tsx b/src/modules/side-nav/SideNavModule.tsx
@@ -46,7 +46,7 @@ export const SideNav: FC<Props> = ({ sideNavData, navState }) => {
         className={cn(
           'p-padding-large pb-margin-web absolute inset-0 transition category-side-nav w-full overflow-scroll',
           {
-            'opacity-0 pointer-events-none': !navStateIsEmpty,
+            'opacity-0 pointer-events-none hidden': !navStateIsEmpty,
           }
         )}
       >
@@ -56,7 +56,12 @@ export const SideNav: FC<Props> = ({ sideNavData, navState }) => {
               <h3>
                 <a
                   href={category.url}
-                  className="transition text-light-neutral-1 dark:text-dark-neutral-1 subheading-2 hover:text-light-accent-1 dark:hover:text-dark-accent-1"
+                  className={cn(
+                    'transition text-light-neutral-1 dark:text-dark-neutral-1 subheading-2 hover:text-light-accent-1 dark:hover:text-dark-accent-1',
+                    {
+                      '!hidden': !navStateIsEmpty,
+                    }
+                  )}
                 >
                   {category.name}
                 </a>
@@ -67,7 +72,12 @@ export const SideNav: FC<Props> = ({ sideNavData, navState }) => {
                     <li key={section.id} className="mt-2">
                       <a
                         href={section.url}
-                        className="transition text-light-neutral-2 dark:text-dark-neutral-2 body-3 hover:text-light-accent-1 dark:hover:text-dark-accent-1  block !leading-[1.4]"
+                        className={cn(
+                          'transition text-light-neutral-2 dark:text-dark-neutral-2 body-3 hover:text-light-accent-1 dark:hover:text-dark-accent-1  block !leading-[1.4]',
+                          {
+                            '!hidden': !navStateIsEmpty,
+                          }
+                        )}
                       >
                         {section.name}
                       </a>
@@ -84,13 +94,15 @@ export const SideNav: FC<Props> = ({ sideNavData, navState }) => {
         className={cn(
           'p-padding-large pb-margin-web transition absolute inset-0 section-side-nav w-full overflow-scroll',
           {
-            'opacity-0 pointer-events-none': navStateIsEmpty,
+            'opacity-0 pointer-events-none hidden': navStateIsEmpty,
           }
         )}
       >
         <div className="pb-3">
           <button
-            className="group flex flex-row items-center"
+            className={cn('group flex flex-row items-center', {
+              '!hidden': navStateIsEmpty,
+            })}
             onClick={() => setActiveNavState({})}
           >
             <ChevronLeft />
@@ -113,7 +125,12 @@ export const SideNav: FC<Props> = ({ sideNavData, navState }) => {
                 )}
               />
               <div key={`section-nav-${category.id}`}>
-                <a href={category.url}>
+                <a
+                  href={category.url}
+                  className={cn({
+                    '!hidden': navStateIsEmpty,
+                  })}
+                >
                   <h3
                     className={cn(
                       'transition subheading-2 my-3 hover:text-light-accent-1 hover:dark:text-dark-accent-1',
@@ -133,11 +150,15 @@ export const SideNav: FC<Props> = ({ sideNavData, navState }) => {
                 >
                   {category.sections.map((section) => {
                     const sectionIsActive = activeNavState.section === section.id;
-
                     return (
                       <li key={section.id} className="mt-4 first:mt-6">
                         <button
-                          className="w-full group flex flex-row space-x-0.5 items-center justify-between"
+                          className={cn(
+                            'w-full group flex flex-row space-x-0.5 items-center justify-between',
+                            {
+                              '!hidden': navStateIsEmpty,
+                            }
+                          )}
                           onClick={() => handleSectiontoggle(section.id)}
                         >
                           <span
@@ -165,7 +186,6 @@ export const SideNav: FC<Props> = ({ sideNavData, navState }) => {
                           <div className="overflow-hidden">
                             {section.articles.map((article) => {
                               const isActiveArticle = activeNavState.article === article.id;
-
                               return (
                                 <li key={article.id} className="mt-2 first:mt-4">
                                   <a
@@ -177,6 +197,7 @@ export const SideNav: FC<Props> = ({ sideNavData, navState }) => {
                                           isActiveArticle,
                                         'text-light-neutral-2 dark:text-dark-neutral-2':
                                           !isActiveArticle,
+                                        '!hidden': navStateIsEmpty,
                                       }
                                     )}
                                   >

diff --git a/src/modules/side-nav/api.ts b/src/modules/side-nav/api.ts
@@ -30,6 +30,7 @@ type SideNavApiResponse = {
     html_url: string;
     name: string;
     position: number;
+    parent_section_id: number | null;
   }[];
 };
 
@@ -44,7 +45,7 @@ const sanitizeResponse = (response: SideNavApiResponse): SideNavData => {
 
   const categories = response.categories.map((category) => {
     const sections = response.sections
-      .filter((section) => section.category_id === category.id)
+      .filter((section) => section.category_id === category.id && !section.parent_section_id)
       .map((section) => {
         const articles = response.articles
           .filter((article) => article.section_id === section.id)
@@ -79,13 +80,13 @@ const sanitizeResponse = (response: SideNavApiResponse): SideNavData => {
 export const sideNav = {
   get: async (): Promise<SideNavData> => {
     const storedSideNavData = SideNavDataManager.get();
-    const expriresAt = storedSideNavData?.expriresAt;
-
-    if (expriresAt && expriresAt > Date.now() && storedSideNavData.data) {
+    const expiresAt = storedSideNavData?.expiresAt;
+    if (expiresAt && expiresAt > Date.now() && storedSideNavData.data) {
       return storedSideNavData.data;
     } else {
       SideNavDataManager.clear();
     }
+    SideNavDataManager.clear();
 
     const url = `${window.location.origin}/api/v2/help_center/en-us/articles.json?include=categories,sections&per_page=100`;
 
@@ -96,7 +97,6 @@ export const sideNav = {
       }
 
       const responseData = await response.json();
-
       if (responseData.page_count <= 1) {
         return sanitizeResponse(responseData);
       }
@@ -136,7 +136,7 @@ export const sideNav = {
 
       SideNavDataManager.set({
         // Set it like this for now since the client wants to QA the side nav with different items
-        expriresAt: Date.now() + 5000,
+        expiresAt: Date.now() + 5000,
         // TODO: uncomment the line below before launch
         // expriresAt: Date.now() + millisecondsIn24Hours,
         data: sanitizedResponse,

diff --git a/src/utils/localStorage.ts b/src/utils/localStorage.ts
@@ -26,7 +26,7 @@ export class LocalStorageManager<T> {
 }
 
 export const SideNavDataManager = new LocalStorageManager<{
-  expriresAt: number;
+  expiresAt: number;
   data: SideNavData;
 }>('SIDE_NAV_DATA');
 

diff --git a/style.css b/style.css
diff --git a/templates/home_page.hbs b/templates/home_page.hbs
@@ -38,7 +38,7 @@
           title: 'Frequently Asked Questions',
           description: 'Answers to our top ten questions',
           color: 'pink',
-          url: '/hc/en-us/sections/32172915881485',
+          url: '/hc/en-us/articles/32601103371917-FAQs',
         },
         {
           icon: 'lightbulb', 
@@ -151,4 +151,4 @@
     // add setTimeout to ensure the mobile nav is added after mobile menu appears on DOM first
     setTimeout(() => addMobileNav(sideNavData), 100);
   });
-</script>
+</script>