@primer/brand-mcp 0.77.0 → 0.77.1-rc.bd5b9efe
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.77.
|
|
4
|
-
"generatedAt": "2026-09-
|
|
3
|
+
"generatedFromVersion": "0.77.1-rc.bd5b9efe",
|
|
4
|
+
"generatedAt": "2026-09-29T12:39:46.017Z",
|
|
5
5
|
"components": [
|
|
6
6
|
{
|
|
7
7
|
"name": "Hero",
|
|
@@ -10346,7 +10346,7 @@
|
|
|
10346
10346
|
"full page",
|
|
10347
10347
|
"template"
|
|
10348
10348
|
],
|
|
10349
|
-
"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 Button,\n Card,\n ColorModesEnum,\n CTABanner,\n FAQ,\n FAQGroup,\n Grid,\n Hero,\n Heading,\n InlineLink,\n LogoSuite,\n MinimalVideoPlayer,\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 heroAnimation from '../../../fixtures/videos/copilot-agent-mode-hero.mp4'\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 animate initialText={content.hero.initialLabel}>\n {content.hero.label}\n </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.ButtonGroup>\n <Button as=\"a\" href=\"#\" variant=\"primary\">\n {content.hero.primaryAction}\n </Button>\n <Button as=\"a\" href=\"#\" variant=\"secondary\">\n {content.hero.secondaryAction}\n </Button>\n </Hero.ButtonGroup>\n {process.env.NODE_ENV === 'test' ? (\n <Hero.Image\n enableBorder={false}\n position=\"block-end\"\n src={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n alt={content.hero.imageAlt}\n />\n ) : (\n <Hero.Video enableBorder={false} position=\"block-end\">\n <MinimalVideoPlayer\n internalAccessibleLabels={content.hero.videoControls}\n poster={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n src={heroAnimation}\n title={content.hero.imageAlt}\n />\n </Hero.Video>\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}>\n <Card\n href=\"#\"\n fullWidth\n ctaVariant=\"arrow\"\n ctaText={content.common.learnMore}\n className={clsx(styles.resourceCard, styles.resourceCardWithIcon)}\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 paddingBlockStart=\"condensed\" 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 >\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 >\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 >\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={clsx(styles.resourceCard, styles.resourceCardWithIcon)}\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={clsx(styles.resourceCard, styles.resourceCardWithIcon)}\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}"
|
|
10349
|
+
"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 Button,\n Card,\n ColorModesEnum,\n CTABanner,\n FAQ,\n FAQGroup,\n Grid,\n Hero,\n Heading,\n InlineLink,\n LogoSuite,\n MinimalVideoPlayer,\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 heroAnimation from '../../../fixtures/videos/copilot-agent-mode-hero.mp4'\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 animate initialText={content.hero.initialLabel}>\n {content.hero.label}\n </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.ButtonGroup>\n <Button as=\"a\" href=\"#\" variant=\"primary\">\n {content.hero.primaryAction}\n </Button>\n <Button as=\"a\" href=\"#\" variant=\"secondary\">\n {content.hero.secondaryAction}\n </Button>\n </Hero.ButtonGroup>\n {process.env.NODE_ENV === 'test' ? (\n <Hero.Image\n enableBorder={false}\n position=\"block-end\"\n src={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n alt={content.hero.imageAlt}\n />\n ) : (\n <Hero.Video enableBorder={false} position=\"block-end\">\n <MinimalVideoPlayer\n internalAccessibleLabels={content.hero.videoControls}\n poster={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n src={heroAnimation}\n title={content.hero.imageAlt}\n />\n </Hero.Video>\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}>\n <Card\n href=\"#\"\n fullWidth\n ctaVariant=\"arrow\"\n ctaText={content.common.learnMore}\n className={clsx(styles.resourceCard, styles.resourceCardWithIcon)}\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 paddingBlockStart=\"condensed\" 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 >\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 >\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 >\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={clsx(styles.resourceCard, styles.resourceCardWithIcon)}\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={clsx(styles.resourceCard, styles.resourceCardWithIcon)}\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 <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}"
|
|
10350
10350
|
},
|
|
10351
10351
|
{
|
|
10352
10352
|
"name": "FlexSuiteSecurityCategory",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/brand-mcp",
|
|
3
|
-
"version": "0.77.
|
|
3
|
+
"version": "0.77.1-rc.bd5b9efe",
|
|
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",
|