docs(person-select): examples for using selectedPerson attribute

storybook/src/stories/person/resolve-mock/person-resolve-mock.tsx

@@ -6,7 +6,7 @@ import {
   PersonSearchResult,
 } from '@equinor/fusion-react-person';
 
-const fakeResponseTime = (delay = 3000) => new Promise((res) => setTimeout(res, delay));
+const fakeResponseTime = (delay = 0) => new Promise((res) => setTimeout(res, delay));
 
 const users = [
   {
@@ -164,6 +164,7 @@ const getUsers = (args: {
       (u) =>
         u.name.toLocaleLowerCase().indexOf(search) > -1 ||
         u.mail.toLocaleLowerCase().indexOf(search) > -1 ||
+        u.azureId === search ||
         u.mobilePhone.toLocaleLowerCase().indexOf(search) > -1,
     ) as PersonSearchResult;
   } else if (args.random) {
@@ -177,5 +178,5 @@ export const createResolve: PersonResolver = {
   getDetails: (args) => fakeResponseTime().then(() => getUsers(args) as PersonDetails),
   getInfo: (args) => fakeResponseTime().then(() => getUsers(args) as PersonInfo),
   getPhoto: (args) => Promise.resolve((getUsers(args) as PersonPicture).pictureSrc),
-  search: (args) => fakeResponseTime(1000).then(() => getUsers(args) as PersonSearchResult),
+  search: (args) => getUsers(args) as PersonSearchResult,
 };

storybook/src/stories/person/select-example.stories.tsx

@@ -1,5 +1,6 @@
+import { useState, useEffect } from 'react';
 import { Meta, Story } from '@storybook/react';
-import { PersonProvider, PersonSelect, PersonSelectProps } from '@equinor/fusion-react-person/src';
+import { PersonInfo, PersonProvider, PersonSelect, PersonSelectProps } from '@equinor/fusion-react-person/src';
 import { createResolve } from './resolve-mock/person-resolve-mock';
 import { PersonSelectEvent } from '../../../../packages/person/src/PersonSelect';
 
@@ -53,3 +54,71 @@ export const Component: Story<PersonSelectProps> = (props: PersonSelectProps) =>
     </div>
   </PersonProvider>
 );
+
+export const SelectedPersonNull: Story<PersonSelectProps> = (props: PersonSelectProps) => (
+  <PersonProvider resolve={createResolve}>
+    <div style={{ maxWidth: '420px', height: '350px', margin: '3em auto' }}>
+      <PersonSelect {...props} />
+    </div>
+  </PersonProvider>
+);
+SelectedPersonNull.args = {
+  selectedPerson: null,
+};
+
+export const SelectedPersonByUpn: Story<PersonSelectProps> = ({ selectedPerson: _, ...props }: PersonSelectProps) => {
+  const [selected, setSelected] = useState<PersonInfo | string | null | undefined>(undefined);
+
+  // set selectedPerson on next render to await resolver.
+  useEffect(() => {
+    setSelected('[email protected]');
+  }, [setSelected]);
+
+  return (
+    <PersonProvider resolve={createResolve}>
+      <div style={{ maxWidth: '420px', height: '350px', margin: '3em auto' }}>
+        <PersonSelect selectedPerson={selected} {...props} />
+      </div>
+    </PersonProvider>
+  );
+};
+
+export const SelectedPersonByAzureID: Story<PersonSelectProps> = ({
+  selectedPerson: _,
+  ...props
+}: PersonSelectProps) => {
+  const [selected, setSelected] = useState<PersonInfo | string | null | undefined>(undefined);
+
+  // set selectedPerson on next render to await resolver.
+  useEffect(() => {
+    setSelected('49132c24-6ea4-41fe-8221-112f314573f0');
+  }, [setSelected]);
+
+  return (
+    <PersonProvider resolve={createResolve}>
+      <div style={{ maxWidth: '420px', height: '350px', margin: '3em auto' }}>
+        <PersonSelect selectedPerson={selected} {...props} />
+      </div>
+    </PersonProvider>
+  );
+};
+
+export const SelectedPersonByPersonInfo: Story<PersonSelectProps> = ({
+  selectedPerson: _,
+  ...props
+}: PersonSelectProps) => {
+  const [selected, setSelected] = useState<PersonInfo | string | null | undefined>(undefined);
+
+  // set selectedPerson on next render to await resolver.
+  useEffect(() => {
+    setSelected({ azureId: '49132c24-6ea4-41fe-8221-112f314573f0' });
+  }, [setSelected]);
+
+  return (
+    <PersonProvider resolve={createResolve}>
+      <div style={{ maxWidth: '420px', height: '350px', margin: '3em auto' }}>
+        <PersonSelect selectedPerson={selected} {...props} />
+      </div>
+    </PersonProvider>
+  );
+};