@primer/react-brand 0.29.0-rc.520f636 → 0.29.0-rc.a0d298d

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/EyebrowBanner/EyebrowBanner.d.ts

@@ -0,0 +1,45 @@
+import React, { PropsWithChildren } from 'react';
+import { Icon as IconProps } from '@primer/octicons-react';
+import type { BaseProps } from '../component-helpers';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/eyebrow-banner.css';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/colors-with-modes.css';
+export type EyebrowBannerProps = BaseProps<HTMLAnchorElement> & {
+    href: string;
+} & React.HTMLAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement>;
+type EyebrowBannerHeadingProps = PropsWithChildren<BaseProps<HTMLSpanElement>>;
+type EyebrowBannerSubHeadingProps = PropsWithChildren<BaseProps<HTMLSpanElement>>;
+export declare const EyebrowBannerIconColors: readonly ["default", "blue", "coral", "green", "gray", "indigo", "lemon", "lime", "orange", "pink", "purple", "red", "teal", "yellow"];
+export declare const defaultEyebrowBannerIconColor: "default";
+type EyebrowBannerVisual = BaseProps<HTMLSpanElement> & {
+    icon?: React.ReactNode | IconProps;
+    color?: (typeof EyebrowBannerIconColors)[number];
+    hasBackground?: boolean;
+    ['aria-hidden']?: boolean;
+    children?: React.ReactNode;
+};
+declare const EyebrowBannerVisual: React.ForwardRefExoticComponent<Omit<EyebrowBannerVisual, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const EyebrowBannerLabelColors: readonly ["blue-purple", "green-blue", "pink-blue", "purple-red", "red-orange", "default", "blue", "coral", "green", "gray", "indigo", "lemon", "lime", "orange", "pink", "purple", "red", "teal", "yellow"];
+type EyebrowBannerLabel = BaseProps<HTMLSpanElement> & {
+    /**
+     * The color variations available in EyebrowBanner.Label
+     */
+    color?: (typeof EyebrowBannerLabelColors)[number];
+};
+declare const EyebrowBannerLabel: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<EyebrowBannerLabel>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * Use EyebrowBanner to display a short message at the top of a page.
+ * @see https://primer.style/brand/components/EyebrowBanner
+ */
+export declare const EyebrowBanner: React.ForwardRefExoticComponent<Omit<EyebrowBannerProps, "ref"> & React.RefAttributes<HTMLAnchorElement>> & {
+    Visual: React.ForwardRefExoticComponent<Omit<EyebrowBannerVisual, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    Label: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<EyebrowBannerLabel>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    Heading: React.ForwardRefExoticComponent<Omit<EyebrowBannerHeadingProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    SubHeading: React.ForwardRefExoticComponent<Omit<EyebrowBannerSubHeadingProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    testIds: {
+        root: string;
+    };
+};
+export {};

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

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

package/lib/EyebrowBanner/index.d.ts

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

package/lib/Hero/Hero.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { ButtonBaseProps } from '../Button';
 import { HeadingProps } from '../Heading';
 import { TextSizes, TextWeightVariants, ResponsiveWeightMap } from '../Text';
@@ -15,6 +15,7 @@ type HeroDescriptionProps = {
     size?: (typeof TextSizes)[number];
     weight?: TextWeightVariants | ResponsiveWeightMap;
 } & BaseProps<HTMLParagraphElement>;
+type HeroEyebrowProps = PropsWithChildren<BaseProps<HTMLDivElement>>;
 type HeroLabelProps = LabelProps & BaseProps<HTMLSpanElement>;
 export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<HeroProps>, "ref"> & React.RefAttributes<HTMLElement>> & {
     Heading: React.ForwardRefExoticComponent<Omit<HeroHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
@@ -77,5 +78,6 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
         srcSet?: undefined;
     }, "ref">) & React.RefAttributes<HTMLImageElement>>;
     Label: React.ForwardRefExoticComponent<Omit<HeroLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    Eyebrow: React.ForwardRefExoticComponent<Omit<HeroEyebrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 };
 export {};

package/lib/InlineLink/InlineLink.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import { TextSizes } from '../';
 import type { BaseProps } from '../component-helpers';
 /**
  * Design tokens
@@ -11,10 +10,6 @@ export type InlineLinkProps = BaseProps<HTMLAnchorElement> & {
      * Specify the links destination
      */
     href: string;
-    /**
-     * Specify the text size
-     */
-    size?: (typeof TextSizes)[number];
 } & React.AnchorHTMLAttributes<HTMLAnchorElement> & React.HTMLAttributes<HTMLAnchorElement>;
 /**
  * A HTML anchor link component that renders inline with adjacent text.

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;