1
0
mirror of synced 2025-12-19 18:10:59 -05:00
Files
docs/components/release-notes/PatchNotes.tsx
Kevin Heis f798da7b7a A11y simpler release notes sidebar (#39392)
Co-authored-by: Peter Bengtsson <peterbe@github.com>
2023-07-24 14:45:20 +00:00

62 lines
1.9 KiB
TypeScript

import cx from 'classnames'
import { slug } from 'github-slugger'
import { ReleaseNotePatch } from './types'
import { HeadingLink } from 'components/article/HeadingLink'
import styles from './PatchNotes.module.scss'
const SectionToLabelMap: Record<string, string> = {
features: 'Features',
bugs: 'Bug fixes',
known_issues: 'Known issues',
security_fixes: 'Security fixes',
changes: 'Changes',
deprecations: 'Deprecations',
backups: 'Backups',
errata: 'Errata',
}
type Props = {
patch: ReleaseNotePatch
}
export function PatchNotes({ patch }: Props) {
return (
<>
{Object.entries(patch.sections).map(([key, sectionItems]) => {
const sectionSlug = `${patch.version}-${key.replaceAll('_', '-')}`
return (
<div key={key} className={cx('d-block d-xl-flex')}>
<div>
<HeadingLink as="h3" slug={sectionSlug}>
{`${patch.version}: ${SectionToLabelMap[key]}` || 'INVALID SECTION'}
</HeadingLink>
<ul>
{sectionItems.map((item, i) => {
if (typeof item === 'string') {
return <li key={item} dangerouslySetInnerHTML={{ __html: item }} />
}
const headingSlug = item.heading ? slug(item.heading) : `heading${i}`
return (
<li key={headingSlug}>
<h4 id={headingSlug} className={cx(styles.sectionHeading)}>
<a href={`#${headingSlug}`}>{item.heading}</a>
</h4>
<ul>
{item.notes.map((note) => {
return <li key={note} dangerouslySetInnerHTML={{ __html: note }} />
})}
</ul>
</li>
)
})}
</ul>
</div>
</div>
)
})}
</>
)
}