@primer/react-brand 0.65.0-rc.e1f4ec77 → 0.65.0

package/lib/Accordion/Accordion.d.ts

@@ -19,6 +19,7 @@ export type AccordionHeadingProps = HTMLAttributes<HTMLElement> & {
     as?: HeadingProps['as'];
     reversedToggles?: boolean;
     toggleColor?: (typeof AccordionToggleColors)[number];
+    weight?: HeadingProps['weight'];
 };
 /**
  * TODO This type is incorrect
@@ -29,6 +30,7 @@ export declare const AccordionHeading: React.ForwardRefExoticComponent<React.HTM
     as?: HeadingProps["as"];
     reversedToggles?: boolean;
     toggleColor?: (typeof AccordionToggleColors)[number];
+    weight?: HeadingProps["weight"];
 } & React.RefAttributes<HTMLHeadingElement>>;
 export type AccordionContentProps = HTMLAttributes<HTMLElement>;
 export declare const AccordionContent: ({ className, ...rest }: AccordionContentProps) => import("react/jsx-runtime").JSX.Element;
@@ -42,5 +44,6 @@ export declare const Accordion: React.ForwardRefExoticComponent<React.DetailsHTM
         as?: HeadingProps["as"];
         reversedToggles?: boolean;
         toggleColor?: (typeof AccordionToggleColors)[number];
+        weight?: HeadingProps["weight"];
     } & React.RefAttributes<HTMLHeadingElement>>;
 };

package/lib/CTABanner/CTABanner.d.ts

@@ -18,6 +18,10 @@ type ResponsiveBackgroundColorMap = ResponsiveMap<BackgroundColors>;
 type ResponsiveBackgroundImagePositionMap = ResponsiveMap<string | string[]>;
 type ResponsiveBackgroundImageSizeMap = ResponsiveMap<string | string[]>;
 export type CTABannerProps = BaseProps<HTMLElement> & React.HTMLAttributes<HTMLElement> & {
+    /**
+     * Alternative presentations
+     */
+    variant?: 'default' | 'balanced' | 'minimal';
     /**
      * The alignment of the content within the banner.
      */
@@ -26,8 +30,13 @@ export type CTABannerProps = BaseProps<HTMLElement> & React.HTMLAttributes<HTMLE
      * A flag to add a border to the banner.
      */
     hasBorder?: boolean;
+    /**
+     * Enable optional grid lines
+     */
+    hasGridLines?: boolean;
     /**
      * A flag to remove the shadow from the banner.
+     * @deprecated - hasShadow will be removed in a future release.
      */
     hasShadow?: boolean;
     /**
@@ -50,6 +59,13 @@ export type CTABannerProps = BaseProps<HTMLElement> & React.HTMLAttributes<HTMLE
      * Optional, custom background size.
      */
     backgroundImageSize?: string | ResponsiveBackgroundImageSizeMap;
+    /**
+     * Escape-hatch for inserting custom React components.
+     * Warning:
+     *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.
+     *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.
+     */
+    leadingComponent?: React.FunctionComponent;
     /**
      * Escape-hatch for inserting custom React components.
      * Warning:
@@ -64,9 +80,14 @@ type CTABannerHeadingProps = BaseProps<HTMLHeadingElement> & {
 type CTABannerDescriptionProps = React.HtmlHTMLAttributes<HTMLParagraphElement> & BaseProps<HTMLParagraphElement> & {
     variant?: TextProps['variant'];
 };
+type CTABannerImageProps = BaseProps<HTMLImageElement> & {
+    src: string;
+    alt: string;
+};
 export declare const CTABanner: React.ForwardRefExoticComponent<Omit<CTABannerProps, "ref"> & React.RefAttributes<HTMLElement>> & {
     Heading: React.ForwardRefExoticComponent<Omit<CTABannerHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
     Description: React.ForwardRefExoticComponent<Omit<CTABannerDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
     ButtonGroup: React.ForwardRefExoticComponent<Omit<Omit<import("..").ButtonGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Image: React.ForwardRefExoticComponent<Omit<CTABannerImageProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
 };
 export {};

package/lib/EyebrowText/EyebrowText.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { BaseProps } from '../component-helpers';
+export type EyebrowTextProps = BaseProps<HTMLSpanElement> & {
+    ['data-testid']?: string;
+} & React.ComponentPropsWithoutRef<'span'>;
+/**
+ * EyebrowText is a simple text component that should be used above Headings.
+ */
+export declare const EyebrowText: React.ForwardRefExoticComponent<Omit<EyebrowTextProps, "ref"> & React.RefAttributes<HTMLSpanElement>> & {
+    testIds: {
+        root: string;
+    };
+};

package/lib/EyebrowText/index.d.ts

@@ -0,0 +1 @@
+export * from './EyebrowText';

package/lib/FAQ/FAQ.d.ts

@@ -7,7 +7,9 @@ import type { BaseProps } from '../component-helpers';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/faq/base.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/faq/colors-with-modes.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/faq/faq.css';
-export type FAQRootProps = PropsWithChildren<BaseProps<HTMLElement>> & React.HTMLAttributes<HTMLElement>;
+export type FAQRootProps = {
+    variant?: 'default' | 'gridline';
+} & PropsWithChildren<BaseProps<HTMLElement>> & React.HTMLAttributes<HTMLElement>;
 type FAQHeadingProps = BaseProps<HTMLHeadingElement> & {
     align?: 'start' | 'center';
     children: React.ReactNode | React.ReactNode[];
@@ -18,7 +20,7 @@ export type FAQSubheadingProps = BaseProps<HTMLHeadingElement> & {
     children: React.ReactNode | React.ReactNode[];
     as?: Exclude<HeadingProps['as'], 'h1'>;
 } & HeadingProps;
-declare function FAQSubheading({ children, className, as, size, weight, ...rest }: FAQSubheadingProps): import("react/jsx-runtime").JSX.Element;
+declare function FAQSubheading({ children, className, as, size, font, weight, ...rest }: FAQSubheadingProps): import("react/jsx-runtime").JSX.Element;
 /**
  * FAQ component:
  * {@link https://primer.style/brand/components/FAQ/ See usage examples}.
@@ -35,6 +37,7 @@ export declare const FAQ: React.ForwardRefExoticComponent<Omit<FAQRootProps, "re
         as?: HeadingProps["as"];
         reversedToggles?: boolean;
         toggleColor?: typeof import("..").AccordionToggleColors[number];
+        weight?: HeadingProps["weight"];
     } & React.RefAttributes<HTMLHeadingElement>>;
     Answer: ({ className, ...rest }: import("..").AccordionContentProps) => import("react/jsx-runtime").JSX.Element;
 };

package/lib/FAQ/FAQGroup.d.ts

@@ -9,10 +9,11 @@ import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/compone
 declare function HeadingBase({ children, className, as, ...rest }: FAQSubheadingProps): import("react/jsx-runtime").JSX.Element;
 export type FAQGroupProps = React.PropsWithChildren<{
     id?: string;
+    variant?: 'default' | 'gridline';
     defaultSelectedIndex?: number;
     tabAttributes?: (children: React.ReactNode, index: number) => Record<string, unknown>;
 }>;
-declare function FAQGroupBase({ children, id, defaultSelectedIndex, tabAttributes, ...rest }: FAQGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function FAQGroupBase({ children, id, variant, defaultSelectedIndex, tabAttributes, ...rest }: FAQGroupProps): import("react/jsx-runtime").JSX.Element;
 /**
  * FAQGroup component:
  * {@link https://primer.style/brand/components/FAQ#grouped-faqs See usage examples}.

package/lib/Hero/HeroContext.d.ts

@@ -4,7 +4,7 @@ export type HeroAlign = (typeof HeroAlignOptions)[number];
 export declare const HeroVariantOptions: readonly ["default", "gridline", "gridline-expressive"];
 export type HeroVariant = (typeof HeroVariantOptions)[number];
 export declare const heroMediaPositions: readonly ["block-end", "block-end-padded", "inline-start", "inline-end", "inline-end-padded", "inline-start-padded"];
-export declare const heroMediaInlinePositions: ("block-end" | "block-end-padded" | "inline-start" | "inline-end" | "inline-end-padded" | "inline-start-padded")[];
+export declare const heroMediaInlinePositions: ("inline-end" | "inline-start" | "block-end" | "block-end-padded" | "inline-end-padded" | "inline-start-padded")[];
 export type HeroMediaPositions = (typeof heroMediaPositions)[number];
 export type HeroMediaInlinePositions = (typeof heroMediaInlinePositions)[number];
 type HeroContextType = {

package/lib/IDE/IDE.d.ts

@@ -5,6 +5,9 @@ import type { BaseProps } from '../component-helpers';
  */
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/ide/base.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/ide/colors-with-modes.css';
+/**
+ * @deprecated IDEProps is deprecated and will be removed in a future release.
+ */
 export type IDEProps = {
     /**
      * Test id for the IDE
@@ -52,6 +55,9 @@ type IDEChatMessageUser = {
 type IDEChatMessageAssistant = {
     role: 'assistant';
 };
+/**
+ * @deprecated IDEChatMessage is deprecated and will be removed in a future release.
+ */
 export type IDEChatMessage = {
     handle: string;
     message: string;
@@ -99,6 +105,9 @@ type IDEEditorProps = {
      */
     setAnimationIsDone?: (isDone: boolean) => void;
 } & BaseProps<HTMLDivElement>;
+/**
+ * @deprecated IDEEditorFile is deprecated and will be removed in a future release.
+ */
 export type IDEEditorFile = {
     name: string;
     /**
@@ -120,6 +129,7 @@ type IDEEditorHandle = HTMLElement & {
 };
 /**
  * Use IDE to display a decorative editor component
+ * @deprecated IDE is deprecated and will be removed in a future release.
  * @see https://primer.style/brand/components/IDE
  */
 export declare const IDE: React.NamedExoticComponent<{

package/lib/LogoSuite/LogoSuite.d.ts

@@ -19,6 +19,10 @@ export type LogoSuiteProps = {
      * Test id for the root LogoSuite element.
      */
     'data-testid'?: string;
+    /**
+     * Alternative presentation
+     */
+    variant?: 'default' | 'gridline-expressive';
 } & BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>;
 export type LogoSuiteHeadingProps = BaseProps<HTMLHeadingElement> & HeadingProps & {
     /**
@@ -47,12 +51,18 @@ export type LogoSuiteLogoBarProps = BaseProps<HTMLDivElement> & {
      * The stylistic variant of the LogoBar.
      */
     variant?: 'muted' | 'emphasis';
+    /**
+     * Displays an optional takeover button (as an anchor) on hover/focus.
+     */
+    takeoverButton?: {
+        label: string;
+    } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> & BaseProps<HTMLAnchorElement>;
 };
 /**
  * Use LogoSuite to present a list of logos, such as sponsors or vendors.
  * @see https://primer.style/brand/components/LogoSuite
  */
-export declare const LogoSuite: (({ align, children, className, hasDivider, "data-testid": testId, }: PropsWithChildren<LogoSuiteProps>) => import("react/jsx-runtime").JSX.Element) & {
+export declare const LogoSuite: (({ align, children, className, hasDivider, variant, "data-testid": testId, }: PropsWithChildren<LogoSuiteProps>) => import("react/jsx-runtime").JSX.Element) & {
     Heading: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<LogoSuiteHeadingProps>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
     Description: React.ForwardRefExoticComponent<(Omit<BaseProps<HTMLParagraphElement> & {
         font?: import("../Text").TextFontVariants;

package/lib/SubNav/SubNav.d.ts

@@ -13,6 +13,9 @@ type SubNavContextType = {
 };
 export declare const useSubNavContext: () => SubNavContextType;
 export type SubNavProps = {
+    /**
+     * @deprecated The hasShadow prop is deprecated and will be removed in a future release.
+     */
     hasShadow?: boolean;
     /**
      * Allows the SubNav to be used at full width,

package/lib/Tiles/Tiles.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import type { BaseProps } from '../component-helpers';
+/** * Design Tokens */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tiles/colors-with-modes.css';
+type TilesVariant = 'default' | 'gridlines';
+type TilesLayout = 'default' | 'compact';
+export type TilesProps = {
+    /**
+     * The visual variant of the Tiles component.
+     */
+    variant?: TilesVariant;
+    /**
+     * The layout density of the Tiles grid.
+     */
+    layout?: TilesLayout;
+    /**
+     * Test id for the root Tiles element.
+     */
+    'data-testid'?: string;
+} & BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>;
+export type TilesItemProps = {
+    /**
+     * The accessible name for the tile item.
+     */
+    name: string;
+    /**
+     * Optional URL to link the tile to.
+     */
+    href?: string;
+    /**
+     * Test id for the tile item element.
+     */
+    'data-testid'?: string;
+} & BaseProps<HTMLLIElement> & Omit<React.HTMLAttributes<HTMLLIElement>, 'children'> & {
+    children: React.ReactNode;
+};
+/**
+ * Use Tiles to display a grid of logos or icons with optional links.
+ * @see https://primer.style/brand/components/Tiles
+ */
+export declare const Tiles: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<TilesProps>, "ref"> & React.RefAttributes<HTMLDivElement>> & {
+    Item: React.ForwardRefExoticComponent<Omit<TilesItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
+    testIds: {
+        root: string;
+        readonly grid: string;
+        readonly item: string;
+    };
+};
+export {};

package/lib/Tiles/Tiles.fixtures.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const tileItems: Array<{
+    name: string;
+    href?: string;
+    icon: React.ReactNode;
+}>;

package/lib/Tiles/index.d.ts

@@ -0,0 +1 @@
+export * from './Tiles';