@primer/react-brand 0.21.1-rc.ab7bd87 → 0.22.0-rc.9fb73f5

package/lib/CTABanner/CTABanner.d.ts

@@ -23,10 +23,10 @@ export declare const CTABanner: React.ForwardRefExoticComponent<Omit<BaseProps<H
     } & {
         as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
         size?: "1" | "2" | "3" | "4" | "5" | "6" | undefined;
-        weight?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | {
-            narrow?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | undefined;
-            regular?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | undefined;
-            wide?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | undefined;
+        weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | {
+            narrow?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | undefined;
+            regular?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | undefined;
+            wide?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | undefined;
         } | undefined;
         stretch?: "normal" | "condensed" | "expanded" | {
             narrow?: "normal" | "condensed" | "expanded" | undefined;

package/lib/Grid/Grid.d.ts

@@ -23,6 +23,10 @@ export type GridProps<T extends keyof JSX.IntrinsicElements = 'div'> = React.HTM
      * Visual aid to help with alignment.
      */
     enableOverlay?: boolean;
+    /**
+     * Fills the width of the parent container and removes the max-width.
+     */
+    fullWidth?: boolean;
     /**
      * Test id for the root element.
      */
@@ -52,6 +56,10 @@ export declare const Grid: React.NamedExoticComponent<React.HTMLAttributes<"div"
      * Visual aid to help with alignment.
      */
     enableOverlay?: boolean | undefined;
+    /**
+     * Fills the width of the parent container and removes the max-width.
+     */
+    fullWidth?: boolean | undefined;
     /**
      * Test id for the root element.
      */
@@ -59,7 +67,7 @@ export declare const Grid: React.NamedExoticComponent<React.HTMLAttributes<"div"
 } & BaseProps<HTMLDivElement> & {
     children?: React.ReactNode;
 }> & {
-    readonly type: ({ className, children, as, enableOverlay, ["data-testid"]: testId, ...rest }: PropsWithChildren<GridProps>) => JSX.Element;
+    readonly type: ({ className, children, as, fullWidth, enableOverlay, ["data-testid"]: testId, ...rest }: PropsWithChildren<GridProps>) => JSX.Element;
 } & {
     Column: React.MemoExoticComponent<({ children, as, span, start, className, ...rest }: PropsWithChildren<GridColumnProps>) => JSX.Element>;
     testIds: {

package/lib/Hero/Hero.d.ts

@@ -3,6 +3,7 @@ import { ButtonBaseProps } from '../Button';
 import { HeadingProps } from '../Heading';
 import { TextSizes, TextWeightVariants, ResponsiveWeightMap } from '../Text';
 import { LabelProps } from '../Label';
+import { ImageProps } from '../Image';
 import type { BaseProps } from '../component-helpers';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/hero/base.css';
 export type HeroProps = BaseProps<HTMLElement> & {
@@ -14,6 +15,10 @@ type HeroDescriptionProps = {
     weight?: TextWeightVariants | ResponsiveWeightMap;
 } & BaseProps<HTMLParagraphElement>;
 declare function HeroDescription({ size, weight, children }: PropsWithChildren<HeroDescriptionProps>): JSX.Element;
+type HeroImageProps = {
+    position?: 'inline-end' | 'block-end';
+} & ImageProps & BaseProps<HTMLImageElement>;
+declare function HeroImage({ position, className, ...rest }: PropsWithChildren<HeroImageProps>): JSX.Element;
 type HeroLabelProps = LabelProps & BaseProps<HTMLSpanElement>;
 declare function HeroLabel({ children, ...rest }: PropsWithChildren<HeroLabelProps>): JSX.Element;
 export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<HeroProps>, "ref"> & React.RefAttributes<HTMLElement>> & {
@@ -49,6 +54,7 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
     } & {
         children?: React.ReactNode;
     }, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+    Image: typeof HeroImage;
     Label: typeof HeroLabel;
 };
 export {};

package/lib/LogoSuite/LogoSuite.d.ts

@@ -0,0 +1,111 @@
+import React, { PropsWithChildren } from 'react';
+import type { BaseProps } from '../component-helpers';
+import { HeadingProps } from '../';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/logosuite/colors-with-modes.css';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/logosuite/base.css';
+type LogoSuiteProps = {
+    /**
+     * The horizontal alignment of the LogoSuite.
+     */
+    align?: 'start' | 'center' | 'justify';
+    /**
+     * Whether to render a divider immediately after the LogoSuite.
+     */
+    hasDivider?: boolean;
+    /**
+     * Test id for the root LogoSuite element.
+     */
+    'data-testid'?: string;
+} & BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>;
+type LogoSuiteHeadingProps = BaseProps<HTMLHeadingElement> & HeadingProps & {
+    /**
+     * Whether to visually hide the heading.
+     */
+    visuallyHidden?: boolean;
+};
+/**
+ * Use LogoSuite to present a list 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>) => JSX.Element) & {
+    Heading: React.ForwardRefExoticComponent<Omit<LogoSuiteHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<(Omit<BaseProps<HTMLParagraphElement> & {
+        size?: "700" | "600" | "500" | "400" | "300" | "200" | "100" | undefined;
+        variant?: "default" | "muted" | undefined;
+        weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | import("../").ResponsiveWeightMap | undefined;
+        align?: "start" | "center" | "end" | undefined;
+    } & {
+        as?: "span" | "div" | "em" | "p" | "strong" | undefined;
+    } & React.HTMLAttributes<HTMLParagraphElement> & {
+        as?: "p" | undefined;
+    } & {
+        children: React.ReactNode | React.ReactNode[];
+    }, "ref"> | Omit<BaseProps<HTMLParagraphElement> & {
+        size?: "700" | "600" | "500" | "400" | "300" | "200" | "100" | undefined;
+        variant?: "default" | "muted" | undefined;
+        weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | import("../").ResponsiveWeightMap | undefined;
+        align?: "start" | "center" | "end" | undefined;
+    } & {
+        as?: "span" | "div" | "em" | "p" | "strong" | undefined;
+    } & React.HTMLAttributes<HTMLSpanElement> & BaseProps<HTMLSpanElement> & {
+        as?: "span" | undefined;
+    } & {
+        children: React.ReactNode | React.ReactNode[];
+    }, "ref"> | Omit<BaseProps<HTMLParagraphElement> & {
+        size?: "700" | "600" | "500" | "400" | "300" | "200" | "100" | undefined;
+        variant?: "default" | "muted" | undefined;
+        weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | import("../").ResponsiveWeightMap | undefined;
+        align?: "start" | "center" | "end" | undefined;
+    } & {
+        as?: "span" | "div" | "em" | "p" | "strong" | undefined;
+    } & React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement> & {
+        as?: "div" | undefined;
+    } & {
+        children: React.ReactNode | React.ReactNode[];
+    }, "ref"> | Omit<BaseProps<HTMLParagraphElement> & {
+        size?: "700" | "600" | "500" | "400" | "300" | "200" | "100" | undefined;
+        variant?: "default" | "muted" | undefined;
+        weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | import("../").ResponsiveWeightMap | undefined;
+        align?: "start" | "center" | "end" | undefined;
+    } & {
+        as?: "span" | "div" | "em" | "p" | "strong" | undefined;
+    } & React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement> & {
+        as?: "strong" | undefined;
+    } & {
+        children: React.ReactNode | React.ReactNode[];
+    }, "ref"> | Omit<BaseProps<HTMLParagraphElement> & {
+        size?: "700" | "600" | "500" | "400" | "300" | "200" | "100" | undefined;
+        variant?: "default" | "muted" | undefined;
+        weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | import("../").ResponsiveWeightMap | undefined;
+        align?: "start" | "center" | "end" | undefined;
+    } & {
+        as?: "span" | "div" | "em" | "p" | "strong" | undefined;
+    } & React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement> & {
+        as?: "em" | undefined;
+    } & {
+        children: React.ReactNode | React.ReactNode[];
+    }, "ref">) & React.RefAttributes<HTMLParagraphElement>>;
+    Logobar: React.ForwardRefExoticComponent<Omit<BaseProps<HTMLDivElement> & {
+        children: React.ReactNode | React.ReactNode[];
+        /**
+         * Enables an optional marquee effect
+         */
+        marquee?: boolean | undefined;
+        /**
+         * The speed of the marquee effect
+         */
+        marqueeSpeed?: "normal" | "slow" | undefined;
+        /**
+         * The stylistic variant of the LogoBar.
+         */
+        variant?: "muted" | "emphasis" | undefined;
+    }, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    testIds: {
+        root: string;
+        readonly marqueeGroup: string;
+    };
+};
+export {};

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

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

package/lib/LogoSuite/index.d.ts

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

package/lib/Stack/Stack.d.ts

@@ -96,25 +96,25 @@ export declare const Stack: React.ForwardRefExoticComponent<Omit<BaseProps<HTMLE
      * A string value will be applied to all viewports.
      * An object can be used to define different values for different viewports.
      */
-    gap?: "normal" | "condensed" | "none" | 4 | 24 | 16 | "spacious" | 8 | 12 | 20 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128 | ResponsiveSpacingMap | undefined;
+    gap?: "normal" | "condensed" | "none" | 4 | 8 | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128 | ResponsiveSpacingMap | undefined;
     /**
      * Applies vertical alignment to child elements relative to the Stack, using the align-items CSS property.
      * A string value will be applied to all viewports.
      * An object can be used to define different values for different viewports.
      */
-    alignItems?: "center" | "flex-end" | "flex-start" | ResponsiveAlignItemsMap | undefined;
+    alignItems?: "center" | "flex-start" | "flex-end" | ResponsiveAlignItemsMap | undefined;
     /**
      * Defines the padding CSS property on the parent Stack.
      * A string value will be applied to all viewports.
      * An object can be used to define different values for different viewports.
      */
-    padding?: "normal" | "condensed" | "none" | 4 | 24 | 16 | "spacious" | 8 | 12 | 20 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128 | ResponsiveSpacingMap | undefined;
+    padding?: "normal" | "condensed" | "none" | 4 | 8 | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128 | ResponsiveSpacingMap | undefined;
     /**
      * Applies horizontal alignment to child elements relative to the Stack, using the justify-content CSS property.
      * A string value will be applied to all viewports.
      * An object can be used to define different values for different viewports.
      */
-    justifyContent?: "center" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start" | ResponsiveJustifyContentMap | undefined;
+    justifyContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | ResponsiveJustifyContentMap | undefined;
     /**
      * Forward inline styles
      */
@@ -122,6 +122,6 @@ export declare const Stack: React.ForwardRefExoticComponent<Omit<BaseProps<HTMLE
     /**
      * Applies flex-wrap to the Stack, using the flex-wrap CSS property.
      */
-    flexWrap?: "nowrap" | "wrap" | ResponsiveFlexWrapMap | undefined;
+    flexWrap?: "wrap" | "nowrap" | ResponsiveFlexWrapMap | undefined;
 } & BaseProps<HTMLDivElement>, "ref"> & React.RefAttributes<unknown>>;
 export {};