fix: add missing className in HOC components

src/index.test.tsx

@@ -150,6 +150,18 @@ test("LinkItUrl", () => {
   );
 });
 
+test("LinkItUrl to have className", () => {
+  render(
+    <LinkItUrl className="hello">
+      www.google.com<div>hi</div>
+    </LinkItUrl>
+  );
+  expect(screen.getByRole("link", { name: "www.google.com" })).toHaveAttribute(
+    "class",
+    "hello"
+  );
+});
+
 test("LinkItJira", () => {
   render(
     <LinkItJira domain="https://projectid.atlassian.net">

src/index.tsx

@@ -1,6 +1,10 @@
 import React, { Fragment, isValidElement, cloneElement } from "react";
 import type { ReactNode } from "react";
-import type { Component } from "./types";
+import type {
+  Component,
+  HOCLinkProps,
+  JiraHOCLinkProps
+} from "./types";
 import { UrlComponent, urlRegex } from "./url";
 import { TwitterComponent, twitterRegex } from "./twitter";
 import { JiraComponent, jiraRegex } from "./jira";
@@ -82,8 +86,11 @@ function findText(
  * urls
  * @example
  * ```
- * <LinkIt>
- *  <div>Hello http://world.com</div>
+ * <LinkIt
+ *   component={(match, key) => <a href={match} key={key}>{match}</a>}
+ *   regex={regexToMatch}
+ * >
+ *  www.google.com<div>hi match_me</div>
  * </LinkIt>
  * ```
  */
@@ -98,55 +105,67 @@ export const LinkIt: React.FC<{
   );
 };
 
-export const LinkItUrl: React.FC = (props) => {
+/**
+ * Link URLs
+ */
+export const LinkItUrl: React.FC<HOCLinkProps> = (props) => {
   return (
     <Fragment>
       {findText(
         props.children,
         (match, key) => (
-          <UrlComponent key={key} match={match} />
+          <UrlComponent key={key} match={match} className={props.className} />
         ),
         urlRegex
       )}
     </Fragment>
   );
 };
 
-export const LinkItTwitter: React.FC = (props) => {
+/**
+ * Link Twitter handles
+ */
+export const LinkItTwitter: React.FC<HOCLinkProps> = (props) => {
   return (
     <Fragment>
       {findText(
         props.children,
         (match, key) => (
-          <TwitterComponent key={key} match={match} />
+          <TwitterComponent key={key} match={match} className={props.className} />
         ),
         twitterRegex
       )}
     </Fragment>
   );
 };
 
-export const LinkItJira: React.FC<{ domain: string }> = (props) => {
+/**
+ * Link Jira tickets
+ */
+export const LinkItJira: React.FC<JiraHOCLinkProps> = (props) => {
   return (
     <Fragment>
       {findText(
         props.children,
         (match, key) => (
-          <JiraComponent key={key} match={match} domain={props.domain} />
+          <JiraComponent key={key} match={match} domain={props.domain} className={props.className} />
         ),
         jiraRegex
       )}
     </Fragment>
   );
 };
 
-export const LinkItEmail: React.FC = (props) => {
+/**
+ * Link Emails
+ */
+export const LinkItEmail: React.FC<HOCLinkProps> = (props) => {
   return (
     <Fragment>
       {findText(
         props.children,
         (match, key) => (
-          <EmailComponent key={key} match={match} />
+          <EmailComponent key={key} match={match} className={props.className} />
         ),
         emailRegex
       )}
@@ -158,3 +177,4 @@ export * from "./url";
 export * from "./twitter";
 export * from "./jira";
 export * from "./email";
+export * from "./types";

src/jira.tsx

@@ -1,9 +1,5 @@
 import React from "react";
-import type { LinkProps } from "types";
-
-interface JiraLinkProps extends LinkProps {
-  domain: string;
-}
+import type { JiraLinkProps } from "types";
 
 export const jiraRegex = /[A-Z]+-\d+/i;
 

src/types.ts

@@ -1,7 +1,28 @@
 export interface LinkProps {
+  /** String that matched the regex */
   match: string;
+  /** Key to be used when looping matches */
   key: number;
+  /** Optional class which is passed to the linked component */
   className?: string;
 }
 
+export interface HOCLinkProps {
+  /** Optional class which is passed to the linked component */
+  className?: string;
+}
+
+export interface JiraLinkProps extends LinkProps {
+  /** Jira base url */
+  domain: string;
+}
+
+export interface JiraHOCLinkProps extends HOCLinkProps {
+  /** Jira base url */
+  domain: string;
+}
+
+/**
+ * Function receives matched string and key to be used for loop, must return a React component
+ */
 export type Component = (match: string, key: number) => JSX.Element;