@seeqdev/qomponents 0.0.67 → 0.0.69

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

@@ -4,9 +4,11 @@ import React from 'react';
 export declare const buttonTypes: readonly ["button", "reset", "submit", "link"];
 export declare const buttonSizes: readonly ["sm", "lg"];
 export declare const buttonVariants: readonly ["outline", "theme", "theme-light", "warning", "danger", "no-border"];
+export declare const iconPositions: string[];
 export type ButtonType = typeof buttonTypes[number];
 export type ButtonSize = typeof buttonSizes[number];
 export type ButtonVariant = typeof buttonVariants[number];
+export type IconPosition = typeof iconPositions[number];
 export interface ButtonProps {
     /** function to call when clicking the button (takes no parameters) */
     onClick?: (e: React.MouseEvent) => void;
@@ -23,10 +25,12 @@ export interface ButtonProps {
     extraClassNames?: string;
     /** icon class to be used if an icon should go before the text (i.e. fc-zoom) */
     icon?: string;
-    /** icon color option (text, white, theme, color, default is "text") */
+    /** icon color option (text, white, theme, color; default is "text") */
     iconStyle?: IconType;
     /** color of the icon if it is custom (required if iconStyle is "color") */
     iconColor?: string;
+    /** where the icon should be positioned relative to the provided text (left or right; default is left) */
+    iconPosition?: IconPosition;
     /** 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;

package/dist/index.esm.js

@@ -99,7 +99,7 @@ const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClas
  *  - 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, iconPrefix = undefined, 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, iconPosition = 'left', 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',
@@ -163,6 +163,8 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
             'data-qtip-delay': tooltipOptions?.delay ?? DEFAULT_TOOL_TIP_DELAY,
         };
     }
+    const iconClass = (iconPosition === 'left' ? 'tw-mr-1' : 'tw-ml-1');
+    const iconElement = icon && (React__default.createElement(Icon, { icon: icon, iconPrefix: iconPrefix, type: iconStyle, color: iconColor, extraClassNames: label ? `${iconClass} ${textClassesByVariantLightTheme[variant]}  ${textClassesByVariantDarkTheme[variant]}` : '', testId: `${id}_spinner` }));
     return (React__default.createElement("button", { id: id, ...tooltipData, disabled: disabled, "data-testid": testId, type: type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type, onClick: (e) => {
             stopPropagation && e.stopPropagation();
             onClick && onClick(e);
@@ -171,8 +173,9 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
                 e.preventDefault();
             }
         }, className: appliedClasses },
-        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));
+        iconPosition === 'left' && iconElement,
+        label,
+        iconPosition === 'right' && iconElement));
 };
 
 function _extends() {