Note {' '} - Tab key Navigation is disabled for below list items. Inorder to interact with list-item user should set programmatic focus to one of the list item depending on the required scenario. + Tab key navigation is disabled for the below list items. + In scenarios where tab key navigation is disabled, consumers should enable interaction by setting programmatic focus to one of the list items. {' '}
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 bad5830f942..0c10cd52456 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 @@ -8,9 +8,11 @@ import SignaturePropsTable from 'terra-signature/lib/Signature?dev-site-props-ta # Terra Signature -The terra-signature component provides users a way to define a signature with a series of line segments. -The component can define line width, line color, and optionally display a signature if the line segments have -already been recorded. Exiting the canvas then re-entering continues the drawing, as long as the pointer does not exit the confines of the browser. For mouse usage, only left click drawing is enabled. +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. +- 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 new file mode 100644 index 00000000000..2245cda35ad --- /dev/null +++ b/packages/terra-core-docs/src/terra-dev-site/doc/signature/example/ImageSignature.jsx @@ -0,0 +1,50 @@ +import React from 'react'; +import classNames from 'classnames/bind'; +import Signature from 'terra-signature'; +import PropTypes from 'prop-types'; +import styles from './SignatureExample.module.scss'; + +const cx = classNames.bind(styles); + +const propTypes = { onClearSignature: PropTypes.func }; + +const ImageSignature = (props) => { + const handleFileSelect = () => { + const canvas = document.getElementById('upload'); + if (canvas) { + const ctx = canvas.getContext('2d'); + ctx.clearRect(0, 0, 1000, 100); + const imgFile = document.getElementById('file-select').files[0]; + const img = new Image(); + img.onload = () => { + ctx.drawImage(img, 10, 0, 200, canvas.offsetHeight); + }; + img.src = URL.createObjectURL(imgFile); + } + }; + + const handleClear = () => { + const canvas = document.getElementById('upload'); + if (canvas) { + const ctx = canvas.getContext('2d'); + ctx.clearRect(0, 0, 1000, 100); + document.getElementById('file-select').value = ''; + props.onClearSignature(); + } + }; + + return ( +