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; @@ -17,6 +23,15 @@ type Story = StoryObj; export const Plain: Story = { args: { + avatar: '', displayName: 'Jane Doe' } }; + +export const ProfilePicture: Story = { + args: { + ...Plain.args, + avatar: + 'https://codeberg.org/avatars/a9defc12e1826458289a39e3a66792f0adef29a73fb79b71c66560b7d80aac8f?size=280' + } +};