From 7b2812475abf77335bfe56630620e19a3abd632b Mon Sep 17 00:00:00 2001
From: Etienne Dusseault <etienne.dusseault@gmail.com>
Date: Thu, 9 Dec 2021 04:50:58 +0800
Subject: [PATCH] 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     | 15 ++++++++++++++
 .../error-message/error-message.component.js  |  6 ++++++
 .../ui/error-message/error-message.stories.js | 20 +++++++++++++++----
 3 files changed, 37 insertions(+), 4 deletions(-)
 create mode 100644 ui/components/ui/error-message/README.mdx

diff --git a/ui/components/ui/error-message/README.mdx b/ui/components/ui/error-message/README.mdx
new file mode 100644
index 000000000..c59f25dd4
--- /dev/null
+++ b/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} />
diff --git a/ui/components/ui/error-message/error-message.component.js b/ui/components/ui/error-message/error-message.component.js
index 1786e332a..ceaf354db 100644
--- a/ui/components/ui/error-message/error-message.component.js
+++ b/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,
 };
 
diff --git a/ui/components/ui/error-message/error-message.stories.js b/ui/components/ui/error-message/error-message.stories.js
index abf6b9a48..b3eb09c2e 100644
--- a/ui/components/ui/error-message/error-message.stories.js
+++ b/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!',
+};