@navinc/base-react-components
Version:
Nav's Pattern Library
55 lines (54 loc) • 2.9 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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.InteractiveIcon = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const button_1 = require("./button");
const icon_1 = __importDefault(require("./icon"));
const is_rebrand_1 = __importDefault(require("./is-rebrand"));
const getIconName = (name) => {
const nameArr = name.split('/');
return nameArr[nameArr.length - 1];
};
const StyleOverrideButton = (0, styled_components_1.default)(button_1.StyledButton).withConfig({ displayName: "brc-sc-StyleOverrideButton", componentId: "brc-sc-1ixmm94" }) `
padding: 0;
height: ${({ variation }) => (variation === 'buttonLink' ? '24px' : '32px')};
width: ${({ variation }) => (variation === 'buttonLink' ? '24px' : '32px')};
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
border-radius: ${({ variation }) => (variation === 'buttonLink' ? '2px' : '50%')};
${({ variation, theme }) => {
if (variation === 'buttonLink') {
return `
&:focus {
box-shadow: ${(0, is_rebrand_1.default)(theme) ? `0 0 0 4px ${theme.navStatusPositive500}` : `0 0 0 3px ${theme.navPrimary700}`};
}
`;
}
return ``;
}}
`;
/** Pass all event handler props to a wrapper button to avoid rerendering the icon and causing flicker */
const IconButton = (_a) => {
var { variation = 'buttonLink', buttonAriaLabel, className, name, color, size } = _a, props = __rest(_a, ["variation", "buttonAriaLabel", "className", "name", "color", "size"]);
return ((0, jsx_runtime_1.jsx)(StyleOverrideButton, Object.assign({ className: className, variation: variation, "data-testid": "icon-button", "aria-label": buttonAriaLabel || `${getIconName(name)} icon button` }, props, { children: (0, jsx_runtime_1.jsx)(icon_1.default, { name: name, color: color, size: size }) })));
};
exports.InteractiveIcon = (0, styled_components_1.default)(IconButton).withConfig({ displayName: "brc-sc-InteractiveIcon", componentId: "brc-sc-1chnnt7" }) ``;
exports.default = (0, styled_components_1.default)(IconButton).withConfig({ componentId: "brc-sc-1n24590" }) ``;
//# sourceMappingURL=icon-button.js.map