@trackunit/react-components 0.3.7 → 0.3.8

package/index.cjs.js

@@ -5,6 +5,7 @@ var React = require('react');
 var sharedUtils = require('@trackunit/shared-utils');
 var uiDesignTokens = require('@trackunit/ui-design-tokens');
 var uiIcons = require('@trackunit/ui-icons');
+var IconSpriteMicro = require('@trackunit/ui-icons/icons-sprite-micro.svg');
 var IconSpriteMini = require('@trackunit/ui-icons/icons-sprite-mini.svg');
 var IconSpriteOutline = require('@trackunit/ui-icons/icons-sprite-outline.svg');
 var IconSpriteSolid = require('@trackunit/ui-icons/icons-sprite-solid.svg');
@@ -104,9 +105,17 @@ const cvaIcon = cssClassVarianceUtilities.cvaMerge(["aspect-square", "inline-gri
             small: "w-4",
             medium: "w-5",
             large: "w-6",
-            font: "w-[1em]",
+        },
+        fontSize: {
+            true: "w-[1em]",
+            false: "",
         },
     },
+    compoundVariants: [
+        { fontSize: true, size: "small", className: "w-[1em]" },
+        { fontSize: true, size: "medium", className: "w-[1em]" },
+        { fontSize: true, size: "large", className: "w-[1em]" },
+    ],
     defaultVariants: {
         color: "default",
         size: "large",
@@ -157,11 +166,14 @@ 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, ariaLabel, ariaLabelledBy, ariaDescribedBy, }) => {
+const Icon = ({ name, size = "large", className, dataTestId, color, onClick, type, style, forwardedRef, ariaLabel, fontSize, ariaLabelledBy, ariaDescribedBy, }) => {
     const useTagRef = React.useRef(null);
     const ICON_CONTAINER_ID = uuid.v4();
     const correctIconType = React.useMemo(() => {
-        if (size === "small" || size === "medium") {
+        if (size === "small") {
+            return "micro";
+        }
+        if (size === "medium") {
             return "mini";
         }
         if (type === "solid") {
@@ -169,18 +181,31 @@ const Icon = ({ name, size = "large", className, dataTestId, color, onClick, typ
         }
         return "outline";
     }, [type, size]);
+    const correctViewBox = React.useMemo(() => {
+        if (size === "small") {
+            return "0 0 16 16";
+        }
+        if (size === "medium") {
+            return "0 0 20 20";
+        }
+        if (type === "solid") {
+            return "0 0 24 24";
+        }
+        return "0 0 24 24";
+    }, [type, size]);
     const iconName = uiIcons.iconNames[name];
     const href = React.useMemo(() => ({
         solid: `${IconSpriteSolid}#${iconName}`,
         outline: `${IconSpriteOutline}#${iconName}`,
         mini: `${IconSpriteMini}#${iconName}`,
+        micro: `${IconSpriteMicro}#${iconName}`,
     }), [iconName]);
     React.useEffect(() => {
         if (isSafari() && useTagRef.current) {
             useTagRef.current.setAttribute("href", href[correctIconType]);
         }
     }, [correctIconType, href]);
-    return (jsxRuntime.jsx("span", { "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel ? ariaLabel : stringTs.titleCase(iconName), "aria-labelledby": ariaLabelledBy, className: cvaIcon({ color, size, className }), "data-testid": dataTestId, id: ICON_CONTAINER_ID, onClick: onClick, ref: forwardedRef, children: jsxRuntime.jsx("svg", { "aria-labelledby": ICON_CONTAINER_ID, "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 }) }) }));
+    return (jsxRuntime.jsx("span", { "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel ? ariaLabel : stringTs.titleCase(iconName), "aria-labelledby": ariaLabelledBy, className: cvaIcon({ color, size, fontSize, className }), "data-testid": dataTestId, id: ICON_CONTAINER_ID, onClick: onClick, ref: forwardedRef, children: jsxRuntime.jsx("svg", { "aria-labelledby": ICON_CONTAINER_ID, "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, role: "img", style: style, viewBox: correctViewBox, children: jsxRuntime.jsx("use", { href: href[correctIconType], ref: useTagRef }) }) }));
 };
 
 const cvaTag = cssClassVarianceUtilities.cvaMerge([

package/index.esm.js

@@ -4,6 +4,7 @@ import React__default, { useRef, useMemo, useEffect, useState, useReducer, useCa
 import { objectKeys, objectEntries, objectValues } from '@trackunit/shared-utils';
 import { rentalStatusPalette, intentPalette, generalPalette, criticalityPalette, activityPalette, utilizationPalette, sitesPalette, themeScreenSizeAsNumber, color } from '@trackunit/ui-design-tokens';
 import { iconNames } from '@trackunit/ui-icons';
+import IconSpriteMicro from '@trackunit/ui-icons/icons-sprite-micro.svg';
 import IconSpriteMini from '@trackunit/ui-icons/icons-sprite-mini.svg';
 import IconSpriteOutline from '@trackunit/ui-icons/icons-sprite-outline.svg';
 import IconSpriteSolid from '@trackunit/ui-icons/icons-sprite-solid.svg';
@@ -84,9 +85,17 @@ const cvaIcon = cvaMerge(["aspect-square", "inline-grid", "relative"], {
             small: "w-4",
             medium: "w-5",
             large: "w-6",
-            font: "w-[1em]",
+        },
+        fontSize: {
+            true: "w-[1em]",
+            false: "",
         },
     },
+    compoundVariants: [
+        { fontSize: true, size: "small", className: "w-[1em]" },
+        { fontSize: true, size: "medium", className: "w-[1em]" },
+        { fontSize: true, size: "large", className: "w-[1em]" },
+    ],
     defaultVariants: {
         color: "default",
         size: "large",
@@ -137,11 +146,14 @@ 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, ariaLabel, ariaLabelledBy, ariaDescribedBy, }) => {
+const Icon = ({ name, size = "large", className, dataTestId, color, onClick, type, style, forwardedRef, ariaLabel, fontSize, ariaLabelledBy, ariaDescribedBy, }) => {
     const useTagRef = useRef(null);
     const ICON_CONTAINER_ID = v4();
     const correctIconType = useMemo(() => {
-        if (size === "small" || size === "medium") {
+        if (size === "small") {
+            return "micro";
+        }
+        if (size === "medium") {
             return "mini";
         }
         if (type === "solid") {
@@ -149,18 +161,31 @@ const Icon = ({ name, size = "large", className, dataTestId, color, onClick, typ
         }
         return "outline";
     }, [type, size]);
+    const correctViewBox = useMemo(() => {
+        if (size === "small") {
+            return "0 0 16 16";
+        }
+        if (size === "medium") {
+            return "0 0 20 20";
+        }
+        if (type === "solid") {
+            return "0 0 24 24";
+        }
+        return "0 0 24 24";
+    }, [type, size]);
     const iconName = iconNames[name];
     const href = useMemo(() => ({
         solid: `${IconSpriteSolid}#${iconName}`,
         outline: `${IconSpriteOutline}#${iconName}`,
         mini: `${IconSpriteMini}#${iconName}`,
+        micro: `${IconSpriteMicro}#${iconName}`,
     }), [iconName]);
     useEffect(() => {
         if (isSafari() && useTagRef.current) {
             useTagRef.current.setAttribute("href", href[correctIconType]);
         }
     }, [correctIconType, href]);
-    return (jsx("span", { "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel ? ariaLabel : titleCase(iconName), "aria-labelledby": ariaLabelledBy, className: cvaIcon({ color, size, className }), "data-testid": dataTestId, id: ICON_CONTAINER_ID, onClick: onClick, ref: forwardedRef, children: jsx("svg", { "aria-labelledby": ICON_CONTAINER_ID, "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 }) }) }));
+    return (jsx("span", { "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel ? ariaLabel : titleCase(iconName), "aria-labelledby": ariaLabelledBy, className: cvaIcon({ color, size, fontSize, className }), "data-testid": dataTestId, id: ICON_CONTAINER_ID, onClick: onClick, ref: forwardedRef, children: jsx("svg", { "aria-labelledby": ICON_CONTAINER_ID, "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, role: "img", style: style, viewBox: correctViewBox, children: jsx("use", { href: href[correctIconType], ref: useTagRef }) }) }));
 };
 
 const cvaTag = cvaMerge([

package/package.json

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

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

@@ -252,10 +252,6 @@ export declare const iconPalette: {
     };
 };
 export declare const iconColorNames: ("info" | "success" | "warning" | "danger" | "primary" | "secondary" | "accent" | "neutral" | "black" | "white" | "good" | "low" | "critical" | "working" | "idle" | "stopped" | "unknown" | "moving" | "active" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "site" | "on_rent" | "returned" | "available" | "pickup_ready" | "transfer" | "in_repair" | "other_rental_status")[];
-type IconPropsFont = {
-    size?: "font";
-    type?: "solid" | "outline";
-};
 type IconPropsSmall = {
     size?: "small";
     type?: "solid";
@@ -268,7 +264,7 @@ type IconPropsLarge = {
     size?: "large";
     type?: "solid" | "outline";
 };
-type DiscriminatedIconProps = IconPropsFont | IconPropsSmall | IconPropsMedium | IconPropsLarge;
+type DiscriminatedIconProps = IconPropsSmall | IconPropsMedium | IconPropsLarge;
 export type IconProps = DiscriminatedIconProps & CommonProps & AriaProps & {
     /**
      * The name of the icon to be rendered.
@@ -287,7 +283,7 @@ export type IconProps = DiscriminatedIconProps & CommonProps & AriaProps & {
      * Default value is Large.
      * If a custom size is needed, set it in the className.
      */
-    size?: Size | "font";
+    size?: Size;
     /**
      * Select if the icon should be rendered as solid or outline.
      * Default value depends on the Size prop, mini == solid, medium == solid, large == outline.
@@ -307,6 +303,12 @@ export type IconProps = DiscriminatedIconProps & CommonProps & AriaProps & {
      * @memberof IconProps
      */
     style?: CSSProperties;
+    /**
+     * If true, the icon will be rendered with the font size of the parent element.
+     *
+     * @default false
+     */
+    fontSize?: boolean;
 };
 /**
  * - The Icon component is used to display an Icon.
@@ -316,5 +318,5 @@ export type IconProps = DiscriminatedIconProps & CommonProps & AriaProps & {
  * @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, ariaLabel, ariaLabelledBy, ariaDescribedBy, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Icon: ({ name, size, className, dataTestId, color, onClick, type, style, forwardedRef, ariaLabel, fontSize, ariaLabelledBy, ariaDescribedBy, }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,6 +1,7 @@
 export declare const cvaIcon: (props?: ({
     color?: "default" | "primary" | "secondary" | "accent" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "moving" | "active" | "stopped" | "unknown" | "black" | "white" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "site" | "on_rent" | "returned" | "available" | "pickup_ready" | "transfer" | "in_repair" | "other_rental_status" | null | undefined;
-    size?: "small" | "medium" | "large" | "font" | null | undefined;
+    size?: "small" | "medium" | "large" | null | undefined;
+    fontSize?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaIconComponent: (props?: ({
     iconType?: "solid" | "outline" | null | undefined;