✨ Add Anchor component

src/components/common/Anchor.stories.jsx

@@ -0,0 +1,39 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Anchor as AnchorComponent } from "./Anchor"
+
+
+export default {
+    component: AnchorComponent,
+    title: "Common/Anchor",
+    decorators: [Decorators.Bluelib],
+    argTypes: {
+        href: {
+            type: "string",
+        }
+    }
+}
+
+
+const AnchorTemplate = props => (
+    <AnchorComponent {...props}>This is a link.</AnchorComponent>
+)
+
+
+export const Broken = AnchorTemplate.bind({})
+Broken.args = {
+    href: undefined,
+}
+
+
+export const Link = AnchorTemplate.bind({})
+Link.args = {
+    href: "https://example.org/",
+}
+
+
+export const Download = AnchorTemplate.bind({})
+Download.args = {
+    href: "magnet:?xt=urn:btih:377852690518c09acdcdd970068a5eaa47dd0a9d&dn=gimp-2.10.24-setup-3.exe&tr=udp%3a%2f%2ftracker.opentrackr.org%3a1337%2fannounce&tr=udp%3a%2f%2ftracker.coppersurfer.tk%3a6969%2fannounce&tr=udp%3a%2f%2ftracker.leechers-paradise.org%3a6969%2fannounce&tr=https%3a%2f%2fashrise.com%3a443%2fphoenix%2fannounce&tr=udp%3a%2f%2ftracker.openbittorrent.com%3a80%2fannounce&ws=https%3a%2f%2fartfiles.org%2fgimp.org%2fpub%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fdownload.gimp.org%2fpub%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.acc.umu.se%2fpub%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.cc.uoc.gr%2fmirrors%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.fau.de%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.gwdg.de%2fpub%2fmisc%2fgrafik%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.icm.edu.pl%2fpub%2fgraphics%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.lysator.liu.se%2fpub%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.snt.utwente.nl%2fpub%2fsoftware%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fgimp.ip-connect.info%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirror.jaleco.com%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirror.klaus-uwe.me%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirror.umd.edu%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirrors.dotsrc.org%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirrors.syringanetworks.net%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirrors.ukfast.co.uk%2fsites%2fgimp.org%2fpub%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirrors.xmission.com%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fwww.mirrorservice.org%2fsites%2fftp.gimp.org%2fpub%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fwww.nic.funet.fi%2fpub%2fmirrors%2fftp.gimp.org%2fv2.10%2fwindows%2f",
+}

src/components/common/Anchor.tsx

@@ -0,0 +1,43 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Types from "../../types"
+import {BaseElement} from "../BaseElement"
+import mergeClassNames from "classnames"
+
+
+export interface AnchorProps extends Types.BluelibHTMLProps<HTMLAnchorElement> {
+    displayStyle?: "broken" | "link" | "download",
+
+    children: React.ReactNode,
+}
+
+
+const DISPLAY_STYLE_CLASSES = {
+    link: "anchor-link",
+    download: "anchor-download",
+    broken: "anchor-broken",
+}
+
+
+export function Anchor({displayStyle, href, ...props}: AnchorProps): JSX.Element {
+    if(!displayStyle) {
+        if(href) {
+            // noinspection HttpUrlsUsage
+            if(href.startsWith("http://") || href.startsWith("https://")) {
+                displayStyle = "link"
+            }
+            else {
+                displayStyle = "download"
+            }
+        }
+        else {
+            displayStyle = "broken"
+        }
+    }
+
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "anchor", DISPLAY_STYLE_CLASSES[displayStyle])
+
+    return (
+        <BaseElement kind={"a"} {...props}/>
+    )
+}