carbon-react 142.11.6 → 142.11.7

package/esm/__internal__/checkable-input/checkable-input.component.js

@@ -106,7 +106,9 @@ const CheckableInput = /*#__PURE__*/React.forwardRef(({
     reverse: reverse
   }, /*#__PURE__*/React.createElement(InputBehaviour, null, /*#__PURE__*/React.createElement(FormField, _extends({}, formFieldProps, {
     my: 0
-  }), /*#__PURE__*/React.createElement(StyledCheckableInput, null, /*#__PURE__*/React.createElement(HiddenCheckableInput, inputProps), children))));
+  }), /*#__PURE__*/React.createElement(StyledCheckableInput, {
+    "data-role": "checkable-input"
+  }, /*#__PURE__*/React.createElement(HiddenCheckableInput, inputProps), children))));
 });
 if (process.env.NODE_ENV !== "production") {
   CheckableInput.propTypes = {

package/esm/__internal__/utils/helpers/tags/tags-specs/index.d.ts

@@ -1 +1 @@
-export { elementsTagTest, rootTagTest } from "./tags-specs";
+export { default } from "./tags-specs";

package/esm/__internal__/utils/helpers/tags/tags-specs/index.js

@@ -1 +1 @@
-export { elementsTagTest, rootTagTest } from "./tags-specs";
+export { default } from "./tags-specs";

package/esm/__internal__/utils/helpers/tags/tags-specs/tags-specs.d.ts

@@ -1,3 +1,3 @@
 import { ReactWrapper, ShallowWrapper } from "enzyme";
-export declare const elementsTagTest: (wrapper: ReactWrapper | ShallowWrapper, elements: string[]) => void;
-export declare const rootTagTest: (rootNode: ReactWrapper | ShallowWrapper, comp: string, elem?: string, role?: string) => void;
+declare const rootTagTest: (rootNode: ReactWrapper | ShallowWrapper, comp: string, elem?: string, role?: string) => void;
+export default rootTagTest;

package/esm/__internal__/utils/helpers/tags/tags-specs/tags-specs.js

@@ -1,14 +1,6 @@
-export const elementsTagTest = (wrapper, elements) => {
-  elements.forEach(element => {
-    it(`include 'data-element="${element}"'`, () => {
-      expect(wrapper.find({
-        "data-element": element
-      }).length).toEqual(1);
-    });
-  });
-};
-export const rootTagTest = (rootNode, comp, elem, role) => {
+const rootTagTest = (rootNode, comp, elem, role) => {
   expect(rootNode.prop("data-component")).toEqual(comp);
   expect(rootNode.prop("data-element")).toEqual(elem);
   expect(rootNode.prop("data-role")).toEqual(role);
-};
+};
+export default rootTagTest;

package/esm/__internal__/validation-message/validation-message.component.js

@@ -10,7 +10,8 @@ const ValidationMessage = ({
   const isStringValidation = typeof validation === "string";
   return isStringValidation ? /*#__PURE__*/React.createElement(StyledValidationMessage, {
     id: validationId,
-    isWarning: !!(!error && warning)
+    isWarning: !!(!error && warning),
+    "data-role": "validation-message"
   }, validation) : null;
 };
 export default ValidationMessage;

package/esm/components/accordion/accordion.component.js

@@ -79,6 +79,7 @@ const Accordion = /*#__PURE__*/React.forwardRef(({
   return /*#__PURE__*/React.createElement(StyledAccordionContainer, _extends({
     id: accordionId,
     "data-component": "accordion",
+    "data-role": "accordion-container",
     width: width,
     borders: variant === "subtle" ? "none" : borders,
     scheme: scheme,
@@ -125,10 +126,12 @@ const Accordion = /*#__PURE__*/React.forwardRef(({
     iconAlign: iconAlign || (variant === "standard" ? "right" : "left")
   })), /*#__PURE__*/React.createElement(StyledAccordionContentContainer, {
     isExpanded: isExpanded,
-    maxHeight: contentHeight
+    maxHeight: contentHeight,
+    "data-role": "accordion-content-container"
   }, /*#__PURE__*/React.createElement(StyledAccordionContent, {
     role: "region",
     "data-element": "accordion-content",
+    "data-role": "accordion-content",
     id: contentId,
     "aria-labelledby": headerId,
     ref: accordionContent,

package/esm/components/content/content.component.js

@@ -21,12 +21,14 @@ export const Content = ({
     variant: variant,
     inline: inline,
     "data-element": "content-title",
+    "data-role": "content-title",
     titleWidth: titleWidth,
     align: align
   }, title), /*#__PURE__*/React.createElement(StyledContentBody, {
     variant: variant,
     inline: inline,
     "data-element": "content-body",
+    "data-role": "content-body",
     bodyFullWidth: bodyFullWidth,
     titleWidth: titleWidth,
     align: align

package/esm/components/detail/detail.component.js

@@ -20,6 +20,7 @@ export const Detail = ({
   hasIcon: !!icon
 }, children), footnote && /*#__PURE__*/React.createElement(StyledDetailFootnote, {
   "data-element": "footnote",
+  "data-role": "footnote",
   hasIcon: !!icon
 }, footnote));
 Detail.displayName = "Detail";

package/esm/components/switch/__internal__/switch-slider.component.js

@@ -44,12 +44,15 @@ const SwitchSlider = ({
     isActive: checked,
     size
   };
-  const sliderContent = /*#__PURE__*/React.createElement(SwitchSliderPanel, sliderPanelStyleProps, loading ? /*#__PURE__*/React.createElement(Loader, loaderProps) : panelContent);
+  const sliderContent = /*#__PURE__*/React.createElement(SwitchSliderPanel, _extends({
+    "data-role": "slider-panel"
+  }, sliderPanelStyleProps), loading ? /*#__PURE__*/React.createElement(Loader, loaderProps) : panelContent);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HiddenContent, {
     size: size,
     "aria-hidden": true
   }, longestText), /*#__PURE__*/React.createElement(StyledSwitchSlider, _extends({
-    "data-component": "slider"
+    "data-component": "slider",
+    "data-role": "slider"
   }, switchSliderStyleProps), sliderContent, useValidationIcon && /*#__PURE__*/React.createElement(ValidationIcon, {
     error: error,
     warning: warning,

package/esm/components/switch/switch.component.js

@@ -58,6 +58,8 @@ const Switch = /*#__PURE__*/React.forwardRef(({
   }, [setCheckedInternal, onChange]);
   const largeScreen = useIsAboveBreakpoint(adaptiveLabelBreakpoint);
   let shouldLabelBeInline = labelInline;
+  // Coverage has been ignored here as this functionality is covered in a Playwright test.
+  /* istanbul ignore next */
   if (adaptiveLabelBreakpoint) {
     shouldLabelBeInline = largeScreen;
   }
@@ -152,13 +154,17 @@ const Switch = /*#__PURE__*/React.forwardRef(({
   };
   const applyValidation = error || warning;
   return /*#__PURE__*/React.createElement(React.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/React.createElement(StyledSwitch, switchStylePropsForNewValidation, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(Box, {
+    "data-role": "hint-text-wrapper",
     mb: labelHelp ? 0 : 1
-  }, label, labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp)), /*#__PURE__*/React.createElement(Box, {
+  }, label, labelHelp && /*#__PURE__*/React.createElement(StyledHintText, {
+    "data-role": "hint-text"
+  }, labelHelp)), /*#__PURE__*/React.createElement(Box, {
     position: "relative"
   }, /*#__PURE__*/React.createElement(ValidationMessage, {
     error: error,
     warning: warning
   }), applyValidation && /*#__PURE__*/React.createElement(ErrorBorder, {
+    "data-role": "error-border",
     warning: !!(!error && warning)
   }), /*#__PURE__*/React.createElement(CheckableInput, inputPropsForNewValidation, /*#__PURE__*/React.createElement(SwitchSlider, switchSliderPropsForNewValidation))))) : /*#__PURE__*/React.createElement(TooltipProvider, {
     helpAriaLabel: helpAriaLabel,

package/esm/locales/fr-fr.js

@@ -87,13 +87,13 @@ const frFR = {
     skipLinkLabel: () => "Passer au contenu principal"
   },
   loader: {
-    loading: () => "Téléhargement"
+    loading: () => "Chargement en cours"
   },
   loaderSpinner: {
-    loading: () => "Téléhargement..."
+    loading: () => "Chargement en cours..."
   },
   loaderStar: {
-    loading: () => "Téléhargement..."
+    loading: () => "Chargement en cours..."
   },
   menuFullscreen: {
     ariaLabels: {

package/lib/__internal__/checkable-input/checkable-input.component.js

@@ -115,7 +115,9 @@ const CheckableInput = /*#__PURE__*/_react.default.forwardRef(({
     reverse: reverse
   }, /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputBehaviour, null, /*#__PURE__*/_react.default.createElement(_formField.default, _extends({}, formFieldProps, {
     my: 0
-  }), /*#__PURE__*/_react.default.createElement(_checkableInput.StyledCheckableInput, null, /*#__PURE__*/_react.default.createElement(_hiddenCheckableInput.default, inputProps), children))));
+  }), /*#__PURE__*/_react.default.createElement(_checkableInput.StyledCheckableInput, {
+    "data-role": "checkable-input"
+  }, /*#__PURE__*/_react.default.createElement(_hiddenCheckableInput.default, inputProps), children))));
 });
 if (process.env.NODE_ENV !== "production") {
   CheckableInput.propTypes = {

package/lib/__internal__/utils/helpers/tags/tags-specs/index.d.ts

@@ -1 +1 @@
-export { elementsTagTest, rootTagTest } from "./tags-specs";
+export { default } from "./tags-specs";

package/lib/__internal__/utils/helpers/tags/tags-specs/index.js

@@ -3,16 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "elementsTagTest", {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _tagsSpecs.elementsTagTest;
+    return _tagsSpecs.default;
   }
 });
-Object.defineProperty(exports, "rootTagTest", {
-  enumerable: true,
-  get: function () {
-    return _tagsSpecs.rootTagTest;
-  }
-});
-var _tagsSpecs = require("./tags-specs");
+var _tagsSpecs = _interopRequireDefault(require("./tags-specs"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/__internal__/utils/helpers/tags/tags-specs/tags-specs.d.ts

@@ -1,3 +1,3 @@
 import { ReactWrapper, ShallowWrapper } from "enzyme";
-export declare const elementsTagTest: (wrapper: ReactWrapper | ShallowWrapper, elements: string[]) => void;
-export declare const rootTagTest: (rootNode: ReactWrapper | ShallowWrapper, comp: string, elem?: string, role?: string) => void;
+declare const rootTagTest: (rootNode: ReactWrapper | ShallowWrapper, comp: string, elem?: string, role?: string) => void;
+export default rootTagTest;

package/lib/__internal__/utils/helpers/tags/tags-specs/tags-specs.js

@@ -3,20 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.rootTagTest = exports.elementsTagTest = void 0;
-const elementsTagTest = (wrapper, elements) => {
-  elements.forEach(element => {
-    it(`include 'data-element="${element}"'`, () => {
-      expect(wrapper.find({
-        "data-element": element
-      }).length).toEqual(1);
-    });
-  });
-};
-exports.elementsTagTest = elementsTagTest;
+exports.default = void 0;
 const rootTagTest = (rootNode, comp, elem, role) => {
   expect(rootNode.prop("data-component")).toEqual(comp);
   expect(rootNode.prop("data-element")).toEqual(elem);
   expect(rootNode.prop("data-role")).toEqual(role);
 };
-exports.rootTagTest = rootTagTest;
+var _default = exports.default = rootTagTest;

package/lib/__internal__/validation-message/validation-message.component.js

@@ -17,7 +17,8 @@ const ValidationMessage = ({
   const isStringValidation = typeof validation === "string";
   return isStringValidation ? /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
     id: validationId,
-    isWarning: !!(!error && warning)
+    isWarning: !!(!error && warning),
+    "data-role": "validation-message"
   }, validation) : null;
 };
 var _default = exports.default = ValidationMessage;

package/lib/components/accordion/accordion.component.js

@@ -88,6 +88,7 @@ const Accordion = exports.Accordion = /*#__PURE__*/_react.default.forwardRef(({
   return /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionContainer, _extends({
     id: accordionId,
     "data-component": "accordion",
+    "data-role": "accordion-container",
     width: width,
     borders: variant === "subtle" ? "none" : borders,
     scheme: scheme,
@@ -134,10 +135,12 @@ const Accordion = exports.Accordion = /*#__PURE__*/_react.default.forwardRef(({
     iconAlign: iconAlign || (variant === "standard" ? "right" : "left")
   })), /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionContentContainer, {
     isExpanded: isExpanded,
-    maxHeight: contentHeight
+    maxHeight: contentHeight,
+    "data-role": "accordion-content-container"
   }, /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionContent, {
     role: "region",
     "data-element": "accordion-content",
+    "data-role": "accordion-content",
     id: contentId,
     "aria-labelledby": headerId,
     ref: accordionContent,

package/lib/components/content/content.component.js

@@ -28,12 +28,14 @@ const Content = ({
     variant: variant,
     inline: inline,
     "data-element": "content-title",
+    "data-role": "content-title",
     titleWidth: titleWidth,
     align: align
   }, title), /*#__PURE__*/_react.default.createElement(_content.StyledContentBody, {
     variant: variant,
     inline: inline,
     "data-element": "content-body",
+    "data-role": "content-body",
     bodyFullWidth: bodyFullWidth,
     titleWidth: titleWidth,
     align: align

package/lib/components/detail/detail.component.js

@@ -27,6 +27,7 @@ const Detail = ({
   hasIcon: !!icon
 }, children), footnote && /*#__PURE__*/_react.default.createElement(_detail.StyledDetailFootnote, {
   "data-element": "footnote",
+  "data-role": "footnote",
   hasIcon: !!icon
 }, footnote));
 exports.Detail = Detail;

package/lib/components/switch/__internal__/switch-slider.component.js

@@ -51,12 +51,15 @@ const SwitchSlider = ({
     isActive: checked,
     size
   };
-  const sliderContent = /*#__PURE__*/_react.default.createElement(_switchSliderPanel.default, sliderPanelStyleProps, loading ? /*#__PURE__*/_react.default.createElement(_loader.default, loaderProps) : panelContent);
+  const sliderContent = /*#__PURE__*/_react.default.createElement(_switchSliderPanel.default, _extends({
+    "data-role": "slider-panel"
+  }, sliderPanelStyleProps), loading ? /*#__PURE__*/_react.default.createElement(_loader.default, loaderProps) : panelContent);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_switchSlider.HiddenContent, {
     size: size,
     "aria-hidden": true
   }, longestText), /*#__PURE__*/_react.default.createElement(_switchSlider.StyledSwitchSlider, _extends({
-    "data-component": "slider"
+    "data-component": "slider",
+    "data-role": "slider"
   }, switchSliderStyleProps), sliderContent, useValidationIcon && /*#__PURE__*/_react.default.createElement(_validationIcon.default, {
     error: error,
     warning: warning,

package/lib/components/switch/switch.component.js

@@ -67,6 +67,8 @@ const Switch = exports.Switch = /*#__PURE__*/_react.default.forwardRef(({
   }, [setCheckedInternal, onChange]);
   const largeScreen = (0, _useIsAboveBreakpoint.default)(adaptiveLabelBreakpoint);
   let shouldLabelBeInline = labelInline;
+  // Coverage has been ignored here as this functionality is covered in a Playwright test.
+  /* istanbul ignore next */
   if (adaptiveLabelBreakpoint) {
     shouldLabelBeInline = largeScreen;
   }
@@ -161,13 +163,17 @@ const Switch = exports.Switch = /*#__PURE__*/_react.default.forwardRef(({
   };
   const applyValidation = error || warning;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_switch.default, switchStylePropsForNewValidation, /*#__PURE__*/_react.default.createElement(_label.default, null, /*#__PURE__*/_react.default.createElement(_box.default, {
+    "data-role": "hint-text-wrapper",
     mb: labelHelp ? 0 : 1
-  }, label, labelHelp && /*#__PURE__*/_react.default.createElement(_switch.StyledHintText, null, labelHelp)), /*#__PURE__*/_react.default.createElement(_box.default, {
+  }, label, labelHelp && /*#__PURE__*/_react.default.createElement(_switch.StyledHintText, {
+    "data-role": "hint-text"
+  }, labelHelp)), /*#__PURE__*/_react.default.createElement(_box.default, {
     position: "relative"
   }, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
     error: error,
     warning: warning
   }), applyValidation && /*#__PURE__*/_react.default.createElement(_switch.ErrorBorder, {
+    "data-role": "error-border",
     warning: !!(!error && warning)
   }), /*#__PURE__*/_react.default.createElement(_checkableInput.default, inputPropsForNewValidation, /*#__PURE__*/_react.default.createElement(_switchSlider.default, switchSliderPropsForNewValidation))))) : /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
     helpAriaLabel: helpAriaLabel,

package/lib/locales/fr-fr.js

@@ -94,13 +94,13 @@ const frFR = {
     skipLinkLabel: () => "Passer au contenu principal"
   },
   loader: {
-    loading: () => "Téléhargement"
+    loading: () => "Chargement en cours"
   },
   loaderSpinner: {
-    loading: () => "Téléhargement..."
+    loading: () => "Chargement en cours..."
   },
   loaderStar: {
-    loading: () => "Téléhargement..."
+    loading: () => "Chargement en cours..."
   },
   menuFullscreen: {
     ariaLabels: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "142.11.6",
+  "version": "142.11.7",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",