jprdonnelly/docs
1
0
Fork 0
mirror of synced 2025-12-30 12:02:01 -05:00
Code Issues Projects Releases Wiki Activity

Merge pull request #20170 from github/repo-sync

Browse Source 
repo sync
This commit is contained in:
Octomerger Bot
2022-08-25 13:03:39 -04:00
committed by GitHub
parent aef9ee6506 3849f7afd5
commit 6f2318e4ea
3 changed files with 62 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
components/ui/MiniTocs/MiniTocs.tsx
View File

@@ -1,43 +1,43 @@
import React from 'react'
import { Heading, NavList } from '@primer/react'
import cx from 'classnames'
import { ActionList, Heading } from '@primer/react'
import type { MiniTocItem } from 'components/context/ArticleContext'
import { MiniTocItem } from 'components/context/ArticleContext'
import { Link } from 'components/Link'
import { useTranslation } from 'components/hooks/useTranslation'
import styles from './Minitocs.module.scss'
export type MiniTocsPropsT = {
pageTitle: string
miniTocItems: MiniTocItem[]
}
const renderTocItem = (item: MiniTocItem) => {
function RenderTocItem(item: MiniTocItem) {
return (
<ActionList.Item
as="li"
key={item.contents.href}
className={item.platform}
sx={{
listStyle: 'none',
padding: '2px',
':hover': {
bg: 'var(--color-canvas-inset) !important',
},
'ul > li': {
':hover': {
bg: 'var(--color-neutral-subtle) !important',
},
},
}}
>
<div className={cx('lh-condensed d-block width-full')}>
<a className="d-block width-auto" href={item.contents.href}>
{item.contents.title}
</a>
{item.items && item.items.length > 0 ? (
<ul className="ml-3">{item.items.map(renderTocItem)}</ul>
) : null}
</div>
</ActionList.Item>
<div className={cx(styles.nested, item.platform)}>
<NavList.Item
href={item.contents.href}
sx={{
padding: '4px 0 4px 0',
marginLeft: '7px',
}}
>
{item.contents.title}
</NavList.Item>
{item.items && item.items.length > 0 && (
<ul className={cx(styles.indentNested)}>
{item.items.map((toc) => (
<RenderTocItem
key={toc.contents.href}
contents={toc.contents}
items={toc.items}
platform={toc.platform}
/>
))}
</ul>
)}
</div>
)
}
@@ -46,17 +46,22 @@ export function MiniTocs({ pageTitle, miniTocItems }: MiniTocsPropsT) {
return (
<>
<Heading as="h2" id="in-this-article" className="mb-1" sx={{ fontSize: 1 }}>
<Heading as="h2" id="in-this-article" className="mb-1 ml-3" sx={{ fontSize: 1 }}>
<Link href="#in-this-article">{t('miniToc')}</Link>
</Heading>
<ActionList variant="full" className="my-2" key={pageTitle} as="div">
<div>
{miniTocItems.map((items, i) => {
return <ul key={pageTitle + i}>{renderTocItem(items)}</ul>
})}
</div>
</ActionList>
<NavList className="my-2" key={pageTitle}>
{miniTocItems.map((items, i) => {
return (
<RenderTocItem
key={items.contents.href + i}
contents={items.contents}
items={items.items}
platform={items.platform}
/>
)
})}
</NavList>
</>
)
}

12
components/ui/MiniTocs/Minitocs.module.scss Normal file
View File

@@ -0,0 +1,12 @@
.indentNested {
padding-inline-start: 0;
}
.nested {
div ul div li {
padding-left: 4em;
}
div li {
padding-left: 2em;
}
}

20
tests/rendering/server.js
View File

@@ -326,7 +326,7 @@ describe('server', () => {
test('renders mini TOC in articles with more than one heading', async () => {
const $ = await getDOM('/en/github/getting-started-with-github/githubs-products')
expect($('h2#in-this-article').length).toBe(1)
expect($('h2#in-this-article + div div ul').length).toBeGreaterThan(1)
expect($('h2#in-this-article + nav ul li').length).toBeGreaterThan(1)
})
test('renders mini TOC in articles that includes h3s when specified by frontmatter', async () => {
@@ -334,8 +334,8 @@ describe('server', () => {
'/en/admin/policies/enforcing-policies-for-your-enterprise/enforcing-policies-for-security-settings-in-your-enterprise'
)
expect($('h2#in-this-article').length).toBe(1)
expect($('h2#in-this-article + div div ul').length).toBeGreaterThan(0) // non-indented items
expect($('h2#in-this-article + div div ul li div div ul.ml-3').length).toBeGreaterThan(0) // indented items
expect($('h2#in-this-article + nav ul').length).toBeGreaterThan(0) // non-indented items
expect($('h2#in-this-article + nav ul div ul div').length).toBeGreaterThan(0) // indented items
})
test('does not render mini TOC in articles with only one heading', async () => {
@@ -358,13 +358,13 @@ describe('server', () => {
// TODO
test('renders mini TOC with correct links when headings contain markup', async () => {
const $ = await getDOM('/en/actions/using-workflows/workflow-syntax-for-github-actions')
expect($('h2#in-this-article + div div ul a[href="#on"]').length).toBe(1)
expect($('h2#in-this-article + nav ul li a[href="#on"]').length).toBe(1)
})
// TODO
test('renders mini TOC with correct links when headings contain markup in localized content', async () => {
const $ = await getDOM('/ja/actions/using-workflows/workflow-syntax-for-github-actions')
expect($('h2#in-this-article + div div ul a[href="#on"]').length).toBe(1)
expect($('h2#in-this-article + nav ul li a[href="#on"]').length).toBe(1)
})
})
@@ -918,13 +918,9 @@ describe('extended Markdown', () => {
test('renders expected mini TOC headings in platform-specific content', async () => {
const $ = await getDOM('/en/github/using-git/associating-text-editors-with-git')
expect($('h2#in-this-article').length).toBe(1)
expect($('h2#in-this-article + div div ul li.extended-markdown.mac').length).toBeGreaterThan(1)
expect(
$('h2#in-this-article + div div ul li.extended-markdown.windows').length
).toBeGreaterThan(1)
expect($('h2#in-this-article + div div ul li.extended-markdown.linux').length).toBeGreaterThan(
1
)
expect($('h2#in-this-article + nav ul div.extended-markdown.mac').length).toBeGreaterThan(1)
expect($('h2#in-this-article + nav ul div.extended-markdown.windows').length).toBeGreaterThan(1)
expect($('h2#in-this-article + nav ul div.extended-markdown.linux').length).toBeGreaterThan(1)
})
})