@trackunit/react-components 0.1.257-alpha-3fd0172a5e.0 → 0.1.259

package/index.cjs.js

@@ -176,7 +176,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, }) => {
+const Icon = ({ name, size = "large", className, dataTestId, color, onClick, type, style, forwardedRef, title, }) => {
     const useTagRef = React.useRef(null);
     const correctIconType = React.useMemo(() => {
         if (size === "small" || size === "medium") {
@@ -198,7 +198,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 }), onClick: onClick, "data-testid": dataTestId, ref: forwardedRef, children: jsxRuntime.jsxs("svg", { viewBox: correctIconType === "mini" ? "0 0 20 20" : "0 0 24 24", "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, style: style, role: "img", children: [jsxRuntime.jsx("title", { children: iconName }), jsxRuntime.jsx("use", { href: href[correctIconType], ref: useTagRef })] }) }));
+    return (jsxRuntime.jsx("span", { className: cvaIcon({ color, size, className }), onClick: onClick, "data-testid": dataTestId, ref: forwardedRef, children: jsxRuntime.jsxs("svg", { viewBox: correctIconType === "mini" ? "0 0 20 20" : "0 0 24 24", "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, style: style, role: "img", children: [jsxRuntime.jsx("title", { children: title ? title : iconName }), jsxRuntime.jsx("use", { href: href[correctIconType], ref: useTagRef })] }) }));
 };
 
 const cvaTag = cssClassVarianceUtilities.cvaMerge([
@@ -946,8 +946,8 @@ const Card = (_a) => {
  * @param {CardBodyProps} props - The props for the CardBody component
  * @returns {JSX.Element} CardBody component
  */
-const CardBody = ({ density = "auto", children, dataTestId, className, disableGap }) => {
-    return (jsxRuntime.jsx("div", { "data-testid": dataTestId, className: cvaCardBodyDensityContainer({ density, disableGap, className }), children: children }));
+const CardBody = ({ density = "auto", children, dataTestId, className, disableGap, id }) => {
+    return (jsxRuntime.jsx("div", { "data-testid": dataTestId, id: id, className: cvaCardBodyDensityContainer({ density, disableGap, className }), children: children }));
 };
 
 /**

package/index.esm.js

@@ -145,7 +145,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, }) => {
+const Icon = ({ name, size = "large", className, dataTestId, color, onClick, type, style, forwardedRef, title, }) => {
     const useTagRef = useRef(null);
     const correctIconType = useMemo(() => {
         if (size === "small" || size === "medium") {
@@ -167,7 +167,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 }), onClick: onClick, "data-testid": dataTestId, ref: forwardedRef, children: jsxs("svg", { viewBox: correctIconType === "mini" ? "0 0 20 20" : "0 0 24 24", "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, style: style, role: "img", children: [jsx("title", { children: iconName }), jsx("use", { href: href[correctIconType], ref: useTagRef })] }) }));
+    return (jsx("span", { className: cvaIcon({ color, size, className }), onClick: onClick, "data-testid": dataTestId, ref: forwardedRef, children: jsxs("svg", { viewBox: correctIconType === "mini" ? "0 0 20 20" : "0 0 24 24", "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, style: style, role: "img", children: [jsx("title", { children: title ? title : iconName }), jsx("use", { href: href[correctIconType], ref: useTagRef })] }) }));
 };
 
 const cvaTag = cvaMerge([
@@ -915,8 +915,8 @@ const Card = (_a) => {
  * @param {CardBodyProps} props - The props for the CardBody component
  * @returns {JSX.Element} CardBody component
  */
-const CardBody = ({ density = "auto", children, dataTestId, className, disableGap }) => {
-    return (jsx("div", { "data-testid": dataTestId, className: cvaCardBodyDensityContainer({ density, disableGap, className }), children: children }));
+const CardBody = ({ density = "auto", children, dataTestId, className, disableGap, id }) => {
+    return (jsx("div", { "data-testid": dataTestId, id: id, className: cvaCardBodyDensityContainer({ density, disableGap, className }), children: children }));
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.257-alpha-3fd0172a5e.0",
+  "version": "0.1.259",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/Card/CardBody.d.ts

@@ -13,6 +13,10 @@ export interface CardBodyProps extends CommonProps {
      * Child elements to render in the body
      */
     children: React.ReactNode | null;
+    /**
+     * The id of the element.
+     */
+    id?: string;
 }
 /**
  * The CardBody component should be used to inform the user of important information.
@@ -22,4 +26,4 @@ export interface CardBodyProps extends CommonProps {
  * @param {CardBodyProps} props - The props for the CardBody component
  * @returns {JSX.Element} CardBody component
  */
-export declare const CardBody: ({ density, children, dataTestId, className, disableGap }: CardBodyProps) => JSX.Element;
+export declare const CardBody: ({ density, children, dataTestId, className, disableGap, id }: CardBodyProps) => JSX.Element;

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

@@ -310,6 +310,12 @@ export type IconProps = DiscriminatedIconProps & CommonProps & {
      * @memberof IconProps
      */
     style?: CSSProperties;
+    /**
+     * The title (text) to show in the tooltip when hovering over an icon
+     * Default title is the name of the icon.
+     * If a custom title is needed, set it using this prop.
+     */
+    title?: string;
 };
 /**
  * - The Icon component is used to display an Icon.
@@ -319,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, }: IconProps) => JSX.Element;
+export declare const Icon: ({ name, size, className, dataTestId, color, onClick, type, style, forwardedRef, title, }: IconProps) => JSX.Element;
 export {};