@primer/react-brand 0.42.0-rc.5dc870aa → 0.42.0

package/lib/BreakoutBanner/BreakoutBanner.d.ts

@@ -75,10 +75,10 @@ export declare const BreakoutBanner: React.ForwardRefExoticComponent<Omit<BasePr
     } & {
         as?: typeof import("../").HeadingTags[number];
         size?: typeof import("../").HeadingSizes[number];
-        weight?: ("medium" | "light" | "heavy" | "extrabold" | "bold" | "semibold" | "normal" | "extralight") | {
-            narrow?: "medium" | "light" | "heavy" | "extrabold" | "bold" | "semibold" | "normal" | "extralight";
-            regular?: "medium" | "light" | "heavy" | "extrabold" | "bold" | "semibold" | "normal" | "extralight";
-            wide?: "medium" | "light" | "heavy" | "extrabold" | "bold" | "semibold" | "normal" | "extralight";
+        weight?: ("medium" | "heavy" | "extrabold" | "bold" | "semibold" | "normal" | "light" | "extralight") | {
+            narrow?: "medium" | "heavy" | "extrabold" | "bold" | "semibold" | "normal" | "light" | "extralight";
+            regular?: "medium" | "heavy" | "extrabold" | "bold" | "semibold" | "normal" | "light" | "extralight";
+            wide?: "medium" | "heavy" | "extrabold" | "bold" | "semibold" | "normal" | "light" | "extralight";
         };
         stretch?: ("normal" | "condensed" | "expanded") | {
             narrow?: "normal" | "condensed" | "expanded";

package/lib/CTABanner/CTABanner.d.ts

@@ -1,23 +1,101 @@
 import React from 'react';
 import type { BaseProps } from '../component-helpers';
+import { TextProps } from '../Text';
 /**
  * Design tokens
  */
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/cta-banner/colors-with-modes.css';
+export declare const CTABannerBackgroundColors: readonly ["default", "subtle"];
+type ResponsiveMap<T> = {
+    narrow?: T;
+    regular?: T;
+    wide?: T;
+};
+type ResponsiveBackgroundImageSrcMap = ResponsiveMap<string | string[]>;
+type BackgroundColors = (typeof CTABannerBackgroundColors)[number] | AnyString;
+type ResponsiveBackgroundColorMap = ResponsiveMap<BackgroundColors>;
+type ResponsiveBackgroundImagePositionMap = ResponsiveMap<string | string[]>;
+type ResponsiveBackgroundImageSizeMap = ResponsiveMap<string | string[]>;
 export type CTABannerProps = BaseProps<HTMLElement> & React.HTMLAttributes<HTMLElement> & {
-    children: React.ReactNode | React.ReactNode[];
+    /**
+     * The alignment of the content within the banner.
+     */
     align?: 'start' | 'center';
+    /**
+     * A flag to add a border to the banner.
+     */
     hasBorder?: boolean;
+    /**
+     * A flag to remove the shadow from the banner.
+     */
     hasShadow?: boolean;
+    /**
+     * A flag to remove the background from the banner.
+     */
     hasBackground?: boolean;
+    /**
+     * Optional, custom background color.
+     */
+    backgroundColor?: BackgroundColors | ResponsiveBackgroundColorMap;
+    /**
+     * Optional, custom background image.
+     */
+    backgroundImageSrc?: string | ResponsiveBackgroundImageSrcMap;
+    /**
+     * Optional, custom background position.
+     */
+    backgroundImagePosition?: string | ResponsiveBackgroundImagePositionMap;
+    /**
+     * 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.
+     */
     trailingComponent?: React.FunctionComponent;
 };
 export declare const CTABanner: React.ForwardRefExoticComponent<Omit<BaseProps<HTMLElement> & React.HTMLAttributes<HTMLElement> & {
-    children: React.ReactNode | React.ReactNode[];
+    /**
+     * The alignment of the content within the banner.
+     */
     align?: "start" | "center";
+    /**
+     * A flag to add a border to the banner.
+     */
     hasBorder?: boolean;
+    /**
+     * A flag to remove the shadow from the banner.
+     */
     hasShadow?: boolean;
+    /**
+     * A flag to remove the background from the banner.
+     */
     hasBackground?: boolean;
+    /**
+     * Optional, custom background color.
+     */
+    backgroundColor?: BackgroundColors | ResponsiveBackgroundColorMap;
+    /**
+     * Optional, custom background image.
+     */
+    backgroundImageSrc?: string | ResponsiveBackgroundImageSrcMap;
+    /**
+     * Optional, custom background position.
+     */
+    backgroundImagePosition?: string | ResponsiveBackgroundImagePositionMap;
+    /**
+     * 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.
+     */
     trailingComponent?: React.FunctionComponent;
 }, "ref"> & React.RefAttributes<HTMLElement>> & {
     Heading: React.ForwardRefExoticComponent<Omit<BaseProps<HTMLHeadingElement> & {
@@ -25,10 +103,10 @@ export declare const CTABanner: React.ForwardRefExoticComponent<Omit<BaseProps<H
     } & {
         as?: typeof import("../Heading").HeadingTags[number];
         size?: typeof import("../Heading").HeadingSizes[number];
-        weight?: ("medium" | "light" | "heavy" | "extrabold" | "bold" | "semibold" | "normal" | "extralight") | {
-            narrow?: "medium" | "light" | "heavy" | "extrabold" | "bold" | "semibold" | "normal" | "extralight";
-            regular?: "medium" | "light" | "heavy" | "extrabold" | "bold" | "semibold" | "normal" | "extralight";
-            wide?: "medium" | "light" | "heavy" | "extrabold" | "bold" | "semibold" | "normal" | "extralight";
+        weight?: ("medium" | "heavy" | "extrabold" | "bold" | "semibold" | "normal" | "light" | "extralight") | {
+            narrow?: "medium" | "heavy" | "extrabold" | "bold" | "semibold" | "normal" | "light" | "extralight";
+            regular?: "medium" | "heavy" | "extrabold" | "bold" | "semibold" | "normal" | "light" | "extralight";
+            wide?: "medium" | "heavy" | "extrabold" | "bold" | "semibold" | "normal" | "light" | "extralight";
         };
         stretch?: ("normal" | "condensed" | "expanded") | {
             narrow?: "normal" | "condensed" | "expanded";
@@ -42,8 +120,8 @@ export declare const CTABanner: React.ForwardRefExoticComponent<Omit<BaseProps<H
         };
         font?: "mona-sans" | "hubot-sans" | "monospace";
     } & React.HTMLAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
-    Description: React.ForwardRefExoticComponent<Omit<BaseProps<HTMLParagraphElement> & {
-        children: React.ReactNode | React.ReactNode[];
+    Description: React.ForwardRefExoticComponent<Omit<React.HtmlHTMLAttributes<HTMLParagraphElement> & BaseProps<HTMLParagraphElement> & {
+        variant?: TextProps["variant"];
     }, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
     ButtonGroup: React.ForwardRefExoticComponent<Omit<Omit<BaseProps<HTMLDivElement> & {
         children: React.ReactElement<import("..").ButtonProps<React.ElementType<"a" | "button">>, string | React.JSXElementConstructor<any>>[] | React.ReactElement<import("..").ButtonProps<React.ElementType<"a" | "button">>, string | React.JSXElementConstructor<any>>;
@@ -51,3 +129,4 @@ export declare const CTABanner: React.ForwardRefExoticComponent<Omit<BaseProps<H
         buttonsAs?: React.ElementType;
     }, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 };
+export {};