@navinc/base-react-components
Version:
Nav's Pattern Library
82 lines • 3.37 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 { styled } from 'styled-components';
const variants = {
xl: {
fontFamily: 'Manrope, sans-serif',
fontSize: '56px',
lineHeight: '1.143em', // approx 64px
htmlElement: 'h1',
},
lg: {
fontFamily: 'Manrope, sans-serif',
fontSize: '48px',
lineHeight: '1.167em', // approx 56px
htmlElement: 'h2',
},
md: {
fontFamily: 'Manrope, sans-serif',
fontSize: '32px',
lineHeight: '1.125em', // approx 36px
htmlElement: 'h3',
},
sm: {
fontFamily: 'Manrope, sans-serif',
fontSize: '24px',
lineHeight: '1.333em', // approx 32px
htmlElement: 'h4',
},
xs: {
fontFamily: 'Manrope, sans-serif',
fontSize: '20px',
lineHeight: '1.4em', // approx 28px
htmlElement: 'h5',
},
};
/**
* @deprecated Use `CopyVariant as Copy` instead. Use `component='h#'` to turn any Copy component into a Header tag. This component will be removed in a future release. CopyVariant replaces Header, Copy, and Text.
*
* Note: Header 'xl' and 'lg' size down to 'lg' and 'md' respectively on mobile.
*/
export const Header = styled.h1.attrs((_a) => {
var _b;
var { size } = _a, props = __rest(_a, ["size"]);
if (!size) {
size = 'xs';
}
return Object.assign(Object.assign({}, props), {
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- not sure if it is safe to remove the optional chaining
as: (_b = variants[size]) === null || _b === void 0 ? void 0 : _b.htmlElement, size });
}).withConfig({ displayName: "brc-sc-Header", componentId: "brc-sc-181i98z" }) `
font-family: ${({ size }) => {
var _a, _b;
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- not sure if it is safe to remove the optional chaining
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.navNeutralDark};
font-size: ${({ size }) => {
var _a, _b;
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- not sure if it is safe to remove the optional chaining
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;
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- not sure if it is safe to remove the optional chaining
return (_b = (_a = variants[size]) === null || _a === void 0 ? void 0 : _a.lineHeight) !== null && _b !== void 0 ? _b : variants.md.lineHeight;
}};
font-weight: bold;
`;
Header.displayName = 'Header';
//# sourceMappingURL=header.js.map