[CL-444] Use Canvas story wrapper properly (#13375)

libs/components/src/avatar/avatar.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
+import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
 
 import * as stories from "./avatar.stories";
 
@@ -18,15 +18,15 @@ visual indicator to recognize which of a personal or work account a user is logg
 
 ### Large: 64px
 
-<Story of={stories.Large} />
+<Canvas of={stories.Large} />
 
 ### Default: 48px
 
-<Story of={stories.Default} />
+<Canvas of={stories.Default} />
 
 ### Small 28px
 
-<Story of={stories.Small} />
+<Canvas of={stories.Small} />
 
 ## Background color
 
@@ -37,9 +37,9 @@ priority:
 - ID
 - Text, usually set to the user's Name field
 
-<Story of={stories.ColorByText} />
+<Canvas of={stories.ColorByText} />
 Use the user 'ID' field if `Name` is not defined.
-<Story of={stories.ColorByID} />
+<Canvas of={stories.ColorByID} />
 
 ## Outline
 
@@ -47,7 +47,7 @@ If the avatar is displayed on one of the theme's `background` color variables or
 display the avatar with a 1 pixel `secondary-600` border to meet WCAG AA graphic contrast guidelines
 for interactive elements.
 
-<Story of={stories.Border} />
+<Canvas of={stories.Border} />
 
 ## Avatar as a button