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

package/CHANGELOG.md

@@ -1,4 +1,4 @@
-## [2.6.1-c]
+## [2.6.1-b]
 - PeopleListing: Add variable column span based on people names length
 
 ## [2.6.1]

package/README.md

@@ -46,7 +46,7 @@ Given a version number MAJOR.MINOR.PATCH, increment the:
 
 When you create a new release always update the `CHANGELOG` and `package.json`
 
-Increment your version from the latest stable version on `main`
+Increment your version from the latest stable version on `chord-releases`
 
 
 ## Deploying the Storybook
@@ -61,7 +61,7 @@ yarn storybook
 ```
 
 By default the storybook will be accessible at
-[http://localhost:6006/](http://localhost:6006/)
+[http://localhost:6006/]()
 
 The server will hot-reload on most changes.
 
@@ -107,7 +107,7 @@ then run:
 yarn deploy-storybook
 ```
 
-> **IMPORTANT:** This URL is intended to showcase the latest stable version of Chord, it should be kept up to date with the main branch and should **only** be used for release versions. If you want to deploy a development version follow the steps above under *To deploy a preview version remotely*.
+> **IMPORTANT:** This URL is intended to showcase the latest stable version of Chord, it should be kept up to date with the main `chord-releases` branch and should **only** be used for release versions. If you want to deploy a development version follow the steps above under *To deploy a preview version remotely*.
 
 
 ## Releasing a New Package Version
@@ -125,9 +125,9 @@ A **stable** package is published for use in production.
 
 ### **1. To release a snapshot version**
 
-> **IMPORTANT:** Make sure you always publish your **snapshots** from `development` after merging in your feature branch.
+> **IMPORTANT:** Make sure you always publish your **snapshots** from `chord-development` after merging in your feature branch.
 
-For snapshots, `RELEASE_VERSION` should be the same as the latest **stable** version of the Chord Library, as found in `main`, followed by an **unused** lowercase letter.
+For snapshots, `RELEASE_VERSION` should be the same as the latest **stable** version of the Chord Library, as found in `chord-releases`, followed by an **unused** lowercase letter.
 
 For example, if the latest stable release was 1.42.0, and the last snapshot published to NPM was 1.42.0-w, you would use RELEASE_VERSION `1.42.0-x`
 
@@ -137,13 +137,13 @@ To publish a snapshot use:
 NPM_ROH_TOKEN={NPM_TOKEN} RELEASE_VERSION={RELEASE_VERSION} yarn publish-snapshot
 ```
 
-The version published to NPM will be named, e.g. `1.42.0-x-development`, use this to install the snapshot package in the frontend repos.
+The version published to NPM will be named, e.g. `1.42.0-a-chord-development`, use this to install the snapshot package in the frontend repos.
 
 ### **2. To release a stable version**
 
-> **IMPORTANT:** Make sure you always publish your **stable** packages from `main` after merging in your feature branch.
+> **IMPORTANT:** Make sure you always publish your **stable** packages from `chord-releases` after merging in your feature branch.
 
-For stable releases, increment your version from the latest **stable** version found on `main`, following the rules described in *Versioning* above, and use this as `RELEASE_VERSION`. (Make sure it matches the version in your `package.json` and `CHANGELOG.md`!)
+For stable releases, increment your version from the latest **stable** version found on `chord-releases`, following the rules described in *Versioning* above, and use this as `RELEASE_VERSION`. (Make sure it matches the version in your `package.json` and `CHANGELOG.md`!)
 
 To publish a stable package use:
 
@@ -196,9 +196,10 @@ yarn test-storybook
 ---
 
 ### **1. Branching Model**
-* The Chord project source can be found at [https://bitbucket.org/rohorguk/harmonic-library](https://bitbucket.org/rohorguk/harmonic-library) in the `chord` directory
-* The Chord **development** branch is currently `development`
-* The Chord **main** branch is currently `main`
+* The Chord project lives in the `roh-components` *monorepo*
+* When working on Chord, treat the `roh-components/packages/chord` directory as your root
+* The Chord **development** branch is currently `chord-development`
+* The Chord **main** branch is currently `chord-releases`
 * All work should be done on a correctly named **feature branch** of the format: `issueType/ticketNumber-short-description-of-feature`, e.g. `feature/RD-1234-update-chord-documentation`
 * Always create your feature branch FROM, and submit pull requests TO, the **main** branch
 * For **QA / UAT** of a Chord component in isolation: following review you should deploy a preview version to Chromatic straight from your **feature branch** _without_ merging to development
@@ -208,13 +209,13 @@ yarn test-storybook
 
 #### **Before review:**
 
-* Git pull the latest version of `main`
-* Checkout a new, correctly-named feature branch from `main`
+* Git pull the latest version of `chord-releases`
+* Checkout a new, correctly-named feature branch from `chord releases`
 * Do your work on this feature branch
 * Run: `yarn lint`
 * Run: `yarn test`
 * Commit your changes
-* Create a pull request from your feature branch to `main`
+* Create a pull request from your feature branch to `chord-releases`
 * Add the appropriate reviewers
 
 #### **Before QA / UAT:**
@@ -228,10 +229,10 @@ After your PR is approved, you have two options:
 
 **ii.** For integrated testing of a component in the frontend staging environments:
 
-* Check out the `development` branch
-* Merge your work in to `development`
+* Check out the `chord-development` branch
+* Merge your work in to `chord-development`
 * Follow the steps above under *Publishing a New Package Version -> 1. To release a snapshot version*
-* Git push the updated `development` branch to remote
+* Git push the updated `chord-development` branch to remote
 * Finally, in the frontend repo:
 
 1. Update the `package.json` to reference the new snapshot version
@@ -241,14 +242,14 @@ After your PR is approved, you have two options:
 #### **When ready for production:**
 
 * Return to your chord **feature branch**
-* Update the chord version in `package.json`, incrementing from the last **stable** release, found in `main`, and following the rules described in the *Versioning* section
+* Update the chord version in `package.json`, incrementing from the last **stable** release, found in `chord-releases`, and following the rules described in the *Versioning* section
 * Update `CHANGELOG.md`, adding the new version number and a short description of your changes
 * Run: `yarn lint`
 * Run: `yarn test`
 * Run: `yarn test-storybook -u`
 * Run: `yarn build-storybook`
 * Git commit, push, and update your PR for final approval
-* Merge your approved PR to `main`
+* Merge your approved PR to `chord-releases`
 * Follow the steps in *Publishing a New Package Version -> 2. To release a stable version* to publish the NPM package
 * Finally, follow the steps in *Deploying The Storybook -> 3. To deploy a release version*, to update the public Chord Storybook page
 

package/dist/chord.cjs.development.js

@@ -3054,12 +3054,11 @@ var _templateObject$9;
 var Grid = /*#__PURE__*/styled__default.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__default.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__default.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,
@@ -4203,12 +4202,14 @@ var TextField = /*#__PURE__*/React.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,
@@ -4222,7 +4223,10 @@ var TextField = /*#__PURE__*/React.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)));
@@ -9102,7 +9106,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, {
@@ -9174,12 +9178,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
@@ -11299,14 +11303,14 @@ var Wrapper$8 = /*#__PURE__*/styled__default('div')(_templateObject$1k || (_temp
   return "var(--base-color-" + theme + ")";
 });
 var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n  margin-bottom: 32px;\n"])));
-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  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__default('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__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: 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__default.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__default.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__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      font-size: 14px;\n    }\n"])));
+var CTALinkWrapper = /*#__PURE__*/styled__default.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__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\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 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,}))$/,
@@ -11316,13 +11320,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) {
@@ -11383,6 +11419,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;
@@ -11404,13 +11455,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) {
@@ -11494,6 +11545,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",
@@ -11503,6 +11558,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",
@@ -11511,15 +11570,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"
@@ -11528,7 +11592,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)))))));
 };