apphouse/dist/templates/PlanSelectionCard.d.ts

Component library for React that uses observable state management and theme-able components.

import { ApphouseComponent } from '../components/component.interfaces';
import { CSSProperties } from 'glamor';
import { BoxSizeStyles, ThemeColors } from '../styles/defaults/themes.interface';
import React from 'react';
import { FlexStyle } from '../components/cross-platform/@types/styles.cross-platform.interface';
/**
 * Represents the PlanSelectionCard component.
 */
export interface PlanSelectionCardStyles {
    container?: CSSProperties;
    title?: CSSProperties;
    description?: CSSProperties;
    price?: CSSProperties;
    featureListWrapper?: CSSProperties;
    currency?: CSSProperties;
    features?: CSSProperties;
    disabled?: CSSProperties;
    selected?: CSSProperties;
    feature?: CSSProperties;
    ctaButton?: CSSProperties;
}
/**
 * Represents the props for the PlanSelectionCard component.
 * @interface PlanSelectionCardProps
 * @extends ApphouseComponent<PlanSelectionCardStyles>
 */
export interface PlanSelectionCardProps extends ApphouseComponent<PlanSelectionCardStyles> {
    /**
     * The title of the plan.
     * @type {string}
     */
    title: string;
    /**
     * The description of the plan.
     * @type {string}
     */
    description: string;
    /**
     * The price of the plan.
     * @type {number}
     */
    price: number;
    /**
     * The currency symbol used for the price.
     * @type {string}
     */
    currency: string;
    /**
     * An array of features for the plan.
     * @type {string[]}
     */
    features: string[];
    /**
     * The action to be performed when the card is clicked.
     * @type {() => void}
     */
    action: () => void;
    /**
     * Determines whether the card is disabled. (Optional)
     * If true, the options and clicking on the card will be disabled.
     * @type {boolean}
     * @default false
     */
    disabled?: boolean;
    /**
     * The currency symbol used for the price.
     * @type {string}
     * @default $
     * @optional
     */
    currencySymbol?: string;
    /**
     * Determines whether the card is selected. (Optional)
     * @type {boolean}
     * @default false
     */
    selected?: boolean;
    /**
     * The unique identifier for the card.
     * @type {string}
     */
    id: string;
    /**
     * The text to be displayed on the button.
     */
    buttonText: string;
    /**
     * The size of the card.
     */
    size?: keyof BoxSizeStyles;
    /**
     * The maximum width of the card.
     * @type {string}
     * @optional
     * @default 100%
     * @example 300px
     */
    maxWidth?: string;
    /**
     * The period of the plan.
     * @default mo.
     */
    period?: string;
    /**
     * The header of the card.
     * @default null
     * @optional
     */
    header?: React.ReactNode;
    /**
     * The footer of the card.
     * @default null
     * @optional
     * @example <Text>Footer</Text>
     * @example <Button>Footer</Button>
     */
    footer?: React.ReactNode;
    /**
     * The alignment of the contents of the card.
     * @default center
     */
    align?: FlexStyle['alignItems'];
    /**
     * The color scheme of the card.
     * It will be applied to the title button and price.
     */
    colorScheme?: keyof ThemeColors | string;
    /**
     * The background color of the card.
     * @default surface
     */
    background?: string;
}
export declare const PlanSelectionCard: React.FC<PlanSelectionCardProps>;