@seeqdev/qomponents 0.0.26 → 0.0.28

package/dist/Button/Button.types.d.ts

@@ -26,6 +26,9 @@ export interface ButtonProps {
     iconStyle?: IconType;
     /** color of the icon if it is custom (required if iconStyle is "color") */
     iconColor?: string;
+    /** normally we want for Icon to prefix FontAwesome icons with the fa-sharp fa-regular prefix however there are a
+     *  select few icons that are not pulled from that set. For those we need to pass specific prefixes instead.*/
+    iconPrefix?: string;
     /** id to place on the button element */
     id?: string;
     /** id that will be used in the data-testid attribute on the button element */

package/dist/Icon/Icon.types.d.ts

@@ -4,6 +4,9 @@ export type IconType = typeof iconTypes[number];
 export interface IconProps {
     /** icon class to be used (i.e. fc-zoom) */
     icon: string;
+    /** normally we want for Icon to prefix FontAwesome icons with the fa-sharp fa-regular prefix however there are a
+     *  select few icons that are not pulled from that set. For those we need to pass specific prefixes instead.*/
+    iconPrefix?: string;
     /** icon color option (text, white, theme, color, inherit; default is "theme") */
     type?: IconType;
     /** used to add a custom color to the icon (required if type="color") */

package/dist/index.esm.js

@@ -65,16 +65,17 @@ const colorClassesThemeDark = {
  *  - access to Seeq custom icons by providing the desired icon
  *  - leverage "type" to style your icon
  */
-const Icon = ({ onClick, icon, type = 'theme', extraClassNames, id, large, small, color, testId, customId, tooltip, tooltipPlacement, number, isHtmlTooltip = false, tooltipTestId, tooltipDelay = 0, }) => {
+const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClassNames, id, large, small, color, testId, customId, tooltip, tooltipPlacement, number, isHtmlTooltip = false, tooltipTestId, tooltipDelay = 0, }) => {
     if ((type === 'color' && (color === undefined || color === '')) || (color && type !== 'color')) {
         const errorMessage = color === undefined || color === ''
             ? 'Icon with type="color" must have prop color specified.'
             : 'Icon with prop color must have type="color".';
         return React__default.createElement("div", { className: "tw-text-sq-danger-color" }, errorMessage);
     }
-    const iconPrefix = icon.startsWith('fc') ? 'fc' : 'fa';
+    const fontAwesomePrefix = iconPrefix ? iconPrefix : 'fa-sharp fa-regular';
+    const iconPrefixString = icon.startsWith('fc') ? 'fc' : fontAwesomePrefix;
     const style = type === 'color' && color ? { color } : {};
-    const appliedClassNames = `${iconPrefix} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''} 
+    const appliedClassNames = `${iconPrefixString} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''} 
   ${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'cursor-pointer' : ''} ${extraClassNames}`;
     const tooltipData = tooltip
         ? {
@@ -93,7 +94,7 @@ const Icon = ({ onClick, icon, type = 'theme', extraClassNames, id, large, small
  *  - use "variant" to achieve the desired style
  *  - include tooltips and/or icons
  */
-const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, tooltip, tooltipOptions, iconStyle = 'text', icon, iconColor, preventBlur = false, isHtmlTooltip = false, tooltipTestId, }) => {
+const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, tooltip, tooltipOptions, iconStyle = 'text', icon, iconColor, iconPrefix = undefined, preventBlur = false, isHtmlTooltip = false, tooltipTestId, }) => {
     const baseClasses = 'tw-py-1 tw-px-2.5 tw-rounded-sm focus:tw-ring-0 disabled:tw-pointer-events-none';
     const baseClassesByVariant = {
         'outline': 'disabled:tw-opacity-50 tw-border-solid tw-border',
@@ -165,7 +166,7 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
                 e.preventDefault();
             }
         }, className: appliedClasses },
-        icon && (React__default.createElement(Icon, { icon: icon, type: iconStyle, color: iconColor, extraClassNames: label ? `tw-mr-1 ${textClassesByVariantLightTheme[variant]}  ${textClassesByVariantDarkTheme[variant]}` : '', testId: `${id}_spinner` })),
+        icon && (React__default.createElement(Icon, { icon: icon, iconPrefix: iconPrefix, type: iconStyle, color: iconColor, extraClassNames: label ? `tw-mr-1 ${textClassesByVariantLightTheme[variant]}  ${textClassesByVariantDarkTheme[variant]}` : '', testId: `${id}_spinner` })),
         label));
 };
 
@@ -285,7 +286,7 @@ const DEFAULT_TOOL_TIP_DELAY = 1000;
  * display correctly.
  */
 const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP_DELAY, }) => {
-    const arrowBaseClasses = "before:tw-content-[''] before:tw-absolute before:tw-border-8";
+    const arrowBaseClasses = 'before:tw-content-[\'\'] before:tw-absolute before:tw-border-8';
     const centerArrowVertically = 'before:tw-top-1/2 before:-tw-translate-y-1/2';
     const centerArrowHorizontally = 'before:tw-left-1/2 before:-tw-translate-x-1/2';
     const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent