Fix Avatar stories after microsoft#19449

bsunderhus · Oct 1, 2021 · 7169a0e · 7169a0e
1 parent 5e5ec29
commit 7169a0e
Showing 1 changed file with 28 additions and 13 deletions.
diff --git a/packages/react-avatar/src/Avatar.stories.tsx b/packages/react-avatar/src/Avatar.stories.tsx
@@ -49,18 +49,18 @@ export const Basic = () => {
         <Avatar shape="square" icon={<People20Regular />} />
       </StoryExample>
       <StoryExample title="Badges">
-        <Avatar name={examples.name[1]} badge="available" />
+        <Avatar name={examples.name[1]} badge={{ status: 'available' }} />
         <Avatar name={examples.name[2]} badge={{ status: 'available', outOfOffice: true }} />
-        <Avatar name={examples.name[3]} image={{ src: examples.image[3] }} badge="offline" />
+        <Avatar name={examples.name[3]} image={{ src: examples.image[3] }} badge={{ status: 'offline' }} />
       </StoryExample>
       <StoryExample title="Size">
-        <Avatar size={20} name={examples.name[4]} image={{ src: examples.image[4] }} badge="offline" />
-        <Avatar size={48} name={examples.name[5]} image={{ src: examples.image[5] }} badge="available" />
-        <Avatar size={96} name={examples.name[6]} image={{ src: examples.image[6] }} badge="away" />
+        <Avatar size={20} name={examples.name[4]} image={{ src: examples.image[4] }} badge={{ status: 'offline' }} />
+        <Avatar size={48} name={examples.name[5]} image={{ src: examples.image[5] }} badge={{ status: 'available' }} />
+        <Avatar size={96} name={examples.name[6]} image={{ src: examples.image[6] }} badge={{ status: 'away' }} />
       </StoryExample>
       <StoryExample title="Brand color">
-        <Avatar color="brand" name={examples.name[4]} badge="doNotDisturb" />
-        <Avatar color="brand" badge="available" />
+        <Avatar color="brand" name={examples.name[4]} badge={{ status: 'doNotDisturb' }} />
+        <Avatar color="brand" badge={{ status: 'available' }} />
       </StoryExample>
       <StoryExample title="Colorful">
         <Avatar color="colorful" name={examples.name[13]} />
@@ -221,19 +221,34 @@ export const ActiveAnimation = () => {
 
 export const CustomSizes = () => (
   <StoryExample title="Custom size">
-    <Avatar name={examples.name[11]} badge="available" size={20} style={{ width: '13px', height: '13px' }} />
-    <Avatar image={{ src: examples.image[12] }} badge="away" size={20} style={{ width: '21px', height: '21px' }} />
-    <Avatar name={examples.name[13]} badge="busy" size={32} style={{ width: '34px', height: '34px' }} />
+    <Avatar
+      name={examples.name[11]}
+      badge={{ status: 'available' }}
+      size={20}
+      style={{ width: '13px', height: '13px' }}
+    />
+    <Avatar
+      image={{ src: examples.image[12] }}
+      badge={{ status: 'away' }}
+      size={20}
+      style={{ width: '21px', height: '21px' }}
+    />
+    <Avatar name={examples.name[13]} badge={{ status: 'busy' }} size={32} style={{ width: '34px', height: '34px' }} />
     <Avatar
       image={{ src: examples.image[14] }}
-      badge="doNotDisturb"
+      badge={{ status: 'doNotDisturb' }}
       size={48}
       style={{ width: '55px', height: '55px' }}
     />
-    <Avatar name={examples.name[15]} badge="offline" size={72} style={{ width: '89px', height: '89px' }} />
+    <Avatar
+      name={examples.name[15]}
+      badge={{ status: 'offline' }}
+      size={72}
+      style={{ width: '89px', height: '89px' }}
+    />
     <Avatar
       image={{ src: examples.image[16] }}
-      badge="outOfOffice"
+      badge={{ status: 'outOfOffice' }}
       size={128}
       style={{ width: '144px', height: '144px' }}
     />