feat(clayui.com): update logic for handling navigation

bryceosterhaus · Oct 7, 2020 · 8186ed0 · 8186ed0
1 parent 628926b
commit 8186ed0
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 33 deletions.
diff --git a/clayui.com/src/utils/getSection.js b/clayui.com/src/utils/getSection.js
@@ -20,10 +20,6 @@ const sortByOrderAndTitle = (a, b) => {
 	}
 };
 
-const navigationRelationships = {
-	'/docs/components/form.html': [],
-};
-
 const toSectionElements = (
 	slug,
 	pathname,
@@ -61,42 +57,32 @@ const toSectionElements = (
 	};
 };
 
-const toSectionItem = (item, paths) => {
-	const isParentPackage = Object.keys(navigationRelationships).includes(
-		`/${item.pathname}`
-	);
-
-	if (item.navigationParent) {
-		navigationRelationships[item.navigationParent].push(
-			`/${item.pathname}`
-		);
-	}
-
+const toSectionItem = (item, paths, parentPaths) => {
 	if (item.isFolder) {
 		item.items = paths
-			.filter((path) => path.link !== item.link)
+			.filter(path => path.link !== item.link)
 			.filter(
-				(path) =>
+				path =>
 					path.link ===
 					item.parentLink + path.id + (path.isFolder ? '/index' : '')
 			)
-			.filter((path) => !path.navigationParent)
-			.map((path) => toSectionItem(path, paths))
+			.filter(path => !path.navigationParent)
+			.map(path => toSectionItem(path, paths, parentPaths))
 			.sort(sortByOrderAndTitle);
 	}
 
-	if (isParentPackage) {
+	if (parentPaths.includes(item.pathname)) {
 		item.items = paths
-			.filter((path) => path.navigationParent)
-			.filter((path) => path.link !== item.link)
-			.map((path) => toSectionItem(path, paths))
+			.filter(path => path.navigationParent === item.pathname)
+			.filter(path => path.link !== item.link)
+			.map(path => toSectionItem(path, paths, parentPaths))
 			.sort(sortByOrderAndTitle);
 	}
 
 	return item;
 };
 
-const getSection = (data) => {
+const getSection = data => {
 	const elements = data.map(({node}) => {
 		const {
 			fields: {
@@ -122,10 +108,16 @@ const getSection = (data) => {
 		);
 	});
 
-	const rootElements = elements.filter((path) => path.isRoot);
+	const rootElements = elements.filter(path => path.isRoot);
+
+	const parentPaths = elements.reduce((acc, {navigationParent}) => {
+		return navigationParent && !acc.includes(navigationParent)
+			? [...acc, navigationParent]
+			: acc;
+	}, []);
 
 	return rootElements
-		.map((path) => toSectionItem(path, elements))
+		.map(path => toSectionItem(path, elements, parentPaths))
 		.sort(sortByOrderAndTitle);
 };
 

diff --git a/packages/clay-form/CHECKBOX.mdx b/packages/clay-form/CHECKBOX.mdx
@@ -3,7 +3,7 @@ title: 'Checkbox'
 description: 'A checkbox is a component that lets the user select the value that is written in its corresponding text label. A user can select multiple checkboxes from a group at the same time.'
 lexiconDefinition: 'https://liferay.design/lexicon/core-components/forms/radio-check-toggle/'
 packageNpm: '@clayui/form'
-navigationParent: '/docs/components/form.html'
+navigationParent: 'docs/components/form.html'
 ---
 
 import {

diff --git a/packages/clay-form/DUAL_LIST_BOX.mdx b/packages/clay-form/DUAL_LIST_BOX.mdx
@@ -3,7 +3,7 @@ title: 'Dual List Box'
 description: 'Dual List Box provides users with two Select Boxes with the ability to move items between lists.'
 lexiconDefinition: 'https://liferay.design/lexicon/core-components/dual-listbox/'
 packageNpm: '@clayui/form'
-navigationParent: '/docs/components/form.html'
+navigationParent: 'docs/components/form.html'
 ---
 
 import {DualListBox} from '$packages/clay-form/docs/duallistbox';

diff --git a/packages/clay-form/INPUT.mdx b/packages/clay-form/INPUT.mdx
@@ -3,7 +3,7 @@ title: 'Input'
 description: 'This section demonstrates the different text input types.'
 lexiconDefinition: 'https://liferay.design/lexicon/core-components/forms/text-input/'
 packageNpm: '@clayui/form'
-navigationParent: '/docs/components/form.html'
+navigationParent: 'docs/components/form.html'
 ---
 
 import {

diff --git a/packages/clay-form/RADIO_GROUP.mdx b/packages/clay-form/RADIO_GROUP.mdx
@@ -2,7 +2,7 @@
 title: 'Radio Group'
 description: 'Radios provide users with different selection and activation tools.'
 packageNpm: '@clayui/form'
-navigationParent: '/docs/components/form.html'
+navigationParent: 'docs/components/form.html'
 ---
 
 import {RadioGroup} from '$packages/clay-form/docs/radiogroup';

diff --git a/packages/clay-form/SELECT.mdx b/packages/clay-form/SELECT.mdx
@@ -3,7 +3,7 @@ title: 'Select'
 description: 'A form control element used to select from several provided options and enter data.'
 lexiconDefinition: 'https://liferay.design/lexicon/core-components/forms/selector/'
 packageNpm: '@clayui/form'
-navigationParent: '/docs/components/form.html'
+navigationParent: 'docs/components/form.html'
 ---
 
 import {Select, SelectWithOption} from '$packages/clay-form/docs/select';

diff --git a/packages/clay-form/SELECT_BOX.mdx b/packages/clay-form/SELECT_BOX.mdx
@@ -3,7 +3,7 @@ title: 'Select Box'
 description: 'Select Box allows users to select multiple options and if needed the ability to reorder selected options.'
 lexiconDefinition: 'https://liferay.design/lexicon/core-components/dual-listbox/'
 packageNpm: '@clayui/form'
-navigationParent: '/docs/components/form.html'
+navigationParent: 'docs/components/form.html'
 ---
 
 import {SelectBox} from '$packages/clay-form/docs/selectbox';

diff --git a/packages/clay-form/TOGGLE_SWITCH.mdx b/packages/clay-form/TOGGLE_SWITCH.mdx
@@ -3,7 +3,7 @@ title: 'Toggle Switch'
 description: 'Toggle provide users with different selection and activation tools.'
 lexiconDefinition: 'https://liferay.design/lexicon/core-components/forms/radio-check-toggle/#toggle'
 packageNpm: '@clayui/form'
-navigationParent: '/docs/components/form.html'
+navigationParent: 'docs/components/form.html'
 ---
 
 import {RadioToggle, Toggle} from '$packages/clay-form/docs/toggle';