feat: updated Message to ContextualAlert to match GCWeb

DTS-STN · Jan 19, 2023 · 5d4f35d · 5d4f35d
1 parent 973bac0
commit 5d4f35d
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 18 deletions.
diff --git a/src/components/Message/Message.js → ...onents/ContextualAlert/ContextualAlert.js b/src/components/Message/Message.js → ...onents/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 → ...ontextualAlert/ContextualAlert.stories.js b/src/components/Message/Message.stories.js → ...ontextualAlert/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 → ...s/ContextualAlert/ContextualAlert.test.js b/src/components/Message/Message.test.js → ...s/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
@@ -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
@@ -1,13 +1,13 @@
 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'
 
 <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
@@ -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"