14189255065

Committed 01 Apr 2025 06:59AM UTC coverage: 90.47%. First build

Build # 14189255065

Build Type

Pull #613

github

Committed by

web-flow

Commit Message

Merge 4789b79f4 into a7d1e91b6

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

Run Details

770 of 859 branches covered (89.64%)

Branch coverage included in aggregate %.

711 of 778 relevant lines covered (91.39%)

64.99 hits per line

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

68.75

/src/components/Alert/Alert.jsx

import PropTypes from 'prop-types';
import React, { useContext } from 'react';
import { withGlobalProps } from '../../providers/globalProps';
import { TranslationsContext } from '../../providers/translations';
import { classNames } from '../../helpers/classNames/classNames';
import { transferProps } from '../../helpers/transferProps';
import { getRootColorClassName } from '../_helpers/getRootColorClassName';
import styles from './Alert.module.scss';

export const Alert = ({
  children,
  color,
  icon,
  id,
  onClose,
  ...restProps
}) => {
  const translations = useContext(TranslationsContext);

  return (
    <div
      {...transferProps(restProps)}
      className={classNames(
        styles.root,
        getRootColorClassName(color, styles),
      )}
      id={id}
      role="alert"
    >
      {icon && (
        <div className={styles.icon}>
          {icon}
        </div>
      )}
      <div
        className={styles.message}
        {...(id && { id: `${id}__content` })}
      >
        {children}
      </div>
      {onClose && (
        <button
          type="button"
          {...(id && { id: `${id}__close` })}
          className={styles.close}
          onClick={() => onClose()}
          onKeyPress={() => onClose()}
          tabIndex="0"
          title={translations.Alert.close}
        >
          <span className={styles.closeSign}>×</span>
        </button>
      )}
    </div>
  );
};

Alert.defaultProps = {
  color: 'note',
  icon: null,
  id: undefined,
  onClose: null,
};

Alert.propTypes = {
  /**
   * Alert body.
   */
  children: PropTypes.node.isRequired,
  /**
   * Color variant to clarify importance and meaning of the alert. Implements
   * [Feedback and Neutral color collections](/docs/foundation/collections#colors).
   */
  color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark']),
  /**
   * Optional element to be displayed next to the alert body.
   */
  icon: PropTypes.node,
  /**
   * ID of the root HTML element.
   *
   * Also serves as base for ids of nested elements:
   * * `<ID>__close`
   * * `<ID>__content`
   */
  id: PropTypes.string,
  /**
   * Function to call when the close button is clicked. If not provided, close buttons will be
   * hidden.
   */
  onClose: PropTypes.func,
};

export const AlertWithGlobalProps = withGlobalProps(Alert, 'Alert');

export default AlertWithGlobalProps;

1	import PropTypes from 'prop-types';
2	import React, { useContext } from 'react';
3	import { withGlobalProps } from '../../providers/globalProps';
4	import { TranslationsContext } from '../../providers/translations';
5	import { classNames } from '../../helpers/classNames/classNames';
6	import { transferProps } from '../../helpers/transferProps';
7	import { getRootColorClassName } from '../_helpers/getRootColorClassName';
8	import styles from './Alert.module.scss';
9
10	export const Alert = ({	4✔
11	children,
12	color,
13	icon,
14	id,
15	onClose,
16	...restProps
17	}) => {
18	const translations = useContext(TranslationsContext);	2✔
19
20	return (	2✔
21	<div
22	{...transferProps(restProps)}
23	className={classNames(
24	styles.root,
25	getRootColorClassName(color, styles),
26	)}
27	id={id}
28	role="alert"
29	>
30	{icon && (	1!
31	<div className={styles.icon}>
32	{icon}
33	</div>
34	)}
35	<div
36	className={styles.message}
37	{...(id && { id: `${id}__content` })}	1!
38	>
39	{children}
40	</div>
41	{onClose && (	2✔
42	<button
43	type="button"
44	{...(id && { id: `${id}__close` })}	1!
45	className={styles.close}
46	onClick={() => onClose()}	×
47	onKeyPress={() => onClose()}	×
48	tabIndex="0"
49	title={translations.Alert.close}
50	>
51	<span className={styles.closeSign}>×</span>
52	</button>
53	)}
54	</div>
55	);
56	};
57
58	Alert.defaultProps = {	4✔
59	color: 'note',
60	icon: null,
61	id: undefined,
62	onClose: null,
63	};
64
65	Alert.propTypes = {	4✔
66	/**
67	* Alert body.
68	*/
69	children: PropTypes.node.isRequired,
70	/**
71	* Color variant to clarify importance and meaning of the alert. Implements
72	* [Feedback and Neutral color collections](/docs/foundation/collections#colors).
73	*/
74	color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark']),
75	/**
76	* Optional element to be displayed next to the alert body.
77	*/
78	icon: PropTypes.node,
79	/**
80	* ID of the root HTML element.
81	*
82	* Also serves as base for ids of nested elements:
83	* * `<ID>__close`
84	* * `<ID>__content`
85	*/
86	id: PropTypes.string,
87	/**
88	* Function to call when the close button is clicked. If not provided, close buttons will be
89	* hidden.
90	*/
91	onClose: PropTypes.func,
92	};
93
94	export const AlertWithGlobalProps = withGlobalProps(Alert, 'Alert');	4✔
95
96	export default AlertWithGlobalProps;

react-ui-org / react-ui / 14189255065

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