@primer/brand-mcp 0.70.0-rc.9ef718be → 0.70.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/catalog.json +3 -3
- package/package.json +1 -1
package/dist/catalog.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"brandPackage": "@primer/react-brand",
|
|
3
|
-
"generatedFromVersion": "0.70.0
|
|
4
|
-
"generatedAt": "2026-07-
|
|
3
|
+
"generatedFromVersion": "0.70.0",
|
|
4
|
+
"generatedAt": "2026-07-03T15:25:14.378Z",
|
|
5
5
|
"components": [
|
|
6
6
|
{
|
|
7
7
|
"name": "Hero",
|
|
@@ -10044,7 +10044,7 @@
|
|
|
10044
10044
|
"full page",
|
|
10045
10045
|
"template"
|
|
10046
10046
|
],
|
|
10047
|
-
"source": "import {CodeOfConductIcon, CpuIcon, LightBulbIcon, LogoGithubIcon, SparkleFillIcon} from '@primer/octicons-react'\nimport {clsx} from 'clsx'\nimport React, {useEffect} from 'react'\n\nimport {\n Box,\n Card,\n ColorModesEnum,\n CTABanner,\n FAQ,\n FAQGroup,\n Grid,\n Hero,\n Heading,\n InlineLink,\n LogoSuite,\n Section,\n SectionIntro,\n SubNav,\n Text,\n River,\n EyebrowText,\n Link,\n Stack,\n Token,\n PricingOptions,\n Tabs,\n Tiles,\n Image,\n useTheme,\n} from '../../..'\nimport {RedlineBackground} from '../../../component-helpers'\nimport placeholderBg from '../../../fixtures/images/dither-bg-landscape-purple.png'\nimport brandDividerWide from '../../../fixtures/images/brand-divider-copilot-wide.png'\nimport mercardo from '../../../fixtures/images/bento/mercado.png'\nimport copilotHeroHead from '../../../fixtures/images/copilot-mascot-head-peeking.png'\nimport renderUI3 from '../../../fixtures/images/copilot-vscode-agent-mode-3.png'\nimport renderUI3Dark from '../../../fixtures/images/copilot-vscode-agent-mode-3-dark.png'\nimport {logos} from '../../../LogoSuite/LogoSuite.fixtures'\nimport {tileItems} from '../../../Tiles/Tiles.fixtures'\n\nimport {defaultFlexSuiteAIOverviewContent, type FlexSuiteAIOverviewContent} from './FlexSuiteAIOverview.content'\nimport styles from './FlexSuiteAIOverview.module.css'\n\nexport type FlexSuiteAIOverviewTemplateProps = {\n content: FlexSuiteAIOverviewContent\n}\n\nconst cardIcons = [CpuIcon, LightBulbIcon, CodeOfConductIcon] as const\n\nexport function FlexSuiteAIOverview() {\n return <FlexSuiteAIOverviewTemplate content={defaultFlexSuiteAIOverviewContent} />\n}\n\nexport function FlexSuiteAIOverviewTemplate({content}: FlexSuiteAIOverviewTemplateProps) {\n const heroImageRef = React.useRef<HTMLDivElement>(null)\n const riverImageRefs = React.useRef<Array<HTMLDivElement | null>>([])\n const {colorMode} = useTheme()\n\n useEffect(() => {\n const cleanups: Array<() => void> = []\n\n if (heroImageRef.current) {\n cleanups.push(TempFadeInBackgroundEffect(heroImageRef.current, placeholderBg, 500))\n }\n\n for (const element of riverImageRefs.current) {\n if (element) {\n cleanups.push(TempFadeInBackgroundEffect(element, placeholderBg, 500))\n }\n }\n\n return () => {\n for (const cleanup of cleanups) {\n cleanup()\n }\n }\n }, [])\n\n return (\n <>\n <Box className={styles.page} backgroundColor=\"default\">\n <Box backgroundColor=\"subtle\" style={{height: 72}} />\n\n <SubNav>\n <SubNav.Heading href=\"#\">{content.subNav.heading}</SubNav.Heading>\n\n {content.subNav.links.map(link => (\n <SubNav.Link key={link} href=\"#\">\n {link}\n </SubNav.Link>\n ))}\n </SubNav>\n <Box paddingBlockStart={64}></Box>\n\n <Section paddingBlockStart=\"none\" paddingBlockEnd=\"none\" fullWidth>\n <Hero\n imageContainerRef={heroImageRef}\n enableAnimation\n variant=\"gridline-expressive\"\n trailingComponent={() => (\n <Box className={styles.heroTrailingPeek}>\n <Text variant=\"muted\">\n {content.hero.trailingText} <InlineLink href=\"#\">{content.hero.trailingLinkText}</InlineLink>\n </Text>\n <Image\n className={styles.heroTrailingPeekImage}\n style={\n {\n ['--hero-peek-left' as string]: '-310px',\n ['--hero-peek-bottom' as string]: '-65px',\n ['--hero-peek-width' as string]: '190px',\n } as React.CSSProperties\n }\n src={copilotHeroHead}\n alt={content.hero.peekAlt}\n />\n </Box>\n )}\n >\n <Hero.Label>{content.hero.label}</Hero.Label>\n <Hero.Heading>\n {content.hero.headingLine1} <br /> {content.hero.headingLine2}\n </Hero.Heading>\n <Hero.Description>{content.hero.description}</Hero.Description>\n <Hero.PrimaryAction href=\"#\">{content.hero.primaryAction}</Hero.PrimaryAction>\n <Hero.SecondaryAction href=\"#\">{content.hero.secondaryAction}</Hero.SecondaryAction>\n <Hero.Image\n enableBorder={false}\n position=\"block-end\"\n src={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n alt={content.hero.imageAlt}\n />\n </Hero>\n </Section>\n\n <LogoSuite variant=\"gridline-expressive\">\n <LogoSuite.Heading visuallyHidden>{content.logoSuiteHeading}</LogoSuite.Heading>\n <LogoSuite.Logobar marquee={process.env.NODE_ENV !== 'test'}>{logos.slice(0, 8)}</LogoSuite.Logobar>\n </LogoSuite>\n\n <Box className={clsx(styles.cardGridFrame, styles.cardGridFrameNoTopBorder)}>\n <Box className={styles.cardGridContent}>\n <Grid columnGap=\"none\" rowGap=\"none\" enableGutters={false}>\n {content.resourceCards.map((card, index) => (\n <Grid.Column\n key={card.heading}\n span={{xsmall: 12, large: 4}}\n className={clsx(styles.cardGridColumn, styles.cardGridColumnArrowHover)}\n >\n <Box className={styles.cardGridItem} padding={24}>\n <Card\n href=\"#\"\n fullWidth\n ctaVariant=\"arrow\"\n ctaText={content.common.learnMore}\n className={styles.resourceCard}\n >\n <Card.Icon\n icon={cardIcons[index]}\n color=\"green\"\n hasBackground\n size=\"medium\"\n className={styles.resourceCardIcon}\n />\n <Card.Heading>{card.heading}</Card.Heading>\n <Card.Description>{card.description}</Card.Description>\n </Card>\n </Box>\n </Grid.Column>\n ))}\n </Grid>\n </Box>\n </Box>\n\n <Section paddingBlockStart=\"condensed\" paddingBlockEnd=\"none\">\n <SectionIntro align=\"center\" fullWidth>\n <SectionIntro.Label>{content.workflow.label}</SectionIntro.Label>\n <SectionIntro.Heading>{content.workflow.heading}</SectionIntro.Heading>\n <SectionIntro.Description>{content.workflow.description}</SectionIntro.Description>\n </SectionIntro>\n </Section>\n <Section paddingBlockEnd=\"none\">\n <Stack direction=\"vertical\" padding=\"none\" gap=\"spacious\">\n <River variant=\"gridline\">\n <River.Visual\n ref={element => {\n riverImageRefs.current[0] = element\n }}\n imageBackgroundColor=\"subtle\"\n >\n <picture>\n <source\n srcSet={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n media=\"(max-width: 47.99rem)\"\n />\n <img\n src={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n alt={content.rivers[0].imageAlt}\n />\n </picture>\n </River.Visual>\n <River.Content>\n <EyebrowText>{content.rivers[0].eyebrow}</EyebrowText>\n <Heading>{content.rivers[0].heading}</Heading>\n <Text>{content.rivers[0].description}</Text>\n <Link href=\"#\">{content.rivers[0].linkText}</Link>\n </River.Content>\n </River>\n <River variant=\"gridline\">\n <River.Visual\n ref={element => {\n riverImageRefs.current[1] = element\n }}\n imageBackgroundColor=\"subtle\"\n >\n <picture>\n <source\n srcSet={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n media=\"(max-width: 47.99rem)\"\n />\n <img\n src={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n alt={content.rivers[1].imageAlt}\n />\n </picture>\n </River.Visual>\n <River.Content>\n <EyebrowText>{content.rivers[1].eyebrow}</EyebrowText>\n <Heading>{content.rivers[1].heading}</Heading>\n <Text>{content.rivers[1].description}</Text>\n <Link href=\"#\">{content.rivers[1].linkText}</Link>\n </River.Content>\n </River>\n <River variant=\"gridline\">\n <River.Visual\n ref={element => {\n riverImageRefs.current[2] = element\n }}\n imageBackgroundColor=\"subtle\"\n >\n <picture>\n <source\n srcSet={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n media=\"(max-width: 47.99rem)\"\n />\n <img\n src={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n alt={content.rivers[2].imageAlt}\n />\n </picture>\n </River.Visual>\n <River.Content>\n <EyebrowText>{content.rivers[2].eyebrow}</EyebrowText>\n <Heading>{content.rivers[2].heading}</Heading>\n <Text>{content.rivers[2].description}</Text>\n <Link href=\"#\">{content.rivers[2].linkText}</Link>\n </River.Content>\n </River>\n </Stack>\n </Section>\n <Box marginBlockStart={48}>\n <CTABanner variant=\"balanced\" hasGridLines>\n <CTABanner.Logo>{<LogoGithubIcon size={64} />}</CTABanner.Logo>\n <CTABanner.Heading size=\"5\">\n {content.bento.headingPrefix} <b>{content.bento.headingEmphasis}</b>\n </CTABanner.Heading>\n <CTABanner.Link href=\"#\">{content.bento.linkText}</CTABanner.Link>\n <CTABanner.Image src={mercardo} alt={content.bento.imageAlt} />\n </CTABanner>\n </Box>\n <Stack justifyContent=\"center\" padding=\"none\">\n <Box borderBlockEndWidth=\"thin\" borderColor=\"muted\" borderStyle=\"solid\">\n <Image src={brandDividerWide} alt={content.common.brandDividerAlt} style={{display: 'block'}} />\n </Box>\n </Stack>\n <Section paddingBlockStart=\"none\" paddingBlockEnd=\"none\">\n <Box paddingBlockEnd={48} paddingBlockStart={48}>\n <SectionIntro align=\"center\" fullWidth>\n <SectionIntro.Heading>{content.organization.heading}</SectionIntro.Heading>\n <SectionIntro.Description>{content.organization.description}</SectionIntro.Description>\n </SectionIntro>\n </Box>\n </Section>\n\n <Box className={styles.cardGridFrame}>\n <Box className={styles.cardGridContent}>\n <Grid columnGap=\"none\" rowGap=\"none\" enableGutters={false}>\n {content.organization.cards.map((card, index) => (\n <Grid.Column\n key={card.heading}\n span={{xsmall: 12, large: 4}}\n className={clsx(styles.cardGridColumn, styles.cardGridColumnArrowHover)}\n >\n <Box className={styles.cardGridItem}>\n <Card\n href=\"#\"\n fullWidth\n ctaVariant=\"arrow\"\n ctaText={content.common.learnMore}\n className={styles.resourceCard}\n >\n <Card.Icon\n icon={cardIcons[index]}\n color=\"green\"\n hasBackground\n size=\"medium\"\n className={styles.resourceCardIcon}\n />\n <Card.Tokens>\n <Token>{card.tag}</Token>\n </Card.Tokens>\n <Card.Heading>{card.heading}</Card.Heading>\n <Card.Description>{card.description}</Card.Description>\n </Card>\n </Box>\n </Grid.Column>\n ))}\n </Grid>\n </Box>\n </Box>\n\n <Section paddingBlockStart=\"none\" paddingBlockEnd=\"none\">\n <Box paddingBlockEnd={4} paddingBlockStart={60}>\n <SectionIntro align=\"center\" fullWidth>\n <SectionIntro.Label>{content.plans.label}</SectionIntro.Label>\n <SectionIntro.Heading>{content.plans.heading}</SectionIntro.Heading>\n </SectionIntro>\n </Box>\n </Section>\n <Tabs aria-label={content.plans.tabsAriaLabel} variant=\"accent\" className={styles.fullWidthTabsPanel}>\n {content.plans.tabs.map(tab => (\n <Tabs.Item key={tab}>{tab}</Tabs.Item>\n ))}\n {content.plans.tabs.map(tab => (\n <Tabs.Panel key={tab}>\n <Box className={styles.cardGridFrame} backgroundColor=\"default\">\n <Grid>\n <Grid.Column span={12}>\n <PricingOptions\n style={{marginBlock: 'calc(var(--brand-borderWidth-thin) * -1)'}}\n variant=\"default-gradient\"\n >\n <PricingOptions.Item>\n <PricingOptions.Heading>{content.pricing.free.heading}</PricingOptions.Heading>\n <PricingOptions.Description>{content.pricing.free.description}</PricingOptions.Description>\n <PricingOptions.Price>{content.pricing.free.price}</PricingOptions.Price>\n <PricingOptions.FeatureList>\n <PricingOptions.FeatureListItem>\n {content.pricing.free.features[0]}\n </PricingOptions.FeatureListItem>\n <PricingOptions.FeatureListItem>\n {content.pricing.free.features[1]}\n </PricingOptions.FeatureListItem>\n <PricingOptions.FeatureListItem\n leadingVisual={SparkleFillIcon}\n leadingVisualFill=\"var(--base-color-scale-purple-5)\"\n >\n {content.pricing.free.features[2]}\n </PricingOptions.FeatureListItem>\n </PricingOptions.FeatureList>\n <PricingOptions.PrimaryAction as=\"a\" href=\"#\" variant=\"primary\">\n {content.pricing.free.primaryAction}\n </PricingOptions.PrimaryAction>\n {content.pricing.free.secondaryAction ? (\n <PricingOptions.SecondaryAction as=\"a\" href=\"#\" variant=\"subtle\">\n {content.pricing.free.secondaryAction}\n </PricingOptions.SecondaryAction>\n ) : null}\n </PricingOptions.Item>\n <PricingOptions.Item>\n <PricingOptions.Heading>{content.pricing.pro.heading}</PricingOptions.Heading>\n {content.pricing.pro.label ? (\n <PricingOptions.Label>{content.pricing.pro.label}</PricingOptions.Label>\n ) : null}\n <PricingOptions.Description>{content.pricing.pro.description}</PricingOptions.Description>\n <PricingOptions.Price trailingText={content.pricing.pro.trailingText}>\n {content.pricing.pro.price}\n </PricingOptions.Price>\n <PricingOptions.PrimaryAction as=\"a\" href=\"#\" variant=\"primary\">\n {content.pricing.pro.primaryAction}\n </PricingOptions.PrimaryAction>\n <PricingOptions.FeatureList>\n <PricingOptions.FeatureListHeading>\n {content.pricing.pro.featureListHeading}\n </PricingOptions.FeatureListHeading>\n <PricingOptions.FeatureListItem>\n {content.pricing.pro.features[0]}\n </PricingOptions.FeatureListItem>\n <PricingOptions.FeatureListItem>\n {content.pricing.pro.features[1]}\n </PricingOptions.FeatureListItem>\n <PricingOptions.FeatureListItem>\n {content.pricing.pro.features[2]}\n </PricingOptions.FeatureListItem>\n <PricingOptions.FeatureListItem>\n {content.pricing.pro.features[3]}\n </PricingOptions.FeatureListItem>\n </PricingOptions.FeatureList>\n {content.pricing.pro.footnote ? (\n <PricingOptions.Footnote>\n {content.pricing.pro.footnote}{' '}\n {content.pricing.pro.footnoteLinkText ? (\n <InlineLink href=\"#\">{content.pricing.pro.footnoteLinkText}</InlineLink>\n ) : null}\n </PricingOptions.Footnote>\n ) : null}\n </PricingOptions.Item>\n\n <PricingOptions.Item>\n <PricingOptions.Heading>{content.pricing.proPlus.heading}</PricingOptions.Heading>\n <PricingOptions.Description>{content.pricing.proPlus.description}</PricingOptions.Description>\n <PricingOptions.Price trailingText={content.pricing.proPlus.trailingText}>\n {content.pricing.proPlus.price}\n </PricingOptions.Price>\n <PricingOptions.PrimaryAction as=\"a\" href=\"#\" variant=\"primary\">\n {content.pricing.proPlus.primaryAction}\n </PricingOptions.PrimaryAction>\n <PricingOptions.FeatureList>\n <PricingOptions.FeatureListHeading>\n {content.pricing.proPlus.featureListHeading}\n </PricingOptions.FeatureListHeading>\n <PricingOptions.FeatureListItem>\n {content.pricing.proPlus.features[0]}\n </PricingOptions.FeatureListItem>\n <PricingOptions.FeatureListItem>\n {content.pricing.proPlus.features[1]}\n </PricingOptions.FeatureListItem>\n <PricingOptions.FeatureListItem\n leadingVisual={SparkleFillIcon}\n leadingVisualFill=\"var(--base-color-scale-purple-5)\"\n >\n {content.pricing.proPlus.features[2]}\n </PricingOptions.FeatureListItem>\n <PricingOptions.FeatureListItem>\n {content.pricing.proPlus.features[3]}\n </PricingOptions.FeatureListItem>\n </PricingOptions.FeatureList>\n </PricingOptions.Item>\n </PricingOptions>\n </Grid.Column>\n </Grid>\n </Box>\n </Tabs.Panel>\n ))}\n </Tabs>\n\n <Section paddingBlockEnd=\"none\">\n <Tiles variant=\"gridlines\" layout=\"compact\">\n {tileItems.slice(0, 6).map(item => (\n <Tiles.Item key={item.name} name={item.name} href={item.href}>\n {item.icon}\n </Tiles.Item>\n ))}\n </Tiles>\n </Section>\n\n <Section paddingBlockStart=\"none\" paddingBlockEnd=\"none\">\n <Box paddingBlockEnd={32} paddingBlockStart={80}>\n <SectionIntro align=\"center\" fullWidth>\n <SectionIntro.Heading>{content.resources.heading}</SectionIntro.Heading>\n </SectionIntro>\n </Box>\n </Section>\n\n <Box className={styles.cardGridFrame} marginBlockEnd={80}>\n <Box className={styles.cardGridContent}>\n <Grid columnGap=\"none\" rowGap=\"none\" enableGutters={false}>\n {content.resources.cards.map((card, index) => (\n <Grid.Column\n key={card.heading}\n span={{xsmall: 12, large: 4}}\n className={clsx(styles.cardGridColumn, styles.cardGridColumnArrowHover)}\n >\n <Box className={styles.cardGridItem}>\n <Card\n href=\"#\"\n fullWidth\n ctaVariant=\"arrow\"\n ctaText={content.common.learnMore}\n className={styles.resourceCard}\n >\n <Card.Icon\n icon={cardIcons[index]}\n color=\"green\"\n hasBackground\n size=\"medium\"\n className={styles.resourceCardIcon}\n />\n <Card.Tokens>\n <Token>{card.tag}</Token>\n </Card.Tokens>\n <Card.Heading>{card.heading}</Card.Heading>\n <Card.Description>{card.description}</Card.Description>\n </Card>\n </Box>\n </Grid.Column>\n ))}\n </Grid>\n </Box>\n </Box>\n <Box paddingBlockEnd={64}>\n <FAQGroup variant=\"gridline\" defaultSelectedIndex={1}>\n <FAQGroup.Heading>\n {content.faq.headingLine1}\n <br />\n {content.faq.headingLine2}\n </FAQGroup.Heading>\n {content.faq.groups.map(group => (\n <FAQ key={group.heading} variant=\"gridline\">\n <FAQ.Heading>{group.heading}</FAQ.Heading>\n {group.items.map((item, index) => (\n <FAQ.Item key={item.question} name={`faq-${group.heading}`} open={index === 0}>\n <FAQ.Question>{item.question}</FAQ.Question>\n <FAQ.Answer>\n <Text as=\"p\" variant=\"muted\">\n {item.answer}\n </Text>\n </FAQ.Answer>\n </FAQ.Item>\n ))}\n </FAQ>\n ))}\n </FAQGroup>\n </Box>\n\n <RedlineBackground style={{height: 600, display: 'flex', flexDirection: 'column', gap: 'var(--base-size-32)'}}>\n <RedlineBackground\n style={{height: 84, marginTop: 'auto', backgroundColor: 'var(--brand-color-border-default)'}}\n />\n </RedlineBackground>\n </Box>\n </>\n )\n}\n\nfunction TempFadeInBackgroundEffect(element: HTMLDivElement, backgroundImageUrl: string, delay = 100) {\n element.style.position = 'relative'\n\n const bgDiv = document.createElement('div')\n bgDiv.style.cssText = `\n position: absolute;\n inset: 0;\n background-image: url(${backgroundImageUrl});\n background-size: cover;\n background-position: center;\n opacity: 0;\n transition: opacity 1.5s ease-out;\n z-index: 0;\n `\n element.insertBefore(bgDiv, element.firstChild)\n\n const children = element.children\n for (let index = 1; index < children.length; index += 1) {\n ;(children[index] as HTMLElement).style.position = 'relative'\n ;(children[index] as HTMLElement).style.zIndex = '1'\n }\n\n const timer = setTimeout(() => {\n bgDiv.style.opacity = '1'\n }, delay)\n\n return () => {\n clearTimeout(timer)\n bgDiv.remove()\n }\n}"
|
|
10047
|
+
"source": "import {CodeOfConductIcon, CpuIcon, LightBulbIcon, LogoGithubIcon, SparkleFillIcon} from '@primer/octicons-react'\nimport {clsx} from 'clsx'\nimport React, {useEffect} from 'react'\n\nimport {\n Box,\n Card,\n ColorModesEnum,\n CTABanner,\n FAQ,\n FAQGroup,\n Grid,\n Hero,\n Heading,\n InlineLink,\n LogoSuite,\n Section,\n SectionIntro,\n SubNav,\n Text,\n River,\n EyebrowText,\n Link,\n Stack,\n Token,\n PricingOptions,\n Tabs,\n Tiles,\n Image,\n useTheme,\n Footnotes,\n} from '../../..'\nimport {RedlineBackground} from '../../../component-helpers'\nimport placeholderBg from '../../../fixtures/images/dither-bg-landscape-purple.png'\nimport brandDividerWide from '../../../fixtures/images/brand-divider-copilot-wide.png'\nimport mercardo from '../../../fixtures/images/bento/mercado.png'\nimport copilotHeroHead from '../../../fixtures/images/copilot-mascot-head-peeking.png'\nimport renderUI3 from '../../../fixtures/images/copilot-vscode-agent-mode-3.png'\nimport renderUI3Dark from '../../../fixtures/images/copilot-vscode-agent-mode-3-dark.png'\nimport {logos} from '../../../LogoSuite/LogoSuite.fixtures'\nimport {tileItems} from '../../../Tiles/Tiles.fixtures'\n\nimport {defaultFlexSuiteAIOverviewContent, type FlexSuiteAIOverviewContent} from './FlexSuiteAIOverview.content'\nimport styles from './FlexSuiteAIOverview.module.css'\n\nexport type FlexSuiteAIOverviewTemplateProps = {\n content: FlexSuiteAIOverviewContent\n}\n\nconst cardIcons = [CpuIcon, LightBulbIcon, CodeOfConductIcon] as const\n\nexport function FlexSuiteAIOverview() {\n return <FlexSuiteAIOverviewTemplate content={defaultFlexSuiteAIOverviewContent} />\n}\n\nexport function FlexSuiteAIOverviewTemplate({content}: FlexSuiteAIOverviewTemplateProps) {\n const heroImageRef = React.useRef<HTMLDivElement>(null)\n const riverImageRefs = React.useRef<Array<HTMLDivElement | null>>([])\n const {colorMode} = useTheme()\n\n useEffect(() => {\n const cleanups: Array<() => void> = []\n\n if (heroImageRef.current) {\n cleanups.push(TempFadeInBackgroundEffect(heroImageRef.current, placeholderBg, 500))\n }\n\n for (const element of riverImageRefs.current) {\n if (element) {\n cleanups.push(TempFadeInBackgroundEffect(element, placeholderBg, 500))\n }\n }\n\n return () => {\n for (const cleanup of cleanups) {\n cleanup()\n }\n }\n }, [])\n\n return (\n <>\n <Box className={styles.page} backgroundColor=\"default\">\n <Box backgroundColor=\"subtle\" style={{height: 72}} />\n\n <SubNav>\n <SubNav.Heading href=\"#\">{content.subNav.heading}</SubNav.Heading>\n\n {content.subNav.links.map(link => (\n <SubNav.Link key={link} href=\"#\">\n {link}\n </SubNav.Link>\n ))}\n </SubNav>\n <Box paddingBlockStart={64}></Box>\n\n <Section paddingBlockStart=\"none\" paddingBlockEnd=\"none\" fullWidth>\n <Hero\n imageContainerRef={heroImageRef}\n enableAnimation\n variant=\"gridline-expressive\"\n trailingComponent={() => (\n <Box className={styles.heroTrailingPeek}>\n <Text variant=\"muted\">\n {content.hero.trailingText} <InlineLink href=\"#\">{content.hero.trailingLinkText}</InlineLink>\n </Text>\n <Image\n className={styles.heroTrailingPeekImage}\n style={\n {\n ['--hero-peek-left' as string]: '-310px',\n ['--hero-peek-bottom' as string]: '-65px',\n ['--hero-peek-width' as string]: '190px',\n } as React.CSSProperties\n }\n src={copilotHeroHead}\n alt={content.hero.peekAlt}\n />\n </Box>\n )}\n >\n <Hero.Label>{content.hero.label}</Hero.Label>\n <Hero.Heading>\n {content.hero.headingLine1} <br /> {content.hero.headingLine2}\n </Hero.Heading>\n <Hero.Description>{content.hero.description}</Hero.Description>\n <Hero.PrimaryAction href=\"#\">{content.hero.primaryAction}</Hero.PrimaryAction>\n <Hero.SecondaryAction href=\"#\">{content.hero.secondaryAction}</Hero.SecondaryAction>\n <Hero.Image\n enableBorder={false}\n position=\"block-end\"\n src={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n alt={content.hero.imageAlt}\n />\n </Hero>\n </Section>\n\n <LogoSuite variant=\"gridline-expressive\">\n <LogoSuite.Heading visuallyHidden>{content.logoSuiteHeading}</LogoSuite.Heading>\n <LogoSuite.Logobar marquee={process.env.NODE_ENV !== 'test'}>{logos.slice(0, 8)}</LogoSuite.Logobar>\n </LogoSuite>\n\n <Box className={clsx(styles.cardGridFrame, styles.cardGridFrameNoTopBorder)}>\n <Box className={styles.cardGridContent}>\n <Grid columnGap=\"none\" rowGap=\"none\" enableGutters={false}>\n {content.resourceCards.map((card, index) => (\n <Grid.Column\n key={card.heading}\n span={{xsmall: 12, large: 4}}\n className={clsx(styles.cardGridColumn, styles.cardGridColumnArrowHover)}\n >\n <Box className={styles.cardGridItem} padding={24}>\n <Card\n href=\"#\"\n fullWidth\n ctaVariant=\"arrow\"\n ctaText={content.common.learnMore}\n className={styles.resourceCard}\n >\n <Card.Icon\n icon={cardIcons[index]}\n color=\"green\"\n hasBackground\n size=\"medium\"\n className={styles.resourceCardIcon}\n />\n <Card.Heading>{card.heading}</Card.Heading>\n <Card.Description>{card.description}</Card.Description>\n </Card>\n </Box>\n </Grid.Column>\n ))}\n </Grid>\n </Box>\n </Box>\n\n <Section paddingBlockStart=\"condensed\" paddingBlockEnd=\"none\">\n <SectionIntro align=\"center\" fullWidth>\n <SectionIntro.Label>{content.workflow.label}</SectionIntro.Label>\n <SectionIntro.Heading>{content.workflow.heading}</SectionIntro.Heading>\n <SectionIntro.Description>{content.workflow.description}</SectionIntro.Description>\n </SectionIntro>\n </Section>\n <Section paddingBlockEnd=\"none\">\n <Stack direction=\"vertical\" padding=\"none\" gap=\"spacious\">\n <River variant=\"gridline\">\n <River.Visual\n ref={element => {\n riverImageRefs.current[0] = element\n }}\n imageBackgroundColor=\"subtle\"\n >\n <picture>\n <source\n srcSet={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n media=\"(max-width: 47.99rem)\"\n />\n <img\n src={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n alt={content.rivers[0].imageAlt}\n />\n </picture>\n </River.Visual>\n <River.Content>\n <EyebrowText>{content.rivers[0].eyebrow}</EyebrowText>\n <Heading>{content.rivers[0].heading}</Heading>\n <Text>{content.rivers[0].description}</Text>\n <Link href=\"#\">{content.rivers[0].linkText}</Link>\n </River.Content>\n </River>\n <River variant=\"gridline\">\n <River.Visual\n ref={element => {\n riverImageRefs.current[1] = element\n }}\n imageBackgroundColor=\"subtle\"\n >\n <picture>\n <source\n srcSet={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n media=\"(max-width: 47.99rem)\"\n />\n <img\n src={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n alt={content.rivers[1].imageAlt}\n />\n </picture>\n </River.Visual>\n <River.Content>\n <EyebrowText>{content.rivers[1].eyebrow}</EyebrowText>\n <Heading>{content.rivers[1].heading}</Heading>\n <Text>{content.rivers[1].description}</Text>\n <Link href=\"#\">{content.rivers[1].linkText}</Link>\n </River.Content>\n </River>\n <River variant=\"gridline\">\n <River.Visual\n ref={element => {\n riverImageRefs.current[2] = element\n }}\n imageBackgroundColor=\"subtle\"\n >\n <picture>\n <source\n srcSet={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n media=\"(max-width: 47.99rem)\"\n />\n <img\n src={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n alt={content.rivers[2].imageAlt}\n />\n </picture>\n </River.Visual>\n <River.Content>\n <EyebrowText>{content.rivers[2].eyebrow}</EyebrowText>\n <Heading>{content.rivers[2].heading}</Heading>\n <Text>{content.rivers[2].description}</Text>\n <Link href=\"#\">{content.rivers[2].linkText}</Link>\n </River.Content>\n </River>\n </Stack>\n </Section>\n <Box marginBlockStart={48}>\n <CTABanner variant=\"balanced\" hasGridLines>\n <CTABanner.Logo>{<LogoGithubIcon size={64} />}</CTABanner.Logo>\n <CTABanner.Heading size=\"5\">\n {content.bento.headingPrefix} <b>{content.bento.headingEmphasis}</b>\n </CTABanner.Heading>\n <CTABanner.Link href=\"#\">{content.bento.linkText}</CTABanner.Link>\n <CTABanner.Image src={mercardo} alt={content.bento.imageAlt} />\n </CTABanner>\n </Box>\n <Stack justifyContent=\"center\" padding=\"none\">\n <Box borderBlockEndWidth=\"thin\" borderColor=\"muted\" borderStyle=\"solid\">\n <Image src={brandDividerWide} alt={content.common.brandDividerAlt} style={{display: 'block'}} />\n </Box>\n </Stack>\n <Section paddingBlockStart=\"none\" paddingBlockEnd=\"none\">\n <Box paddingBlockEnd={48} paddingBlockStart={48}>\n <SectionIntro align=\"center\" fullWidth>\n <SectionIntro.Heading>{content.organization.heading}</SectionIntro.Heading>\n <SectionIntro.Description>{content.organization.description}</SectionIntro.Description>\n </SectionIntro>\n </Box>\n </Section>\n\n <Box className={styles.cardGridFrame}>\n <Box className={styles.cardGridContent}>\n <Grid columnGap=\"none\" rowGap=\"none\" enableGutters={false}>\n {content.organization.cards.map((card, index) => (\n <Grid.Column\n key={card.heading}\n span={{xsmall: 12, large: 4}}\n className={clsx(styles.cardGridColumn, styles.cardGridColumnArrowHover)}\n >\n <Box className={styles.cardGridItem}>\n <Card\n href=\"#\"\n fullWidth\n ctaVariant=\"arrow\"\n ctaText={content.common.learnMore}\n className={styles.resourceCard}\n >\n <Card.Icon\n icon={cardIcons[index]}\n color=\"green\"\n hasBackground\n size=\"medium\"\n className={styles.resourceCardIcon}\n />\n <Card.Tokens>\n <Token>{card.tag}</Token>\n </Card.Tokens>\n <Card.Heading>{card.heading}</Card.Heading>\n <Card.Description>{card.description}</Card.Description>\n </Card>\n </Box>\n </Grid.Column>\n ))}\n </Grid>\n </Box>\n </Box>\n\n <Section paddingBlockStart=\"none\" paddingBlockEnd=\"none\">\n <Box paddingBlockEnd={4} paddingBlockStart={60}>\n <SectionIntro align=\"center\" fullWidth>\n <SectionIntro.Label>{content.plans.label}</SectionIntro.Label>\n <SectionIntro.Heading>{content.plans.heading}</SectionIntro.Heading>\n </SectionIntro>\n </Box>\n </Section>\n <Tabs aria-label={content.plans.tabsAriaLabel} variant=\"accent\" className={styles.fullWidthTabsPanel}>\n {content.plans.tabs.map(tab => (\n <Tabs.Item key={tab}>{tab}</Tabs.Item>\n ))}\n {content.plans.tabs.map(tab => (\n <Tabs.Panel key={tab}>\n <Box className={styles.cardGridFrame} backgroundColor=\"default\">\n <Grid>\n <Grid.Column span={12}>\n <PricingOptions\n style={{marginBlock: 'calc(var(--brand-borderWidth-thin) * -1)'}}\n variant=\"default-gradient\"\n >\n <PricingOptions.Item>\n <PricingOptions.Heading>{content.pricing.free.heading}</PricingOptions.Heading>\n <PricingOptions.Description>{content.pricing.free.description}</PricingOptions.Description>\n <PricingOptions.Price>{content.pricing.free.price}</PricingOptions.Price>\n <PricingOptions.FeatureList>\n <PricingOptions.FeatureListItem>\n {content.pricing.free.features[0]}\n </PricingOptions.FeatureListItem>\n <PricingOptions.FeatureListItem>\n {content.pricing.free.features[1]}\n </PricingOptions.FeatureListItem>\n <PricingOptions.FeatureListItem\n leadingVisual={SparkleFillIcon}\n leadingVisualFill=\"var(--base-color-scale-purple-5)\"\n >\n {content.pricing.free.features[2]}\n </PricingOptions.FeatureListItem>\n </PricingOptions.FeatureList>\n <PricingOptions.PrimaryAction as=\"a\" href=\"#\" variant=\"primary\">\n {content.pricing.free.primaryAction}\n </PricingOptions.PrimaryAction>\n {content.pricing.free.secondaryAction ? (\n <PricingOptions.SecondaryAction as=\"a\" href=\"#\" variant=\"subtle\">\n {content.pricing.free.secondaryAction}\n </PricingOptions.SecondaryAction>\n ) : null}\n </PricingOptions.Item>\n <PricingOptions.Item>\n <PricingOptions.Heading>{content.pricing.pro.heading}</PricingOptions.Heading>\n {content.pricing.pro.label ? (\n <PricingOptions.Label>{content.pricing.pro.label}</PricingOptions.Label>\n ) : null}\n <PricingOptions.Description>{content.pricing.pro.description}</PricingOptions.Description>\n <PricingOptions.Price trailingText={content.pricing.pro.trailingText}>\n {content.pricing.pro.price}\n </PricingOptions.Price>\n <PricingOptions.PrimaryAction as=\"a\" href=\"#\" variant=\"primary\">\n {content.pricing.pro.primaryAction}\n </PricingOptions.PrimaryAction>\n <PricingOptions.FeatureList>\n <PricingOptions.FeatureListHeading>\n {content.pricing.pro.featureListHeading}\n </PricingOptions.FeatureListHeading>\n <PricingOptions.FeatureListItem>\n {content.pricing.pro.features[0]}\n </PricingOptions.FeatureListItem>\n <PricingOptions.FeatureListItem>\n {content.pricing.pro.features[1]}\n </PricingOptions.FeatureListItem>\n <PricingOptions.FeatureListItem>\n {content.pricing.pro.features[2]}\n </PricingOptions.FeatureListItem>\n <PricingOptions.FeatureListItem>\n {content.pricing.pro.features[3]}\n </PricingOptions.FeatureListItem>\n </PricingOptions.FeatureList>\n {content.pricing.pro.footnote ? (\n <PricingOptions.Footnote>\n {content.pricing.pro.footnote}{' '}\n {content.pricing.pro.footnoteLinkText ? (\n <InlineLink href=\"#\">{content.pricing.pro.footnoteLinkText}</InlineLink>\n ) : null}\n </PricingOptions.Footnote>\n ) : null}\n </PricingOptions.Item>\n\n <PricingOptions.Item>\n <PricingOptions.Heading>{content.pricing.proPlus.heading}</PricingOptions.Heading>\n <PricingOptions.Description>{content.pricing.proPlus.description}</PricingOptions.Description>\n <PricingOptions.Price trailingText={content.pricing.proPlus.trailingText}>\n {content.pricing.proPlus.price}\n </PricingOptions.Price>\n <PricingOptions.PrimaryAction as=\"a\" href=\"#\" variant=\"primary\">\n {content.pricing.proPlus.primaryAction}\n </PricingOptions.PrimaryAction>\n <PricingOptions.FeatureList>\n <PricingOptions.FeatureListHeading>\n {content.pricing.proPlus.featureListHeading}\n </PricingOptions.FeatureListHeading>\n <PricingOptions.FeatureListItem>\n {content.pricing.proPlus.features[0]}\n </PricingOptions.FeatureListItem>\n <PricingOptions.FeatureListItem>\n {content.pricing.proPlus.features[1]}\n </PricingOptions.FeatureListItem>\n <PricingOptions.FeatureListItem\n leadingVisual={SparkleFillIcon}\n leadingVisualFill=\"var(--base-color-scale-purple-5)\"\n >\n {content.pricing.proPlus.features[2]}\n </PricingOptions.FeatureListItem>\n <PricingOptions.FeatureListItem>\n {content.pricing.proPlus.features[3]}\n </PricingOptions.FeatureListItem>\n </PricingOptions.FeatureList>\n </PricingOptions.Item>\n </PricingOptions>\n </Grid.Column>\n </Grid>\n </Box>\n </Tabs.Panel>\n ))}\n </Tabs>\n\n <Section paddingBlockEnd=\"none\">\n <Tiles variant=\"gridlines\" layout=\"compact\">\n {tileItems.slice(0, 6).map(item => (\n <Tiles.Item key={item.name} name={item.name} href={item.href}>\n {item.icon}\n </Tiles.Item>\n ))}\n </Tiles>\n </Section>\n\n <Section paddingBlockStart=\"none\" paddingBlockEnd=\"none\">\n <Box paddingBlockEnd={32} paddingBlockStart={80}>\n <SectionIntro align=\"center\" fullWidth>\n <SectionIntro.Heading>{content.resources.heading}</SectionIntro.Heading>\n </SectionIntro>\n </Box>\n </Section>\n\n <Box className={styles.cardGridFrame} marginBlockEnd={80}>\n <Box className={styles.cardGridContent}>\n <Grid columnGap=\"none\" rowGap=\"none\" enableGutters={false}>\n {content.resources.cards.map((card, index) => (\n <Grid.Column\n key={card.heading}\n span={{xsmall: 12, large: 4}}\n className={clsx(styles.cardGridColumn, styles.cardGridColumnArrowHover)}\n >\n <Box className={styles.cardGridItem}>\n <Card\n href=\"#\"\n fullWidth\n ctaVariant=\"arrow\"\n ctaText={content.common.learnMore}\n className={styles.resourceCard}\n >\n <Card.Icon\n icon={cardIcons[index]}\n color=\"green\"\n hasBackground\n size=\"medium\"\n className={styles.resourceCardIcon}\n />\n <Card.Tokens>\n <Token>{card.tag}</Token>\n </Card.Tokens>\n <Card.Heading>{card.heading}</Card.Heading>\n <Card.Description>{card.description}</Card.Description>\n </Card>\n </Box>\n </Grid.Column>\n ))}\n </Grid>\n </Box>\n </Box>\n <Box paddingBlockEnd={64}>\n <FAQGroup variant=\"gridline\" defaultSelectedIndex={1}>\n <FAQGroup.Heading>\n <Box paddingInlineStart=\"spacious\">\n {content.faq.headingLine1}\n <br />\n {content.faq.headingLine2}\n </Box>\n </FAQGroup.Heading>\n {content.faq.groups.map(group => (\n <FAQ key={group.heading} variant=\"gridline\">\n <FAQ.Heading>{group.heading}</FAQ.Heading>\n {group.items.map((item, index) => (\n <FAQ.Item key={item.question} name={`faq-${group.heading}`} open={index === 0}>\n <FAQ.Question>{item.question}</FAQ.Question>\n <FAQ.Answer>\n <Text as=\"p\" variant=\"muted\">\n {item.answer}\n </Text>\n </FAQ.Answer>\n </FAQ.Item>\n ))}\n </FAQ>\n ))}\n </FAQGroup>\n </Box>\n <footer>\n <Section as=\"div\" paddingBlockStart=\"none\" paddingBlockEnd=\"none\">\n <Grid>\n <Grid.Column>\n <Box paddingInlineStart={32}>\n <Footnotes>\n <Footnotes.Item id=\"economic-impact\" href=\"#economic-impact-ref\">\n Code review will incur Actions usage.{' '}\n </Footnotes.Item>\n <Footnotes.Item id=\"third-party\" href=\"#third-party-ref\">\n Response times may vary during periods of high usage. Requests may be subject to rate limiting.\n </Footnotes.Item>\n <Footnotes.Item id=\"ai\" href=\"#ai-ref\">\n Flex allotments will vary over time.\n </Footnotes.Item>\n </Footnotes>\n </Box>\n </Grid.Column>\n </Grid>\n </Section>\n </footer>\n\n <RedlineBackground style={{height: 600, display: 'flex', flexDirection: 'column', gap: 'var(--base-size-32)'}}>\n <RedlineBackground\n style={{height: 84, marginTop: 'auto', backgroundColor: 'var(--brand-color-border-default)'}}\n />\n </RedlineBackground>\n </Box>\n </>\n )\n}\n\nfunction TempFadeInBackgroundEffect(element: HTMLDivElement, backgroundImageUrl: string, delay = 100) {\n element.style.position = 'relative'\n\n const bgDiv = document.createElement('div')\n bgDiv.style.cssText = `\n position: absolute;\n inset: 0;\n background-image: url(${backgroundImageUrl});\n background-size: cover;\n background-position: center;\n opacity: 0;\n transition: opacity 1.5s ease-out;\n z-index: 0;\n `\n element.insertBefore(bgDiv, element.firstChild)\n\n const children = element.children\n for (let index = 1; index < children.length; index += 1) {\n ;(children[index] as HTMLElement).style.position = 'relative'\n ;(children[index] as HTMLElement).style.zIndex = '1'\n }\n\n const timer = setTimeout(() => {\n bgDiv.style.opacity = '1'\n }, delay)\n\n return () => {\n clearTimeout(timer)\n bgDiv.remove()\n }\n}"
|
|
10048
10048
|
},
|
|
10049
10049
|
{
|
|
10050
10050
|
"name": "FlexSuiteSecurityCategory",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/brand-mcp",
|
|
3
|
-
"version": "0.70.0
|
|
3
|
+
"version": "0.70.0",
|
|
4
4
|
"description": "MCP (Model Context Protocol) server that helps AI agents use Primer Brand (@primer/react-brand) correctly when building GitHub marketing and landing pages.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"primer",
|