@royaloperahouse/chord 2.6.1-c-development → 2.6.1-e-development

package/dist/chord.esm.js

@@ -3059,12 +3059,11 @@ var _templateObject$9;
 var Grid = /*#__PURE__*/styled.div(_templateObject$9 || (_templateObject$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: var(--grid-template-columns);\n  grid-template-rows: max-content;\n  gap: var(--grid-column-gap);\n  margin: 0;\n"])));
 
 var _templateObject$a;
-var GridItem = /*#__PURE__*/styled.div(_templateObject$a || (_templateObject$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: ", " / span\n    ", ";\n\n  @media ", " {\n    & {\n      grid-column: ", " /\n        span ", ";\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-column: ", " / span\n        ", ";\n    }\n  }\n"])), function (_ref) {
+var GridItem = /*#__PURE__*/styled.div(_templateObject$a || (_templateObject$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: ", " / span ", ";\n\n  @media ", " {\n    & {\n      grid-column: ", " /\n        span ", ";\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-column: ", " / span\n        ", ";\n    }\n  }\n"])), function (_ref) {
   var columnStartDesktop = _ref.columnStartDesktop;
   return columnStartDesktop;
 }, function (_ref2) {
-  var _ref2$columnSpanDeskt = _ref2.columnSpanDesktop,
-      columnSpanDesktop = _ref2$columnSpanDeskt === void 0 ? 1 : _ref2$columnSpanDeskt;
+  var columnSpanDesktop = _ref2.columnSpanDesktop;
   return columnSpanDesktop;
 }, devices.mobile, function (_ref3) {
   var columnStartDevice = _ref3.columnStartDevice,
@@ -4208,12 +4207,14 @@ var TextField = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   return /*#__PURE__*/React__default.createElement(Container$1, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel$1, {
     darkMode: darkMode,
-    "data-testid": "text-field-text-label"
+    "data-testid": "text-field-text-label",
+    "aria-hidden": true
   }, /*#__PURE__*/React__default.createElement(AltHeader, {
     level: 6
   }, label)), /*#__PURE__*/React__default.createElement(InputWrapper, {
     width: width
   }, /*#__PURE__*/React__default.createElement(Input, Object.assign({
+    "aria-label": label,
     isPasswordField: isPasswordField,
     type: inputType,
     error: error,
@@ -4227,7 +4228,10 @@ var TextField = /*#__PURE__*/forwardRef(function (_ref, ref) {
     level: 1
   }, showHideButtonText)))), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$1, {
     darkMode: darkMode,
-    "data-testid": "text-field-error-label"
+    id: inputProps.name + "-error",
+    "data-testid": "text-field-error-label",
+    role: "alert",
+    "aria-live": "assertive"
   }, /*#__PURE__*/React__default.createElement(AltHeader, {
     level: 6
   }, error)));
@@ -9107,7 +9111,7 @@ var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop)
 
 var DEFAULT_COLUMN_COUNT = 4;
 var DEFAULT_LARGE_COLUMN_SPAN = 2;
-var DEFAULT_CHARACTER_THRESHOLD = 180;
+var DEFAULT_CHARACTER_THRESHOLD = 120;
 
 var concatenateMusicTitle = function concatenateMusicTitle(musicTitle, index) {
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
@@ -9179,12 +9183,12 @@ var CreditListing = function CreditListing(_ref) {
     creditEntries.push( /*#__PURE__*/React__default.createElement(GridItem, {
       columnStartDesktop: columnStart,
       columnSpanDesktop: columnSpan,
-      columnStartDevice: 1,
-      columnSpanDevice: 1,
+      columnSpanDevice: columnSpan,
       columnStartSmallDevice: 1,
-      columnSpanSmallDevice: 1,
+      columnStartDevice: 1,
+      columnSpanSmallDevice: 2,
       key: "credit-entry-" + name + "-" + index,
-      "data-testid": "credit-entry"
+      "data-roh": 'credit-entry'
     }, /*#__PURE__*/React__default.createElement(TextWrapper$2, null, /*#__PURE__*/React__default.createElement(RoleWrapper$1, {
       title: "role",
       "data-roh": dataROH
@@ -11304,14 +11308,14 @@ var Wrapper$8 = /*#__PURE__*/styled('div')(_templateObject$1k || (_templateObjec
   return "var(--base-color-" + theme + ")";
 });
 var SignUpFormWrapper = /*#__PURE__*/styled(Grid)(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n  margin-bottom: 32px;\n"])));
-var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: left;\n  position: relative;\n  top: -25px;\n  left: -20px;\n  background: var(--base-color-white);\n  display: inline-block;\n  padding: 0 20px;\n  \n  @media ", " {\n    top: -18px;\n    padding: 0 13px;\n    left: -13px;\n  }\n"])), devices.mobile);
+var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: left;\n  position: relative;\n  top: -25px;\n  left: -20px;\n  background: var(--base-color-white);\n  display: inline-block;\n  padding: 0 20px;\n\n  @media ", " {\n    top: -18px;\n    padding: 0 13px;\n    left: -13px;\n  }\n"])), devices.mobile);
 var Error$1 = /*#__PURE__*/styled.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.form(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n  align-items: center;\n  ", " {\n    margin-top: -20px;\n  }\n  a[href] {\n    color: inherit;\n  }\n"])), Error$1);
-var FormFooterWrapper = /*#__PURE__*/styled.div(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n  display: flex;\n  gap: 21px;\n  align-items: center;\n  \n  @media ", " {\n    flex-direction: column-reverse;\n    align-items: flex-start;\n    margin-bottom: 20px;\n  }\n"])), devices.mobile);
+var FormFooterWrapper = /*#__PURE__*/styled.div(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n  display: flex;\n  gap: 21px;\n  align-items: center;\n\n  @media ", " {\n    flex-direction: column-reverse;\n    align-items: flex-start;\n    margin-bottom: 20px;\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      font-size: 14px;\n    }\n"])));
+var CTALinkWrapper = /*#__PURE__*/styled.a(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-black);\n  div {\n    font-size: 14px;\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 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\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 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,}))$/,
@@ -11321,13 +11325,45 @@ var regex = {
 var formValidationMessages = {
   requiredFieldMessage: 'Please complete this field',
   firstName: {
-    invalid: 'Please enter your first name'
+    invalid: 'Please enter your full first name',
+    required: 'Please enter a first name'
+  },
+  lastName: {
+    required: 'Please enter a last name'
   },
   email: {
     required: 'Please enter an email address',
     invalid: 'Enter an email address in the correct format, like name@example.com'
   }
 };
+var getFormErrorMessage = function getFormErrorMessage(field, value) {
+  var errorMessage;
+
+  if (!value) {
+    switch (field) {
+      case 'firstName':
+        errorMessage = formValidationMessages.firstName.required;
+        break;
+
+      case 'lastName':
+        errorMessage = formValidationMessages.lastName.required;
+        break;
+
+      case 'email':
+        errorMessage = formValidationMessages.email.required;
+        break;
+
+      default:
+        errorMessage = formValidationMessages.requiredFieldMessage;
+    }
+  } else if (field === 'email' && !regex.signInEmail.test(value)) {
+    errorMessage = formValidationMessages.email.invalid;
+  } else if (field === 'firstName' && !regex.firstName.test(value)) {
+    errorMessage = formValidationMessages.firstName.invalid;
+  }
+
+  return errorMessage;
+};
 
 var themeToColor = function themeToColor(theme) {
   switch (theme) {
@@ -11388,6 +11424,21 @@ var SignUpForm = function SignUpForm(_ref) {
     };
   };
 
+  var handleBlur = function handleBlur(field) {
+    return function () {
+      var value = formValues[field];
+      var errorMessage = getFormErrorMessage(field, value);
+
+      if (errorMessage) {
+        setErrors(function (prev) {
+          var _extends4;
+
+          return _extends({}, prev, (_extends4 = {}, _extends4[field] = errorMessage, _extends4));
+        });
+      }
+    };
+  };
+
   var handleFormSubmit = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(e) {
       var formErrors, response;
@@ -11409,13 +11460,13 @@ var SignUpForm = function SignUpForm(_ref) {
 
               if (!isLoggedIn) {
                 if (!formValues.firstName) {
-                  formErrors.firstName = formValidationMessages.requiredFieldMessage;
+                  formErrors.firstName = formValidationMessages.firstName.required;
                 } else if (!regex.firstName.test(formValues.firstName)) {
                   formErrors.firstName = formValidationMessages.firstName.invalid;
                 }
 
                 if (!formValues.lastName) {
-                  formErrors.lastName = formValidationMessages.requiredFieldMessage;
+                  formErrors.lastName = formValidationMessages.lastName.required;
                 }
 
                 if (!formValues.email) {
@@ -11499,6 +11550,10 @@ var SignUpForm = function SignUpForm(_ref) {
     maxLength: 20,
     error: errors.firstName,
     onChange: handleChange('firstName'),
+    onBlur: handleBlur('firstName'),
+    "aria-required": "true",
+    "aria-invalid": !!errors.firstName,
+    "aria-describedby": errors.firstName ? 'firstName-error' : undefined,
     autoComplete: "given-name"
   }), /*#__PURE__*/React__default.createElement(TextField, {
     label: "Last name",
@@ -11508,6 +11563,10 @@ var SignUpForm = function SignUpForm(_ref) {
     value: formValues.lastName,
     error: errors.lastName,
     onChange: handleChange('lastName'),
+    onBlur: handleBlur('lastName'),
+    "aria-required": "true",
+    "aria-invalid": !!errors.lastName,
+    "aria-describedby": errors.lastName ? 'lastName-error' : undefined,
     autoComplete: "family-name"
   }), /*#__PURE__*/React__default.createElement(TextField, {
     label: "Email",
@@ -11516,15 +11575,20 @@ var SignUpForm = function SignUpForm(_ref) {
     value: formValues.email,
     error: errors.email || errors.serverError,
     onChange: handleChange('email'),
+    onBlur: handleBlur('email'),
+    "aria-required": "true",
+    "aria-invalid": !!errors.email,
+    "aria-describedby": errors.email ? 'email-error' : undefined,
     maxLength: 80
   })), isLoggedIn && !!errors.serverError && /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: 2,
     columnSpanDesktop: 12,
-    columnStartTablet: 2,
-    columnSpanTablet: 12,
     columnStartDevice: 2,
     columnSpanDevice: 12
-  }, /*#__PURE__*/React__default.createElement(ServerError, null, /*#__PURE__*/React__default.createElement(AltHeader, {
+  }, /*#__PURE__*/React__default.createElement(ServerError, {
+    role: "alert",
+    "aria-live": "assertive"
+  }, /*#__PURE__*/React__default.createElement(AltHeader, {
     level: 6
   }, errors.serverError))), /*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$3, {
     type: "submit"
@@ -11533,7 +11597,7 @@ var SignUpForm = function SignUpForm(_ref) {
   }, "Sign up")), /*#__PURE__*/React__default.createElement(CTALinkWrapper, {
     href: ctaPrivacy.link
   }, /*#__PURE__*/React__default.createElement(BodyText, {
-    level: 2
+    level: 1
   }, ctaPrivacy.text)))))));
 };