Skip to content

Commit a81e6a2

Browse files
authored
Merge pull request github#7274 from github/repo-sync
repo sync
2 parents 5f6a875 + 8082a6e commit a81e6a2

File tree

3 files changed

+110
-96
lines changed

3 files changed

+110
-96
lines changed

components/article/ArticleTitle.tsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Tooltip, Link } from '@primer/components'
1+
import { Tooltip } from '@primer/components'
22
import { PrinterIcon } from './PrinterIcon'
33

44
type Props = {
@@ -10,10 +10,8 @@ export const ArticleTitle = ({ children }: Props) => {
1010
<h1 className="my-4 border-bottom-0">{children}</h1>
1111
<div className="d-none d-lg-block ml-2">
1212
<Tooltip aria-label="Print this article" noDelay direction="n">
13-
<Link
14-
as="button"
15-
underline={false}
16-
muted
13+
<button
14+
className="btn-link Link--muted"
1715
onClick={() => {
1816
try {
1917
document.execCommand('print', false)
@@ -23,7 +21,7 @@ export const ArticleTitle = ({ children }: Props) => {
2321
}}
2422
>
2523
<PrinterIcon />
26-
</Link>
24+
</button>
2725
</Tooltip>
2826
</div>
2927
</div>

components/context/TocLandingContext.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import pick from 'lodash/pick'
12
import { createContext, useContext } from 'react'
23

34
export type TocItem = {
@@ -26,10 +27,13 @@ export const useTocLandingContext = (): TocLandingContextT => {
2627
}
2728

2829
export const getTocLandingContextFromRequest = (req: any): TocLandingContextT => {
30+
console.log(req.context.genericTocFlat, req.context.genericTocNested)
2931
return {
3032
title: req.context.page.title,
3133
introPlainText: req.context.page.introPlainText,
32-
tocItems: req.context.genericTocFlat || req.context.genericTocNested || [],
34+
tocItems: (req.context.genericTocFlat || req.context.genericTocNested || []).map((obj: any) =>
35+
pick(obj, ['fullPath', 'title', 'intro'])
36+
),
3337
variant: req.context.genericTocFlat ? 'expanded' : 'compact',
3438
}
3539
}

components/product/SidebarProduct.tsx

Lines changed: 101 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ export const SidebarProduct = () => {
1717

1818
const productTitle = currentProductTree.renderedShortTitle || currentProductTree.renderedFullTitle
1919
const routePath = `/${router.locale}${router.asPath.split('?')[0]}` // remove query string
20+
const hasExactCategory = currentProductTree.childPages.find(({ href }) =>
21+
routePath.includes(href)
22+
)
2023
return (
2124
<>
2225
<AllProductsLink />
@@ -40,6 +43,7 @@ export const SidebarProduct = () => {
4043
const childTitle = childPage.renderedShortTitle || childPage.renderedFullTitle
4144
const isActive = routePath.includes(childPage.href)
4245
const isCurrent = routePath === childPage.href
46+
const defaultOpen = hasExactCategory ? isActive : i < 3
4347
return (
4448
<li
4549
key={childPage.href + i}
@@ -59,7 +63,7 @@ export const SidebarProduct = () => {
5963
</Link>
6064
) : (
6165
<CollapsibleSection
62-
index={i}
66+
defaultOpen={defaultOpen}
6367
routePath={routePath}
6468
title={childTitle}
6569
page={childPage}
@@ -77,15 +81,15 @@ export const SidebarProduct = () => {
7781
}
7882

7983
type SectionProps = {
80-
index: number
8184
routePath: string
8285
page: CurrentProductTree
8386
title: string
87+
defaultOpen: boolean
8488
}
8589
const CollapsibleSection = (props: SectionProps) => {
86-
const { routePath, index, title, page } = props
87-
const isDefaultOpen = routePath.includes(page.href) || index < 3
88-
const { getDetailsProps, open: isOpen } = useDetails({ defaultOpen: isDefaultOpen })
90+
const { routePath, defaultOpen, title, page } = props
91+
const { getDetailsProps, open: isOpen } = useDetails({ defaultOpen: defaultOpen })
92+
const hideChildren = !defaultOpen
8993
return (
9094
<Details {...getDetailsProps()} className="details-reset">
9195
<summary>
@@ -96,96 +100,104 @@ const CollapsibleSection = (props: SectionProps) => {
96100
>
97101
{title}
98102
</Link>
99-
{page.childPages.length > 0 && (
103+
{!hideChildren && page.childPages.length > 0 && (
100104
<span style={{ marginTop: 7 }} className="flex-shrink-0 pr-3">
101105
<ChevronDownIcon className={cx('opacity-60', isOpen && 'rotate-180')} />
102106
</span>
103107
)}
104108
</div>
105109
</summary>
106-
{/* <!-- some categories have maptopics with child articles --> */}
107-
{page.childPages[0].page.documentType === 'mapTopic' ? (
108-
<ul className="sidebar-topics list-style-none position-relative">
109-
{page.childPages.map((childPage, i) => {
110-
const childTitle = childPage.renderedShortTitle || childPage.renderedFullTitle
111-
const isActive = routePath.includes(childPage.href)
112-
const isCurrent = routePath === childPage.href
113-
return (
114-
<li
115-
key={childPage.href + i}
116-
className={cx(
117-
'sidebar-maptopic',
118-
isActive && 'active',
119-
isCurrent && 'is-current-page'
120-
)}
121-
>
122-
<Link
123-
href={childPage.href}
124-
className="pl-4 pr-5 py-2 color-text-primary no-underline"
125-
>
126-
{childTitle}
127-
</Link>
128-
<ul className="sidebar-articles my-2">
129-
{childPage.childPages.map((grandchildPage, i, arr) => {
130-
const grandchildTitle =
131-
grandchildPage.renderedShortTitle || grandchildPage.renderedFullTitle
132-
const isLast = i === arr.length - 1
133-
const isActive = routePath.includes(grandchildPage.href)
134-
const isCurrent = routePath === grandchildPage.href
135-
return (
136-
<li
137-
key={grandchildPage.href + i}
138-
className={cx(
139-
'sidebar-article',
140-
isActive && 'active',
141-
isCurrent && 'is-current-page'
142-
)}
143-
>
144-
<Link
145-
href={grandchildPage.href}
146-
className={cx(
147-
'pl-6 pr-5 py-1 color-text-primary no-underline',
148-
isLast && 'pb-2'
149-
)}
150-
>
151-
{grandchildTitle}
152-
</Link>
153-
</li>
154-
)
155-
})}
156-
</ul>
157-
</li>
158-
)
159-
})}
160-
</ul>
161-
) : page.childPages[0].page.documentType === 'article' ? (
162-
<ul className="sidebar-articles list-style-none">
163-
{/* <!-- some categories have no maptopics, only articles --> */}
164-
{page.childPages.map((childPage, i, arr) => {
165-
const childTitle = childPage.renderedShortTitle || childPage.renderedFullTitle
166-
const isLast = i === arr.length - 1
167-
const isActive = routePath.includes(childPage.href)
168-
const isCurrent = routePath === childPage.href
169-
return (
170-
<li
171-
key={childPage.href + i}
172-
className={cx(
173-
'sidebar-article',
174-
isActive && 'active',
175-
isCurrent && 'is-current-page'
176-
)}
177-
>
178-
<Link
179-
href={childPage.href}
180-
className={cx('pl-6 pr-5 py-1 color-text-primary no-underline', isLast && 'pb-2')}
181-
>
182-
{childTitle}
183-
</Link>
184-
</li>
185-
)
186-
})}
187-
</ul>
188-
) : null}
110+
111+
{!hideChildren && (
112+
<>
113+
{/* <!-- some categories have maptopics with child articles --> */}
114+
{page.childPages[0].page.documentType === 'mapTopic' ? (
115+
<ul className="sidebar-topics list-style-none position-relative">
116+
{page.childPages.map((childPage, i) => {
117+
const childTitle = childPage.renderedShortTitle || childPage.renderedFullTitle
118+
const isActive = routePath.includes(childPage.href)
119+
const isCurrent = routePath === childPage.href
120+
return (
121+
<li
122+
key={childPage.href + i}
123+
className={cx(
124+
'sidebar-maptopic',
125+
isActive && 'active',
126+
isCurrent && 'is-current-page'
127+
)}
128+
>
129+
<Link
130+
href={childPage.href}
131+
className="pl-4 pr-5 py-2 color-text-primary no-underline"
132+
>
133+
{childTitle}
134+
</Link>
135+
<ul className="sidebar-articles my-2">
136+
{childPage.childPages.map((grandchildPage, i, arr) => {
137+
const grandchildTitle =
138+
grandchildPage.renderedShortTitle || grandchildPage.renderedFullTitle
139+
const isLast = i === arr.length - 1
140+
const isActive = routePath.includes(grandchildPage.href)
141+
const isCurrent = routePath === grandchildPage.href
142+
return (
143+
<li
144+
key={grandchildPage.href + i}
145+
className={cx(
146+
'sidebar-article',
147+
isActive && 'active',
148+
isCurrent && 'is-current-page'
149+
)}
150+
>
151+
<Link
152+
href={grandchildPage.href}
153+
className={cx(
154+
'pl-6 pr-5 py-1 color-text-primary no-underline',
155+
isLast && 'pb-2'
156+
)}
157+
>
158+
{grandchildTitle}
159+
</Link>
160+
</li>
161+
)
162+
})}
163+
</ul>
164+
</li>
165+
)
166+
})}
167+
</ul>
168+
) : page.childPages[0].page.documentType === 'article' ? (
169+
<ul className="sidebar-articles list-style-none">
170+
{/* <!-- some categories have no maptopics, only articles --> */}
171+
{page.childPages.map((childPage, i, arr) => {
172+
const childTitle = childPage.renderedShortTitle || childPage.renderedFullTitle
173+
const isLast = i === arr.length - 1
174+
const isActive = routePath.includes(childPage.href)
175+
const isCurrent = routePath === childPage.href
176+
return (
177+
<li
178+
key={childPage.href + i}
179+
className={cx(
180+
'sidebar-article',
181+
isActive && 'active',
182+
isCurrent && 'is-current-page'
183+
)}
184+
>
185+
<Link
186+
href={childPage.href}
187+
className={cx(
188+
'pl-6 pr-5 py-1 color-text-primary no-underline',
189+
isLast && 'pb-2'
190+
)}
191+
>
192+
{childTitle}
193+
</Link>
194+
</li>
195+
)
196+
})}
197+
</ul>
198+
) : null}
199+
</>
200+
)}
189201
</Details>
190202
)
191203
}

0 commit comments

Comments
 (0)