@metamask/design-system-react-native
Version:
46 lines • 2.41 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.generateTextClassNames = void 0;
/* eslint-disable jsdoc/check-param-names */
/* eslint-disable jsdoc/require-param */
const types_1 = require("../../types/index.cjs");
const Text_constants_1 = require("./Text.constants.cjs");
/**
* Generates a combined string of Tailwind CSS class names for the Text component
* based on the provided props. This utility simplifies the process of combining
* typography, color, font weight, and style classes, ensuring consistency with the
* design system.
*
* @param variant - Specifies the typography variant (e.g., body, heading, display).
* @param color - Specifies the text color based on the design system's color tokens.
* @param fontWeight - Specifies the font weight (e.g., normal, bold).
* @param fontFamily - Specifies the font family ('e.g. default, hero, accent)
* @param fontStyle - Specifies the font style (e.g., normal, italic).
* @param twClassName - Additional custom Tailwind class names to be appended to the generated classes.
* @returns A string of combined Tailwind CSS class names.
*
* Example:
* ```
* const classNames = generateTextClassNames({
* variant: TextVariant.BodyMd,
* color: TextColor.PrimaryDefault,
* fontWeight: FontWeight.Bold,
* fontFamily: FontFamily.Default,
* fontStyle: FontStyle.Italic,
* twClassName: 'text-center underline',
* });
*
* console.log(classNames);
* // Output: "text-body-md font-default-bold-italic text-primary-default text-center underline"
* ```
*/
const generateTextClassNames = ({ variant = types_1.TextVariant.BodyMd, color = types_1.TextColor.TextDefault, fontWeight = types_1.FontWeight.Regular, fontFamily = types_1.FontFamily.Default, fontStyle = types_1.FontStyle.Normal, twClassName = '', }) => {
const isItalic = fontStyle === types_1.FontStyle.Italic;
const textClassname = `text-${variant}`;
const fontFamilyClassname = `font-${fontFamily}${Text_constants_1.TWCLASSMAP_TEXT_FONTWEIGHT[fontWeight]}${isItalic && fontFamily === types_1.FontFamily.Default ? '-italic' : ''}`;
const textColorClassname = `${color}`;
const mergedClassnames = `${textClassname} ${fontFamilyClassname} ${textColorClassname} ${twClassName}`.trim();
return mergedClassnames;
};
exports.generateTextClassNames = generateTextClassNames;
//# sourceMappingURL=Text.utilities.cjs.map