forge/Anvil
1
0
Fork 0
Code Pull requests Activity

docs: add story for profile picture case

Browse source 
I also check for accessibility now.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This commit is contained in:
André Jaenisch 2024-02-09 21:13:06 +01:00
parent 8ed9837fea
commit 41d82656b3
No known key found for this signature in database
GPG key ID: 5A668E771F1ED854
5 changed files with 48 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.storybook/main.ts
View file

@ -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',

1
.storybook/preview.ts
View file

@ -1,4 +1,5 @@
import type { Preview } from '@storybook/svelte';
import '../src/app.postcss';
const preview: Preview = {
parameters: {

24
package-lock.json generated
View file

@ -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",

5
package.json
View file

@ -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",

19
stories/atoms/Avatar.stories.ts
View file

@ -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'
}
};