diff --git a/src/index.test.tsx b/src/index.test.tsx index d519fa4..43391f3 100644 --- a/src/index.test.tsx +++ b/src/index.test.tsx @@ -150,6 +150,18 @@ test("LinkItUrl", () => { ); }); +test("LinkItUrl to have className", () => { + render( + + www.google.com
hi
+
+ ); + expect(screen.getByRole("link", { name: "www.google.com" })).toHaveAttribute( + "class", + "hello" + ); +}); + test("LinkItJira", () => { render( diff --git a/src/index.tsx b/src/index.tsx index 40a7243..f907366 100644 --- a/src/index.tsx +++ b/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 * ``` - * - *
Hello http://world.com
+ * {match}} + * regex={regexToMatch} + * > + * www.google.com
hi match_me
*
* ``` */ @@ -98,13 +105,16 @@ export const LinkIt: React.FC<{ ); }; -export const LinkItUrl: React.FC = (props) => { +/** + * Link URLs + */ +export const LinkItUrl: React.FC = (props) => { return ( {findText( props.children, (match, key) => ( - + ), urlRegex )} @@ -112,13 +122,16 @@ export const LinkItUrl: React.FC = (props) => { ); }; -export const LinkItTwitter: React.FC = (props) => { +/** + * Link Twitter handles + */ +export const LinkItTwitter: React.FC = (props) => { return ( {findText( props.children, (match, key) => ( - + ), twitterRegex )} @@ -126,13 +139,16 @@ export const LinkItTwitter: React.FC = (props) => { ); }; -export const LinkItJira: React.FC<{ domain: string }> = (props) => { +/** + * Link Jira tickets + */ +export const LinkItJira: React.FC = (props) => { return ( {findText( props.children, (match, key) => ( - + ), jiraRegex )} @@ -140,13 +156,16 @@ export const LinkItJira: React.FC<{ domain: string }> = (props) => { ); }; -export const LinkItEmail: React.FC = (props) => { +/** + * Link Emails + */ +export const LinkItEmail: React.FC = (props) => { return ( {findText( props.children, (match, key) => ( - + ), emailRegex )} @@ -158,3 +177,4 @@ export * from "./url"; export * from "./twitter"; export * from "./jira"; export * from "./email"; +export * from "./types"; diff --git a/src/jira.tsx b/src/jira.tsx index 1deacaf..91187a9 100644 --- a/src/jira.tsx +++ b/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; diff --git a/src/types.ts b/src/types.ts index 6a6fb94..a4dff59 100644 --- a/src/types.ts +++ b/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;