@patreon/studio/module/components/Icon/Icon.jsx

Patreon Studio Design System

'use client';
import cx from 'classnames';
import React, { memo, useMemo } from 'react';
import { classNameForHighlightSize } from '../../styles/classNameForHighlightSize';
import { classNameForIconColor } from '../../styles/classNameForIconColor';
import { tokens } from '../../tokens';
import { wrapResponsive, mapResponsive } from '../../utilities/opaque-responsive';
import { classNameForResponsiveValue, createResponsiveClassNameLookup } from '../../utilities/responsive-style';
import { useIncrementLogger } from '../IncrementLogger';
import styles from './Icon.module.css';
const isLegacySize = (value) => !value.includes('px');
const legacyToModernSizeMap = {
    xxxxs: '8px',
    xxxs: '10px',
    xxs: '12px',
    xs: '16px',
    sm: '24px',
    md: '32px',
    lg: '40px',
    xl: '48px',
    xxl: '64px',
    xxxl: '88px',
};
const classNameSizeLookup = createResponsiveClassNameLookup(styles, {
    '8px': 'sizePx8',
    '10px': 'sizePx10',
    '12px': 'sizePx12',
    '16px': 'sizePx16',
    '20px': 'sizePx20',
    '24px': 'sizePx24',
    '32px': 'sizePx32',
    '40px': 'sizePx40',
    '48px': 'sizePx48',
    '64px': 'sizePx64',
    '88px': 'sizePx88',
});
const verticalAlignMap = {
    baseline: styles.verticalAlignBaseline,
    sub: styles.verticalAlignSub,
    super: styles.verticalAlignSuper,
    'text-top': styles.verticalAlignTextTop,
    'text-bottom': styles.verticalAlignTextBottom,
    middle: styles.verticalAlignMiddle,
    top: styles.verticalAlignTop,
    bottom: styles.verticalAlignBottom,
};
export const Icon = memo(function IconWrapper({ innerRef, size = '16px', color = tokens.global.content.regular.default, highlight = false, highlightColor = tokens.global.primary.muted.default, highlightSize = tokens.global.space.x40, children, verticalAlign, title, id, 'data-tag': dataTag, className, style, ...props }) {
    const { incrementLoggerOnce } = useIncrementLogger();
    const responsiveSize = useMemo(() => mapResponsive(wrapResponsive(size), (value) => {
        if (isLegacySize(value)) {
            incrementLoggerOnce('studio.deprecated.icon-size', { value });
            return legacyToModernSizeMap[value];
        }
        return value;
    }), [incrementLoggerOnce, size]);
    const classList = cx(styles.root, classNameForIconColor({ color }), classNameForResponsiveValue(responsiveSize, classNameSizeLookup), verticalAlign && verticalAlignMap[verticalAlign], className);
    const icon = (<span ref={innerRef} title={title} aria-hidden id={id} data-tag={dataTag} className={classList} style={style} {...props}>
      {children}
    </span>);
    if (highlight) {
        const hightlightClassList = cx(styles.highlight, classNameForIconColor({ color: highlightColor }), classNameForHighlightSize({ highlightSize }));
        return (<span className={hightlightClassList} data-tag={dataTag && 'icon-highlight-container'}>
        {icon}
      </span>);
    }
    return icon;
});
//# sourceMappingURL=Icon.jsx.map