@julseb-lib/react 0.0.42 → 0.0.44

package/dist/lib/components/Footer/Footer.tsx

@@ -91,7 +91,9 @@ export const Footer = forwardRef<HTMLDivElement, ILibFooter>(
                                       <FooterLinkSeparatorContainer>
                                           {linksSeparator === "dash"
                                               ? "-"
-                                              : "•"}
+                                              : linksSeparator === "dot"
+                                              ? "•"
+                                              : ""}
                                       </FooterLinkSeparatorContainer>
                                   )}
                               </Fragment>

package/dist/lib/components/Header/HeaderNavLink.tsx

@@ -2,7 +2,7 @@
 /*=============================================== HeaderNavLink ===============================================*/
 
 import { isValidElement } from "react"
-import { NavLink } from "react-router-dom"
+import { Link } from "../../"
 import type { ILibHeaderNavLink } from "./subtypes"
 
 export const HeaderNavLink = ({
@@ -12,56 +12,21 @@ export const HeaderNavLink = ({
 }: ILibHeaderNavLink) => {
     if (isValidElement(link)) return link
 
-    if (link.to)
-        return (
-            <NavLink
-                data-testid={
-                    link["data-testid"] || (testid && `${testid}.NavLink`)
-                }
-                className={link.className || (className && "NavLink")}
-                id={link.id}
-                ref={link.ref}
-                to={link.to}
-                end={link.end}
-                target={link.blank ? "_blank" : undefined}
-                rel={link.blank ? "noreferrer noopener" : undefined}
-            >
-                {link.text}
-            </NavLink>
-        )
-
-    if (link.href)
-        return (
-            <a
-                data-testid={
-                    link["data-testid"] || (testid && `${testid}.NavLink`)
-                }
-                className={link.className || (className && "NavLink")}
-                id={link.id}
-                ref={link.ref}
-                href={link.href}
-                target={link.blank ? "_blank" : undefined}
-                rel={link.blank ? "noreferrer noopener" : undefined}
-            >
-                {link.text}
-            </a>
-        )
-
-    if (link.onClick)
-        return (
-            <button
-                data-testid={
-                    link["data-testid"] || (testid && `${testid}.NavButton`)
-                }
-                className={link.className || (className && "NavButton")}
-                id={link.id}
-                ref={link.ref}
-                onClick={link.onClick}
-                disabled={link.disabled}
-            >
-                {link.text}
-            </button>
-        )
-
-    return null
+    return (
+        <Link
+            data-testid={link["data-testid"] || (testid && `${testid}.NavLink`)}
+            className={link.className || (className && "NavLink")}
+            id={link.id}
+            ref={link.ref}
+            end={link.end}
+            blank={link.blank}
+            to={link.to}
+            href={link.href}
+            onClick={link.onClick}
+            disabled={link.disabled}
+            isNavLink
+        >
+            {link.text}
+        </Link>
+    )
 }

package/dist/lib/components/Link/Link.tsx

@@ -0,0 +1,68 @@
+/*=============================================== Link component ===============================================*/
+
+import { forwardRef, type RefObject } from "react"
+import { Link as RouterLink, NavLink } from "react-router-dom"
+import type { ILibLink } from "./types"
+
+/**
+ * @description Returns a Link component
+ * @link https://documentation-components-react.vercel.app/components/link
+ * @extends HTMLDivElement
+ * @prop data-testid?: string
+ * @prop ref?: ForwardedRef<HTMLDivElement>
+ */
+export const Link = forwardRef<HTMLAnchorElement | HTMLButtonElement, ILibLink>(
+    (
+        { "data-testid": testid, isNavLink, to, href, onClick, blank, end, ...rest },
+        ref
+    ) => {
+        if (onClick)
+            return (
+                <button
+                    data-testid={testid}
+                    ref={ref as RefObject<HTMLButtonElement>}
+                    onClick={onClick}
+                    {...rest}
+                />
+            )
+
+        if (href)
+            return (
+                <a
+                    data-testid={testid}
+                    ref={ref as RefObject<HTMLAnchorElement>}
+                    href={href}
+                    target={blank ? "_blank" : undefined}
+                    rel={blank ? "noreferrer noopener" : undefined}
+                    {...rest}
+                />
+            )
+
+        if (isNavLink && to)
+            return (
+                <NavLink
+                    data-testid={testid}
+                    ref={ref as RefObject<HTMLAnchorElement>}
+                    to={to}
+                    target={blank ? "_blank" : undefined}
+                    rel={blank ? "noreferrer noopener" : undefined}
+                    end={end}
+                    {...rest}
+                />
+            )
+
+        if (to)
+            return (
+                <RouterLink
+                    data-testid={testid}
+                    ref={ref as RefObject<HTMLAnchorElement>}
+                    to={to}
+                    target={blank ? "_blank" : undefined}
+                    rel={blank ? "noreferrer noopener" : undefined}
+                    {...rest}
+                />
+            )
+
+        return null
+    }
+)

package/dist/lib/components/Link/index.ts

@@ -0,0 +1,3 @@
+/*=============================================== Link exports ===============================================*/
+
+export * from "./Link"

package/dist/lib/components/Link/types.ts

@@ -0,0 +1,9 @@
+/*=============================================== Link types ===============================================*/
+
+import type { LibComponentBase, LibButtonLinkBlank } from "../../types"
+
+export type ILibLink = LibComponentBase<HTMLAnchorElement | HTMLButtonElement> &
+    LibButtonLinkBlank & {
+        isNavLink?: boolean
+        end?: boolean
+    }

package/dist/lib/index.ts

@@ -85,6 +85,7 @@ export * from "./components/Section"
 export * from "./components/Grid"
 export * from "./components/Flexbox"
 export * from "./components/Icon"
+export * from "./components/Link"
 export * from "./components/Key"
 export * from "./components/TextIcon"
 export * from "./components/Highlight"

package/dist/lib/types/components-props.ts

@@ -78,4 +78,5 @@ export * from "../components/DragList/types"
 export * from "../components/Fieldset/types"
 export * from "../components/Datepicker/types"
 export * from "../components/Timepicker/types"
+export * from "../components/Link/types"
 // prependHere

package/dist/lib/types/type-values.ts

@@ -260,7 +260,7 @@ export const typeValues = {
 
     footerDirections: { horizontal: "horizontal", vertical: "vertical" },
 
-    footerSeparators: { dot: "dot", dash: "dash" },
+    footerSeparators: { dot: "dot", dash: "dash", none: "none" },
 
     buttonGroupToggleSelects: { single: "single", multi: "multi" },
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@julseb-lib/react",
-    "version": "0.0.42",
+    "version": "0.0.44",
     "type": "module",
     "license": "MIT",
     "scripts": {