UNPKG

@metamask/design-system-react-native

Version:
1 lines 3.32 kB
{"version":3,"file":"Text.utilities.mjs","sourceRoot":"","sources":["../../../src/components/Text/Text.utilities.ts"],"names":[],"mappings":"AAAA,4CAA4C;AAC5C,wCAAwC;AACxC,OAAO,EACL,UAAU,EACV,UAAU,EACV,SAAS,EACT,WAAW,EACX,SAAS,EACV,8BAAoB;AAErB,OAAO,EAAE,0BAA0B,EAAE,6BAAyB;AAG9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,EACrC,OAAO,GAAG,WAAW,CAAC,MAAM,EAC5B,KAAK,GAAG,SAAS,CAAC,WAAW,EAC7B,UAAU,GAAG,UAAU,CAAC,OAAO,EAC/B,UAAU,GAAG,UAAU,CAAC,OAAO,EAC/B,SAAS,GAAG,SAAS,CAAC,MAAM,EAC5B,WAAW,GAAG,EAAE,GACG,EAAU,EAAE;IAC/B,MAAM,QAAQ,GAAG,SAAS,KAAK,SAAS,CAAC,MAAM,CAAC;IAChD,MAAM,aAAa,GAAG,QAAQ,OAAO,EAAE,CAAC;IACxC,MAAM,mBAAmB,GAAG,QAAQ,UAAU,GAAG,0BAA0B,CAAC,UAAU,CAAC,GACrF,QAAQ,IAAI,UAAU,KAAK,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAC9D,EAAE,CAAC;IACH,MAAM,kBAAkB,GAAG,GAAG,KAAK,EAAE,CAAC;IACtC,MAAM,gBAAgB,GACpB,GAAG,aAAa,IAAI,mBAAmB,IAAI,kBAAkB,IAAI,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC;IAExF,OAAO,gBAAgB,CAAC;AAC1B,CAAC,CAAC","sourcesContent":["/* eslint-disable jsdoc/check-param-names */\n/* eslint-disable jsdoc/require-param */\nimport {\n FontWeight,\n FontFamily,\n FontStyle,\n TextVariant,\n TextColor,\n} from '../../types';\n\nimport { TWCLASSMAP_TEXT_FONTWEIGHT } from './Text.constants';\nimport type { TextProps } from './Text.types';\n\n/**\n * Generates a combined string of Tailwind CSS class names for the Text component\n * based on the provided props. This utility simplifies the process of combining\n * typography, color, font weight, and style classes, ensuring consistency with the\n * design system.\n *\n * @param variant - Specifies the typography variant (e.g., body, heading, display).\n * @param color - Specifies the text color based on the design system's color tokens.\n * @param fontWeight - Specifies the font weight (e.g., normal, bold).\n * @param fontFamily - Specifies the font family ('e.g. default, hero, accent)\n * @param fontStyle - Specifies the font style (e.g., normal, italic).\n * @param twClassName - Additional custom Tailwind class names to be appended to the generated classes.\n * @returns A string of combined Tailwind CSS class names.\n *\n * Example:\n * ```\n * const classNames = generateTextClassNames({\n * variant: TextVariant.BodyMd,\n * color: TextColor.PrimaryDefault,\n * fontWeight: FontWeight.Bold,\n * fontFamily: FontFamily.Default,\n * fontStyle: FontStyle.Italic,\n * twClassName: 'text-center underline',\n * });\n *\n * console.log(classNames);\n * // Output: \"text-body-md font-default-bold-italic text-primary-default text-center underline\"\n * ```\n */\nexport const generateTextClassNames = ({\n variant = TextVariant.BodyMd,\n color = TextColor.TextDefault,\n fontWeight = FontWeight.Regular,\n fontFamily = FontFamily.Default,\n fontStyle = FontStyle.Normal,\n twClassName = '',\n}: Partial<TextProps>): string => {\n const isItalic = fontStyle === FontStyle.Italic;\n const textClassname = `text-${variant}`;\n const fontFamilyClassname = `font-${fontFamily}${TWCLASSMAP_TEXT_FONTWEIGHT[fontWeight]}${\n isItalic && fontFamily === FontFamily.Default ? '-italic' : ''\n }`;\n const textColorClassname = `${color}`;\n const mergedClassnames =\n `${textClassname} ${fontFamilyClassname} ${textColorClassname} ${twClassName}`.trim();\n\n return mergedClassnames;\n};\n"]}