@royaloperahouse/chord 2.8.2-a-development → 2.9.0-a-development

package/CHANGELOG.md

@@ -1,3 +1,6 @@
+## [2.9.0]
+- Add new AnchorBar component
+
 ## [2.8.1]
 - SignUpForm component: Add dropdown on mobile screen
 

package/dist/chord.cjs.development.js

@@ -3018,6 +3018,10 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
     };
   };
 
+  var containerLinkClickHandler = function containerLinkClickHandler(e) {
+    return e.preventDefault();
+  };
+
   return /*#__PURE__*/React__default.createElement(ControlledDropdownWrapper, Object.assign({
     ref: ref
   }, wrapperEvents), isDropdown ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ControlledDropdownHeaderContainer, Object.assign({
@@ -3050,6 +3054,8 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
       href: (_optionItem$optionLin = optionItem.optionLink) != null ? _optionItem$optionLin : '#'
     }, optionItem.option);
   })) : null) : /*#__PURE__*/React__default.createElement(ControlledDropdownHeaderContainerLink, Object.assign({
+    href: "#",
+    onClick: containerLinkClickHandler,
     active: active,
     activeColor: activeColor
   }, headerEvents, {
@@ -11327,7 +11333,7 @@ var Form = /*#__PURE__*/styled__default.form(_templateObject5$x || (_templateObj
 var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n  display: flex;\n  gap: 28px;\n  align-items: center;\n\n  @media ", " {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n"])), devices.mobile);
 var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: left;\n  color: var(--base-color-errorstate);\n"])));
 var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-black);\n  div {\n    text-decoration: underline;\n  }\n"])));
-var ButtonWrapper$3 = /*#__PURE__*/styled__default.button(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  all: unset;\n  width: fit-content;\n\n  @media ", " {\n    width: 100%;\n  }\n  &:focus {\n    outline: 3px solid var(--base-color-lapislazuli);\n  }\n"])), devices.mobile);
+var ButtonWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  all: unset;\n  width: fit-content;\n  color: var(--base-color-white);\n  text-decoration: none;\n\n  @media ", " {\n    width: 100%;\n  }\n"])), devices.mobile);
 var FieldsWrapper = /*#__PURE__*/styled__default.div(_templateObject10$8 || (_templateObject10$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 36px;\n\n  @media ", " {\n    grid-template-columns: 1fr;\n    gap: 20px;\n  }\n"])), devices.mobile);
 var MessageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject11$4 || (_templateObject11$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  div > p {\n    margin: 0;\n  }\n"])));
 var DropdownAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject12$2 || (_templateObject12$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 1 / -1;\n  display: grid;\n  grid-template-columns: var(--grid-template-columns);\n  gap: var(--grid-column-gap);\n  cursor: pointer;\n"])));
@@ -11628,15 +11634,11 @@ var SignUpForm = function SignUpForm(_ref3) {
     href: ctaPrivacy.link
   }, /*#__PURE__*/React__default.createElement(BodyText, {
     level: 1
-  }, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$3, {
-    type: "submit"
-  }, /*#__PURE__*/React__default.createElement(PrimaryButton, {
+  }, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$3, null, /*#__PURE__*/React__default.createElement(PrimaryButton, {
     href: "#",
     onClick: handleAnchorClick,
     bgColor: themeToColor(theme)
-  }, "Sign up"))) : /*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$3, {
-    type: "submit"
-  }, /*#__PURE__*/React__default.createElement(PrimaryButton, {
+  }, "Sign up"))) : /*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$3, null, /*#__PURE__*/React__default.createElement(PrimaryButton, {
     href: "#",
     onClick: handleAnchorClick,
     bgColor: themeToColor(theme)
@@ -11757,14 +11759,12 @@ var SignUpFormComponent = function SignUpFormComponent(_ref5) {
 };
 
 var _templateObject$1l, _templateObject2$_, _templateObject3$Q, _templateObject4$F;
-var AnchorBarContainer = /*#__PURE__*/styled__default.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: sticky;\n  top: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 50px;\n  height: 70px;\n  background: var(--base-color-white);\n  border-top: 2px solid var(--base-color-lightgrey);\n  border-bottom: 2px solid var(--base-color-lightgrey);\n  z-index: ", ";\n\n  @media ", " {\n    padding: 0 20px;\n    height: 60px;\n  }\n"])), zIndexes.anchor, devices.mobile);
-var CTAWrapper = /*#__PURE__*/styled__default.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  margin-top: 4px;\n  padding-bottom: 4px;\n  height: 28px;\n  border-bottom: 1px solid var(--base-color-black);\n\n  @media ", " {\n    height: 24px;\n  }\n"])), devices.mobile);
-var CTALink = /*#__PURE__*/styled__default.a(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration: none;\n  cursor: pointer;\n  color: var(--base-color-black);\n  font-weight: var(--font-weight-navigation);\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  line-height: var(--line-height-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  text-transform: var(--text-transform-navigation);\n"])));
-var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 24px;\n  width: 24px;\n  border: none;\n  padding: 0;\n  background: none;\n\n  :hover {\n    cursor: pointer;\n  }\n"])));
+var AnchorBarContainer = /*#__PURE__*/styled__default.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: sticky;\n  top: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 50px;\n  min-height: 70px;\n  background: var(--base-color-white);\n  border-top: 2px solid var(--base-color-lightgrey);\n  border-bottom: 2px solid var(--base-color-lightgrey);\n  z-index: ", ";\n\n  @media ", " {\n    padding: 0 20px;\n    min-height: 60px;\n  }\n"])), zIndexes.anchor, devices.mobile);
+var CTAWrapper = /*#__PURE__*/styled__default.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  min-height: 28px;\n\n  @media ", " {\n    min-height: 24px;\n  }\n"])), devices.mobile);
+var CTALink = /*#__PURE__*/styled__default.a(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration: underline;\n  text-decoration-color: var(--base-color-black);\n  text-underline-offset: 4px;\n  line-height: 1.6;\n  color: var(--base-color-black);\n  font-weight: var(--font-weight-navigation);\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  text-transform: var(--text-transform-navigation);\n  cursor: pointer;\n"])));
+var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 24px;\n  min-width: 24px;\n  max-height: 24px;\n  max-width: 24px;\n  border: none;\n  padding: 0;\n  background: none;\n\n  :hover {\n    cursor: pointer;\n  }\n"])));
 
 var AnchorBar = function AnchorBar(_ref) {
-  var _cta$href;
-
   var cta = _ref.cta,
       onClickHandler = _ref.onClickHandler,
       onCloseHandler = _ref.onCloseHandler,
@@ -11792,18 +11792,24 @@ var AnchorBar = function AnchorBar(_ref) {
     if (onCloseHandler) onCloseHandler();
   };
 
-  return isRendered ? /*#__PURE__*/React__default.createElement(AnchorBarContainer, {
-    "data-testid": "anchor-bar"
-  }, /*#__PURE__*/React__default.createElement(CTAWrapper, null, /*#__PURE__*/React__default.createElement(CTALink, {
-    href: (_cta$href = cta.href) != null ? _cta$href : '#',
-    onClick: onCtaClickHandler
-  }, cta.text)), /*#__PURE__*/React__default.createElement(CloseButtonWrapper, {
-    href: "#",
-    onClick: onCloseButtonHandler,
-    "aria-label": "Close"
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    iconName: "Close"
-  }))) : null;
+  if (isRendered) {
+    var _cta$href;
+
+    return /*#__PURE__*/React__default.createElement(AnchorBarContainer, {
+      "data-testid": "anchor-bar"
+    }, /*#__PURE__*/React__default.createElement(CTAWrapper, null, /*#__PURE__*/React__default.createElement(CTALink, {
+      href: (_cta$href = cta.href) != null ? _cta$href : '#',
+      onClick: onCtaClickHandler
+    }, cta.text)), /*#__PURE__*/React__default.createElement(CloseButtonWrapper, {
+      href: "#",
+      onClick: onCloseButtonHandler,
+      "aria-label": "Close an anchor bar"
+    }, /*#__PURE__*/React__default.createElement(Icon, {
+      iconName: "Close"
+    })));
+  }
+
+  return null;
 };
 
 var UpsellSection = function UpsellSection(_ref) {