carbon-react 102.0.0 → 102.3.0

package/lib/__internal__/label/icon-wrapper.style.js

@@ -11,8 +11,6 @@ var _validationIcon = _interopRequireDefault(require("../validations/validation-
 
 var _help = _interopRequireDefault(require("../../components/help/help.style"));
 
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const IconWrapperStyle = _styledComponents.default.div`
@@ -27,17 +25,12 @@ const IconWrapperStyle = _styledComponents.default.div`
   vertical-align: top;
 
   :focus {
-    outline: ${({
-  theme
-}) => `2px solid ${theme.colors.focus}`};
+    outline: 2px solid var(--colorsSemanticFocus500);
   }
 
   ${_validationIcon.default}, ${_help.default} {
     position: static;
   }
 `;
-IconWrapperStyle.defaultProps = {
-  theme: _base.default
-};
 var _default = IconWrapperStyle;
 exports.default = _default;

package/lib/__internal__/label/label.style.js

@@ -9,8 +9,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -18,36 +16,30 @@ 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; }
 
 const LabelStyle = _styledComponents.default.label`
-  color: ${({
-  theme
-}) => theme.text.color};
+  color: var(--colorsYin090);
   display: block;
-  font-weight: 600;
+  font-weight: 600; //TODO: (tokens) use token var(--fontWeights500)
 
   ${({
-  isRequired,
-  theme
+  isRequired
 }) => isRequired && (0, _styledComponents.css)`
       ::after {
         content: "*";
-        color: ${theme.colors.asterisk};
+        color: var(--colorsSemanticNegative500);
         font-weight: 700;
-        margin-left: ${theme.spacing}px;
+        margin-left: var(--spacing100);
       }
     `}
 
   ${({
-  disabled,
-  theme
+  disabled
 }) => disabled && (0, _styledComponents.css)`
-      color: ${theme.disabled.disabled};
+      color: var(--colorsYin030);
     `}
 `;
-LabelStyle.defaultProps = {
-  theme: _base.default
-};
 LabelStyle.propTypes = {
-  disabled: _propTypes.default.bool
+  disabled: _propTypes.default.bool,
+  isRequired: _propTypes.default.bool
 };
 const StyledLabelContainer = _styledComponents.default.div`
   display: flex;
@@ -59,16 +51,15 @@ const StyledLabelContainer = _styledComponents.default.div`
   inline,
   pr,
   pl,
-  width,
-  theme
+  width
 }) => inline && (0, _styledComponents.css)`
       box-sizing: border-box;
       margin-bottom: 0;
       ${pr && (0, _styledComponents.css)`
-        padding-right: ${pr * theme.spacing}px;
+        padding-right: var(${pr === 1 ? "--spacing100" : "--spacing200"});
       `};
       ${pl && (0, _styledComponents.css)`
-        padding-left: ${pl * theme.spacing}px;
+        padding-left: var(${pl === 1 ? "--spacing100" : "--spacing200"});
       `};
       justify-content: ${align === "right" ? "flex-end" : "flex-start"};
       width: ${width === 0 ? StyledLabelContainer.defaultProps.width : width}%;
@@ -79,7 +70,7 @@ const StyledLabelContainer = _styledComponents.default.div`
 }) => optional && (0, _styledComponents.css)`
       ::after {
         content: "(optional)";
-        font-weight: 350;
+        font-weight: 350; //TODO: (tokens) use token var(--fontWeights400)
         margin-left: 4px;
       }
     `}
@@ -87,14 +78,12 @@ const StyledLabelContainer = _styledComponents.default.div`
 exports.StyledLabelContainer = StyledLabelContainer;
 StyledLabelContainer.defaultProps = {
   align: "right",
-  theme: _base.default,
   width: 30
 };
 StyledLabelContainer.propTypes = {
   align: _propTypes.default.oneOf(["left", "right"]),
   inline: _propTypes.default.bool,
   width: _propTypes.default.number,
-  readOnly: _propTypes.default.bool,
   pr: _propTypes.default.number,
   pl: _propTypes.default.number
 };

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/lib/components/link/link.style.js

@@ -37,8 +37,8 @@ const StyledLink = _styledComponents.default.span`
         line-height: 36px;
         left: -999em;
         z-index: ${theme.zIndex.aboveAll};
-        box-shadow: inset 0 0 0 2px ${theme.colors.primary};
-        border: 2px solid ${theme.colors.white};
+        box-shadow: inset 0 0 0 2px var(--colorsActionMajor500);
+        border: 2px solid var(--colorsYang100);
       }
 
       a:focus {
@@ -51,38 +51,38 @@ const StyledLink = _styledComponents.default.span`
   button {
       font-size: ${isSkipLink ? "16px" : "14px"};
       text-decoration: underline;
-      color: ${isSkipLink ? theme.text.color : theme.colors.primary};
+      color: ${isSkipLink ? "var(--colorsYin090)" : "var(--colorsActionMajor500)"};
       display: inline-block;
       ${_icon.default} {
         display: inline-block;
         position: relative;
         vertical-align: middle;
         ${iconAlign === "left" && (0, _styledComponents.css)`
-          margin-right: ${hasContent ? "5px" : 0};
+          margin-right: ${hasContent ? "var(--spacing100)" : 0};
         `}
         ${iconAlign === "right" && (0, _styledComponents.css)`
           margin-right: 0;
-          margin-left: ${hasContent ? "5px" : 0};
+          margin-left: ${hasContent ? "var(--spacing100)" : 0};
         `}
       }
 
       &:hover {
         cursor: pointer;
-        color: ${isSkipLink ? theme.text.color : theme.colors.secondary};
+        color: ${isSkipLink ? "var(--colorsYin090)" : "var(--colorsActionMajor600)"};
       }
 
       &:focus {
-        color: ${theme.text.color};
-        background-color: ${isSkipLink ? theme.colors.white : theme.colors.focusedLinkBackground};
+        color: var(--colorsYin090);
+        background-color: ${isSkipLink ? "var(--colorsYang100)" : "var(--colorsSemanticFocus250)"};
         outline: none;
       }
 
       ${disabled && (0, _styledComponents.css)`
-        color: ${theme.disabled.text};
+        color: var(--colorsYin065);
         &:hover,
         &:focus {
           cursor: not-allowed;
-          color: ${theme.disabled.text};
+          color: var(--colorsYin065);
         }
       `}
     }

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

@@ -37,10 +37,9 @@ const RadioButtonStyle = (0, _styledComponents.default)(_checkbox.default)`
   fieldHelpInline,
   reverse,
   size,
-  theme,
   inline
 }) => (0, _styledComponents.css)`
-    margin-bottom: ${theme.space[2]}px;
+    margin-bottom: var(--spacing150);
 
     :last-of-type {
       margin-bottom: 0;
@@ -79,16 +78,16 @@ const RadioButtonStyle = (0, _styledComponents.default)(_checkbox.default)`
     }
 
     ${_hiddenCheckableInput.default}:checked + ${_checkableInputSvgWrapper.default} circle {
-      fill: ${theme.text.color};
+      fill: var(--colorsUtilityYin090);
     }
 
     ${disabled && (0, _styledComponents.css)`
       circle {
-        fill: ${theme.disabled.input};
+        fill: var(--colorsCtilityDisabled400);
       }
 
       ${_hiddenCheckableInput.default}:checked + ${_checkableInputSvgWrapper.default} circle {
-        fill: ${theme.disabled.border};
+        fill: var(--colorsUtilityDisabled600);
       }
     `}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "102.0.0",
+  "version": "102.3.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -17,7 +17,8 @@
     "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",
     "debug": "node --inspect ./node_modules/jest-cli/bin/jest --watch --config=./jest.conf.json",
     "format": "prettier --write './src'",
     "lint": "eslint ./src",
@@ -27,7 +28,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 +60,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 +139,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",