Merge pull request #149 from fictoan/hyperlink-component

Add Hyperlink as a usable element

CHANGELOG.md

@@ -1,5 +1,8 @@
 # CHANGELOG
 
+## 1.11.1
+- `Hyperlink` is an `Element` you can use as a <a> tag so you can access Fictoan props
+
 ## 1.11.0
 #### ⚠️ BREAKING CHANGES ⚠️
 - Overhaul all form components to follow a state-led `onChange` handling, instead of mucking around with direct DOM 
@@ -9,6 +12,8 @@
 #### GENERIC CHANGES
 - Add `CheckboxGroup` and `SwitchGroup` components, that work in the same way as `RadioGroup`
 - Add `FileUpload` component with drag-and-drop support
+- Revamp `FileUpload` with drag-and-drop support and multiple file upload support
+- `Textarea` now has a `charLimit` and `wordLimit` props, along with warning and error messages
 
 ## 1.10.7
 - Fix `CodeBlock` word break bug

package.json

@@ -1,6 +1,6 @@
 {
     "name": "fictoan-react",
-    "version": "1.11.0",
+    "version": "1.11.1",
     "private": false,
     "description": "A full-featured, designer-friendly, yet performant framework with plain-English props and focus on rapid iteration.",
     "repository": {

src/components/Element/Tags.tsx

@@ -2,9 +2,37 @@ import React from "react";
 import { Element } from "./Element";
 import { ElementProps } from "./constants";
 
-const createComponentWithElement = <T extends React.ElementType>(tagName: T) => {
-    return React.forwardRef<HTMLElement, ElementProps<{}> & React.HTMLAttributes<HTMLElement>>(
-        (props, ref) => <Element as={tagName} ref={ref} {...props} />
+interface HyperlinkCustomProps {
+    href         : string;
+    target     ? : "_blank" | "_self" | "_parent" | "_top";
+    rel        ? : string;
+    isExternal ? : boolean;
+}
+
+// Helper type for components that might have custom props
+type CustomProps<T extends React.ElementType, P = {}> = ElementProps<{}> &
+    React.HTMLAttributes<HTMLElement> & P;
+
+const createComponentWithElement = <T extends React.ElementType, P = {}>(
+    tagName: T,
+    defaultProps?: Partial<P>
+) => {
+    return React.forwardRef<HTMLElement, CustomProps<T, P>>(
+        (props, ref) => {
+            // Merge default props with provided props
+            const finalProps = { ...defaultProps, ...props };
+
+            // Handle external links for Hyperlink component
+            if (tagName === "a" && "external" in finalProps) {
+                const { external, ...restProps } = finalProps;
+                if (external) {
+                    finalProps.target = "_blank";
+                    finalProps.rel = "noopener noreferrer";
+                }
+            }
+
+            return <Element as={tagName} ref={ref} {...finalProps} />;
+        }
     );
 };
 
@@ -18,3 +46,6 @@ export const Main = createComponentWithElement("main");
 export const Nav = createComponentWithElement("nav");
 export const Section = createComponentWithElement("section");
 export const Span = createComponentWithElement("span");
+export const Hyperlink = createComponentWithElement<"a", HyperlinkCustomProps>("a", {
+    rel: "noopener noreferrer" // Default props for Hyperlink
+});

src/components/Element/index.tsx

@@ -10,7 +10,8 @@ export {
     Main,
     Nav,
     Section,
-    Span
+    Span,
+    Hyperlink
 } from "./Tags";
 
 export type { ElementProps } from "./constants";

src/components/index.tsx

@@ -38,7 +38,8 @@ export {
     Main,
     Nav,
     Section,
-    Span
+    Span,
+    Hyperlink
 } from "./Element";
 
 // FORM ================================================================================================================

src/index.tsx

@@ -65,7 +65,8 @@ export {
     Main,
     Nav,
     Section,
-    Span
+    Span,
+    Hyperlink
 } from "./components/Element";
 
 // FORM ================================================================================================================

src/styles/theme.css

@@ -605,7 +605,7 @@
     --font-size-min    : 16;
     --font-size-max    : 20;
     --scale-ratio-min  : 1.08;
-    --scale-ratio-max  : 1.12;
+    --scale-ratio-max  : 1.16;
 }
 
 :root {