@royaloperahouse/chord 2.7.0-b-development → 2.7.0-d-development

package/dist/chord.esm.js

@@ -4208,12 +4208,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 +4229,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)));
@@ -9105,32 +9110,43 @@ var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop)
   }, 0);
 };
 
-var concatenateMusicTitle = function concatenateMusicTitle(musicTitle) {
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, musicTitle.map(function (title, index) {
-    if (musicTitle.length > 1 && index === musicTitle.length - 1) {
-      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i", {
-        key: index
-      }, title));
-    } else if (index > 0) {
-      return /*#__PURE__*/React__default.createElement("i", {
-        key: index
-      }, ", ", title);
+var DEFAULT_COLUMN_COUNT = 4;
+var DEFAULT_LARGE_COLUMN_SPAN = 2;
+var DEFAULT_CHARACTER_THRESHOLD = 180;
+
+var concatenateMusicTitle = function concatenateMusicTitle(musicTitle, index) {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+    key: "music-" + index
+  }, musicTitle.map(function (title, idx) {
+    if (musicTitle.length > 1 && idx === musicTitle.length - 1) {
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+        key: "music-" + index + "-" + idx + "-" + title
+      }, ' ', "and ", /*#__PURE__*/React__default.createElement("i", null, title));
+    } else if (idx > 0) {
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+        key: "music-" + index + "-" + idx + "-" + title
+      }, /*#__PURE__*/React__default.createElement("i", null, ", ", title));
     }
 
-    return /*#__PURE__*/React__default.createElement("i", {
-      key: index
-    }, title);
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: "music-" + index + "-" + idx + "-" + title
+    }, /*#__PURE__*/React__default.createElement("i", null, title));
   }));
 };
 
 var CreditListing = function CreditListing(_ref) {
   var roles = _ref.roles,
       _ref$columnCount = _ref.columnCount,
-      columnCount = _ref$columnCount === void 0 ? 4 : _ref$columnCount;
-  var charThreshold = 180;
-  return /*#__PURE__*/React__default.createElement(CreditListingWrapper, {
-    columnCount: columnCount
-  }, roles.map(function (_ref2, index) {
+      columnCount = _ref$columnCount === void 0 ? DEFAULT_COLUMN_COUNT : _ref$columnCount,
+      _ref$expandLargeEntri = _ref.expandLargeEntries,
+      expandLargeEntries = _ref$expandLargeEntri === void 0 ? false : _ref$expandLargeEntri,
+      _ref$largeColumnSpan = _ref.largeColumnSpan,
+      largeColumnSpan = _ref$largeColumnSpan === void 0 ? DEFAULT_LARGE_COLUMN_SPAN : _ref$largeColumnSpan,
+      _ref$characterThresho = _ref.characterThreshold,
+      characterThreshold = _ref$characterThresho === void 0 ? DEFAULT_CHARACTER_THRESHOLD : _ref$characterThresho;
+  var creditEntries = [];
+  var nextColumnStart = 1;
+  roles.forEach(function (_ref2, index) {
     var name = _ref2.name,
         people = _ref2.people,
         description = _ref2.description,
@@ -9138,13 +9154,42 @@ var CreditListing = function CreditListing(_ref) {
         replacement = _ref2.replacement,
         additionalInfo = _ref2.additionalInfo,
         dataROH = _ref2.dataROH;
-    var namesLength = getConcatenatedPropLength(people, 'name');
-    var columnSpanDesktop = namesLength > charThreshold ? people.length > 2 ? 4 : 2 : 1;
-    return /*#__PURE__*/React__default.createElement(GridItem, {
-      columnSpanDesktop: columnSpanDesktop,
-      columnSpanDevice: columnSpanDesktop,
-      columnSpanSmallDevice: 2,
-      key: name + "-" + index
+
+    var _ref3 = function () {
+      if (expandLargeEntries && columnCount > 1) {
+        var namesLength = getConcatenatedPropLength(people, 'name');
+
+        var _columnSpan = namesLength > characterThreshold ? largeColumnSpan : 1;
+
+        var unboundedEnd = nextColumnStart + _columnSpan;
+
+        var _columnStart = unboundedEnd > columnCount + 1 ? 1 : nextColumnStart;
+
+        var columnEnd = _columnStart + _columnSpan;
+        nextColumnStart = columnEnd % columnCount || columnCount;
+        return {
+          columnStart: _columnStart,
+          columnSpan: _columnSpan
+        };
+      } else {
+        return {
+          columnStart: 0,
+          columnSpan: 1
+        };
+      }
+    }(),
+        columnStart = _ref3.columnStart,
+        columnSpan = _ref3.columnSpan;
+
+    creditEntries.push( /*#__PURE__*/React__default.createElement(GridItem, {
+      columnStartDesktop: columnStart,
+      columnSpanDesktop: columnSpan,
+      columnStartDevice: 1,
+      columnSpanDevice: 1,
+      columnStartSmallDevice: 1,
+      columnSpanSmallDevice: 1,
+      key: "credit-entry-" + name + "-" + index,
+      "data-testid": "credit-entry"
     }, /*#__PURE__*/React__default.createElement(TextWrapper$2, null, /*#__PURE__*/React__default.createElement(RoleWrapper$1, {
       title: "role",
       "data-roh": dataROH
@@ -9168,12 +9213,16 @@ var CreditListing = function CreditListing(_ref) {
       tag: "p"
     }, replacement)), musicTitle && musicTitle.length > 0 && /*#__PURE__*/React__default.createElement(BodyText, {
       level: 1,
-      tag: "p"
-    }, concatenateMusicTitle(musicTitle)), additionalInfo && /*#__PURE__*/React__default.createElement(BodyText, {
+      tag: "p",
+      key: "music-" + musicTitle + "-text"
+    }, concatenateMusicTitle(musicTitle, index)), additionalInfo && /*#__PURE__*/React__default.createElement(BodyText, {
       level: 1,
       tag: "p"
-    }, additionalInfo)));
-  }));
+    }, additionalInfo))));
+  });
+  return /*#__PURE__*/React__default.createElement(CreditListingWrapper, {
+    columnCount: columnCount
+  }, creditEntries);
 };
 
 var _templateObject$13, _templateObject2$M, _templateObject3$D, _templateObject4$v, _templateObject5$p, _templateObject6$j, _templateObject7$d, _templateObject8$a, _templateObject9$5, _templateObject10$5, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
@@ -11252,7 +11301,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;
-var Wrapper$8 = /*#__PURE__*/styled('div')(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  //width: auto;\n  border-top: 4px solid ", ";\n  border-bottom: 4px solid ", ";\n"])), function (_ref) {
+var Wrapper$8 = /*#__PURE__*/styled('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 + ")";
 }, function (_ref2) {
@@ -11260,14 +11309,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    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 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,}))$/,
@@ -11277,13 +11326,61 @@ 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) {
+    case ThemeType.Core:
+      return Colors.Core;
+
+    case ThemeType.Stream:
+      return Colors.Stream;
+
+    case ThemeType.Cinema:
+      return Colors.Cinema;
+
+    default:
+      return Colors.Core;
+  }
+};
 
 var SignUpForm = function SignUpForm(_ref) {
   var initialState = _ref.initialState,
@@ -11328,6 +11425,21 @@ var SignUpForm = function SignUpForm(_ref) {
     };
   };
 
+  var handleBlur = function handleBlur(field) {
+    return function () {
+      var value = formValues[field];
+      var formErrorMessage = getFormErrorMessage(field, value);
+
+      if (formErrorMessage) {
+        setErrors(function (prev) {
+          var _extends4;
+
+          return _extends({}, prev, (_extends4 = {}, _extends4[field] = formErrorMessage, _extends4));
+        });
+      }
+    };
+  };
+
   var handleFormSubmit = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(e) {
       var formErrors, response;
@@ -11349,13 +11461,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) {
@@ -11404,7 +11516,7 @@ var SignUpForm = function SignUpForm(_ref) {
   }();
 
   return /*#__PURE__*/React__default.createElement(Wrapper$8, {
-    theme: Colors[theme]
+    theme: themeToColor(theme)
   }, /*#__PURE__*/React__default.createElement(SignUpFormWrapper, null, /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: 3,
     columnSpanDesktop: 10,
@@ -11439,6 +11551,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",
@@ -11448,6 +11564,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",
@@ -11456,24 +11576,29 @@ 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"
   }, /*#__PURE__*/React__default.createElement(PrimaryButton, {
-    bgColor: Colors[theme]
+    bgColor: themeToColor(theme)
   }, "Sign up")), /*#__PURE__*/React__default.createElement(CTALinkWrapper, {
     href: ctaPrivacy.link
   }, /*#__PURE__*/React__default.createElement(BodyText, {
-    level: 2
+    level: 1
   }, ctaPrivacy.text)))))));
 };