80223841-8c6a-431a-aa6a-22eab4aabe15

Committed 12 Nov 2025 09:19AM UTC coverage: 74.23% (-0.4%) from 74.624%

Build # 80223841-8c6a-431a-aa6a-22eab4aabe15

Build Type

push

circleci

Committed by

web-flow

Commit Message

Merge pull request #23 from Financial-Times/UPPSF-6552

Uppsf 6552

Coverage Stats

310 of 395 branches covered (78.48%)

Branch coverage included in aggregate %.

9 of 14 new or added lines in 3 files covered. (64.29%)

485 of 676 relevant lines covered (71.75%)

8.29 hits per line

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

92.0

/src/components/Buttons/Button.js

import React, { forwardRef } from 'react';
import PropTypes from 'prop-types';

const classNameDefault = 'o3-button';
const classNameDefaultPrefix = `${classNameDefault}--`;
const classNameIconDefaultPrefix = `${classNameDefault}-icon--`;

const Button = forwardRef(({
  id,
  children,
  disabled,
  onClick,
  className: additionalClassname,
  primary,
  secondary,
  inverse,
  big,
  mono,
  icon,
  title,
  selected,
  brand,
  theme
}, ref) => {
  let buttonClasses = classNameDefault;

  if (primary) {
    buttonClasses += ` ${classNameDefaultPrefix}primary`;
  }
  if (secondary) {
    buttonClasses += ` ${classNameDefaultPrefix}secondary`;
  }
  if (inverse) {
    buttonClasses += ` ${classNameDefaultPrefix}inverse`;
  }
  if (big) {
    buttonClasses += ` ${classNameDefaultPrefix}big`;
  }
  if (mono) {
    buttonClasses += ` ${classNameDefaultPrefix}mono`;
  }
  if (icon) {
    buttonClasses += ` ${classNameDefault}-icon ${classNameIconDefaultPrefix}${icon}`;
    if (!children) {
      buttonClasses += ` ${classNameDefault}-icon--icon-only`;
      buttonClasses += ' o3-apply-focus-rings';
    }
  }
  if (additionalClassname) {
    buttonClasses += ` ${additionalClassname}`;
  }

  // Prepare data attributes for brand and theme
  const dataAttrs = {};
  if (brand) {
    dataAttrs['data-o3-brand'] = brand;
  }
  if (theme) {
    dataAttrs['data-o3-theme'] = theme;
  }

  return (
    <button
      id={id}
      ref={ref}
      data-testid={id}
      className={buttonClasses}
      disabled={disabled}
      onClick={onClick}
      title={title}
      aria-selected={selected}
      {...dataAttrs}
    >
      {children}
    </button>
  );
});

Button.displayName = 'Button';
Button.propTypes = {
  id: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string
  ]),
  children: PropTypes.node,
  disabled: PropTypes.bool,
  onClick: PropTypes.func,
  selected: PropTypes.bool,
  className: PropTypes.string,
  primary: PropTypes.bool,
  secondary: PropTypes.bool,
  inverse: PropTypes.bool,
  big: PropTypes.bool,
  mono: PropTypes.bool,
  icon: PropTypes.string,
  title: PropTypes.string,
  brand: PropTypes.string,
  theme: PropTypes.string
};

export default Button;

1	import React, { forwardRef } from 'react';
2	import PropTypes from 'prop-types';
3
4	const classNameDefault = 'o3-button';	3✔
5	const classNameDefaultPrefix = `${classNameDefault}--`;	3✔
6	const classNameIconDefaultPrefix = `${classNameDefault}-icon--`;	3✔
7
8	const Button = forwardRef(({	3✔
9	id,
10	children,
11	disabled,
12	onClick,
13	className: additionalClassname,
14	primary,
15	secondary,
16	inverse,
17	big,
18	mono,
19	icon,
20	title,
21	selected,
22	brand,
23	theme
24	}, ref) => {
25	let buttonClasses = classNameDefault;	79✔
26
27	if (primary) {	79✔
28	buttonClasses += ` ${classNameDefaultPrefix}primary`;	11✔
29	}
30	if (secondary) {	79✔
31	buttonClasses += ` ${classNameDefaultPrefix}secondary`;	9✔
32	}
33	if (inverse) {	79✔
34	buttonClasses += ` ${classNameDefaultPrefix}inverse`;	1✔
35	}
36	if (big) {	79✔
37	buttonClasses += ` ${classNameDefaultPrefix}big`;	11✔
38	}
39	if (mono) {	79✔
40	buttonClasses += ` ${classNameDefaultPrefix}mono`;	11✔
41	}
42	if (icon) {	79✔
43	buttonClasses += ` ${classNameDefault}-icon ${classNameIconDefaultPrefix}${icon}`;	12✔
44	if (!children) {	12✔
45	buttonClasses += ` ${classNameDefault}-icon--icon-only`;	11✔
46	buttonClasses += ' o3-apply-focus-rings';	11✔
47	}
48	}
49	if (additionalClassname) {	79✔
50	buttonClasses += ` ${additionalClassname}`;	11✔
51	}
52
53	// Prepare data attributes for brand and theme
54	const dataAttrs = {};	79✔
55	if (brand) {	79!
NEW 56	dataAttrs['data-o3-brand'] = brand;	×
57	}
58	if (theme) {	79!
NEW 59	dataAttrs['data-o3-theme'] = theme;	×
60	}
61
62	return (	79✔
63	<button
64	id={id}
65	ref={ref}
66	data-testid={id}
67	className={buttonClasses}
68	disabled={disabled}
69	onClick={onClick}
70	title={title}
71	aria-selected={selected}
72	{...dataAttrs}
73	>
74	{children}
75	</button>
76	);
77	});
78
79	Button.displayName = 'Button';	3✔
80	Button.propTypes = {	3✔
81	id: PropTypes.oneOfType([
82	PropTypes.number,
83	PropTypes.string
84	]),
85	children: PropTypes.node,
86	disabled: PropTypes.bool,
87	onClick: PropTypes.func,
88	selected: PropTypes.bool,
89	className: PropTypes.string,
90	primary: PropTypes.bool,
91	secondary: PropTypes.bool,
92	inverse: PropTypes.bool,
93	big: PropTypes.bool,
94	mono: PropTypes.bool,
95	icon: PropTypes.string,
96	title: PropTypes.string,
97	brand: PropTypes.string,
98	theme: PropTypes.string
99	};
100
101	export default Button;

Financial-Times / cm-react-components / 80223841-8c6a-431a-aa6a-22eab4aabe15

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