@primer/react-brand 0.36.0-rc.e96f6dcf → 0.36.0

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" | "none" | "condensed" | {
+            narrow?: "normal" | "none" | "condensed" | undefined;
+            regular?: "normal" | "none" | "condensed" | undefined;
+            wide?: "normal" | "none" | "condensed" | 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 | "none" | "condensed" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128 | {
+            narrow?: "normal" | 8 | 4 | "none" | "condensed" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128 | undefined;
+            regular?: "normal" | 8 | 4 | "none" | "condensed" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128 | undefined;
+            wide?: "normal" | 8 | 4 | "none" | "condensed" | 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 | "none" | "condensed" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128 | {
+            narrow?: "normal" | 8 | 4 | "none" | "condensed" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128 | undefined;
+            regular?: "normal" | 8 | 4 | "none" | "condensed" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128 | undefined;
+            wide?: "normal" | 8 | 4 | "none" | "condensed" | 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

@@ -0,0 +1,65 @@
+import React, { PropsWithChildren } from 'react';
+import type { BaseProps } from '../component-helpers';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/section/section.css';
+export declare const SectionPaddingVariants: readonly ["none", "condensed", "normal", "spacious"];
+export declare const SectionBackgroundColors: readonly ["default", "subtle"];
+type ResponsiveMap<T> = {
+    narrow?: T;
+    regular?: T;
+    wide?: T;
+};
+type BackgroundColors = (typeof SectionBackgroundColors)[number] | AnyString;
+type PaddingVariants = (typeof SectionPaddingVariants)[number];
+type ResponsiveBackgroundColorMap = ResponsiveMap<BackgroundColors>;
+type ResponsiveBackgroundImagePositionMap = ResponsiveMap<string | string[]>;
+type ResponsiveBackgroundImageSizeMap = ResponsiveMap<string | string[]>;
+type ResponsiveBackgroundImageSrcMap = ResponsiveMap<string | string[]>;
+type ResponsivePaddingVariantsMap = ResponsiveMap<PaddingVariants>;
+type SectionProps = {
+    /**
+     * The HTML element used to render the section.
+     */
+    as?: 'section' | 'div';
+    /**
+     * The padding applied to the start of the section.
+     */
+    paddingBlockStart?: PaddingVariants | ResponsivePaddingVariantsMap;
+    /**
+     * The padding applied to the end of the section.
+     */
+    paddingBlockEnd?: PaddingVariants | ResponsivePaddingVariantsMap;
+    /**
+     * The system-level or custom background color of the section.
+     */
+    backgroundColor?: BackgroundColors | ResponsiveBackgroundColorMap;
+    /**
+     * The background image of the section.
+     */
+    backgroundImageSrc?: string | string[] | ResponsiveBackgroundImageSrcMap;
+    /**
+     * The position of the background image.
+     */
+    backgroundImagePosition?: string | string[] | ResponsiveBackgroundImagePositionMap;
+    /**
+     * The size of the background image.
+     */
+    backgroundImageSize?: string | string[] | ResponsiveBackgroundImageSizeMap;
+    /**
+     * Makes the content of the section span the full width of its parent container.
+     */
+    fullWidth?: boolean;
+    /**
+     * Adds rounded corners to the top of the section.
+     */
+    rounded?: boolean;
+    /**
+     * Forward inline styles
+     */
+    style?: React.CSSProperties;
+    /**
+     * Optional attirbute for testing
+     */
+    ['data-testid']?: string;
+} & PropsWithChildren<BaseProps<HTMLDivElement>>;
+export declare const Section: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<SectionProps>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};

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

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

package/lib/Section/index.d.ts

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