@royaloperahouse/chord 2.8.1-a-development → 2.8.1-b-development

package/dist/chord.esm.js

@@ -3023,6 +3023,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({
@@ -3055,6 +3059,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, {
@@ -11332,7 +11338,7 @@ var Form = /*#__PURE__*/styled.form(_templateObject5$x || (_templateObject5$x =
 var FormFooterWrapper = /*#__PURE__*/styled.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.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: left;\n  color: var(--base-color-errorstate);\n"])));
 var CTALinkWrapper = /*#__PURE__*/styled.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.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.button(_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  &:focus {\n    outline: 3px solid var(--base-color-lapislazuli);\n  }\n"])), devices.mobile);
 var FieldsWrapper = /*#__PURE__*/styled.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.div(_templateObject11$4 || (_templateObject11$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  div > p {\n    margin: 0;\n  }\n"])));
 var DropdownAreaWrapper = /*#__PURE__*/styled.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"])));
@@ -11453,6 +11459,7 @@ var SignUpForm = function SignUpForm(_ref3) {
       isLoggedIn = _ref3$isLoggedIn === void 0 ? false : _ref3$isLoggedIn,
       _ref3$isMobile = _ref3.isMobile,
       isMobile = _ref3$isMobile === void 0 ? false : _ref3$isMobile;
+  var formRef = useRef(null);
 
   var _useState = useState({}),
       errors = _useState[0],
@@ -11564,6 +11571,13 @@ var SignUpForm = function SignUpForm(_ref3) {
     };
   }();
 
+  var handleAnchorClick = function handleAnchorClick(e) {
+    var _formRef$current;
+
+    e.preventDefault();
+    (_formRef$current = formRef.current) == null ? void 0 : _formRef$current.requestSubmit();
+  };
+
   return /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: 3,
     columnSpanDesktop: 12,
@@ -11571,6 +11585,7 @@ var SignUpForm = function SignUpForm(_ref3) {
     columnSpanDevice: 12
   }, /*#__PURE__*/React__default.createElement(Form, {
     noValidate: true,
+    ref: formRef,
     onSubmit: handleFormSubmit
   }, !isLoggedIn && /*#__PURE__*/React__default.createElement(FieldsWrapper, null, /*#__PURE__*/React__default.createElement(TextField, {
     label: "First name",
@@ -11628,11 +11643,13 @@ var SignUpForm = function SignUpForm(_ref3) {
     type: "submit"
   }, /*#__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, {
     href: "#",
+    onClick: handleAnchorClick,
     bgColor: themeToColor(theme)
   }, "Sign up")), /*#__PURE__*/React__default.createElement(CTALinkWrapper, {
     href: ctaPrivacy.link
@@ -11751,10 +11768,10 @@ var SignUpFormComponent = function SignUpFormComponent(_ref5) {
 };
 
 var _templateObject$1l, _templateObject2$_, _templateObject3$Q, _templateObject4$F;
-var AnchorBarContainer = /*#__PURE__*/styled.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.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.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.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.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.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.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.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;
@@ -11782,6 +11799,8 @@ var AnchorBar = function AnchorBar(_ref) {
 
   var onCloseButtonHandler = function onCloseButtonHandler(e) {
     e.preventDefault();
+    e.currentTarget.blur(); // remove focus to prevent the screen reader from reading the scrollbar
+
     setIsRendered(false);
     if (onCloseHandler) onCloseHandler();
   };
@@ -11794,7 +11813,7 @@ var AnchorBar = function AnchorBar(_ref) {
   }, cta.text)), /*#__PURE__*/React__default.createElement(CloseButtonWrapper, {
     href: "#",
     onClick: onCloseButtonHandler,
-    "aria-label": "Close"
+    "aria-label": "Close an anchor bar"
   }, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "Close"
   }))) : null;