@@ -147,17 +169,28 @@
{/if}
+
+
+
+
{#each renderedTodos as task, i (i)}
- {@const { _id, _rev, title, value, completed, updated } = task}
+ {@const { _id, _rev, title, value, completed, updated, expanded } = task}
handleEdit(task)}
on:delete={() => remove(_id, _rev)}
on:complete={() => handleToggleComplete(task)}
+ on:toggleExpand={(e) => handleToggleExpand(_id, e)}
/>
{/each}
@@ -192,6 +225,7 @@
.Search {
align-self: flex-end;
position: sticky;
+ z-index: 1;
top: 1rem;
display: inline-flex;
gap: 1rem;
@@ -209,4 +243,8 @@
font-size: 1rem;
font-family: inherit;
}
+
+ main :global(.ToggleExpand) {
+ margin-left: auto;
+ }
diff --git a/src/components/Button.stories.svelte b/src/components/Button.stories.svelte
index 8e2e1e4..7118b8f 100644
--- a/src/components/Button.stories.svelte
+++ b/src/components/Button.stories.svelte
@@ -2,7 +2,13 @@
import Button from './Button.svelte';
export const meta = {
title: 'Button',
- component: Button
+ component: Button,
+ argTypes: {
+ variant: { control: 'select', options: ['', 'primary', 'link'], default: '' },
+ size: { control: 'radio', options: ['', 'large', 'small'], default: '' },
+ type: { control: 'select', options: ['submit', 'button', 'reset'], default: 'button' },
+ selected: { control: 'boolean', default: false }
+ }
};
diff --git a/src/components/Button.svelte b/src/components/Button.svelte
index c2cbf88..ef8b39b 100644
--- a/src/components/Button.svelte
+++ b/src/components/Button.svelte
@@ -1,27 +1,33 @@
diff --git a/src/components/Form.stories.svelte b/src/components/Form.stories.svelte
index 48b31a7..778103d 100644
--- a/src/components/Form.stories.svelte
+++ b/src/components/Form.stories.svelte
@@ -21,8 +21,8 @@
name="Empty"
play={async ({ canvasElement }) => {
const canvas = within(canvasElement);
- const cancelButton = canvas.getByText('Cancel');
- const submitButton = canvas.getByText('Submit');
+ const cancelButton = canvas.getByTestId('cancel');
+ const submitButton = canvas.getByTestId('submit');
const titleField = canvas.getByLabelText('Title', { selector: 'input' });
const contentField = canvas.getByLabelText('Content', { selector: 'textarea' });
@@ -56,8 +56,8 @@
}}
play={async ({ canvasElement }) => {
const canvas = within(canvasElement);
- const cancelButton = canvas.getByText('Cancel');
- const updateButton = canvas.getByText('Update');
+ const cancelButton = canvas.getByTestId('cancel');
+ const updateButton = canvas.getByTestId('submit');
const titleField = canvas.getByLabelText('Title', { selector: 'input' });
const contentField = canvas.getByLabelText('Content', { selector: 'textarea' });
@@ -65,7 +65,7 @@
userEvent.click(updateButton);
waitFor(() => {
- const submitButton = canvas.getByText('Submit');
+ const submitButton = canvas.getByTestId('submit');
expect(titleField.textContent).toBe('');
expect(contentField.textContent).toBe('');
expect(submitButton).toBeDisabled();
diff --git a/src/components/Form.svelte b/src/components/Form.svelte
index afaab96..6728d12 100644
--- a/src/components/Form.svelte
+++ b/src/components/Form.svelte
@@ -24,16 +24,16 @@
$: invalid = data.title.trim().length < 1 || data.value.trim().length < 1;
$: buttonText = isEdit ? 'Update' : 'Submit';
- function clear() {
+ const clear = () => {
defaultValue = null;
data = { title: '', value: '' };
dispatch('clear');
- }
+ };
- function submit() {
+ const submit = () => {
isEdit ? dispatch('update', data) : dispatch('submit', data);
clear();
- }
+ };