From 41d82656b3f7999666f58d78d4e915f26a7c5242 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Jaenisch?= <andre.jaenisch@posteo.de>
Date: Fri, 9 Feb 2024 21:13:06 +0100
Subject: [PATCH] docs: add story for profile picture case
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

I also check for accessibility now.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
---
 .storybook/main.ts              |  5 +++--
 .storybook/preview.ts           |  1 +
 package-lock.json               | 24 ++++++++++++++++++++++++
 package.json                    |  5 +++--
 stories/atoms/Avatar.stories.ts | 19 +++++++++++++++++--
 5 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 7d83757..52bf4ad 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -8,10 +8,11 @@ const config: StorybookConfig = {
 	addons: [
 		'@storybook/addon-links',
 		'@storybook/addon-essentials',
-		'@storybook/addon-interactions'
+		'@storybook/addon-interactions',
+		'@storybook/addon-a11y'
 	],
 	core: {
-		builder: '@storybook/builder-vite'
+		disableTelemetry: true
 	},
 	framework: {
 		name: '@storybook/sveltekit',
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index a296969..cdebadd 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,4 +1,5 @@
 import type { Preview } from '@storybook/svelte';
+import '../src/app.postcss';
 
 const preview: Preview = {
 	parameters: {
diff --git a/package-lock.json b/package-lock.json
index c4f98c0..770df28 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
 				"@playwright/test": "1.44.1",
 				"@skeletonlabs/skeleton": "2.10.1",
 				"@skeletonlabs/tw-plugin": "0.4.0",
+				"@storybook/addon-a11y": "7.6.13",
 				"@storybook/addon-essentials": "7.6.13",
 				"@storybook/addon-interactions": "7.6.13",
 				"@storybook/addon-links": "7.6.13",
@@ -4201,6 +4202,20 @@
 				"tailwindcss": ">=3.0.0"
 			}
 		},
+		"node_modules/@storybook/addon-a11y": {
+			"version": "7.6.13",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-7.6.13.tgz",
+			"integrity": "sha512-6Qf+tzt1MXXHDUpSVz3P+e7j5HkilXG1VI0UDWPsN9ztjVkK72PIE9LcHSt/ojcrHAzhNlpZaWf7CblciRs2ag==",
+			"dev": true,
+			"dependencies": {
+				"@storybook/addon-highlight": "7.6.13",
+				"axe-core": "^4.2.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			}
+		},
 		"node_modules/@storybook/addon-actions": {
 			"version": "7.6.13",
 			"resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-7.6.13.tgz",
@@ -7009,6 +7024,15 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/axe-core": {
+			"version": "4.9.1",
+			"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.9.1.tgz",
+			"integrity": "sha512-QbUdXJVTpvUTHU7871ppZkdOLBeGUKBQWHkHrvN2V9IQWGMt61zf3B45BtzjxEJzYuj0JBjBZP/hmYS/R9pmAw==",
+			"dev": true,
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/axios": {
 			"version": "1.7.2",
 			"resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
diff --git a/package.json b/package.json
index b83e6a2..992989c 100644
--- a/package.json
+++ b/package.json
@@ -17,8 +17,8 @@
 		"test:unit:coverage": "vitest --coverage",
 		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write .",
-		"storybook": "storybook dev -p 6006",
-		"build-storybook": "storybook build",
+		"storybook": "STORYBOOK_DISABLE_TELEMETRY=1 storybook dev -p 6006",
+		"build-storybook": "STORYBOOK_DISABLE_TELEMETRY=1 storybook build",
 		"deploy-storybook": "gh-pages -d storybook-static -b pages -r git@codeberg.org:Anvil/Anvil.git",
 		"predeploy-storybook": "npm run build-storybook"
 	},
@@ -26,6 +26,7 @@
 		"@playwright/test": "1.44.1",
 		"@skeletonlabs/skeleton": "2.10.1",
 		"@skeletonlabs/tw-plugin": "0.4.0",
+		"@storybook/addon-a11y": "7.6.13",
 		"@storybook/addon-essentials": "7.6.13",
 		"@storybook/addon-interactions": "7.6.13",
 		"@storybook/addon-links": "7.6.13",
diff --git a/stories/atoms/Avatar.stories.ts b/stories/atoms/Avatar.stories.ts
index 358b5da..9a56651 100644
--- a/stories/atoms/Avatar.stories.ts
+++ b/stories/atoms/Avatar.stories.ts
@@ -7,8 +7,14 @@ const meta = {
 	component: Avatar,
 	tags: ['autodocs'],
 	argTypes: {
-		avatar: { control: 'text' },
-		displayName: { control: 'text' }
+		avatar: {
+			control: 'text',
+			description: 'An URL to the image'
+		},
+		displayName: {
+			control: 'text',
+			description: 'If no image is provided, derive initials'
+		}
 	}
 } satisfies Meta<Avatar>;
 
@@ -17,6 +23,15 @@ type Story = StoryObj<typeof meta>;
 
 export const Plain: Story = {
 	args: {
+		avatar: '',
 		displayName: 'Jane Doe'
 	}
 };
+
+export const ProfilePicture: Story = {
+	args: {
+		...Plain.args,
+		avatar:
+			'https://codeberg.org/avatars/a9defc12e1826458289a39e3a66792f0adef29a73fb79b71c66560b7d80aac8f?size=280'
+	}
+};