From 9ce07b11d2056719341c5896b2aa7e73265f5a13 Mon Sep 17 00:00:00 2001
From: Uchechukwu Obasi <obasiuche62@gmail.com>
Date: Tue, 23 Feb 2021 11:41:14 +0100
Subject: [PATCH] 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
---
 .../CallToActionCard.story.internal.tsx       | 50 +++++++++++++------
 packages/grafana-ui/tsconfig.build.json       | 10 +++-
 2 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.story.internal.tsx b/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.story.internal.tsx
index 5d2fe05430f..37f9d16b13b 100644
--- a/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.story.internal.tsx
+++ b/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 { select, text } from '@storybook/addon-knobs';
+import { CallToActionCard, CallToActionCardProps } from './CallToActionCard';
+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'),
-    callToActionElement: ctaElements[ctaElement],
-    footer: text('Call to action footer', 'Renders footer prop content'),
+    message: args.message,
+    callToActionElement: ctaElements[args.Element],
+    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',
+};
diff --git a/packages/grafana-ui/tsconfig.build.json b/packages/grafana-ui/tsconfig.build.json
index 6134388bd9d..fefe5556971 100644
--- a/packages/grafana-ui/tsconfig.build.json
+++ b/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"
 }