@primer/react-brand/lib/PricingOptions/PricingOptions.d.ts

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import React, { PropsWithChildren } from 'react';
import type { ListItemProps } from '../list/ListItem/ListItem';
import type { BaseProps } from '../component-helpers';
import { ButtonBaseProps, HeadingProps, LabelProps } from '..';
/**
 * Design tokens
 */
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/pricing-options/pricing-options.css';
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/pricing-options/colors-with-modes.css';
type AlignOptions = 'start' | 'center';
export type PricingOptionsProps = {
    align?: AlignOptions;
    variant?: 'default' | 'default-gradient' | 'cards' | 'cards-gradient';
    ['data-testid']?: string;
} & PropsWithChildren<BaseProps<HTMLDivElement>>;
export type PricingOptionsItem = {
    ['data-testid']?: string;
    /**
     * Escape-hatch for inserting custom React components.
     * Warning:
     *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.
     *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.
     */
    leadingComponent?: React.ReactElement;
} & PropsWithChildren<BaseProps<HTMLDivElement>>;
type PricingOptionsLabelProps = PropsWithChildren<BaseProps<HTMLSpanElement>> & {
    'data-testid'?: string;
} & LabelProps;
type PricingOptionsDescriptionProps = PropsWithChildren<BaseProps<HTMLParagraphElement>> & {
    'data-testid'?: string;
};
type PricingOptionsHeadingProps = PropsWithChildren<BaseProps<HTMLHeadingElement>> & {
    'data-testid'?: string;
} & HeadingProps;
type PricingOptionsPriceProps = PropsWithChildren<BaseProps<HTMLParagraphElement>> & {
    currencyCode?: string;
    currencySymbol?: string;
    'data-testid'?: string;
    originalPrice?: string;
    trailingText?: string;
};
type PricingOptionsFeatureListProps = BaseProps<HTMLUListElement> & {
    accordionAs?: HeadingProps['as'];
    expanded?: ExpandedProp;
    hasDivider?: boolean;
    children: React.ReactElement<PricingOptionsFeatureListGroupHeadingProps | PricingOptionsFeatureListItemProps>[];
    'data-testid'?: string;
};
type ExpandedProp = boolean | ResponsiveExpandableProps;
type ResponsiveExpandableProps = {
    narrow: boolean;
    regular: boolean;
    wide: boolean;
};
type PricingOptionsFeatureListHeadingProps = PropsWithChildren<BaseProps<HTMLDivElement>> & {
    'data-testid'?: string;
};
type PricingOptionsFeatureListGroupHeadingProps = PropsWithChildren<BaseProps<HTMLHeadingElement>> & {
    as?: Exclude<HeadingProps['as'], 'h1' | 'h2'>;
    'data-testid'?: string;
};
type PricingOptionsFeatureListItemProps = PropsWithChildren<BaseProps<HTMLLIElement>> & {
    'data-testid'?: string;
    variant?: 'included' | 'excluded';
} & Omit<ListItemProps, 'variant'>;
type AsA = {
    as: 'a';
    href: string;
    'data-testid'?: string;
} & React.AnchorHTMLAttributes<BaseProps<HTMLAnchorElement>> & ButtonBaseProps;
type AsButton = {
    as: 'button';
    'data-testid'?: string;
} & React.ButtonHTMLAttributes<BaseProps<HTMLButtonElement>> & ButtonBaseProps;
type PricingOptionsActionsProps = AsA | AsButton;
type PricingOptionsFootnoteProps = PropsWithChildren<BaseProps<HTMLParagraphElement>> & {
    'data-testid'?: string;
};
/**
 * Pricing options component:
 * {@link https://primer.style/brand/components/PricingOptions/ See usage examples}.
 */
export declare const PricingOptions: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<PricingOptionsProps>, "ref"> & React.RefAttributes<HTMLDivElement>> & {
    Description: React.ForwardRefExoticComponent<Omit<PricingOptionsDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
    FeatureList: React.ForwardRefExoticComponent<Omit<PricingOptionsFeatureListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
    FeatureListHeading: React.ForwardRefExoticComponent<Omit<PricingOptionsFeatureListHeadingProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
    FeatureListGroupHeading: React.ForwardRefExoticComponent<Omit<PricingOptionsFeatureListGroupHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
    FeatureListItem: React.ForwardRefExoticComponent<Omit<PricingOptionsFeatureListItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
    Footnote: React.ForwardRefExoticComponent<Omit<PricingOptionsFootnoteProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
    Heading: React.ForwardRefExoticComponent<Omit<PricingOptionsHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
    Item: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<PricingOptionsItem>, "ref"> & React.RefAttributes<HTMLDivElement>>;
    Label: React.ForwardRefExoticComponent<Omit<PricingOptionsLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
    Price: React.ForwardRefExoticComponent<Omit<PricingOptionsPriceProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
    PrimaryAction: React.ForwardRefExoticComponent<React.PropsWithChildren<PricingOptionsActionsProps> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
    SecondaryAction: React.ForwardRefExoticComponent<React.PropsWithChildren<PricingOptionsActionsProps> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
    testIds: {
        root: string;
        item: string;
        heading: string;
        label: string;
        description: string;
        price: string;
        primaryAction: string;
        secondaryAction: string;
        featureList: string;
        featureListHeading: string;
        featureListItem: string;
        featureListGroupHeading: string;
        footnote: string;
    };
};
export {};