@primer/react-brand 0.32.1-rc.ada345a → 0.32.1-rc.ee1ab50

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?: "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;
+        weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | {
+            narrow?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | undefined;
+            regular?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | undefined;
+            wide?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | undefined;
         } | undefined;
         stretch?: "normal" | "condensed" | "expanded" | {
             narrow?: "normal" | "condensed" | "expanded" | undefined;

package/lib/Hero/Hero.d.ts

@@ -9,6 +9,13 @@ export type HeroProps = BaseProps<HTMLElement> & {
     align?: 'start' | 'center';
     imageContainerClassName?: string;
     imageContainerStyle?: React.CSSProperties;
+    /**
+     * 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;
 };
 type HeroHeadingProps = Omit<HeadingProps, 'as'>;
 type HeroDescriptionProps = {

package/lib/LogoSuite/LogoSuite.d.ts

@@ -36,7 +36,7 @@ export declare const LogoSuite: (({ align, children, className, hasDivider, "dat
         font?: "mona-sans" | "hubot-sans" | undefined;
         size?: "700" | "600" | "500" | "400" | "300" | "200" | "100" | undefined;
         variant?: "default" | "muted" | undefined;
-        weight?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | import("../").ResponsiveWeightMap | undefined;
+        weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | import("../").ResponsiveWeightMap | undefined;
         align?: "start" | "center" | "end" | undefined;
     } & {
         as?: "span" | "div" | "em" | "p" | "strong" | undefined;
@@ -48,7 +48,7 @@ export declare const LogoSuite: (({ align, children, className, hasDivider, "dat
         font?: "mona-sans" | "hubot-sans" | undefined;
         size?: "700" | "600" | "500" | "400" | "300" | "200" | "100" | undefined;
         variant?: "default" | "muted" | undefined;
-        weight?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | import("../").ResponsiveWeightMap | undefined;
+        weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | import("../").ResponsiveWeightMap | undefined;
         align?: "start" | "center" | "end" | undefined;
     } & {
         as?: "span" | "div" | "em" | "p" | "strong" | undefined;
@@ -60,7 +60,7 @@ export declare const LogoSuite: (({ align, children, className, hasDivider, "dat
         font?: "mona-sans" | "hubot-sans" | undefined;
         size?: "700" | "600" | "500" | "400" | "300" | "200" | "100" | undefined;
         variant?: "default" | "muted" | undefined;
-        weight?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | import("../").ResponsiveWeightMap | undefined;
+        weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | import("../").ResponsiveWeightMap | undefined;
         align?: "start" | "center" | "end" | undefined;
     } & {
         as?: "span" | "div" | "em" | "p" | "strong" | undefined;
@@ -72,7 +72,7 @@ export declare const LogoSuite: (({ align, children, className, hasDivider, "dat
         font?: "mona-sans" | "hubot-sans" | undefined;
         size?: "700" | "600" | "500" | "400" | "300" | "200" | "100" | undefined;
         variant?: "default" | "muted" | undefined;
-        weight?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | import("../").ResponsiveWeightMap | undefined;
+        weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | import("../").ResponsiveWeightMap | undefined;
         align?: "start" | "center" | "end" | undefined;
     } & {
         as?: "span" | "div" | "em" | "p" | "strong" | undefined;
@@ -84,7 +84,7 @@ export declare const LogoSuite: (({ align, children, className, hasDivider, "dat
         font?: "mona-sans" | "hubot-sans" | undefined;
         size?: "700" | "600" | "500" | "400" | "300" | "200" | "100" | undefined;
         variant?: "default" | "muted" | undefined;
-        weight?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | import("../").ResponsiveWeightMap | undefined;
+        weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | import("../").ResponsiveWeightMap | undefined;
         align?: "start" | "center" | "end" | undefined;
     } & {
         as?: "span" | "div" | "em" | "p" | "strong" | undefined;

package/lib/SubNav/SubNav.d.ts

@@ -1,8 +1,10 @@
 import React, { PropsWithChildren } from 'react';
+import { ButtonSizes, ButtonVariants } from '..';
 import type { BaseProps } from '../component-helpers';
 /**
  * Design tokens
  */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/sub-nav/base.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/sub-nav/colors-with-modes.css';
 export type SubNavProps = {
     hasShadow?: boolean;
@@ -16,6 +18,22 @@ type SubNavLinkProps = {
     href: string;
     'data-testid'?: string;
 } & PropsWithChildren<React.HTMLProps<HTMLAnchorElement>> & BaseProps<HTMLAnchorElement>;
+declare function _SubMenu({ children, className, ...props }: PropsWithChildren<BaseProps<HTMLDivElement>>): JSX.Element;
+type SubNavActionProps = {
+    /**
+     * Required path or location for the action button to link to.
+     */
+    href: string;
+    /**
+     * Optional sizes for the button.
+     */
+    size?: (typeof ButtonSizes)[number];
+    /**
+     * Optional sizes for the button.
+     */
+    variant?: (typeof ButtonVariants)[number];
+} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>;
+declare function _SubNavAction({ children, href, variant, size, ...rest }: SubNavActionProps): JSX.Element;
 /**
  * Use SubNav to display a secondary navigation beneath a primary header.
  * @see https://primer.style/brand/components/SubNav
@@ -30,12 +48,15 @@ export declare const SubNav: React.NamedExoticComponent<{
 } & {
     Heading: ({ href, children, className, "data-testid": testID, ...props }: SubNavHeadingProps) => JSX.Element;
     Link: ({ children, href, "aria-current": ariaCurrent, "data-testid": testId, className, ...props }: SubNavLinkProps) => JSX.Element;
+    Action: typeof _SubNavAction;
+    SubMenu: typeof _SubMenu;
     testIds: {
         root: string;
         readonly button: string;
         readonly overlay: string;
         readonly link: string;
         readonly heading: string;
+        readonly action: string;
     };
 };
 export {};