@navinc/base-react-components
Version:
Nav's Pattern Library
325 lines • 10.8 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 { forwardRef } from 'react';
import { isKeyOf } from '@navinc/utils';
import { baseTheme } from '../../themes/base-theme.js';
import { cn } from '../../cn.js';
import { cva } from 'class-variance-authority';
import { addClassNameTo } from '../../add-classname-to.js';
import { styled } from 'styled-components';
const DEFAULT_SIZE = 'body2';
export const sizes = [
'display1',
'display2',
'title1',
'title2',
'title3',
'headline',
'body1',
'body2',
'caption1',
'caption2',
];
const styledSizes = {
display1: {
regular: {
fontSize: '45px',
lineHeight: '52px',
fontWeight: 400,
letterSpacing: '-0.5px',
fontFamily: baseTheme.fontSecondary,
textTransform: 'inherit',
},
emphasized: {
fontSize: '45px',
lineHeight: '52px',
fontWeight: 700,
letterSpacing: '-0.5px',
fontFamily: baseTheme.fontSecondary,
textTransform: 'inherit',
},
uppercase: undefined,
},
display2: {
regular: {
fontSize: '36px',
lineHeight: '42px',
fontWeight: 400,
letterSpacing: '-0.5px',
fontFamily: baseTheme.fontSecondary,
textTransform: 'inherit',
},
emphasized: {
fontSize: '36px',
lineHeight: '42px',
fontWeight: 700,
letterSpacing: '-0.5px',
fontFamily: baseTheme.fontSecondary,
textTransform: 'inherit',
},
uppercase: undefined,
},
title1: {
regular: {
fontSize: '28px',
lineHeight: '34px',
fontWeight: 400,
letterSpacing: '-0.25px',
fontFamily: baseTheme.fontPrimary,
textTransform: 'inherit',
},
emphasized: {
fontSize: '28px',
lineHeight: '34px',
fontWeight: 600,
letterSpacing: '-0.25px',
fontFamily: baseTheme.fontPrimary,
textTransform: 'inherit',
},
uppercase: undefined,
},
title2: {
regular: {
fontSize: '22px',
lineHeight: '28px',
fontWeight: 400,
letterSpacing: '-0.25px',
fontFamily: baseTheme.fontPrimary,
textTransform: 'inherit',
},
emphasized: {
fontSize: '22px',
lineHeight: '28px',
fontWeight: 600,
letterSpacing: '-0.25px',
fontFamily: baseTheme.fontPrimary,
textTransform: 'inherit',
},
uppercase: undefined,
},
title3: {
regular: {
fontSize: '20px',
lineHeight: '24px',
fontWeight: 400,
letterSpacing: '0',
fontFamily: baseTheme.fontPrimary,
textTransform: 'inherit',
},
emphasized: {
fontSize: '20px',
lineHeight: '24px',
fontWeight: 600,
letterSpacing: '0',
fontFamily: baseTheme.fontPrimary,
textTransform: 'inherit',
},
uppercase: undefined,
},
headline: {
// regular and emphasized are the same
regular: {
fontSize: '16px',
lineHeight: '22px',
fontWeight: 600,
letterSpacing: '0',
fontFamily: baseTheme.fontPrimary,
textTransform: 'inherit',
},
emphasized: {
fontSize: '16px',
lineHeight: '22px',
fontWeight: 600,
letterSpacing: '0',
fontFamily: baseTheme.fontPrimary,
textTransform: 'inherit',
},
uppercase: undefined,
},
body1: {
regular: {
fontSize: '16px',
lineHeight: '22px',
fontWeight: 400,
letterSpacing: '-0.25px',
fontFamily: baseTheme.fontPrimary,
textTransform: 'inherit',
},
emphasized: {
fontSize: '16px',
lineHeight: '22px',
fontWeight: 500,
letterSpacing: '-0.25px',
fontFamily: baseTheme.fontPrimary,
textTransform: 'inherit',
},
uppercase: undefined,
},
body2: {
regular: {
fontSize: '14px',
lineHeight: '20px',
fontWeight: 400,
letterSpacing: '-0.25px',
fontFamily: baseTheme.fontPrimary,
textTransform: 'inherit',
},
emphasized: {
fontSize: '14px',
lineHeight: '20px',
fontWeight: 500,
letterSpacing: '-0.25px',
fontFamily: baseTheme.fontPrimary,
textTransform: 'inherit',
},
uppercase: undefined,
},
caption1: {
regular: {
fontSize: '12px',
lineHeight: '16px',
fontWeight: 400,
letterSpacing: '0',
fontFamily: baseTheme.fontPrimary,
textTransform: 'inherit',
},
emphasized: {
fontSize: '12px',
lineHeight: '16px',
fontWeight: 600,
letterSpacing: '0',
fontFamily: baseTheme.fontPrimary,
textTransform: 'inherit',
},
uppercase: {
fontSize: '12px',
lineHeight: '16px',
fontWeight: 600,
letterSpacing: '0.5px',
fontFamily: baseTheme.fontPrimary,
textTransform: 'uppercase',
},
},
caption2: {
regular: {
fontSize: '11px',
lineHeight: '13px',
fontWeight: 400,
letterSpacing: '0',
fontFamily: baseTheme.fontPrimary,
textTransform: 'inherit',
},
emphasized: {
fontSize: '11px',
lineHeight: '13px',
fontWeight: 500,
letterSpacing: '0',
fontFamily: baseTheme.fontPrimary,
textTransform: 'inherit',
},
uppercase: {
fontSize: '11px',
lineHeight: '13px',
fontWeight: 500,
letterSpacing: '0.5px',
fontFamily: baseTheme.fontPrimary,
textTransform: 'uppercase',
},
},
};
export const variants = ['regular', 'emphasized', 'uppercase'];
export const componentVariants = ['p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
export const typographyStyles = ({ size, variant }) => {
var _a;
// protection against invalid size or variant values
const resolvedSize = isKeyOf(size, styledSizes) ? size : DEFAULT_SIZE;
const selectedSizeProps = styledSizes[resolvedSize];
const resolvedVariant = isKeyOf(variant, selectedSizeProps) ? variant : 'regular';
return (_a = selectedSizeProps[resolvedVariant]) !== null && _a !== void 0 ? _a : selectedSizeProps.regular;
};
const copyVariants = cva('block p-0 m-0', {
variants: {
component: {
span: 'inline',
p: '',
h1: '',
h2: '',
h3: '',
h4: '',
h5: '',
h6: '',
},
underline: {
true: 'underline',
},
},
});
const BaseCopy = forwardRef((_a, ref) => {
var { component, className, size = 'body2', variant = 'regular', underline } = _a, props = __rest(_a, ["component", "className", "size", "variant", "underline"]);
const Component = component || 'p';
const variantClassSuffix = variant === 'emphasized' || variant === 'uppercase' ? `-${variant}` : '';
const typographyClass = `${variantClassSuffix !== '' ? size : ''} ${size}${variantClassSuffix}`;
return (_jsx(Component, Object.assign({}, props, { ref: ref, className: cn(copyVariants({ component: component, underline, className }), typographyClass) })));
});
const setColor = (theme, color) => isKeyOf(color, theme.colors) ? theme.colors[color] : color || theme.colors.onSurface;
/**
* 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 component - optional - defaults to `p` - for nested elements, use `span`
* @param underline - optional
* @param props - optional - any other props that can be passed to a p tag
* @returns a p tag styled with the size, variant, and underline
* @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" underline={true}>
* 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">
* copy
* </Copy>{' '}
* component. The inner Copy component is using the `component` prop with a value of 'span'
* </Copy>
*
* @deprecated Use our custom typography classes and tailwind instead:
* ```
* <p className="display1-emphasized text-onSurface">Text</p>
* instead of
* <Copy size="display1" variant="emphasized" color="onSurface">Text</Copy>
* ```
*/
export const Copy = styled(BaseCopy) `
color: ${({ color, theme }) => setColor(theme, color)};
`;
Copy.displayName = 'Copy';
export const CopyInheritColor = addClassNameTo(Copy, '!text-inherit');
/** Copy, but with the color defaulted to `onSurface`. Eventually, Copy should probably use the same default */
export const CopyOnSurface = addClassNameTo(Copy, '!text-onSurface');
//# sourceMappingURL=index.js.map