Upgrade Primer CSS to version 17, removing marketing styles (#20965)
* Package updates * Fix up things that look broken * Add to utils * Lead now just sets font size, just use f3 where needed * Update package-lock.json * Update index.tsx * Delete bump-link.scss * Update trigger-error.js * Update components/GenericError.tsx Co-authored-by: Ash Guillaume <10384315+ashygee@users.noreply.github.com> * Update ArticlePage.tsx * Update ActionBar.tsx * Changes from meeting * Found a few more monos * Fix from a merge conflict * Missed a few f3s * Update SubLandingHero.tsx * Bye gradients * Match up breadcrumbs * Update SubLandingHero.tsx * Update lists.scss Co-authored-by: Ash Guillaume <10384315+ashygee@users.noreply.github.com>
This commit is contained in:
Kevin Heis
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -9,10 +9,7 @@ export type BreadcrumbT = {
|
||||
href?: string
|
||||
}
|
||||
|
||||
type Props = {
|
||||
variant?: 'default' | 'large'
|
||||
}
|
||||
export const Breadcrumbs = ({ variant = 'default' }: Props) => {
|
||||
export const Breadcrumbs = () => {
|
||||
const router = useRouter()
|
||||
const pathWithLocale = `/${router.locale}${router.asPath.split('?')[0]}` // remove query string
|
||||
const { breadcrumbs } = useMainContext()
|
||||
@@ -44,7 +41,6 @@ export const Breadcrumbs = ({ variant = 'default' }: Props) => {
|
||||
title={title}
|
||||
className={cx(
|
||||
'd-inline-block px-2',
|
||||
variant === 'large' && 'text-uppercase text-mono',
|
||||
pathWithLocale === breadcrumb.href && 'color-text-tertiary'
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -20,8 +20,8 @@ export function GenericError() {
|
||||
<div className="container-xl p-responsive py-9 width-full flex-1">
|
||||
<article className="col-md-10 col-lg-7 mx-auto">
|
||||
<h1 className="mb-3 pb-3 border-bottom">Ooops!</h1>
|
||||
<p className="lead-mktg">It looks like something went wrong.</p>
|
||||
<p className="lead-mktg">
|
||||
<p className="f2 color-text-secondary">It looks like something went wrong.</p>
|
||||
<p className="f3">
|
||||
We track these errors automatically, but if the problem persists please feel free to
|
||||
contact us.
|
||||
</p>
|
||||
@@ -65,7 +65,7 @@ export const SimpleHeader = () => {
|
||||
|
||||
<Link href={`/${router.locale}`}>
|
||||
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
||||
<a className="h4-mktg color-text-primary no-underline no-wrap pl-2">GitHub Docs</a>
|
||||
<a className="h4 color-text-primary no-underline no-wrap pl-2">GitHub Docs</a>
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -189,7 +189,10 @@ export function Search({
|
||||
dangerouslySetInnerHTML={{ __html: breadcrumbs }}
|
||||
/>
|
||||
<div
|
||||
className={cx(styles.searchResultTitle, 'd-block h4-mktg color-text-primary')}
|
||||
className={cx(
|
||||
styles.searchResultTitle,
|
||||
'd-block f4 font-weight-semibold color-text-primary'
|
||||
)}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: heading ? `${title}: ${heading}` : title,
|
||||
}}
|
||||
|
||||
@@ -63,7 +63,11 @@ export const ArticlePage = () => {
|
||||
</Callout>
|
||||
)}
|
||||
|
||||
{intro && <MarkdownContent className="lead-mktg mb-3">{intro}</MarkdownContent>}
|
||||
{intro && (
|
||||
<MarkdownContent className="f2 color-text-secondary mb-3" data-testid="lead">
|
||||
{intro}
|
||||
</MarkdownContent>
|
||||
)}
|
||||
|
||||
{permissions && (
|
||||
<div
|
||||
|
||||
@@ -25,7 +25,7 @@ export const ArticleVersionPicker = () => {
|
||||
`}
|
||||
data-testid="article-version-picker"
|
||||
>
|
||||
<summary className="f4 h5-mktg btn-outline-mktg btn-mktg p-2 outline-none">
|
||||
<summary className="btn btn-outline p-2 outline-none">
|
||||
<span className="d-md-none d-xl-inline-block">{t('article_version')}</span>{' '}
|
||||
{allVersions[currentVersion].versionTitle}
|
||||
<Dropdown.Caret />
|
||||
|
||||
@@ -10,7 +10,7 @@ export function LearningTrackNav({ track }: Props) {
|
||||
return (
|
||||
<div
|
||||
data-testid="learning-track-nav"
|
||||
className="py-3 px-4 rounded color-bg-primary border-gradient--purple-pink d-flex flex-justify-between"
|
||||
className="py-3 px-4 rounded color-bg-primary border d-flex flex-justify-between"
|
||||
>
|
||||
<span className="d-flex flex-column">
|
||||
{prevGuide && (
|
||||
|
||||
@@ -28,8 +28,8 @@ export const ArticleList = ({
|
||||
<h3
|
||||
className={cx(
|
||||
titleVariant === 'large'
|
||||
? 'f4 text-normal text-mono text-uppercase'
|
||||
: 'f5 text-normal text-mono underline-dashed color-text-secondary'
|
||||
? 'f4 font-weight-semibold'
|
||||
: 'f5 text-normal underline-dashed color-text-secondary'
|
||||
)}
|
||||
>
|
||||
{title}
|
||||
|
||||
@@ -65,7 +65,7 @@ export const CodeExamples = () => {
|
||||
{isSearching && searchResults.length === 0 && (
|
||||
<div
|
||||
data-testid="code-examples-no-results"
|
||||
className="py-4 text-center color-text-secondary font-mktg"
|
||||
className="py-4 text-center color-text-secondary"
|
||||
>
|
||||
<div className="mb-3">
|
||||
<SearchIcon size={24} />{' '}
|
||||
|
||||
@@ -22,16 +22,12 @@ export const LandingHero = () => {
|
||||
return (
|
||||
<header className="d-lg-flex gutter-lg mb-6">
|
||||
<div className={cx(product_video && 'col-12 col-lg-6 mb-3 mb-lg-0')}>
|
||||
<span className="text-mono color-text-secondary">Product</span>
|
||||
<h1 className="mb-3 font-mktg">
|
||||
<h1 className="mb-3">
|
||||
{shortTitle}{' '}
|
||||
{beta_product && <span className="Label Label--success v-align-middle">Beta</span>}
|
||||
</h1>
|
||||
|
||||
<div
|
||||
className="lead-mktg color-text-secondary"
|
||||
dangerouslySetInnerHTML={{ __html: intro }}
|
||||
/>
|
||||
<div className="f2 color-text-secondary" dangerouslySetInnerHTML={{ __html: intro }} />
|
||||
|
||||
{introLinks &&
|
||||
Object.entries(introLinks)
|
||||
@@ -46,7 +42,7 @@ export const LandingHero = () => {
|
||||
<FullLink
|
||||
key={link}
|
||||
href={link}
|
||||
className={cx('btn-mktg bt-large f4 mt-3 mr-3', i !== 0 && 'btn-outline-mktg')}
|
||||
className={cx('btn btn-large f4 mt-3 mr-3 ', i === 0 && 'btn-primary-matte')}
|
||||
>
|
||||
{t(key)}
|
||||
</FullLink>
|
||||
|
||||
@@ -11,7 +11,7 @@ export const LandingSection = ({ title, children, className, sectionLink, descri
|
||||
return (
|
||||
<div className={cx('container-xl px-3 px-md-6', className)} id={sectionLink}>
|
||||
{title && (
|
||||
<h2 className={cx('font-mktg h1 color-text-primary', !description ? 'mb-3' : 'mb-4')}>
|
||||
<h2 className={cx('h1 color-text-primary', !description ? 'mb-3' : 'mb-4')}>
|
||||
{sectionLink ? (
|
||||
<a className="color-unset" href={`#${sectionLink}`}>
|
||||
{title}
|
||||
@@ -23,7 +23,7 @@ export const LandingSection = ({ title, children, className, sectionLink, descri
|
||||
)}
|
||||
{description && (
|
||||
<div
|
||||
className="lead-mktg color-text-secondary f4"
|
||||
className="color-text-secondary f4"
|
||||
dangerouslySetInnerHTML={{ __html: description }}
|
||||
/>
|
||||
)}
|
||||
|
||||
@@ -22,7 +22,7 @@ export const TocLanding = () => {
|
||||
<ArticleGridLayout className="mt-7">
|
||||
<ArticleTitle>{title}</ArticleTitle>
|
||||
|
||||
<div className="lead-mktg">
|
||||
<div className="f2 color-text-secondary">
|
||||
<p>{introPlainText}</p>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -65,7 +65,7 @@ export const Header = () => {
|
||||
|
||||
<Link
|
||||
href={`/${router.locale}`}
|
||||
className="h4-mktg color-text-primary no-underline no-wrap pl-2"
|
||||
className="f4 font-weight-semibold color-text-primary no-underline no-wrap pl-2"
|
||||
>
|
||||
{t('github_docs')}
|
||||
</Link>
|
||||
@@ -92,9 +92,7 @@ export const Header = () => {
|
||||
)}
|
||||
>
|
||||
<div className="mt-3 mb-2">
|
||||
<h4 className="text-mono f5 text-normal color-text-secondary">
|
||||
{t('explore_by_product')}
|
||||
</h4>
|
||||
<h4 className="f5 text-normal color-text-secondary">{t('explore_by_product')}</h4>
|
||||
|
||||
<ProductPicker />
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ClippyIcon, CheckIcon } from '@primer/octicons-react'
|
||||
import { CopyIcon, CheckIcon } from '@primer/octicons-react'
|
||||
import { Tooltip } from '@primer/components'
|
||||
|
||||
import useClipboard from 'components/hooks/useClipboard'
|
||||
@@ -32,7 +32,7 @@ export const ActionBar = ({ code }: Props) => {
|
||||
aria-label={isCopied ? 'Copied!' : 'Copy to clipboard'}
|
||||
>
|
||||
<button className="btn-octicon" onClick={() => setCopied()}>
|
||||
{isCopied ? <CheckIcon /> : <ClippyIcon />}
|
||||
{isCopied ? <CheckIcon /> : <CopyIcon />}
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
@@ -84,7 +84,7 @@ const CollapsibleReleaseSection = ({
|
||||
<summary className="px-3 py-4 my-0 d-flex flex-items-center flex-justify-between outline-none">
|
||||
{release.version}
|
||||
<div className="d-flex">
|
||||
<span className="color-text-tertiary text-mono text-small text-normal mr-1">
|
||||
<span className="color-text-tertiary text-small text-normal mr-1">
|
||||
{release.patches.length} releases
|
||||
</span>
|
||||
<ChevronDownIcon className={isOpen ? 'rotate-180' : ''} />
|
||||
|
||||
@@ -121,7 +121,7 @@ export function GHESReleaseNotes({ context }: Props) {
|
||||
href={releaseLink}
|
||||
>
|
||||
{release.version}
|
||||
<span className="color-text-tertiary text-mono text-small text-normal mr-1">
|
||||
<span className="color-text-tertiary text-small text-normal mr-1">
|
||||
{release.patches.length} releases
|
||||
</span>
|
||||
</Link>
|
||||
@@ -163,7 +163,7 @@ const CollapsibleReleaseSection = ({
|
||||
<summary className="px-3 py-4 my-0 d-flex flex-items-center flex-justify-between outline-none">
|
||||
{release.version}
|
||||
<div className="d-flex">
|
||||
<span className="color-text-tertiary text-mono text-small text-normal mr-1">
|
||||
<span className="color-text-tertiary text-small text-normal mr-1">
|
||||
{release.patches.length} releases
|
||||
</span>
|
||||
<ChevronDownIcon className={isOpen ? 'rotate-180' : ''} />
|
||||
|
||||
@@ -48,7 +48,7 @@ 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"
|
||||
className="px-3 py-2 text-small text-bold text-uppercase color-text-inverse"
|
||||
style={{ backgroundColor: primaryColor }}
|
||||
>
|
||||
{SectionToLabelMap[key] || 'INVALID SECTION'}
|
||||
|
||||
@@ -33,7 +33,7 @@ export const SidebarNav = () => {
|
||||
</Link>
|
||||
<Link
|
||||
href={`/${router.locale}`}
|
||||
className="h4-mktg color-text-primary no-underline no-wrap pl-2 flex-auto"
|
||||
className="f4 font-weight-semibold color-text-primary no-underline no-wrap pl-2 flex-auto"
|
||||
>
|
||||
{t('github_docs')}
|
||||
</Link>
|
||||
|
||||
@@ -24,7 +24,7 @@ export const ArticleCard = ({ card, typeLabel }: Props) => {
|
||||
<span
|
||||
data-testid="article-card-topic"
|
||||
key={topic}
|
||||
className="IssueLabel bg-gradient--pink-blue color-text-inverse mr-1"
|
||||
className="IssueLabel color-bg-info-inverse color-text-inverse mr-1"
|
||||
>
|
||||
{topic}
|
||||
</span>
|
||||
|
||||
@@ -19,17 +19,17 @@ export const LearningTrack = ({ track }: Props) => {
|
||||
return (
|
||||
<div data-testid="learning-track" className="my-3 px-4 col-12 col-md-6">
|
||||
<div className="Box d-flex flex-column">
|
||||
<div className="Box-header bg-gradient--blue-pink p-4 d-flex flex-1 flex-items-start flex-wrap">
|
||||
<div className="Box-header color-bg-secondary p-4 d-flex flex-1 flex-items-start flex-wrap">
|
||||
<div className="d-flex flex-auto flex-items-start col-8 col-md-12 col-xl-8">
|
||||
<div className="my-xl-0 mr-xl-3">
|
||||
<h5 className="mb-3 color-text-inverse font-mktg h3-mktg ">{track?.title}</h5>
|
||||
<TruncateLines as="p" maxLines={3} className="color-text-inverse">
|
||||
<h5 className="mb-3 color-text f3 font-weight-semibold">{track?.title}</h5>
|
||||
<TruncateLines as="p" maxLines={3} className="color-text">
|
||||
{track?.description}
|
||||
</TruncateLines>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
className="d-inline-flex border color-border-inverse color-text-inverse px-3 py-2 f5 no-underline text-bold no-wrap mt-3 mt-md-0 flex-items-center flex-justify-center"
|
||||
className="d-inline-flex btn no-wrap mt-3 mt-md-0 flex-items-center flex-justify-center"
|
||||
role="button"
|
||||
href={`${track?.guides && track?.guides[0].href}?learn=${track?.trackName}`}
|
||||
>
|
||||
|
||||
@@ -18,7 +18,7 @@ export const SubLandingHero = () => {
|
||||
>
|
||||
<div className="d-flex flex-justify-between flex-items-center">
|
||||
<div
|
||||
className="color-bg-primary color-text-link border-gradient--pink-blue-dark d-inline-flex flex-items-center flex-justify-center circle"
|
||||
className="color-bg-primary color-text-link border d-inline-flex flex-items-center flex-justify-center circle"
|
||||
style={{ width: 40, height: 40 }}
|
||||
>
|
||||
{featuredTrack.guides && (
|
||||
@@ -31,8 +31,8 @@ export const SubLandingHero = () => {
|
||||
{t('guide_types')[guide.page?.type || '']}
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="font-mktg h3-mktg my-4 color-text-primary">{guide.title}</h3>
|
||||
<TruncateLines maxLines={8} className="lead-mktg color-text-secondary f5 my-4">
|
||||
<h3 className="font-weight-semibold my-4 color-text-primary">{guide.title}</h3>
|
||||
<TruncateLines maxLines={8} className="color-text-secondary f5 my-4">
|
||||
<span dangerouslySetInnerHTML={{ __html: guide.intro }} />
|
||||
</TruncateLines>
|
||||
</Link>
|
||||
@@ -43,12 +43,9 @@ export const SubLandingHero = () => {
|
||||
<div>
|
||||
<header className="d-flex gutter mb-6">
|
||||
<div className="col-12">
|
||||
<Breadcrumbs variant="large" />
|
||||
<h1 className="my-3 font-mktg">{title} guides</h1>
|
||||
<div
|
||||
className="lead-mktg color-text-secondary f4"
|
||||
dangerouslySetInnerHTML={{ __html: intro }}
|
||||
/>
|
||||
<Breadcrumbs />
|
||||
<h1 className="my-3">{title} guides</h1>
|
||||
<div className="color-text-secondary f2" dangerouslySetInnerHTML={{ __html: intro }} />
|
||||
</div>
|
||||
</header>
|
||||
{featuredTrack && (
|
||||
@@ -58,20 +55,18 @@ export const SubLandingHero = () => {
|
||||
className="list-style-none d-flex flex-nowrap overflow-x-scroll px-2"
|
||||
>
|
||||
<li className="px-2 d-flex flex-shrink-0" style={{ width: cardWidth }}>
|
||||
<div className="d-inline-block Box p-5 bg-gradient--blue-pink color-text-inverse">
|
||||
<div className="d-inline-block Box p-5 color-bg-secondary">
|
||||
<div
|
||||
className="color-text-inverse d-inline-flex flex-items-center flex-justify-center circle"
|
||||
className="d-inline-flex flex-items-center flex-justify-center circle border"
|
||||
style={{ width: 40, height: 40, border: '2px white solid' }}
|
||||
>
|
||||
<StarFillIcon size={24} />
|
||||
</div>
|
||||
<h3 className="font-mktg h3-mktg my-4">{featuredTrack.title}</h3>
|
||||
<div className="lead-mktg color-text-inverse f5 my-4">
|
||||
{featuredTrack.description}
|
||||
</div>
|
||||
<h3 className="font-weight-semibold my-4">{featuredTrack.title}</h3>
|
||||
<div className="f5 my-4">{featuredTrack.description}</div>
|
||||
{featuredTrack.guides && (
|
||||
<Link
|
||||
className="d-inline-flex flex-items-center flex-justify-center border color-border-inverse color-text-inverse px-4 py-2 f5 no-underline text-bold"
|
||||
className="d-inline-flex flex-items-center flex-justify-center btn px-4 py-2 f5 no-underline text-bold"
|
||||
role="button"
|
||||
href={`${featuredTrack.guides[0].href}?learn=${featuredTrack.trackName}`}
|
||||
>
|
||||
|
||||
@@ -23,9 +23,4 @@
|
||||
h5 {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
// needs specificity to override
|
||||
[class~="lead-mktg"] p {
|
||||
color: var(--color-auto-gray-9);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -74,3 +74,8 @@
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Override primer style */
|
||||
.markdownBody div > ol:not([type]) {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
@@ -1 +1 @@
|
||||
<a href="https://github.com/account/organizations/new?plan=business_plus" class="btn-mktg bt-large f4 mt-3 mr-3">Try risk-free for 14 days</a>
|
||||
<a href="https://github.com/account/organizations/new?plan=business_plus" class="btn btn-primary-matte btn-large f4 mt-3 mr-3">Try risk-free for 14 days</a>
|
||||
|
||||
@@ -24,6 +24,10 @@ export default {
|
||||
// Breaking change in octicons 12
|
||||
// https://github.com/primer/octicons/releases/tag/v12.0.0
|
||||
if (this.icon === 'trashcan') this.icon = 'trash'
|
||||
// https://github.com/primer/octicons/blob/main/CHANGELOG.md#1500
|
||||
if (this.icon === 'duplicate') this.icon = 'copy'
|
||||
if (this.icon === 'clippy') this.icon = 'paste'
|
||||
|
||||
this.options = {}
|
||||
|
||||
// Memoize any options passed
|
||||
|
||||
@@ -93,7 +93,7 @@ export default function addCodeHeader(node) {
|
||||
// Display the language using the above map of `{ [shortCode]: language }`
|
||||
const language = LANGUAGE_MAP[node.lang] || node.lang || 'Code'
|
||||
|
||||
const btnIconHtml = octicons.clippy.toSVG()
|
||||
const btnIconHtml = octicons.paste.toSVG()
|
||||
const btnIconAst = parse5.parse(String(btnIconHtml), { sourceCodeLocationInfo: true })
|
||||
const btnIcon = fromParse5(btnIconAst, { file: btnIconHtml })
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ export default async function triggerError(req, res, next) {
|
||||
// pattern used on async middleware! This is an intentional omission!
|
||||
|
||||
// prevent this from being used in production
|
||||
if (process.env.NODE_ENV === 'production') return next()
|
||||
if (process.env.NODE_ENV === 'production' && process.env.HEROKU_PRODUCTION_APP) return next()
|
||||
|
||||
throw new Error('Intentional error')
|
||||
}
|
||||
|
||||
544
package-lock.json
generated
544
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -12,9 +12,9 @@
|
||||
"@alex_neo/jest-expect-message": "^1.0.5",
|
||||
"@hapi/accept": "^5.0.2",
|
||||
"@primer/components": "^28.4.0",
|
||||
"@primer/css": "^16.2.0",
|
||||
"@primer/octicons": "^14.1.0",
|
||||
"@primer/octicons-react": "^14.1.0",
|
||||
"@primer/css": "^17.5.2",
|
||||
"@primer/octicons": "^15.0.1",
|
||||
"@primer/octicons-react": "^15.0.1",
|
||||
"accept-language-parser": "^1.5.0",
|
||||
"ajv": "^8.4.0",
|
||||
"ajv-formats": "^2.1.0",
|
||||
|
||||
@@ -17,8 +17,8 @@ const Custom404 = () => {
|
||||
<div className="container-xl p-responsive py-6 width-full flex-1">
|
||||
<article className="col-md-10 col-lg-7 mx-auto">
|
||||
<h1 className="mb-3 pb-3 border-bottom">Ooops!</h1>
|
||||
<p className="lead-mktg">It looks like this page doesn't exist.</p>
|
||||
<p className="lead-mktg">
|
||||
<p className="f2 color-text-secondary">It looks like this page doesn't exist.</p>
|
||||
<p className="f3">
|
||||
We track these errors automatically, but if the problem persists please feel free to
|
||||
contact us.
|
||||
</p>
|
||||
|
||||
@@ -61,7 +61,7 @@ function LandingPage(props: LandingPageProps) {
|
||||
<OctocatHeader />
|
||||
</div>
|
||||
<div className="col-lg-5 mt-6">
|
||||
<h1 className="h1-mktg mb-3">{t('search:need_help')}</h1>
|
||||
<h1 className="font-weight-semibold mb-3">{t('search:need_help')}</h1>
|
||||
{SearchInput}
|
||||
</div>
|
||||
</div>
|
||||
@@ -76,7 +76,7 @@ function LandingPage(props: LandingPageProps) {
|
||||
{/* <!-- Explore by product --> */}
|
||||
<section className="container-xl pb-lg-4 my-8 px-3 px-md-6">
|
||||
<div className="">
|
||||
<h2 className="text-mono f5 text-normal color-text-secondary text-md-center mb-4">
|
||||
<h2 className="f5 text-normal color-text-secondary text-md-center mb-4">
|
||||
{t('explore_by_product')}
|
||||
</h2>
|
||||
<div className="d-flex flex-wrap gutter gutter-xl-spacious">
|
||||
@@ -93,7 +93,7 @@ function LandingPage(props: LandingPageProps) {
|
||||
return (
|
||||
<div className="d-flex flex-column col-12 col-sm-6 col-lg-3 pb-4" key={product.id}>
|
||||
<a
|
||||
className="btn-mktg flex-auto d-flex flex-items-center btn-outline-mktg btn-large-mktg ws-normal "
|
||||
className="f4 flex-auto d-flex flex-items-center ws-normal btn btn-outline py-3"
|
||||
href={href}
|
||||
target={product.external ? '_blank' : undefined}
|
||||
>
|
||||
|
||||
@@ -37,7 +37,9 @@ export default function Storybook() {
|
||||
return (
|
||||
<div className="p-4 mx-auto" style={{ maxWidth: 1200 }}>
|
||||
<h1>GitHub Docs Storybook</h1>
|
||||
<p className="f3">This page lists React components unique to the GitHub docs.</p>
|
||||
<p className="f2 color-text-secondary">
|
||||
This page lists React components unique to the GitHub docs.
|
||||
</p>
|
||||
<div className="my-4 d-lg-flex flex-items-start">
|
||||
<nav className="menu col-12 col-lg-3 mr-4 color-bg-secondary position-lg-sticky top-0">
|
||||
{stories.map(({ name }) => (
|
||||
|
||||
@@ -1,51 +0,0 @@
|
||||
// stylelint-disable primer/no-unused-vars
|
||||
// Typography
|
||||
|
||||
@import "@primer/css/support/index.scss";
|
||||
|
||||
$marketing-font-path: "/assets/fonts/alliance/";
|
||||
$font-family-mktg: "Alliance No.1", -apple-system, BlinkMacSystemFont,
|
||||
"Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji",
|
||||
"Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||
$font-weight-extrabold: 800 !default;
|
||||
|
||||
.font-mktg {
|
||||
font-family: $font-family-mktg;
|
||||
}
|
||||
|
||||
// Type
|
||||
@font-face {
|
||||
font-family: "Alliance No.1";
|
||||
font-style: normal;
|
||||
font-weight: $font-weight-normal;
|
||||
src: local("Alliance No.1 Regular"), local("alliance-no-1-regular"),
|
||||
url("#{$marketing-font-path}alliance-no-1-regular.woff") format("woff");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Alliance No.1";
|
||||
font-style: normal;
|
||||
font-weight: $font-weight-semibold;
|
||||
src: local("Alliance No.1 Medium"), local("alliance-no-1-medium"),
|
||||
url("#{$marketing-font-path}alliance-no-1-medium.woff") format("woff");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Alliance No.1";
|
||||
font-style: normal;
|
||||
font-weight: $font-weight-bold;
|
||||
src: local("Alliance No.1 Bold"), local("alliance-no-1-bold"),
|
||||
url("#{$marketing-font-path}alliance-no-1-bold.woff") format("woff");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Alliance No.1";
|
||||
font-style: normal;
|
||||
font-weight: $font-weight-extrabold;
|
||||
src: local("Alliance No.1 ExtraBold"), local("alliance-no-1-extrabold"),
|
||||
url("#{$marketing-font-path}alliance-no-1-extrabold.woff") format("woff");
|
||||
font-display: swap;
|
||||
}
|
||||
@@ -1,104 +0,0 @@
|
||||
$gradients: (
|
||||
"-purple-pink":
|
||||
linear-gradient(
|
||||
135deg,
|
||||
var(--color-auto-purple-5) 0%,
|
||||
var(--color-auto-pink-5) 100%
|
||||
),
|
||||
/*"-aquamarine-mauve": linear-gradient(130deg, #3bf0e4 -6.8%, #bca1f7 70%),
|
||||
"-purple-coral": linear-gradient(87.54deg, #9867f0 -6.8%, #ed4e50 84.14%),
|
||||
"-purple-coral-dark": linear-gradient(92deg, #bca1f7 15%, #e577b4 45%, #ff7170 85%),
|
||||
"-coral-yellow": linear-gradient(267.91deg, #ffe57f 9.35%, #ff7170 96.48%),
|
||||
"-coral-yellow-dark": linear-gradient(-70deg, #ff7170 0%, #ffe57f 100%),
|
||||
"-dark-mint": linear-gradient(90deg, #05aa82, #1c8df0),
|
||||
"-mint-blue": linear-gradient(271.72deg, #a2facf 7.09%, #64acff 96.61%),
|
||||
"-mint-blue-dark": linear-gradient(-70deg, #a2facf 0%, #64acff 100%),
|
||||
"-turq-purple-dark": linear-gradient(-70deg, #3bf0e4 0%, #bca1f7 100%),
|
||||
"-blue-green": linear-gradient(-70deg, #2188ff 0%, #01a49e 100%),
|
||||
"-red-orange": linear-gradient(-70deg, #ed4e50 0%, #f06f00 100%),
|
||||
"-blue-purple": linear-gradient(-70deg, #2188ff 0%, #804eda 100%), */
|
||||
"-pink-blue":
|
||||
linear-gradient(
|
||||
90deg,
|
||||
var(--color-auto-pink-5) -50%,
|
||||
var(--color-auto-blue-5) 150%
|
||||
),
|
||||
"-pink-blue-dark":
|
||||
linear-gradient(
|
||||
-70deg,
|
||||
var(--color-auto-pink-3) 0%,
|
||||
var(--color-auto-blue-3) 100%
|
||||
),
|
||||
"-blue-pink":
|
||||
linear-gradient(
|
||||
-70deg,
|
||||
var(--color-auto-blue-5) 0%,
|
||||
var(--color-auto-pink-5) 100%
|
||||
),
|
||||
) !default;
|
||||
|
||||
@mixin bg-gradient($parent, $gradient) {
|
||||
#{$parent} {
|
||||
background: $gradient;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
@mixin text-gradient($parent, $gradient) {
|
||||
#{parent} {
|
||||
background-image: $gradient;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
$border-width: 2px;
|
||||
@mixin border-gradient($parent, $gradient) {
|
||||
#{$parent} {
|
||||
position: relative;
|
||||
background-clip: padding-box;
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: var(--color-bg-primary);
|
||||
border-radius: inherit;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: $gradient;
|
||||
content: "";
|
||||
z-index: 0;
|
||||
border-radius: inherit;
|
||||
margin: -$border-width;
|
||||
}
|
||||
& > span {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $gradient, $value in $gradients {
|
||||
@include bg-gradient(".bg-gradient-#{$gradient}", $value);
|
||||
}
|
||||
|
||||
/*
|
||||
@each $gradient, $value in $gradients {
|
||||
@include text-gradient(".text-gradient-#{gradient}", $value);
|
||||
}
|
||||
*/
|
||||
|
||||
@each $gradient, $value in $gradients {
|
||||
@include border-gradient(".border-gradient-#{$gradient}", $value);
|
||||
}
|
||||
@@ -5,13 +5,7 @@
|
||||
@import "@primer/css/labels/index.scss";
|
||||
@import "@primer/css/avatars/avatar.scss";
|
||||
|
||||
$marketing-font-path: "/assets/fonts/inter/";
|
||||
@import "@primer/css/marketing/index.scss";
|
||||
@import "font-mktg.scss";
|
||||
|
||||
@import "extended-markdown.scss";
|
||||
@import "font-mktg.scss";
|
||||
@import "gradient.scss";
|
||||
@import "headings.scss";
|
||||
@import "images.scss";
|
||||
@import "shadows.scss";
|
||||
|
||||
@@ -89,15 +89,35 @@
|
||||
------------------------------------------------------------------------------*/
|
||||
|
||||
.fade-tertiary-left {
|
||||
background: linear-gradient(to right, var(--color-bg-tertiary), transparent);
|
||||
background: linear-gradient(to right, var(--color-bg-primary), transparent);
|
||||
}
|
||||
|
||||
.fade-tertiary-right {
|
||||
background: linear-gradient(to left, var(--color-bg-tertiary), transparent);
|
||||
background: linear-gradient(to left, var(--color-bg-primary), transparent);
|
||||
}
|
||||
|
||||
.fade-tertiary-bottom {
|
||||
background: linear-gradient(to top, var(--color-bg-tertiary), transparent);
|
||||
background: linear-gradient(to top, var(--color-bg-primary), transparent);
|
||||
}
|
||||
|
||||
/* Blue primary button
|
||||
------------------------------------------------------------------------------*/
|
||||
.btn-primary-matte {
|
||||
color: var(--color-text-inverse);
|
||||
background-color: var(--color-auto-blue-5);
|
||||
border-color: var(--color-btn-primary-border);
|
||||
box-shadow: var(--color-btn-primary-shadow),
|
||||
var(--color-btn-primary-inset-shadow);
|
||||
}
|
||||
|
||||
.btn-primary-matte:hover {
|
||||
background-color: var(--color-auto-blue-6);
|
||||
}
|
||||
|
||||
/* Semibold text
|
||||
------------------------------------------------------------------------------*/
|
||||
.font-weight-semibold {
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
|
||||
.outline-none {
|
||||
|
||||
@@ -31,7 +31,7 @@ describe('<head>', () => {
|
||||
).toBe(true)
|
||||
// HTML intro
|
||||
expect(
|
||||
$('div.lead-mktg')
|
||||
$('[data-testid="lead"]')
|
||||
.html()
|
||||
.startsWith('<p>You can <a href="/articles/merging-a-pull-request">merge pull requests</a>')
|
||||
)
|
||||
|
||||
@@ -242,7 +242,7 @@ describe('server', () => {
|
||||
let $ = await getDOM(
|
||||
'/en/github/importing-your-projects-to-github/importing-a-git-repository-using-the-command-line'
|
||||
)
|
||||
const articleIntro = $('.lead-mktg').text()
|
||||
const articleIntro = $('[data-testid="lead"]').text()
|
||||
$ = await getDOM(
|
||||
'/en/enterprise/2.16/user/importing-your-projects-to-github/importing-source-code-to-github'
|
||||
)
|
||||
@@ -291,9 +291,9 @@ describe('server', () => {
|
||||
|
||||
test('renders liquid within liquid within liquid in intros', async () => {
|
||||
const $ = await getDOM('/en/github/administering-a-repository/about-merge-methods-on-github')
|
||||
expect($('div.lead-mktg').first().text().includes('merge their pull requests on GitHub')).toBe(
|
||||
true
|
||||
)
|
||||
expect(
|
||||
$('[data-testid="lead"]').first().text().includes('merge their pull requests on GitHub')
|
||||
).toBe(true)
|
||||
})
|
||||
|
||||
test('renders product frontmatter callouts', async () => {
|
||||
|
||||
Reference in New Issue
Block a user