Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.

Commit

Permalink
Terra signature doc update (#4088)
Browse files Browse the repository at this point in the history
  • Loading branch information
MadanKumarGovindaswamy authored Apr 22, 2024
1 parent 9335a69 commit 0eda3a0
Show file tree
Hide file tree
Showing 6 changed files with 37 additions and 16 deletions.
2 changes: 2 additions & 0 deletions packages/terra-core-docs/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

## Unreleased

* Changed
* Updated documentation for `terra-signature`.
* Added
* Added note regarding search field examples.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -39,8 +41,8 @@ const ImageSignature = (props) => {
<Signature id="upload" />
</div>
<br />
<button type="button" onClick={handleClear}>Clear</button>
<input className={cx('input-image')} id="file-select" type="file" accept="image/*" onChange={handleFileSelect} />
<Button className={cx('button')} text="Clear" onClick={handleClear} />
<Input className={cx('input-image')} id="file-select" type="file" accept="image/*" onChange={handleFileSelect} />
</div>
);
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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) {
Expand All @@ -40,7 +42,7 @@ class SignatureExample extends React.Component {
render() {
return (
<div>
<Tabs setFocusOnContent defaultActiveKey={`${this.tabKey}DrawTab`} id={this.tabKey}>
<Tabs defaultActiveKey={`${this.tabKey}DrawTab`} id={this.tabKey}>
<Tabs.Pane label="Draw" key={`${this.tabKey}DrawTab`} id={`${this.tabKey}DrawTab`}>
<br />
<>
Expand All @@ -50,15 +52,15 @@ class SignatureExample extends React.Component {
</>
<br />
<div>
<button type="button" onClick={this.handleClear}>Clear </button>
<Button className={cx('button')} text="Clear" onClick={this.handleClear} />
<div>
<p><label htmlFor="lineWidth">Select a line width:</label></p>
<select id="lineWidth" name="lineWidth" value={this.state.lineWidth} onChange={this.handleLineWidth}>
<option value="1">EXTRAFINE</option>
<option value="2">FINE</option>
<option value="4">MEDIUM</option>
<option value="6">HEAVY</option>
</select>
<p><label htmlFor="lineWidth">Select a line width</label></p>
<SingleSelect className={cx('form-select')} id="lineWidth" name="lineWidth" value={this.state.lineWidth} placeholder="Select lineWidth" onSelect={this.handleLineWidth}>
<SingleSelect.Option value="1" display="EXTRAFINE" />
<SingleSelect.Option value="2" display="FINE" />
<SingleSelect.Option value="4" display="MEDIUM" />
<SingleSelect.Option value="6" display="HEAVY" />
</SingleSelect>
</div>
</div>
</Tabs.Pane>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,19 @@

.input-image {
margin: 5px;

&:focus {
outline: 2px solid #4cb2e9;
outline-offset: 1px;
}
}

.button {
margin: 5px;
}

.form-select {
margin: 3px;
max-width: 300px;
}
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import classNames from 'classnames/bind';
import Signature from 'terra-signature';
import Button from 'terra-button';
import PropTypes from 'prop-types';
import styles from './SignatureExample.module.scss';

Expand Down Expand Up @@ -50,8 +51,8 @@ const TextSignature = (props) => {
</div>
<br />
<div className={cx('clear-button')}>
<button type="button" onClick={handleClear}>Clear</button>
<button className={cx('add-button')} type="button" onClick={handleAdd}>Add</button>
<Button className={cx('button')} text="Clear" onClick={handleClear} />
<Button className={cx('button')} text="Add" onClick={handleAdd} />
</div>
</div>
);
Expand Down

0 comments on commit 0eda3a0

Please sign in to comment.