@royaloperahouse/harmonic 0.2.3-n → 0.2.3-o

package/dist/components/molecules/SignUpForm/SignUpForm.style.d.ts

@@ -9,7 +9,7 @@ export declare const Form: import("styled-components").StyledComponent<"form", a
 export declare const FormFooterWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ServerError: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CTALinkWrapper: import("styled-components").StyledComponent<"a", any, {}, never>;
-export declare const ButtonWrapper: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const ButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const FieldsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MessageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const DropdownAreaWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/molecules/SignUpForm/components/SignUpFormButton.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { ThemeType } from '../../../../types/types';
 declare type Props = {
     theme: ThemeType;
+    onClick: (e: React.FormEvent) => Promise<void>;
 };
 declare const SignUpFormButton: React.FC<Props>;
 export default SignUpFormButton;

package/dist/harmonic.cjs.development.js

@@ -11895,7 +11895,7 @@ var Form = /*#__PURE__*/styled__default.form(_templateObject5$A || (_templateObj
 var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$s || (_templateObject6$s = /*#__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$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: left;\n  color: var(--color-base-errorstate);\n"])));
 var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration: none;\n\n  @media ", " {\n    text-decoration: underline;\n  }\n"])), devices.mobile);
-var ButtonWrapper$3 = /*#__PURE__*/styled__default.button(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  all: unset;\n  width: fit-content;\n\n  @media ", " {\n    width: 100%;\n  }\n"])), devices.mobile);
+var ButtonWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  all: unset;\n  width: fit-content;\n\n  @media ", " {\n    width: 100%;\n  }\n"])), devices.mobile);
 var FieldsWrapper = /*#__PURE__*/styled__default.div(_templateObject10$a || (_templateObject10$a = /*#__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$6 || (_templateObject11$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  div > p {\n    margin: 0;\n  }\n"])));
 var DropdownAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject12$4 || (_templateObject12$4 = /*#__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"])));
@@ -12002,16 +12002,28 @@ var getFormErrorMessage = function getFormErrorMessage(field, value) {
 
 var BUTTON_TEXT = 'Sign up';
 var SignUpFormButton = function SignUpFormButton(_ref) {
-  var theme = _ref.theme;
+  var theme = _ref.theme,
+    onClick = _ref.onClick;
+  var onKeyDownHandler = function onKeyDownHandler(e) {
+    if (e.key === 'Enter') {
+      onClick(e);
+    }
+  };
+  var buttonProps = {
+    tabIndex: 0,
+    ariaLabel: BUTTON_TEXT,
+    onClick: onClick,
+    onKeyDown: onKeyDownHandler
+  };
   if (theme === exports.ThemeType.Core) {
-    return /*#__PURE__*/React__default.createElement(PrimaryButton, null, BUTTON_TEXT);
+    return /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, buttonProps), BUTTON_TEXT);
   }
-  return /*#__PURE__*/React__default.createElement(PrimaryButton, {
+  return /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, buttonProps, {
     textColor: ThemeColor['base-white'],
     backgroundColor: ThemeColor['base-black'],
     hoveredColor: ThemeColor['black-hovered'],
     pressedColor: ThemeColor['black-pressed']
-  }, BUTTON_TEXT);
+  }), BUTTON_TEXT);
 };
 
 var SignUpForm = function SignUpForm(_ref) {
@@ -12133,7 +12145,6 @@ var SignUpForm = function SignUpForm(_ref) {
     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",
@@ -12146,7 +12157,6 @@ var SignUpForm = function SignUpForm(_ref) {
     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",
@@ -12158,7 +12168,6 @@ var SignUpForm = function SignUpForm(_ref) {
     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,
@@ -12172,13 +12181,11 @@ var SignUpForm = function SignUpForm(_ref) {
     href: ctaPrivacy.link
   }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
     size: "small"
-  }, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$3, {
-    type: "submit"
-  }, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
+  }, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$3, null, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
+    onClick: handleFormSubmit,
     theme: theme
-  })))) : (/*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$3, {
-    type: "submit"
-  }, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
+  })))) : (/*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$3, null, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
+    onClick: handleFormSubmit,
     theme: theme
   })), /*#__PURE__*/React__default.createElement(CTALinkWrapper, {
     href: ctaPrivacy.link