@primer/react-brand 0.33.0-rc.9daf7a8 → 0.33.0

package/lib/CTABanner/CTABanner.d.ts

@@ -23,20 +23,20 @@ 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?: "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;
+        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;
+        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" | undefined;
     } & React.HTMLAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;

package/lib/Hero/Hero.d.ts

@@ -58,7 +58,7 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
         children?: React.ReactNode;
     }, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
     Image: React.ForwardRefExoticComponent<(Omit<{
-        position?: "block-end" | "inline-end" | undefined;
+        position?: "inline-end" | "block-end" | undefined;
     } & React.ImgHTMLAttributes<HTMLImageElement> & BaseProps<HTMLImageElement> & {
         src: string;
         alt: string;
@@ -69,7 +69,7 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
         as?: "img" | undefined;
         srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, "srcSet"> | undefined;
     }, "ref"> | Omit<{
-        position?: "block-end" | "inline-end" | undefined;
+        position?: "inline-end" | "block-end" | undefined;
     } & React.ImgHTMLAttributes<HTMLImageElement> & BaseProps<HTMLImageElement> & {
         src: string;
         alt: string;

package/lib/IDE/IDE.d.ts

@@ -58,6 +58,8 @@ export type IDEEditorFile = {
     code: string | string[];
     highlighter?: 'hljs';
 };
+type IDEEditorTabIcon = Record<string, string>;
+export declare const IDEDefaultIconMap: IDEEditorTabIcon;
 export declare const IDEFileExtensions: string[];
 /**
  * Use IDE to display a decorative editor component
@@ -126,6 +128,10 @@ export declare const IDE: React.NamedExoticComponent<{
          * Test id for the IDE.
          */
         'data-testid'?: string | undefined;
+        /**
+         * Enable user customisation of the icons used in file tabs.
+         */
+        tabIcons?: IDEEditorTabIcon | undefined;
     } & BaseProps<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>>;
 };
 export {};

package/lib/Link/Link.d.ts

@@ -9,7 +9,7 @@ export type LinkProps = {
     /**
      * Position of the arrow.
      */
-    arrowDirection?: 'start' | 'end';
+    arrowDirection?: 'start' | 'end' | 'none';
     /**
      * Specify alternative link appearance
      */

package/lib/LogoSuite/LogoSuite.d.ts

@@ -36,10 +36,10 @@ 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?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | import("../").ResponsiveWeightMap | undefined;
+        weight?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | import("../").ResponsiveWeightMap | undefined;
         align?: "start" | "center" | "end" | undefined;
     } & {
-        as?: "p" | "span" | "div" | "strong" | "em" | undefined;
+        as?: "span" | "div" | "em" | "p" | "strong" | undefined;
     } & React.HTMLAttributes<HTMLParagraphElement> & {
         as?: "p" | undefined;
     } & {
@@ -48,10 +48,10 @@ 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?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | import("../").ResponsiveWeightMap | undefined;
+        weight?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | import("../").ResponsiveWeightMap | undefined;
         align?: "start" | "center" | "end" | undefined;
     } & {
-        as?: "p" | "span" | "div" | "strong" | "em" | undefined;
+        as?: "span" | "div" | "em" | "p" | "strong" | undefined;
     } & React.HTMLAttributes<HTMLSpanElement> & BaseProps<HTMLSpanElement> & {
         as?: "span" | undefined;
     } & {
@@ -60,10 +60,10 @@ 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?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | import("../").ResponsiveWeightMap | undefined;
+        weight?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | import("../").ResponsiveWeightMap | undefined;
         align?: "start" | "center" | "end" | undefined;
     } & {
-        as?: "p" | "span" | "div" | "strong" | "em" | undefined;
+        as?: "span" | "div" | "em" | "p" | "strong" | undefined;
     } & React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement> & {
         as?: "div" | undefined;
     } & {
@@ -72,10 +72,10 @@ 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?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | import("../").ResponsiveWeightMap | undefined;
+        weight?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | import("../").ResponsiveWeightMap | undefined;
         align?: "start" | "center" | "end" | undefined;
     } & {
-        as?: "p" | "span" | "div" | "strong" | "em" | undefined;
+        as?: "span" | "div" | "em" | "p" | "strong" | undefined;
     } & React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement> & {
         as?: "strong" | undefined;
     } & {
@@ -84,10 +84,10 @@ 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?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | import("../").ResponsiveWeightMap | undefined;
+        weight?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | import("../").ResponsiveWeightMap | undefined;
         align?: "start" | "center" | "end" | undefined;
     } & {
-        as?: "p" | "span" | "div" | "strong" | "em" | undefined;
+        as?: "span" | "div" | "em" | "p" | "strong" | undefined;
     } & React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement> & {
         as?: "em" | undefined;
     } & {

package/lib/Pagination/Pagination.d.ts

@@ -0,0 +1,37 @@
+import React, { PropsWithChildren } from 'react';
+import type { BaseProps } from '../component-helpers';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/pagination/colors-with-modes.css';
+type ResponsivePageVisibilityMap = {
+    narrow?: boolean;
+    regular?: boolean;
+    wide?: boolean;
+};
+export type PaginationProps = {
+    pageCount: number;
+    currentPage: number;
+    onPageChange?: (e: React.MouseEvent, n: number) => void;
+    hrefBuilder?: (n: number) => string;
+    marginPageCount?: number;
+    showPages?: boolean | ResponsivePageVisibilityMap;
+    surroundingPageCount?: number;
+    'data-testid'?: string;
+} & PropsWithChildren<BaseProps<HTMLElement>> & React.HTMLAttributes<HTMLElement>;
+/**
+ * Use Pagination to display a sequence of links that allow navigation to discrete, related pages.
+ * @see https://primer.style/brand/components/Pagination
+ */
+export declare const Pagination: React.MemoExoticComponent<({ id, children, className, pageCount, currentPage, onPageChange, hrefBuilder, marginPageCount, showPages, surroundingPageCount, "aria-label": ariaLabel, "data-testid": testId, ...rest }: PaginationProps) => JSX.Element>;
+type UsePaginationPagesParameters = {
+    pageCount: number;
+    currentPage: number;
+    onPageChange?: (e: React.MouseEvent, n: number) => void;
+    hrefBuilder: (n: number) => string;
+    marginPageCount: number;
+    showPages?: PaginationProps['showPages'];
+    surroundingPageCount: number;
+};
+export declare function usePaginationPages({ pageCount, currentPage, onPageChange, hrefBuilder, marginPageCount, showPages, surroundingPageCount, }: UsePaginationPagesParameters): JSX.Element[];
+export {};

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

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

package/lib/Pagination/index.d.ts

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

package/lib/Pagination/model.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { LinkProps } from '../Link';
+type PaginationModel = {
+    type: string;
+    num: number;
+} | {
+    type: string;
+    num: number;
+    selected: boolean;
+    precedesBreak: boolean;
+};
+type PageType = {
+    type: string;
+    num: number;
+    disabled?: boolean;
+    selected?: boolean;
+    precedesBreak?: boolean;
+};
+export declare function buildPaginationModel(pageCount: number, currentPage: number, showPages: boolean, marginPageCount: number, surroundingPageCount: number): PaginationModel[];
+export declare function buildComponentData(page: PageType, hrefBuilder: (n: number) => string, onClick: (e: React.MouseEvent) => void): {
+    props: LinkProps;
+    key: string;
+    content: string;
+};
+export {};

package/lib/Stack/Stack.d.ts

@@ -96,7 +96,7 @@ 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" | 8 | 4 | "none" | "condensed" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128 | ResponsiveSpacingMap | undefined;
+    gap?: "normal" | 8 | 4 | "condensed" | "none" | 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.
@@ -108,7 +108,7 @@ 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.
      */
-    padding?: "normal" | 8 | 4 | "none" | "condensed" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128 | ResponsiveSpacingMap | undefined;
+    padding?: "normal" | 8 | 4 | "condensed" | "none" | 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.

package/lib/SubNav/SubNav.d.ts

@@ -8,6 +8,11 @@ import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/compone
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/sub-nav/colors-with-modes.css';
 export type SubNavProps = {
     hasShadow?: boolean;
+    /**
+     * Allows the SubNav to be used at full width,
+     * removing any internal padding and guttering.
+     */
+    fullWidth?: boolean;
     'data-testid'?: string;
 } & PropsWithChildren<BaseProps<HTMLElement>>;
 type SubNavHeadingProps = {
@@ -40,11 +45,16 @@ declare function _SubNavAction({ children, href, variant, size, ...rest }: SubNa
  */
 export declare const SubNav: React.NamedExoticComponent<{
     hasShadow?: boolean | undefined;
+    /**
+     * Allows the SubNav to be used at full width,
+     * removing any internal padding and guttering.
+     */
+    fullWidth?: boolean | undefined;
     'data-testid'?: string | undefined;
 } & BaseProps<HTMLElement> & {
     children?: React.ReactNode;
 }> & {
-    readonly type: ({ id, children, className, "data-testid": testId, hasShadow }: SubNavProps) => JSX.Element;
+    readonly type: ({ id, children, className, "data-testid": testId, fullWidth, hasShadow }: SubNavProps) => JSX.Element;
 } & {
     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;