14924998981

Committed 09 May 2025 08:39AM UTC coverage: 60.27%. First build

Build # 14924998981

Build Type

Pull #613

github

Committed by

web-flow

Commit Message

Merge af0cc3338 into 6b1c4e759

Pull Request Pull Request #613: Add `writing-tests-guidelines.md` (#612)

Run Details

413 of 897 branches covered (46.04%)

Branch coverage included in aggregate %.

614 of 807 relevant lines covered (76.08%)

29.31 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

10.81

/src/components/TextArea/TextArea.jsx

import PropTypes from 'prop-types';
import React, { useContext } from 'react';
import { withGlobalProps } from '../../providers/globalProps';
import { classNames } from '../../helpers/classNames/classNames';
import { transferProps } from '../../helpers/transferProps';
import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
import { FormLayoutContext } from '../FormLayout';
import styles from './TextArea.module.scss';

export const TextArea = React.forwardRef((props, ref) => {
  const {
    disabled,
    fullWidth,
    helpText,
    id,
    isLabelVisible,
    label,
    layout,
    required,
    size,
    validationState,
    validationText,
    variant,
    ...restProps
  } = props;

  const context = useContext(FormLayoutContext);

  return (
    <label
      className={classNames(
        styles.root,
        fullWidth && styles.isRootFullWidth,
        context && styles.isRootInFormLayout,
        resolveContextOrProp(context && context.layout, layout) === 'horizontal'
          ? styles.isRootLayoutHorizontal
          : styles.isRootLayoutVertical,
        disabled && styles.isRootDisabled,
        required && styles.isRootRequired,
        getRootSizeClassName(size, styles),
        getRootValidationStateClassName(validationState, styles),
        variant === 'filled' ? styles.isRootVariantFilled : styles.isRootVariantOutline,
      )}
      htmlFor={id}
      id={id && `${id}__label`}
    >
      <div
        className={classNames(
          styles.label,
          !isLabelVisible && styles.isLabelHidden,
        )}
        id={id && `${id}__labelText`}
      >
        {label}
      </div>
      <div className={styles.field}>
        <div className={styles.inputContainer}>
          <textarea
            {...transferProps(restProps)}
            className={styles.input}
            disabled={disabled}
            id={id}
            ref={ref}
            required={required}
          />
          {variant === 'filled' && (
            <div className={styles.bottomLine} />
          )}
        </div>
        {helpText && (
          <div
            className={styles.helpText}
            id={id && `${id}__helpText`}
          >
            {helpText}
          </div>
        )}
        {validationText && (
          <div
            className={styles.validationText}
            id={id && `${id}__validationText`}
          >
            {validationText}
          </div>
        )}
      </div>
    </label>
  );
});

TextArea.defaultProps = {
  disabled: false,
  fullWidth: false,
  helpText: null,
  id: undefined,
  isLabelVisible: true,
  layout: 'vertical',
  required: false,
  size: 'medium',
  validationState: null,
  validationText: null,
  variant: 'outline',
};

TextArea.propTypes = {
  /**
   * If `true`, the input will be disabled.
   */
  disabled: PropTypes.bool,
  /**
   * If `true`, the field will span the full width of its parent.
   */
  fullWidth: PropTypes.bool,
  /**
   * Optional help text.
   */
  helpText: PropTypes.node,
  /** ID of the input HTML element. It also serves as a prefix for nested elements:
   * * `<ID>__label`
   * * `<ID>__labelText`
   * * `<ID>__helpText`
   * * `<ID>__validationText`
   */
  id: PropTypes.string,
  /**
   * If `false`, the label will be visually hidden (but remains accessible by assistive
   * technologies).
   */
  isLabelVisible: PropTypes.bool,
  /**
   * Text field label.
   */
  label: PropTypes.node.isRequired,
  /**
   * Layout of the field.
   *
   * Ignored if the component is rendered within `FormLayout` component
   * as the value is inherited in such case.
   */
  layout: PropTypes.oneOf(['horizontal', 'vertical']),
  /**
   * If `true`, the input will be required.
   */
  required: PropTypes.bool,
  /**
   * Size of the field.
   */
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  /**
   * Alter the field to provide feedback based on validation result.
   */
  validationState: PropTypes.oneOf(['invalid', 'valid', 'warning']),
  /**
   * Validation message to be displayed.
   */
  validationText: PropTypes.node,
  /**
   * Design variant of the field, further customizable with CSS custom properties.
   */
  variant: PropTypes.oneOf(['filled', 'outline']),
};

export const TextAreaWithGlobalProps = withGlobalProps(TextArea, 'TextArea');

export default TextAreaWithGlobalProps;

1	import PropTypes from 'prop-types';
2	import React, { useContext } from 'react';
3	import { withGlobalProps } from '../../providers/globalProps';
4	import { classNames } from '../../helpers/classNames/classNames';
5	import { transferProps } from '../../helpers/transferProps';
6	import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
7	import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
8	import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
9	import { FormLayoutContext } from '../FormLayout';
10	import styles from './TextArea.module.scss';
11
12	export const TextArea = React.forwardRef((props, ref) => {	2✔
13	const {
14	disabled,
15	fullWidth,
16	helpText,
17	id,
18	isLabelVisible,
19	label,
20	layout,
21	required,
22	size,
23	validationState,
24	validationText,
25	variant,
26	...restProps
27	} = props;	×
28
29	const context = useContext(FormLayoutContext);	×
30
31	return (	×
32	<label
33	className={classNames(
34	styles.root,
35	fullWidth && styles.isRootFullWidth,	×
36	context && styles.isRootInFormLayout,	×
37	resolveContextOrProp(context && context.layout, layout) === 'horizontal'	×
38	? styles.isRootLayoutHorizontal
39	: styles.isRootLayoutVertical,
40	disabled && styles.isRootDisabled,	×
41	required && styles.isRootRequired,	×
42	getRootSizeClassName(size, styles),
43	getRootValidationStateClassName(validationState, styles),
44	variant === 'filled' ? styles.isRootVariantFilled : styles.isRootVariantOutline,	×
45	)}
46	htmlFor={id}
47	id={id && `${id}__label`}	×
48	>
49	<div
50	className={classNames(
51	styles.label,
52	!isLabelVisible && styles.isLabelHidden,	×
53	)}
54	id={id && `${id}__labelText`}	×
55	>
56	{label}
57	</div>
58	<div className={styles.field}>
59	<div className={styles.inputContainer}>
60	<textarea
61	{...transferProps(restProps)}
62	className={styles.input}
63	disabled={disabled}
64	id={id}
65	ref={ref}
66	required={required}
67	/>
68	{variant === 'filled' && (	×
69	<div className={styles.bottomLine} />
70	)}
71	</div>
72	{helpText && (	×
73	<div
74	className={styles.helpText}
75	id={id && `${id}__helpText`}	×
76	>
77	{helpText}
78	</div>
79	)}
80	{validationText && (	×
81	<div
82	className={styles.validationText}
83	id={id && `${id}__validationText`}	×
84	>
85	{validationText}
86	</div>
87	)}
88	</div>
89	</label>
90	);
91	});
92
93	TextArea.defaultProps = {	2✔
94	disabled: false,
95	fullWidth: false,
96	helpText: null,
97	id: undefined,
98	isLabelVisible: true,
99	layout: 'vertical',
100	required: false,
101	size: 'medium',
102	validationState: null,
103	validationText: null,
104	variant: 'outline',
105	};
106
107	TextArea.propTypes = {	2✔
108	/**
109	* If `true`, the input will be disabled.
110	*/
111	disabled: PropTypes.bool,
112	/**
113	* If `true`, the field will span the full width of its parent.
114	*/
115	fullWidth: PropTypes.bool,
116	/**
117	* Optional help text.
118	*/
119	helpText: PropTypes.node,
120	/** ID of the input HTML element. It also serves as a prefix for nested elements:
121	* * `<ID>__label`
122	* * `<ID>__labelText`
123	* * `<ID>__helpText`
124	* * `<ID>__validationText`
125	*/
126	id: PropTypes.string,
127	/**
128	* If `false`, the label will be visually hidden (but remains accessible by assistive
129	* technologies).
130	*/
131	isLabelVisible: PropTypes.bool,
132	/**
133	* Text field label.
134	*/
135	label: PropTypes.node.isRequired,
136	/**
137	* Layout of the field.
138	*
139	* Ignored if the component is rendered within `FormLayout` component
140	* as the value is inherited in such case.
141	*/
142	layout: PropTypes.oneOf(['horizontal', 'vertical']),
143	/**
144	* If `true`, the input will be required.
145	*/
146	required: PropTypes.bool,
147	/**
148	* Size of the field.
149	*/
150	size: PropTypes.oneOf(['small', 'medium', 'large']),
151	/**
152	* Alter the field to provide feedback based on validation result.
153	*/
154	validationState: PropTypes.oneOf(['invalid', 'valid', 'warning']),
155	/**
156	* Validation message to be displayed.
157	*/
158	validationText: PropTypes.node,
159	/**
160	* Design variant of the field, further customizable with CSS custom properties.
161	*/
162	variant: PropTypes.oneOf(['filled', 'outline']),
163	};
164
165	export const TextAreaWithGlobalProps = withGlobalProps(TextArea, 'TextArea');	2✔
166
167	export default TextAreaWithGlobalProps;

react-ui-org / react-ui / 14924998981

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous