@navinc/base-react-components
Version:
Nav's Pattern Library
251 lines • 9.62 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.CopyVariant = exports.getStyle = exports.flatVariants = exports.componentVariants = exports.fontFamilies = exports.variants = exports.cssProps = exports.sizes = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const theme_1 = require("./theme");
const prop_types_1 = __importDefault(require("prop-types"));
const DEFAULT_SIZE = 'body2';
exports.sizes = {
display1: {
regular: {
fontSize: '45px',
lineHeight: '52px',
fontWeight: 400,
letterSpacing: '-0.5px',
},
emphasized: {
fontSize: '45px',
lineHeight: '52px',
fontWeight: 700,
letterSpacing: '-0.5px',
},
},
display2: {
regular: {
fontSize: '36px',
lineHeight: '42px',
fontWeight: 400,
letterSpacing: '-0.5px',
},
emphasized: {
fontSize: '36px',
lineHeight: '42px',
fontWeight: 700,
letterSpacing: '-0.5px',
},
},
title1: {
regular: {
fontSize: '28px',
lineHeight: '34px',
fontWeight: 400,
letterSpacing: '-0.25px',
},
emphasized: {
fontSize: '28px',
lineHeight: '34px',
fontWeight: 600,
letterSpacing: '-0.25px',
},
},
title2: {
regular: {
fontSize: '22px',
lineHeight: '28px',
fontWeight: 400,
letterSpacing: '-0.25px',
},
emphasized: {
fontSize: '22px',
lineHeight: '28px',
fontWeight: 600,
letterSpacing: '-0.25px',
},
},
title3: {
regular: {
fontSize: '20px',
lineHeight: '24px',
fontWeight: 400,
letterSpacing: '0',
},
emphasized: {
fontSize: '20px',
lineHeight: '24px',
fontWeight: 600,
letterSpacing: '0',
},
},
headline: {
emphasized: {
fontSize: '16px',
lineHeight: '22px',
fontWeight: 600,
letterSpacing: '0',
},
},
body1: {
regular: {
fontSize: '16px',
lineHeight: '22px',
fontWeight: 400,
letterSpacing: '-0.25px',
},
emphasized: {
fontSize: '16px',
lineHeight: '22px',
fontWeight: 500,
letterSpacing: '-0.25px',
},
},
body2: {
regular: {
fontSize: '14px',
lineHeight: '20px',
fontWeight: 400,
letterSpacing: '-0.25px',
},
emphasized: {
fontSize: '14px',
lineHeight: '20px',
fontWeight: 500,
letterSpacing: '-0.25px',
},
},
caption1: {
regular: {
fontSize: '12px',
lineHeight: '16px',
fontWeight: 400,
letterSpacing: '0',
},
emphasized: {
fontSize: '12px',
lineHeight: '16px',
fontWeight: 600,
letterSpacing: '0',
},
uppercase: {
fontSize: '12px',
lineHeight: '16px',
fontWeight: 600,
letterSpacing: '0.5px',
textTransform: 'uppercase',
},
},
caption2: {
regular: {
fontSize: '11px',
lineHeight: '13px',
fontWeight: 400,
letterSpacing: '0',
},
emphasized: {
fontSize: '11px',
lineHeight: '13px',
fontWeight: 500,
letterSpacing: '0',
},
uppercase: {
fontSize: '11px',
lineHeight: '13px',
fontWeight: 500,
letterSpacing: '0.5px',
textTransform: 'uppercase',
},
},
};
exports.cssProps = ['fontSize', 'lineHeight', 'fontWeight', 'letterSpacing', 'textTransform'];
exports.variants = ['regular', 'emphasized', 'uppercase'];
exports.fontFamilies = ['Inter', 'Manrope'];
exports.componentVariants = ['p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
exports.flatVariants = Object.keys(exports.sizes);
const getStyle = (cssProp, size, variant) => {
var _a, _b, _c, _d, _e, _f;
// protection against invalid size or variant values
size = size && (exports.sizes === null || exports.sizes === void 0 ? void 0 : exports.sizes[size]) ? size : DEFAULT_SIZE;
variant = variant && ((_a = exports.sizes === null || exports.sizes === void 0 ? void 0 : exports.sizes[size]) === null || _a === void 0 ? void 0 : _a[variant]) ? variant : (_b = Object.values(exports.sizes === null || exports.sizes === void 0 ? void 0 : exports.sizes[size])) === null || _b === void 0 ? void 0 : _b[0];
return (((_d = (_c = exports.sizes === null || exports.sizes === void 0 ? void 0 : exports.sizes[size]) === null || _c === void 0 ? void 0 : _c[variant]) === null || _d === void 0 ? void 0 : _d[cssProp]) || ((_f = (_e = Object.values(exports.sizes === null || exports.sizes === void 0 ? void 0 : exports.sizes[size])) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f[cssProp]) || exports.sizes.body2.regular[cssProp]);
};
exports.getStyle = getStyle;
const setColor = (color, theme) => color ? (0, theme_1.themeColorOrCssColor)(color) : theme.navNeutralDark;
/**
* A Copy component that includes the same functionality as Text(deprecating) and Header(deprecating).
*
* By removing the dependency on size being tied to header tags, we can use this component for any text component.
*
* When using nested Copy use `component='span'` to properly cast the nested `p` tags.
*
* Link to Design Doc: http://go/typography
*
* @param size - optional - defaults to `body2`
* @param variant - optional - defaults to the first variant in the size object (only headline defaults to `emphasized`)
* @param color - optional - defaults to `navNeutralDark` - a color string or a theme color
* @param component - optional - defaults to `p` - for nested elements, use `span`
* @param underline - optional
* @param fontFamily - optional - defaults to `Inter`
* @param props - optional - any other props that can be passed to a p tag
* @returns a p tag styled with the size, variant, color, underline, and fontFamily props
* @example
* // default size will be `body2`
* <Copy size="title1">Yar Pirate Ipsum</Copy>
* @example
* // example with all props being used
* <Copy size="body1" variant="emphasized" color="navStatusPositive" underline={true} fontFamily="Manrope">
* Yar Pirate Ipsum
* </Copy>
* @example
* // casting as a Header
* <Copy component='h1' size="title1">Yar Pirate Ipsum</Copy>
* @example
* // This is an example of a nested Copy component. The inner Copy component is using the `as` prop with a value of 'span'
* <Copy>
* This is a nested{' '}
* <Copy component="span" size="headline" color="navStatusNegative">
* copy
* </Copy>{' '}
* component. The inner Copy component is using the `component` prop with a value of 'span'
* </Copy>
*/
exports.CopyVariant = (0, styled_components_1.default)((_a) => {
var { component } = _a, props = __rest(_a, ["component"]);
const Component = component || 'p';
return (0, jsx_runtime_1.jsx)(Component, Object.assign({}, props));
}).withConfig({ displayName: "brc-sc-CopyVariant", componentId: "brc-sc-he9ako" }) `
${({ component }) => component !== 'span' && 'display: block'};
margin: 0;
padding: 0;
color: ${({ theme, color }) => setColor(color, theme)};
font-family: ${({ fontFamily = 'Inter', theme }) => fontFamily === 'Inter' ? theme.fontPrimary : theme.fontSecondary};
font-size: ${({ size, variant }) => (0, exports.getStyle)('fontSize', size, variant)};
line-height: ${({ size, variant }) => (0, exports.getStyle)('lineHeight', size, variant)};
font-weight: ${({ size, variant }) => (0, exports.getStyle)('fontWeight', size, variant)};
letter-spacing: ${({ size, variant }) => (0, exports.getStyle)('letterSpacing', size, variant)};
text-transform: ${({ size, variant }) => (0, exports.getStyle)('textTransform', size, variant)};
text-decoration: ${({ underline }) => (underline ? 'underline' : 'none')};
`;
exports.CopyVariant.displayName = 'Copy';
exports.CopyVariant.propTypes = {
size: prop_types_1.default.oneOf(exports.flatVariants),
variant: prop_types_1.default.oneOf(exports.variants),
color: prop_types_1.default.string,
underline: prop_types_1.default.bool,
fontFamily: prop_types_1.default.oneOf(exports.fontFamilies),
component: prop_types_1.default.oneOf(exports.componentVariants),
};
//# sourceMappingURL=copy-variant.js.map