@royaloperahouse/chord 2.8.0 → 2.8.1

package/CHANGELOG.md

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

package/dist/chord.cjs.development.js

@@ -6217,7 +6217,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),
@@ -6371,7 +6372,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() {
@@ -6379,7 +6381,8 @@ var Dropdown = function Dropdown(_ref) {
     },
     onMouseLeave: function onMouseLeave() {
       return onMouseHandler(false);
-    }
+    },
+    className: className
   }, renderTab()));
 };
 
@@ -11222,7 +11225,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;
+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 + ")";
@@ -11234,12 +11237,20 @@ var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$Z ||
 var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: left;\n  position: relative;\n  top: -25px;\n  left: -20px;\n  height: 52px;\n  background: var(--base-color-white);\n  display: inline-block;\n  padding: 0 20px;\n\n  @media ", " {\n    top: -18px;\n    height: 37px;\n    padding: 0 13px;\n    left: -13px;\n  }\n"])), devices.mobile);
 var Error$1 = /*#__PURE__*/styled__default.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n  color: var(--base-color-errorstate);\n  a {\n    text-decoration: underline;\n    color: inherit;\n  }\n"])));
 var Form = /*#__PURE__*/styled__default.form(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n  align-items: center;\n  ", " {\n    margin-top: -20px;\n  }\n  a[href] {\n    color: inherit;\n  }\n"])), Error$1);
-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-reverse;\n    align-items: flex-start;\n  }\n"])), devices.mobile);
+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 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  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,}))$/,
@@ -11305,32 +11316,55 @@ var themeToColor = function themeToColor(theme) {
   }
 };
 
-var SignUpForm = function SignUpForm(_ref) {
-  var initialState = _ref.initialState,
-      submittedState = _ref.submittedState,
-      ctaPrivacy = _ref.ctaPrivacy,
-      theme = _ref.theme,
-      errorMessage = _ref.errorMessage,
-      _ref$isLoggedIn = _ref.isLoggedIn,
-      isLoggedIn = _ref$isLoggedIn === void 0 ? false : _ref$isLoggedIn,
-      submitHandler = _ref.submitHandler;
-  var isMobile = useMobile();
-
-  var _useState = React.useState({
-    firstName: '',
-    lastName: '',
-    email: ''
-  }),
-      formValues = _useState[0],
-      setFormValues = _useState[1];
+var SignUpTitle = function SignUpTitle(_ref) {
+  var title = _ref.title,
+      _ref$isMobile = _ref.isMobile,
+      isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
+  return /*#__PURE__*/React__default.createElement(GridItem, {
+    columnStartDesktop: 3,
+    columnSpanDesktop: 10,
+    columnStartDevice: 2,
+    columnSpanDevice: 12
+  }, /*#__PURE__*/React__default.createElement(SignUpTitleWrapper, null, /*#__PURE__*/React__default.createElement(AltHeader, {
+    level: isMobile ? 3 : 4
+  }, title)));
+};
 
-  var _useState2 = React.useState({}),
-      errors = _useState2[0],
-      setErrors = _useState2[1];
+var SignUpMessage = function SignUpMessage(_ref2) {
+  var message = _ref2.message,
+      _ref2$withDropdown = _ref2.withDropdown,
+      withDropdown = _ref2$withDropdown === void 0 ? false : _ref2$withDropdown;
+  return /*#__PURE__*/React__default.createElement(GridItem, {
+    columnStartDesktop: 3,
+    columnSpanDesktop: 10,
+    columnStartDevice: 2,
+    columnSpanDevice: withDropdown ? 11 : 12
+  }, /*#__PURE__*/React__default.createElement(MessageWrapper$1, null, /*#__PURE__*/React__default.createElement(AltHeader, {
+    level: 6
+  }, /*#__PURE__*/React__default.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: message
+    }
+  }))));
+};
 
-  var _useState3 = React.useState(false),
-      isSuccess = _useState3[0],
-      setIsSuccess = _useState3[1];
+var SignUpForm = function SignUpForm(_ref3) {
+  var submitHandler = _ref3.submitHandler,
+      errorMessage = _ref3.errorMessage,
+      ctaPrivacy = _ref3.ctaPrivacy,
+      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({}),
+      errors = _useState[0],
+      setErrors = _useState[1];
 
   var handleChange = function handleChange(field) {
     return function (e) {
@@ -11364,7 +11398,7 @@ var SignUpForm = function SignUpForm(_ref) {
   };
 
   var handleFormSubmit = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(e) {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(e) {
       var formErrors, response;
       return runtime_1.wrap(function _callee$(_context) {
         while (1) {
@@ -11434,31 +11468,11 @@ var SignUpForm = function SignUpForm(_ref) {
     }));
 
     return function handleFormSubmit(_x) {
-      return _ref2.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }();
 
-  return /*#__PURE__*/React__default.createElement(Wrapper$8, {
-    theme: themeToColor(theme)
-  }, /*#__PURE__*/React__default.createElement(SignUpFormWrapper, null, /*#__PURE__*/React__default.createElement(GridItem, {
-    columnStartDesktop: 3,
-    columnSpanDesktop: 10,
-    columnStartDevice: 2,
-    columnSpanDevice: 12
-  }, /*#__PURE__*/React__default.createElement(SignUpTitleWrapper, null, /*#__PURE__*/React__default.createElement(AltHeader, {
-    level: isMobile ? 3 : 4
-  }, isSuccess ? submittedState.title : initialState.title))), /*#__PURE__*/React__default.createElement(GridItem, {
-    columnStartDesktop: 3,
-    columnSpanDesktop: 10,
-    columnStartDevice: 2,
-    columnSpanDevice: 12
-  }, /*#__PURE__*/React__default.createElement(MessageWrapper$1, null, /*#__PURE__*/React__default.createElement(AltHeader, {
-    level: 6
-  }, /*#__PURE__*/React__default.createElement("div", {
-    dangerouslySetInnerHTML: {
-      __html: isSuccess ? submittedState.message : initialState.message
-    }
-  })))), !isSuccess && /*#__PURE__*/React__default.createElement(GridItem, {
+  return /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: 3,
     columnSpanDesktop: 12,
     columnStartDevice: 2,
@@ -11514,7 +11528,15 @@ var SignUpForm = function SignUpForm(_ref) {
     "aria-live": "assertive"
   }, /*#__PURE__*/React__default.createElement(AltHeader, {
     level: 6
-  }, errors.serverError))), /*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$3, {
+  }, errors.serverError))), !isLoggedIn && isMobile ? /*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(CTALinkWrapper, {
+    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, {
+    bgColor: themeToColor(theme)
+  }, "Sign up"))) : /*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$3, {
     type: "submit"
   }, /*#__PURE__*/React__default.createElement(PrimaryButton, {
     bgColor: themeToColor(theme)
@@ -11522,7 +11544,111 @@ var SignUpForm = function SignUpForm(_ref) {
     href: ctaPrivacy.link
   }, /*#__PURE__*/React__default.createElement(BodyText, {
     level: 1
-  }, ctaPrivacy.text)))))));
+  }, ctaPrivacy.text)))));
+};
+
+var SignUpFormComponent = function SignUpFormComponent(_ref5) {
+  var initialState = _ref5.initialState,
+      submittedState = _ref5.submittedState,
+      ctaPrivacy = _ref5.ctaPrivacy,
+      theme = _ref5.theme,
+      errorMessage = _ref5.errorMessage,
+      _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),
+      dropdownOpen = _useState3[0],
+      setDropdownOpen = _useState3[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(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-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
+  }), /*#__PURE__*/React__default.createElement(SignUpMessage, {
+    message: isSuccess ? submittedState.message : initialState.message,
+    withDropdown: isMobile
+  }), /*#__PURE__*/React__default.createElement(DropdownWrapper, {
+    "data-testid": "dropdown",
+    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, {
+    submitHandler: submitHandler,
+    errorMessage: errorMessage,
+    ctaPrivacy: ctaPrivacy,
+    theme: theme,
+    isSuccess: isSuccess,
+    setIsSuccess: setIsSuccess,
+    isLoggedIn: isLoggedIn,
+    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, {
+    submitHandler: submitHandler,
+    errorMessage: errorMessage,
+    ctaPrivacy: ctaPrivacy,
+    theme: theme,
+    isSuccess: isSuccess,
+    setIsSuccess: setIsSuccess,
+    isLoggedIn: isLoggedIn,
+    isMobile: isMobile,
+    formValues: formValues,
+    setFormValues: setFormValues
+  }))));
 };
 
 var UpsellSection = function UpsellSection(_ref) {
@@ -12781,7 +12907,7 @@ exports.SectionTitle = SectionTitle;
 exports.Select = Select;
 exports.Select2 = SelectComponent;
 exports.Select2Async = SelectComponent$1;
-exports.SignUpForm = SignUpForm;
+exports.SignUpForm = SignUpFormComponent;
 exports.Sponsorship = Sponsorship;
 exports.StatusBanner = StatusBanner;
 exports.Stepper = Component;