@kubit-ui-web/react-components/dist/esm/components/navigationCard/navigationCardStandAlone.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from 'react';
import { DecorativeElement } from '../../components/decorativeElement/decorativeElementStandAlone';
import { Text } from '../../components/text/text';
import { TextComponentType } from '../../components/text/types/component';
import { useId } from '../../hooks/useId/useId';
import { ButtonType } from '../button/types/type';
import { ElementOrIcon } from '../elementOrIcon/elementOrIcon';
import { NavigationCardInfo } from './fragments/navigationCardInfo';
import { buildProps } from './helpers/buildProps';
import { NavigationCardDecorativeContainer, NavigationCardInfoContentStyled, NavigationCardLeftContentStyled, NavigationCardRightContentStyled, NavigationCardStyled, } from './navigationCard.styled';
const NavigationCardStandaloneComponent = ({ dataTestId = 'navigation-card', type = ButtonType.BUTTON, ...props }, ref) => {
    const infoId = useId('infoId');
    const { marginRight, additionalProps } = buildProps(props.styles, props.decorative, props.device, dataTestId);
    const innerContainersComponent = props.url ? 'div' : 'span';
    return (
    // Can not be spread -> styled component breaks
    _jsx(NavigationCardStyled, { ref: ref, "aria-disabled": props['aria-disabled'], as: props.url ? props.component : 'button', className: props.className, dataTestId: dataTestId, draggable: props.draggable, role: props.role, styles: props.styles, target: props.target, type: props.url ? undefined : type, url: props.url, onClick: props.onClick, onFocus: props.onFocus, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, children: _jsxs(_Fragment, { children: [props.decorative && (_jsx(NavigationCardDecorativeContainer, { as: innerContainersComponent, marginRight: marginRight, styles: props.styles, children: _jsx(DecorativeElement, { additionalProps: additionalProps, element: props.decorative }) })), _jsxs(NavigationCardInfoContentStyled, { as: innerContainersComponent, id: infoId, isExpanded: props.styles.containerExpandedContent, children: [_jsx(NavigationCardLeftContentStyled, { as: innerContainersComponent, isExpanded: props.styles.containerExpandedContent, children: _jsx(NavigationCardInfo, { description: props.description, device: props.device, innerContainersComponent: innerContainersComponent, styles: props.styles, tag: props.tag, title: props.title }) }), _jsxs(NavigationCardRightContentStyled, { "aria-hidden": true, as: innerContainersComponent, styles: props.styles, children: [props.styles.containerExpandedContent && (_jsx(Text, { component: TextComponentType.SPAN, customTypography: props.styles.arrowIconText, ...props.arrowIconText, children: props.arrowIconText?.content })), _jsx(ElementOrIcon, { customIconStyles: props.styles.arrowIcon, ...props.arrowIcon })] })] })] }) }));
};
export const NavigationCardStandalone = React.forwardRef(NavigationCardStandaloneComponent);
//# sourceMappingURL=navigationCardStandAlone.js.map