@primer/react-brand 0.33.0-rc.009adf5 → 0.33.0-rc.52afddb

package/lib/IDE/IDE.d.ts

@@ -0,0 +1,137 @@
+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';
+};
+type IDEEditorTabIcon = Record<string, string>;
+export declare const IDEDefaultIconMap: IDEEditorTabIcon;
+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;
+        /**
+         * Enable user customisation of the icons used in file tabs.
+         */
+        tabIcons?: IDEEditorTabIcon | 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/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/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/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;