kahuna-base-react-components 0.2.18 → 0.2.19

package/dist/types.d.ts

@@ -18,6 +18,7 @@ interface KButtonProps {
     hoverBackground?: string;
     fontWeight?: number;
     textDecoration?: string;
+    gap?: string;
 }
 declare const KButton: React.FC<KButtonProps>;
 

package/package.json

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

package/src/components/KButton/KButton.tsx

@@ -19,6 +19,7 @@ export interface KButtonProps {
   hoverBackground?: string
   fontWeight?: number
   textDecoration?: string
+  gap?: string
 }
 
 const KButton: React.FC<KButtonProps> = (props) => {
@@ -35,7 +36,7 @@ const KButton: React.FC<KButtonProps> = (props) => {
   const hoverBackground = props.hoverBackground || background
   const fontWeight = props.fontWeight || 500
   const textDecoration = props.textDecoration || "none"
-
+  const gap = props.gap || "0px"
   return (
     <button
       onMouseEnter={() => setHover(true)}
@@ -45,7 +46,7 @@ const KButton: React.FC<KButtonProps> = (props) => {
       onClick={props.onClick}
       style={{ background: hover ? hoverBackground : background, borderRadius, width, height, padding, boxShadow }}
     >
-      <div className={"flex"}>
+      <div className={"flex items-center"} style={{gap}}>
         {props.leftIcon && <img src={props.leftIcon} alt={"button-left-icon"} />}
         {props.text && (
           <KSpan text={props.text} color={textColor} fontWeight={fontWeight} textDecoration={textDecoration} />

package/src/components/KLogo/KLogo.tsx

@@ -35,7 +35,7 @@ export interface KLogoProps {
 const KLogo: React.FC<KLogoProps> = (props) => {
   const width = props.width || 88
   const height = props.height || 88
-  const borderRadius = props.borderRadius || 10
+  const borderRadius = props.borderRadius !== undefined ? props.borderRadius : 10
   const logoColor = props.logoColor || "black"
 
   const logoIcon = logoColor === "black" ? Logo : logoColor === "white" ? LogoWhite : LogoGray

package/src/components/KSliderLabel/KSliderLabel.stories.tsx

@@ -1,57 +1,61 @@
-import { Meta, StoryFn } from "@storybook/react"
-import KSliderLabel, { SliderLabelOption, SliderLabelProps } from "./KSliderLabel"
-import { useState } from "react"
+import React, { useEffect, useState } from "react";
+import { Meta, StoryFn } from "@storybook/react";
+import KSliderLabel, { SliderLabelProps, SliderLabelOption } from "./KSliderLabel";
 
 export default {
   title: "ReactComponentLibrary/KSliderLabel",
   component: KSliderLabel,
   parameters: {
-    layout: "centered"
-  }
-} as Meta<typeof KSliderLabel>
+    layout: "centered",
+  },
+} as Meta<typeof KSliderLabel>;
 
 const KSliderLabelWrapper: React.FC<SliderLabelProps> = (args) => {
-  const [lengthOfContract, setLengthOfContract] = useState<number>(args.value || 1)
-  const lengthOfContractOptions: SliderLabelOption[] = [
-    { value: 1, label: "6 months" },
-    { value: 2, label: "1 year" },
-    { value: 3, label: "2 years" },
-    { value: 4, label: "3 years" },
-    { value: 5, label: "5 years" }
-  ]
+  const [selectedValue, setSelectedValue] = useState<number | undefined>(0);
+
+  useEffect(() => {
+    console.log("selectedValue: ", selectedValue);
+  }, [selectedValue]);
 
   return (
-    <div className="w-[616px]">
-      <KSliderLabel
-        options={lengthOfContractOptions}
-        value={lengthOfContract}
-        onChange={(sliderOption: SliderLabelOption) => {
-          console.log("DENEME")
-          setLengthOfContract(sliderOption.value)
-        }}
-        titleText={"Contract Duration"}
-        valueText={lengthOfContractOptions.find((option) => option.value === lengthOfContract)?.label || ""}
-      />
-    </div>
-  )
-}
-
-const Template: StoryFn<typeof KSliderLabelWrapper> = (args) => <KSliderLabelWrapper {...args} />
-
-export const KSliderLabelPrimary = Template.bind({})
+    <KSliderLabel
+      {...args}
+      value={selectedValue}
+      onChange={(option) => {
+        console.log("option: ", option);
+        setSelectedValue(option.value);
+        console.log("Value updated to: ", option.value);
+      }}
+    />
+  );
+};
+
+const Template: StoryFn<typeof KSliderLabelWrapper> = (args) => <KSliderLabelWrapper {...args} />;
+
+const options: SliderLabelOption[] = [
+  { label: "Low", value: 0 },
+  { label: "Medium", value: 1 },
+  { label: "Medium", value: 3 },
+  { label: "Medium", value: 4 },
+  { label: "Medium", value: 5 },
+];
+
+export const KSliderLabelPrimary = Template.bind({});
 KSliderLabelPrimary.args = {
-  value: 1,
-  options: [
-    { value: 1, label: "6 months" },
-    { value: 2, label: "1 year" },
-    { value: 3, label: "2 years" },
-    { value: 4, label: "3 years" },
-    { value: 5, label: "5 years" }
-  ],
-  titleText: "Contract Duration",
-  onChange: (option: SliderLabelOption) => {
-    // Do 
-    console.log("0")
-  },
-  fontSize: 10
-}
+  options,
+  disabled: false,
+  width: "440px",
+  titleText: "Slider Title",
+  valueText: "50",
+  fontSize: 14,
+  color: "#000",
+};
+
+export const KSliderLabelHoverText = Template.bind({});
+KSliderLabelHoverText.args = {
+  options,
+  titleText: "Hover to see me!",
+  valueText: "50",
+  fontSize: 14,
+  color: "#000",
+};

package/src/components/KSliderLabel/KSliderLabel.tsx

@@ -67,7 +67,8 @@ const KSliderLabel: React.FC<SliderLabelProps> = (props) => {
           ref={titleTextRef}
           className="relative pl-4"
           style={{
-            top: titleFits ? "40px" : "0px"
+            top: titleFits ? "40px" : "0px",
+            transitionDuration: "0.3s"
           }}
         >
           <KSpan
@@ -83,7 +84,9 @@ const KSliderLabel: React.FC<SliderLabelProps> = (props) => {
           ref={valueTextRef}
           className="relative pr-4"
           style={{
-            top: valueFits ? "40px" : "0px"
+            top: valueFits ? "40px" : "0px",
+            transitionDuration: "0.3s"
+
           }}
         >
           <KSpan

package/src/main.css

@@ -224,7 +224,6 @@
 }
 
 .k-slider-label-input::-webkit-slider-thumb {
-    -webkit-appearance: none;
     margin-top: -4px;
     /* Align the thumb vertically with the track */
     /* Width of the thumb */
@@ -234,8 +233,8 @@
     margin-top: 16px ;
     background-position: center;
     position: relative;
-    opacity: 0;
     cursor: grab;
+    opacity: 0;
 }
 .k-slider-label-input::-webkit-slider-thumb:active {
     cursor: grabbing;