@spark-web/text
Version:
--- title: Text storybookPath: typography-text--default isExperimentalPackage: false ---
292 lines (278 loc) • 8.9 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var react = require('react');
var jsxRuntime = require('@emotion/react/jsx-runtime');
var react$1 = require('@emotion/react');
var theme = require('@spark-web/theme');
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var box = require('@spark-web/box');
var ts = require('@spark-web/utils/ts');
var TextContext = /*#__PURE__*/react.createContext(undefined);
function useTextContext() {
return react.useContext(TextContext);
}
var DefaultTextPropsContext = /*#__PURE__*/react.createContext({
size: undefined,
tone: undefined,
weight: undefined
});
function DefaultTextPropsProvider(_ref) {
var children = _ref.children,
size = _ref.size,
tone = _ref.tone,
weight = _ref.weight;
var defaultTextProps = react.useMemo(function () {
return {
size: size,
tone: tone,
weight: weight
};
}, [size, tone, weight]);
return jsxRuntime.jsx(DefaultTextPropsContext.Provider, {
value: defaultTextProps,
children: children
});
}
var useDefaultTextProps = function useDefaultTextProps(_ref2) {
var _ref3, _ref4;
var sizeProp = _ref2.size,
toneProp = _ref2.tone,
weightProp = _ref2.weight;
var _useContext = react.useContext(DefaultTextPropsContext),
size = _useContext.size,
tone = _useContext.tone,
weight = _useContext.weight;
return {
size: (_ref3 = sizeProp !== null && sizeProp !== void 0 ? sizeProp : size) !== null && _ref3 !== void 0 ? _ref3 : 'standard',
tone: (_ref4 = toneProp !== null && toneProp !== void 0 ? toneProp : tone) !== null && _ref4 !== void 0 ? _ref4 : 'neutral',
weight: weightProp !== null && weightProp !== void 0 ? weightProp : weight
};
};
var Strong = function Strong(_ref) {
var children = _ref.children;
var theme$1 = theme.useTheme();
var styles = {
fontWeight: theme$1.typography.fontWeight.semibold
};
return jsxRuntime.jsx("strong", {
css: react$1.css(styles),
children: children
});
};
var useNumberOfLines = function useNumberOfLines(numberOfLines) {
if (!numberOfLines) {
return {};
}
return {
overflow: 'hidden',
display: '-webkit-box',
WebkitLineClamp: numberOfLines,
lineClamp: numberOfLines,
WebkitBoxOrient: 'vertical',
textOverflow: 'ellipsis',
overflowWrap: 'break-word',
wordBreak: 'break-word',
wordWrap: 'break-word'
};
};
var strategyMap = {
truncate: {
display: 'block',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
},
nowrap: {
whiteSpace: 'nowrap'
},
// https://css-tricks.com/better-line-breaks-for-long-urls/
breakword: {
display: 'block',
overflowWrap: 'break-word',
wordBreak: 'break-word',
wordWrap: 'break-word'
}
};
function useOverflowStrategy(strategy) {
if (!strategy) {
return null;
}
return strategyMap[strategy];
}
var invertableTones = {
neutral: {
dark: 'neutralInverted',
light: 'neutral'
},
muted: {
dark: 'mutedInverted',
light: 'muted'
},
link: {
dark: 'neutralInverted',
light: 'link'
}
};
function useForegroundTone(tone) {
var theme$1 = theme.useTheme();
var backgroundLightness = box.useBackgroundLightness();
if (tone in invertableTones) {
return theme$1.color.foreground[invertableTones[tone][backgroundLightness]];
}
return theme$1.color.foreground[tone];
}
function useText(_ref) {
var _ref$baseline = _ref.baseline,
baseline = _ref$baseline === void 0 ? true : _ref$baseline,
size = _ref.size,
tone = _ref.tone,
weight = _ref.weight;
var theme$1 = theme.useTheme();
var color = useForegroundTone(tone);
var _theme$typography$tex = theme$1.typography.text[size],
mobile = _theme$typography$tex.mobile,
tablet = _theme$typography$tex.tablet;
var responsiveStyles = theme$1.utils.responsiveStyles({
mobile: createTextStyles(mobile, {
includeTrims: baseline,
includeWeight: !weight
}),
tablet: createTextStyles(tablet, {
includeTrims: baseline,
includeWeight: !weight
})
});
var styles = [responsiveStyles, {
color: color,
fontFamily: theme$1.typography.fontFamily.sans.name,
fontWeight: weight ? theme$1.typography.fontWeight[weight] : undefined
}];
return styles;
}
function createTextStyles(_ref2) {
var fontSize = _ref2.fontSize,
fontWeight = _ref2.fontWeight,
lineHeight = _ref2.lineHeight,
trims = _ref2.trims;
var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
_ref3$includeTrims = _ref3.includeTrims,
includeTrims = _ref3$includeTrims === void 0 ? true : _ref3$includeTrims,
_ref3$includeWeight = _ref3.includeWeight,
includeWeight = _ref3$includeWeight === void 0 ? true : _ref3$includeWeight;
var pseudo = {
content: '" "',
display: 'table'
};
var leadingTrim = includeTrims ? {
'::before': _objectSpread(_objectSpread({}, pseudo), {}, {
marginBottom: trims.capHeightTrim
}),
'::after': _objectSpread(_objectSpread({}, pseudo), {}, {
marginTop: trims.baselineTrim
})
} : null;
return _objectSpread({
fontSize: fontSize,
fontWeight: includeWeight ? fontWeight : undefined,
lineHeight: lineHeight
}, leadingTrim);
}
var _excluded = ["as", "children", "data", "id", "align", "baseline", "css", "inline", "overflowStrategy", "size", "tabularNumbers", "tone", "transform", "weight", "numberOfLines"];
var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
var as = _ref.as,
children = _ref.children,
data = _ref.data,
id = _ref.id,
align = _ref.align,
baselineProp = _ref.baseline,
cssProps = _ref.css,
inline = _ref.inline,
overflowStrategy = _ref.overflowStrategy,
sizeProp = _ref.size,
tabularNumbers = _ref.tabularNumbers,
toneProp = _ref.tone,
transform = _ref.transform,
weightProp = _ref.weight,
numberOfLines = _ref.numberOfLines,
consumerProps = _objectWithoutProperties(_ref, _excluded);
var overflowStyles = useOverflowStrategy(overflowStrategy);
var textContext = useTextContext();
var _useDefaultTextProps = useDefaultTextProps({
size: sizeProp !== null && sizeProp !== void 0 ? sizeProp : textContext === null || textContext === void 0 ? void 0 : textContext.size,
tone: toneProp !== null && toneProp !== void 0 ? toneProp : textContext === null || textContext === void 0 ? void 0 : textContext.tone,
weight: weightProp !== null && weightProp !== void 0 ? weightProp : textContext === null || textContext === void 0 ? void 0 : textContext.weight
}),
size = _useDefaultTextProps.size,
tone = _useDefaultTextProps.tone,
weight = _useDefaultTextProps.weight;
var baseline = !inline && baselineProp;
var textStyles = useText({
baseline: baseline,
size: size,
tone: tone,
weight: weight
});
var numberOfLinesStyle = useNumberOfLines(numberOfLines);
var styles = [textStyles, {
display: inline ? 'inline' : 'block',
fontVariantNumeric: tabularNumbers ? 'tabular-nums' : undefined,
textAlign: align,
textTransform: transform
}];
// early exit for inline variant
if (inline) {
return jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
as: as !== null && as !== void 0 ? as : 'span',
data: data,
ref: forwardedRef,
id: id,
css: react$1.css(styles, cssProps),
children: children
}));
}
// prepare block variant
var content = function content() {
if (overflowStrategy) {
return jsxRuntime.jsx("span", {
css: react$1.css(overflowStyles),
children: children
});
}
if (numberOfLines) {
return jsxRuntime.jsx("span", {
style: numberOfLinesStyle,
children: children
});
}
return children;
};
var textContextValue = react.useMemo(function () {
return {
size: size,
tone: tone,
weight: weight
};
}, [size, tone, weight]);
return jsxRuntime.jsx(TextContext.Provider, {
value: textContextValue,
children: jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
as: as,
data: data,
ref: forwardedRef,
id: id,
css: react$1.css(styles, cssProps),
children: content()
}))
});
});
exports.DefaultTextPropsProvider = DefaultTextPropsProvider;
exports.Strong = Strong;
exports.Text = Text;
exports.createTextStyles = createTextStyles;
exports.useDefaultTextProps = useDefaultTextProps;
exports.useForegroundTone = useForegroundTone;
exports.useNumberOfLines = useNumberOfLines;
exports.useOverflowStrategy = useOverflowStrategy;
exports.useText = useText;
exports.useTextContext = useTextContext;