carbon-react 102.0.0 → 102.0.1

package/lib/components/button-toggle/button-toggle-input.component.js

@@ -19,6 +19,8 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 const ButtonToggleInput = /*#__PURE__*/_react.default.forwardRef((props, forwardRef) => {
   const {
     onFocus,
@@ -41,18 +43,13 @@ const ButtonToggleInput = /*#__PURE__*/_react.default.forwardRef((props, forward
     if (onFocus) onFocus(ev);
   };
 
-  return /*#__PURE__*/_react.default.createElement(_buttonToggle.StyledButtonToggleInput, {
+  return /*#__PURE__*/_react.default.createElement(_buttonToggle.StyledButtonToggleInput, _extends({}, props, {
     type: "radio",
-    name: props.name,
     id: props.guid,
-    disabled: props.disabled,
-    checked: props.checked,
-    onChange: props.onChange,
     onBlur: handleBlur,
     onFocus: handleFocus,
-    value: props.value,
     ref: forwardRef
-  });
+  }));
 });
 
 ButtonToggleInput.propTypes = {

package/lib/components/button-toggle/button-toggle.component.js

@@ -27,10 +27,15 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 const ButtonToggle = props => {
   const {
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
     buttonIcon,
     buttonIconSize,
     checked,
     children,
+    "data-component": dataComponent,
+    "data-element": dataElement,
+    "data-role": dataRole,
     disabled,
     grouped,
     name,
@@ -50,8 +55,10 @@ const ButtonToggle = props => {
 
   if (buttonIcon) {
     icon = /*#__PURE__*/_react.default.createElement(_buttonToggleIcon.default, {
+      "aria-hidden": true,
       buttonIcon: buttonIcon,
       buttonIconSize: buttonIconSize,
+      hasNoContent: !children,
       disabled: disabled
     });
   }
@@ -61,10 +68,15 @@ const ButtonToggle = props => {
   }
 
   return /*#__PURE__*/_react.default.createElement(_buttonToggle.StyledButtonToggle, {
-    "data-component": "button-toggle",
+    "data-component": dataComponent || "button-toggle",
+    "data-element": dataElement,
+    "data-role": dataRole,
     grouped: grouped,
     onClick: handleClick
   }, /*#__PURE__*/_react.default.createElement(_buttonToggleInput.default, {
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "data-element": "button-toggle-input",
     name: name,
     checked: checked,
     disabled: disabled,
@@ -86,9 +98,24 @@ const ButtonToggle = props => {
 };
 
 ButtonToggle.propTypes = {
+  /** Prop to specify the aria-label of the component */
+  "aria-label": _propTypes.default.string,
+
+  /** Prop to specify the aria-labelledby property of the component */
+  "aria-labelledby": _propTypes.default.string,
+
   /** Set the checked value of the radio button */
   checked: _propTypes.default.bool,
 
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-component": _propTypes.default.string,
+
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-element": _propTypes.default.string,
+
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-role": _propTypes.default.string,
+
   /** Name used on the hidden radio button. */
   name: _propTypes.default.string,
 

package/lib/components/button-toggle/button-toggle.d.ts

@@ -2,10 +2,20 @@ import * as React from "react";
 import { ButtonToggleIconSizes } from "./button-toggle-types";
 
 export interface ButtonToggleProps {
+  /** Prop to specify the aria-label of the component */
+  "aria-label"?: string;
+  /** Prop to specify the aria-labelledby property of the component */
+  "aria-labelledby"?: string;
   /** buttonIcon to render. */
   buttonIcon?: string;
   /** Sets the size of the buttonIcon (eg. large) */
   buttonIconSize?: ButtonToggleIconSizes;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-component"?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-element"?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-role"?: string;
   /** ButtonToggle size */
   size?: "small" | "medium" | "large";
   /** Set the checked value of the radio button */

package/lib/components/button-toggle/button-toggle.style.js

@@ -134,8 +134,11 @@ const iconFontSizes = {
   largeIcon: 32
 };
 const StyledButtonToggleIcon = _styledComponents.default.div`
-  margin-right: 8px;
-
+  ${({
+  hasNoContent
+}) => hasNoContent ? "" : (0, _styledComponents.css)`
+          margin-right: 8px;
+        `}
   ${({
   buttonIconSize
 }) => buttonIconSize === "large" && (0, _styledComponents.css)`

package/lib/components/button-toggle-group/button-toggle-group.component.js

@@ -80,7 +80,7 @@ const ButtonToggleGroup = ({
     "data-element": dataElement
   }, validationProps, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement(_buttonToggleGroup.default, _extends({
     "aria-label": label,
-    role: "group",
+    role: "radiogroup",
     inputWidth: inputWidth
   }, validationProps), /*#__PURE__*/_react.default.createElement(_radioButtonMapper.default, {
     name: name,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "102.0.0",
+  "version": "102.0.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -17,7 +17,9 @@
     "start:debug-theme": "cross-env STORYBOOK_DEBUG_THEME=true npm run start",
     "test": "jest --config=./jest.conf.json",
     "test-update": "jest --config=./jest.conf.json --updateSnapshot",
-    "test-cypress": "cypress open",
+    "test:cypress": "cypress open",
+    "cypress:react": "npx cypress open-ct",
+    "cypress:ci:react": "npx cypress run-ct --spec './src/components/**/*.test.js' --record --key --parallel --group 'ubuntu-cypress-react' --browser=chrome",
     "debug": "node --inspect ./node_modules/jest-cli/bin/jest --watch --config=./jest.conf.json",
     "format": "prettier --write './src'",
     "lint": "eslint ./src",
@@ -27,7 +29,7 @@
     "watch": "npm run clean-lib && npm run copy-files -- --watch & npm run babel -- --watch",
     "build-storybook": "build-storybook -c .storybook -s .assets",
     "start:static": "npx http-server -p 9001 ./storybook-static",
-    "babel": "cross-env NODE_ENV=production babel ./src --config-file ./babel.config.js --out-dir ./lib --ignore '**/*/__spec__.js','**/*.spec.js','**/__definition__.js' --quiet",
+    "babel": "cross-env NODE_ENV=production babel ./src --config-file ./babel.config.js --out-dir ./lib --ignore '**/*/__spec__.js','**/*.spec.js','**/__definition__.js','**/*.test.js' --quiet",
     "clean-lib": "rimraf ./lib",
     "copy-files": "cpy \"**/\" \"!**/(*.js|*.md|*.mdx|*.stories.*|*.snap)\" ../lib/ --cwd=src --parents",
     "commit": "git-cz",
@@ -59,6 +61,8 @@
     "@babel/preset-typescript": "7.12.7",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
+    "@cypress/react": "^5.9.2",
+    "@cypress/webpack-dev-server": "^1.4.0",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/exec": "^6.0.2",
     "@semantic-release/git": "^10.0.1",
@@ -136,7 +140,8 @@
     "semver": "^7.3.5",
     "sprintf-js": "^1.1.2",
     "styled-components": "^4.4.1",
-    "typescript": "^3.9.5"
+    "typescript": "^3.9.5",
+    "webpack-dev-server": "^3.11.2"
   },
   "dependencies": {
     "@octokit/rest": "^18.12.0",