Updates GuideGroupIndex in PageLayout to use CardContainer to display full width cards

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Unreleased
 
 - Handle `NavigiationAccordion` when there is no `activeItem`. [#495](https://github.com/mapbox/dr-ui/pull/495)
+- Updates `GuideGroupIndex` in `PageLayout` to use `CardContainer` to display full width cards. [#519](https://github.com/mapbox/dr-ui/pull/519)
 
 ## 4.2.3
 

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 (