diff --git a/package-lock.json b/package-lock.json index f0448f99b9c..b853fbee6a4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40289,6 +40289,33 @@ "react-dom": "^16.8.5" } }, + "node_modules/terra-tabs": { + "version": "7.21.0", + "resolved": "https://registry.npmjs.org/terra-tabs/-/terra-tabs-7.21.0.tgz", + "integrity": "sha512-5nIo0M1HPMZbyu+5MBCl/R2ker4N2DF2buOTS8QPLKVc9UkE6sC9cw1JovUl6eGa1WG7FRwqPmvPn6pO9REwVQ==", + "dependencies": { + "classnames": "^2.2.5", + "keycode-js": "^3.1.0", + "prop-types": "^15.5.8", + "react-beautiful-dnd": "^13.1.1", + "react-onclickoutside": "^6.7.1", + "resize-observer-polyfill": "^1.4.1", + "terra-button": "^3.42.0", + "terra-content-container": "^3.0.0", + "terra-divider": "^3.33.0", + "terra-icon": "^3.19.0", + "terra-menu": "^6.89.0", + "terra-responsive-element": "^5.0.0", + "terra-theme-context": "^1.9.0", + "terra-visually-hidden-text": "^2.36.0", + "uuid": "3.4.0" + }, + "peerDependencies": { + "react": "^16.8.5", + "react-dom": "^16.8.5", + "react-intl": "^2.8.0 || 3 || 4 || 5" + } + }, "node_modules/terra-tag": { "resolved": "packages/terra-tag", "link": true @@ -43657,6 +43684,7 @@ "terra-status": "^4.63.0", "terra-status-view": "^4.75.0", "terra-switch": "^1.14.0", + "terra-tabs": "^7.21.0", "terra-tag": "^2.68.0", "terra-text": "^4.56.0", "terra-theme-context": "^1.0.0", diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md index 83fdbd05272..e8d096dc101 100644 --- a/packages/terra-core-docs/CHANGELOG.md +++ b/packages/terra-core-docs/CHANGELOG.md @@ -6,6 +6,7 @@ * Added an example for `terra-hyperlink` to demonstrate text ellipses when its content should overflow. * Changed * Fixed typos and imports in `terra-list` docs. + * Updated `terra-signature` example to include text and image signature. ## 1.68.0 - (March 20, 2024) diff --git a/packages/terra-core-docs/package.json b/packages/terra-core-docs/package.json index 4024010ebb2..90e5f158e4e 100644 --- a/packages/terra-core-docs/package.json +++ b/packages/terra-core-docs/package.json @@ -85,6 +85,7 @@ "terra-status-view": "^4.75.0", "terra-switch": "^1.14.0", "terra-tag": "^2.68.0", + "terra-tabs": "^7.21.0", "terra-text": "^4.56.0", "terra-theme-context": "^1.0.0", "terra-toggle": "^3.62.0", 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 ( +
+
+ +
+
+ + +
+ ); +}; + +ImageSignature.propTypes = propTypes; + +export default ImageSignature; 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 3e24a6adc28..24ec9d94a6a 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 @@ -1,6 +1,10 @@ import React from 'react'; import Signature from 'terra-signature'; import classNames from 'classnames/bind'; +import Tabs from 'terra-tabs'; +import VisuallyHiddenText from 'terra-visually-hidden-text'; +import TextSignature from './TextSignature'; +import ImageSignature from './ImageSignature'; import styles from './SignatureExample.module.scss'; const cx = classNames.bind(styles); @@ -9,73 +13,73 @@ class SignatureExample extends React.Component { constructor() { super(); - this.state = { lineSegments: [], lineWidth: Signature.Opts.Width.FINE }; - - this.handleSingleLine = this.handleSingleLine.bind(this); + this.state = { lineSegments: [], lineWidth: Signature.Opts.Width.FINE, message: '' }; this.handleClear = this.handleClear.bind(this); this.handleLineWidth = this.handleLineWidth.bind(this); - } - - handleSingleLine() { - const singleLine = [{ - x1: 71, y1: 8, x2: 71, y2: 8, - }, { - x1: 71, y1: 8, x2: 71, y2: 10, - }, { - x1: 71, y1: 10, x2: 71, y2: 17, - }, { - x1: 71, y1: 17, x2: 71, y2: 28, - }, { - x1: 71, y1: 28, x2: 71, y2: 44, - }, { - x1: 71, y1: 44, x2: 71, y2: 56, - }, { - x1: 71, y1: 56, x2: 71, y2: 68, - }, { - x1: 71, y1: 68, x2: 71, y2: 75, - }, { - x1: 71, y1: 75, x2: 71, y2: 81, - }, { - x1: 71, y1: 81, x2: 71, y2: 84, - }, { - x1: 71, y1: 84, x2: 71, y2: 86, - }, { - x1: 71, y1: 86, x2: 71, y2: 87, - }, { - x1: 71, y1: 87, x2: 71, y2: 87, - }]; - const newState = { ...this.state, lineSegments: singleLine }; - this.setState(newState); + this.handleLiveRegion = this.handleLiveRegion.bind(this); + this.tabKey = 'compact'; } handleClear() { const newState = { ...this.state, lineSegments: [] }; this.setState(newState); + this.handleLiveRegion(); } handleLineWidth(event) { this.setState({ [event.target.name]: event.target.value }); } + handleLiveRegion(value) { + this.setState({ message: value ? 'Added Signature' : 'Cleared Signature' }); + setTimeout(() => { + this.setState({ message: '' }); + }, 3000); + } + render() { return (
-
- -
-
- - -
-

- -
-
+ + +
+ <> +
+ +
+ +
+
+ +
+

+ +
+
+ + +
+ + + +
+ + + +

+ Note: +
+

+

+
); } diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/signature/example/SignatureExample.module.scss b/packages/terra-core-docs/src/terra-dev-site/doc/signature/example/SignatureExample.module.scss index d05cfe7bc8f..bde8f882e3f 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/signature/example/SignatureExample.module.scss +++ b/packages/terra-core-docs/src/terra-dev-site/doc/signature/example/SignatureExample.module.scss @@ -2,7 +2,31 @@ .signature-wrapper { border: 1px solid rgb(0, 0, 0); height: 100px; - padding: 5px; + padding: 7px; width: 100%; } + + .text-area-style { + border: 0; + height: 88px; + width: calc(100% - 0.2rem); + + &:focus { + outline: 2px dotted #000; + outline-offset: -2px; + } + } + + .clear-button { + position: relative; + z-index: 0; + } + + .add-button { + margin: 5px; + } + + .input-image { + margin: 5px; + } } diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/signature/example/TextSignature.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/signature/example/TextSignature.jsx new file mode 100644 index 00000000000..9488f651c0e --- /dev/null +++ b/packages/terra-core-docs/src/terra-dev-site/doc/signature/example/TextSignature.jsx @@ -0,0 +1,60 @@ +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, onAddSignature: PropTypes.func }; + +const TextSignature = (props) => { + const [showTextArea, setshowTextArea] = React.useState(true); + const textArea = React.useRef(); + + const handleClear = () => { + if (showTextArea) { + if (textArea && textArea.current) textArea.current.value = null; + return; + } + const canvas = document.getElementById('text'); + const ctx = canvas?.getContext('2d'); + if (ctx) { + ctx.font = '30px Arial'; + ctx.clearRect(0, 0, 1000, 100); + } + if (textArea && textArea.current) textArea.current.value = null; + setshowTextArea(true); + props.onClearSignature(); + }; + + const handleAdd = () => { + if (textArea && textArea.current.value) { + const canvas = document.getElementById('text'); + const ctx = canvas?.getContext('2d'); + if (ctx && canvas) { + ctx.font = '30px Arial'; + ctx.fillText(textArea.current.value, 100, 50); + canvas.setAttribute('aria-label', textArea.current.value); + setshowTextArea(false); + props.onAddSignature(true); + } + } + }; + + return ( +
+
+ {(showTextArea) ?