From aef2541e57da92645a5b7880deef6193f06fbd60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E5=AE=A6=E6=88=90?= <bestony@linux.com>
Date: Fri, 1 Apr 2022 02:30:15 +0800
Subject: [PATCH] Convert UrlIcon knobs and actions to controls / args (#13981)

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>
Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
---
 ui/components/ui/url-icon/url-icon.stories.js | 35 ++++++++++++-------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/ui/components/ui/url-icon/url-icon.stories.js b/ui/components/ui/url-icon/url-icon.stories.js
index ed9144fec..6a5f09b82 100644
--- a/ui/components/ui/url-icon/url-icon.stories.js
+++ b/ui/components/ui/url-icon/url-icon.stories.js
@@ -1,10 +1,32 @@
 import React from 'react';
-import { text } from '@storybook/addon-knobs';
 import UrlIcon from './url-icon';
 
 export default {
   title: 'Components/UI/UrlIcon',
   id: __filename,
+  argType: {
+    name: { control: 'text' },
+    url: { control: 'text' },
+    className: { control: 'text' },
+    fallbackClassName: { control: 'text' },
+  },
+  args: {
+    name: 'AST',
+    url: 'AST.png',
+    className: '',
+    fallbackClassName: '',
+  },
+};
+
+export const DefaultStory = (args) => {
+  return (
+    <UrlIcon
+      name={args.name}
+      url={args.url}
+      className={args.className}
+      fallbackClassName={args.fallbackClassName}
+    />
+  );
 };
 
 export const AST = () => {
@@ -14,14 +36,3 @@ export const AST = () => {
 export const BAT = () => {
   return <UrlIcon name="BAT" url="BAT_icon.svg" />;
 };
-
-export const CustomProps = () => {
-  return (
-    <UrlIcon
-      name={text('Symbol', '')}
-      url={text('Icon URL', '')}
-      className={text('className', '')}
-      fallbackClassName={text('fallbackClassName', '')}
-    />
-  );
-};