From 36a2af3faf02aa79e52374a990afb19abe01bfdf Mon Sep 17 00:00:00 2001 From: katydecorah Date: Wed, 22 Sep 2021 10:33:45 -0400 Subject: [PATCH 1/6] Add snapshot for groupIndexPage --- .../__snapshots__/page-layout.test.js.snap | 472 ++++++++++++++++++ .../page-layout/__tests__/page-layout.test.js | 16 + 2 files changed, 488 insertions(+) diff --git a/src/components/page-layout/__tests__/__snapshots__/page-layout.test.js.snap b/src/components/page-layout/__tests__/__snapshots__/page-layout.test.js.snap index 427cd08eb..f8e5eddff 100644 --- a/src/components/page-layout/__tests__/__snapshots__/page-layout.test.js.snap +++ b/src/components/page-layout/__tests__/__snapshots__/page-layout.test.js.snap @@ -1831,6 +1831,478 @@ Array [ ] `; +exports[`page-layout Page layout: group index renders as expected 1`] = ` +Array [ +
, +
+
+
+
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+
+
+
+ + + All docs + + + + + + + + + + dr-ui + + + + + + + + + + + + + + + Guides + + + + + + + + + Worldview + +
+
+
+

+ Worldview +

+
+
+
+ +
+
+
+ +
+ Identify geographic features whose characteristics are defined differently by audiences belonging to various regional, cultural, or political groups. +
+
+
+ +
+ When creating a map style with a tileset that uses worldviews, you must apply a filter to any layers that include a worldview data field. +
+
+
+ +
+ Some Mapbox vector tilesets, including Mapbox Streets v8 and Boundaries v3, include the worldview data field in several layers. +
+
+
+ +
+
+
+
+
+
+
, +
+
+
+ +
+
+
, +] +`; + exports[`page-layout full layout renders as expected 1`] = ` Array [
{ expect(tree).toMatchSnapshot(); }); }); + + describe(testCases.groupIndexPage.description, () => { + let testCase; + let wrapper; + let tree; + + beforeEach(() => { + testCase = testCases.groupIndexPage; + wrapper = renderer.create(testCase.element); + tree = wrapper.toJSON(); + }); + + test('renders as expected', () => { + expect(tree).toMatchSnapshot(); + }); + }); }); From 9bd32f876257020ca5d71987d15565f1968ff71d Mon Sep 17 00:00:00 2001 From: katydecorah Date: Wed, 22 Sep 2021 10:35:54 -0400 Subject: [PATCH 2/6] Use CardContainer/Card in GuideGroupIndex --- .../__snapshots__/page-layout.test.js.snap | 115 +++++++++++------- .../components/guide-group-index.js | 33 ++--- 2 files changed, 77 insertions(+), 71 deletions(-) diff --git a/src/components/page-layout/__tests__/__snapshots__/page-layout.test.js.snap b/src/components/page-layout/__tests__/__snapshots__/page-layout.test.js.snap index f8e5eddff..31bdf4a7b 100644 --- a/src/components/page-layout/__tests__/__snapshots__/page-layout.test.js.snap +++ b/src/components/page-layout/__tests__/__snapshots__/page-layout.test.js.snap @@ -2189,58 +2189,79 @@ Array [
-
+
-
- Identify geographic features whose characteristics are defined differently by audiences belonging to various regional, cultural, or political groups. -
-
-
- +
- Border styling - -
-
- When creating a map style with a tileset that uses worldviews, you must apply a filter to any layers that include a worldview data field. -
-
-
; return ( - - {subPages && - subPages.map((subpage, i) => { - return ( -
- -
- {subpage.description} -
-
- ); - })} - + ( + + ))} + /> ); } } From c49afec9dfd8a661fbfce815db40535e300cc261 Mon Sep 17 00:00:00 2001 From: katydecorah Date: Wed, 22 Sep 2021 10:38:14 -0400 Subject: [PATCH 3/6] Update CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 54ff629e1..0015647c4 100644 --- a/CHANGELOG.md +++ b/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 From 0fff730ba73a1623cbc5a5b27fe093090709e679 Mon Sep 17 00:00:00 2001 From: katydecorah Date: Wed, 22 Sep 2021 10:42:03 -0400 Subject: [PATCH 4/6] Deconstruct params --- .../page-layout/components/guide-group-index.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/page-layout/components/guide-group-index.js b/src/components/page-layout/components/guide-group-index.js index f93382b4b..0de3ef535 100644 --- a/src/components/page-layout/components/guide-group-index.js +++ b/src/components/page-layout/components/guide-group-index.js @@ -12,8 +12,13 @@ export default class GuideGroupIndex extends React.PureComponent { return ( ( - + cards={subPages.map(({ title, description, path }) => ( + ))} /> ); From bd575f0b81c2a8e07e29f619ff5732b602eeec3e Mon Sep 17 00:00:00 2001 From: Katy DeCorah Date: Wed, 22 Sep 2021 14:41:54 -0400 Subject: [PATCH 5/6] Rebuild test case by simulating large screen - to display NavigationAccordion --- .../__snapshots__/page-layout.test.js.snap | 67 ++++++++++++++++++- .../page-layout/__tests__/page-layout.test.js | 6 ++ 2 files changed, 71 insertions(+), 2 deletions(-) diff --git a/src/components/page-layout/__tests__/__snapshots__/page-layout.test.js.snap b/src/components/page-layout/__tests__/__snapshots__/page-layout.test.js.snap index 31bdf4a7b..ddc8114f7 100644 --- a/src/components/page-layout/__tests__/__snapshots__/page-layout.test.js.snap +++ b/src/components/page-layout/__tests__/__snapshots__/page-layout.test.js.snap @@ -1937,7 +1937,7 @@ Array [
+
  • { let tree; beforeEach(() => { + Object.defineProperty(document, 'body', { + value: { + clientWidth: 1000 + } + }); + testCase = testCases.groupIndexPage; wrapper = renderer.create(testCase.element); tree = wrapper.toJSON(); From 6eb9fbf1f3a0cfd0da88da168be9e60bddd14883 Mon Sep 17 00:00:00 2001 From: Katy DeCorah Date: Wed, 22 Sep 2021 14:46:15 -0400 Subject: [PATCH 6/6] Fix accessibility issue with list so that it's properly nested --- .../navigation-accordion.js | 31 +++++----- .../__snapshots__/page-layout.test.js.snap | 56 +++++++++---------- .../page-layout/__tests__/page-layout.test.js | 1 + 3 files changed, 44 insertions(+), 44 deletions(-) diff --git a/src/components/navigation-accordion/navigation-accordion.js b/src/components/navigation-accordion/navigation-accordion.js index 479e752a9..d32ab2d6f 100644 --- 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) => ( - -
  • + - - {page.title} - {page.tag && this.renderTag(page)} - -
    • + {page.title} + {page.tag && this.renderTag(page)} + {activeItem && activeItem.includes(page.path) && page.subPages && this.renderSubPages(page.subPages, activeItem)} - + )); return ( diff --git a/src/components/page-layout/__tests__/__snapshots__/page-layout.test.js.snap b/src/components/page-layout/__tests__/__snapshots__/page-layout.test.js.snap index ddc8114f7..8621d196d 100644 --- a/src/components/page-layout/__tests__/__snapshots__/page-layout.test.js.snap +++ b/src/components/page-layout/__tests__/__snapshots__/page-layout.test.js.snap @@ -1984,35 +1984,35 @@ Array [ > Worldview + -
  • diff --git a/src/components/page-layout/__tests__/page-layout.test.js b/src/components/page-layout/__tests__/page-layout.test.js index b858d35bd..98a1ec3b3 100644 --- a/src/components/page-layout/__tests__/page-layout.test.js +++ b/src/components/page-layout/__tests__/page-layout.test.js @@ -88,6 +88,7 @@ describe('page-layout', () => { let tree; beforeEach(() => { + /* Force snapshot at desktop view, so we can capture the NavigationAccordion for grouped guides */ Object.defineProperty(document, 'body', { value: { clientWidth: 1000