113 lines
3.6 KiB
TypeScript
113 lines
3.6 KiB
TypeScript
import { Fragment } from 'react'
|
|
import cx from 'classnames'
|
|
import slugger from 'github-slugger'
|
|
import { ReleaseNotePatch } from './types'
|
|
import { Link } from 'components/Link'
|
|
|
|
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',
|
|
}
|
|
|
|
const LabelColorMap = {
|
|
features: 'color-bg-success-emphasis',
|
|
bugs: 'color-bg-attention-emphasis',
|
|
known_issues: 'color-bg-accent-emphasis',
|
|
security_fixes: 'color-bg-sponsors-emphasis',
|
|
changes: 'color-bg-success-emphasis',
|
|
deprecations: 'color-bg-done-emphasis',
|
|
backups: 'color-bg-severe-emphasis',
|
|
}
|
|
|
|
const HeadingColorMap = {
|
|
features: 'color-fg-success',
|
|
bugs: 'color-fg-attention',
|
|
known_issues: 'color-fg-accent',
|
|
security_fixes: 'color-fg-sponsors',
|
|
changes: 'color-fg-success',
|
|
deprecations: 'color-fg-done',
|
|
backups: 'color-fg-severe',
|
|
}
|
|
|
|
type Props = {
|
|
patch: ReleaseNotePatch
|
|
withReleaseNoteLabel?: boolean
|
|
}
|
|
export function PatchNotes({ patch, withReleaseNoteLabel }: Props) {
|
|
return (
|
|
<>
|
|
{Object.entries(patch.sections).map(([key, sectionItems], i, arr) => {
|
|
const isLast = i === arr.length - 1
|
|
const primaryLabelColor =
|
|
LabelColorMap[key as keyof typeof LabelColorMap] || LabelColorMap.features
|
|
const primaryHeadingColor =
|
|
HeadingColorMap[key as keyof typeof HeadingColorMap] || HeadingColorMap.features
|
|
return (
|
|
<div
|
|
key={key}
|
|
className={cx(
|
|
'py-6 d-block d-xl-flex gutter-xl flex-items-baseline',
|
|
!withReleaseNoteLabel && 'mx-6',
|
|
!isLast && 'border-bottom'
|
|
)}
|
|
>
|
|
{withReleaseNoteLabel && (
|
|
<div className="col-12 col-xl-3 mb-5">
|
|
<span
|
|
className={cx(
|
|
'px-3 py-2 color-fg-on-emphasis text-small text-bold text-uppercase',
|
|
primaryLabelColor
|
|
)}
|
|
>
|
|
{SectionToLabelMap[key] || 'INVALID SECTION'}
|
|
</span>
|
|
</div>
|
|
)}
|
|
<ul className={cx(withReleaseNoteLabel && 'col-xl-9', 'col-12')}>
|
|
{sectionItems.map((item) => {
|
|
if (typeof item === 'string') {
|
|
return <li key={item} className="f4" dangerouslySetInnerHTML={{ __html: item }} />
|
|
}
|
|
|
|
const slug = item.heading ? slugger.slug(item.heading) : ''
|
|
return (
|
|
<Fragment key={slug}>
|
|
<h4
|
|
id={slug}
|
|
className={cx(
|
|
styles.sectionHeading,
|
|
primaryHeadingColor,
|
|
'text-uppercase text-bold f4'
|
|
)}
|
|
>
|
|
<Link href={`#${slug}`} className="color-fg-inherit">
|
|
{item.heading}
|
|
</Link>
|
|
</h4>
|
|
{item.notes.map((note) => {
|
|
return (
|
|
<li
|
|
key={note}
|
|
className={cx(!withReleaseNoteLabel && 'list-style-none', 'f4')}
|
|
dangerouslySetInnerHTML={{ __html: note }}
|
|
/>
|
|
)
|
|
})}
|
|
</Fragment>
|
|
)
|
|
})}
|
|
</ul>
|
|
</div>
|
|
)
|
|
})}
|
|
</>
|
|
)
|
|
}
|