kahuna-base-react-components 1.3.6 → 1.3.7

package/dist/types.d.ts

@@ -24,6 +24,7 @@ interface KButtonProps {
     border?: string;
     hoverBorder?: string;
     activeBorder?: string;
+    dataTestId?: string;
 }
 declare const KButton: React.FC<KButtonProps>;
 
@@ -38,6 +39,7 @@ interface KSpanProps {
     hoverStyle?: CSSProperties;
     textDecoration?: string;
     ellipsis?: boolean;
+    dataTestId?: string;
 }
 declare const KSpan: React.FC<KSpanProps>;
 
@@ -59,6 +61,7 @@ interface KTooltipProps {
     marginTop?: string;
     marginLeft?: string;
     hideDelay?: number;
+    dataTestId?: string;
 }
 declare const KTooltip: React.FC<KTooltipProps>;
 
@@ -73,6 +76,7 @@ interface KTitleSpanProps {
     bold?: boolean;
     ellipsis?: boolean;
     tooltipProps?: Partial<KTooltipProps>;
+    dataTestId?: string;
 }
 declare const KTitleSpan: React.FC<KTitleSpanProps>;
 
@@ -121,6 +125,7 @@ interface KInputProps {
     checked?: boolean;
     hoverBorder?: string;
     activeBorder?: string;
+    dataTestId?: string;
 }
 declare const KInput: React.FC<KInputProps>;
 
@@ -153,6 +158,7 @@ interface KTextAreaProps {
     checked?: boolean;
     maxHeight?: number;
     clearTextOnPressedEnter?: boolean;
+    dataTestId?: string;
 }
 declare const KTextArea: React.FC<KTextAreaProps>;
 
@@ -202,6 +208,7 @@ interface KDropdownProps {
     activeBorder?: string;
     onInputChange?: (text: string) => void;
     sortSelectedFirst?: boolean;
+    dataTestId?: string;
 }
 declare const KDropdown: React.FC<KDropdownProps>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kahuna-base-react-components",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "description": "Kahuna Base React Components",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/components/KButton/KButton.tsx

@@ -22,8 +22,9 @@ export interface KButtonProps {
   gap?: string
   activeBackground?: string
   border?: string
-  hoverBorder?: string 
-  activeBorder?: string 
+  hoverBorder?: string
+  activeBorder?: string
+  dataTestId?: string
 }
 
 const KButton: React.FC<KButtonProps> = (props) => {
@@ -49,6 +50,7 @@ const KButton: React.FC<KButtonProps> = (props) => {
 
   return (
     <button
+      data-testid={props.dataTestId}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
       onMouseDown={() => setActive(true)}

package/src/components/KDropdown/KDropdown.tsx

@@ -55,7 +55,7 @@ export interface KDropdownProps {
   activeBorder?: string
   onInputChange?: (text: string) => void
   sortSelectedFirst?: boolean
-
+  dataTestId?: string
 }
 
 const KDropdown: React.FC<KDropdownProps> = (props) => {
@@ -233,6 +233,7 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
 
   return (
     <div
+      data-testid={props.dataTestId}
       className={"k-dropdown-container"}
       style={{
         background,

package/src/components/KInput/KInput.tsx

@@ -30,6 +30,7 @@ export interface KInputProps {
   checked?: boolean
   hoverBorder?: string
   activeBorder?: string
+  dataTestId?: string
 }
 
 const KInput: React.FC<KInputProps> = (props) => {
@@ -69,6 +70,7 @@ const KInput: React.FC<KInputProps> = (props) => {
 
   return (
     <div
+      data-testid={props.dataTestId}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
       className={"k-input-container"}

package/src/components/KSpan/KSpan.tsx

@@ -12,6 +12,7 @@ export interface KSpanProps {
   hoverStyle?: CSSProperties
   textDecoration?: string
   ellipsis?: boolean
+  dataTestId?: string
 }
 
 const KSpan: React.FC<KSpanProps> = (props) => {
@@ -42,6 +43,7 @@ const KSpan: React.FC<KSpanProps> = (props) => {
 
   return (
     <span
+      data-testid={props.dataTestId}
       className={"k-span"}
       onMouseEnter={() => setOnHover(true)}
       onMouseLeave={() => setOnHover(false)}

package/src/components/KTextArea/KTextArea.tsx

@@ -30,6 +30,7 @@ export interface KTextAreaProps {
   checked?: boolean
   maxHeight?: number
   clearTextOnPressedEnter?: boolean
+  dataTestId?: string
 }
 
 const KTextArea: React.FC<KTextAreaProps> = (props) => {
@@ -78,6 +79,7 @@ const KTextArea: React.FC<KTextAreaProps> = (props) => {
 
   return (
     <div
+      data-testid={props.dataTestId}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
       className={"k-input-container"}

package/src/components/KTitleSpan/KTitleSpan.tsx

@@ -15,6 +15,7 @@ export interface KTitleSpanProps {
   bold?: boolean
   ellipsis?: boolean
   tooltipProps?: Partial<KTooltipProps>
+  dataTestId?: string
 }
 
 const KTitleSpan: React.FC<KTitleSpanProps> = (props) => {
@@ -60,6 +61,7 @@ const KTitleSpan: React.FC<KTitleSpanProps> = (props) => {
           {...props.tooltipProps}
         >
           <span
+            data-testid={props.dataTestId}
             ref={textRef}
             className={`${titleClassName} ${ellipsis ? "block" : "flex items-center"}`}
             style={{
@@ -77,6 +79,7 @@ const KTitleSpan: React.FC<KTitleSpanProps> = (props) => {
         </KTooltip>
       ) : (
         <span
+          data-testid={props.dataTestId}
           ref={textRef}
           className={`${titleClassName} ${ellipsis ? "block" : "flex items-center"}`}
           style={{ fontSize, color, fontWeight, lineHeight, fontStyle, letterSpacing, ...(ellipsis && ellipsisStyle) }}

package/src/components/KTooltip/KTooltip.tsx

@@ -19,6 +19,7 @@ export interface KTooltipProps {
   marginTop?: string // position and align is used to position the tooltip. for additional changes in vertical positioning use this prop
   marginLeft?: string // position and align is used to position the tooltip. for minor changes in horizontal positioning use this prop
   hideDelay?: number
+  dataTestId?: string
 }
 
 const KTooltip: React.FC<KTooltipProps> = (props) => {
@@ -75,30 +76,39 @@ const KTooltip: React.FC<KTooltipProps> = (props) => {
   }
 
   return (
-    <div className="relative box-border" onMouseEnter={showTooltip} onMouseLeave={hideTooltip}>
+    <div
+      className="relative box-border"
+      onMouseEnter={showTooltip}
+      onMouseLeave={hideTooltip}
+      data-testid={props.dataTestId}
+    >
       {props.children}
 
-      {props.content !== null && <div
-        className={`${absolutePositionClassName(position, align)} absolute ${
-          isVisible ? "k-tooltip-enter" : "k-tooltip-exit"
-        }`}
-        style={{
-          ...baseStyles,
-          ...(props.marginTop && { marginTop: `${props.marginTop}` }),
-          ...(props.marginLeft && { marginLeft: `${props.marginLeft}` })
-        }}
-      >
+      {props.content !== null && (
         <div
+          className={`${absolutePositionClassName(position, align)} absolute ${
+            isVisible ? "k-tooltip-enter" : "k-tooltip-exit"
+          }`}
           style={{
-            padding,
-            borderRadius,
-            background
+            ...baseStyles,
+            ...(props.marginTop && { marginTop: `${props.marginTop}` }),
+            ...(props.marginLeft && { marginLeft: `${props.marginLeft}` })
           }}
         >
-          {props.content}
+          <div
+            style={{
+              padding,
+              borderRadius,
+              background
+            }}
+          >
+            {props.content}
+          </div>
+          {showArrow && (
+            <div className={`arrow-${position}`} style={{ backgroundColor: arrowColor, zIndex: -200 }}></div>
+          )}
         </div>
-        {showArrow && <div className={`arrow-${position}`} style={{ backgroundColor: arrowColor, zIndex: -200 }}></div>}
-      </div>}
+      )}
     </div>
   )
 }