CallToActionCard: updates story from knobs to controls (#31393)

* CallToActionCard: updates story from knobs to controls

* used better naming for ctaElement control

* Capitalise Story names

* moved some changes to a separate PR

* fixes CI frontend build issue

packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.story.internal.tsx

@@ -1,36 +1,54 @@
 import React from 'react';
 import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
-import { CallToActionCard } from './CallToActionCard';
+import { CallToActionCard, CallToActionCardProps } from './CallToActionCard';
-import { select, text } from '@storybook/addon-knobs';
+import { NOOP_CONTROL } from '../../../.storybook/preview';
+import { Story } from '@storybook/react';
 import { Button } from '../Button/Button';
 import { action } from '@storybook/addon-actions';
 
 export default {
   title: 'Layout/CallToActionCard',
   component: CallToActionCard,
+  parameters: {
+    knobs: {
+      disabled: true,
+    },
+  },
+  argTypes: {
+    Element: { control: { type: 'select', options: ['button', 'custom'] } },
+    className: NOOP_CONTROL,
+    callToActionElement: NOOP_CONTROL,
+    theme: NOOP_CONTROL,
+  },
 };
 
-export const basic = () => {
+interface StoryProps extends Partial<CallToActionCardProps> {
+  Element: string;
+  H1Text: string;
+  buttonText: string;
+}
+
+export const Basic: Story<StoryProps> = (args) => {
   const ctaElements: { [key: string]: JSX.Element } = {
-    custom: <h1>This is just H1 tag, you can any component as CTA element</h1>,
+    custom: <h1>{args.H1Text}</h1>,
     button: (
       <Button size="lg" icon="plus" onClick={action('cta button clicked')}>
-        Add datasource
+        {args.buttonText}
       </Button>
     ),
   };
-  const ctaElement = select(
-    'Call to action element',
-    {
-      Custom: 'custom',
-      Button: 'button',
-    },
-    'custom'
-  );
 
   return renderComponentWithTheme(CallToActionCard, {
-    message: text('Call to action message', 'Renders message prop content'),
+    message: args.message,
-    callToActionElement: ctaElements[ctaElement],
+    callToActionElement: ctaElements[args.Element],
-    footer: text('Call to action footer', 'Renders footer prop content'),
+    footer: args.footer,
   });
 };
+
+Basic.args = {
+  Element: 'custom',
+  message: 'Renders message prop content',
+  footer: 'Renders footer prop content',
+  H1Text: 'This is just H1 tag, you can any component as CTA element',
+  buttonText: 'Add datasource',
+};

packages/grafana-ui/tsconfig.build.json

@@ -1,4 +1,12 @@
 {
-  "exclude": ["**/*.story.tsx", "**/*.test.ts*", "**/*.tmpl.ts", "dist", "node_modules", "src/utils/storybook"],
+  "exclude": [
+    "**/*.story.tsx",
+    "**/*.story.internal.tsx",
+    "**/*.test.ts*",
+    "**/*.tmpl.ts",
+    "dist",
+    "node_modules",
+    "src/utils/storybook"
+  ],
   "extends": "./tsconfig.json"
 }