From 0eda3a068bffffc510a9626772878481507e4d03 Mon Sep 17 00:00:00 2001
From: MadanKumarGovindaswamy
<132886427+MadanKumarGovindaswamy@users.noreply.github.com>
Date: Mon, 22 Apr 2024 10:48:31 +0530
Subject: [PATCH] Terra signature doc update (#4088)
---
packages/terra-core-docs/CHANGELOG.md | 2 ++
.../doc/signature/About.1.doc.mdx | 2 +-
.../doc/signature/example/ImageSignature.jsx | 6 +++--
.../signature/example/SignatureExample.jsx | 24 ++++++++++---------
.../example/SignatureExample.module.scss | 14 +++++++++++
.../doc/signature/example/TextSignature.jsx | 5 ++--
6 files changed, 37 insertions(+), 16 deletions(-)
diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md
index cf0852b03d9..df3a7a8967e 100644
--- a/packages/terra-core-docs/CHANGELOG.md
+++ b/packages/terra-core-docs/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+* Changed
+ * Updated documentation for `terra-signature`.
* Added
* Added note regarding search field examples.
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/signature/About.1.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/signature/About.1.doc.mdx
index 0c10cd52456..0606f845748 100644
--- a/packages/terra-core-docs/src/terra-dev-site/doc/signature/About.1.doc.mdx
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/signature/About.1.doc.mdx
@@ -11,7 +11,7 @@ import SignaturePropsTable from 'terra-signature/lib/Signature?dev-site-props-ta
The terra-signature component is used to digitally validate or acknowledge files or documents such as PDF documents, online forms, or specialized e-signature software.
- For mouse usage, only left-click drawing is enabled, and can continue the drawing with a series of line segments as long as the pointer does not exit the confines of the browser.
- The Terra Signature component has the ability to define line width, and line color, and optionally display a signature if the line segments used in the signature have already been recorded.
-- For keyboard usage, consumers can provide their signature by typing, drawing, or inserting an image file with their name. Ensuring the keyboard navigation follows a logical tab order, and provides the instructions and cues necessary to complete the same action.
+- For keyboard usage, consumers can provide their signature by typing, drawing, or inserting an image file with their name. Ensuring the keyboard navigation follows a logical tab order, provides the instructions and cues necessary to complete the same action, for both keyboard and screen reader users.
- The Terra Signature component supports resizing to 400% and supports reflow when the viewport is resized to 320x256 px without loss of information or function.
## Getting Started
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/signature/example/ImageSignature.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/signature/example/ImageSignature.jsx
index 2245cda35ad..8642da80fc6 100644
--- a/packages/terra-core-docs/src/terra-dev-site/doc/signature/example/ImageSignature.jsx
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/signature/example/ImageSignature.jsx
@@ -1,6 +1,8 @@
import React from 'react';
import classNames from 'classnames/bind';
import Signature from 'terra-signature';
+import Button from 'terra-button';
+import Input from 'terra-form-input';
import PropTypes from 'prop-types';
import styles from './SignatureExample.module.scss';
@@ -39,8 +41,8 @@ const ImageSignature = (props) => {
-
-
+
+
);
};
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/signature/example/SignatureExample.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/signature/example/SignatureExample.jsx
index f5368473b06..60f1d51fc74 100644
--- a/packages/terra-core-docs/src/terra-dev-site/doc/signature/example/SignatureExample.jsx
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/signature/example/SignatureExample.jsx
@@ -3,6 +3,8 @@ import Signature from 'terra-signature';
import classNames from 'classnames/bind';
import Tabs from 'terra-tabs';
import VisuallyHiddenText from 'terra-visually-hidden-text';
+import Button from 'terra-button';
+import { SingleSelect } from 'terra-form-select';
import TextSignature from './TextSignature';
import ImageSignature from './ImageSignature';
import styles from './SignatureExample.module.scss';
@@ -26,8 +28,8 @@ class SignatureExample extends React.Component {
this.handleLiveRegion();
}
- handleLineWidth(event) {
- this.setState({ [event.target.name]: event.target.value });
+ handleLineWidth(value) {
+ this.setState({ lineWidth: value });
}
handleLiveRegion(value) {
@@ -40,7 +42,7 @@ class SignatureExample extends React.Component {
render() {
return (