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

package/lib/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { BaseProps } from '../component-helpers';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/breadcrumbs/colors-with-modes.css';
+export declare const BreadcrumbVariants: readonly ["default", "accent"];
+export type BreadcrumbsProps = {
+    variant?: (typeof BreadcrumbVariants)[number];
+} & BaseProps<HTMLElement> & React.HTMLAttributes<HTMLElement>;
+type ItemProps = {
+    href: string;
+    selected?: boolean;
+} & BaseProps<HTMLAnchorElement> & React.HTMLAttributes<HTMLAnchorElement>;
+/**
+ * Use Breadcrumbs to display the current location within a navigational hierarchy.
+ * @see https://primer.style/brand/components/Breadcrumbs
+ */
+export declare const Breadcrumbs: React.ForwardRefExoticComponent<Omit<BreadcrumbsProps, "ref"> & React.RefAttributes<HTMLElement>> & {
+    Item: React.ForwardRefExoticComponent<Omit<ItemProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+};
+export {};

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

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

package/lib/Breadcrumbs/index.d.ts

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

package/lib/CTABanner/CTABanner.d.ts

@@ -33,10 +33,10 @@ export declare const CTABanner: React.ForwardRefExoticComponent<Omit<BaseProps<H
             regular?: "normal" | "condensed" | "expanded" | undefined;
             wide?: "normal" | "condensed" | "expanded" | undefined;
         } | undefined;
-        letterSpacing?: "normal" | "condensed" | "none" | {
-            narrow?: "normal" | "condensed" | "none" | undefined;
-            regular?: "normal" | "condensed" | "none" | undefined;
-            wide?: "normal" | "condensed" | "none" | 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" | 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?: "inline-end" | "block-end" | undefined;
+        position?: "block-end" | "inline-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?: "inline-end" | "block-end" | undefined;
+        position?: "block-end" | "inline-end" | undefined;
     } & React.ImgHTMLAttributes<HTMLImageElement> & BaseProps<HTMLImageElement> & {
         src: string;
         alt: string;

package/lib/IDE/IDE.d.ts

@@ -0,0 +1,131 @@
+import React, { PropsWithChildren } from 'react';
+import type { BaseProps } from '../component-helpers';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/ide/base.css';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/ide/colors-with-modes.css';
+export type IDEProps = {
+    /**
+     * Alternative description of the IDE for users of assistive technologies.
+     * IDE is considered a decorative element, so this description is important
+     * for accurately describing what the user is being presented.
+     * This text will be visually hidden.
+     */
+    alternativeText: string;
+    /**
+     * Test id for the IDE
+     */
+    'data-testid'?: string;
+    /**
+     * The optionally configurable height of the IDE
+     */
+    height?: number;
+    /**
+     * Alternative presentation of the IDE
+     */
+    variant?: 'default' | 'glass';
+} & BaseProps<HTMLDivElement>;
+type IDEChatProps = {
+    /**
+     * The chat script
+     */
+    script: IDEChatMessage[];
+    /**
+     * The delay between messages
+     */
+    animationDelay?: number;
+    /**
+     * Test id for the IDE
+     */
+    'data-testid'?: string;
+} & BaseProps<HTMLElement>;
+type MessageRole = 'user' | 'assistant';
+export type IDEChatMessage = {
+    role: MessageRole;
+    handle: string;
+    avatar: string;
+    message: string;
+    codeSnippet?: string;
+    highlighter?: 'hljs';
+};
+export type IDEEditorFile = {
+    name: string;
+    /**
+     * Controls line at which the Copilot suggestion begins
+     */
+    suggestedLineStart?: number;
+    code: string | string[];
+    highlighter?: 'hljs';
+};
+export declare const IDEFileExtensions: string[];
+/**
+ * Use IDE to display a decorative editor component
+ * @see https://primer.style/brand/components/IDE
+ */
+export declare const IDE: React.NamedExoticComponent<{
+    /**
+     * Alternative description of the IDE for users of assistive technologies.
+     * IDE is considered a decorative element, so this description is important
+     * for accurately describing what the user is being presented.
+     * This text will be visually hidden.
+     */
+    alternativeText: string;
+    /**
+     * Test id for the IDE
+     */
+    'data-testid'?: string | undefined;
+    /**
+     * The optionally configurable height of the IDE
+     */
+    height?: number | undefined;
+    /**
+     * Alternative presentation of the IDE
+     */
+    variant?: "default" | "glass" | undefined;
+} & BaseProps<HTMLDivElement> & {
+    children?: React.ReactNode;
+}> & {
+    readonly type: ({ alternativeText, children, className, "data-testid": testId, height, variant, ...rest }: PropsWithChildren<IDEProps>) => JSX.Element;
+} & {
+    testIds: {
+        root: string;
+        readonly chat: string;
+        readonly editor: string;
+        readonly editorContent: string;
+        readonly editorTabs: string;
+        readonly altText: string;
+    };
+    Chat: React.MemoExoticComponent<({ "data-testid": testId, script, animationDelay, ...rest }: IDEChatProps) => JSX.Element>;
+    Editor: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<{
+        /**
+         * The index of the active tab.
+         */
+        activeTab?: number | undefined;
+        /**
+         * An array of IDE editor files.
+         */
+        files: IDEEditorFile[];
+        /**
+         * Determines whether line numbers should be shown in the editor.
+         */
+        showLineNumbers?: boolean | undefined;
+        /**
+         * Controls the size of the editor text.
+         */
+        size?: "medium" | "small" | "large" | undefined;
+        /**
+         * Used for triggering animation externally.
+         */
+        triggerAnimation?: boolean | undefined;
+        /**
+         * Determines whether the replay button should be shown.
+         */
+        showReplayButton?: boolean | undefined;
+        /**
+         * Test id for the IDE.
+         */
+        'data-testid'?: string | undefined;
+    } & BaseProps<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>>;
+};
+export {};

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

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

package/lib/IDE/fixtures/content.d.ts

@@ -0,0 +1,5 @@
+import { IDEChatMessage, IDEEditorFile } from '../IDE';
+export declare const chatScript: IDEChatMessage[];
+export declare const defaultFiles: IDEEditorFile[];
+export declare const singleFile: IDEEditorFile[];
+export declare const files: IDEEditorFile[];

package/lib/IDE/index.d.ts

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

package/lib/LogoSuite/LogoSuite.d.ts

@@ -39,7 +39,7 @@ export declare const LogoSuite: (({ align, children, className, hasDivider, "dat
         weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | import("../").ResponsiveWeightMap | undefined;
         align?: "start" | "center" | "end" | undefined;
     } & {
-        as?: "span" | "div" | "em" | "p" | "strong" | undefined;
+        as?: "p" | "span" | "div" | "strong" | "em" | undefined;
     } & React.HTMLAttributes<HTMLParagraphElement> & {
         as?: "p" | undefined;
     } & {
@@ -51,7 +51,7 @@ export declare const LogoSuite: (({ align, children, className, hasDivider, "dat
         weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | import("../").ResponsiveWeightMap | undefined;
         align?: "start" | "center" | "end" | undefined;
     } & {
-        as?: "span" | "div" | "em" | "p" | "strong" | undefined;
+        as?: "p" | "span" | "div" | "strong" | "em" | undefined;
     } & React.HTMLAttributes<HTMLSpanElement> & BaseProps<HTMLSpanElement> & {
         as?: "span" | undefined;
     } & {
@@ -63,7 +63,7 @@ export declare const LogoSuite: (({ align, children, className, hasDivider, "dat
         weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | import("../").ResponsiveWeightMap | undefined;
         align?: "start" | "center" | "end" | undefined;
     } & {
-        as?: "span" | "div" | "em" | "p" | "strong" | undefined;
+        as?: "p" | "span" | "div" | "strong" | "em" | undefined;
     } & React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement> & {
         as?: "div" | undefined;
     } & {
@@ -75,7 +75,7 @@ export declare const LogoSuite: (({ align, children, className, hasDivider, "dat
         weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | import("../").ResponsiveWeightMap | undefined;
         align?: "start" | "center" | "end" | undefined;
     } & {
-        as?: "span" | "div" | "em" | "p" | "strong" | undefined;
+        as?: "p" | "span" | "div" | "strong" | "em" | undefined;
     } & React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement> & {
         as?: "strong" | undefined;
     } & {
@@ -87,7 +87,7 @@ export declare const LogoSuite: (({ align, children, className, hasDivider, "dat
         weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | import("../").ResponsiveWeightMap | undefined;
         align?: "start" | "center" | "end" | undefined;
     } & {
-        as?: "span" | "div" | "em" | "p" | "strong" | undefined;
+        as?: "p" | "span" | "div" | "strong" | "em" | undefined;
     } & React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement> & {
         as?: "em" | undefined;
     } & {

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