@navinc/base-react-components
Version:
Nav's Pattern Library
58 lines • 2.17 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Header = void 0;
const styled_components_1 = __importDefault(require("styled-components"));
const prop_types_1 = __importDefault(require("prop-types"));
const variants = {
xl: {
fontFamily: 'postgrotesk, Averta, Helvetica, sans-serif',
fontSize: '32px',
lineHeight: '38px',
htmlElement: 'h1',
},
lg: {
fontFamily: 'postgrotesk, Averta, Helvetica, sans-serif',
fontSize: '24px',
lineHeight: '30px',
htmlElement: 'h2',
},
md: {
fontFamily: 'postgrotesk, Averta, Helvetica, sans-serif',
fontSize: '20px',
lineHeight: '30px',
htmlElement: 'h3',
},
sm: {
fontFamily: 'postgrotesk, Roboto, Helvetica, sans-serif',
fontSize: '18px',
lineHeight: '28px',
htmlElement: 'h4',
},
};
exports.Header = styled_components_1.default.h1.attrs(({ size }) => {
var _a;
return ({
as: (_a = variants[size]) === null || _a === void 0 ? void 0 : _a.htmlElement,
});
}) `
font-family: ${({ size }) => { var _a, _b; return (_b = (_a = variants[size]) === null || _a === void 0 ? void 0 : _a.fontFamily) !== null && _b !== void 0 ? _b : variants.md.fontFamily; }};
margin-top: 0;
margin-bottom: 0;
padding: 0;
color: ${({ theme }) => theme.neutral500};
font-size: ${({ size }) => { var _a, _b; return (_b = (_a = variants[size]) === null || _a === void 0 ? void 0 : _a.fontSize) !== null && _b !== void 0 ? _b : variants.md.fontSize; }};
line-height: ${({ size }) => { var _a, _b; return (_b = (_a = variants[size]) === null || _a === void 0 ? void 0 : _a.lineHeight) !== null && _b !== void 0 ? _b : variants.md.lineHeight; }};
font-weight: bold;
`;
exports.Header.displayName = 'Header';
exports.Header.propTypes = {
size: prop_types_1.default.string,
};
exports.Header.defaultProps = {
size: 'md',
};
exports.default = exports.Header;
//# sourceMappingURL=header.js.map