@royaloperahouse/chord 2.8.0-a-development → 2.8.0-c-development

package/dist/chord.cjs.development.js

@@ -6286,7 +6286,8 @@ var Dropdown = function Dropdown(_ref) {
       _ref$withIcon = _ref.withIcon,
       withIcon = _ref$withIcon === void 0 ? 'right' : _ref$withIcon,
       _ref$colorPrimary = _ref.colorPrimary,
-      colorPrimary = _ref$colorPrimary === void 0 ? 'primary' : _ref$colorPrimary;
+      colorPrimary = _ref$colorPrimary === void 0 ? 'primary' : _ref$colorPrimary,
+      className = _ref.className;
   var node = React.useRef();
 
   var _useState = React.useState(false),
@@ -6440,7 +6441,8 @@ var Dropdown = function Dropdown(_ref) {
     ref: node,
     onClick: function onClick() {
       return clickMobileHandler();
-    }
+    },
+    className: className
   }, renderTab()) : /*#__PURE__*/React__default.createElement(TabContainer, {
     ref: node,
     onMouseEnter: function onMouseEnter() {
@@ -6448,7 +6450,8 @@ var Dropdown = function Dropdown(_ref) {
     },
     onMouseLeave: function onMouseLeave() {
       return onMouseHandler(false);
-    }
+    },
+    className: className
   }, renderTab()));
 };
 
@@ -11295,7 +11298,7 @@ var Table = function Table(_ref) {
   }))))))));
 };
 
-var _templateObject$1k, _templateObject2$Z, _templateObject3$P, _templateObject4$E, _templateObject5$x, _templateObject6$p, _templateObject7$h, _templateObject8$d, _templateObject9$8, _templateObject10$8, _templateObject11$4, _templateObject12$2, _templateObject13$2;
+var _templateObject$1k, _templateObject2$Z, _templateObject3$P, _templateObject4$E, _templateObject5$x, _templateObject6$p, _templateObject7$h, _templateObject8$d, _templateObject9$8, _templateObject10$8, _templateObject11$4, _templateObject12$2, _templateObject13$2, _templateObject14$2, _templateObject15$1;
 var Wrapper$8 = /*#__PURE__*/styled__default('div')(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  border-top: 4px solid ", ";\n  border-bottom: 4px solid ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return "var(--base-color-" + theme + ")";
@@ -11314,11 +11317,13 @@ var ButtonWrapper$3 = /*#__PURE__*/styled__default.button(_templateObject9$8 ||
 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"])));
-var DropdownWrapper = /*#__PURE__*/styled__default.div(_templateObject13$2 || (_templateObject13$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  div {\n    border-bottom: none !important;\n  }\n  transform: rotate(", ");\n"])), function (_ref3) {
+var DropdownWrapper = /*#__PURE__*/styled__default.div(_templateObject13$2 || (_templateObject13$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  transform: rotate(", ");\n  .dropdown-icon > div {\n    border-bottom: none;\n    color: var(--base-color-black);\n    margin: 0;\n  }\n"])), function (_ref3) {
   var _ref3$isOpen = _ref3.isOpen,
       isOpen = _ref3$isOpen === void 0 ? false : _ref3$isOpen;
   return isOpen ? '180deg' : '0deg';
 });
+var HiddenInstructions = /*#__PURE__*/styled__default.div(_templateObject14$2 || (_templateObject14$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n"])));
+var SignUpHeader = /*#__PURE__*/styled__default(Grid)(_templateObject15$1 || (_templateObject15$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 1 / -1;\n  row-gap: 0;\n"])));
 
 var regex = {
   signInEmail: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
@@ -11423,22 +11428,16 @@ var SignUpForm = function SignUpForm(_ref3) {
       theme = _ref3.theme,
       isSuccess = _ref3.isSuccess,
       setIsSuccess = _ref3.setIsSuccess,
+      formValues = _ref3.formValues,
+      setFormValues = _ref3.setFormValues,
       _ref3$isLoggedIn = _ref3.isLoggedIn,
       isLoggedIn = _ref3$isLoggedIn === void 0 ? false : _ref3$isLoggedIn,
       _ref3$isMobile = _ref3.isMobile,
       isMobile = _ref3$isMobile === void 0 ? false : _ref3$isMobile;
 
-  var _useState = React.useState({
-    firstName: '',
-    lastName: '',
-    email: ''
-  }),
-      formValues = _useState[0],
-      setFormValues = _useState[1];
-
-  var _useState2 = React.useState({}),
-      errors = _useState2[0],
-      setErrors = _useState2[1];
+  var _useState = React.useState({}),
+      errors = _useState[0],
+      setErrors = _useState[1];
 
   var handleChange = function handleChange(field) {
     return function (e) {
@@ -11630,27 +11629,54 @@ var SignUpFormComponent = function SignUpFormComponent(_ref5) {
       _ref5$isLoggedIn = _ref5.isLoggedIn,
       isLoggedIn = _ref5$isLoggedIn === void 0 ? false : _ref5$isLoggedIn,
       submitHandler = _ref5.submitHandler;
+  var signUpHeaderId = 'signup-header';
+  var signUpInstructionsId = 'sign-up-instructions';
   var isMobile = useMobile();
 
+  var _useState2 = React.useState(false),
+      isSuccess = _useState2[0],
+      setIsSuccess = _useState2[1];
+
   var _useState3 = React.useState(false),
-      isSuccess = _useState3[0],
-      setIsSuccess = _useState3[1];
+      dropdownOpen = _useState3[0],
+      setDropdownOpen = _useState3[1];
 
-  var _useState4 = React.useState(false),
-      dropdownOpen = _useState4[0],
-      setDropdownOpen = _useState4[1];
+  var successRef = React.useRef(null);
 
+  var _useState4 = React.useState({
+    firstName: '',
+    lastName: '',
+    email: ''
+  }),
+      formValues = _useState4[0],
+      setFormValues = _useState4[1];
+
+  React.useEffect(function () {
+    if (isMobile && !isLoggedIn && isSuccess && successRef.current) {
+      successRef.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center'
+      });
+    }
+  }, [isSuccess]);
   return /*#__PURE__*/React__default.createElement(Wrapper$8, {
     theme: themeToColor(theme)
-  }, /*#__PURE__*/React__default.createElement(SignUpFormWrapper, null, isMobile && !isLoggedIn && !isSuccess ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DropdownAreaWrapper, {
-    role: 'button',
+  }, /*#__PURE__*/React__default.createElement(SignUpFormWrapper, null, isMobile && !isLoggedIn && !isSuccess ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(HiddenInstructions, {
+    id: signUpInstructionsId,
+    "aria-hidden": "true"
+  }, dropdownOpen ? 'Collapse content. Use the arrow key or tap to collapse.' : 'Expand content. Use the arrow key or tap to expand.'), /*#__PURE__*/React__default.createElement(DropdownAreaWrapper, {
+    role: "button",
     onClick: function onClick() {
       return setDropdownOpen(function (prev) {
         return !prev;
       });
     },
     tabIndex: 0,
-    "aria-label": dropdownOpen ? 'Collapse content' : 'Expand content'
+    "aria-labelledby": signUpHeaderId,
+    "aria-describedby": signUpInstructionsId,
+    "aria-expanded": dropdownOpen
+  }, /*#__PURE__*/React__default.createElement(SignUpHeader, {
+    id: signUpHeaderId
   }, /*#__PURE__*/React__default.createElement(SignUpTitle, {
     title: isSuccess ? submittedState.title : initialState.title,
     isMobile: isMobile
@@ -11659,12 +11685,14 @@ var SignUpFormComponent = function SignUpFormComponent(_ref5) {
     withDropdown: isMobile
   }), /*#__PURE__*/React__default.createElement(DropdownWrapper, {
     "data-testid": "dropdown",
-    isOpen: dropdownOpen
+    isOpen: dropdownOpen,
+    "aria-hidden": "true"
   }, /*#__PURE__*/React__default.createElement(Dropdown, {
+    className: "dropdown-icon",
     colorPrimary: exports.Colors.Black,
     isMobileBehaviour: isMobile,
     withIcon: "left"
-  }))), dropdownOpen && /*#__PURE__*/React__default.createElement(SignUpForm, {
+  })))), dropdownOpen && /*#__PURE__*/React__default.createElement(SignUpForm, {
     submitHandler: submitHandler,
     errorMessage: errorMessage,
     ctaPrivacy: ctaPrivacy,
@@ -11672,13 +11700,17 @@ var SignUpFormComponent = function SignUpFormComponent(_ref5) {
     isSuccess: isSuccess,
     setIsSuccess: setIsSuccess,
     isLoggedIn: isLoggedIn,
-    isMobile: isMobile
-  })) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SignUpTitle, {
+    isMobile: isMobile,
+    formValues: formValues,
+    setFormValues: setFormValues
+  })) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SignUpHeader, {
+    ref: successRef
+  }, /*#__PURE__*/React__default.createElement(SignUpTitle, {
     title: isSuccess ? submittedState.title : initialState.title,
     isMobile: isMobile
   }), /*#__PURE__*/React__default.createElement(SignUpMessage, {
     message: isSuccess ? submittedState.message : initialState.message
-  }), !isSuccess && /*#__PURE__*/React__default.createElement(SignUpForm, {
+  })), !isSuccess && /*#__PURE__*/React__default.createElement(SignUpForm, {
     submitHandler: submitHandler,
     errorMessage: errorMessage,
     ctaPrivacy: ctaPrivacy,
@@ -11686,7 +11718,9 @@ var SignUpFormComponent = function SignUpFormComponent(_ref5) {
     isSuccess: isSuccess,
     setIsSuccess: setIsSuccess,
     isLoggedIn: isLoggedIn,
-    isMobile: isMobile
+    isMobile: isMobile,
+    formValues: formValues,
+    setFormValues: setFormValues
   }))));
 };