diff --git a/source/buttons/feedback-button.ts b/source/buttons/feedback-button.ts new file mode 100644 index 0000000..e6f05ee --- /dev/null +++ b/source/buttons/feedback-button.ts @@ -0,0 +1,68 @@ +import {html} from 'htm/preact'; +import {Component, VNode} from 'preact'; + +/** + * Component properties for {@linkcode FeedbackButton}. + */ +export type FeedbackButtonProps = { + click: (event: MouseEvent) => unknown; + extraAttributes: Record; + feedbackText: string; + text: string; + timeout: number; +}; + +/** + * Component state for {@linkcode FeedbackButton}. + */ +export type FeedbackButtonState = { + currentText: string; + timeoutHandle: number | undefined; +}; + +/** + * A {@linkcode https://developer.mozilla.org/docs/Web/HTML/Element/button + `; + } +} diff --git a/source/gram.ts b/source/gram.ts index 79646cf..85a9065 100644 --- a/source/gram.ts +++ b/source/gram.ts @@ -1,5 +1,6 @@ // Button Exports export * from './buttons/confirm-button.js'; +export * from './buttons/feedback-button.js'; // Link Exports export * from './links/privacy-link.js'; diff --git a/tests/buttons/feedback-button.test.ts b/tests/buttons/feedback-button.test.ts new file mode 100644 index 0000000..b520de8 --- /dev/null +++ b/tests/buttons/feedback-button.test.ts @@ -0,0 +1,43 @@ +import {GlobalRegistrator} from '@happy-dom/global-registrator'; +import test from 'ava'; +import {html} from 'htm/preact'; +import {render} from 'preact'; + +import {FeedbackButton, FeedbackButtonProps} from '../../source/gram.js'; +import {sleep} from '../utilities.js'; + +test.before(() => { + GlobalRegistrator.register(); +}); + +test('FeedbackButton', async (t) => { + t.plan(5); + + const props: FeedbackButtonProps = { + click: (event) => t.true(event !== undefined), + extraAttributes: { + id: 'feedback-button', + }, + feedbackText: 'Feedback Example', + text: 'Example', + timeout: 1000, + }; + + render(html`<${FeedbackButton} ...${props} />`, document); + + const buttonElement = + document.querySelector('#feedback-button')!; + + t.snapshot(buttonElement.outerHTML, 'Default state'); + buttonElement.click(); + + // Wait for Preact to do its stuff. + await sleep(); + + t.snapshot(buttonElement.outerHTML, 'Feedback state'); + buttonElement.click(); + + await sleep(props.timeout); + + t.snapshot(buttonElement.outerHTML, 'Back to default state'); +}); diff --git a/tests/buttons/snapshots/feedback-button.test.ts.md b/tests/buttons/snapshots/feedback-button.test.ts.md new file mode 100644 index 0000000..26c1f45 --- /dev/null +++ b/tests/buttons/snapshots/feedback-button.test.ts.md @@ -0,0 +1,19 @@ +# Snapshot report for `tests/buttons/feedback-button.test.ts` + +The actual snapshot is saved in `feedback-button.test.ts.snap`. + +Generated by [AVA](https://avajs.dev). + +## FeedbackButton + +> Default state + + '' + +> Feedback state + + '' + +> Back to default state + + '' diff --git a/tests/buttons/snapshots/feedback-button.test.ts.snap b/tests/buttons/snapshots/feedback-button.test.ts.snap new file mode 100644 index 0000000..3b203a8 Binary files /dev/null and b/tests/buttons/snapshots/feedback-button.test.ts.snap differ