kahuna-base-react-components 1.3.4 → 1.3.5

package/dist/types.d.ts

@@ -41,6 +41,26 @@ interface KSpanProps {
 }
 declare const KSpan: React.FC<KSpanProps>;
 
+interface KTooltipProps {
+    children: React.ReactNode;
+    content: React.ReactNode;
+    position?: "top" | "bottom" | "left" | "right";
+    align?: "top" | "bottom" | "left" | "right" | "center";
+    backgroundColor?: string;
+    width?: string;
+    height?: string;
+    zIndex?: number;
+    border?: string;
+    borderRadius?: string;
+    boxShadow?: string;
+    showArrow?: boolean;
+    arrowColor?: string;
+    padding?: string;
+    marginTop?: string;
+    marginLeft?: string;
+}
+declare const KTooltip: React.FC<KTooltipProps>;
+
 interface KTitleSpanProps {
     text: string;
     fontSize?: number;
@@ -51,6 +71,7 @@ interface KTitleSpanProps {
     letterSpacing?: string;
     bold?: boolean;
     ellipsis?: boolean;
+    tooltipProps?: Partial<KTooltipProps>;
 }
 declare const KTitleSpan: React.FC<KTitleSpanProps>;
 
@@ -221,26 +242,6 @@ interface KSelectDateProps {
 }
 declare const KSelectDate: React.FC<KSelectDateProps>;
 
-interface KTooltipProps {
-    children: React.ReactNode;
-    content: React.ReactNode;
-    position?: "top" | "bottom" | "left" | "right";
-    align?: "top" | "bottom" | "left" | "right" | "center";
-    backgroundColor?: string;
-    width?: string;
-    height?: string;
-    zIndex?: number;
-    border?: string;
-    borderRadius?: string;
-    boxShadow?: string;
-    showArrow?: boolean;
-    arrowColor?: string;
-    padding?: string;
-    marginTop?: string;
-    marginLeft?: string;
-}
-declare const KTooltip: React.FC<KTooltipProps>;
-
 interface SliderLabelOption {
     label: string;
     value: number;

package/package.json

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

package/src/components/KSpan/KSpan.stories.tsx

@@ -24,7 +24,7 @@ const Template: StoryFn<typeof KSpanWrapper> = (args) => <KSpanWrapper {...args}
 
 export const KSpanPrimary = Template.bind({})
 KSpanPrimary.args = {
-  text: "Login",
+  text: "Burada uzun metin var, overflow olabilir.",
   fontSize: 14,
   color: "#1F1F1F",
   fontWeight: 400,

package/src/components/KTitleSpan/KTitleSpan.stories.tsx

@@ -1,5 +1,6 @@
 import {Meta, StoryFn} from "@storybook/react";
 import KTitleSpan, { KTitleSpanProps } from "./KTitleSpan";
+import KSpan from "../KSpan";
 
 export default {
   title: "ReactComponentLibrary/KTitleSpan",
@@ -21,18 +22,27 @@ const KTitleSpanWrapper: React.FC<KTitleSpanProps> = (args) => {
 }
 
 const Template: StoryFn<typeof KTitleSpanWrapper> = (args) => <KTitleSpanWrapper {...args} />;
-
+const myText = "Hello how are you, how is it going? "
 export const KTitleSpanPrimary = Template.bind({});
 KTitleSpanPrimary.args = {
-  text: "Hello how?",
+  text: myText,
   fontSize: 48,
   color: "#111",
   lineHeight: "56px",
   fontStyle: "normal",
   letterSpacing: "-0.48px",
   bold: false,
-  ellipsis: true
-};
+  ellipsis: true,
+  tooltipProps: {
+    width: "150px",
+    position: "bottom",
+    content: (
+      <div className="w-full whitespace-normal">
+        <KSpan text={myText} color="#111" />
+      </div>
+    )
+  }
+}
 
 export const KTitleSpanSecondary = Template.bind({});
 KTitleSpanSecondary.args = {

package/src/components/KTitleSpan/KTitleSpan.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from "react"
 import "../../main.css"
 import KTooltip from "../KTooltip"
 import KSpan from "../KSpan"
+import { KTooltipProps } from "../KTooltip/KTooltip"
 
 export interface KTitleSpanProps {
   text: string
@@ -13,6 +14,7 @@ export interface KTitleSpanProps {
   letterSpacing?: string
   bold?: boolean
   ellipsis?: boolean
+  tooltipProps?: Partial<KTooltipProps>
 }
 
 const KTitleSpan: React.FC<KTitleSpanProps> = (props) => {
@@ -55,6 +57,7 @@ const KTitleSpan: React.FC<KTitleSpanProps> = (props) => {
               <KSpan text={props.text} color="#111" />
             </div>
           }
+          {...props.tooltipProps}
         >
           <span
             ref={textRef}

package/src/components/KTooltip/KTooltip.stories.tsx

@@ -21,11 +21,7 @@ const Template: StoryFn<KTooltipProps> = (args) => (
 
 export const KTooltipPrimary = Template.bind({})
 KTooltipPrimary.args = {
-  content: (
-    <div className="bg-red-100 flex justify-center items-center">
-      <div className="bg-green-300 font-extrabold ">BURADA</div>
-    </div>
-  ),
+  content: "null",
   position: "top",
   align: "right",
   zIndex: 1000,
@@ -38,7 +34,7 @@ KTooltipPrimary.args = {
 }
 
 export const KTooltipSecondary = Template.bind({})
-KTooltipPrimary.args = {
+KTooltipSecondary.args = {
   content: (
     <div className="flex flex-col gap-2 justify-center items-start px-4 py-2">
       <div

package/src/components/KTooltip/KTooltip.tsx

@@ -3,7 +3,7 @@ import "../../main.css"
 
 export interface KTooltipProps {
   children: React.ReactNode
-  content: React.ReactNode
+  content: React.ReactNode // if content === null the tooltip will not be visible
   position?: "top" | "bottom" | "left" | "right"
   align?: "top" | "bottom" | "left" | "right" | "center"
   backgroundColor?: string
@@ -61,7 +61,7 @@ const KTooltip: React.FC<KTooltipProps> = (props) => {
     <div className="relative box-border" onMouseEnter={showTooltip} onMouseLeave={hideTooltip}>
       {props.children}
 
-      <div
+      {props.content !== null && <div
         className={`${absolutePositionClassName(position, align)} absolute ${
           isVisible ? "k-tooltip-enter" : "k-tooltip-exit"
         }`}
@@ -81,7 +81,7 @@ const KTooltip: React.FC<KTooltipProps> = (props) => {
           {props.content}
         </div>
         {showArrow && <div className={`arrow-${position}`} style={{ backgroundColor: arrowColor, zIndex: -200 }}></div>}
-      </div>
+      </div>}
     </div>
   )
 }