Merge pull request #925 from DTS-STN/102644-new-forms-alert

102644 new forms alert
DTS-STN · Jul 19, 2023 · 4ea0f97 · 4ea0f97
2 parents c98c268 + 23ae09d
commit 4ea0f97
Show file tree

Hide file tree

Showing 13 changed files with 132 additions and 15 deletions.
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 ds-ml-0.5"
             dangerouslySetInnerHTML={{ __html: message_body }}
           />
         ) : (
-          <div className="ds-body ds-pt-[12px]">{message_body}</div>
+          <div className="ds-body ds-ml-0.5">{message_body}</div>
         )}
       </div>
     </div>

diff --git a/src/components/FormCheckBox/FormCheckBox.js b/src/components/FormCheckBox/FormCheckBox.js
@@ -23,6 +23,7 @@ export function FormCheckBox(props) {
         helpText={formLabelProps.helpText}
         hasHint={hasHint}
         hintProps={hintProps}
+        id={id}
       />
       {checkBoxList.map((value, index) => {
         let style = index === size - 1 ? "ds-pb-0" : "md:ds-pb-8px ds-pb-24px";

diff --git a/src/components/FormDatePicker/FormDatePicker.js b/src/components/FormDatePicker/FormDatePicker.js
@@ -137,7 +137,7 @@ export function FormDatePicker(props) {
     : "ds-border-multi-neutrals-grey85a focus:ds-border-multi-blue-blue60f focus:ds-shadow-text-input";
 
   return (
-    <>
+    <div id={id}>
       {hasLabel ? (
         <FormLabel
           label={formLabelProps.label}
@@ -146,6 +146,7 @@ export function FormDatePicker(props) {
           helpText={formLabelProps.helpText}
           hasHint={hasHint}
           hintProps={hintProps}
+          id={id}
         />
       ) : null}
       <div id={id} className="datePicker ds-relative ds-flex ds-flex-wrap">
@@ -222,7 +223,7 @@ export function FormDatePicker(props) {
       {hasError ? (
         <FormError errorMessage={formErrorProps.errorMessage} />
       ) : null}
-    </>
+    </div>
   );
 }
 

diff --git a/src/components/FormError/FormError.js b/src/components/FormError/FormError.js
@@ -8,7 +8,7 @@ import errorImage from "../../assets/error.svg";
 export function FormError(props) {
   return (
     <div
-      id={props.id}
+      id={`${props.id}-error`}
       className="ds-alertWrapper ds-mt-1.5 ds-text-specific-red-red50b ds-leading-26px ds-font-medium ds-font-body ds-flex"
     >
       <div className="ds-block">

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/FormLabel/FormLabel.js b/src/components/FormLabel/FormLabel.js
@@ -8,6 +8,7 @@ export function FormLabel(props) {
       <label
         className={`ds-flex ds-text-multi-neutrals-grey100 ds-items-center ds-leading-24px ds-text-xl lg:ds-text-p ds-font-body ds-relative`}
         htmlFor={props.id}
+        id={`${props.id}-label`}
       >
         <span className="ds-inline ds-text-form-input-gray lg:ds-text-xl ds-font-bold ds-flex ds-items-center">
           <p className={props.noneBoldLabel ? "ds-font-normal" : ""}>

diff --git a/src/components/FormMultiTextField/FormMultiTextField.js b/src/components/FormMultiTextField/FormMultiTextField.js
@@ -36,10 +36,10 @@ export function FormMultiTextField(props) {
     ? "ds-border-specific-red-red50b"
     : "ds-border-multi-neutrals-grey85a focus:ds-border-multi-blue-blue60f  focus-visible:ds-border-multi-blue-blue60f";
   return (
-    <div className={`block leading-tight mb-12`}>
+    <div className={`block leading-tight mb-12`} id={props.id}>
       {props.label && (
         <FormLabel
-          id={props.id}
+          id={`${props.id}-textarea`}
           label={props.label}
           required={props.required}
           requiredText={props.requiredText}
@@ -53,7 +53,7 @@ export function FormMultiTextField(props) {
       )}
       <textarea
         className={`ds-min-h-76px ds-resize-none ${sizeOfField} ${props.className} ds-text-input ds-leading-33px ds-rounded ds-outline-0  ds-text-mobileh5 ds-text-multi-neutrals-grey100  ds-text-form-input-gray ds-border ds-py-5px ds-px-14px ${validationClass}`}
-        id={props.id}
+        id={`${props.id}-textarea`}
         name={props.name}
         placeholder={props.placeholder}
         onChange={onChange}

diff --git a/src/components/FormRadioButton/FormRadioButton.js b/src/components/FormRadioButton/FormRadioButton.js
@@ -9,7 +9,7 @@ export function FormRadioButton(props) {
     ? "ds-border-specific-red-red50b focus:ds-border-multi-blue-blue60f focus:ds-shadow-text-input"
     : "ds-border-multi-neutrals-grey85a focus:ds-border-multi-blue-blue60f focus:ds-shadow-text-input";
   return (
-    <>
+    <div id={props.id}>
       {props.label && (
         <FormLabel
           id={props.id}
@@ -73,7 +73,7 @@ export function FormRadioButton(props) {
         )
       )}
       {props.hasError && <FormError errorMessage={props.errorText} />}
-    </>
+    </div>
   );
 }
 

diff --git a/src/components/FormTextField/FormTextField.js b/src/components/FormTextField/FormTextField.js
@@ -57,10 +57,10 @@ export function FormTextField(props) {
   };
 
   return (
-    <div className={`ds-block ds-leading-tight ds-mb-10px`}>
+    <div className={`ds-block ds-leading-tight ds-mb-10px`} id={props.id}>
       {props.label && (
         <FormLabel
-          id={props.id}
+          id={`${props.id}-textarea`}
           label={props.label}
           required={props.required}
           requiredText={props.requiredText}
@@ -75,7 +75,7 @@ export function FormTextField(props) {
       <input
         className={classname}
         maxLength={maxLength}
-        id={props.id}
+        id={`${props.id}-textarea`}
         aria-describedby={props.describedBy}
         name={props.name}
         placeholder={props.placeholder}

diff --git a/src/components/FormTextField/FormTextField.test.js b/src/components/FormTextField/FormTextField.test.js
@@ -24,6 +24,13 @@ describe("FormTextField", () => {
     // expect(inputElem.value).toBe("h");
   });
 
+  // it("renders text field with with Error", () => {
+  //   render(<RequiredWithError {...RequiredWithError.args} />);
+  //   expect(screen.getByText(RequiredWithError.args.label).classList).toContain(
+  //     "ds-text-form-input-gray"
+  //   );
+  // });
+
   it("has no accessibility violations", async () => {
     const { container } = render(<Primary {...Primary.args} />);
     const results = await axe(container);

diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -129,6 +129,7 @@ export function Header(props) {
 
 Header.defaultProps = {
   lang: "en",
+  id: Math.random(),
   isAuthenticated: true,
   useParentContainer: false,
   searchProps: {

diff --git a/src/index.ts b/src/index.ts
@@ -29,6 +29,7 @@ export { FormTextField } from "./components/FormTextField/FormTextField";
 export { FormError } from "./components/FormError/FormError";
 export { FormLabel } from "./components/FormLabel/FormLabel";
 export { AccordionForm } from "./components/AccordionForm/AccordionForm";
+export { FormAlertMessage } from "./components/FormAlertMessage/FormAlertMessage";
 export { FormRadioButton } from "./components/FormRadioButton/FormRadioButton";
 export { FormCheckBox } from "./components/FormCheckBox/FormCheckBox";
 export { FormMultiTextField } from "./components/FormMultiTextField/FormMultiTextField";