@jobber/components 6.24.0 → 6.25.0

package/dist/Typography/Typography.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { CSSProperties, ReactNode } from "react";
 import fontSizes from "./css/FontSizes.module.css";
 import fontWeights from "./css/FontWeights.module.css";
 import textCases from "./css/TextCases.module.css";
@@ -42,6 +42,22 @@ export interface TypographyProps {
      * @example "double color-invoice" for a double underline in the specified color
      */
     readonly underline?: UnderlineStyle | UnderlineStyleWithColor | undefined;
+    /**
+     * **Use at your own risk:** Custom classNames for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_className?: {
+        textStyle?: string;
+    };
+    /**
+     * **Use at your own risk:** Custom style for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_style?: {
+        textStyle?: CSSProperties;
+    };
 }
 export type TypographyOptions = Omit<TypographyProps, "children">;
-export declare function Typography({ id, children, element: Tag, size, align, fontWeight, textCase, textColor, emphasisType, numberOfLines, fontFamily, underline, }: TypographyProps): JSX.Element;
+export declare function Typography({ id, children, element: Tag, size, align, fontWeight, textCase, textColor, emphasisType, numberOfLines, fontFamily, underline, UNSAFE_className, UNSAFE_style, }: TypographyProps): JSX.Element;

package/dist/Typography-cjs.js

@@ -23,32 +23,33 @@ var fontFamilies = {"base":"V9SSKxs15xE-","display":"dvw7zxC9s9g-","spinning":"N
 
 var underlineStyles = {"basicUnderline":"qp8E5e4q-so-","spinning":"F-Ybr7sJi6Q-"};
 
-function Typography({ id, children, element: Tag = "p", size, align, fontWeight = "regular", textCase, textColor, emphasisType, numberOfLines, fontFamily, underline, }) {
+function Typography({ id, children, element: Tag = "p", size, align, fontWeight = "regular", textCase, textColor, emphasisType, numberOfLines, fontFamily, underline, UNSAFE_className, UNSAFE_style, }) {
     const shouldTruncateText = numberOfLines && numberOfLines > 0;
-    const className = classnames(styles.base, fontWeights[fontWeight], size && fontSizes[size], textCase && textCases[textCase], textColor && textColors[textColor], emphasisType && emphasis[emphasisType], fontFamily && fontFamilies[fontFamily], shouldTruncateText && truncate.textTruncate, underline && underlineStyles.basicUnderline, Object.assign({}, (align && { [alignment[align]]: align !== `start` })));
-    let stylesOverrides = {};
-    if (shouldTruncateText) {
-        stylesOverrides = {
+    const className = classnames(styles.base, fontWeights[fontWeight], size && fontSizes[size], textCase && textCases[textCase], textColor && textColors[textColor], emphasisType && emphasis[emphasisType], fontFamily && fontFamilies[fontFamily], shouldTruncateText && truncate.textTruncate, underline && underlineStyles.basicUnderline, Object.assign({}, (align && { [alignment[align]]: align !== `start` })), UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.textStyle);
+    const truncateStyles = shouldTruncateText
+        ? {
             WebkitLineClamp: numberOfLines,
             WebkitBoxOrient: "vertical",
-        };
-    }
-    if (underline) {
-        const [underlineStyle, underlineColor] = underline.split(" ");
-        stylesOverrides.textDecorationStyle = underlineStyle;
-        stylesOverrides.textDecorationColor = computeUnderlineColor(underlineColor, textColor);
-    }
-    return (React.createElement(Tag, { id: id, className: className, style: stylesOverrides }, children));
+        }
+        : {};
+    const underlineInlineStyles = computeUnderlineStyles(underline, textColor);
+    return (React.createElement(Tag, { id: id, className: className, style: Object.assign(Object.assign(Object.assign({}, truncateStyles), underlineInlineStyles), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.textStyle) }, children));
 }
-function computeUnderlineColor(textDecorationColor, textColor) {
-    // Use the specified underline color if one is provided. If no underline color
-    // is specified, fall back to the text color for the underline.
-    if (textDecorationColor) {
-        return `var(--${textDecorationColor})`;
+function computeUnderlineStyles(underline, textColor) {
+    if (!underline) {
+        return {};
+    }
+    const [underlineStyle, underlineColor] = underline.split(" ");
+    const underlineInlineStyles = {
+        textDecorationStyle: underlineStyle,
+    };
+    if (underlineColor) {
+        underlineInlineStyles.textDecorationColor = `var(--${underlineColor})`;
     }
-    if (textColor) {
-        return textColors[textColor];
+    else if (textColor) {
+        underlineInlineStyles.textDecorationColor = textColors[textColor];
     }
+    return underlineInlineStyles;
 }
 
 exports.Typography = Typography;

package/dist/Typography-es.js

@@ -21,32 +21,33 @@ var fontFamilies = {"base":"V9SSKxs15xE-","display":"dvw7zxC9s9g-","spinning":"N
 
 var underlineStyles = {"basicUnderline":"qp8E5e4q-so-","spinning":"F-Ybr7sJi6Q-"};
 
-function Typography({ id, children, element: Tag = "p", size, align, fontWeight = "regular", textCase, textColor, emphasisType, numberOfLines, fontFamily, underline, }) {
+function Typography({ id, children, element: Tag = "p", size, align, fontWeight = "regular", textCase, textColor, emphasisType, numberOfLines, fontFamily, underline, UNSAFE_className, UNSAFE_style, }) {
     const shouldTruncateText = numberOfLines && numberOfLines > 0;
-    const className = classnames(styles.base, fontWeights[fontWeight], size && fontSizes[size], textCase && textCases[textCase], textColor && textColors[textColor], emphasisType && emphasis[emphasisType], fontFamily && fontFamilies[fontFamily], shouldTruncateText && truncate.textTruncate, underline && underlineStyles.basicUnderline, Object.assign({}, (align && { [alignment[align]]: align !== `start` })));
-    let stylesOverrides = {};
-    if (shouldTruncateText) {
-        stylesOverrides = {
+    const className = classnames(styles.base, fontWeights[fontWeight], size && fontSizes[size], textCase && textCases[textCase], textColor && textColors[textColor], emphasisType && emphasis[emphasisType], fontFamily && fontFamilies[fontFamily], shouldTruncateText && truncate.textTruncate, underline && underlineStyles.basicUnderline, Object.assign({}, (align && { [alignment[align]]: align !== `start` })), UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.textStyle);
+    const truncateStyles = shouldTruncateText
+        ? {
             WebkitLineClamp: numberOfLines,
             WebkitBoxOrient: "vertical",
-        };
-    }
-    if (underline) {
-        const [underlineStyle, underlineColor] = underline.split(" ");
-        stylesOverrides.textDecorationStyle = underlineStyle;
-        stylesOverrides.textDecorationColor = computeUnderlineColor(underlineColor, textColor);
-    }
-    return (React.createElement(Tag, { id: id, className: className, style: stylesOverrides }, children));
+        }
+        : {};
+    const underlineInlineStyles = computeUnderlineStyles(underline, textColor);
+    return (React.createElement(Tag, { id: id, className: className, style: Object.assign(Object.assign(Object.assign({}, truncateStyles), underlineInlineStyles), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.textStyle) }, children));
 }
-function computeUnderlineColor(textDecorationColor, textColor) {
-    // Use the specified underline color if one is provided. If no underline color
-    // is specified, fall back to the text color for the underline.
-    if (textDecorationColor) {
-        return `var(--${textDecorationColor})`;
+function computeUnderlineStyles(underline, textColor) {
+    if (!underline) {
+        return {};
+    }
+    const [underlineStyle, underlineColor] = underline.split(" ");
+    const underlineInlineStyles = {
+        textDecorationStyle: underlineStyle,
+    };
+    if (underlineColor) {
+        underlineInlineStyles.textDecorationColor = `var(--${underlineColor})`;
     }
-    if (textColor) {
-        return textColors[textColor];
+    else if (textColor) {
+        underlineInlineStyles.textDecorationColor = textColors[textColor];
     }
+    return underlineInlineStyles;
 }
 
 export { Typography as T };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.24.0",
+  "version": "6.25.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -489,5 +489,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "890c41d54e4a8950debd81a49d028cec6a8408b2"
+  "gitHead": "b5aa4ca87e9b0899c7aeacb09056bd8c6f10d13a"
 }