carbon-react 94.6.0 → 94.6.1

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

@@ -19,8 +19,6 @@ var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/e
 
 var _accordion = require("./accordion.style");
 
-var _button = _interopRequireDefault(require("../button"));
-
 var _validations = _interopRequireDefault(require("../../__internal__/validations"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -71,7 +69,10 @@ const Accordion = /*#__PURE__*/_react.default.forwardRef(({
     setContentHeight(accordionContent.current.scrollHeight);
   }, [isExpanded, children]);
   const toggleAccordion = (0, _react.useCallback)(ev => {
-    if (!isControlled) setIsExpandedInternal(!isExpanded);
+    if (!isControlled) {
+      setIsExpandedInternal(!isExpanded);
+    }
+
     if (onChange) onChange(ev, !isExpanded);
   }, [isControlled, isExpanded, onChange]);
   const handleKeyDown = (0, _react.useCallback)(ev => {
@@ -88,6 +89,9 @@ const Accordion = /*#__PURE__*/_react.default.forwardRef(({
   const headerId = `AccordionHeader_${guid.current}`;
   const contentId = `AccordionContent_${guid.current}`;
   const showValidationIcon = !!(error || warning || info);
+
+  const getTitle = () => isExpanded ? openTitle || title : title;
+
   return /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionContainer, _extends({
     id: accordionId,
     "data-component": "accordion",
@@ -100,39 +104,39 @@ const Accordion = /*#__PURE__*/_react.default.forwardRef(({
     id: headerId,
     "aria-expanded": isExpanded,
     "aria-controls": contentId,
-    onClick: buttonHeading ? undefined : toggleAccordion,
-    onKeyDown: buttonHeading ? undefined : handleKeyDown,
+    onClick: toggleAccordion,
+    onKeyDown: handleKeyDown,
+    tabIndex: 0,
     iconAlign: iconAlign,
     ref: ref,
-    tabIndex: buttonHeading ? "-1" : "0",
     size: size,
     isExpanded: isExpanded,
     buttonHeading: buttonHeading,
-    buttonWidth: buttonWidth
-  }, headerSpacing), buttonHeading && /*#__PURE__*/_react.default.createElement(_button.default, {
-    buttonType: "tertiary",
-    iconType: "chevron_down",
-    iconPosition: "after",
-    onClick: toggleAccordion
-  }, isExpanded ? openTitle || title : title), !buttonHeading && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionHeadingsContainer, {
+    buttonWidth: buttonWidth,
+    hasButtonProps: buttonHeading && headerSpacing
+  }, buttonHeading && {
+    role: "button",
+    p: 0
+  }, headerSpacing), /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionHeadingsContainer, {
     "data-element": "accordion-headings-container",
-    hasValidationIcon: showValidationIcon
-  }, typeof title === "string" ? /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionTitle, {
+    hasValidationIcon: showValidationIcon,
+    buttonHeading: buttonHeading
+  }, !buttonHeading && typeof title === "string" ? /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionTitle, {
     "data-element": "accordion-title",
     size: size
-  }, title) : title, showValidationIcon && /*#__PURE__*/_react.default.createElement(_validations.default, {
+  }, title) : getTitle(), !buttonHeading && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showValidationIcon && /*#__PURE__*/_react.default.createElement(_validations.default, {
     error: error,
     warning: warning,
     info: info,
     tooltipPosition: "top",
     tabIndex: 0,
     ml: 1
-  }), subTitle && size === "large" && /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionSubTitle, null, subTitle)), /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionIcon, {
+  }), subTitle && size === "large" && /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionSubTitle, null, subTitle))), /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionIcon, {
     "data-element": "accordion-icon",
     type: iconType,
     isExpanded: isExpanded,
     iconAlign: iconAlign
-  }))), /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionContentContainer, {
+  })), /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionContentContainer, {
     isExpanded: isExpanded,
     maxHeight: contentHeight
   }, /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionContent, {

package/lib/components/accordion/accordion.style.js

@@ -22,11 +22,11 @@ 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 StyledAccordionGroup = _styledComponents.default.div`
-  ${_styledSystem.margin};
+  ${_styledSystem.margin}
 `;
 exports.StyledAccordionGroup = StyledAccordionGroup;
 const StyledAccordionContainer = _styledComponents.default.div`
-  ${_styledSystem.space};
+  ${_styledSystem.space}
   display: flex;
   align-items: ${({
   buttonHeading
@@ -48,18 +48,18 @@ const StyledAccordionContainer = _styledComponents.default.div`
   theme
 }) => (0, _styledComponents.css)`
       border: 1px solid ${theme.accordion.border};
-    `};
+    `}
   ${({
   borders
 }) => borders === "default" && (0, _styledComponents.css)`
       border-left: none;
       border-right: none;
-    `};
+    `}
   ${({
   borders
 }) => borders === "none" && (0, _styledComponents.css)`
       border: none;
-    `};
+    `}
 
   & + & {
     margin-top: -1px;
@@ -103,28 +103,29 @@ const StyledAccordionIcon = (0, _styledComponents.default)(_icon.default)`
 `;
 exports.StyledAccordionIcon = StyledAccordionIcon;
 const StyledAccordionHeadingsContainer = _styledComponents.default.div`
-  display: grid;
   ${({
+  buttonHeading,
   hasValidationIcon
-}) => hasValidationIcon && (0, _styledComponents.css)`
-      grid-template-columns: min-content auto;
+}) => !buttonHeading && (0, _styledComponents.css)`
+      display: grid;
+      ${hasValidationIcon && (0, _styledComponents.css)`
+        grid-template-columns: min-content auto;
+
+        ${StyledAccordionSubTitle} {
+          grid-column: span 3;
+        }
+      `}
 
-      ${StyledAccordionSubTitle} {
-        grid-column: span 3;
-      }
-    `}
+      ${!hasValidationIcon && (0, _styledComponents.css)`
+        grid-template-rows: auto auto;
+      `}
 
-  ${({
-  hasValidationIcon
-}) => !hasValidationIcon && (0, _styledComponents.css)`
-      grid-template-rows: auto auto;
+    ${_validationIcon.default} {
+        height: 20px;
+        position: relative;
+        top: 2px;
+      }
     `}
-
-  ${_validationIcon.default} {
-    height: 20px;
-    position: relative;
-    top: 2px;
-  }
 `;
 exports.StyledAccordionHeadingsContainer = StyledAccordionHeadingsContainer;
 const StyledAccordionTitleContainer = _styledComponents.default.div`
@@ -132,13 +133,12 @@ const StyledAccordionTitleContainer = _styledComponents.default.div`
   buttonHeading,
   buttonWidth,
   iconAlign,
-  isExpanded,
   size,
-  theme
+  theme,
+  hasButtonProps
 }) => (0, _styledComponents.css)`
     padding: ${size === "small" ? theme.spacing * 2 : theme.spacing * 3}px;
-    ${_styledSystem.space};
-    ${buttonHeading && "padding: 0"}
+    ${_styledSystem.space}
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -152,7 +152,7 @@ const StyledAccordionTitleContainer = _styledComponents.default.div`
     z-index: 1;
 
     &:focus {
-      outline: ${buttonHeading ? "none" : `2px solid ${theme.colors.focus}`};
+      outline: ${buttonHeading ? "3px" : "2px"} solid ${theme.colors.focus};
     }
 
     ${!buttonHeading && (0, _styledComponents.css)`
@@ -161,24 +161,40 @@ const StyledAccordionTitleContainer = _styledComponents.default.div`
       }
     `}
 
-    button {
-      position: relative;
-      ${buttonWidth && (0, _styledComponents.css)`
-        width: ${buttonWidth}px;
+    ${buttonHeading && (0, _styledComponents.css)`
+      box-sizing: border-box;
+      font-weight: 600;
+      text-decoration: none;
+      font-size: ${theme.text.size};
+      min-height: ${theme.spacing * 5}px;
+
+      color: ${theme.colors.primary};
+
+      ${!hasButtonProps && (0, _styledComponents.css)`
+        ${StyledAccordionHeadingsContainer} {
+          margin-left: ${iconAlign === "right" ? "64px" : "32px"};
+        }
       `}
-    }
 
-    button > span:first-child {
-      position: absolute;
-      margin-left: -16px;
-    }
+      ${StyledAccordionIcon} {
+        color: ${theme.colors.primary};
+        ${!hasButtonProps && (0, _styledComponents.css)`
+          position: relative;
+          ${iconAlign}: 16px;
+        `}
+      }
 
-    button > span[data-component="icon"] {
-      position: absolute;
-      right: 16px;
-      transition: transform 0.3s;
-      ${!isExpanded && "transform: rotate(90deg)"};
-    }
+      &:hover {
+        color: ${theme.colors.secondary};
+        ${StyledAccordionIcon} {
+          color: ${theme.colors.secondary};
+        }
+      }
+
+      ${buttonWidth && (0, _styledComponents.css)`
+        width: ${buttonWidth}px;
+      `}
+    `}
   `}
 `;
 exports.StyledAccordionTitleContainer = StyledAccordionTitleContainer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "94.6.0",
+  "version": "94.6.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {