feat: extract SettingsProfile into component
This is taking care of the view when the Settings is selected for a profile. Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This commit is contained in:
André Jaenisch
parent
841ddd5a17
commit
581ab76ca7
9 changed files with 409 additions and 5 deletions
22
src/lib/components/molecules/Settings.svelte
Normal file
22
src/lib/components/molecules/Settings.svelte
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<!--
|
||||
Settings molecule.
|
||||
Copyright (C) 2024 André Jaenisch
|
||||
SPDX-FileCopyrightText: 2024 André Jaenisch
|
||||
SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
|
||||
This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
-->
|
||||
|
||||
<script>
|
||||
import SettingsSidebar from '../atoms/SettingsSidebar.svelte';
|
||||
import SettingsProfile from './SettingsProfile.svelte';
|
||||
</script>
|
||||
|
||||
<div class="flex bg-surface-50">
|
||||
<SettingsSidebar />
|
||||
<SettingsProfile />
|
||||
</div>
|
||||
121
src/lib/components/molecules/SettingsProfile.svelte
Normal file
121
src/lib/components/molecules/SettingsProfile.svelte
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
<!--
|
||||
SettingsProfile molecule.
|
||||
Copyright (C) 2024 André Jaenisch
|
||||
SPDX-FileCopyrightText: 2024 André Jaenisch
|
||||
SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
|
||||
This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
-->
|
||||
|
||||
<script>
|
||||
import { _ } from 'svelte-i18n';
|
||||
import { Person24, Upload16, XCircleFill12 } from 'svelte-octicons';
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col flex-1 gap-4 pe-8 pb-8 pt-20 bg-surface-100">
|
||||
<div class="flex text-surface-500 text-xl font-semibold">{$_('settings.profile.headline')}</div>
|
||||
<div class="flex flex-col gap-6">
|
||||
<div class="text-surface-500 font-semibold">{$_('settings.profile.avatar.headline')}</div>
|
||||
<div class="flex flex-col px-2">
|
||||
<div class="flex gap-4">
|
||||
<Person24 fill="currentColor" class="h-16 w-16 text-white bg-surface-400 rounded-full" />
|
||||
<button
|
||||
type="button"
|
||||
class="btn flex gap-4 justify-between px-4 bg-surface-50 border-surface-100"
|
||||
>
|
||||
<Upload16 fill="currentColor" />
|
||||
<span>{$_('settings.profile.avatar.upload')}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" class="btn p-0 text-warning-700">
|
||||
<XCircleFill12 fill="currentColor" />
|
||||
<span>{$_('settings.profile.avatar.remove')}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex gap-8">
|
||||
<div class="flex flex-col gap-2 grow">
|
||||
<span class="text-surface-500 font-semibold">{$_('settings.profile.name.label')}</span>
|
||||
<input
|
||||
type="text"
|
||||
placeholder={$_('settings.profile.name.placeholder')}
|
||||
class="input bg-white placeholder:text-surface-300"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 flex-1 shrink basis-40">
|
||||
<span class="text-surface-500 font-semibold">{$_('settings.profile.pronouns.label')}</span
|
||||
>
|
||||
<input type="text" class="input bg-white" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<span class="text-surface-500 font-semibold">{$_('settings.profile.bio.label')}</span>
|
||||
<textarea
|
||||
placeholder={$_('settings.profile.bio.placeholder')}
|
||||
rows="4"
|
||||
class="placeholder:text-surface-300"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div class="text-surface-500 font-semibold">{$_('settings.profile.extra.headline')}</div>
|
||||
<div class="text-surface-500">{$_('settings.profile.extra.hint')}</div>
|
||||
<div class="flex gap-2 py-1">
|
||||
<input
|
||||
type="text"
|
||||
class="input bg-white shrink basis-40 placeholder:text-surface-300"
|
||||
placeholder={$_('settings.profile.extra.label.placeholder')}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
class="input bg-white grow placeholder:text-surface-300"
|
||||
placeholder={$_('settings.profile.extra.content.placeholder')}
|
||||
/>
|
||||
</div>
|
||||
<div class="flex gap-2 py-1">
|
||||
<input
|
||||
type="text"
|
||||
class="input bg-white shrink basis-40 placeholder:text-surface-300"
|
||||
placeholder={$_('settings.profile.extra.label.placeholder')}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
class="input bg-white grow placeholder:text-surface-300"
|
||||
placeholder={$_('settings.profile.extra.content.placeholder')}
|
||||
/>
|
||||
</div>
|
||||
<div class="flex gap-2 py-1">
|
||||
<input
|
||||
type="text"
|
||||
class="input bg-white shrink basis-40 placeholder:text-surface-300"
|
||||
placeholder={$_('settings.profile.extra.label.placeholder')}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
class="input bg-white grow placeholder:text-surface-300"
|
||||
placeholder={$_('settings.profile.extra.content.placeholder')}
|
||||
/>
|
||||
</div>
|
||||
<div class="flex gap-2 py-1">
|
||||
<input
|
||||
type="text"
|
||||
class="input bg-white shrink basis-40 placeholder:text-surface-300"
|
||||
placeholder={$_('settings.profile.extra.label.placeholder')}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
class="input bg-white grow placeholder:text-surface-300"
|
||||
placeholder={$_('settings.profile.extra.content.placeholder')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -185,7 +185,34 @@
|
|||
"label": ""
|
||||
},
|
||||
"profile": {
|
||||
"avatar": {
|
||||
"headline": "",
|
||||
"remove": "",
|
||||
"upload": ""
|
||||
},
|
||||
"bio": {
|
||||
"label": "",
|
||||
"placeholder": ""
|
||||
},
|
||||
"extra": {
|
||||
"content": {
|
||||
"placeholder": ""
|
||||
},
|
||||
"headline": "",
|
||||
"hint": "",
|
||||
"label": {
|
||||
"placeholder": ""
|
||||
}
|
||||
},
|
||||
"headline": "",
|
||||
"label": "",
|
||||
"name": {
|
||||
"label": "",
|
||||
"placeholder": ""
|
||||
},
|
||||
"pronouns": {
|
||||
"label": ""
|
||||
}
|
||||
},
|
||||
"ssh_gpg_keys": {
|
||||
"label": ""
|
||||
|
|
|
|||
|
|
@ -185,7 +185,34 @@
|
|||
"label": ""
|
||||
},
|
||||
"profile": {
|
||||
"avatar": {
|
||||
"headline": "",
|
||||
"remove": "",
|
||||
"upload": ""
|
||||
},
|
||||
"bio": {
|
||||
"label": "",
|
||||
"placeholder": ""
|
||||
},
|
||||
"extra": {
|
||||
"content": {
|
||||
"placeholder": ""
|
||||
},
|
||||
"headline": "",
|
||||
"hint": "",
|
||||
"label": {
|
||||
"placeholder": ""
|
||||
}
|
||||
},
|
||||
"headline": "",
|
||||
"label": "",
|
||||
"name": {
|
||||
"label": "",
|
||||
"placeholder": ""
|
||||
},
|
||||
"pronouns": {
|
||||
"label": ""
|
||||
}
|
||||
},
|
||||
"ssh_gpg_keys": {
|
||||
"label": ""
|
||||
|
|
|
|||
|
|
@ -185,7 +185,34 @@
|
|||
"label": "Notifications"
|
||||
},
|
||||
"profile": {
|
||||
"label": "Profile"
|
||||
"avatar": {
|
||||
"headline": "Avatar",
|
||||
"remove": "remove",
|
||||
"upload": "Upload image"
|
||||
},
|
||||
"bio": {
|
||||
"label": "Bio",
|
||||
"placeholder": "Tell us something about you in less than 250 characters..."
|
||||
},
|
||||
"extra": {
|
||||
"content": {
|
||||
"placeholder": "Content"
|
||||
},
|
||||
"headline": "Extra fields",
|
||||
"hint": "Your homepage, age, location, anything you want.",
|
||||
"label": {
|
||||
"placeholder": "Label"
|
||||
}
|
||||
},
|
||||
"headline": "Profile",
|
||||
"label": "Profile",
|
||||
"name": {
|
||||
"label": "Name",
|
||||
"placeholder": "Name others recognize you by"
|
||||
},
|
||||
"pronouns": {
|
||||
"label": "Pronouns"
|
||||
}
|
||||
},
|
||||
"ssh_gpg_keys": {
|
||||
"label": "SSH/GPG Keys"
|
||||
|
|
|
|||
|
|
@ -185,7 +185,34 @@
|
|||
"label": ""
|
||||
},
|
||||
"profile": {
|
||||
"avatar": {
|
||||
"headline": "",
|
||||
"remove": "",
|
||||
"upload": ""
|
||||
},
|
||||
"bio": {
|
||||
"label": "",
|
||||
"placeholder": ""
|
||||
},
|
||||
"extra": {
|
||||
"content": {
|
||||
"placeholder": ""
|
||||
},
|
||||
"headline": "",
|
||||
"hint": "",
|
||||
"label": {
|
||||
"placeholder": ""
|
||||
}
|
||||
},
|
||||
"headline": "",
|
||||
"label": "",
|
||||
"name": {
|
||||
"label": "",
|
||||
"placeholder": ""
|
||||
},
|
||||
"pronouns": {
|
||||
"label": ""
|
||||
}
|
||||
},
|
||||
"ssh_gpg_keys": {
|
||||
"label": ""
|
||||
|
|
|
|||
|
|
@ -185,7 +185,34 @@
|
|||
"label": ""
|
||||
},
|
||||
"profile": {
|
||||
"avatar": {
|
||||
"headline": "",
|
||||
"remove": "",
|
||||
"upload": ""
|
||||
},
|
||||
"bio": {
|
||||
"label": "",
|
||||
"placeholder": ""
|
||||
},
|
||||
"extra": {
|
||||
"content": {
|
||||
"placeholder": ""
|
||||
},
|
||||
"headline": "",
|
||||
"hint": "",
|
||||
"label": {
|
||||
"placeholder": ""
|
||||
}
|
||||
},
|
||||
"headline": "",
|
||||
"label": "",
|
||||
"name": {
|
||||
"label": "",
|
||||
"placeholder": ""
|
||||
},
|
||||
"pronouns": {
|
||||
"label": ""
|
||||
}
|
||||
},
|
||||
"ssh_gpg_keys": {
|
||||
"label": ""
|
||||
|
|
|
|||
26
stories/molecules/SettingsProfile.stories.ts
Normal file
26
stories/molecules/SettingsProfile.stories.ts
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
/* Stories for SettingsProfile molecule.
|
||||
* Copyright (C) 2024 André Jaenisch
|
||||
* SPDX-FileCopyrightText: 2024 André Jaenisch
|
||||
* SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/svelte';
|
||||
|
||||
import SettingsProfile from '$lib/components/molecules/SettingsProfile.svelte';
|
||||
|
||||
const meta = {
|
||||
title: 'Molecules/SettingsProfile',
|
||||
component: SettingsProfile,
|
||||
tags: ['autodocs']
|
||||
} satisfies Meta<SettingsProfile>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Plain: Story = {};
|
||||
100
tests/components/molecules/SettingsProfile.test.ts
Normal file
100
tests/components/molecules/SettingsProfile.test.ts
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
/* Component test for SettingsProfile molecule.
|
||||
* Copyright (C) 2024 André Jaenisch
|
||||
* SPDX-FileCopyrightText: 2024 André Jaenisch
|
||||
* SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import '@testing-library/jest-dom';
|
||||
import { render, screen } from '@testing-library/svelte';
|
||||
import { init, locale, register } from 'svelte-i18n';
|
||||
|
||||
import SettingsProfile from '../../../src/lib/components/molecules/SettingsProfile.svelte';
|
||||
import enMessages from '../../../src/lib/i18n/locales/en.json';
|
||||
|
||||
describe('SettingsProfile.svelte', () => {
|
||||
beforeEach(() => {
|
||||
register('en', () => import('../../../src/lib/i18n/locales/en.json'));
|
||||
init({ fallbackLocale: 'en', initialLocale: 'en' });
|
||||
locale.set('en');
|
||||
});
|
||||
|
||||
it('should mount', () => {
|
||||
// Arrange
|
||||
// Nothing to prepare
|
||||
|
||||
// Act
|
||||
const { container } = render(SettingsProfile);
|
||||
|
||||
// Assert
|
||||
expect(container).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should have an avatar section', () => {
|
||||
// Arrange
|
||||
// Nothing to prepare
|
||||
|
||||
// Act
|
||||
render(SettingsProfile);
|
||||
|
||||
// Assert
|
||||
expect(screen.getByText(enMessages.settings.profile.avatar.headline)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have an avatar upload button', () => {
|
||||
// Arrange
|
||||
// Nothing to prepare
|
||||
|
||||
// Act
|
||||
render(SettingsProfile);
|
||||
|
||||
// Assert
|
||||
expect(
|
||||
screen.getByRole('button', { name: enMessages.settings.profile.avatar.upload })
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have an avatar remove button', () => {
|
||||
// Arrange
|
||||
// Nothing to prepare
|
||||
|
||||
// Act
|
||||
render(SettingsProfile);
|
||||
|
||||
// Assert
|
||||
expect(
|
||||
screen.getByRole('button', { name: enMessages.settings.profile.avatar.remove })
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have a name input', () => {
|
||||
// Arrange
|
||||
// Nothing to prepare
|
||||
|
||||
// Act
|
||||
render(SettingsProfile);
|
||||
|
||||
// Assert
|
||||
expect(
|
||||
screen.getByPlaceholderText(enMessages.settings.profile.name.placeholder)
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it.skip('should have a pronouns input', () => {
|
||||
// Arrange
|
||||
// Nothing to prepare
|
||||
|
||||
// Act
|
||||
render(SettingsProfile);
|
||||
|
||||
// Assert
|
||||
expect(
|
||||
screen.getByRole('textbox', { name: enMessages.settings.profile.pronouns.label })
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
Loading…
Reference in a new issue