Fix error-message component to match new Storybook format (#12815)

* error-message

* Updating prop type descriptions

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>

ui/components/ui/error-message/README.mdx

@@ -0,0 +1,15 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import ErrorMessage from '.';
+
+# Error Message
+
+This component highlights error messages
+
+<Canvas>
+  <Story id="ui-components-ui-error-message-error-message-stories-js--default-story" />
+</Canvas>
+
+## Component API
+
+<ArgsTable of={ErrorMessage} />

ui/components/ui/error-message/error-message.component.js

@@ -18,7 +18,13 @@ const ErrorMessage = (props, context) => {
 };
 
 ErrorMessage.propTypes = {
+  /**
+   * The text content for the error message
+   */
   errorMessage: PropTypes.string,
+  /**
+   * The translate key for localization. Uses context.t(). Will override the error message
+   */
   errorKey: PropTypes.string,
 };
 

ui/components/ui/error-message/error-message.stories.js

@@ -1,14 +1,26 @@
 import React from 'react';
-import { text } from '@storybook/addon-knobs';
+import README from './README.mdx';
 import ErrorMessage from '.';
 
 export default {
   title: 'Components/UI/ErrorMessage',
   id: __filename,
+  component: ErrorMessage,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    errorMessage: { control: 'text' },
+    errorKey: { control: 'text' },
+  },
 };
 
-export const DefaultStory = () => (
-  <ErrorMessage errorMessage={text('Error Message:', 'There was an error!')} />
-);
+export const DefaultStory = (args) => <ErrorMessage {...args} />;
 
 DefaultStory.storyName = 'Default';
+
+DefaultStory.args = {
+  errorMessage: 'There was an error!',
+};