From f8c9137b0fab092f64823dd8a95c8c15bd841558 Mon Sep 17 00:00:00 2001
From: bendtherules <abhasbhattacharya2@gmail.com>
Date: Mon, 26 Oct 2020 17:42:51 +0530
Subject: [PATCH] InternalLink - check href startsWith + forward props to <a/>

To make it more accessible and allow customization.
---
 components/InternalLink.jsx    | 25 ++++++++++++++++---------
 docs/create-modify-element.mdx |  2 +-
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/components/InternalLink.jsx b/components/InternalLink.jsx
index 03b9a8c..43d0a4b 100644
--- a/components/InternalLink.jsx
+++ b/components/InternalLink.jsx
@@ -1,17 +1,24 @@
 import React from "react";
 
-const InternalLink = ({ hash, title }) => {
-  const handleLink = (event) => {
-    //manually change hash to trigger hashChange event.
+/*
+InternalLink should be only used to link to fragment urls placed within a Accordion, in the same page.
+`href` props should only contain a fragment prefixed with "link-" (start with "#link-")
+It allows all the same props as <a/> tag. 
+*/
+const InternalLink = ({ href, className = "navlink", ...otherProps }) => {
+  if (!href.startsWith("#link-")) {
+    throw new TypeError(
+      "InternalLink - href must start with #. It should only be used for same-page fragment links."
+    );
+  }
+
+  const handleLink = () => {
+    // manually change hash to trigger hashChange event.
     window.location.hash = "#";
-    window.location.hash = hash;
+    window.location.hash = href;
   };
 
-  return (
-    <a onClick={handleLink} className="navlink">
-      {title}
-    </a>
-  );
+  return <a onClick={handleLink} className={className} href={href} {...otherProps}></a>;
 };
 
 export default InternalLink;
diff --git a/docs/create-modify-element.mdx b/docs/create-modify-element.mdx
index ee9b9fd..5c28e90 100644
--- a/docs/create-modify-element.mdx
+++ b/docs/create-modify-element.mdx
@@ -66,7 +66,7 @@ for (let p of paras) {
 }
 ```
 
-`querySelectorAll` is also available on <b>Element</b> and <b>DocumentFragment</b>, in the <InternalLink title = "same way as querySelector" hash = "link-element-has-qs"/>.
+`querySelectorAll` is also available on <b>Element</b> and <b>DocumentFragment</b>, in the <InternalLink href="#link-element-has-qs">same way as querySelector</InternalLink>.
 
 <MDN title="querySelectorAll" url="https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll" />