jprdonnelly/docs
1
0
Fork 0
mirror of synced 2025-12-22 19:34:15 -05:00
Code Issues Projects Releases Wiki Activity

scope release-notes scss to component and reduce custom styles (#20847)

Browse Source
This commit is contained in:
Mike Surowiec
2021-08-16 10:10:58 -04:00
committed by GitHub
parent 69d6e0e63e
commit ccbb92ab87
6 changed files with 153 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
components/release-notes/PatchNotes.tsx
View File

@@ -3,6 +3,8 @@ 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',
@@ -13,6 +15,16 @@ const SectionToLabelMap: Record<string, string> = {
backups: 'Backups',
}
const ColorMap = {
features: 'var(--color-auto-green-5)',
bugs: 'var(--color-auto-yellow-5)',
known_issues: 'var(--color-auto-blue-5)',
security_fixes: 'var(--color-auto-pink-5)',
changes: 'var(--color-auto-green-5)',
deprecations: 'var(--color-auto-purple-5)',
backups: 'var(--color-auto-orange-5)',
}
type Props = {
patch: ReleaseNotePatch
withReleaseNoteLabel?: boolean
@@ -22,11 +34,11 @@ export function PatchNotes({ patch, withReleaseNoteLabel }: Props) {
<>
{Object.entries(patch.sections).map(([key, sectionItems], i, arr) => {
const isLast = i === arr.length - 1
const primaryColor = ColorMap[key as keyof typeof ColorMap] || ColorMap.features
return (
<div
key={key}
className={cx(
`release-notes-section-${key}`,
'py-6 d-block d-xl-flex gutter-xl flex-items-baseline',
!withReleaseNoteLabel && 'mx-6',
!isLast && 'border-bottom'
@@ -34,41 +46,39 @@ export function PatchNotes({ patch, withReleaseNoteLabel }: Props) {
>
{withReleaseNoteLabel && (
<div className="col-12 col-xl-3 mb-5">
<span className="px-3 py-2 text-small text-bold text-uppercase text-mono color-text-inverse release-notes-section-label">
<span
className="px-3 py-2 text-small text-bold text-uppercase text-mono color-text-inverse"
style={{ backgroundColor: primaryColor }}
>
{SectionToLabelMap[key] || 'INVALID SECTION'}
</span>
</div>
)}
<ul className={cx(withReleaseNoteLabel && 'col-xl-9', 'col-12 release-notes-list')}>
<ul className={cx(withReleaseNoteLabel && 'col-xl-9', 'col-12')}>
{sectionItems.map((item) => {
if (typeof item === 'string') {
return (
<li
key={item}
className="release-notes-list-item"
dangerouslySetInnerHTML={{ __html: item }}
/>
)
return <li key={item} className="f4" dangerouslySetInnerHTML={{ __html: item }} />
}
const slug = item.heading ? slugger.slug(item.heading) : ''
return (
<li key={slug} className="release-notes-list-item list-style-none">
<li key={slug} className="list-style-none">
<h4
id={slug}
className="release-notes-section-heading text-uppercase text-bold"
className={cx(styles.sectionHeading, 'text-uppercase text-bold f4')}
style={{ color: !withReleaseNoteLabel ? primaryColor : '' }}
>
<Link href={`#${slug}`} className="text-inherit">
{item.heading}
</Link>
</h4>
<ul className="pl-0 pb-4 mt-2 release-notes-list">
<ul className="pl-0 pb-4 mt-2">
{item.notes.map((note) => {
return (
<li
key={note}
className="release-notes-list-item"
className="list-style-none f4"
dangerouslySetInnerHTML={{ __html: note }}
/>
)