diff --git a/.changeset/fuzzy-planets-explain.md b/.changeset/fuzzy-planets-explain.md new file mode 100644 index 0000000000..a0cd0fccf7 --- /dev/null +++ b/.changeset/fuzzy-planets-explain.md @@ -0,0 +1,6 @@ +--- +'@commercetools-docs/gatsby-theme-docs': patch +'@commercetools-website/docs-smoke-test': patch +--- + +Fix issue with multiple expanding chapters working in "tanem" when expanded diff --git a/packages/gatsby-theme-docs/src/hooks/use-sidebar-navigation-items.js b/packages/gatsby-theme-docs/src/hooks/use-sidebar-navigation-items.js index 5f0d6c9e19..17d4bba288 100644 --- a/packages/gatsby-theme-docs/src/hooks/use-sidebar-navigation-items.js +++ b/packages/gatsby-theme-docs/src/hooks/use-sidebar-navigation-items.js @@ -39,7 +39,12 @@ function createAncestorsTree(data) { function traverse(chapters, parentPath = [], level = 0) { chapters.forEach((chapter, index) => { if (chapter.pages) { - const currentPath = [...parentPath, `${level}-${index}`]; + let newPath = `${parentPath.join('#')}#${level}-${index}`; + if (newPath.startsWith('#')) { + newPath = newPath.substring(1); + } + const currentPath = [...parentPath, newPath]; + ancestorsArray.push(currentPath); if (chapter.pages.length > 0) { diff --git a/packages/gatsby-theme-docs/src/layouts/internals/sidebar.js b/packages/gatsby-theme-docs/src/layouts/internals/sidebar.js index 5beaec5837..5a407cdd1a 100644 --- a/packages/gatsby-theme-docs/src/layouts/internals/sidebar.js +++ b/packages/gatsby-theme-docs/src/layouts/internals/sidebar.js @@ -277,18 +277,23 @@ const Title = styled.span` : designSystem.typography.fontWeights.regular}; `; -const ChapterTitle = (props) => ( - props.toggleExpand()}> - - {props.text} - - {props.isExpanded ? ( - - ) : ( - - )} - -); +const ChapterTitle = (props) => { + return ( + props.toggleExpand()} + > + + {props.text} + + {props.isExpanded ? ( + + ) : ( + + )} + + ); +}; ChapterTitle.propTypes = { text: PropTypes.string.isRequired, isExpanded: PropTypes.bool, @@ -326,17 +331,16 @@ const Chapter = (props) => { props.location ); const { ancestorsMap } = useSidebarNavigationItems(); - const chapterId = `${props.level}-${props.index}`; + const chapterId = + props.level === 1 && props.parentChapterId + ? `${props.parentChapterId}#${props.level}-${props.index}` + : `${props.level}-${props.index}`; const { setExpandedChapters } = useContext(SidebarContextApi); const { expandedChapters } = useContext(SidebarContextState); useEffect(() => { if (isSelectedChapter) { - const initialState = getItemAncestors( - props.level, - props.index, - ancestorsMap - ); + const initialState = getItemAncestors(chapterId, ancestorsMap); const expandedItemsList = initialState.length > 0 ? initialState : [chapterId]; @@ -356,6 +360,7 @@ const Chapter = (props) => { if (expandedChapters?.includes(chapterId)) { // close the chapter (and all its descendants, if any) const descendants = getItemDescendants( + chapterId, props.level, props.index, ancestorsMap @@ -402,6 +407,7 @@ const Chapter = (props) => { index={pageIndex} level={1} chapter={page} + parentChapterId={chapterId} location={props.location} onLinkClick={props.onLinkClick} nextScrollPosition={props.nextScrollPosition} @@ -429,6 +435,7 @@ const Chapter = (props) => { Chapter.propTypes = { index: PropTypes.number.isRequired, level: PropTypes.number.isRequired, + parentChapterId: PropTypes.string, chapter: PropTypes.object.isRequired, onLinkClick: PropTypes.func, nextScrollPosition: PropTypes.number.isRequired, diff --git a/packages/gatsby-theme-docs/src/layouts/internals/sidebar.utils.js b/packages/gatsby-theme-docs/src/layouts/internals/sidebar.utils.js index e0b3ff1005..9ac318d80a 100644 --- a/packages/gatsby-theme-docs/src/layouts/internals/sidebar.utils.js +++ b/packages/gatsby-theme-docs/src/layouts/internals/sidebar.utils.js @@ -1,17 +1,23 @@ -export const getItemDescendants = (level, index, ancestorsMap) => { +export const getItemDescendants = ( + subChapterId, + level, + index, + ancestorsMap +) => { const chapterId = `${level}-${index}`; if (level === 1) { - return [chapterId]; + return [subChapterId]; } else { const descendantsArray = ancestorsMap.filter((element) => element.includes(chapterId) ); - return [].concat(...descendantsArray); + return (chapterId.includes('#') ? [subChapterId] : []).concat( + ...descendantsArray + ); } }; -export const getItemAncestors = (level, index, ancestorsMap) => { - const chapterId = `${level}-${index}`; +export const getItemAncestors = (chapterId, ancestorsMap) => { const ancestorsArray = ancestorsMap.filter( (element) => element.includes(chapterId) && element.indexOf(chapterId) > 0 ); diff --git a/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-eight.mdx b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-eight.mdx new file mode 100644 index 0000000000..a7b6e3b340 --- /dev/null +++ b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-eight.mdx @@ -0,0 +1,3 @@ +--- +title: Empty page +--- diff --git a/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-eleven.mdx b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-eleven.mdx new file mode 100644 index 0000000000..a7b6e3b340 --- /dev/null +++ b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-eleven.mdx @@ -0,0 +1,3 @@ +--- +title: Empty page +--- diff --git a/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-five.mdx b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-five.mdx new file mode 100644 index 0000000000..a7b6e3b340 --- /dev/null +++ b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-five.mdx @@ -0,0 +1,3 @@ +--- +title: Empty page +--- diff --git a/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-four.mdx b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-four.mdx new file mode 100644 index 0000000000..a7b6e3b340 --- /dev/null +++ b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-four.mdx @@ -0,0 +1,3 @@ +--- +title: Empty page +--- diff --git a/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-fourteen.mdx b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-fourteen.mdx new file mode 100644 index 0000000000..a7b6e3b340 --- /dev/null +++ b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-fourteen.mdx @@ -0,0 +1,3 @@ +--- +title: Empty page +--- diff --git a/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-nine.mdx b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-nine.mdx new file mode 100644 index 0000000000..a7b6e3b340 --- /dev/null +++ b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-nine.mdx @@ -0,0 +1,3 @@ +--- +title: Empty page +--- diff --git a/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-one.mdx b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-one.mdx new file mode 100644 index 0000000000..a7b6e3b340 --- /dev/null +++ b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-one.mdx @@ -0,0 +1,3 @@ +--- +title: Empty page +--- diff --git a/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-seven.mdx b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-seven.mdx new file mode 100644 index 0000000000..a7b6e3b340 --- /dev/null +++ b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-seven.mdx @@ -0,0 +1,3 @@ +--- +title: Empty page +--- diff --git a/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-six.mdx b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-six.mdx new file mode 100644 index 0000000000..a7b6e3b340 --- /dev/null +++ b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-six.mdx @@ -0,0 +1,3 @@ +--- +title: Empty page +--- diff --git a/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-ten.mdx b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-ten.mdx new file mode 100644 index 0000000000..a7b6e3b340 --- /dev/null +++ b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-ten.mdx @@ -0,0 +1,3 @@ +--- +title: Empty page +--- diff --git a/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-thirteen.mdx b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-thirteen.mdx new file mode 100644 index 0000000000..a7b6e3b340 --- /dev/null +++ b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-thirteen.mdx @@ -0,0 +1,3 @@ +--- +title: Empty page +--- diff --git a/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-three.mdx b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-three.mdx new file mode 100644 index 0000000000..a7b6e3b340 --- /dev/null +++ b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-three.mdx @@ -0,0 +1,3 @@ +--- +title: Empty page +--- diff --git a/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-twelve.mdx b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-twelve.mdx new file mode 100644 index 0000000000..a7b6e3b340 --- /dev/null +++ b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-twelve.mdx @@ -0,0 +1,3 @@ +--- +title: Empty page +--- diff --git a/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-two.mdx b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-two.mdx new file mode 100644 index 0000000000..a7b6e3b340 --- /dev/null +++ b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-two.mdx @@ -0,0 +1,3 @@ +--- +title: Empty page +--- diff --git a/websites/docs-smoke-test/src/content/empty-pages-2/overview-1.mdx b/websites/docs-smoke-test/src/content/empty-pages-2/overview-1.mdx new file mode 100644 index 0000000000..d8b6ffc819 --- /dev/null +++ b/websites/docs-smoke-test/src/content/empty-pages-2/overview-1.mdx @@ -0,0 +1,10 @@ +--- +title: Empty pages +showTimeToRead: false +timeToRead: false +--- + +# Contents of this chapter + +- [PageWithLongNameThatOverflowsBecauseItsOneWord](/empty-pages/empty-page-three) +- [BetaPageWithLongNameThatOverflowsBecauseItsOneWord](/empty-pages/empty-page-four) diff --git a/websites/docs-smoke-test/src/content/empty-pages-2/overview.mdx b/websites/docs-smoke-test/src/content/empty-pages-2/overview.mdx new file mode 100644 index 0000000000..20dd0b9703 --- /dev/null +++ b/websites/docs-smoke-test/src/content/empty-pages-2/overview.mdx @@ -0,0 +1,10 @@ +--- +title: Empty pages +showTimeToRead: false +timeToRead: false +--- + +# Contents of this chapter + +- [Page with some very long title too much for our innocent API to handle](/empty-pages/empty-page-one) +- [Beta Page with some very long title too much for our innocent API to handle](/empty-pages/empty-page-two) diff --git a/websites/docs-smoke-test/src/data/navigation.yaml b/websites/docs-smoke-test/src/data/navigation.yaml index 3a1e4bf798..086c50ade0 100644 --- a/websites/docs-smoke-test/src/data/navigation.yaml +++ b/websites/docs-smoke-test/src/data/navigation.yaml @@ -69,6 +69,30 @@ path: /empty-pages/empty-page-ten - title: third level page 3 path: /empty-pages/empty-page-eleven +- chapter-title: Further Subchapters + pages: + - title: Subchapter One + pages: + - title: third level page 1 + path: /empty-pages-2/empty-page-five + - title: third level page 2 + path: /empty-pages-2/empty-page-six + - title: third level page 3 + path: /empty-pages-2/empty-page-seven + - title: Normal Chapter 1 + path: /empty-pages-2/empty-page-twelve + - title: Normal Chapter 2 + path: /empty-pages-2/empty-page-thirteen + - title: Normal Chapter 3 + path: /empty-pages-2/empty-page-fourteen + - title: Subchapter Two + pages: + - title: third level page 1 + path: /empty-pages-2/empty-page-nine + - title: third level page 2 + path: /empty-pages-2/empty-page-ten + - title: third level page 3 + path: /empty-pages-2/empty-page-eleven - chapter-title: Chapter 9999 With a Longer Multi-Word Name that Wraps pages: - title: Page with some very long title too much for our innocent API to handle