From 98fc0060f3dff9e6a12f019d3ee01a82d9581392 Mon Sep 17 00:00:00 2001
From: Dor Wiser <vgibsonsg@gmail.com>
Date: Wed, 20 Jul 2022 21:58:14 +0300
Subject: [PATCH] DefinitionList story: convert knobs and actions to controls /
 args  (#15185)

* tabs story changes

* removed knobs and implemented controls

* object to select control typography

* added argtypes only for relevant stories + fixes
---
 .../definition-list.stories.js                | 100 +++++++++++++-----
 1 file changed, 73 insertions(+), 27 deletions(-)

diff --git a/ui/components/ui/definition-list/definition-list.stories.js b/ui/components/ui/definition-list/definition-list.stories.js
index e2d351b01..702598ff5 100644
--- a/ui/components/ui/definition-list/definition-list.stories.js
+++ b/ui/components/ui/definition-list/definition-list.stories.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import { object, select } from '@storybook/addon-knobs';
 import {
   COLORS,
   SIZES,
@@ -7,11 +6,6 @@ import {
 } from '../../../helpers/constants/design-system';
 import DefinitionList from './definition-list';
 
-export default {
-  title: 'Components/UI/DefinitionList',
-  id: __filename,
-};
-
 const basic = {
   term:
     'a word or phrase used to describe a thing or to express a concept, especially in a particular kind of language or branch of study.',
@@ -34,39 +28,91 @@ const tooltips = {
   Ticker: 'The currency symbol of the primary currency for this network',
 };
 
-export const DefaultStory = () => (
-  <DefinitionList
-    dictionary={object('dictionary', basic)}
-    gapSize={select('gapSize', SIZES, SIZES.SM)}
-  />
+export default {
+  title: 'Components/UI/DefinitionList',
+  id: __filename,
+  argTypes: {
+    dictionary: { control: 'object', name: 'Dictionary' },
+    gapSize: {
+      control: 'select',
+      name: 'Gap Size',
+      options: Object.values(SIZES),
+    },
+  },
+  args: {
+    dictionary: basic,
+    gapSize: SIZES.SM,
+  },
+};
+
+export const DefaultStory = (args) => (
+  <DefinitionList dictionary={args.dictionary} gapSize={args.gapSize} />
 );
 
 DefaultStory.storyName = 'Default';
 
-export const WithTooltips = () => (
+export const WithTooltips = (args) => (
   <DefinitionList
-    dictionary={object('dictionary', advanced)}
-    tooltips={object('tooltips', tooltips)}
-    gapSize={select('gapSize', SIZES, SIZES.SM)}
+    dictionary={args.dictionary}
+    tooltips={args.tooltips}
+    gapSize={args.gapSize}
   />
 );
 
-export const WithTypographyControl = () => (
+WithTooltips.args = {
+  dictionary: advanced,
+  tooltips,
+};
+WithTooltips.argTypes = {
+  tooltips: { control: 'object', name: 'Tooltips' },
+};
+
+export const WithTypographyControl = (args) => (
   <DefinitionList
-    dictionary={object('dictionary', advanced)}
-    tooltips={object('tooltips', tooltips)}
-    gapSize={select('gapSize', SIZES, SIZES.SM)}
+    dictionary={args.dictionary}
+    tooltips={args.tooltips}
+    gapSize={args.gapSize}
     termTypography={{
-      variant: select('termTypography.variant', TYPOGRAPHY, TYPOGRAPHY.H6),
-      color: select('termTypography.color', COLORS, COLORS.TEXT_DEFAULT),
+      variant: args.termTypographyVariant,
+      color: args.termTypographyColor,
+      children: <div></div>,
     }}
     definitionTypography={{
-      variant: select(
-        'definitionTypography.variant',
-        TYPOGRAPHY,
-        TYPOGRAPHY.H6,
-      ),
-      color: select('definitionTypography.color', COLORS, COLORS.TEXT_DEFAULT),
+      variant: args.definitionTypographyVariant,
+      color: args.definitionTypographyColor,
+      children: <div></div>,
     }}
   />
 );
+
+WithTypographyControl.args = {
+  dictionary: advanced,
+  termTypographyVariant: TYPOGRAPHY.H6,
+  termTypographyColor: COLORS.TEXT_DEFAULT,
+  definitionTypographyVariant: TYPOGRAPHY.H6,
+  definitionTypographyColor: COLORS.TEXT_DEFAULT,
+};
+
+WithTypographyControl.argTypes = {
+  tooltips,
+  termTypographyVariant: {
+    control: 'select',
+    name: 'Term Variant',
+    options: Object.values(TYPOGRAPHY),
+  },
+  termTypographyColor: {
+    control: 'select',
+    name: 'Term Color',
+    options: Object.values(COLORS),
+  },
+  definitionTypographyVariant: {
+    control: 'select',
+    name: 'Definition Variant',
+    options: Object.values(TYPOGRAPHY),
+  },
+  definitionTypographyColor: {
+    control: 'select',
+    name: 'Definition Color',
+    options: Object.values(COLORS),
+  },
+};