ayo/astro-reactive-form
ayo/astro-reactive-form
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[feat]: Implement form theme (#69)

Browse source
This commit is contained in:
Fazza Razaq Amiarso 2022-10-08 02:23:32 +07:00 committed by GitHub
parent ef779de6d4
commit 1491135302
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/astro-reactive-form/Form.astro
View file

@ -6,12 +6,15 @@ import FieldSet from './components/FieldSet.astro';
export interface Props { export interface Props {
submitControl?: Submit; submitControl?: Submit;
formGroups: FormGroup[]; formGroups: FormGroup[];
theme?: "light" | "dark";
} }
const { submitControl, formGroups } = Astro.props; const { submitControl, formGroups, theme } = Astro.props;
const formTheme = theme ?? "light";
--- ---
<form class="light"> <form class={formTheme}>
{formGroups?.map((group) => <FieldSet group={group} />)} {formGroups?.map((group) => <FieldSet group={group} />)}
{submitControl && <Field control={new FormControl(submitControl)} />} {submitControl && <Field control={new FormControl(submitControl)} />}
</form> </form>

13
packages/astro-reactive-form/test/Form.astro.test.js
View file

@ -1,4 +1,5 @@
import { expect } from 'chai'; import { expect } from 'chai';
import { describe, beforeEach, it } from 'mocha';
import { getComponentOutput } from 'astro-component-tester'; import { getComponentOutput } from 'astro-component-tester';
describe('Form.astro test', () => { describe('Form.astro test', () => {
@ -44,12 +45,14 @@ describe('Form.astro test', () => {
const expectedCount = 3; const expectedCount = 3;
const element = /<fieldset>/g; const element = /<fieldset>/g;
const fakeFormGroup = { const fakeFormGroup = {
controls: [{ controls: [
{
type: 'checkbox', type: 'checkbox',
name: 'fake-checkbox', name: 'fake-checkbox',
label: 'FAKE CHECKBOX' label: 'FAKE CHECKBOX',
}] },
} ],
};
const props = { formGroups: Array(expectedCount).fill(fakeFormGroup) }; const props = { formGroups: Array(expectedCount).fill(fakeFormGroup) };
component = await getComponentOutput('./Form.astro', props); component = await getComponentOutput('./Form.astro', props);
@ -59,7 +62,7 @@ describe('Form.astro test', () => {
// assert // assert
expect(matches.length).to.equal(expectedCount); expect(matches.length).to.equal(expectedCount);
}) });
}); });
}); });