Make PrivacyLink HTML attributes a separate prop.

This commit is contained in:
Bauke 2022-03-17 11:31:09 +01:00
parent dfeaa5db22
commit 3cc7d3e6b9
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
4 changed files with 10 additions and 14 deletions

View File

@ -5,9 +5,8 @@ import {Component, ComponentChildren, VNode} from 'preact';
* Component properties for {@linkcode PrivacyLink}.
*/
export type PrivacyLinkProps = {
attributes: Record<string, unknown>;
children: ComponentChildren;
class: string;
href: string;
};
/**
@ -18,8 +17,7 @@ export type PrivacyLinkProps = {
export class PrivacyLink extends Component<PrivacyLinkProps> {
render(): VNode {
const props: Record<string, string> = {
class: this.props.class,
href: this.props.href,
...this.props.attributes,
rel: 'noopener noreferrer',
target: '_blank',
};

View File

@ -7,15 +7,18 @@ import {PrivacyLink} from '../../source/gram.js';
test('PrivacyLink', (t) => {
t.snapshot(render(html`<${PrivacyLink} />`), 'Empty');
const attributes: Record<string, unknown> = {
href: 'https://example.org',
};
t.snapshot(
render(html`<${PrivacyLink} href="https://example.org">Example<//>`),
render(html`<${PrivacyLink} attributes=${attributes}>Example<//>`),
'Text children',
);
t.snapshot(
render(
html`
<${PrivacyLink} href="https://example.org">
<${PrivacyLink} attributes=${attributes}>
Example <span class="bold">with children</span>
<//>
`,
@ -23,14 +26,9 @@ test('PrivacyLink', (t) => {
'HTML children',
);
attributes.class = 'bold italic';
t.snapshot(
render(
html`
<${PrivacyLink} class="bold italic" href="https://example.org">
Example
<//>
`,
),
render(html`<${PrivacyLink} attributes=${attributes}>Example<//>`),
'CSS class',
);
});

View File

@ -20,4 +20,4 @@ Generated by [AVA](https://avajs.dev).
> CSS class
'<a class="bold italic" href="https://example.org" rel="noopener noreferrer" target="_blank">Example</a>'
'<a href="https://example.org" class="bold italic" rel="noopener noreferrer" target="_blank">Example</a>'