Creating story for icon-border

ui/components/ui/icon-border/icon-border.js

@@ -2,6 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
+/**
+ * @deprecated The `<IconBorder />` component has been deprecated in favor of the `<AvatarBase />` component from the component-library.
+ * Please update your code to use the new `<AvatarBase>` component instead, which can be found at ./ui/components/component-library/avatar-base/avatar-base.js.
+ * You can find documentation for the new AvatarBase component in the MetaMask Storybook:
+ * {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-avatarbase--docs}
+ * If you would like to help with the replacement of the old IconBorder component, please submit a pull request
+ */
+
 export default function IconBorder({ children, size, className }) {
   const borderStyle = { height: `${size}px`, width: `${size}px` };
   return (

ui/components/ui/icon-border/icon-border.stories.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Severity } from '../../../helpers/constants/design-system';
+import { BannerAlert } from '../../component-library';
+
+import IconBorder from './icon-border';
+
+export default {
+  title: 'Components/UI/IconBorder',
+  component: IconBorder,
+  argTypes: {
+    className: {
+      control: 'text',
+    },
+    children: {
+      control: 'text',
+    },
+    size: {
+      control: 'number',
+    },
+  },
+  args: {
+    className: '',
+    children: 'D',
+    size: 32,
+  },
+};
+
+export const DefaultStory = (args) => (
+  <>
+    <BannerAlert
+      severity={Severity.Warning}
+      title="Deprecated"
+      description="<IconBorder/> has been deprecated in favour of the <AvatarBase /> component"
+      marginBottom={4}
+    />
+    <IconBorder {...args} />
+  </>
+);
+
+DefaultStory.storyName = 'Default';