From 7b7c3650186d2fe4bb90758e43fefaad5696bc47 Mon Sep 17 00:00:00 2001
From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Date: Thu, 30 Apr 2020 16:47:29 +0200
Subject: [PATCH] Storybook: CSF Modal conversion (#24085)

* Convert modal

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

Co-Authored-By: Alex Khomenko <Clarity-89@users.noreply.github.com>

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>
---
 .../src/components/Modal/Modal.story.tsx         | 16 +++++++++-------
 .../grafana-ui/src/components/Modal/Modal.tsx    |  2 +-
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/grafana-ui/src/components/Modal/Modal.story.tsx b/packages/grafana-ui/src/components/Modal/Modal.story.tsx
index d5b4bc84b04..b731fc8b4fa 100644
--- a/packages/grafana-ui/src/components/Modal/Modal.story.tsx
+++ b/packages/grafana-ui/src/components/Modal/Modal.story.tsx
@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { storiesOf } from '@storybook/react';
 import { oneLineTrim } from 'common-tags';
 import { text, boolean } from '@storybook/addon-knobs';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
@@ -27,10 +26,13 @@ amet.`
   };
 };
 
-const ModalStories = storiesOf('Overlays/Modal', module);
-ModalStories.addDecorator(withCenteredStory);
+export default {
+  title: 'Overlays/Modal',
+  component: Modal,
+  decorators: [withCenteredStory],
+};
 
-ModalStories.add('default', () => {
+export const basic = () => {
   const { body, visible } = getKnobs();
   return (
     <Modal
@@ -45,7 +47,7 @@ ModalStories.add('default', () => {
       {body}
     </Modal>
   );
-});
+};
 
 const tabs = [
   { label: '1st child', value: 'first', active: true },
@@ -53,7 +55,7 @@ const tabs = [
   { label: '3rd child', value: 'third', active: false },
 ];
 
-ModalStories.add('with tabs', () => {
+export const withTabs = () => {
   const [activeTab, setActiveTab] = useState('first');
   const modalHeader = (
     <ModalTabsHeader
@@ -83,4 +85,4 @@ ModalStories.add('with tabs', () => {
       }}
     </UseState>
   );
-});
+};
diff --git a/packages/grafana-ui/src/components/Modal/Modal.tsx b/packages/grafana-ui/src/components/Modal/Modal.tsx
index 3ed5b92b743..68242fff503 100644
--- a/packages/grafana-ui/src/components/Modal/Modal.tsx
+++ b/packages/grafana-ui/src/components/Modal/Modal.tsx
@@ -8,7 +8,7 @@ import { getModalStyles } from './getModalStyles';
 import { ModalHeader } from './ModalHeader';
 import { IconButton } from '../IconButton/IconButton';
 
-interface Props extends Themeable {
+export interface Props extends Themeable {
   icon?: IconName;
   title: string | JSX.Element;
   className?: string;