@primer/react-brand 0.36.0-rc.54a16a08 → 0.36.0-rc.6f473ca5

package/lib/BreakoutBanner/BreakoutBanner.d.ts

@@ -0,0 +1,133 @@
+import React, { ReactElement } from 'react';
+import { Icon } from '@primer/octicons-react';
+import type { BaseProps } from '../component-helpers';
+type ResponsiveMap<T> = {
+    narrow?: T;
+    regular?: T;
+    wide?: T;
+};
+export declare const BreakoutBannerBackgroundColors: readonly ["default", "subtle"];
+type ResponsiveBackgroundImageSrcMap = ResponsiveMap<string | string[]>;
+type BackgroundColors = (typeof BreakoutBannerBackgroundColors)[number] | AnyString;
+type ResponsiveBackgroundColorMap = ResponsiveMap<BackgroundColors>;
+type ResponsiveBackgroundImagePositionMap = ResponsiveMap<string | string[]>;
+type ResponsiveBackgroundImageSizeMap = ResponsiveMap<string | string[]>;
+export type BreakoutBannerProps = BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    children: React.ReactNode | React.ReactNode[];
+    /**
+     * The alignment of the content within the banner
+     */
+    align?: 'start' | 'center';
+    /**
+     * 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;
+    /**
+     * An optional leading visual that appears before the heading
+     */
+    leadingVisual?: ReactElement | Icon;
+};
+/**
+ * Breakout banner component
+ * {@link https://primer.style/brand/components/BreakoutBanner/ See usage examples}.
+ */
+export declare const BreakoutBanner: React.ForwardRefExoticComponent<Omit<BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    children: React.ReactNode | React.ReactNode[];
+    /**
+     * The alignment of the content within the banner
+     */
+    align?: "start" | "center" | undefined;
+    /**
+     * Optional, custom background color
+     */
+    backgroundColor?: BackgroundColors | ResponsiveBackgroundColorMap | undefined;
+    /**
+     * Optional, custom background image
+     */
+    backgroundImageSrc?: string | ResponsiveBackgroundImageSrcMap | undefined;
+    /**
+     * Optional, custom background position
+     */
+    backgroundImagePosition?: string | ResponsiveBackgroundImagePositionMap | undefined;
+    /**
+     * Optional, custom background size
+     */
+    backgroundImageSize?: string | ResponsiveBackgroundImageSizeMap | undefined;
+    /**
+     * An optional leading visual that appears before the heading
+     */
+    leadingVisual?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | Icon | undefined;
+}, "ref"> & React.RefAttributes<HTMLDivElement>> & {
+    Heading: React.ForwardRefExoticComponent<Omit<BaseProps<HTMLHeadingElement> & {
+        children: React.ReactNode | React.ReactNode[];
+    } & {
+        as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+        size?: "display" | "1" | "2" | "3" | "4" | "5" | "6" | "subhead-large" | "subhead-medium" | undefined;
+        weight?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | {
+            narrow?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | undefined;
+            regular?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | undefined;
+            wide?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | undefined;
+        } | undefined;
+        stretch?: "normal" | "condensed" | "expanded" | {
+            narrow?: "normal" | "condensed" | "expanded" | undefined;
+            regular?: "normal" | "condensed" | "expanded" | undefined;
+            wide?: "normal" | "condensed" | "expanded" | undefined;
+        } | undefined;
+        letterSpacing?: "normal" | "condensed" | "none" | {
+            narrow?: "normal" | "condensed" | "none" | undefined;
+            regular?: "normal" | "condensed" | "none" | undefined;
+            wide?: "normal" | "condensed" | "none" | undefined;
+        } | undefined;
+        font?: "mona-sans" | "hubot-sans" | "monospace" | undefined;
+    } & React.HTMLAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<BaseProps<HTMLParagraphElement> & {
+        children: React.ReactNode | React.ReactNode[];
+    }, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    LinkGroup: React.ForwardRefExoticComponent<Omit<Omit<BaseProps<HTMLElement> & {
+        children: React.ReactNode | React.ReactNode[];
+        direction?: "horizontal" | "vertical" | {
+            narrow?: "horizontal" | "vertical" | undefined;
+            regular?: "horizontal" | "vertical" | undefined;
+            wide?: "horizontal" | "vertical" | undefined;
+        } | undefined;
+        gap?: "normal" | 8 | 4 | "condensed" | "none" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128 | {
+            narrow?: "normal" | 8 | 4 | "condensed" | "none" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128 | undefined;
+            regular?: "normal" | 8 | 4 | "condensed" | "none" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128 | undefined;
+            wide?: "normal" | 8 | 4 | "condensed" | "none" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128 | undefined;
+        } | undefined;
+        alignItems?: "center" | "flex-end" | "flex-start" | {
+            narrow?: "center" | "flex-end" | "flex-start" | undefined;
+            regular?: "center" | "flex-end" | "flex-start" | undefined;
+            wide?: "center" | "flex-end" | "flex-start" | undefined;
+        } | undefined;
+        padding?: "normal" | 8 | 4 | "condensed" | "none" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128 | {
+            narrow?: "normal" | 8 | 4 | "condensed" | "none" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128 | undefined;
+            regular?: "normal" | 8 | 4 | "condensed" | "none" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128 | undefined;
+            wide?: "normal" | 8 | 4 | "condensed" | "none" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128 | undefined;
+        } | undefined;
+        justifyContent?: "center" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start" | {
+            narrow?: "center" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start" | undefined;
+            regular?: "center" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start" | undefined;
+            wide?: "center" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start" | undefined;
+        } | undefined;
+        style?: React.CSSProperties | undefined;
+        flexWrap?: "nowrap" | "wrap" | {
+            narrow?: "nowrap" | "wrap" | undefined;
+            regular?: "nowrap" | "wrap" | undefined;
+            wide?: "nowrap" | "wrap" | undefined;
+        } | undefined;
+    } & BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<unknown>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+export {};

package/lib/BreakoutBanner/BreakoutBanner.visual.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/BreakoutBanner/index.d.ts

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

package/lib/Section/Section.d.ts

@@ -8,7 +8,6 @@ type ResponsiveMap<T> = {
     regular?: T;
     wide?: T;
 };
-type AnyString = string & NonNullable<unknown>;
 type BackgroundColors = (typeof SectionBackgroundColors)[number] | AnyString;
 type PaddingVariants = (typeof SectionPaddingVariants)[number];
 type ResponsiveBackgroundColorMap = ResponsiveMap<BackgroundColors>;