jprdonnelly/docs
1
0
Fork 0
mirror of synced 2025-12-21 10:57:10 -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

105
components/release-notes/GHESReleaseNotes.tsx
View File

@@ -1,4 +1,4 @@
import { useState } from 'react'
import { SyntheticEvent, useState } from 'react'
import cx from 'classnames'
import {
ChevronDownIcon,
@@ -103,47 +103,12 @@ export function GHESReleaseNotes({ context }: Props) {
if (release.version === currentVersion.currentRelease) {
return (
<li key={release.version} className="border-bottom">
<details
className="my-0 details-reset release-notes-version-picker"
aria-current="page"
open
>
<summary className="px-3 py-4 my-0 d-flex flex-items-center flex-justify-between">
{release.version}
<div className="d-flex">
<span className="color-text-tertiary text-mono text-small text-normal mr-1">
{release.patches.length} releases
</span>
<ChevronDownIcon />
</div>
</summary>
<ul className="color-bg-tertiary border-top list-style-none py-4 px-0 my-0">
{release.patches.map((patch) => {
const isActive = patch.version === focusedPatch
return (
<li
key={patch.version}
className={cx(
'js-release-notes-patch-link px-3 my-0 py-1',
isActive && 'selected'
)}
>
<Link
href={`${releaseLink}#${patch.version}`}
className="d-flex flex-items-center flex-justify-between"
>
{patch.version}
<span className="color-text-tertiary text-mono text-small text-normal">
{dayjs(patch.date).format('MMMM DD, YYYY')}
</span>
</Link>
</li>
)
})}
</ul>
</details>
</li>
<CollapsibleReleaseSection
key={release.version}
release={release}
focusedPatch={focusedPatch}
releaseLink={releaseLink}
/>
)
}
@@ -167,3 +132,59 @@ export function GHESReleaseNotes({ context }: Props) {
</div>
)
}
const CollapsibleReleaseSection = ({
release,
releaseLink,
focusedPatch,
}: {
release: GHESReleaseNotesContextT['releases'][0]
releaseLink: string
focusedPatch: string
}) => {
const defaultIsOpen = true
const [isOpen, setIsOpen] = useState(defaultIsOpen)
const onToggle = (e: SyntheticEvent) => {
const newIsOpen = (e.target as HTMLDetailsElement).open
setIsOpen(newIsOpen)
}
return (
<li key={release.version} className="border-bottom">
<details
className="my-0 details-reset release-notes-version-picker"
aria-current="page"
open={defaultIsOpen}
onToggle={onToggle}
>
<summary className="px-3 py-4 my-0 d-flex flex-items-center flex-justify-between">
{release.version}
<div className="d-flex">
<span className="color-text-tertiary text-mono text-small text-normal mr-1">
{release.patches.length} releases
</span>
<ChevronDownIcon className={isOpen ? 'rotate-180' : ''} />
</div>
</summary>
<ul className="color-bg-tertiary border-top list-style-none py-4 px-0 my-0">
{release.patches.map((patch) => {
const isActive = patch.version === focusedPatch
return (
<li key={patch.version} className={cx('px-3 my-0 py-1', isActive && 'color-bg-info')}>
<Link
href={`${releaseLink}#${patch.version}`}
className="d-flex flex-items-center flex-justify-between"
>
{patch.version}
<span className="color-text-tertiary text-mono text-small text-normal">
{dayjs(patch.date).format('MMMM DD, YYYY')}
</span>
</Link>
</li>
)
})}
</ul>
</details>
</li>
)
}