Mįgrate truncated definition list stories from addon knobs to use controls. (#13628)

ui/components/ui/truncated-definition-list/truncated-definition-list.stories.js

@@ -1,11 +1,12 @@
 import React from 'react';
-import { object, text } from '@storybook/addon-knobs';
-
 import TruncatedDefinitionList from './truncated-definition-list';
 
 export default {
   title: 'Components/UI/TruncatedDefinitionList',
   id: __filename,
+  argTypes: {
+    title: { control: 'text', defaultValue: 'Basic definitions' },
+  },
 };
 
 const basic = {
@@ -30,21 +31,34 @@ const tooltips = {
   Ticker: 'The currency symbol of the primary currency for this network',
 };
 
-export const DefaultStory = () => (
+export const DefaultStory = (args) => <TruncatedDefinitionList {...args} />;
-  <TruncatedDefinitionList
+
-    dictionary={object('dictionary', basic)}
+DefaultStory.argTypes = {
-    title={text('title', 'Basic definitions')}
+  dictionary: {
-    prefaceKeys={object('prefaceKeys', ['term', 'definition'])}
+    control: 'object',
-  />
+    defaultValue: basic,
-);
+  },
+  prefaceKeys: {
+    control: 'object',
+    defaultValue: ['term', 'definition'],
+  },
+};
 
 DefaultStory.storyName = 'Default';
 
-export const WithTooltips = () => (
+export const WithTooltips = (args) => <TruncatedDefinitionList {...args} />;
-  <TruncatedDefinitionList
+
-    dictionary={object('dictionary', advanced)}
+WithTooltips.argTypes = {
-    title={text('title', 'Network Details')}
+  dictionary: {
-    tooltips={object('tooltips', tooltips)}
+    control: 'object',
-    prefaceKeys={object('prefaceKeys', ['Chain ID'])}
+    defaultValue: advanced,
-  />
+  },
-);
+  tooltips: {
+    control: 'object',
+    defaultValue: tooltips,
+  },
+  prefaceKeys: {
+    control: 'array',
+    defaultValue: ['Chain ID'],
+  },
+};