@royaloperahouse/harmonic 0.18.0 → 0.18.1

package/CHANGELOG.md

@@ -1,3 +1,6 @@
+## [0.18.1]
+- Accordion/Accordions: Add icon customization
+
 ## [0.18.0]
 - Page Heading: Add PageHeadingHighlightCarousel component
 

package/dist/harmonic.cjs.development.js

@@ -5831,6 +5831,7 @@ var PrintHideWrapper = /*#__PURE__*/styled__default.div(_templateObject7$5 || (_
 
 /* eslint-disable react/no-unstable-nested-components */
 var Accordion = function Accordion(_ref) {
+  var _expandedStateIcon$ic, _collapsedStateIcon$i;
   var _ref$title = _ref.title,
     title = _ref$title === void 0 ? '' : _ref$title,
     _ref$showLine = _ref.showLine,
@@ -5838,16 +5839,26 @@ var Accordion = function Accordion(_ref) {
     children = _ref.children,
     _ref$initOpen = _ref.initOpen,
     initOpen = _ref$initOpen === void 0 ? false : _ref$initOpen,
-    className = _ref.className;
+    className = _ref.className,
+    expandedStateIcon = _ref.expandedStateIcon,
+    collapsedStateIcon = _ref.collapsedStateIcon;
   var _useState = React.useState(initOpen),
     openAccordion = _useState[0],
     setOpenAccordion = _useState[1];
   var _useState2 = React.useState('0px'),
     textHeight = _useState2[0],
     setTextHeight = _useState2[1];
-  var _useState3 = React.useState(initOpen ? 'Detract' : 'Expand'),
-    iconName = _useState3[0],
-    setIconName = _useState3[1];
+  var expandedStateIconData = {
+    iconName: (_expandedStateIcon$ic = expandedStateIcon == null ? void 0 : expandedStateIcon.iconName) != null ? _expandedStateIcon$ic : 'Detract',
+    direction: expandedStateIcon == null ? void 0 : expandedStateIcon.direction
+  };
+  var collapsedStateIconData = {
+    iconName: (_collapsedStateIcon$i = collapsedStateIcon == null ? void 0 : collapsedStateIcon.iconName) != null ? _collapsedStateIcon$i : 'Expand',
+    direction: collapsedStateIcon == null ? void 0 : collapsedStateIcon.direction
+  };
+  var _useState3 = React.useState(initOpen ? expandedStateIconData : collapsedStateIconData),
+    icon = _useState3[0],
+    setIcon = _useState3[1];
   // Contents children visibility is set to prevent it from being keyboard tabbable when the accordion is closed
   var _useState4 = React.useState(initOpen),
     childrenVisibility = _useState4[0],
@@ -5862,7 +5873,7 @@ var Accordion = function Accordion(_ref) {
     if (!children) return;
     setOpenAccordion(!openAccordion);
     setTextHeight(openAccordion ? '0px' : content.current.scrollHeight + "px");
-    setIconName(openAccordion ? 'Expand' : 'Detract');
+    setIcon(openAccordion ? collapsedStateIconData : expandedStateIconData);
     setChildrenVisibility(!openAccordion);
   };
   var keyDown = function keyDown(e) {
@@ -5884,9 +5895,7 @@ var Accordion = function Accordion(_ref) {
     "aria-expanded": openAccordion,
     "aria-controls": contentContainerId,
     hasChildren: !!children
-  }, /*#__PURE__*/React__default.createElement(TitleText, null, title), children && (/*#__PURE__*/React__default.createElement(PrintHideWrapper, null, /*#__PURE__*/React__default.createElement(Icon, {
-    iconName: iconName
-  })))), /*#__PURE__*/React__default.createElement(ContentContainer, {
+  }, /*#__PURE__*/React__default.createElement(TitleText, null, title), children && (/*#__PURE__*/React__default.createElement(PrintHideWrapper, null, /*#__PURE__*/React__default.createElement(Icon, Object.assign({}, icon))))), /*#__PURE__*/React__default.createElement(ContentContainer, {
     "data-testid": "richcontainer",
     ref: content,
     textHeight: textHeight,
@@ -5915,7 +5924,9 @@ var Accordions = function Accordions(_ref) {
     return /*#__PURE__*/React__default.createElement(Accordion, {
       key: accordion.title + "-" + index,
       title: accordion.title,
-      showLine: isLastAccordion(index)
+      showLine: isLastAccordion(index),
+      expandedStateIcon: accordion.expandedStateIcon,
+      collapsedStateIcon: accordion.collapsedStateIcon
     }, accordion.children);
   }));
 };