fix(react-component): stories to render stackblitz (#18864)

Author: ariellalgilmore

packages/react/src/components/IconButton/IconButton.stories.js

@@ -36,18 +36,16 @@ export default {
   },
 };
 
-const DefaultStory = (props) => {
+export const Default = (args) => {
   return (
     <div style={{ margin: '3rem' }}>
-      <IconButton {...props}>
+      <IconButton {...args}>
         <Edit />
       </IconButton>
     </div>
   );
 };
 
-export const Default = DefaultStory.bind({});
-
 Default.args = {
   align: 'bottom',
   defaultOpen: true,
@@ -90,17 +88,15 @@ Default.argTypes = {
   },
 };
 
-export const withBadgeIndicator = (props) => {
-  const { badgeCount, disabled } = props;
+export const withBadgeIndicator = (args) => {
   return (
     <div style={{ margin: '3rem' }}>
       <IconButton
-        badgeCount={badgeCount}
-        disabled={disabled}
         label="Notification"
         kind="ghost"
         size="lg"
-        autoAlign>
+        autoAlign
+        {...args}>
         <Notification />
       </IconButton>
     </div>

packages/react/src/components/Pagination/Pagination.mdx

@@ -1,5 +1,6 @@
 import { ArgTypes, Meta, Canvas } from '@storybook/blocks';
 import * as PaginationStories from './Pagination.stories';
+import Pagination from '../Pagination';
 import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />

packages/react/src/components/Pagination/Pagination.stories.js

@@ -46,7 +46,7 @@ export default {
 };
 
 export const Default = (args) => {
-  return <Pagination {...args} />;
+  return <Pagination pageSizes={[10, 20, 30, 40, 50]} {...args} />;
 };
 
 Default.args = {

packages/react/src/components/PaginationNav/PaginationNav.mdx

@@ -1,5 +1,6 @@
 import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
 import * as PaginationNavStories from './PaginationNav.stories';
+import PaginationNav from '../PaginationNav';
 import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />

packages/react/src/components/PaginationNav/PaginationNav.stories.js

@@ -24,7 +24,7 @@ export default {
 export const Default = (args) => {
   return (
     <div style={{ width: '800px' }}>
-      <PaginationNav {...args} />
+      <PaginationNav totalItems={25} {...args} />
     </div>
   );
 };

packages/react/src/components/Toggle/Toggle.mdx

@@ -1,5 +1,6 @@
 import { ArgTypes, Meta, Canvas } from '@storybook/blocks';
 import * as ToggleStories from './Toggle.stories';
+import Toggle from '../Toggle';
 import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />

packages/react/src/components/Toggletip/Toggletip.mdx

@@ -1,5 +1,6 @@
 import { ArgTypes, Meta, Canvas } from '@storybook/blocks';
 import * as ToggletipStories from './Toggletip.stories';
+import Toggletip from '../Toggletip';
 import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
@@ -30,6 +31,16 @@ your `Toggletip`, consider using `Tooltip` instead. To use this component,
 you'll need to include a `Toggletip`, `ToggletipButton` for the trigger, and
 `ToggletipContent` for the content you would like to render within the popover.
 
+<Canvas
+  of={ToggletipStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(ToggletipStories.Default),
+    },
+  ]}
+/>
+
 ```jsx
 import { Toggletip, ToggletipButton, ToggletipContent } from '@carbon/react';
 import { Information } from '@carbon/react/icons';

packages/react/src/components/Toggletip/Toggletip.stories.js

@@ -87,12 +87,11 @@ export const ExperimentalAutoAlign = () => {
   );
 };
 
-const DefaultStory = (controls) => {
-  const { align } = controls;
+export const Default = (args) => {
   return (
     <>
       <ToggletipLabel>Toggletip label</ToggletipLabel>
-      <Toggletip align={align}>
+      <Toggletip {...args}>
         <ToggletipButton label="Show information">
           <Information />
         </ToggletipButton>
@@ -111,8 +110,6 @@ const DefaultStory = (controls) => {
   );
 };
 
-export const Default = DefaultStory.bind({});
-
 Default.argTypes = {
   align: {
     options: [