From c6ed3023e817b86217e5e3d2ac8bee930ea948e0 Mon Sep 17 00:00:00 2001
From: Bauke <me@bauke.xyz>
Date: Wed, 16 Mar 2022 01:06:35 +0100
Subject: [PATCH] Add the PrivacyLink component.

---
 source/gram.ts                                |   2 +
 source/links/privacy-link.ts                  |  29 ++++++++++++++
 tests/links/privacy-link.test.ts              |  36 ++++++++++++++++++
 tests/links/snapshots/privacy-link.test.ts.md |  23 +++++++++++
 .../links/snapshots/privacy-link.test.ts.snap | Bin 0 -> 302 bytes
 5 files changed, 90 insertions(+)
 create mode 100644 source/links/privacy-link.ts
 create mode 100644 tests/links/privacy-link.test.ts
 create mode 100644 tests/links/snapshots/privacy-link.test.ts.md
 create mode 100644 tests/links/snapshots/privacy-link.test.ts.snap

diff --git a/source/gram.ts b/source/gram.ts
index e69de29..db36922 100644
--- a/source/gram.ts
+++ b/source/gram.ts
@@ -0,0 +1,2 @@
+// Link Exports
+export {PrivacyLink, PrivacyLinkProps} from './links/privacy-link.js';
diff --git a/source/links/privacy-link.ts b/source/links/privacy-link.ts
new file mode 100644
index 0000000..3ec09aa
--- /dev/null
+++ b/source/links/privacy-link.ts
@@ -0,0 +1,29 @@
+import {html} from 'htm/preact';
+import {Component, ComponentChildren, VNode} from 'preact';
+
+/**
+ * Component properties for {@linkcode PrivacyLink}.
+ */
+export type PrivacyLinkProps = {
+  children: ComponentChildren;
+  class: string;
+  href: string;
+};
+
+/**
+ * A simple {@linkcode https://developer.mozilla.org/docs/Web/HTML/Element/a <a>}
+ * element wrapper with `rel="noopener noreferrer"` and `target="_blank"`
+ * already set.
+ */
+export class PrivacyLink extends Component<PrivacyLinkProps> {
+  render(): VNode {
+    const props: Record<string, string> = {
+      class: this.props.class,
+      href: this.props.href,
+      rel: 'noopener noreferrer',
+      target: '_blank',
+    };
+
+    return html`<a ...${props}>${this.props.children}</a>`;
+  }
+}
diff --git a/tests/links/privacy-link.test.ts b/tests/links/privacy-link.test.ts
new file mode 100644
index 0000000..1a06f7c
--- /dev/null
+++ b/tests/links/privacy-link.test.ts
@@ -0,0 +1,36 @@
+import test from 'ava';
+import {html} from 'htm/preact';
+import {render} from 'preact-render-to-string';
+
+import {PrivacyLink} from '../../source/gram.js';
+
+test('PrivacyLink', (t) => {
+  t.snapshot(render(html`<${PrivacyLink} />`), 'Empty');
+
+  t.snapshot(
+    render(html`<${PrivacyLink} href="https://example.org">Example<//>`),
+    'Text children',
+  );
+
+  t.snapshot(
+    render(
+      html`
+        <${PrivacyLink} href="https://example.org">
+          Example <span class="bold">with children</span>
+        <//>
+      `,
+    ),
+    'HTML children',
+  );
+
+  t.snapshot(
+    render(
+      html`
+        <${PrivacyLink} class="bold italic" href="https://example.org">
+          Example
+        <//>
+      `,
+    ),
+    'CSS class',
+  );
+});
diff --git a/tests/links/snapshots/privacy-link.test.ts.md b/tests/links/snapshots/privacy-link.test.ts.md
new file mode 100644
index 0000000..6c88c42
--- /dev/null
+++ b/tests/links/snapshots/privacy-link.test.ts.md
@@ -0,0 +1,23 @@
+# Snapshot report for `tests/links/privacy-link.test.ts`
+
+The actual snapshot is saved in `privacy-link.test.ts.snap`.
+
+Generated by [AVA](https://avajs.dev).
+
+## PrivacyLink
+
+> Empty
+
+    '<a rel="noopener noreferrer" target="_blank"></a>'
+
+> Text children
+
+    '<a href="https://example.org" rel="noopener noreferrer" target="_blank">Example</a>'
+
+> HTML children
+
+    '<a href="https://example.org" rel="noopener noreferrer" target="_blank">Example <span class="bold">with children</span></a>'
+
+> CSS class
+
+    '<a class="bold italic" href="https://example.org" rel="noopener noreferrer" target="_blank">Example</a>'
diff --git a/tests/links/snapshots/privacy-link.test.ts.snap b/tests/links/snapshots/privacy-link.test.ts.snap
new file mode 100644
index 0000000000000000000000000000000000000000..5858066b8cc08e0ba8364bfa7e5c37642f158eba
GIT binary patch
literal 302
zcmV+}0nz?JRzV<BZeeh9Xm4~Nb~6eC05jKBX0I%KUa6hK5!4cG;M50!LAjQVjS*|$
zr}xM%jUS5$00000000BEkikmBKoCGvL_GTk%YHzES4rYQ3O!U1(t|gdB-8AY$?h^c
zYKteqi=Sb?)RY!&dJ}ZcGw(g-b5)VAyZE+6u|nA0vwenov#_qS(LspDOMKrp4G28k
zoFx~@ZYJl+<>V>@#Ynk!-UoEZ%6Y~WG9zmxz%5FyA1eaa=^{&^K!OShXMK>(0SO~y
zIUvoz$h8p(@j6X$4SgV-dT#YEY_t8@kF;OnT2yT;HH_{c{}{<%|5&cF7{IBTAjVu*
zo*G@eSTWxfS-M*|`b<Ax-YrfepGJ}G5P3vYR)B1+|LJS?wk-F$FX^B9E-3;40H#@q
AE&u=k

literal 0
HcmV?d00001