Addinng more properties to playground story for token & skeletonText (#6096)

Co-authored-by: Marie Lucca <[email protected]>
Co-authored-by: Marie Lucca <[email protected]>

Author: lukasoppermann

packages/react/src/Token/Token.features.stories.tsx

@@ -42,7 +42,7 @@ export const TokenWithLeadingVisual = () => {
   return <Token text="token" leadingVisual={GitBranchIcon} />
 }
 
-export const TokenWithOnRemoveFn = () => {
+export const TokenWithOnRemoveFn = ({...args}) => {
   return (
     <Box
       display="flex"
@@ -51,19 +51,31 @@ export const TokenWithOnRemoveFn = () => {
         gap: get('space.2'),
       }}
     >
-      <Token text="token" onRemove={action('remove me')} />
+      <Token text="token" onRemove={action('remove me')} {...args} />
       <Token
         as="a"
         href="/?path=/story/components-token-features--issue-label-token-custom-colors"
         onRemove={action('remove me')}
         text="Link"
+        {...args}
       />
-      <Token as="button" onClick={action('clicked')} onRemove={action('remove me')} text="Button" />
+      <Token as="button" onClick={action('clicked')} onRemove={action('remove me')} text="Button" {...args} />
     </Box>
   )
 }
 
 TokenWithOnRemoveFn.storyName = 'Token with onRemove fn'
+TokenWithOnRemoveFn.args = {
+  size: 'medium',
+}
+TokenWithOnRemoveFn.argTypes = {
+  size: {
+    control: {
+      type: 'radio',
+    },
+    options: ['small', 'medium', 'large', 'xlarge'],
+  },
+}
 
 export const DefaultIssueLabelToken = () => {
   return <IssueLabelToken text="good first issue" />
@@ -115,6 +127,7 @@ export const IssueLabelTokenWithOnRemoveFn = () => {
 IssueLabelTokenWithOnRemoveFn.storyName = 'IssueLabelToken with onRemove fn'
 
 export const SmallToken = () => <Token text="token" size="small" />
+export const MediumlToken = () => <Token text="token" size="medium" />
 export const LargeToken = () => <Token text="token" size="xlarge" />
 export const XLargeToken = () => <Token text="token" size="xlarge" />
 

packages/react/src/Token/Token.stories.tsx

@@ -1,5 +1,7 @@
 import type {Meta, StoryFn} from '@storybook/react'
+import {action} from '@storybook/addon-actions'
 import Token from './Token'
+import {GitBranchIcon} from '@primer/octicons-react'
 
 export default {
   title: 'Components/Token',
@@ -8,12 +10,24 @@ export default {
 
 export const Default = () => <Token text="token" />
 
-export const Playground: StoryFn<typeof Token> = args => {
-  return <Token {...args} />
+export const Playground: StoryFn<typeof Token> = ({onRemove, onClick, leadingVisual, ...args}) => {
+  return (
+    <Token
+      {...args}
+      onRemove={onRemove ? action('onRemove') : undefined}
+      onClick={onClick ? action('onClick') : undefined}
+      leadingVisual={leadingVisual ? GitBranchIcon : undefined}
+    />
+  )
 }
 Playground.args = {
   text: 'Token',
   size: 'medium',
+  isSelected: false,
+  leadingVisual: undefined,
+  hideRemoveButton: false,
+  onRemove: undefined,
+  onClick: undefined,
 }
 Playground.argTypes = {
   size: {
@@ -22,4 +36,29 @@ Playground.argTypes = {
     },
     options: ['small', 'medium', 'large', 'xlarge'],
   },
+  isSelected: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  leadingVisual: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  hideRemoveButton: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  onRemove: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  onClick: {
+    control: {
+      type: 'boolean',
+    },
+  },
 }

packages/react/src/experimental/Skeleton/SkeletonAvatar.stories.tsx

@@ -24,6 +24,7 @@ export const Playground: StoryFn<Args> = args => {
 
 Playground.args = {
   size: DEFAULT_AVATAR_SIZE,
+  square: false,
 }
 
 Playground.argTypes = {

packages/react/src/experimental/Skeleton/SkeletonText.stories.tsx

@@ -18,12 +18,15 @@ Playground.args = {
 
 Playground.argTypes = {
   lines: {
-    type: 'number',
+    control: {type: 'range', min: 1, max: 10, step: 1},
   },
   maxWidth: {
     type: 'string',
   },
   size: {
-    type: 'string',
+    control: {
+      type: 'select',
+    },
+    options: ['bodySmall', 'bodyMedium', 'bodyLarge', 'titleSmall', 'titleMedium', 'titleLarge', 'display', 'subtitle'],
   },
 }