Skip to content

Commit

Permalink
Feat(web-react): TextField and TextArea helper text #DS-597
Browse files Browse the repository at this point in the history
  • Loading branch information
@tomassychra
tomassychra committed Mar 3, 2023
1 parent c2d8de9 commit b0aa2de
Show file tree
Hide file tree
Showing 35 changed files with 174 additions and 62 deletions.
23 changes: 12 additions & 11 deletions packages/web-react/src/components/TextArea/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,18 +12,19 @@ and show if the textarea is required.

| Prop name | Type | Default | Required | Description |
| ----------------- | -------------------------------------------------------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| `id` | string | - | yes | Textarea and label identification |
| `name` | string | - | no | Textarea name |
| `label` | string | - | no | Label text |
| `placeholder` | string | - | no | Textarea placeholder |
| `value` | string | - | no | Textarea value |
| `maxLength` | number | - | no | Maximum number of characters |
| `message` | string | - | no | Validation or help message |
| `rows` | number | - | no | Number of visible rows |
| `id` | `string` | - | yes | Textarea and label identification |
| `name` | `string` | - | no | Textarea name |
| `label` | `string` | - | no | Label text |
| `placeholder` | `string` | - | no | Textarea placeholder |
| `value` | `string` | - | no | Textarea value |
| `maxLength` | `number` | - | no | Maximum number of characters |
| `message` | `string` | - | no | Validation message |
| `rows` | `number` | - | no | Number of visible rows |
| `validationState` | [Validation dictionary][dictionary-validation], `error` (deprecated) | - | no | Type of validation state. [**DEPRECATED**][deprecated] The value "error" in the dictionary will be replaced by the value "danger". |
| `isDisabled` | boolean | - | no | Whether is field disabled |
| `isRequired` | boolean | - | no | Whether is field required |
| `isLabelHidden` | boolean | - | no | Whether is label hidden |
| `isDisabled` | `boolean` | - | no | Whether is field disabled |
| `isRequired` | `boolean` | - | no | Whether is field required |
| `isLabelHidden` | `boolean` | - | no | Whether is label hidden |
| `helperText` | `string` | - | no | Custom helper text |

## Custom component

Expand Down
1 change: 1 addition & 0 deletions packages/web-react/src/components/TextArea/TextArea.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,5 @@ export { default as TextAreaInputHeight } from './stories/TextAreaInputHeight';
export { default as TextAreaLabelHidden } from './stories/TextAreaLabelHidden';
export { default as TextAreaLabelRequired } from './stories/TextAreaRequired';
export { default as TextAreaValidationState } from './stories/TextAreaValidationState';
export { default as TextAreaHelperText } from './stories/TextAreaHelperText';
export { default as HTML } from './stories/TextAreaHtml';
7 changes: 7 additions & 0 deletions packages/web-react/src/components/TextArea/__tests__/TextArea.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,13 @@ describe('TextArea', () => {
expect(element.textContent).toBe('text');
});

it('should have helper text', () => {
const dom = render(<TextArea id="textarea" label="Label" helperText="helper text" />);

const element = dom.container.querySelector('.TextArea__helperText') as HTMLElement;
expect(element.textContent).toBe('helper text');
});

it('should have fluid classname', () => {
const dom = render(<TextArea id="textarea" label="Label" isFluid />);

Expand Down
18 changes: 18 additions & 0 deletions packages/web-react/src/components/TextArea/stories/TextAreaHelperText.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
// Because there is no `dist` directory during the CI run
/* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */
import React from 'react';
import { ComponentStory } from '@storybook/react';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore: No declaration file
import { SpiritTextAreaProps } from '../../../types';
import TextArea from '../TextArea';

const Story: ComponentStory<typeof TextArea> = (args: SpiritTextAreaProps) => <TextArea {...args} />;

Story.args = {
id: 'textarea-helper-text-example',
label: 'Label with helper text',
helperText: 'Custom helper text',
};

export default Story;
10 changes: 5 additions & 5 deletions packages/web-react/src/components/TextArea/stories/TextAreaValidationState.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,11 @@ const Story = (props: unknown) => (
validationState="warning"
/>
<TextArea
id="textarea-error"
label="Validation error"
message="Error message"
name="textarea-error"
validationState="error"
id="textarea-danger"
label="Validation danger"
message="Danger message"
name="textarea-danger"
validationState="danger"
/>
</div>
);
Expand Down
23 changes: 12 additions & 11 deletions packages/web-react/src/components/TextField/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,19 +15,20 @@ hidden or show if the input is required.

| Prop name | Type | Default | Required | Description |
| ------------------- | -------------------------------------------------------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| `hasPasswordToggle` | boolean | - | yes | If true, the `type` is set to `password` and a password toggle is shown |
| `id` | string | - | no | Input and label identification |
| `inputWidth` | number | - | no | Input width |
| `isDisabled` | boolean | - | no | Whether is field disabled |
| `isLabelHidden` | boolean | - | no | Whether is label hidden |
| `isRequired` | boolean | - | no | Whether is field required |
| `label` | string | - | no | Label text |
| `message` | string | - | no | Validation or help message |
| `name` | string | - | no | Input name |
| `placeholder` | string | - | no | Input placeholder |
| `hasPasswordToggle` | `boolean` | - | yes | If true, the `type` is set to `password` and a password toggle is shown |
| `id` | `string` | - | no | Input and label identification |
| `inputWidth` | `number` | - | no | Input width |
| `isDisabled` | `boolean` | - | no | Whether is field disabled |
| `isLabelHidden` | `boolean` | - | no | Whether is label hidden |
| `isRequired` | `boolean` | - | no | Whether is field required |
| `label` | `string` | - | no | Label text |
| `message` | `string` | - | no | Validation message |
| `name` | `string` | - | no | Input name |
| `placeholder` | `string` | - | no | Input placeholder |
| `type` | `email`, `number`, `password`, `search`, `tel`, `text`, `url` | - | no | Input type |
| `validationState` | [Validation dictionary][dictionary-validation], `error` (deprecated) | - | no | Type of validation state. [**DEPRECATED**][deprecated] The value "error" in the dictionary will be replaced by the value "danger". |
| `value` | string | - | no | Input value |
| `value` | `string` | - | no | Input value |
| `helperText` | `string` | - | no | Custom helper text |

## Custom component

Expand Down
1 change: 1 addition & 0 deletions packages/web-react/src/components/TextField/TextField.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,5 @@ export { default as TextFieldPasswordToggle } from './stories/TextFieldPasswordT
export { default as TextFieldLabelRequired } from './stories/TextFieldRequired';
export { default as TextFieldType } from './stories/TextFieldType';
export { default as TextFieldValidationState } from './stories/TextFieldValidationState';
export { default as TextFieldHelperText } from './stories/TextFieldHelperText';
export { default as HTML } from './stories/TextFieldHtml';
9 changes: 9 additions & 0 deletions packages/web-react/src/components/TextField/__tests__/TextField.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,15 @@ describe('TextField', () => {
expect(element.textContent).toBe('text');
});

it('should have helper text', () => {
const dom = render(
<TextField id="textfield" label="Label" type={type as TextFieldType} helperText="helper text" />,
);

const element = dom.container.querySelector('.TextField__helperText') as HTMLElement;
expect(element.textContent).toBe('helper text');
});

it('should have password toggle', () => {
const dom = render(<TextField id="textfield" label="Label" hasPasswordToggle />);

Expand Down
18 changes: 18 additions & 0 deletions packages/web-react/src/components/TextField/stories/TextFieldHelperText.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
// Because there is no `dist` directory during the CI run
/* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */
import React from 'react';
import { ComponentStory } from '@storybook/react';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore: No declaration file
import { SpiritTextFieldProps } from '../../../types';
import TextField from '../TextField';

const Story: ComponentStory<typeof TextField> = (args: SpiritTextFieldProps) => <TextField {...args} />;

Story.args = {
id: 'textfield-helper-text-example',
label: 'Label with helper text',
helperText: 'Custom helper text',
};

export default Story;
10 changes: 5 additions & 5 deletions packages/web-react/src/components/TextField/stories/TextFieldValidationState.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,11 @@ const Story = (props: unknown) => (
validationState="warning"
/>
<TextField
id="textfield-error"
label="Validation error"
message="Error message"
name="textfield-error"
validationState="error"
id="textfield-danger"
label="Validation danger"
message="Danger message"
name="textfield-danger"
validationState="danger"
/>
</div>
);
Expand Down
Loading

0 comments on commit b0aa2de

Please sign in to comment.