UNPKG

@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

18 lines 2.22 kB
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime"; import React from 'react'; import { Dot } from '../../components/dot/dot'; import { Link } from '../../components/link/link'; import { Text } from '../../components/text/text'; import { TextComponentType } from '../../components/text/types/component'; import { pickAriaProps } from '../../utils/aria/aria'; import { ButtonType } from '../button/types/type'; import { ElementOrIcon } from '../elementOrIcon/elementOrIcon'; import { AvatarDotStyled, AvatarLinkStyled, AvatarStyled } from './avatar.styled'; import { AvatarBackgroundColor, AvatarContentType } from './types/content'; export const AvatarStandAloneComponent = ({ contentType, backgroundColor = AvatarBackgroundColor.COLOR_DEFAULT, image, onClick, styles, dataTestId = 'avatar', maxLengthInitials = 2, ...props }, ref) => { const ariaProps = pickAriaProps(props); const drawContent = () => (_jsxs(_Fragment, { children: [props.dot?.number && (_jsx(AvatarDotStyled, { children: _jsx(Dot, { ...props.dot }) })), contentType === AvatarContentType.WITH_ICON && (_jsx(ElementOrIcon, { color: styles?.containerBackgroundColor?.[backgroundColor]?.contentColor, customIconStyles: styles?.avatar, ...props.icon })), contentType === AvatarContentType.WITH_INITIALS && (_jsx(Text, { "aria-hidden": true, color: styles?.containerBackgroundColor?.[backgroundColor]?.contentColor, component: TextComponentType.SPAN, customTypography: styles?.initials, ...props.initials, children: props.initials?.content?.substring(0, maxLengthInitials) }))] })); return props.link ? (_jsx(AvatarLinkStyled, { ref: ref, backgroundColor: backgroundColor, "data-testid": dataTestId, image: image, styles: styles, children: _jsx(Link, { "aria-label": props['aria-label'], ...props.link, children: drawContent() }) })) : (_jsx(AvatarStyled, { ref: ref, as: onClick ? 'button' : 'div', backgroundColor: backgroundColor, "data-testid": dataTestId, image: image, styles: styles, type: onClick && ButtonType.BUTTON, onClick: onClick, ...ariaProps, children: drawContent() })); }; export const AvatarStandAlone = React.forwardRef(AvatarStandAloneComponent); //# sourceMappingURL=avatarStandAlone.js.map