Update Avatar stories

Remove controls from default, add alternative playground for responsive size, as this prop accepts two different types of data.
primer · Jul 23, 2024 · 9620c0b · 9620c0b
1 parent 61daced
commit 9620c0b
Showing 1 changed file with 56 additions and 37 deletions.
diff --git a/packages/react/src/Avatar/Avatar.stories.tsx b/packages/react/src/Avatar/Avatar.stories.tsx
@@ -7,46 +7,65 @@ import placeholderAvatar from '../fixtures/images/avatar-mona.png'
 export default {
   title: 'Components/Avatar',
   component: Avatar,
-  args: {
-    size: AvatarSizes[1],
-    shape: 'circle',
-    src: placeholderAvatar,
-    alt: 'A random avatar picture',
-  },
-  argTypes: {
-    size: {
-      description: 'The size of the Avatar',
-      control: {
-        type: 'radio',
-        options: AvatarSizes,
-      },
+} as Meta<typeof Avatar>
+
+export const Default = () => (
+  <Avatar src="https://avatars.githubusercontent.com/u/92997159?v=4" alt="A random avatar picture" />
+)
+
+export const Playground: StoryFn<typeof Avatar> = args => <Avatar {...args} />
+Playground.argTypes = {
+  shape: {
+    description: 'The shape of the Avatar',
+    options: AvatarShapes,
+    control: {
+      type: 'radio',
     },
-    shape: {
-      description: 'The shape of the Avatar',
-      control: {
-        type: 'radio',
-        options: AvatarShapes,
-      },
+  },
+  src: {
+    description: 'The url of the image to display',
+    type: {name: 'string', required: true},
+    control: {
+      type: 'text',
     },
-    src: {
-      description: 'The url of the image to display',
-      type: {name: 'string', required: true},
-      control: {
-        type: 'text',
-      },
+  },
+  alt: {
+    description: 'The alt text for the image',
+    type: {name: 'string', required: true},
+    control: {
+      type: 'text',
     },
-    alt: {
-      description: 'The alt text for the image',
-      type: {name: 'string', required: true},
-      control: {
-        type: 'text',
-      },
+  },
+  size: {
+    description: 'The size of the Avatar',
+    options: AvatarSizes,
+    control: {
+      type: 'radio',
     },
   },
-} as Meta<typeof Avatar>
+}
+Playground.args = {
+  shape: 'circle',
+  src: placeholderAvatar,
+  alt: 'A random avatar picture',
+  size: AvatarSizes[1],
+}
 
-export const Playground: StoryFn<typeof Avatar> = args => <Avatar {...args} />
-
-export const Default = () => (
-  <Avatar src="https://avatars.githubusercontent.com/u/92997159?v=4" alt="A random avatar picture" />
-)
+export const Playground2: StoryFn<typeof Avatar> = args => <Avatar {...args} />
+Playground2.argTypes = {
+  ...Playground.argTypes,
+  size: {
+    control: {
+      type: 'object',
+    },
+  },
+}
+Playground2.args = {
+  ...Playground.args,
+  size: {
+    narrow: AvatarSizes[1],
+    regular: AvatarSizes[2],
+    wide: AvatarSizes[3],
+  },
+}
+Playground2.storyName = 'Playground (responsive)'