From 3ba3d47b85b4e723385770059994f04b2e4d580a Mon Sep 17 00:00:00 2001
From: Gustavo Santos <53129852+gefgu@users.noreply.github.com>
Date: Wed, 31 Aug 2022 07:19:37 -0300
Subject: [PATCH] Chore: Added controls to Checkbox stories (#54372)

---
 .../src/components/Forms/Checkbox.story.tsx   | 42 +++++++++----------
 1 file changed, 19 insertions(+), 23 deletions(-)

diff --git a/packages/grafana-ui/src/components/Forms/Checkbox.story.tsx b/packages/grafana-ui/src/components/Forms/Checkbox.story.tsx
index 55425a2d7f7..9274774d45d 100644
--- a/packages/grafana-ui/src/components/Forms/Checkbox.story.tsx
+++ b/packages/grafana-ui/src/components/Forms/Checkbox.story.tsx
@@ -1,4 +1,4 @@
-import { ComponentMeta } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React, { useState, useCallback } from 'react';
 
 import { VerticalGroup } from '../Layout/Layout';
@@ -14,34 +14,26 @@ const meta: ComponentMeta<typeof Checkbox> = {
     docs: {
       page: mdx,
     },
+    controls: {
+      exclude: ['value', 'htmlValue'],
+    },
   },
 };
 
-export const Controlled = () => {
+export const Basic: ComponentStory<typeof Checkbox> = (args) => {
   const [checked, setChecked] = useState(false);
   const onChange = useCallback((e) => setChecked(e.currentTarget.checked), [setChecked]);
   return (
     <div>
-      <Checkbox
-        value={checked}
-        onChange={onChange}
-        label="Skip TLS cert validation"
-        description="Set to true if you want to skip TLS cert validation"
-      />
+      <Checkbox value={checked} onChange={onChange} {...args} />
     </div>
   );
 };
 
-export const uncontrolled = () => {
-  return (
-    <div>
-      <Checkbox
-        defaultChecked={true}
-        label="Skip TLS cert validation"
-        description="Set to true if you want to skip TLS cert validation"
-      />
-    </div>
-  );
+Basic.args = {
+  label: 'Skip TLS cert validation',
+  description: 'Set to true if you want to skip TLS cert validation',
+  disabled: false,
 };
 
 export const StackedList = () => {
@@ -68,17 +60,21 @@ export const StackedList = () => {
   );
 };
 
-export const InAField = () => {
+export const InAField: ComponentStory<typeof Checkbox> = (args) => {
   return (
     <div>
-      <Field
-        label="Hidden"
-        description="Annotation queries can be toggled on or of at the top of the dashboard. With this option checked this toggle will be hidden."
-      >
+      <Field {...args}>
         <Checkbox name="hide" id="hide" defaultChecked={true} />
       </Field>
     </div>
   );
 };
 
+InAField.args = {
+  label: 'Hidden',
+  description:
+    'Annotation queries can be toggled on or of at the top of the dashboard. With this option checked this toggle will be hidden.',
+  disabled: false,
+};
+
 export default meta;