Updates GuideGroupIndex in PageLayout to use CardContainer to d…

…isplay full width cards (#519) * Add snapshot for groupIndexPage * Use CardContainer/Card in GuideGroupIndex * Update CHANGELOG.md * Deconstruct params * Rebuild test case by simulating large screen - to display NavigationAccordion * Fix accessibility issue with list so that it's properly nested
mapbox · Sep 23, 2021 · 876e599 · 876e599
1 parent ccdadb0
commit 876e599
Show file tree

Hide file tree

Showing 5 changed files with 609 additions and 40 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 - Handle `NavigiationAccordion` when there is no `activeItem`. [#495](https://github.com/mapbox/dr-ui/pull/495)
 - Move "I like..." category to bottom in `Feedback` component. [#518](https://github.com/mapbox/dr-ui/pull/518)
 - Decrease Sentry `tracesSampleRate` to `0.05`. [#517](https://github.com/mapbox/dr-ui/pull/517)
+- Updates `GuideGroupIndex` in `PageLayout` to use `CardContainer` to display full width cards. [#519](https://github.com/mapbox/dr-ui/pull/519)
 
 ## 4.2.3
 

diff --git a/src/components/navigation-accordion/navigation-accordion.js b/src/components/navigation-accordion/navigation-accordion.js
@@ -123,28 +123,27 @@ export default class NavigationAccordion extends React.Component {
     const subItemEls = subItems
       .filter((page) => !page.groupOrder || page.groupOrder === undefined)
       .map((page) => (
-        <React.Fragment key={page.title}>
-          <li
-            // Required on parents containing tags to prevent unwanted scrollbars on IE
-            className={classnames('mb3', {
-              'scroll-hidden': page.tag
+        <li
+          key={page.title}
+          // Required on parents containing tags to prevent unwanted scrollbars on IE
+          className={classnames('mb3', {
+            'scroll-hidden': page.tag
+          })}
+        >
+          <a
+            className={classnames('inline-block w-full color-blue-on-hover', {
+              'color-blue': activeItem === page.path
             })}
+            href={page.path}
           >
-            <a
-              className={classnames('inline-block w-full color-blue-on-hover', {
-                'color-blue': activeItem === page.path
-              })}
-              href={page.path}
-            >
-              {page.title}
-              {page.tag && this.renderTag(page)}
-            </a>
-          </li>
+            {page.title}
+            {page.tag && this.renderTag(page)}
+          </a>
           {activeItem &&
             activeItem.includes(page.path) &&
             page.subPages &&
             this.renderSubPages(page.subPages, activeItem)}
-        </React.Fragment>
+        </li>
       ));
 
     return (