@navinc/base-react-components
Version:
Nav's Pattern Library
92 lines • 3.2 kB
JavaScript
import styled, { useTheme } from 'styled-components';
import isRebrand from './is-rebrand';
const variants = {
'nav-blue': {
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',
},
xs: {
fontFamily: 'postgrotesk, Roboto, Helvetica, sans-serif',
fontSize: '16px',
lineHeight: '24px',
htmlElement: 'h4',
},
},
'nav-purple': {
xl: {
fontFamily: 'Cosmica, sans-serif',
fontSize: '56px',
lineHeight: '64px',
htmlElement: 'h1',
},
lg: {
fontFamily: 'Cosmica, sans-serif',
fontSize: '48px',
lineHeight: '56px',
htmlElement: 'h2',
},
md: {
fontFamily: 'Cosmica, sans-serif',
fontSize: '32px',
lineHeight: '36px',
htmlElement: 'h3',
},
sm: {
fontFamily: 'Cosmica, sans-serif',
fontSize: '24px',
lineHeight: '32px',
htmlElement: 'h4',
},
xs: {
fontFamily: 'Cosmica, sans-serif',
fontSize: '20px',
lineHeight: '28px',
htmlElement: 'h5',
},
},
};
export const Header = styled.h1.attrs(({ size }) => {
var _a;
const theme = useTheme();
if (!size) {
size = isRebrand(theme) ? 'xs' : 'md';
}
return {
as: (_a = variants[theme.name][size]) === null || _a === void 0 ? void 0 : _a.htmlElement,
size,
theme,
};
}).withConfig({ displayName: "brc-sc-Header", componentId: "brc-sc-1wvlsd3" }) `
font-family: ${({ size, theme }) => { var _a, _b; return (_b = (_a = variants[theme.name][size]) === null || _a === void 0 ? void 0 : _a.fontFamily) !== null && _b !== void 0 ? _b : variants[theme.name].md.fontFamily; }};
margin-top: 0;
margin-bottom: 0;
padding: 0;
color: ${({ theme }) => theme.neutral500};
font-size: ${({ size, theme }) => { var _a, _b; return (_b = (_a = variants[theme.name][size]) === null || _a === void 0 ? void 0 : _a.fontSize) !== null && _b !== void 0 ? _b : variants[theme.name].md.fontSize; }};
line-height: ${({ size, theme }) => { var _a, _b; return (_b = (_a = variants[theme.name][size]) === null || _a === void 0 ? void 0 : _a.lineHeight) !== null && _b !== void 0 ? _b : variants[theme.name].md.lineHeight; }};
font-weight: bold;
`;
Header.displayName = 'Header';
export default Header;
//# sourceMappingURL=header.js.map