@navinc/base-react-components
Version:
Nav's Pattern Library
74 lines (73 loc) • 3.3 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx } from "react/jsx-runtime";
/*
https://developers.google.com/fonts/docs/material_symbols#use_in_web
using material symbols font, see the link for documentation
by default, this component is only using the default weight 400 and default grad 0
also using the full range of the 'opsz' (optical sizes), which starts at 20
*/
import cn from 'classnames';
import { styled } from 'styled-components';
import { iconsMap } from '../../icons/index.js';
const iconClassIdentifier = 'nav-icon';
const sizeMap = {
small: '16',
medium: '20',
large: '24',
};
const fontSizeClassNameMap = {
small: /* cn */ 'text-[16px]',
medium: /* cn */ 'text-[20px]',
large: /* cn */ 'text-[24px]',
};
export const getIconSize = (size) => {
if (typeof size === 'number') {
return size;
}
return sizeMap[size];
};
const getFill = (isFilled) => {
return `'FILL' ${isFilled ? '1' : '0'}`;
};
export const CustomIcon = (_a) => {
var { name, className, size = 'small', Component } = _a, rest = __rest(_a, ["name", "className", "size", "Component"]);
const IconComponent = Component || iconsMap[name];
const sizeValue = getIconSize(size);
return IconComponent ? (_jsx(IconComponent, Object.assign({ className: className, width: sizeValue, height: sizeValue, "data-testid": `icon:${name}` }, rest))) : null;
};
/**
* Icon component that handles both our existing custom SVG icons, and uses Material Symbols.
* CustomIcon is exported separately if we ever need to use it. By default we should only need to use Icon.
*
* @description Adds a loading spinner with a pulsing color animation and a message.
*
* @returns either one of our `<svg>` custom icons, or a `<span>` Material Symbols font icon
*/
export const Icon = styled((_a) => {
var { name, className, size = 'small', isFilled = false } = _a, rest = __rest(_a, ["name", "className", "size", "isFilled"]);
if (!name)
return null;
const CustomIconComponent = iconsMap[name];
const style = {
fontVariationSettings: `${getFill(isFilled)}, 'OPSZ' ${getIconSize(size)}`,
};
let fontSizeClassName = '';
if (typeof size === 'number') {
style.fontSize = `${size}px`;
}
else {
fontSizeClassName = fontSizeClassNameMap[size];
}
return CustomIconComponent ? (_jsx(CustomIcon, Object.assign({ name: name, className: cn(iconClassIdentifier, className), size: size, Component: CustomIconComponent }, rest))) : (_jsx("span", Object.assign({ style: style, className: cn('material-symbols-rounded', iconClassIdentifier, fontSizeClassName, className), "data-testid": `icon:${name}` }, rest, { children: name })));
}).withConfig({ displayName: "brc-sc-Icon", componentId: "brc-sc-1muihpj" }) ``;
//# sourceMappingURL=icon.js.map