@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
14 lines • 2.34 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import { Text } from '../../components/text/text';
import { TextComponentType } from '../../components/text/types/component';
import { ButtonType } from '../button/types/type';
import { ElementOrIcon } from '../elementOrIcon/elementOrIcon';
import { IconHighlighted } from '../iconHighlighted/iconHighlighted';
import { DecorativeElementContainerStyled, IconAndIconHighlightedContainerStyled, NavigationRowStyled, TextSectionStyled, } from './navigationRow.styled';
const NavigationRowStandaloneComponent = ({ dataTestId = 'navigation-row', topLine = false, bottomLine = false, ...props }, ref) => {
const iconHighlightedSize = props.iconHighlighted?.size ?? props.styles.iconHighlighted?.size;
return (_jsxs(NavigationRowStyled, { ref: ref, bottomLine: bottomLine, "data-testid": dataTestId, lineSeparatorLineStyles: props.lineSeparatorLineStyles, styles: props.styles, topLine: topLine, type: ButtonType.BUTTON, onClick: props.onClick, children: [_jsxs(IconAndIconHighlightedContainerStyled, { styles: props.styles, children: [props.decorativeIcon && !props.iconHighlighted && (_jsx(ElementOrIcon, { customIconStyles: props.styles.decorativeIcon, ...props.decorativeIcon })), props.iconHighlighted && props.styles.iconHighlighted && iconHighlightedSize && (_jsx(IconHighlighted, { backgroundColor: props.styles.iconHighlighted?.backgroundColor, color: props.styles.iconHighlighted?.color, variant: props.styles.iconHighlighted?.variant, ...props.iconHighlighted, size: iconHighlightedSize }))] }), props.decorativeElement && (_jsx(DecorativeElementContainerStyled, { styles: props.styles, children: props.decorativeElement })), _jsxs(TextSectionStyled, { styles: props.styles, children: [props.text && (_jsx(Text, { component: TextComponentType.SPAN, customTypography: props.styles.text, ...props.text, children: props.text.content })), _jsx(Text, { component: TextComponentType.SPAN, customTypography: props.styles.description, ...props.description, children: props.description?.content })] }), _jsx(ElementOrIcon, { customIconStyles: props.styles.arrowIcon, ...props.arrowIcon })] }));
};
export const NavigationRowStandalone = forwardRef(NavigationRowStandaloneComponent);
//# sourceMappingURL=navigationRowStandAlone.js.map