@primer/brand-mcp 0.77.0 → 0.78.0-rc.6fbe9fb5
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 +244 -6
- 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.78.0-rc.6fbe9fb5",
|
|
4
|
+
"generatedAt": "2026-10-05T16:42:34.069Z",
|
|
5
5
|
"components": [
|
|
6
6
|
{
|
|
7
7
|
"name": "Hero",
|
|
@@ -274,6 +274,83 @@
|
|
|
274
274
|
"click"
|
|
275
275
|
]
|
|
276
276
|
},
|
|
277
|
+
{
|
|
278
|
+
"name": "IconButton",
|
|
279
|
+
"module": "@primer/react-brand",
|
|
280
|
+
"subcomponents": [],
|
|
281
|
+
"props": [
|
|
282
|
+
{
|
|
283
|
+
"name": "as",
|
|
284
|
+
"type": "C",
|
|
285
|
+
"required": false
|
|
286
|
+
},
|
|
287
|
+
{
|
|
288
|
+
"name": "variant",
|
|
289
|
+
"type": "IconButtonVariant",
|
|
290
|
+
"required": false
|
|
291
|
+
},
|
|
292
|
+
{
|
|
293
|
+
"name": "icon",
|
|
294
|
+
"type": "Icon",
|
|
295
|
+
"required": true
|
|
296
|
+
},
|
|
297
|
+
{
|
|
298
|
+
"name": "aria-label",
|
|
299
|
+
"type": "string",
|
|
300
|
+
"required": true
|
|
301
|
+
},
|
|
302
|
+
{
|
|
303
|
+
"name": "description",
|
|
304
|
+
"type": "string",
|
|
305
|
+
"required": false
|
|
306
|
+
},
|
|
307
|
+
{
|
|
308
|
+
"name": "inactive",
|
|
309
|
+
"type": "boolean",
|
|
310
|
+
"required": false
|
|
311
|
+
},
|
|
312
|
+
{
|
|
313
|
+
"name": "loading",
|
|
314
|
+
"type": "boolean",
|
|
315
|
+
"required": false
|
|
316
|
+
},
|
|
317
|
+
{
|
|
318
|
+
"name": "loadingAnnouncement",
|
|
319
|
+
"type": "string",
|
|
320
|
+
"required": false
|
|
321
|
+
},
|
|
322
|
+
{
|
|
323
|
+
"name": "rounded",
|
|
324
|
+
"type": "boolean",
|
|
325
|
+
"required": false
|
|
326
|
+
},
|
|
327
|
+
{
|
|
328
|
+
"name": "size",
|
|
329
|
+
"type": "IconButtonSize",
|
|
330
|
+
"required": false
|
|
331
|
+
},
|
|
332
|
+
{
|
|
333
|
+
"name": "tooltipDirection",
|
|
334
|
+
"type": "TooltipDirection",
|
|
335
|
+
"required": false
|
|
336
|
+
}
|
|
337
|
+
],
|
|
338
|
+
"examples": [
|
|
339
|
+
{
|
|
340
|
+
"title": "IconButton example",
|
|
341
|
+
"code": "<Stack direction=\"vertical\" alignItems=\"flex-start\" gap=\"condensed\">\n <div role=\"group\" aria-label=\"Text formatting\">\n <ButtonGroup variant=\"joined\" buttonSize=\"small\">\n <IconButton\n icon={BoldIcon}\n aria-label=\"Bold\"\n aria-pressed={activeFormats.includes('bold')}\n variant={activeFormats.includes('bold') ? 'primary' : 'secondary'}\n onClick={() => toggleFormat('bold')}\n />\n <IconButton\n icon={ItalicIcon}\n aria-label=\"Italic\"\n aria-pressed={activeFormats.includes('italic')}\n variant={activeFormats.includes('italic') ? 'primary' : 'secondary'}\n onClick={() => toggleFormat('italic')}\n />\n <IconButton\n icon={ListUnorderedIcon}\n aria-label=\"Bulleted list\"\n aria-pressed={activeFormats.includes('bulleted list')}\n variant={activeFormats.includes('bulleted list') ? 'primary' : 'secondary'}\n onClick={() => toggleFormat('bulleted list')}\n />\n </ButtonGroup>\n </div>\n <Text as=\"p\" size=\"100\" variant=\"muted\" aria-live=\"polite\">\n {activeFormats.length > 0 ? `Selected: ${activeFormats.join(', ')}` : 'No formatting selected'}\n </Text>\n</Stack>",
|
|
342
|
+
"source": "story"
|
|
343
|
+
}
|
|
344
|
+
],
|
|
345
|
+
"description": "Use an icon button to represent an action with an Octicon instead of a visible text label.",
|
|
346
|
+
"keywords": [
|
|
347
|
+
"action",
|
|
348
|
+
"button",
|
|
349
|
+
"control",
|
|
350
|
+
"icon",
|
|
351
|
+
"interactive"
|
|
352
|
+
]
|
|
353
|
+
},
|
|
277
354
|
{
|
|
278
355
|
"name": "ButtonGroup",
|
|
279
356
|
"module": "@primer/react-brand",
|
|
@@ -297,6 +374,11 @@
|
|
|
297
374
|
"a"
|
|
298
375
|
],
|
|
299
376
|
"required": false
|
|
377
|
+
},
|
|
378
|
+
{
|
|
379
|
+
"name": "variant",
|
|
380
|
+
"type": "ButtonGroupVariant",
|
|
381
|
+
"required": false
|
|
300
382
|
}
|
|
301
383
|
],
|
|
302
384
|
"examples": [
|
|
@@ -1076,7 +1158,7 @@
|
|
|
1076
1158
|
},
|
|
1077
1159
|
{
|
|
1078
1160
|
"name": "size",
|
|
1079
|
-
"type": "
|
|
1161
|
+
"type": "TextInputSize",
|
|
1080
1162
|
"description": "Applies alternative sizing to the input",
|
|
1081
1163
|
"required": false
|
|
1082
1164
|
},
|
|
@@ -1990,6 +2072,7 @@
|
|
|
1990
2072
|
"module": "@primer/react-brand",
|
|
1991
2073
|
"subcomponents": [
|
|
1992
2074
|
"ActionMenu.Button",
|
|
2075
|
+
"ActionMenu.IconButton",
|
|
1993
2076
|
"ActionMenu.Item",
|
|
1994
2077
|
"ActionMenu.Overlay",
|
|
1995
2078
|
"ActionMenu.testIds"
|
|
@@ -2029,7 +2112,7 @@
|
|
|
2029
2112
|
},
|
|
2030
2113
|
{
|
|
2031
2114
|
"name": "size",
|
|
2032
|
-
"type": "
|
|
2115
|
+
"type": "ActionMenuSize",
|
|
2033
2116
|
"description": "Size configuratin of the ActionMenu",
|
|
2034
2117
|
"required": false
|
|
2035
2118
|
},
|
|
@@ -2041,7 +2124,7 @@
|
|
|
2041
2124
|
},
|
|
2042
2125
|
{
|
|
2043
2126
|
"name": "mode",
|
|
2044
|
-
"type": "
|
|
2127
|
+
"type": "ActionMenuButtonMode",
|
|
2045
2128
|
"description": "Alternative behavior for the button and menu items - `default`: The button and menu items behave as a standard button and menu item. - `split-button`: The button behaves as a split button, and the menu items behave as links.",
|
|
2046
2129
|
"required": false
|
|
2047
2130
|
}
|
|
@@ -2945,6 +3028,11 @@
|
|
|
2945
3028
|
"type": "TooltipDirection",
|
|
2946
3029
|
"required": false
|
|
2947
3030
|
},
|
|
3031
|
+
{
|
|
3032
|
+
"name": "delay",
|
|
3033
|
+
"type": "TooltipDelay",
|
|
3034
|
+
"required": false
|
|
3035
|
+
},
|
|
2948
3036
|
{
|
|
2949
3037
|
"name": "text",
|
|
2950
3038
|
"type": "string",
|
|
@@ -7005,6 +7093,16 @@
|
|
|
7005
7093
|
"value": "var(--brand-color-accent-primary)",
|
|
7006
7094
|
"group": "functional"
|
|
7007
7095
|
},
|
|
7096
|
+
{
|
|
7097
|
+
"name": "--brand-ActionMenu-color-splitButton-divider-default",
|
|
7098
|
+
"value": "var(--brand-color-border-muted)",
|
|
7099
|
+
"group": "functional"
|
|
7100
|
+
},
|
|
7101
|
+
{
|
|
7102
|
+
"name": "--brand-ActionMenu-color-splitButton-divider-primary",
|
|
7103
|
+
"value": "var(--base-color-scale-green-7)",
|
|
7104
|
+
"group": "functional"
|
|
7105
|
+
},
|
|
7008
7106
|
{
|
|
7009
7107
|
"name": "--brand-ActionMenu-color-item-hover",
|
|
7010
7108
|
"value": "var(--base-color-scale-gray-1)",
|
|
@@ -7080,6 +7178,36 @@
|
|
|
7080
7178
|
"value": "var(--base-color-scale-gray-6)",
|
|
7081
7179
|
"group": "functional"
|
|
7082
7180
|
},
|
|
7181
|
+
{
|
|
7182
|
+
"name": "--brand-Button-icon-size-large",
|
|
7183
|
+
"value": "var(--base-size-20)",
|
|
7184
|
+
"group": "functional"
|
|
7185
|
+
},
|
|
7186
|
+
{
|
|
7187
|
+
"name": "--brand-Button-icon-size-medium",
|
|
7188
|
+
"value": "var(--base-size-16)",
|
|
7189
|
+
"group": "functional"
|
|
7190
|
+
},
|
|
7191
|
+
{
|
|
7192
|
+
"name": "--brand-Button-icon-size-small",
|
|
7193
|
+
"value": "var(--base-size-16)",
|
|
7194
|
+
"group": "functional"
|
|
7195
|
+
},
|
|
7196
|
+
{
|
|
7197
|
+
"name": "--brand-Button-control-size-large",
|
|
7198
|
+
"value": "var(--brand-control-large-size)",
|
|
7199
|
+
"group": "functional"
|
|
7200
|
+
},
|
|
7201
|
+
{
|
|
7202
|
+
"name": "--brand-Button-control-size-medium",
|
|
7203
|
+
"value": "var(--brand-control-medium-size)",
|
|
7204
|
+
"group": "functional"
|
|
7205
|
+
},
|
|
7206
|
+
{
|
|
7207
|
+
"name": "--brand-Button-control-size-small",
|
|
7208
|
+
"value": "var(--brand-control-small-size)",
|
|
7209
|
+
"group": "functional"
|
|
7210
|
+
},
|
|
7083
7211
|
{
|
|
7084
7212
|
"name": "--brand-button-primary-bgColor-rest",
|
|
7085
7213
|
"value": "var(--base-color-scale-green-6)",
|
|
@@ -8025,6 +8153,116 @@
|
|
|
8025
8153
|
"value": "var(--base-color-scale-yellow-5)",
|
|
8026
8154
|
"group": "functional"
|
|
8027
8155
|
},
|
|
8156
|
+
{
|
|
8157
|
+
"name": "--brand-IconButton-loadingIndicator-animationDuration-reducedMotion",
|
|
8158
|
+
"value": "1.6s",
|
|
8159
|
+
"group": "functional"
|
|
8160
|
+
},
|
|
8161
|
+
{
|
|
8162
|
+
"name": "--brand-IconButton-loadingIndicator-animationDuration-default",
|
|
8163
|
+
"value": "0.8s",
|
|
8164
|
+
"group": "functional"
|
|
8165
|
+
},
|
|
8166
|
+
{
|
|
8167
|
+
"name": "--brand-IconButton-icon-size-large",
|
|
8168
|
+
"value": "var(--brand-Button-icon-size-large)",
|
|
8169
|
+
"group": "functional"
|
|
8170
|
+
},
|
|
8171
|
+
{
|
|
8172
|
+
"name": "--brand-IconButton-icon-size-medium",
|
|
8173
|
+
"value": "var(--brand-Button-icon-size-large)",
|
|
8174
|
+
"group": "functional"
|
|
8175
|
+
},
|
|
8176
|
+
{
|
|
8177
|
+
"name": "--brand-IconButton-icon-size-small",
|
|
8178
|
+
"value": "var(--brand-Button-icon-size-small)",
|
|
8179
|
+
"group": "functional"
|
|
8180
|
+
},
|
|
8181
|
+
{
|
|
8182
|
+
"name": "--brand-IconButton-control-size-large",
|
|
8183
|
+
"value": "var(--brand-Button-control-size-large)",
|
|
8184
|
+
"group": "functional"
|
|
8185
|
+
},
|
|
8186
|
+
{
|
|
8187
|
+
"name": "--brand-IconButton-control-size-medium",
|
|
8188
|
+
"value": "var(--brand-Button-control-size-medium)",
|
|
8189
|
+
"group": "functional"
|
|
8190
|
+
},
|
|
8191
|
+
{
|
|
8192
|
+
"name": "--brand-IconButton-control-size-small",
|
|
8193
|
+
"value": "var(--brand-Button-control-size-small)",
|
|
8194
|
+
"group": "functional"
|
|
8195
|
+
},
|
|
8196
|
+
{
|
|
8197
|
+
"name": "--brand-IconButton-danger-fgColor-rest",
|
|
8198
|
+
"value": "var(--brand-color-danger-fg)",
|
|
8199
|
+
"group": "functional"
|
|
8200
|
+
},
|
|
8201
|
+
{
|
|
8202
|
+
"name": "--brand-IconButton-danger-fgColor-hover",
|
|
8203
|
+
"value": "var(--base-color-scale-white-0)",
|
|
8204
|
+
"group": "functional"
|
|
8205
|
+
},
|
|
8206
|
+
{
|
|
8207
|
+
"name": "--brand-IconButton-danger-fgColor-active",
|
|
8208
|
+
"value": "var(--base-color-scale-white-0)",
|
|
8209
|
+
"group": "functional"
|
|
8210
|
+
},
|
|
8211
|
+
{
|
|
8212
|
+
"name": "--brand-IconButton-danger-bgColor-rest",
|
|
8213
|
+
"value": "var(--brand-button-secondary-bgColor-rest)",
|
|
8214
|
+
"group": "functional"
|
|
8215
|
+
},
|
|
8216
|
+
{
|
|
8217
|
+
"name": "--brand-IconButton-danger-bgColor-hover",
|
|
8218
|
+
"value": "var(--brand-color-danger-emphasis)",
|
|
8219
|
+
"group": "functional"
|
|
8220
|
+
},
|
|
8221
|
+
{
|
|
8222
|
+
"name": "--brand-IconButton-danger-bgColor-active",
|
|
8223
|
+
"value": "var(--brand-color-danger-emphasis)",
|
|
8224
|
+
"group": "functional"
|
|
8225
|
+
},
|
|
8226
|
+
{
|
|
8227
|
+
"name": "--brand-IconButton-danger-borderColor-rest",
|
|
8228
|
+
"value": "var(--brand-button-secondary-borderColor-rest)",
|
|
8229
|
+
"group": "functional"
|
|
8230
|
+
},
|
|
8231
|
+
{
|
|
8232
|
+
"name": "--brand-IconButton-danger-borderColor-hover",
|
|
8233
|
+
"value": "var(--brand-color-danger-emphasis)",
|
|
8234
|
+
"group": "functional"
|
|
8235
|
+
},
|
|
8236
|
+
{
|
|
8237
|
+
"name": "--brand-IconButton-danger-borderColor-active",
|
|
8238
|
+
"value": "var(--brand-color-danger-emphasis)",
|
|
8239
|
+
"group": "functional"
|
|
8240
|
+
},
|
|
8241
|
+
{
|
|
8242
|
+
"name": "--brand-IconButton-inactive-fgColor",
|
|
8243
|
+
"value": "var(--brand-color-text-muted)",
|
|
8244
|
+
"group": "functional"
|
|
8245
|
+
},
|
|
8246
|
+
{
|
|
8247
|
+
"name": "--brand-IconButton-inactive-bgColor",
|
|
8248
|
+
"value": "var(--brand-color-canvas-subtle)",
|
|
8249
|
+
"group": "functional"
|
|
8250
|
+
},
|
|
8251
|
+
{
|
|
8252
|
+
"name": "--brand-IconButton-inactive-borderColor",
|
|
8253
|
+
"value": "var(--brand-color-canvas-subtle)",
|
|
8254
|
+
"group": "functional"
|
|
8255
|
+
},
|
|
8256
|
+
{
|
|
8257
|
+
"name": "--brand-IconButton-invisible-bgColor-rest",
|
|
8258
|
+
"value": "transparent",
|
|
8259
|
+
"group": "functional"
|
|
8260
|
+
},
|
|
8261
|
+
{
|
|
8262
|
+
"name": "--brand-IconButton-invisible-borderColor-rest",
|
|
8263
|
+
"value": "transparent",
|
|
8264
|
+
"group": "functional"
|
|
8265
|
+
},
|
|
8028
8266
|
{
|
|
8029
8267
|
"name": "--brand-IDE-height",
|
|
8030
8268
|
"value": "50rem",
|
|
@@ -10346,7 +10584,7 @@
|
|
|
10346
10584
|
"full page",
|
|
10347
10585
|
"template"
|
|
10348
10586
|
],
|
|
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}"
|
|
10587
|
+
"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
10588
|
},
|
|
10351
10589
|
{
|
|
10352
10590
|
"name": "FlexSuiteSecurityCategory",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/brand-mcp",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.78.0-rc.6fbe9fb5",
|
|
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",
|