diff --git a/components/release-notes/GHAEReleaseNotes.tsx b/components/release-notes/GHAEReleaseNotes.tsx index 96970987cf..b4f4b221ba 100644 --- a/components/release-notes/GHAEReleaseNotes.tsx +++ b/components/release-notes/GHAEReleaseNotes.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react' +import { SyntheticEvent, useState } from 'react' import cx from 'classnames' import { ChevronDownIcon } from '@primer/octicons-react' import { GHAEReleaseNotePatch } from './GHAEReleaseNotePatch' @@ -41,44 +41,11 @@ export function GHAEReleaseNotes({ context }: GitHubAEProps) { @@ -87,3 +54,55 @@ export function GHAEReleaseNotes({ context }: GitHubAEProps) { ) } + +const CollapsibleReleaseSection = ({ + release, + focusedPatch, +}: { + release: GHAEReleaseNotesContextT['releases'][0] + focusedPatch: string +}) => { + const defaultIsOpen = true + const [isOpen, setIsOpen] = useState(defaultIsOpen) + + const onToggle = (e: SyntheticEvent) => { + const newIsOpen = (e.target as HTMLDetailsElement).open + setIsOpen(newIsOpen) + } + + return ( +
  • +
    + + {release.version} +
    + + {release.patches.length} releases + + +
    +     + +
    +
    • + ) +} diff --git a/components/release-notes/GHESReleaseNotes.tsx b/components/release-notes/GHESReleaseNotes.tsx index 62b05d674a..70b1dc635e 100644 --- a/components/release-notes/GHESReleaseNotes.tsx +++ b/components/release-notes/GHESReleaseNotes.tsx @@ -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 ( -
  • -
    - - {release.version} -
    - - {release.patches.length} releases - - -
    -     - -
    -
    • + ) } @@ -167,3 +132,59 @@ export function GHESReleaseNotes({ context }: Props) { ) } + +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 ( +
  • +
    + + {release.version} +
    + + {release.patches.length} releases + + +
    +     +
      + {release.patches.map((patch) => { + const isActive = patch.version === focusedPatch + return ( +
    • + + {patch.version} + + {dayjs(patch.date).format('MMMM DD, YYYY')} + + +
      • + ) + })} +
    +
    +
    • + ) +} diff --git a/components/release-notes/PatchNotes.module.scss b/components/release-notes/PatchNotes.module.scss new file mode 100644 index 0000000000..91b3723728 --- /dev/null +++ b/components/release-notes/PatchNotes.module.scss @@ -0,0 +1,8 @@ +@import "@primer/css/layout/index.scss"; + +.sectionHeading { + scroll-margin-top: 280px !important; + @include breakpoint(sm) { + scroll-margin-top: 200px !important; + } +} diff --git a/components/release-notes/PatchNotes.tsx b/components/release-notes/PatchNotes.tsx index 2385390381..3371ee8122 100644 --- a/components/release-notes/PatchNotes.tsx +++ b/components/release-notes/PatchNotes.tsx @@ -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 = { features: 'Features', bugs: 'Bug fixes', @@ -13,6 +15,16 @@ const SectionToLabelMap: Record = { 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 (
    {withReleaseNoteLabel && (
    - + {SectionToLabelMap[key] || 'INVALID SECTION'}
    )} -
      +
        {sectionItems.map((item) => { if (typeof item === 'string') { - return ( -
      • - ) + return
      • } const slug = item.heading ? slugger.slug(item.heading) : '' return ( -
      • +

      • {item.heading}

        -
          +
            {item.notes.map((note) => { return (
          • ) diff --git a/stylesheets/index.scss b/stylesheets/index.scss index 2291c3181c..0a8b591737 100644 --- a/stylesheets/index.scss +++ b/stylesheets/index.scss @@ -19,7 +19,6 @@ $marketing-font-path: "/assets/fonts/inter/"; @import "images.scss"; @import "lists.scss"; @import "product-sublanding.scss"; -@import "release-notes.scss"; @import "search.scss"; @import "shadows.scss"; @import "summary.scss"; diff --git a/stylesheets/release-notes.scss b/stylesheets/release-notes.scss deleted file mode 100644 index baa92fe416..0000000000 --- a/stylesheets/release-notes.scss +++ /dev/null @@ -1,56 +0,0 @@ -ul.release-notes-list li.release-notes-list-item { - font-size: 15px !important; - - &::marker { - // `• ` - content: "\2022\00a0\00a0\00a0\00a0"; - font-size: 1.6em; - color: var(--color-auto-gray-4); - } - - &.list-style-none::marker { - content: ""; - } -} - -.release-notes-section-heading { - font-size: 15px !important; - scroll-margin-top: 280px !important; - @include breakpoint(sm) { - scroll-margin-top: 200px !important; - } -} - -details[open].release-notes-version-picker - summary - .octicon.octicon-chevron-down { - transform: rotate(180deg); -} - -.js-release-notes-patch-link { - &.selected { - background-color: var(--color-auto-blue-1); - } -} - -$colors-list: ( - 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), -); - -@each $key, $val in $colors-list { - .release-notes-section-#{$key} { - .release-notes-section-label { - background-color: #{$val}; - } - - .release-notes-section-heading { - color: #{$val}; - } - } -}