forge/Anvil
1
0
Fork 0
Code Pull requests Activity

feat: extract MainMenuActions into component

Browse source 
This represents the lower part of the main menu with actions I can have
on a project.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This commit is contained in:
André Jaenisch 2024-07-10 12:13:54 +02:00
parent 67d7a70ec9
commit 26b3fc3ff0
No known key found for this signature in database
GPG key ID: 5A668E771F1ED854
8 changed files with 154 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/lib/components/atoms/MainMenuActions.svelte Normal file
View file

@ -0,0 +1,33 @@
<!--
Main menu actions atom.
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 { EyeClosed24, RepoForked24, Star24, TriangleDown24 } from 'svelte-octicons';
</script>
<div class="flex gap-4">
<div class="flex flex-1 align-center justify-center gap-2 bg-white border-surface-200">
<RepoForked24 fill="currentColor" />
<span class="sr-only">{$_('page.profile.menu.actions.fork')}</span>
</div>
<div class="flex flex-1 align-center justify-center gap-2 bg-white border-surface-200">
<Star24 fill="currentColor" />
<span class="sr-only">{$_('page.profile.menu.actions.star')}</span>
</div>
<div class="flex flex-1 align-center justify-center gap-2 bg-white border-surface-200">
<EyeClosed24 fill="currentColor" />
<span class="sr-only">{$_('page.profile.menu.actions.watch')}</span>
<TriangleDown24 fill="currentColor" />
</div>
</div>

5
src/lib/i18n/locales/bg.json
View file

@ -91,6 +91,11 @@
"heading": ""
},
"menu": {
"actions": {
"fork": "",
"star": "",
"watch": ""
},
"buttons": {
"avatar": "",
"issues": "",

5
src/lib/i18n/locales/de.json
View file

@ -91,6 +91,11 @@
"heading": "Aktivitäten"
},
"menu": {
"actions": {
"fork": "",
"star": "",
"watch": ""
},
"buttons": {
"avatar": "",
"issues": "",

5
src/lib/i18n/locales/en.json
View file

@ -91,6 +91,11 @@
"heading": "Activities"
},
"menu": {
"actions": {
"fork": "Fork",
"star": "Star",
"watch": "Watch"
},
"buttons": {
"avatar": "Menu",
"issues": "{number}{blockElementOpen}{number, plural, one{ issue} other{ issues}} open{blockElementClose}",

5
src/lib/i18n/locales/he.json
View file

@ -91,6 +91,11 @@
"heading": "פעילות"
},
"menu": {
"actions": {
"fork": "",
"star": "",
"watch": ""
},
"buttons": {
"avatar": "",
"issues": "",

5
src/lib/i18n/locales/pl.json
View file

@ -91,6 +91,11 @@
"heading": "Aktywność"
},
"menu": {
"actions": {
"fork": "",
"star": "",
"watch": ""
},
"buttons": {
"avatar": "",
"issues": "",

26
stories/atoms/MainMenuActions.stories.ts Normal file
View file

@ -0,0 +1,26 @@
/* Stories for MainMenuActions atom.
* 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 MainMenuActions from '$lib/components/atoms/MainMenuActions.svelte';
const meta = {
title: 'Atoms/MainMenuActions',
component: MainMenuActions,
tags: ['autodocs']
} satisfies Meta<MainMenuActions>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Plain: Story = {};

70
tests/components/atoms/MainMenuActions.test.ts Normal file
View file

@ -0,0 +1,70 @@
/* Component test for MainMenuActions atom.
* 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 MainMenuActions from '../../../src/lib/components/atoms/MainMenuActions.svelte';
import enMessages from '../../../src/lib/i18n/locales/en.json';
describe('MainMenuActions.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(MainMenuActions);
// Assert
expect(container).toBeTruthy();
});
it('should have a fork button', () => {
// Arrange
// Nothing to prepare
// Act
render(MainMenuActions);
// Assert
expect(screen.getByText(enMessages.page.profile.menu.actions.fork)).toBeInTheDocument();
});
it('should have a star button', () => {
// Arrange
// Nothing to prepare
// Act
render(MainMenuActions);
// Assert
expect(screen.getByText(enMessages.page.profile.menu.actions.star)).toBeInTheDocument();
});
it('should have a watch button', () => {
// Arrange
// Nothing to prepare
// Act
render(MainMenuActions);
// Assert
expect(screen.getByText(enMessages.page.profile.menu.actions.watch)).toBeInTheDocument();
});
});