From 5d4f35d856d2057ce3f088f4710e50b69c7005b2 Mon Sep 17 00:00:00 2001
From: Zain Syed <zeddotes@gmail.com>
Date: Thu, 19 Jan 2023 11:49:36 -0500
Subject: [PATCH] feat: updated `Message` to `ContextualAlert` to match GCWeb

---
 .../Message.js => ContextualAlert/ContextualAlert.js} |  4 ++--
 .../ContextualAlert.stories.js}                       |  8 ++++----
 .../ContextualAlert.test.js}                          |  6 +++---
 src/index.ts                                          |  4 ++--
 src/stories/Patterns.stories.mdx                      |  4 ++--
 src/storyExamples/CallOut/CallOut.stories.js          | 11 ++++++-----
 6 files changed, 19 insertions(+), 18 deletions(-)
 rename src/components/{Message/Message.js => ContextualAlert/ContextualAlert.js} (97%)
 rename src/components/{Message/Message.stories.js => ContextualAlert/ContextualAlert.stories.js} (92%)
 rename src/components/{Message/Message.test.js => ContextualAlert/ContextualAlert.test.js} (87%)

diff --git a/src/components/Message/Message.js b/src/components/ContextualAlert/ContextualAlert.js
similarity index 97%
rename from src/components/Message/Message.js
rename to src/components/ContextualAlert/ContextualAlert.js
index c67e9374..b3565ac9 100644
--- a/src/components/Message/Message.js
+++ b/src/components/ContextualAlert/ContextualAlert.js
@@ -6,7 +6,7 @@ import warning_img from "../../assets/warning_img.svg";
 import danger_img from "../../assets/danger_img.svg";
 import info_img from "../../assets/info_img.svg";
 
-export function Message(props) {
+export function ContextualAlert(props) {
   const {
     message_heading,
     message_body,
@@ -69,7 +69,7 @@ export function Message(props) {
   );
 }
 
-Message.propTypes = {
+ContextualAlert.propTypes = {
   /**
    * component id
    */
diff --git a/src/components/Message/Message.stories.js b/src/components/ContextualAlert/ContextualAlert.stories.js
similarity index 92%
rename from src/components/Message/Message.stories.js
rename to src/components/ContextualAlert/ContextualAlert.stories.js
index 7c4b14d2..c3fa3eaf 100644
--- a/src/components/Message/Message.stories.js
+++ b/src/components/ContextualAlert/ContextualAlert.stories.js
@@ -1,10 +1,10 @@
-import { Message } from "./Message";
+import { ContextualAlert } from "./ContextualAlert";
 export default {
-  title: "Components/Message",
-  component: Message,
+  title: "Components/ContextualAlert",
+  component: ContextualAlert,
 };
 
-const Template = (args) => <Message {...args} />;
+const Template = (args) => <ContextualAlert {...args} />;
 
 export const Success = Template.bind({});
 export const Info = Template.bind({});
diff --git a/src/components/Message/Message.test.js b/src/components/ContextualAlert/ContextualAlert.test.js
similarity index 87%
rename from src/components/Message/Message.test.js
rename to src/components/ContextualAlert/ContextualAlert.test.js
index 2b096bcf..ea1873b6 100644
--- a/src/components/Message/Message.test.js
+++ b/src/components/ContextualAlert/ContextualAlert.test.js
@@ -2,11 +2,11 @@ import React from "react";
 import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom/extend-expect";
 import { axe, toHaveNoViolations } from "jest-axe";
-import { Success, Warning, Info, Danger } from "./Message.stories.js";
+import { Success, Warning, Info, Danger } from "./ContextualAlert.stories.js";
 
 expect.extend(toHaveNoViolations);
 
-describe("Messages", () => {
+describe("ContextualAlert", () => {
   it("renders alert image", () => {
     render(<Success {...Success.args} />);
     expect(screen.getByAltText("success icon"));
@@ -16,7 +16,7 @@ describe("Messages", () => {
     const results = await axe(container);
     expect(results).toHaveNoViolations();
   });
-  it("has no a11y Warning", async () => {
+  it("has no a11y Warnsing", async () => {
     const { container } = render(<Warning {...Warning.args} />);
     const results = await axe(container);
     expect(results).toHaveNoViolations();
diff --git a/src/index.ts b/src/index.ts
index edae84c7..43ac6931 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -59,9 +59,9 @@ export { Menu } from "./components/Menu/Menu";
 export { Footer } from "./components/Footer/Footer";
 
 /**
- * Message
+ * ContextualAlert
  */
-export { Message } from "./components/Message/Message";
+export { ContextualAlert } from "./components/ContextualAlert/ContextualAlert";
 
 /**
  * Cards
diff --git a/src/stories/Patterns.stories.mdx b/src/stories/Patterns.stories.mdx
index b0cfa676..f08dd2b0 100644
--- a/src/stories/Patterns.stories.mdx
+++ b/src/stories/Patterns.stories.mdx
@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/addon-docs/blocks';
-import { Message } from '../components/Message/Message'
+import { ContextualAlert } from '../components/ContextualAlert/ContextualAlert'
 import { Image } from '../components/Image/Image'
 import { Link } from '../components/Link/Link'
 import { Collapse } from '../components/Collapse/Collapse'
@@ -7,7 +7,7 @@ import { Collapse } from '../components/Collapse/Collapse'
 <Meta title="Documentation/Patterns" />
 
 <h1 className="ds-heading1"> Opt-in to give consent</h1>
-<Message
+<ContextualAlert
   alert_icon_alt_text="info icon"
   alert_icon_id="info icon"
   id="info"
diff --git a/src/storyExamples/CallOut/CallOut.stories.js b/src/storyExamples/CallOut/CallOut.stories.js
index 00d793f9..0bfc213c 100644
--- a/src/storyExamples/CallOut/CallOut.stories.js
+++ b/src/storyExamples/CallOut/CallOut.stories.js
@@ -1,7 +1,7 @@
 import { CallOut } from "./CallOut";
 import { CheckBoxes } from "../../components/CheckBoxes/CheckBoxes";
 import { CheckBoxForm } from "../../components/CheckBoxForm/CheckBoxForm";
-import { Message } from "../../components/Message/Message";
+import { ContextualAlert } from "../../components/ContextualAlert/ContextualAlert";
 import React from "react";
 
 export default {
@@ -30,7 +30,7 @@ const Template = () => {
       />
       {errorState ? (
         <div className="ds-mt-34px">
-          <Message
+          <ContextualAlert
             alert_icon_alt_text="warning"
             alert_icon_id="warning icon"
             id="warning"
@@ -58,6 +58,7 @@ Default.args = {};
 const Template2 = () => {
   const [errorState, setErrorState] = React.useState(false);
   const [errorState2, setErrorState2] = React.useState(false);
+  const onSubmit = React.useCallback(() => true, []);
   const exampleCode = [
     <div>
       <CheckBoxForm
@@ -96,11 +97,11 @@ const Template2 = () => {
           required: true,
         }}
         id="temp"
-        onSubmit={() => {}}
+        onSubmit={onSubmit}
       />
       {errorState ? (
         <div className="ds-mt-34px">
-          <Message
+          <ContextualAlert
             alert_icon_alt_text="danger icon"
             alert_icon_id="danger icon"
             id="danger"
@@ -112,7 +113,7 @@ const Template2 = () => {
       ) : null}
       {errorState2 ? (
         <div className="ds-mt-34px">
-          <Message
+          <ContextualAlert
             alert_icon_alt_text="success icon"
             alert_icon_id="success icon"
             id="success"