diff --git a/src/components/ContextualAlert/ContextualAlert.js b/src/components/ContextualAlert/ContextualAlert.js
index 9c38e04b..0d7a3349 100644
--- a/src/components/ContextualAlert/ContextualAlert.js
+++ b/src/components/ContextualAlert/ContextualAlert.js
@@ -50,19 +50,19 @@ export function ContextualAlert(props) {
>
{asHtml ? (
) : (
- {message_heading}
+ {message_heading}
)}
{asHtml ? (
) : (
- {message_body}
+ {message_body}
)}
diff --git a/src/components/FormErrorSummary/FormErrorSummary.js b/src/components/FormErrorSummary/FormErrorSummary.js
new file mode 100644
index 00000000..7d9cab4c
--- /dev/null
+++ b/src/components/FormErrorSummary/FormErrorSummary.js
@@ -0,0 +1,75 @@
+import PropTypes from "prop-types";
+import React from "react";
+import { ContextualAlert } from "../ContextualAlert/ContextualAlert";
+
+export function FormErrorSummary(props) {
+ const {
+ message_heading,
+ id,
+ alert_icon_id,
+ alert_icon_alt_text,
+ error_list,
+ whiteBG,
+ } = props;
+
+ return (
+
+ {error_list.map(({ line, id }, i) => (
+
+
+
+ {line}
+
+
+
+ ))}
+ ,
+ ]}
+ />
+ );
+}
+
+FormErrorSummary.propTypes = {
+ /**
+ * component id
+ */
+ id: PropTypes.string.isRequired,
+
+ /**
+ * id for the alert icon
+ */
+ alert_icon_id: PropTypes.string.isRequired,
+
+ /**
+ * Alternate text for the alert icon
+ */
+ alert_icon_alt_text: PropTypes.string.isRequired,
+
+ /**
+ * heading text
+ */
+ message_heading: PropTypes.string.isRequired,
+
+ /**
+ * An array of plaintext error messages and corresponding DOM ids for anchor links
+ */
+
+ error_list: PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.string,
+ line: PropTypes.string,
+ })
+ ).isRequired,
+ /**
+ * If true the background will be white, default is transparent.
+ */
+ whiteBG: PropTypes.bool,
+};
diff --git a/src/components/FormErrorSummary/FormErrorSummary.stories.js b/src/components/FormErrorSummary/FormErrorSummary.stories.js
new file mode 100644
index 00000000..35c0898c
--- /dev/null
+++ b/src/components/FormErrorSummary/FormErrorSummary.stories.js
@@ -0,0 +1,30 @@
+import { FormErrorSummary } from "./FormErrorSummary";
+export default {
+ title: "Components/FormErrorSummary",
+ component: FormErrorSummary,
+};
+
+const Template = (args) => ;
+
+export const Default = Template.bind({});
+
+Default.args = {
+ id: "formerrors",
+ error_list: [
+ { line: "Last name is required", id: "last_name" },
+ {
+ line: "Email address must be in the format of example@email.com",
+ id: "email",
+ },
+ { line: "Password must include both numbers and letters", id: "password" },
+ {
+ line: "A valid postal code is required for your selected city",
+ id: "postal_code",
+ },
+ ],
+ message_heading:
+ "The form could not be submitted because 4 errors were found",
+ alert_icon_alt_text: "danger icon",
+ alert_icon_id: "danger icon",
+ whiteBG: false,
+};