@navinc/base-react-components
Version:
Nav's Pattern Library
244 lines • 8.82 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 { jsx as _jsx } from "react/jsx-runtime";
import styled from 'styled-components';
import { themeColorOrCssColor } from './theme';
import propTypes from 'prop-types';
const DEFAULT_SIZE = 'body2';
export const 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',
},
},
};
export const cssProps = ['fontSize', 'lineHeight', 'fontWeight', 'letterSpacing', 'textTransform'];
export const variants = ['regular', 'emphasized', 'uppercase'];
export const fontFamilies = ['Inter', 'Manrope'];
export const componentVariants = ['p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
export const flatVariants = Object.keys(sizes);
export const getStyle = (cssProp, size, variant) => {
var _a, _b, _c, _d, _e, _f;
// protection against invalid size or variant values
size = size && (sizes === null || sizes === void 0 ? void 0 : sizes[size]) ? size : DEFAULT_SIZE;
variant = variant && ((_a = sizes === null || sizes === void 0 ? void 0 : sizes[size]) === null || _a === void 0 ? void 0 : _a[variant]) ? variant : (_b = Object.values(sizes === null || sizes === void 0 ? void 0 : sizes[size])) === null || _b === void 0 ? void 0 : _b[0];
return (((_d = (_c = sizes === null || sizes === void 0 ? void 0 : sizes[size]) === null || _c === void 0 ? void 0 : _c[variant]) === null || _d === void 0 ? void 0 : _d[cssProp]) || ((_f = (_e = Object.values(sizes === null || sizes === void 0 ? void 0 : sizes[size])) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f[cssProp]) || sizes.body2.regular[cssProp]);
};
const setColor = (color, theme) => color ? 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>
*/
export const CopyVariant = styled((_a) => {
var { component } = _a, props = __rest(_a, ["component"]);
const Component = component || 'p';
return _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 }) => getStyle('fontSize', size, variant)};
line-height: ${({ size, variant }) => getStyle('lineHeight', size, variant)};
font-weight: ${({ size, variant }) => getStyle('fontWeight', size, variant)};
letter-spacing: ${({ size, variant }) => getStyle('letterSpacing', size, variant)};
text-transform: ${({ size, variant }) => getStyle('textTransform', size, variant)};
text-decoration: ${({ underline }) => (underline ? 'underline' : 'none')};
`;
CopyVariant.displayName = 'Copy';
CopyVariant.propTypes = {
size: propTypes.oneOf(flatVariants),
variant: propTypes.oneOf(variants),
color: propTypes.string,
underline: propTypes.bool,
fontFamily: propTypes.oneOf(fontFamilies),
component: propTypes.oneOf(componentVariants),
};
//# sourceMappingURL=copy-variant.js.map