feat: update playground

src/components/Button/Button.stories.mdx

@@ -5,7 +5,7 @@ import Stack from '../storyUtils/Stack';
 import LinkTo from '@storybook/addon-links/react';
 
 import { FIGMA_URL } from '../../utils/common';
-import LoadingButtonShowcase from '../storyUtils/LoadingButtonShowcase';
+import { LoadingButtonShowcase, ButtonShowcase } from '../storyUtils/ButtonShowcases';
 import Overview from '../../storybook/Overview';
 import { getIconSelectorKnob } from '../../utils/stories';
 
@@ -354,13 +354,17 @@ Can be only combined with a right icon, not with a left icon at the same time.
 <Preview>
   <Story name="Playground" parameters={{ decorators: [withKnobs] }}>
     <Stack isVertical>
-      <Button
-        isBlock
+      <ButtonShowcase
+        buttonLabel={text('Button Label', 'Label')}
         type={select(
           'type',
           ['primary', 'secondary', 'tertiary', 'danger', 'inverted', 'invertedAlt'],
           'primary'
         )}
+        hasAvatar={boolean('hasAvatar', false)}
+        avatar={{
+          label: text('Avatar Label'),
+        }}
         size={select('size', ['compact', 'normal'], 'normal')}
         iconLeftName={getIconSelectorKnob('iconLeftName')}
         iconRightName={getIconSelectorKnob('iconRightName')}
@@ -369,7 +373,7 @@ Can be only combined with a right icon, not with a left icon at the same time.
         isBlock={boolean('isBlock', false)}
       >
         Hello world
-      </Button>
+      </ButtonShowcase>
     </Stack>
   </Story>
 </Preview>

src/components/storyUtils/ButtonShowcases/ButtonShowcase.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import Button, { ButtonProps } from '../../Button';
+
+const ButtonShowcase: React.FCC<ButtonProps & { hasAvatar: boolean; buttonLabel: string }> = ({
+  isBlock,
+  type,
+  hasAvatar,
+  avatar,
+  size,
+  iconLeftName,
+  iconRightName,
+  isLoading,
+  isDisabled,
+  buttonLabel,
+}) => {
+  const avatarProps = hasAvatar ? { avatar } : {};
+
+  return (
+    <Button
+      isBlock={isBlock}
+      type={type}
+      size={size}
+      iconLeftName={iconLeftName}
+      iconRightName={iconRightName}
+      isLoading={isLoading}
+      isDisabled={isDisabled}
+      {...avatarProps}
+    >
+      {buttonLabel}
+    </Button>
+  );
+};
+
+export default ButtonShowcase;

src/components/storyUtils/ButtonShowcases/index.ts

@@ -0,0 +1,2 @@
+export { default as LoadingButtonShowcase } from './LoadingButtonShowcase';
+export { default as ButtonShowcase } from './ButtonShowcase';