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 } + * element wrapper with `rel="noopener noreferrer"` and `target="_blank"` + * already set. + */ +export class PrivacyLink extends Component { + render(): VNode { + const props: Record = { + class: this.props.class, + href: this.props.href, + rel: 'noopener noreferrer', + target: '_blank', + }; + + return html`${this.props.children}`; + } +} 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 with children + + `, + ), + '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 + + '' + +> Text children + + 'Example' + +> HTML children + + 'Example with children' + +> CSS class + + 'Example' 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 0000000..5858066 Binary files /dev/null and b/tests/links/snapshots/privacy-link.test.ts.snap differ