@royaloperahouse/chord 0.7.3 → 0.7.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # CHANGELOG
 
+## [0.7.7]
+- Tabs: close dropdown when it is clicked twice
+
+## [0.7.6]
+- Add new initOpen prop to Accordion component
+
+## [0.7.5]
+- Fix Styling in PeopleListing on Desktop
+
+## [0.7.4]
+- Fix git README
+
 ## [0.7.3]
 - Fix Styling in PeopleListing on Mobile
 

package/dist/chord.cjs.development.js

@@ -3583,8 +3583,10 @@ var Tabs = function Tabs(_ref) {
   };
 
   var onDropdownClick = function onDropdownClick(i, link) {
-    var nextActive = i === activeDropdown ? -1 : i;
+    var isActiveDropdownClicked = i === activeDropdown;
+    var nextActive = isActiveDropdownClicked ? -1 : i;
     setActiveDropdown(nextActive);
+    if (isActiveDropdownClicked) setHoverOverDropdown(-1);
     if (onChange && link) onChange(link);
   };
 
@@ -4596,9 +4598,11 @@ var Accordion = function Accordion(_ref) {
       title = _ref$title === void 0 ? '' : _ref$title,
       _ref$showLine = _ref.showLine,
       showLine = _ref$showLine === void 0 ? true : _ref$showLine,
-      children = _ref.children;
+      children = _ref.children,
+      _ref$initOpen = _ref.initOpen,
+      initOpen = _ref$initOpen === void 0 ? false : _ref$initOpen;
 
-  var _useState = React.useState(false),
+  var _useState = React.useState(initOpen),
       openAccordion = _useState[0],
       setOpenAccordion = _useState[1];
 
@@ -4606,11 +4610,16 @@ var Accordion = function Accordion(_ref) {
       textHeight = _useState2[0],
       setTextHeight = _useState2[1];
 
-  var _useState3 = React.useState('Expand'),
+  var _useState3 = React.useState(initOpen ? 'Detract' : 'Expand'),
       iconName = _useState3[0],
       setIconName = _useState3[1];
 
   var content = React.useRef(null);
+  React.useEffect(function () {
+    if (content != null && content.current && initOpen) {
+      setTextHeight(content.current.scrollHeight + "px");
+    }
+  }, [content, initOpen]);
 
   var toggleAccordion = function toggleAccordion() {
     setOpenAccordion(!openAccordion);
@@ -5066,7 +5075,7 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
 };
 
 var _templateObject$J, _templateObject2$s, _templateObject3$l;
-var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n  @media ", " {\n    p {\n      margin: 0;\n    }\n  }\n"])), devices.mobile);
+var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n  p {\n    margin: 0;\n  }\n"])));
 var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n"])));
 var PersonLink = /*#__PURE__*/styled__default.a(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-black);\n\n  :hover {\n    color: var(--base-color-primary);\n    :after {\n      color: var(--base-color-black);\n    }\n  }\n\n  :visited {\n    color: var(--base-color-black);\n  }\n"])));