@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
119 lines (118 loc) • 3.53 kB
JavaScript
"use client";
import React, { useContext, useMemo } from 'react';
import classnames from 'classnames';
import Context from "../../shared/Context.js";
import { validateDOMAttributes, extendPropsWithContext } from "../../shared/component-helper.js";
import { createSpacingClasses } from "../space/SpacingHelper.js";
import { convertSnakeCaseProps } from "../../shared/helpers/withSnakeCaseProps.js";
import LogoSvg, { DnbLogoAlt, SbankenLogoAlt } from "./LogoSvg.js";
export * from "./LogoSvg.js";
const defaultProps = {
size: 'auto',
variant: 'default',
inheritSize: false
};
function Logo(localProps) {
const context = useContext(Context);
const props = extendPropsWithContext(convertSnakeCaseProps(localProps), defaultProps, context.Logo);
const {
alt,
size,
ratio,
width,
inheritSize,
height: heightProp,
brand: brandProp,
variant,
color,
inheritColor,
className: classNameProp,
svg,
...rest
} = convertDimensionalPropsToString(props);
const brand = useMemo(() => {
if (brandProp) {
return brandProp === 'ui' ? 'dnb' : brandProp;
}
if (context?.theme) {
switch (context.theme.name) {
case 'ui':
case 'eiendom':
return 'dnb';
}
return context.theme.name;
}
return 'dnb';
}, [brandProp, context?.theme]);
const logoType = useMemo(() => {
if (brand === 'sbanken') {
if (variant === 'compact') {
return 'sbankenCompact';
} else if (variant === 'compactHorizontal') {
return 'sbankenHorizontal';
} else {
return 'sbankenDefault';
}
}
return 'dnb';
}, [brand, variant]);
const height = parseFloat(size) > 0 ? size : heightProp;
const altText = useMemo(() => {
const alt = svg?.['alt'];
if (alt) {
return alt;
}
switch (brand) {
case 'sbanken':
return SbankenLogoAlt;
case 'dnb':
return DnbLogoAlt;
}
}, [brand, svg]);
const sharedClasses = classnames(classNameProp, createSpacingClasses(props));
const className = useMemo(() => {
return classnames(`${brand}-logo`, sharedClasses, (parseFloat(width) > 0 || parseFloat(height) > 0) && `${brand}-logo--has-size`, (inheritSize || size === 'inherit') && `${brand}-logo--inherit-size`, inheritColor && `${brand}-logo--inherit-color`);
}, [brand, sharedClasses, width, height, inheritSize, size, inheritColor]);
const rootParams = {
role: 'img',
'aria-hidden': true,
className,
alt: altText,
...rest
};
const svgParams = {
width,
height,
color,
alt: altText
};
const remainingDOMProps = validateDOMAttributes(props, rootParams);
return React.createElement("span", remainingDOMProps, svg ? renderCustomSvg(svg, svgParams) : React.createElement(LogoSvg, {
logoType: logoType,
svgParams: svgParams
}));
}
function convertDimensionalPropsToString(allProps) {
return {
...allProps,
size: handleTypeToString(allProps.size),
ratio: handleTypeToString(allProps.ratio),
width: handleTypeToString(allProps.width),
height: handleTypeToString(allProps.height)
};
}
function handleTypeToString(val) {
return val ? String(val) : undefined;
}
function renderCustomSvg(svg, svgParams) {
if (React.isValidElement(svg)) {
return React.cloneElement(svg, {
...svgParams,
...svg.props
});
}
const SvgComponent = svg;
return React.createElement(SvgComponent, svgParams);
}
export default Logo;
//# sourceMappingURL=Logo.js.map