kahuna-base-react-components 0.2.15 → 0.2.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kahuna-base-react-components",
-  "version": "0.2.15",
+  "version": "0.2.16",
   "description": "Kahuna Base React Components",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -68,4 +68,4 @@
     "react-date-picker": "^11.0.0",
     "react-select": "^5.8.0"
   }
-}
+}

package/src/assets/union.svg

@@ -0,0 +1,3 @@
+<svg width="77" height="16" viewBox="0 0 77 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M0.708008 15.8631V0H3.28208V8.18083L10.4684 0H13.6021L7.84889 6.66212L14.0275 15.8631H10.9155L5.99037 8.58845L3.28208 11.6708V15.8631H0.708008ZM33.2158 4.12439C35.7682 4.12439 37.8497 5.52913 37.8497 9.40476V9.40579V15.8641H35.4316V9.6096C35.4316 7.41051 34.4683 6.23254 32.6779 6.23254C30.7749 6.23254 29.6113 7.66031 29.6113 9.99423V15.8631H27.1931V0H29.6113V5.93782C30.3278 4.9407 31.4244 4.12439 33.2158 4.12439ZM58.593 4.12439C61.1227 4.12439 63.2042 5.52913 63.2042 9.40476V15.8631H60.7644V9.60857C60.7644 7.40944 59.8465 6.2315 58.0334 6.2315C56.1088 6.2315 54.9668 7.65928 54.9668 10.0162V15.8631H52.5486V4.26025H54.6529L54.9214 5.77893C55.6379 4.87172 56.7345 4.12439 58.593 4.12439ZM75.8009 13.733H76.2924V15.8631H75.0162C73.4489 15.8631 72.912 15.1607 72.912 14.0047C72.151 15.1827 70.9874 15.9989 69.1288 15.9989C66.6219 15.9989 64.8759 14.7531 64.8759 12.5999C64.8759 10.22 66.5775 8.88321 69.7783 8.88321H72.6662V8.18083C72.6662 6.88896 71.7483 6.09564 70.1593 6.09564C68.7272 6.09564 67.7638 6.77502 67.5852 7.79514H65.2125C65.4582 5.52913 67.3839 4.12439 70.2718 4.12439C73.3167 4.12439 75.0627 5.59812 75.0627 8.33969V12.9856C75.0627 13.5741 75.3084 13.733 75.8009 13.733ZM72.6662 11.1043V10.6966H69.6668C68.1665 10.6966 67.3384 11.2631 67.3384 12.4411C67.3384 13.4162 68.1448 14.0956 69.4654 14.0956C71.4799 14.0956 72.6435 12.8947 72.6662 11.1043ZM47.827 4.26128V10.0622V10.0632C47.827 12.4651 46.6406 13.8699 44.8719 13.8699C43.1032 13.8699 42.208 12.7139 42.208 10.4479V4.26128H39.7898V10.7196C39.7898 14.6851 41.8724 16 44.3123 16C46.081 16 47.1331 15.2757 47.8497 14.3914L48.1181 15.8641H50.2451V4.26128H47.827ZM25.9561 13.733H25.4647C24.9722 13.733 24.7264 13.5751 24.7264 12.9856V8.33969C24.7264 5.59708 22.9805 4.12439 19.9356 4.12439C17.0476 4.12439 15.1219 5.52913 14.8762 7.79514H17.249C17.4276 6.77502 18.3899 6.09564 19.823 6.09564C21.412 6.09564 22.33 6.88896 22.33 8.18083V8.88321H19.442C16.2412 8.88321 14.5396 10.22 14.5396 12.5999C14.5396 14.7531 16.2856 15.9989 18.7926 15.9989C20.6501 15.9989 21.8147 15.1827 22.5757 14.0047C22.5757 15.1607 23.1126 15.8631 24.68 15.8631H25.9561V13.733ZM22.3289 10.6966V11.1043C22.3073 12.8947 21.1426 14.0956 19.1281 14.0956C17.8075 14.0956 17.0011 13.4152 17.0011 12.4411C17.0011 11.2631 17.8292 10.6966 19.3295 10.6966H22.3289Z" fill="#111111"/>
+</svg>

package/src/components/KLogo/KLogo.tsx

@@ -11,6 +11,8 @@ import LogoWhite from "../../assets/logo-small.svg"
 //@ts-ignore
 import LogoWhiteHovered from "../../assets/logo-small-hovered.svg"
 //@ts-ignore
+import UnionSvg from "../../assets/union.svg"
+//@ts-ignore
 import LogoGray from "../../assets/logo-gray.svg"
 import KTitleSpan from "../KTitleSpan"
 import KSpan from "../KSpan"
@@ -19,15 +21,15 @@ export interface KLogoProps {
   width?: number
   height?: number
   borderRadius?: number
-  primaryText?: string
+  primaryTextVisible?: boolean
   secondaryText?: string
   logoColor?: string
   hoverEnabled?: boolean
-  primaryTextColor?: string
   secondaryTextColor?: string
-  primaryTextFontSize?: number
   secondaryTextFontSize?: number
   hideIcon?: boolean
+  primaryTextWidth?: number
+  primaryTextHeight?: number
 }
 
 const KLogo: React.FC<KLogoProps> = (props) => {
@@ -40,9 +42,10 @@ const KLogo: React.FC<KLogoProps> = (props) => {
   const hoverEnabled = props.hoverEnabled || false
   const hideIcon = props.hideIcon || false
 
-  const primaryTextColor = props.primaryTextColor || "#111"
+  const primaryTextVisible = props.primaryTextVisible || false
+  const primaryTextWidth = props.primaryTextWidth || 76
+  const primaryTextHeight = props.primaryTextHeight || 16
   const secondaryTextColor = props.secondaryTextColor || "#000"
-  const primaryTextFontSize = props.primaryTextFontSize || 20
   const secondaryTextFontSize = props.secondaryTextFontSize || 14
 
   const [onHover, setOnHover] = useState(false)
@@ -58,18 +61,12 @@ const KLogo: React.FC<KLogoProps> = (props) => {
           onMouseLeave={() => setOnHover(false)}
         />
       )}
-      {props.primaryText && (
-        <div className={"ml-2 mr-2 flex items-center"}>
-          <KTitleSpan
-            fontSize={primaryTextFontSize}
-            lineHeight={`${primaryTextFontSize}px`}
-            text={props.primaryText}
-            color={primaryTextColor}
-            bold={true}
-          />
+      {primaryTextVisible && (
+        <div className={"mr-2 flex items-center"} style={{marginLeft: -8}}>
+          <img src={UnionSvg} alt={"kahuna-union"} style={{ width: primaryTextWidth, height: primaryTextHeight }} />
         </div>
       )}
-      {(props.primaryText && props.secondaryText) && <img src={VectorIcon} alt="vector" />}
+      {primaryTextVisible && props.secondaryText && <img src={VectorIcon} alt="vector" />}
       {props.secondaryText && (
         <div className={"pl-2 flex items-center"}>
           <KSpan fontSize={secondaryTextFontSize} text={props.secondaryText} color={secondaryTextColor} />