@ionic-internal/ionic-ds
Version:
Ionic Design System
53 lines (50 loc) • 2.92 kB
JavaScript
import { __rest, __assign, __makeTemplateObject } from '../../../_virtual/_tslib.js';
import React, { forwardRef, useContext } from 'react';
import clsx from '../../../node_modules/clsx/dist/clsx.m.js';
import styled, { ThemeContext, ThemeProvider } from 'styled-components';
import paragraphStyleMap from './paragraphStyleMap.js';
var Paragraph = forwardRef(function (_a, ref) {
var _b;
var _c = _a.level, level = _c === void 0 ? 3 : _c, _d = _a.lineHeight, lineHeight = _d === void 0 ? 'body' : _d, color = _a.color, props = __rest(_a, ["level", "lineHeight", "color"]);
var themeContext = useContext(ThemeContext) || {};
var theme = {
paragraph: __assign({ base: paragraphStyleMap }, (themeContext.paragraph ? themeContext.paragraph : {})),
};
return (React.createElement(ThemeProvider, { theme: theme },
React.createElement(ParagraphStyles, __assign({}, props, { ref: ref, "$level": level, "$lineHeight": lineHeight, "$color": color, className: clsx((_b = {},
_b[props.className] = Boolean(props.className),
_b['ds-paragraph'] = true,
_b["ds-paragraph-" + level] = true,
_b)) }))));
});
var ParagraphStyles = styled.p(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin: 0 0 1.6em 0;\n\n &:last-child {\n margin-block-end: 0;\n }\n\n ", "\n"], ["\n margin: 0 0 1.6em 0;\n\n &:last-child {\n margin-block-end: 0;\n }\n\n ",
"\n"])), function (_a) {
var $level = _a.$level, $lineHeight = _a.$lineHeight, $color = _a.$color, theme = _a.theme;
var _b = theme || {}, tokens = _b.tokens, themeName = _b.name;
function getStyle(key) {
var _a, _b;
var baseStyle = theme.paragraph.base[$level][key];
var themeStyle = (_b = (_a = theme.paragraph[themeName]) === null || _a === void 0 ? void 0 : _a[$level]) === null || _b === void 0 ? void 0 : _b[key];
if (key === 'lineHeight') {
if ($lineHeight === 'none')
return '';
return $lineHeight === 'prose'
? (tokens === null || tokens === void 0 ? void 0 : tokens.lineHeights.prose) || '1.8'
: baseStyle;
}
return themeName ? themeStyle || baseStyle : baseStyle;
}
var styles = [
"font-family: " + getStyle('font') + ";",
"font-size: " + getStyle('size') + ";",
"line-height: " + getStyle('lineHeight') + ";",
"letter-spacing: " + getStyle('letterSpacing') + ";",
"font-weight: " + getStyle('fontWeight') + ";",
"color: " + ($color ? $color : getStyle('color')) + ";",
"text-transform: " + (getStyle('transform') || 'none') + ";",
"font-feature-settings: " + (getStyle('fontFeatureSettings') || 'normal') + ";",
];
return styles;
});
var templateObject_1;
export default Paragraph;