@trackunit/react-components 0.1.284 → 0.1.285

package/index.cjs.js

@@ -170,6 +170,22 @@ const isSafari = () => {
     const ua = navigator.userAgent.toLowerCase();
     return ua.includes("safari") && !ua.includes("chrome");
 };
+/**
+ * Converts camelCase text to humanized text.
+ *
+ * @param text text to convert
+ * @returns {string} humanized text with spaces between words
+ * @example camelCaseToHumanizedText("QuestionMarkCircle") => "Question Mark Circle"
+ */
+const camelCaseToHumanizedText = (text) => {
+    // Replace capital letters (except at the start) with space + letter
+    const humanizedText = text ? text.replace(/([A-Z])/g, " $1").trim() : "";
+    if (humanizedText.length === 0) {
+        return "";
+    }
+    // Optionally, capitalize the first letter of the result
+    return humanizedText.charAt(0).toUpperCase() + humanizedText.slice(1);
+};
 /**
  * - The Icon component is used to display an Icon.
  * - Icons are semantic vector graphics that adds character and improves the visual appeal of elements when combined with.
@@ -178,7 +194,7 @@ const isSafari = () => {
  * @param {IconProps} props - The props for the Icon component
  * @returns {JSX.Element} Icon component
  */
-const Icon = ({ name, size = "large", className, dataTestId, color, onClick, type, style, forwardedRef, title, }) => {
+const Icon = ({ name, size = "large", className, dataTestId, color, onClick, type, style, title, forwardedRef, }) => {
     const useTagRef = React.useRef(null);
     const correctIconType = React.useMemo(() => {
         if (size === "small" || size === "medium") {
@@ -200,7 +216,7 @@ const Icon = ({ name, size = "large", className, dataTestId, color, onClick, typ
             useTagRef.current.setAttribute("href", href[correctIconType]);
         }
     }, [correctIconType, href]);
-    return (jsxRuntime.jsx("span", { className: cvaIcon({ color, size, className }), "data-testid": dataTestId, onClick: onClick, ref: forwardedRef, children: jsxRuntime.jsxs("svg", { "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, role: "img", style: style, viewBox: correctIconType === "mini" ? "0 0 20 20" : "0 0 24 24", children: [jsxRuntime.jsx("title", { children: title ? title : iconName }), jsxRuntime.jsx("use", { href: href[correctIconType], ref: useTagRef })] }) }));
+    return (jsxRuntime.jsx("span", { className: cvaIcon({ color, size, className }), "data-testid": dataTestId, onClick: onClick, ref: forwardedRef, children: jsxRuntime.jsx("svg", { "aria-labelledby": title ? title : camelCaseToHumanizedText(iconName), "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, role: "img", style: style, viewBox: correctIconType === "mini" ? "0 0 20 20" : "0 0 24 24", children: jsxRuntime.jsx("use", { href: href[correctIconType], ref: useTagRef }) }) }));
 };
 
 const cvaTag = cssClassVarianceUtilities.cvaMerge([

package/index.esm.js

@@ -139,6 +139,22 @@ const isSafari = () => {
     const ua = navigator.userAgent.toLowerCase();
     return ua.includes("safari") && !ua.includes("chrome");
 };
+/**
+ * Converts camelCase text to humanized text.
+ *
+ * @param text text to convert
+ * @returns {string} humanized text with spaces between words
+ * @example camelCaseToHumanizedText("QuestionMarkCircle") => "Question Mark Circle"
+ */
+const camelCaseToHumanizedText = (text) => {
+    // Replace capital letters (except at the start) with space + letter
+    const humanizedText = text ? text.replace(/([A-Z])/g, " $1").trim() : "";
+    if (humanizedText.length === 0) {
+        return "";
+    }
+    // Optionally, capitalize the first letter of the result
+    return humanizedText.charAt(0).toUpperCase() + humanizedText.slice(1);
+};
 /**
  * - The Icon component is used to display an Icon.
  * - Icons are semantic vector graphics that adds character and improves the visual appeal of elements when combined with.
@@ -147,7 +163,7 @@ const isSafari = () => {
  * @param {IconProps} props - The props for the Icon component
  * @returns {JSX.Element} Icon component
  */
-const Icon = ({ name, size = "large", className, dataTestId, color, onClick, type, style, forwardedRef, title, }) => {
+const Icon = ({ name, size = "large", className, dataTestId, color, onClick, type, style, title, forwardedRef, }) => {
     const useTagRef = useRef(null);
     const correctIconType = useMemo(() => {
         if (size === "small" || size === "medium") {
@@ -169,7 +185,7 @@ const Icon = ({ name, size = "large", className, dataTestId, color, onClick, typ
             useTagRef.current.setAttribute("href", href[correctIconType]);
         }
     }, [correctIconType, href]);
-    return (jsx("span", { className: cvaIcon({ color, size, className }), "data-testid": dataTestId, onClick: onClick, ref: forwardedRef, children: jsxs("svg", { "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, role: "img", style: style, viewBox: correctIconType === "mini" ? "0 0 20 20" : "0 0 24 24", children: [jsx("title", { children: title ? title : iconName }), jsx("use", { href: href[correctIconType], ref: useTagRef })] }) }));
+    return (jsx("span", { className: cvaIcon({ color, size, className }), "data-testid": dataTestId, onClick: onClick, ref: forwardedRef, children: jsx("svg", { "aria-labelledby": title ? title : camelCaseToHumanizedText(iconName), "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, role: "img", style: style, viewBox: correctIconType === "mini" ? "0 0 20 20" : "0 0 24 24", children: jsx("use", { href: href[correctIconType], ref: useTagRef }) }) }));
 };
 
 const cvaTag = cvaMerge([

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.284",
+  "version": "0.1.285",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/Icon/Icon.d.ts

@@ -311,7 +311,7 @@ export type IconProps = DiscriminatedIconProps & CommonProps & {
      */
     style?: CSSProperties;
     /**
-     * The title (text) to show in the tooltip when hovering over an icon
+     * The title (text) to put in the aria-labelledby.
      * Default title is the name of the icon.
      * If a custom title is needed, set it using this prop.
      */
@@ -325,5 +325,5 @@ export type IconProps = DiscriminatedIconProps & CommonProps & {
  * @param {IconProps} props - The props for the Icon component
  * @returns {JSX.Element} Icon component
  */
-export declare const Icon: ({ name, size, className, dataTestId, color, onClick, type, style, forwardedRef, title, }: IconProps) => JSX.Element;
+export declare const Icon: ({ name, size, className, dataTestId, color, onClick, type, style, title, forwardedRef, }: IconProps) => JSX.Element;
 export {};