Chore/storybook/person/avtar/data source

.changeset/fluffy-ads-eat.md

@@ -0,0 +1,5 @@
+---
+'@equinor/fusion-react-components-stories': patch
+---
+
+Updating PersonAvatar story with dataSource

storybook/src/stories/person/avatar/avatar.mdx

@@ -0,0 +1,31 @@
+import { Meta, Markdown, ArgTypes, Canvas } from '@storybook/blocks';
+import * as avatarStories from './avatar.stories';
+
+
+<Meta title="Person/Avatar" />
+
+## Avatar
+<ArgTypes of={ avatarStories.basic } />
+
+### Basic
+<Canvas of={ avatarStories.basic } meta={avatarStories} story={{height: '350px'}}/>
+
+### Sizes
+<Canvas of={ avatarStories.sizes } meta={avatarStories} story={{height: '350px'}}/>
+
+### withDataSource
+
+The avatar will not resolve any data about the user when using property `dataSource`, so the persons avatar will be the users initial as provided in `dataSource`.
+
+When using `dataSource` be sure to add the property `trigger="none"` to prevent the personCard from opening when hovering/clicking on the avatar since it will not resolve a user.
+
+<Canvas of={ avatarStories.withDataSource } meta={avatarStories}  story={{height: '350px'}}/>
+
+### Clickable
+<Canvas of={ avatarStories.clickable } meta={avatarStories} story={{height: '350px'}}/>
+
+### Trigger none
+<Canvas of={ avatarStories.disableCard } meta={avatarStories}/>
+
+### disabled
+<Canvas of={ avatarStories.disabled } meta={avatarStories} />

storybook/src/stories/person/avatar.stories.tsx → storybook/src/stories/person/avatar/avatar.stories.tsx

@@ -2,13 +2,14 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 import { PersonAvatar } from '@equinor/fusion-react-person/src/PersonAvatar';
-import { AvatarSize, PersonDetails } from '@equinor/fusion-react-person/src/index';
+import { AvatarSize, AvatarData } from '@equinor/fusion-react-person/src/index';
 import { PersonProvider } from '@equinor/fusion-react-person/src/PersonProvider';
-import { Theme } from '../../components/Theme';
+import { Theme } from '../../../components/Theme';
 
-import { resolver } from './person-provider';
+import { resolver } from '../person-provider';
 
 import { faker } from '@faker-js/faker';
+import { Story } from '@storybook/blocks';
 faker.seed(123);
 
 const meta: Meta<typeof PersonAvatar> = {
@@ -46,10 +47,23 @@ export const sizes: Story = {
   ),
 };
 
+const person: AvatarData = resolver.getInfo
+  ? (resolver.getInfo({ azureId: faker.string.uuid() }) as AvatarData)
+  : {
+      name: faker.person.fullName(),
+      accountType: 'Employee',
+      accountClassification: 'Internal',
+    };
+
 export const withDataSource: Story = {
   ...basic,
   args: {
-    dataSource: resolver.getInfo ? (resolver.getInfo({ azureId: faker.string.uuid() }) as PersonDetails) : undefined,
+    dataSource: {
+      name: person.name,
+      accountType: person.accountType,
+      accountClassification: person.accountClassification,
+    },
+    trigger: 'none',
   },
 };
 

storybook/src/stories/person/person.mdx

@@ -7,13 +7,13 @@ import changelogReact from '#packages/person/CHANGELOG.md?raw';
 
 import { ChangeLog, PackageInfo } from '../../components';
 
-import * as avatarStories from './avatar.stories';
+import * as avatarStories from './avatar/avatar.stories';
 import * as cardStories from './card.stories';
 import * as selectStories from './select.stories';
 import * as cellStories from './cell.stories';
 
 
-<Meta title="Person/Docs" />
+<Meta title="Person" />
 
 <PackageInfo pkg={pkg} />
 
@@ -29,6 +29,11 @@ import * as cellStories from './cell.stories';
 <Canvas of={ avatarStories.sizes } meta={avatarStories} story={{height: '350px'}}/>
 
 ### withDataSource
+
+The avatar will not resolve any data about the user when using property `dataSource`, so the persons avatar will be the users initial as provided in `dataSource`.
+
+When using `dataSource` be sure to add the property `trigger="none"` to prevent the personCard from opening when hovering/clicking on the avatar since it will not resolve a user.
+
 <Canvas of={ avatarStories.withDataSource } meta={avatarStories}  story={{height: '350px'}}/>
 
 ### Clickable