@primer/components

import React from 'react'; import renderer from 'react-test-renderer'; import enzyme from 'enzyme'; declare type ComputedStyles = Record<string, string | Record<string, string>>; export declare const COMPONENT_DISPLAY_NAME_REGEX: RegExp; export declare function mount(component: React.ReactElement): enzyme.ReactWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>; declare global { namespace jest { interface Matchers<R> { toImplementSxBehavior: () => boolean; toSetExports: (exports: Record<string, string>) => boolean; } } } /** * Render the component (a React.createElement() or JSX expression) * into its intermediate object representation with 'type', * 'props', and 'children' keys * * The returned object can be matched with expect().toEqual(), e.g. * * ```js * expect(render(<Foo />)).toEqual(render(<div foo='bar' />)) * ``` */ export declare function render(component: React.ReactElement, theme?: { animation: { easeOutCubic: string; }; borderWidths: (string | number)[]; breakpoints: string[]; fonts: { normal: any; mono: any; }; fontSizes: string[]; fontWeights: { light: number; normal: number; semibold: number; bold: number; }; lineHeights: { condensedUltra: number; condensed: number; default: number; }; radii: string[]; sizes: { small: string; medium: string; large: string; xlarge: string; }; space: string[]; colorSchemes: Record<"light" | "light_protanopia" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_protanopia", Record<"colors" | "shadows", Partial<{ auto: { black: string; white: string; gray: string[]; blue: string[]; green: string[]; yellow: string[]; orange: string[]; red: string[]; purple: string[]; pink: string[]; }; text: { primary: string; secondary: string; tertiary: string; placeholder: string; disabled: string; inverse: string; link: string; danger: string; success: string; warning: string; white: string; }; icon: { primary: string; secondary: string; tertiary: string; info: string; danger: string; success: string; warning: string; }; border: { primary: string; secondary: string; tertiary: string; overlay: string; inverse: string; info: string; danger: string; success: string; warning: string; default: string; muted: string; subtle: string; }; bg: { canvas: string; canvasMobile: string; canvasInverse: string; canvasInset: string; primary: string; secondary: string; tertiary: string; overlay: string; backdrop: string; info: string; infoInverse: string; danger: string; dangerInverse: string; success: string; successInverse: string; warning: string; warningInverse: string; }; shadow: { highlight: string; inset: string; small: string; medium: string; large: string; extraLarge: string; }; state: { hover: { primaryBg: string; primaryBorder: string; primaryText: string; primaryIcon: string; secondaryBg: string; secondaryBorder: string; }; selected: { primaryBg: string; primaryBorder: string; primaryText: string; primaryIcon: string; }; focus: { border: string; shadow: string; }; }; fade: { fg10: string; fg15: string; fg30: string; fg50: string; fg70: string; fg85: string; black10: string; black15: string; black30: string; black50: string; black70: string; black85: string; white10: string; white15: string; white30: string; white50: string; white70: string; white85: string; }; alert: { info: { text: string; icon: string; bg: string; border: string; }; warn: { text: string; icon: string; bg: string; border: string; }; error: { text: string; icon: string; bg: string; border: string; }; success: { text: string; icon: string; bg: string; border: string; }; }; autocomplete: { shadow: string; rowBorder: string; }; blankslate: { icon: string; }; counter: { text: string; bg: string; primary: { text: string; bg: string; }; secondary: { text: string; bg: string; }; }; box: { blueBorder: string; rowYellowBg: string; rowBlueBg: string; headerBlueBg: string; headerBlueBorder: string; borderInfo: string; bgInfo: string; borderWarning: string; bgWarning: string; }; branchName: { text: string; icon: string; bg: string; link: { text: string; icon: string; bg: string; }; }; markdown: { codeBg: string; frameBorder: string; blockquoteBorder: string; tableBorder: string; tableTrBorder: string; }; filterItem: { barBg: string; }; hiddenTextExpander: { bg: string; bgHover: string; }; dragAndDrop: { border: string; }; uploadEnabled: { border: string; borderFocused: string; }; previewableCommentForm: { border: string; }; verifiedBadge: { text: string; bg: string; border: string; }; socialCount: { bg: string; }; tooltip: { text: string; bg: string; }; filesExplorerIcon: string; hlAuthorBg: string; hlAuthorBorder: string; logoSubdued: string; discussionBorder: string; discussionBgSuccess: string; actionsWorkflowTableStickyBg: string; repoLanguageColorBorder: string; codeSelectionBg: string; highlight: { text: string; bg: string; }; blob: { lineHighlightBg: string; lineHighlightBorder: string; }; topicTag: { text: string; bg: string; hoverBg: string; activeBg: string; border: string; }; footerInvertocat: { octicon: string; octiconHover: string; }; dropdown: { shadow: string; }; label: { border: string; primary: { text: string; border: string; }; secondary: { text: string; border: string; }; info: { text: string; border: string; }; success: { text: string; border: string; }; warning: { text: string; border: string; }; danger: { text: string; border: string; }; orange: { text: string; border: string; }; }; input: { bg: string; contrastBg: string; border: string; shadow: string; disabledBorder: string; warningBorder: string; errorBorder: string; tooltip: { success: { text: string; bg: string; border: string; }; warning: { text: string; bg: string; border: string; }; error: { text: string; bg: string; border: string; }; }; disabledBg: string; }; toast: { text: string; bg: string; border: string; shadow: string; icon: string; iconBg: string; iconBorder: string; success: { text: string; border: string; icon: string; iconBg: string; iconBorder: string; }; warning: { text: string; border: string; icon: string; iconBg: string; iconBorder: string; }; danger: { text: string; border: string; icon: string; iconBg: string; iconBorder: string; }; loading: { text: string; border: string; icon: string; iconBg: string; iconBorder: string; }; }; timeline: { text: string; badgeSuccessBorder: string; targetBadgeBorder: string; targetBadgeShadow: string; badgeBg: string; }; diffstat: { neutralBg: string; neutralBorder: string; deletionBorder: string; additionBorder: string; deletionBg: string; additionBg: string; }; diff: { addition: { text: string; bg: string; border: string; }; deletion: { text: string; bg: string; border: string; }; change: { text: string; bg: string; border: string; }; }; mergeBox: { successIconBg: string; successIconText: string; successIconBorder: string; successIndicatorBg: string; successIndicatorBorder: string; mergedIconBg: string; mergedIconText: string; mergedIconBorder: string; mergedBoxBorder: string; neutralIconBg: string; neutralIconText: string; neutralIconBorder: string; neutralIndicatorBg: string; neutralIndicatorBorder: string; warningIconBg: string; warningIconText: string; warningIconBorder: string; warningBoxBorder: string; warningMergeHighlight: string; errorIconBg: string; errorIconText: string; errorIconBorder: string; errorIndicatorBg: string; errorIndicatorBorder: string; }; underlinenav: { border: string; borderHover: string; borderActive: string; text: string; textHover: string; textActive: string; icon: string; iconHover: string; iconActive: string; counterText: string; counterBg: string; }; selectMenu: { borderSecondary: string; shadow: string; backdropBg: string; backdropBorder: string; tapHighlight: string; tapFocusBg: string; }; sidenav: { borderActive: string; selectedBg: string; }; menu: { headingText: string; borderActive: string; bgActive: string; }; project: { cardBg: string; headerBg: string; sidebarBg: string; gradientIn: string; gradientOut: string; }; prState: { draft: { text: string; bg: string; border: string; }; open: { text: string; bg: string; border: string; }; merged: { text: string; bg: string; border: string; }; closed: { text: string; bg: string; border: string; }; }; diffBlob: { numText: string; numHoverText: string; addition: { numHoverText: string; numText: string; fg: string; numBg: string; lineBg: string; wordBg: string; }; deletion: { numHoverText: string; numText: string; fg: string; numBg: string; lineBg: string; wordBg: string; }; hunk: { text: string; numBg: string; lineBg: string; }; emptyBlockBg: string; selectedLineHighlightBg: string; selectedLineHighlightBorder: string; expander: { hoverIcon: string; hoverBg: string; icon: string; }; commentButton: { icon: string; bg: string; gradientBg: string; }; selectedLineHighlightMixBlendMode: string; }; globalNav: { logo: string; bg: string; text: string; icon: string; inputBg: string; inputBorder: string; inputIcon: string; inputPlaceholder: string; }; introShelf: { gradientLeft: string; gradientRight: string; gradientIn: string; gradientOut: string; }; canvasDefaultTransparent: string; marketingIcon: { primary: string; secondary: string; }; searchKeyword: { hl: string; }; prettylights: { syntax: { comment: string; constant: string; entity: string; storageModifierImport: string; entityTag: string; keyword: string; string: string; variable: string; brackethighlighterUnmatched: string; invalidIllegalText: string; invalidIllegalBg: string; carriageReturnText: string; carriageReturnBg: string; stringRegexp: string; markupList: string; markupHeading: string; markupItalic: string; markupBold: string; markupDeletedText: string; markupDeletedBg: string; markupInsertedText: string; markupInsertedBg: string; markupChangedText: string; markupChangedBg: string; markupIgnoredText: string; markupIgnoredBg: string; metaDiffRange: string; brackethighlighterAngle: string; sublimelinterGutterMark: string; constantOtherReferenceLink: string; }; }; codemirror: { text: string; bg: string; guttersBg: string; guttermarkerText: string; guttermarkerSubtleText: string; linenumberText: string; cursor: string; selectionBg: string; activelineBg: string; matchingbracketText: string; linesBg: string; syntax: { comment: string; constant: string; entity: string; keyword: string; storage: string; string: string; support: string; variable: string; }; }; checks: { bg: string; runBorderWidth: string; containerBorderWidth: string; textPrimary: string; textSecondary: string; textLink: string; btnIcon: string; btnHoverIcon: string; btnHoverBg: string; inputText: string; inputPlaceholderText: string; inputFocusText: string; inputBg: string; inputShadow: string; donutError: string; donutPending: string; donutSuccess: string; donutNeutral: string; dropdownText: string; dropdownBg: string; dropdownBorder: string; dropdownShadow: string; dropdownHoverText: string; dropdownHoverBg: string; dropdownBtnHoverText: string; dropdownBtnHoverBg: string; scrollbarThumbBg: string; headerLabelText: string; headerLabelOpenText: string; headerBorder: string; headerIcon: string; lineText: string; lineNumText: string; lineTimestampText: string; lineHoverBg: string; lineSelectedBg: string; lineSelectedNumText: string; lineDtFmText: string; lineDtFmBg: string; gateBg: string; gateText: string; gateWaitingText: string; stepHeaderOpenBg: string; stepErrorText: string; stepWarningText: string; loglineText: string; loglineNumText: string; loglineDebugText: string; loglineErrorText: string; loglineErrorNumText: string; loglineErrorBg: string; loglineWarningText: string; loglineWarningNumText: string; loglineWarningBg: string; loglineCommandText: string; loglineSectionText: string; ansi: { black: string; blackBright: string; white: string; whiteBright: string; gray: string; red: string; redBright: string; green: string; greenBright: string; yellow: string; yellowBright: string; blue: string; blueBright: string; magenta: string; magentaBright: string; cyan: string; cyanBright: string; }; }; mktg: { success: string; info: string; bgShadeGradient: { top: string; bottom: string; }; btn: { bg: { top: string; bottom: string; }; bgOverlay: { top: string; bottom: string; }; text: string; primary: { bg: { top: string; bottom: string; }; bgOverlay: { top: string; bottom: string; }; text: string; }; enterprise: { bg: { top: string; bottom: string; }; bgOverlay: { top: string; bottom: string; }; text: string; }; outline: { text: string; border: string; hover: { text: string; border: string; }; focus: { border: string; borderInset: string; }; }; dark: { text: string; border: string; hover: { text: string; border: string; }; focus: { border: string; borderInset: string; }; }; }; }; avatar: { bg: string; border: string; stackFade: string; stackFadeMore: string; childShadow: string; }; overlay: { shadow: string; }; header: { text: string; bg: string; logo: string; }; headerSearch: { bg: string; border: string; }; ansi: { black: string; blackBright: string; white: string; whiteBright: string; gray: string; red: string; redBright: string; green: string; greenBright: string; yellow: string; yellowBright: string; blue: string; blueBright: string; magenta: string; magentaBright: string; cyan: string; cyanBright: string; }; btn: { text: string; bg: string; border: string; shadow: string; insetShadow: string; hoverBg: string; hoverBorder: string; activeBg: string; activeBorder: string; selectedBg: string; focusBg: string; focusBorder: string; focusShadow: string; shadowActive: string; shadowInputFocus: string; counterBg: string; primary: { text: string; bg: string; border: string; shadow: string; insetShadow: string; hoverBg: string; hoverBorder: string; selectedBg: string; selectedShadow: string; disabledText: string; disabledBg: string; disabledBorder: string; focusBg: string; focusBorder: string; focusShadow: string; icon: string; counterBg: string; }; outline: { text: string; hoverText: string; hoverBg: string; hoverBorder: string; hoverShadow: string; hoverInsetShadow: string; hoverCounterBg: string; selectedText: string; selectedBg: string; selectedBorder: string; selectedShadow: string; disabledText: string; disabledBg: string; disabledCounterBg: string; focusBorder: string; focusShadow: string; counterBg: string; }; danger: { text: string; hoverText: string; hoverBg: string; hoverBorder: string; hoverShadow: string; hoverInsetShadow: string; hoverCounterBg: string; selectedText: string; selectedBg: string; selectedBorder: string; selectedShadow: string; disabledText: string; disabledBg: string; disabledCounterBg: string; focusBorder: string; focusShadow: string; counterBg: string; icon: string; hoverIcon: string; }; }; fg: { default: string; muted: string; subtle: string; onEmphasis: string; }; canvas: { default: string; overlay: string; inset: string; subtle: string; }; neutral: { emphasisPlus: string; emphasis: string; muted: string; subtle: string; }; accent: { fg: string; emphasis: string; muted: string; subtle: string; }; success: { fg: string; emphasis: string; muted: string; subtle: string; }; attention: { fg: string; emphasis: string; muted: string; subtle: string; }; severe: { fg: string; emphasis: string; muted: string; subtle: string; }; danger: { fg: string; emphasis: string; muted: string; subtle: string; }; done: { fg: string; emphasis: string; muted: string; subtle: string; }; sponsors: { fg: string; emphasis: string; muted: string; subtle: string; }; primer: { canvas: { backdrop: string; sticky: string; }; border: { active: string; contrast: string; }; shadow: { highlight: string; inset: string; focus: string; }; }; scale: { black: string; white: string; gray: string[]; blue: string[]; green: string[]; yellow: string[]; orange: string[]; red: string[]; purple: string[]; pink: string[]; coral: string[]; }; }>>>; }): renderer.ReactTestRendererJSON; /** * Render the component (a React.createElement() or JSX expression) * using react-test-renderer and return the root node * ``` */ export declare function renderRoot(component: React.ReactElement): renderer.ReactTestInstance; /** * Get the HTML class names rendered by the component instance * as an array. * * ```js * expect(renderClasses(<div className='a b' />)) * .toEqual(['a', 'b']) * ``` */ export declare function renderClasses(component: React.ReactElement): string; /** * Returns true if a node renders with a single class. */ export declare function rendersClass(node: React.ReactElement, klass: string): boolean; export declare function px(value: number | string): string; export declare function percent(value: number | string): string; export declare function renderStyles(node: React.ReactElement): ComputedStyles; export declare function getComputedStyles(className: string): ComputedStyles; /** * This provides a layer of compatibility between the render() function from * react-test-renderer and Enzyme's mount() */ export declare function getProps(node: React.ReactElement): any; export declare function getClassName(node: React.ReactElement): any; export declare function getClasses(node: React.ReactElement): any; export declare function loadCSS(path: string): Promise<HTMLStyleElement>; export declare function unloadCSS(path: string): true | undefined; interface Options { skipAs?: boolean; skipSx?: boolean; } interface BehavesAsComponent { Component: React.ComponentType<any>; toRender?: () => React.ReactElement; options?: Options; } export declare function behavesAsComponent({ Component, toRender, options }: BehavesAsComponent): void; export declare function checkExports(path: string, exports: Record<any, any>): void; export {};