Make PrivacyLink HTML attributes a separate prop.
This commit is contained in:
parent
dfeaa5db22
commit
3cc7d3e6b9
|
@ -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',
|
||||||
};
|
};
|
||||||
|
|
|
@ -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',
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
|
@ -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>'
|
||||||
|
|
Binary file not shown.
Loading…
Reference in New Issue