e6c45e26-e510-4d2e-bf5c-879e7fa8b486

Committed 10 Nov 2025 08:50AM UTC coverage: 74.181% (-0.3%) from 74.484%

Build # e6c45e26-e510-4d2e-bf5c-879e7fa8b486

Build Type

push

circleci

Committed by

ManoelMilchev

Commit Message

try to migrate from o-buttons to o3-button

Run Details

310 of 395 branches covered (78.48%)

Branch coverage included in aggregate %.

7 of 9 new or added lines in 2 files covered. (77.78%)

483 of 674 relevant lines covered (71.66%)

8.29 hits per line

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

91.67

/src/components/Buttons/Button.js

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

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

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

Financial-Times / cm-react-components / e6c45e26-e510-4d2e-bf5c-879e7fa8b486

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