@navinc/base-react-components
Version:
Nav's Pattern Library
43 lines (42 loc) • 1.98 kB
TypeScript
import { InferComponentProps } from './types';
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").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
/**
* 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").StyledComponent<({ selected, options, ...props }: ComparisonScaleProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
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").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
/**
* 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").StyledComponent<({ selected, options, info, ...props }: ComparisonScaleWithInfoProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
export {};