feat: Add instruction text just above digital signature pad

bcgov · Aug 18, 2020 · 7275627 · 7275627
1 parent d2a1864
commit 7275627
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/app/containers/Forms/CertificationSignature.tsx b/app/containers/Forms/CertificationSignature.tsx
@@ -74,6 +74,15 @@ export const CertificationSignature: React.FunctionComponent<Props> = ({
   return (
     <Container>
       <h3>Certifier Signature:</h3>
+      <p>
+        To create a digital signature, click, hold and drag your pointer within
+        the box to draw your signature. Use the Clear button below the signature
+        box to delete the signature and start again. Alternatively, you can
+        select &quot;Choose File&quot; to upload an existing signature image
+        file from your computer (.png, .jpg, .jpeg). When you&apos;re ready to
+        submit your certification, click &quot;Sign&quot; below the signature
+        box.
+      </p>
       <Row>
         <Col md={12}>
           <SignaturePad

diff --git a/app/tests/unit/containers/Forms/__snapshots__/CertificationSignature.test.tsx.snap b/app/tests/unit/containers/Forms/__snapshots__/CertificationSignature.test.tsx.snap
@@ -9,6 +9,11 @@ exports[`The Confirmation Component matches the snapshot 1`] = `
   >
     Certifier Signature:
   </h3>
+  <p
+    className="jsx-2877110858"
+  >
+    To create a digital signature, click, hold and drag your pointer within the box to draw your signature. Use the Clear button below the signature box to delete the signature and start again. Alternatively, you can select "Choose File" to upload an existing signature image file from your computer (.png, .jpg, .jpeg). When you're ready to submit your certification, click "Sign" below the signature box.
+  </p>
   <Row
     noGutters={false}
   >