@navinc/base-react-components/dist/comparison-scale.d.ts

Nav's Pattern Library

import { InferComponentProps } from './types.js';
import { ReactNode } from 'react';
type ComparisonScaleProps = InferComponentProps<typeof CompScaleContainer> & {
    /**
     * index of the selected option
     */
    selected: number;
    /**
     * options in order of display (left to right)
     */
    options: string[];
};
declare const CompScaleContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
/**
 * Creates a 'progress bar' of given inputs.
 * Options are displayed left to right, highlighting if they are at an index position equal to or lesser than the provided 'selected' index.
 * If equal to the index, the option label is displayed in text below the bar.
 */
export declare const ComparisonScale: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<InferComponentProps<import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string> & {
    /**
     * index of the selected option
     */
    selected: number;
    /**
     * options in order of display (left to right)
     */
    options: string[];
}, never>> & string & Omit<({ selected, options, ...props }: ComparisonScaleProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
type ComparisonScaleWithInfoProps = InferComponentProps<typeof CompScaleWithInfoContainer> & {
    /**
     * index of the selected option
     */
    selected: number;
    /**
     * options in order of display (left to right)
     */
    options: string[];
    /**
     * info to display over scale
     */
    info: ReactNode;
};
declare const CompScaleWithInfoContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
/**
 * Creates a 'progress bar' of given inputs.
 * Options are displayed left to right, highlighting if they are at an index position equal to or lesser than the provided 'selected' index.
 * If equal to the index, the option label is displayed in text below the bar.
 * Info is added as a head to the scale.
 */
export declare const ComparisonScaleWithInfo: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<InferComponentProps<import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string> & {
    /**
     * index of the selected option
     */
    selected: number;
    /**
     * options in order of display (left to right)
     */
    options: string[];
    /**
     * info to display over scale
     */
    info: ReactNode;
}, never>> & string & Omit<({ selected, options, info, ...props }: ComparisonScaleWithInfoProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
export {};