Merge 99f4c77 into 71d1655

DTS-STN · Jul 7, 2023 · 17086fe · 17086fe
2 parents 71d1655 + 99f4c77
commit 17086fe
Show file tree

Hide file tree

Showing 9 changed files with 187 additions and 37 deletions.
diff --git a/src/components/Button/Button.stories.js b/src/components/Button/Button.stories.js
@@ -13,7 +13,7 @@ export const Supertask = Template.bind({});
 export const SupertaskIcon = Template.bind({});
 export const Primary = Template.bind({});
 export const Secondary = Template.bind({});
-export const DangerDisabled = Template.bind({});
+export const Danger = Template.bind({});
 export const Link = Template.bind({});
 
 Supertask.args = {
@@ -47,12 +47,11 @@ Secondary.args = {
   styling: "secondary",
 };
 
-DangerDisabled.args = {
+Danger.args = {
   id: "danger",
   text: "Danger Button",
+  iconEnd: false,
   styling: "danger",
-  disabled: true,
-  iconAltText: "disabled",
 };
 
 Link.args = {

diff --git a/src/components/Button/Button.test.js b/src/components/Button/Button.test.js
@@ -6,13 +6,7 @@ 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 {
-  Primary,
-  Secondary,
-  DangerDisabled,
-  Link,
-  Supertask,
-} from "./Button.stories";
+import { Primary, Secondary, Danger, Link, Supertask } from "./Button.stories";
 
 expect.extend(toHaveNoViolations);
 
@@ -43,10 +37,8 @@ describe("Button", () => {
   });
 
   it("renders danger", () => {
-    render(<DangerDisabled {...DangerDisabled.args} />);
-    expect(screen.getByRole("button")).toHaveTextContent(
-      DangerDisabled.args.text
-    );
+    render(<Danger {...Danger.args} />);
+    expect(screen.getByRole("button")).toHaveTextContent(Danger.args.text);
     expect(screen.getByRole("button")).toHaveClass("ds-btn-danger");
   });
 

diff --git a/src/components/ContextualAlert/ContextualAlert.js b/src/components/ContextualAlert/ContextualAlert.js
@@ -50,19 +50,19 @@ export function ContextualAlert(props) {
       >
         {asHtml ? (
           <h3
-            className="ds-heading3"
+            className="ds-heading3 ds-ml-1"
             dangerouslySetInnerHTML={{ __html: message_heading }}
           />
         ) : (
-          <h3 className="ds-heading3">{message_heading}</h3>
+          <h3 className="ds-heading3 ds-ml-1">{message_heading}</h3>
         )}
         {asHtml ? (
           <div
-            className="ds-body ds-pt-[12px]"
+            className="ds-body"
             dangerouslySetInnerHTML={{ __html: message_body }}
           />
         ) : (
-          <div className="ds-body ds-pt-[12px]">{message_body}</div>
+          <div className="ds-body">{message_body}</div>
         )}
       </div>
     </div>

diff --git a/src/components/FormErrorSummary/FormErrorSummary.js 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 (
+    <ContextualAlert
+      id={`${id}-alert`}
+      alert_icon_alt_text={alert_icon_id}
+      alert_icon_id={alert_icon_alt_text}
+      message_heading={message_heading}
+      whiteBG={whiteBG}
+      type="danger"
+      message_body={[
+        <ol className="ds-list-decimal ds-pl-7" key="errors">
+          {error_list.map(({ line, id }, i) => (
+            <a href={`#${id}`}>
+              <li className="ds-body" key={i}>
+                <p className="ds-underline ds-text-multi-blue-blue70b ds-underline-offset-2 ds-decoration-1 ds-list-inside">
+                  {line}
+                </p>
+              </li>
+            </a>
+          ))}
+        </ol>,
+      ]}
+    />
+  );
+}
+
+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
@@ -0,0 +1,30 @@
+import { FormErrorSummary } from "./FormErrorSummary";
+export default {
+  title: "Components/FormErrorSummary",
+  component: FormErrorSummary,
+};
+
+const Template = (args) => <FormErrorSummary {...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,
+};
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -26,6 +26,7 @@ export function Header(props) {
     topnavProps,
     useParentContainer,
     customLink,
+    dataGcAnalyticsCustomClickInstitutionVariable,
   } = props;
 
   const containerClass = useParentContainer ? "" : "ds-container";
@@ -63,7 +64,7 @@ export function Header(props) {
                 locale={locale}
                 customLink={customLink}
                 dataGcAnalyticsCustomClickInstitutionVariable={
-                  props.dataGcAnalyticsCustomClickInstitutionVariable
+                  dataGcAnalyticsCustomClickInstitutionVariable
                 }
               />
             </div>
@@ -85,7 +86,7 @@ export function Header(props) {
                   customLink={customLink}
                   locale={locale}
                   dataGcAnalyticsCustomClickInstitutionVariable={
-                    props.dataGcAnalyticsCustomClickInstitutionVariable
+                    dataGcAnalyticsCustomClickInstitutionVariable
                   }
                 />
               </div>
@@ -99,7 +100,7 @@ export function Header(props) {
                 customLink={customLink}
                 locale={locale}
                 dataGcAnalyticsCustomClickInstitutionVariable={
-                  props.dataGcAnalyticsCustomClickInstitutionVariable
+                  dataGcAnalyticsCustomClickInstitutionVariable
                 }
               />
             </div>
@@ -112,7 +113,7 @@ export function Header(props) {
             menuList={menuProps.menuList}
             onSignOut={menuProps.onSignOut}
             dataGcAnalyticsCustomClickInstitutionVariable={
-              props.dataGcAnalyticsCustomClickInstitutionVariable
+              dataGcAnalyticsCustomClickInstitutionVariable
             }
           />
         )}
@@ -253,6 +254,11 @@ Header.propTypes = {
     })
   ),
 
+  /**
+   * Prefix for Adobe Analytics tag
+   */
+  dataGcAnalyticsCustomClickInstitutionVariable: PropTypes.string,
+
   /**
    * Test id for unit test
    */

diff --git a/src/components/Header/Header.stories.js b/src/components/Header/Header.stories.js
@@ -12,6 +12,7 @@ export const FrenchAuth = Template.bind({});
 
 EnglishAuth.args = {
   id: "header",
+  dataGcAnalyticsCustomClickInstitutionVariable: "Institution",
   lang: "en",
   menuProps: {
     menuList: [
@@ -49,6 +50,7 @@ EnglishAuth.args = {
 
 FrenchAuth.args = {
   id: "header",
+  dataGcAnalyticsCustomClickInstitutionVariable: "Institution",
   lang: "fr",
   menuProps: {
     menuList: [

diff --git a/src/components/Menu/Menu.js b/src/components/Menu/Menu.js
@@ -11,8 +11,16 @@ import FR from "../../translations/fr.json";
  * Menu component
  */
 export function Menu(props) {
-  const { onClick, isAuthenticated, menuList, lang, onSignOut, demoBuffer } =
-    props;
+  const {
+    onClick,
+    isAuthenticated,
+    menuList,
+    lang,
+    onSignOut,
+    demoBuffer,
+    dataGcAnalyticsCustomClickInstitutionVariable,
+  } = props;
+
   const [showDropdown, setShowDropdown] = useState(false);
   const dropdown = useRef(null);
 
@@ -53,11 +61,7 @@ export function Menu(props) {
               onClick={() => setShowDropdown((e) => !e)}
               data-gc-analytics-customclick={`${
                 props.dataGcAnalyticsCustomClickInstitutionVariable
-              }:${
-                showDropdown
-                  ? "Menu Contract-Diminuer Menu"
-                  : "Expand Menu-Etendre Menu"
-              }`}
+              }:${showDropdown ? "Menu Contract" : "Expand Menu"}`}
               aria-haspopup="true"
               data-testid="menuButton"
               aria-expanded={showDropdown}
@@ -119,7 +123,7 @@ export function Menu(props) {
                             index === 0 ? "ds-border-none" : "ds-border-t-2"
                           } ds-font-body ds-flex ds-items-center ds-h-[55px] ds-px-4 hover:ds-text-[#0535D2] focus:ds-outline-none ds-ring-offset-2 focus:ds-ring-2 ds-ring-[#0535D2] ds-rounded-sm  focus:ds-border-none`}
                           onClick={element.showIcon ? onSignOut : onClick}
-                          data-gc-analytics-customclick={`${props.dataGcAnalyticsCustomClickInstitutionVariable}:Menu-${element.value}`}
+                          data-gc-analytics-customclick={`${props.dataGcAnalyticsCustomClickInstitutionVariable}:Menu-${element.id}`}
                         >
                           {element.showIcon && (
                             <svg
@@ -148,7 +152,7 @@ export function Menu(props) {
                       key={element.key}
                       onClick={onClick}
                       href={element.path}
-                      data-gc-analytics-customclick={`${props.dataGcAnalyticsCustomClickInstitutionVariable}:Menu-${element.value}`}
+                      data-gc-analytics-customclick={`${props.dataGcAnalyticsCustomClickInstitutionVariable}:Menu-${element.id}`}
                     >
                       {element.showIcon && (
                         <svg
@@ -218,6 +222,11 @@ Menu.propTypes = {
    */
   onClick: PropTypes.func,
 
+  /**
+   * Adobe Analytics Prefix
+   */
+  dataGcAnalyticsCustomClickInstitutionVariable: PropTypes.string,
+
   /**
    * set to true for Storybook demos only
    */