Modal: updates story from knobs to control (#32840)

packages/grafana-ui/src/components/Modal/Modal.story.tsx

@@ -1,31 +1,14 @@
 import React, { useState } from 'react';
 import { oneLineTrim } from 'common-tags';
-import { boolean, text } from '@storybook/addon-knobs';
+import { Story, Meta } from '@storybook/react';
-import { Icon, Modal, ModalTabsHeader, TabContent } from '@grafana/ui';
+import { getAvailableIcons } from '../../types';
+import { Modal, ModalTabsHeader, TabContent } from '@grafana/ui';
 import { css, cx } from '@emotion/css';
 
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { UseState } from '../../utils/storybook/UseState';
 import mdx from './Modal.mdx';
 
-const getKnobs = () => {
-  return {
-    body: text(
-      'Body',
-      oneLineTrim`Id incididunt do pariatur qui labore. Sint culpa irure cillum et ullamco proident. Deserunt ipsum velit dolore est enim proident dolore consectetur. Et cillum tempor pariatur et. Est tempor cillum ad id nulla. Cillum ut proident
-magna do cillum consequat reprehenderit excepteur. Pariatur culpa id excepteur reprehenderit consequat qui qui sit
-consectetur esse enim mollit incididunt. Ea excepteur nisi mollit reprehenderit eiusmod tempor. Eiusmod incididunt
-occaecat velit consectetur dolor cillum anim commodo fugiat cupidatat ut tempor officia. Aliquip fugiat occaecat
-excepteur consectetur ullamco consectetur exercitation occaecat sint sint incididunt cillum minim. Sint aliquip ea
-pariatur anim. Veniam laboris mollit in voluptate exercitation sint deserunt dolor ullamco ex dolor. Enim
-reprehenderit ut Lorem aliquip est laborum in. Aliqua in ut aute elit nulla amet. Ex proident pariatur ex in
-aliquip. Labore eu Lorem sint aliqua reprehenderit ipsum veniam aliquip laborum dolor deserunt cupidatat velit
-amet.`
-    ),
-    visible: boolean('Visible', true),
-  };
-};
-
 export default {
   title: 'Overlays/Modal',
   component: Modal,
@@ -34,25 +17,53 @@ export default {
     docs: {
       page: mdx,
     },
+    knobs: {
+      disable: true,
+    },
+    controls: {
+      exclude: ['className', 'contentClassName', 'onDismiss', 'onClickBackdrop'],
+    },
   },
-};
+  args: {
+    body: oneLineTrim(`Id incididunt do pariatur qui labore. Sint culpa irure cillum et ullamco proident. Deserunt ipsum velit dolore est enim proident dolore consectetur. Et cillum tempor pariatur et. Est tempor cillum ad id nulla. Cillum ut proident
+    magna do cillum consequat reprehenderit excepteur. Pariatur culpa id excepteur reprehenderit consequat qui qui sit
+    consectetur esse enim mollit incididunt. Ea excepteur nisi mollit reprehenderit eiusmod tempor. Eiusmod incididunt
+    occaecat velit consectetur dolor cillum anim commodo fugiat cupidatat ut tempor officia. Aliquip fugiat occaecat
+    excepteur consectetur ullamco consectetur exercitation occaecat sint sint incididunt cillum minim. Sint aliquip ea
+    pariatur anim. Veniam laboris mollit in voluptate exercitation sint deserunt dolor ullamco ex dolor. Enim
+    reprehenderit ut Lorem aliquip est laborum in. Aliqua in ut aute elit nulla amet. Ex proident pariatur ex in
+    aliquip. Labore eu Lorem sint aliqua reprehenderit ipsum veniam aliquip laborum dolor deserunt cupidatat velit
+    amet.`),
+  },
+  argTypes: {
+    icon: {
+      control: {
+        type: 'select',
+        options: getAvailableIcons(),
+      },
+    },
+    title: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+} as Meta;
 
-export const basic = () => {
+export const Basic: Story = ({ body, title, ...args }) => {
-  const { body, visible } = getKnobs();
   return (
-    <Modal
+    <Modal title={title} {...args}>
-      title={
-        <div className="modal-header-title">
-          <Icon name="exclamation-triangle" size="lg" />
-          <span className="p-l-1">My Modal</span>
-        </div>
-      }
-      isOpen={visible}
-    >
       {body}
     </Modal>
   );
 };
+Basic.args = {
+  title: 'My Modal',
+  icon: 'exclamation-triangle',
+  isOpen: true,
+  closeOnEscape: false,
+  iconTooltip: 'icon tooltip',
+};
 
 const tabs = [
   { label: '1st child', value: 'first', active: true },
@@ -60,12 +71,12 @@ const tabs = [
   { label: '3rd child', value: 'third', active: false },
 ];
 
-export const WithTabs = () => {
+export const WithTabs: Story = (args) => {
   const [activeTab, setActiveTab] = useState('first');
   const modalHeader = (
     <ModalTabsHeader
-      title="Modal With Tabs"
+      title={args.title}
-      icon="cog"
+      icon={args.icon}
       tabs={tabs}
       activeTab={activeTab}
       onChangeTab={(t) => {
@@ -80,7 +91,7 @@ export const WithTabs = () => {
           <div>
             <Modal title={modalHeader} isOpen={true}>
               <TabContent>
-                {activeTab === state[0].value && <div>First tab content</div>}
+                {activeTab === state[0].value && <div>{args.body}</div>}
                 {activeTab === state[1].value && <div>Second tab content</div>}
                 {activeTab === state[2].value && <div>Third tab content</div>}
               </TabContent>
@@ -91,21 +102,27 @@ export const WithTabs = () => {
     </UseState>
   );
 };
+WithTabs.args = {
+  title: 'My Modal',
+  icon: 'cog',
+};
 
-export const UsingContentClassName = () => {
+export const UsingContentClassName: Story = ({ title, body, ...args }) => {
-  const { body, visible } = getKnobs();
   const override = {
     modalContent: css`
       background-color: darkorange;
     `,
   };
   return (
-    <Modal
+    <Modal title={title} {...args} contentClassName={cx(override.modalContent)}>
-      title="Using contentClassName to override background"
-      isOpen={visible}
-      contentClassName={cx(override.modalContent)}
-    >
       {body}
     </Modal>
   );
 };
+UsingContentClassName.args = {
+  title: 'Using contentClassName to override background',
+  icon: 'exclamation-triangle',
+  isOpen: true,
+  closeOnEscape: false,
+  iconTooltip: 'icon tooltip',
+};