@primer/brand-mcp 0.74.0 → 0.75.0-rc.96de7cef
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 +76 -14
- 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.
|
|
4
|
-
"generatedAt": "2026-
|
|
3
|
+
"generatedFromVersion": "0.75.0-rc.96de7cef",
|
|
4
|
+
"generatedAt": "2026-09-02T18:12:12.818Z",
|
|
5
5
|
"components": [
|
|
6
6
|
{
|
|
7
7
|
"name": "Hero",
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
"examples": [
|
|
67
67
|
{
|
|
68
68
|
"title": "Hero example",
|
|
69
|
-
"code": "<Hero\n imageContainerRef={imageRef}\n enableAnimation\n variant=\"gridline-expressive\"\n trailingComponent={() => (\n <Text variant=\"muted\">\n Already have Visual Studio Code? <InlineLink href=\"#\">Open now</InlineLink>\n </Text>\n )}\n>\n <Hero.Label
|
|
69
|
+
"code": "<Hero\n imageContainerRef={imageRef}\n enableAnimation\n variant=\"gridline-expressive\"\n trailingComponent={() => (\n <Text variant=\"muted\">\n Already have Visual Studio Code? <InlineLink href=\"#\">Open now</InlineLink>\n </Text>\n )}\n>\n <Hero.Label animate initialText=\"Your AI assistant\">\n Your AI accelerator\n </Hero.Label>\n <Hero.Heading>Command your craft</Hero.Heading>\n <Hero.Description>Your AI accelerator for every workflow, from the editor to the enterprise.</Hero.Description>\n <Hero.ButtonGroup>\n <Button as=\"a\" href=\"#\">\n Try Copilot now\n </Button>\n <Button as=\"a\" href=\"#\">\n See plans & pricing\n </Button>\n </Hero.ButtonGroup>\n <Hero.Image\n enableBorder={false}\n position=\"block-end\"\n src={renderUI3}\n alt=\"placeholder image, blank with gray solid fill\"\n />\n</Hero>",
|
|
70
70
|
"source": "story"
|
|
71
71
|
}
|
|
72
72
|
],
|
|
@@ -583,6 +583,8 @@
|
|
|
583
583
|
"name": "SubdomainNavBar",
|
|
584
584
|
"module": "@primer/react-brand",
|
|
585
585
|
"subcomponents": [
|
|
586
|
+
"SubdomainNavBar.openSearch",
|
|
587
|
+
"SubdomainNavBar.closeSearch",
|
|
586
588
|
"SubdomainNavBar.Link",
|
|
587
589
|
"SubdomainNavBar.Search",
|
|
588
590
|
"SubdomainNavBar.PrimaryAction",
|
|
@@ -590,12 +592,6 @@
|
|
|
590
592
|
"SubdomainNavBar.testIds"
|
|
591
593
|
],
|
|
592
594
|
"props": [
|
|
593
|
-
{
|
|
594
|
-
"name": "className",
|
|
595
|
-
"type": "string",
|
|
596
|
-
"description": "Forward a custom HTML class attribute",
|
|
597
|
-
"required": false
|
|
598
|
-
},
|
|
599
595
|
{
|
|
600
596
|
"name": "fixed",
|
|
601
597
|
"type": "boolean",
|
|
@@ -608,10 +604,22 @@
|
|
|
608
604
|
"description": "Fill the maximum width of the parent container. Defaults to `false`.",
|
|
609
605
|
"required": false
|
|
610
606
|
},
|
|
607
|
+
{
|
|
608
|
+
"name": "leadingComponent",
|
|
609
|
+
"type": "React.ReactElement",
|
|
610
|
+
"description": "Optional React element rendered after the navigation links.",
|
|
611
|
+
"required": false
|
|
612
|
+
},
|
|
613
|
+
{
|
|
614
|
+
"name": "trailingComponent",
|
|
615
|
+
"type": "React.ReactElement",
|
|
616
|
+
"description": "Optional React element rendered after the actions.",
|
|
617
|
+
"required": false
|
|
618
|
+
},
|
|
611
619
|
{
|
|
612
620
|
"name": "title",
|
|
613
621
|
"type": "string",
|
|
614
|
-
"description": "The title or name of the subdomain. Appears adjacent to the logo and is required for communicating content to
|
|
622
|
+
"description": "The title or name of the subdomain. Appears adjacent to the logo and is required for communicating content to assistive technologies.",
|
|
615
623
|
"required": true
|
|
616
624
|
},
|
|
617
625
|
{
|
|
@@ -625,9 +633,27 @@
|
|
|
625
633
|
"type": "string",
|
|
626
634
|
"description": "Optionally change the URL of the logo",
|
|
627
635
|
"required": false
|
|
636
|
+
},
|
|
637
|
+
{
|
|
638
|
+
"name": "menuLabels",
|
|
639
|
+
"type": "Partial<SubdomainNavBarMenuLabels>",
|
|
640
|
+
"description": "Customizable visible and accessible menu labels.",
|
|
641
|
+
"required": false
|
|
642
|
+
},
|
|
643
|
+
{
|
|
644
|
+
"name": "skipToContentTargetId",
|
|
645
|
+
"type": "string",
|
|
646
|
+
"description": "ID of the element that receives focus when the skip-to-content link is activated. Defaults to the first rendered `main` element that is not hidden from assistive technologies.",
|
|
647
|
+
"required": false
|
|
648
|
+
}
|
|
649
|
+
],
|
|
650
|
+
"examples": [
|
|
651
|
+
{
|
|
652
|
+
"title": "SubdomainNavBar example",
|
|
653
|
+
"code": "<SubdomainNavBar\n title=\"GitHub Docs\"\n titleHref=\"/\"\n fullWidth\n fixed={false}\n leadingComponent={<Token>v1.5.3</Token>}\n trailingComponent={\n <ActionMenu size=\"small\" onSelect={setSelectedLanguage} selectionVariant=\"single\">\n <ActionMenu.Button variant=\"secondary\" leadingVisual={<GlobeIcon />}>\n {selectedLanguage}\n </ActionMenu.Button>\n <ActionMenu.Overlay aria-label=\"Select language\">\n {['English', 'Deutsch', 'Español', 'Français', '日本語'].map(language => (\n <ActionMenu.Item key={language} value={language} selected={language === selectedLanguage}>\n {language}\n </ActionMenu.Item>\n ))}\n </ActionMenu.Overlay>\n </ActionMenu>\n }\n>\n <SubdomainNavBar.Link href=\"#default\">Default</SubdomainNavBar.Link>\n <SubdomainNavBar.Link href=\"#hover\">Hover</SubdomainNavBar.Link>\n <SubdomainNavBar.Link href=\"#focus\">Focus</SubdomainNavBar.Link>\n <SubdomainNavBar.Link href=\"#active\">Active</SubdomainNavBar.Link>\n <SubdomainNavBar.Link href=\"#current\" aria-current=\"page\">\n Current\n </SubdomainNavBar.Link>\n <SubdomainNavBar.Search\n placeholder=\"Search ...\"\n keyboardShortcut=\"/\"\n searchTerm=\"How do i\"\n searchResults={groupedSearchResults}\n onSubmit={event => event.preventDefault()}\n onChange={() => undefined}\n />\n <SubdomainNavBar.SecondaryAction href=\"#\">Contact sales</SubdomainNavBar.SecondaryAction>\n <SubdomainNavBar.PrimaryAction href=\"#\">Get started</SubdomainNavBar.PrimaryAction>\n</SubdomainNavBar>",
|
|
654
|
+
"source": "story"
|
|
628
655
|
}
|
|
629
656
|
],
|
|
630
|
-
"examples": [],
|
|
631
657
|
"description": "Use the subdomain nav bar component for top level navigation for subdomain sites.",
|
|
632
658
|
"keywords": [
|
|
633
659
|
"navigation",
|
|
@@ -3373,7 +3399,13 @@
|
|
|
3373
3399
|
{
|
|
3374
3400
|
"name": "animate",
|
|
3375
3401
|
"type": "boolean",
|
|
3376
|
-
"description": "Whether to animate the text
|
|
3402
|
+
"description": "Whether to animate the text with a typing effect.",
|
|
3403
|
+
"required": false
|
|
3404
|
+
},
|
|
3405
|
+
{
|
|
3406
|
+
"name": "initialText",
|
|
3407
|
+
"type": "string",
|
|
3408
|
+
"description": "Optional text to type before transitioning to the final text",
|
|
3377
3409
|
"required": false
|
|
3378
3410
|
},
|
|
3379
3411
|
{
|
|
@@ -8577,6 +8609,21 @@
|
|
|
8577
8609
|
"value": "var(--brand-color-text-default)",
|
|
8578
8610
|
"group": "functional"
|
|
8579
8611
|
},
|
|
8612
|
+
{
|
|
8613
|
+
"name": "--brand-SubdomainNavBar-color-link-bgColor",
|
|
8614
|
+
"value": "var(--base-color-scale-gray-1)",
|
|
8615
|
+
"group": "functional"
|
|
8616
|
+
},
|
|
8617
|
+
{
|
|
8618
|
+
"name": "--brand-SubdomainNavBar-searchDialog-shadowColor",
|
|
8619
|
+
"value": "rgba(0, 0, 0, 0.1)",
|
|
8620
|
+
"group": "functional"
|
|
8621
|
+
},
|
|
8622
|
+
{
|
|
8623
|
+
"name": "--brand-SubdomainNavBar-searchDialog-backdropColor",
|
|
8624
|
+
"value": "rgba(0, 0, 0, 0.2)",
|
|
8625
|
+
"group": "functional"
|
|
8626
|
+
},
|
|
8580
8627
|
{
|
|
8581
8628
|
"name": "--brand-SubdomainNavBar-border-nav-default",
|
|
8582
8629
|
"value": "var(--base-color-scale-gray-9)",
|
|
@@ -8892,8 +8939,23 @@
|
|
|
8892
8939
|
"value": "var(--base-color-scale-green-7)",
|
|
8893
8940
|
"group": "functional"
|
|
8894
8941
|
},
|
|
8942
|
+
{
|
|
8943
|
+
"name": "--brand-TextCursorAnimation-cursor-animationDuration",
|
|
8944
|
+
"value": "833ms",
|
|
8945
|
+
"group": "functional"
|
|
8946
|
+
},
|
|
8895
8947
|
{
|
|
8896
8948
|
"name": "--brand-TextCursorAnimation-cursor-color",
|
|
8949
|
+
"value": "var(--base-color-scale-purple-5)",
|
|
8950
|
+
"group": "functional"
|
|
8951
|
+
},
|
|
8952
|
+
{
|
|
8953
|
+
"name": "--brand-TextCursorAnimation-cursor-deleteColor",
|
|
8954
|
+
"value": "var(--base-color-scale-blue-4)",
|
|
8955
|
+
"group": "functional"
|
|
8956
|
+
},
|
|
8957
|
+
{
|
|
8958
|
+
"name": "--brand-TextCursorAnimation-cursor-finalColor",
|
|
8897
8959
|
"value": "var(--base-color-scale-green-6)",
|
|
8898
8960
|
"group": "functional"
|
|
8899
8961
|
},
|
|
@@ -10203,7 +10265,7 @@
|
|
|
10203
10265
|
"full page",
|
|
10204
10266
|
"template"
|
|
10205
10267
|
],
|
|
10206
|
-
"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>{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.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}"
|
|
10268
|
+
"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}"
|
|
10207
10269
|
},
|
|
10208
10270
|
{
|
|
10209
10271
|
"name": "FlexSuiteSecurityCategory",
|
|
@@ -10220,7 +10282,7 @@
|
|
|
10220
10282
|
"full page",
|
|
10221
10283
|
"template"
|
|
10222
10284
|
],
|
|
10223
|
-
"source": "import {CodeOfConductIcon, CpuIcon, LightBulbIcon} from '@primer/octicons-react'\nimport {clsx} from 'clsx'\n\nimport {\n Box,\n Card,\n Grid,\n Hero,\n Pillar,\n LogoSuite,\n Section,\n SectionIntro,\n Stack,\n SubNav,\n Image,\n Token,\n Testimonial,\n CTABanner,\n Button,\n Text,\n} from '../../../..'\nimport {logos} from '../../../../LogoSuite/LogoSuite.fixtures'\nimport placeholderBg from '../../../../fixtures/images/security-banner-wide.png'\nimport placeholderImage from '../../../../fixtures/images/placeholder.png'\nimport monaAvatar from '../../../../fixtures/images/avatar-mona.png'\nimport brandDividerWide from '../../../../fixtures/images/brand-divider-security-wide.png'\nimport riverFootstepsChat from './fixtures/images/river-footsteps-chat.png'\nimport riverFootstepsChatMobile from './fixtures/images/river-footsteps-chat-mobile.png'\nimport riverFootstepsReview from './fixtures/images/river-footsteps-review.png'\nimport riverFootstepsReviewMobile from './fixtures/images/river-footsteps-review-mobile.png'\nimport riverFootstepsWorkflow from './fixtures/images/river-footsteps-workflow.png'\nimport riverFootstepsWorkflowMobile from './fixtures/images/river-footsteps-workflow-mobile.png'\n\nimport {\n defaultFlexSuiteSecurityCategoryContent,\n type FlexSuiteSecurityCategoryContent,\n} from './FlexSuiteSecurityCategory.content'\nimport styles from '../../Overview/FlexSuiteAIOverview.module.css'\nimport {RedlineBackground} from '../../../../component-helpers'\nimport {LockIcon} from '@primer/octovisuals-react'\n\nexport type FlexSuiteSecurityCategoryTemplateProps = {\n content: FlexSuiteSecurityCategoryContent\n}\n\nconst cardIcons = [CpuIcon, LightBulbIcon, CodeOfConductIcon] as const\nconst riverFootstepsImages = [riverFootstepsWorkflow, riverFootstepsReview, riverFootstepsChat] as const\nconst riverFootstepsMobileImages = [\n riverFootstepsWorkflowMobile,\n riverFootstepsReviewMobile,\n riverFootstepsChatMobile,\n] as const\n\nexport function FlexSuiteSecurityCategory() {\n return <FlexSuiteSecurityCategoryTemplate content={defaultFlexSuiteSecurityCategoryContent} />\n}\n\nexport function FlexSuiteSecurityCategoryTemplate({content}: FlexSuiteSecurityCategoryTemplateProps) {\n return (\n <Box className={styles.page} backgroundColor=\"default\">\n <Box backgroundColor=\"subtle\" style={{height: 72}} />\n\n <SubNav>\n <SubNav.Heading href=\"#\" aria-current=\"page\">\n {content.subNav.heading}\n </SubNav.Heading>\n\n {content.subNav.links.map(link => (\n <SubNav.Link key={link} href=\"#\">\n {link}\n </SubNav.Link>\n ))}\n </SubNav>\n\n <Section paddingBlockStart=\"none\" paddingBlockEnd=\"none\">\n <Hero align=\"center\">\n <Hero.Label>{content.hero.label}</Hero.Label>\n <Hero.Heading>{content.hero.heading}</Hero.Heading>\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 </Hero>\n </Section>\n <Stack justifyContent=\"center\" padding=\"none\" style={{marginTop: 'calc(var(--base-size-64) * -1)'}}>\n <Box borderBlockEndWidth=\"thin\" borderColor=\"muted\" borderStyle=\"solid\">\n <Image src={placeholderBg} alt={content.common.heroImageAlt} style={{display: 'block', width: '100%'}} />\n </Box>\n </Stack>\n <Box\n className={clsx(styles.cardGridFrame)}\n marginBlockStart={{narrow: 24, wide: 80}}\n marginBlockEnd={{narrow: 24, wide: 64}}\n >\n <Box className={styles.cardGridContent}>\n <Grid columnGap=\"none\" rowGap=\"none\" enableGutters={false}>\n {content.highlights.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.tag ? (\n <Card.Tokens>\n <Token>{card.tag}</Token>\n </Card.Tokens>\n ) : null}\n <Card.Heading as=\"h2\">{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 <Box borderBlockStartWidth=\"thin\" borderColor=\"muted\" borderStyle=\"solid\">\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 </Box>\n\n <Section paddingBlockEnd=\"none\" paddingBlockStart=\"condensed\">\n <SectionIntro align=\"center\">\n <SectionIntro.Label>{content.workflow.label}</SectionIntro.Label>\n <SectionIntro.Heading>{content.workflow.heading}</SectionIntro.Heading>\n </SectionIntro>\n </Section>\n\n <Box className={styles.cardGridFrame} marginBlockStart={48}>\n <Box className={styles.cardGridContent}>\n <Grid columnGap=\"none\" rowGap=\"none\" enableGutters={false}>\n {content.capabilities.map(card => (\n <Grid.Column\n key={card.heading}\n span={{xsmall: 12, large: 6}}\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.Image aspectRatio=\"16:10\" src={placeholderImage} alt=\"\" />\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.customerStories.label}</SectionIntro.Label>\n <SectionIntro.Heading>{content.customerStories.heading}</SectionIntro.Heading>\n </SectionIntro>\n </Section>\n\n <Box className={styles.cardGridFrame} marginBlockStart={48}>\n <Box className={styles.cardGridContent}>\n <Grid columnGap=\"none\" rowGap=\"none\" enableGutters={false}>\n {content.customerStories.cards.map(card => (\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 href=\"#\" fullWidth ctaVariant=\"arrow\" className={styles.resourceCard}>\n {card.tag ? (\n <Card.Tokens>\n <Token>{card.tag}</Token>\n </Card.Tokens>\n ) : null}\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 className={styles.testimonialSection} paddingBlockStart=\"none\" paddingBlockEnd=\"none\">\n <Testimonial variant=\"expressive\" size=\"large\">\n <Testimonial.Quote>\n {content.testimonial.quoteLead} <em>{content.testimonial.quoteEmphasis}</em>{' '}\n {content.testimonial.quoteTrailing}\n </Testimonial.Quote>\n <Testimonial.Link href=\"#\">{content.testimonial.linkText}</Testimonial.Link>\n <Testimonial.Avatar src={monaAvatar} alt={content.testimonial.avatarAlt} />\n <Testimonial.Name position={content.testimonial.position}>{content.testimonial.name}</Testimonial.Name>\n </Testimonial>\n </Section>\n\n <Box borderBlockEndWidth=\"thin\" borderColor=\"muted\" borderStyle=\"solid\">\n <Section paddingBlockEnd=\"none\" paddingBlockStart=\"none\">\n <Box\n borderInlineStartWidth=\"thin\"\n borderInlineEndWidth=\"thin\"\n borderColor=\"muted\"\n borderStyle=\"solid\"\n padding={{narrow: 20, regular: 48, wide: 64}}\n >\n <Grid columnGap=\"none\" rowGap=\"none\" enableGutters={false}>\n <Grid.Column span={{xsmall: 12, large: 5}}>\n <SectionIntro>\n <SectionIntro.Heading>{content.riverFootstepsSection.heading}</SectionIntro.Heading>\n <SectionIntro.Link href=\"#\">{content.riverFootstepsSection.linkText}</SectionIntro.Link>\n </SectionIntro>\n </Grid.Column>\n <Grid.Column span={{xsmall: 12, large: 7}}>\n <Grid className={styles.riverFootstepsGrid}>\n {content.riverFootstepsSection.pillars.map((pillar, index) => (\n <Grid.Column key={pillar.heading} span={{xsmall: 12, medium: 6}}>\n <Pillar fullWidth>\n <Pillar.Image\n as=\"picture\"\n src={riverFootstepsMobileImages[index]}\n alt={pillar.imageAlt}\n sources={[{srcset: riverFootstepsImages[index], media: '(min-width: 48rem)'}]}\n className={styles.riverFootstepsImage}\n />\n <Pillar.Heading>{pillar.heading}</Pillar.Heading>\n <Pillar.Link href=\"#\">{pillar.linkText}</Pillar.Link>\n </Pillar>\n </Grid.Column>\n ))}\n </Grid>\n </Grid.Column>\n </Grid>\n </Box>\n </Section>\n </Box>\n\n <Section paddingBlockStart=\"condensed\" paddingBlockEnd=\"condensed\">\n <SectionIntro align=\"center\" fullWidth>\n <SectionIntro.Heading>{content.resources.heading}</SectionIntro.Heading>\n </SectionIntro>\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 => (\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.tag ? (\n <Card.Tokens>\n <Token>{card.tag}</Token>\n </Card.Tokens>\n ) : null}\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 <Box\n borderBlockStartWidth=\"thin\"\n borderBlockEndWidth=\"thin\"\n borderColor=\"muted\"\n borderStyle=\"solid\"\n marginBlockEnd=\"spacious\"\n >\n <Section paddingBlockEnd=\"none\" paddingBlockStart=\"none\">\n <CTABanner\n leadingComponent={() => (\n <Text>\n <LockIcon size={64} />\n </Text>\n )}\n >\n <CTABanner.Heading>{content.cta.heading}</CTABanner.Heading>\n\n <CTABanner.ButtonGroup>\n <Button>{content.cta.primaryAction}</Button>\n <Button>{content.cta.secondaryAction}</Button>\n </CTABanner.ButtonGroup>\n </CTABanner>\n </Section>\n </Box>\n <Stack justifyContent=\"center\" padding=\"none\">\n <Box borderBlockEndWidth=\"thin\" borderColor=\"muted\" borderStyle=\"solid\">\n <Image src={brandDividerWide} alt=\"\" style={{display: 'block'}} />\n </Box>\n </Stack>\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}"
|
|
10285
|
+
"source": "import {CodeOfConductIcon, CpuIcon, LightBulbIcon} from '@primer/octicons-react'\nimport {clsx} from 'clsx'\n\nimport {\n Box,\n Card,\n Grid,\n Hero,\n Pillar,\n LogoSuite,\n Section,\n SectionIntro,\n Stack,\n SubNav,\n Image,\n Token,\n Testimonial,\n CTABanner,\n Button,\n Text,\n} from '../../../..'\nimport {logos} from '../../../../LogoSuite/LogoSuite.fixtures'\nimport placeholderBg from '../../../../fixtures/images/security-banner-wide.png'\nimport placeholderImage from '../../../../fixtures/images/placeholder.png'\nimport monaAvatar from '../../../../fixtures/images/avatar-mona.png'\nimport brandDividerWide from '../../../../fixtures/images/brand-divider-security-wide.png'\nimport riverFootstepsChat from './fixtures/images/river-footsteps-chat.png'\nimport riverFootstepsChatMobile from './fixtures/images/river-footsteps-chat-mobile.png'\nimport riverFootstepsReview from './fixtures/images/river-footsteps-review.png'\nimport riverFootstepsReviewMobile from './fixtures/images/river-footsteps-review-mobile.png'\nimport riverFootstepsWorkflow from './fixtures/images/river-footsteps-workflow.png'\nimport riverFootstepsWorkflowMobile from './fixtures/images/river-footsteps-workflow-mobile.png'\n\nimport {\n defaultFlexSuiteSecurityCategoryContent,\n type FlexSuiteSecurityCategoryContent,\n} from './FlexSuiteSecurityCategory.content'\nimport styles from '../../Overview/FlexSuiteAIOverview.module.css'\nimport {RedlineBackground} from '../../../../component-helpers'\nimport {LockIcon} from '@primer/octovisuals-react'\n\nexport type FlexSuiteSecurityCategoryTemplateProps = {\n content: FlexSuiteSecurityCategoryContent\n}\n\nconst cardIcons = [CpuIcon, LightBulbIcon, CodeOfConductIcon] as const\nconst riverFootstepsImages = [riverFootstepsWorkflow, riverFootstepsReview, riverFootstepsChat] as const\nconst riverFootstepsMobileImages = [\n riverFootstepsWorkflowMobile,\n riverFootstepsReviewMobile,\n riverFootstepsChatMobile,\n] as const\n\nexport function FlexSuiteSecurityCategory() {\n return <FlexSuiteSecurityCategoryTemplate content={defaultFlexSuiteSecurityCategoryContent} />\n}\n\nexport function FlexSuiteSecurityCategoryTemplate({content}: FlexSuiteSecurityCategoryTemplateProps) {\n return (\n <Box className={styles.page} backgroundColor=\"default\">\n <Box backgroundColor=\"subtle\" style={{height: 72}} />\n\n <SubNav>\n <SubNav.Heading href=\"#\" aria-current=\"page\">\n {content.subNav.heading}\n </SubNav.Heading>\n\n {content.subNav.links.map(link => (\n <SubNav.Link key={link} href=\"#\">\n {link}\n </SubNav.Link>\n ))}\n </SubNav>\n\n <Section paddingBlockStart=\"none\" paddingBlockEnd=\"none\">\n <Hero align=\"center\">\n <Hero.Label animate initialText={content.hero.initialLabel}>\n {content.hero.label}\n </Hero.Label>\n <Hero.Heading>{content.hero.heading}</Hero.Heading>\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 </Hero>\n </Section>\n <Stack justifyContent=\"center\" padding=\"none\" style={{marginTop: 'calc(var(--base-size-64) * -1)'}}>\n <Box borderBlockEndWidth=\"thin\" borderColor=\"muted\" borderStyle=\"solid\">\n <Image src={placeholderBg} alt={content.common.heroImageAlt} style={{display: 'block', width: '100%'}} />\n </Box>\n </Stack>\n <Box\n className={clsx(styles.cardGridFrame)}\n marginBlockStart={{narrow: 24, wide: 80}}\n marginBlockEnd={{narrow: 24, wide: 64}}\n >\n <Box className={styles.cardGridContent}>\n <Grid columnGap=\"none\" rowGap=\"none\" enableGutters={false}>\n {content.highlights.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.tag ? (\n <Card.Tokens>\n <Token>{card.tag}</Token>\n </Card.Tokens>\n ) : null}\n <Card.Heading as=\"h2\">{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 <Box borderBlockStartWidth=\"thin\" borderColor=\"muted\" borderStyle=\"solid\">\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 </Box>\n\n <Section paddingBlockEnd=\"none\" paddingBlockStart=\"condensed\">\n <SectionIntro align=\"center\">\n <SectionIntro.Label>{content.workflow.label}</SectionIntro.Label>\n <SectionIntro.Heading>{content.workflow.heading}</SectionIntro.Heading>\n </SectionIntro>\n </Section>\n\n <Box className={styles.cardGridFrame} marginBlockStart={48}>\n <Box className={styles.cardGridContent}>\n <Grid columnGap=\"none\" rowGap=\"none\" enableGutters={false}>\n {content.capabilities.map(card => (\n <Grid.Column\n key={card.heading}\n span={{xsmall: 12, large: 6}}\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.Image aspectRatio=\"16:10\" src={placeholderImage} alt=\"\" />\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.customerStories.label}</SectionIntro.Label>\n <SectionIntro.Heading>{content.customerStories.heading}</SectionIntro.Heading>\n </SectionIntro>\n </Section>\n\n <Box className={styles.cardGridFrame} marginBlockStart={48}>\n <Box className={styles.cardGridContent}>\n <Grid columnGap=\"none\" rowGap=\"none\" enableGutters={false}>\n {content.customerStories.cards.map(card => (\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 href=\"#\" fullWidth ctaVariant=\"arrow\" className={styles.resourceCard}>\n {card.tag ? (\n <Card.Tokens>\n <Token>{card.tag}</Token>\n </Card.Tokens>\n ) : null}\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 className={styles.testimonialSection} paddingBlockStart=\"none\" paddingBlockEnd=\"none\">\n <Testimonial variant=\"expressive\" size=\"large\">\n <Testimonial.Quote>\n {content.testimonial.quoteLead} <em>{content.testimonial.quoteEmphasis}</em>{' '}\n {content.testimonial.quoteTrailing}\n </Testimonial.Quote>\n <Testimonial.Link href=\"#\">{content.testimonial.linkText}</Testimonial.Link>\n <Testimonial.Avatar src={monaAvatar} alt={content.testimonial.avatarAlt} />\n <Testimonial.Name position={content.testimonial.position}>{content.testimonial.name}</Testimonial.Name>\n </Testimonial>\n </Section>\n\n <Box borderBlockEndWidth=\"thin\" borderColor=\"muted\" borderStyle=\"solid\">\n <Section paddingBlockEnd=\"none\" paddingBlockStart=\"none\">\n <Box\n borderInlineStartWidth=\"thin\"\n borderInlineEndWidth=\"thin\"\n borderColor=\"muted\"\n borderStyle=\"solid\"\n padding={{narrow: 20, regular: 48, wide: 64}}\n >\n <Grid columnGap=\"none\" rowGap=\"none\" enableGutters={false}>\n <Grid.Column span={{xsmall: 12, large: 5}}>\n <SectionIntro>\n <SectionIntro.Heading>{content.riverFootstepsSection.heading}</SectionIntro.Heading>\n <SectionIntro.Link href=\"#\">{content.riverFootstepsSection.linkText}</SectionIntro.Link>\n </SectionIntro>\n </Grid.Column>\n <Grid.Column span={{xsmall: 12, large: 7}}>\n <Grid className={styles.riverFootstepsGrid}>\n {content.riverFootstepsSection.pillars.map((pillar, index) => (\n <Grid.Column key={pillar.heading} span={{xsmall: 12, medium: 6}}>\n <Pillar fullWidth>\n <Pillar.Image\n as=\"picture\"\n src={riverFootstepsMobileImages[index]}\n alt={pillar.imageAlt}\n sources={[{srcset: riverFootstepsImages[index], media: '(min-width: 48rem)'}]}\n className={styles.riverFootstepsImage}\n />\n <Pillar.Heading>{pillar.heading}</Pillar.Heading>\n <Pillar.Link href=\"#\">{pillar.linkText}</Pillar.Link>\n </Pillar>\n </Grid.Column>\n ))}\n </Grid>\n </Grid.Column>\n </Grid>\n </Box>\n </Section>\n </Box>\n\n <Section paddingBlockStart=\"condensed\" paddingBlockEnd=\"condensed\">\n <SectionIntro align=\"center\" fullWidth>\n <SectionIntro.Heading>{content.resources.heading}</SectionIntro.Heading>\n </SectionIntro>\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 => (\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.tag ? (\n <Card.Tokens>\n <Token>{card.tag}</Token>\n </Card.Tokens>\n ) : null}\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 <Box\n borderBlockStartWidth=\"thin\"\n borderBlockEndWidth=\"thin\"\n borderColor=\"muted\"\n borderStyle=\"solid\"\n marginBlockEnd=\"spacious\"\n >\n <Section paddingBlockEnd=\"none\" paddingBlockStart=\"none\">\n <CTABanner\n leadingComponent={() => (\n <Text>\n <LockIcon size={64} />\n </Text>\n )}\n >\n <CTABanner.Heading>{content.cta.heading}</CTABanner.Heading>\n\n <CTABanner.ButtonGroup>\n <Button>{content.cta.primaryAction}</Button>\n <Button>{content.cta.secondaryAction}</Button>\n </CTABanner.ButtonGroup>\n </CTABanner>\n </Section>\n </Box>\n <Stack justifyContent=\"center\" padding=\"none\">\n <Box borderBlockEndWidth=\"thin\" borderColor=\"muted\" borderStyle=\"solid\">\n <Image src={brandDividerWide} alt=\"\" style={{display: 'block'}} />\n </Box>\n </Stack>\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}"
|
|
10224
10286
|
}
|
|
10225
10287
|
]
|
|
10226
10288
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/brand-mcp",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.75.0-rc.96de7cef",
|
|
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",
|