@primer/react-brand 0.65.0-rc.8f2d335e → 0.65.0-rc.bea77abb

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/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';