1
0
mirror of synced 2026-01-04 00:06:20 -05:00
Files
docs/components/release-notes/GHAEReleaseNotes.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

61 lines
1.8 KiB
TypeScript

import cx from 'classnames'
import { Link } from 'components/Link'
import { MarkdownContent } from 'components/ui/MarkdownContent'
import { GHAEReleaseNotesContextT } from './types'
import { GHAEReleaseNotePatch } from './GHAEReleaseNotePatch'
import styles from './PatchNotes.module.scss'
type Props = {
context: GHAEReleaseNotesContextT
}
export function GHAEReleaseNotes({ context }: Props) {
const { currentVersion, releaseNotes, releases } = context
return (
<>
<h1 id="title-h1" className="f4 p-3 m-0 border-bottom">
{currentVersion.planTitle} release notes
</h1>
<div className="d-md-flex flex-md-row-reverse">
{releases && (
<aside
className={cx('position-sticky border-md-left no-print flex-shrink-0', styles.aside)}
>
<nav className="height-full overflow-auto">
<ul className="list-style-none py-2 px-0 my-0">
{releases.map((release) => {
return (
<li key={release.version} className="my-2 px-3 f4 d-inline-block d-md-block">
<Link className="text-underline" href={`#${release.version}`}>
{release.version}
</Link>
</li>
)
})}
</ul>
</nav>
</aside>
)}
<article className="flex-1 flex-shrink-0">
<MarkdownContent data-search="article-body">
{releaseNotes.map((patch) => {
return (
<GHAEReleaseNotePatch
key={patch.version}
patch={patch}
currentVersion={currentVersion}
/>
)
})}
</MarkdownContent>
</article>
</div>
</>
)
}