vcc-ui/_src/components/logo/index.js

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

import React from 'react';
import PropTypes from 'prop-types';
import { useFela } from 'react-fela';
import { Block } from '../block';
import { getImagesSrc } from './helpers';
import { getThemeStyle } from '../../get-theme-style';

import { deprecate } from '../../deprecate';

export const Logo = React.forwardRef(
  ({ type, height, alt = altText, altText }, ref) => {
    const { theme } = useFela();

    // TODO: remove in 2.0.0
    deprecate(
      'The `altText` prop on <Logo> has been deprecated in favor of just using the HTML attribute `alt`. It will be removed with version 2.0.0.',
      altText
    );

    // TODO: remove in 2.0.0
    deprecate(
      'The "wordmark" and "wordmark-black" logo types have been deprecated in favor of "spreadmark". Use dark theme if you need the white logo on the black background',
      type === 'wordmark' || type === 'wordmark-black'
    );

    const { src, srcSet } = getImagesSrc({
      type,
      theme,
    });

    return (
      <Block
        as="img"
        ref={ref}
        src={src}
        srcSet={srcSet}
        alt={alt}
        height={height}
        extend={{
          verticalAlign: 'middle',
          maxHeight: '100%',
          // this allows passing a function of theme
          // as a generic extension via theme
          extend: getThemeStyle('logo', theme),
        }}
      />
    );
  }
);

Logo.displayName = 'Logo';

Logo.propTypes = {
  /** Logo type */
  // type: PropTypes.oneOf([LOGO_TYPES.SQUARE, LOGO_TYPES.WORDMARK]),
  type: PropTypes.string,
  /** Apply custom height to logo image */
  height: PropTypes.number,
  /** Alternative text for the logo image */
  alt: PropTypes.string,
  /** DEPRECATED */
  altText: PropTypes.string,
};