@dnb/eufemia/components/logo/Logo.js

DNB Eufemia Design System UI Library

"use client";

import _Object$hasOwn from "core-js-pure/stable/object/has-own.js";
import React, { useContext, useMemo } from 'react';
import clsx from 'clsx';
import Context from "../../shared/Context.js";
import { validateDOMAttributes, extendPropsWithContext } from "../../shared/component-helper.js";
import { applySpacing } from "../space/SpacingUtils.js";
import { DnbDefault } from "./LogoSvg.js";
import { jsx as _jsx } from "react/jsx-runtime";
export * from "./LogoSvg.js";
const defaultProps = {
  inheritSize: false
};
function Logo(localProps) {
  const context = useContext(Context);
  const props = extendPropsWithContext(localProps, defaultProps, context.Logo);
  const {
    width,
    inheritSize,
    height,
    color,
    inheritColor,
    className: classNameProp,
    svg: svgProp = DnbDefault,
    ...rest
  } = props;
  const theme = useMemo(() => {
    if (!(context !== null && context !== void 0 && context.theme)) {
      return null;
    }
    const {
      name,
      size
    } = context.theme;
    return {
      name,
      size,
      isUi: name === 'ui',
      isSbanken: name === 'sbanken',
      isEiendom: name === 'eiendom',
      isCarnegie: name === 'carnegie'
    };
  }, [context === null || context === void 0 ? void 0 : context.theme]);
  const svg = useMemo(() => {
    if (_Object$hasOwn(svgProp, 'brand')) {
      return svgProp;
    }
    if (theme && typeof svgProp === 'function' && svgProp.length === 1) {
      return svgProp(theme);
    }
    return svgProp;
  }, [svgProp, theme]);
  const altText = useMemo(() => {
    const alt = svg === null || svg === void 0 ? void 0 : svg['alt'];
    if (alt) {
      return alt;
    }
    return 'logo';
  }, [svg]);
  const sharedClasses = classNameProp;
  const detectedBrand = useMemo(() => {
    if (_Object$hasOwn(svg, 'brand')) {
      const brand = svg.brand;
      return brand;
    }
    return (theme === null || theme === void 0 ? void 0 : theme.name) || 'ui';
  }, [svg, theme]);
  const className = useMemo(() => {
    return clsx(`dnb-logo dnb-logo--${detectedBrand}`, sharedClasses, (parseFloat(width) > 0 || parseFloat(height) > 0) && `dnb-logo--has-size`, inheritSize && `dnb-logo--inherit-size`, inheritColor && `dnb-logo--inherit-color`);
  }, [detectedBrand, sharedClasses, width, height, inheritSize, inheritColor]);
  const rootParams = applySpacing(props, {
    role: 'img',
    'aria-hidden': true,
    className,
    ...rest,
    style: rest.style,
    alt: altText
  });
  const svgParams = useMemo(() => {
    return {
      width,
      height,
      color,
      alt: altText
    };
  }, [altText, color, height, width]);
  const remainingDOMProps = validateDOMAttributes(props, rootParams);
  return _jsx("span", {
    ...remainingDOMProps,
    children: renderCustomSvg(svg, svgParams, theme)
  });
}
function renderCustomSvg(SvgComponent, svgParams, theme) {
  if (React.isValidElement(SvgComponent)) {
    const allowedProps = {};
    if (theme) {
      for (const key in SvgComponent.props) {
        if (!(key in theme)) {
          allowedProps[key] = SvgComponent.props[key];
        }
      }
    }
    return React.createElement(SvgComponent.type, {
      ...allowedProps,
      ...svgParams
    });
  }
  return _jsx(SvgComponent, {
    ...svgParams
  });
}
export default Logo;
//# sourceMappingURL=Logo.js.map