@royaloperahouse/chord 2.7.0-e-development → 2.8.0-a-development

package/CHANGELOG.md

@@ -1,4 +1,7 @@
-## [2.6.1-b]
+## [2.8.0]
+- Add new SignUpForm component
+
+## [2.7.0]
 - PeopleListing: Add variable column span based on people names length
 
 ## [2.6.1]

package/dist/chord.cjs.development.js

@@ -11295,7 +11295,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;
 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 + ")";
@@ -11307,12 +11307,18 @@ 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  div {\n    border-bottom: none !important;\n  }\n  transform: rotate(", ");\n"])), function (_ref3) {
+  var _ref3$isOpen = _ref3.isOpen,
+      isOpen = _ref3$isOpen === void 0 ? false : _ref3$isOpen;
+  return isOpen ? '180deg' : '0deg';
+});
 
 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,}))$/,
@@ -11378,16 +11384,49 @@ 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 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 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 SignUpForm = function SignUpForm(_ref3) {
+  var submitHandler = _ref3.submitHandler,
+      errorMessage = _ref3.errorMessage,
+      ctaPrivacy = _ref3.ctaPrivacy,
+      theme = _ref3.theme,
+      isSuccess = _ref3.isSuccess,
+      setIsSuccess = _ref3.setIsSuccess,
+      _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: '',
@@ -11401,10 +11440,6 @@ var SignUpForm = function SignUpForm(_ref) {
       errors = _useState2[0],
       setErrors = _useState2[1];
 
-  var _useState3 = React.useState(false),
-      isSuccess = _useState3[0],
-      setIsSuccess = _useState3[1];
-
   var handleChange = function handleChange(field) {
     return function (e) {
       var value = e.target.value.replace(regex.latinOnly, '');
@@ -11437,7 +11472,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) {
@@ -11507,31 +11542,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,
@@ -11587,7 +11602,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)
@@ -11595,7 +11618,76 @@ 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 isMobile = useMobile();
+
+  var _useState3 = React.useState(false),
+      isSuccess = _useState3[0],
+      setIsSuccess = _useState3[1];
+
+  var _useState4 = React.useState(false),
+      dropdownOpen = _useState4[0],
+      setDropdownOpen = _useState4[1];
+
+  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',
+    onClick: function onClick() {
+      return setDropdownOpen(function (prev) {
+        return !prev;
+      });
+    },
+    tabIndex: 0,
+    "aria-label": dropdownOpen ? 'Collapse content' : 'Expand content'
+  }, /*#__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
+  }, /*#__PURE__*/React__default.createElement(Dropdown, {
+    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
+  })) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__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
+  }))));
 };
 
 var UpsellSection = function UpsellSection(_ref) {
@@ -12854,7 +12946,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;