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

View File

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

View File

@ -20,4 +20,4 @@ Generated by [AVA](https://avajs.dev).
> CSS class > 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>'