@saasquatch/mint-components 1.5.3-4 → 1.5.3

package/CHANGELOG.md

@@ -7,22 +7,36 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-## [1.5.3] - 2022-03-28
-
-### Changed
+## [1.5.3] - 2022-03-31
 
+### Added
 - Input component added for use in \<sqm-portal-register>
-
 - Added Component:
-
   - \<sqm-input-field>
-    - Required by default but can be optional
-    - All text is configurable by props
-    - Best used in `formData` slot
+    - Required by default but can be optional with the `field-optional` prop
+    - Field label and error message are configurable by prop
+    - Best used in `formData` slot inside \<sqm-portal-register>
     - Form field name can be customized with the `field-name` prop
+      - `field-name` must be a unique string and is submitted as the key to the value submitted
+        - For example, with `field-name` set to `businessName` the result is `{"businessName":"SaaSquatch"}`
+      - An error is displayed if `field-name` prop is not included
     - Input type can be customized with the `field-type` prop
       - Supports `text`, `tel`, and `date` as types
 
+### Changed
+
+- Changed Components:
+  - \<sqm-dropdown-field>
+    - An error is now displayed if `dropdown-name` prop is not included
+    - `dropdown-required` prop deprecated, must use `dropdown-optional` instead
+      - Field is still required by default
+  - \<sqm-checkbox-field>
+    - Error is now displayed if `checkbox-name` prop is not included
+    - `checkbox-required` prop deprecated, must use `checkbox-optional` instead
+      - Field is still required by default
+  - \<sqm-referral-iframe>
+    - Updated fail fast state text
+
 ## [1.5.2] - 2022-03-08
 
 ### Changed

package/dist/cjs/sqm-big-stat_35.cjs.entry.js

@@ -138,34 +138,41 @@ const style = {
   Heading: {
     display: "inline-block",
   },
-  Alert: {
-    margin: "28px",
+  Children: {
+    display: "none",
   },
 };
 const sheet = JSS.createStyleSheet(style);
 const styleString = sheet.toString();
-function RequiredPropsError({ missingProps }) {
+function RequiredPropsError({ missingProps, heading = "There was a problem loading this section", subheading = "There was a technical problem that prevented this section from loading. Please contact us with the link to this page.", description = "Error occured while loading <{tagName}>. Values for the following attributes are missing:", }, children) {
   if (!missingProps)
     return false;
   const host = index_module.P();
   const [detailsOpen, setDetailsOpen] = stencilHooks_module.useState(false);
-  return (index.h("sl-alert", { type: "danger", open: true, class: sheet.classes.Alert },
+  return (index.h("sl-alert", { type: "danger", open: true },
     index.h("style", { type: "text/css" }, styleString),
     index.h("div", { slot: "icon", class: sheet.classes.IconStyle },
       index.h("sl-icon", { name: "exclamation-octagon" })),
     index.h("div", { class: sheet.classes.DivStyle },
-      index.h("h2", { class: sheet.classes.Heading }, "There was a problem loading this section"),
-      index.h("p", null, "There was a technical problem that prevented this section from loading. Please contact us with the link to this page.")),
+      index.h("h2", { class: sheet.classes.Heading }, global.intl.formatMessage({
+        id: `error-heading`,
+        defaultMessage: heading,
+      })),
+      index.h("p", null, global.intl.formatMessage({
+        id: `error-subheading`,
+        defaultMessage: subheading,
+      }))),
     index.h("details", { class: sheet.classes.Details },
       index.h("summary", { onClick: () => setDetailsOpen(!detailsOpen) },
         detailsOpen ? "Less" : "More",
         " details"),
-      index.h("p", null,
-        "Error occured while loading ",
-        `<${host.tagName.toLowerCase()}>`,
-        ". Values for the following attributes are missing:"),
+      index.h("p", null, global.intl.formatMessage({
+        id: `error-description`,
+        defaultMessage: description,
+      }, { tagName: host.tagName.toLowerCase() })),
       index.h("ul", null, missingProps.map((prop) => (index.h("li", null,
-        index.h("strong", null, prop.attribute))))))));
+        index.h("strong", null, prop.attribute)))))),
+    index.h("div", { class: sheet.classes.Children }, children)));
 }
 
 const FORM_VALIDATION_CONTEXT = "sq:validation-state";
@@ -225,7 +232,7 @@ const CheckboxField = class {
       },
     ]);
     if (!index_module.jn() && missingProps) {
-      return index.h(RequiredPropsError, { missingProps: missingProps });
+      return (index.h(RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this form", subheading: "A technical problem prevented this checkbox field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }));
     }
     const content = {
       ...utils.getProps(this),
@@ -351,7 +358,7 @@ const DropdownField = class {
       },
     ]);
     if (!index_module.jn() && missingProps) {
-      return index.h(RequiredPropsError, { missingProps: missingProps });
+      return (index.h(RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this form", subheading: "A technical problem prevented this drop down field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }, index.h("slot", null)));
     }
     const content = {
       ...utils.getProps(this),
@@ -821,10 +828,11 @@ const InputField = class {
      * @uiName Input Type
      * @uiType string
      * @uiEnum ["text", "date", "tel"]
+     * @uiEnumNames ["Text", "Date", "Phone Number"]
      */
     this.fieldType = "text";
     /**
-     * @uiName Empty error message
+     * @uiName Required Error Message
      */
     this.errorMessage = "Cannot be empty";
     /**
@@ -845,7 +853,7 @@ const InputField = class {
       },
     ]);
     if (!index_module.jn() && missingProps) {
-      return index.h(RequiredPropsError, { missingProps: missingProps });
+      return (index.h(RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this form", subheading: "A technical problem prevented this input field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }));
     }
     const { states } = index_module.jn() ? useInputFieldDemo(this) : useInputField();
     return index.h(ShadowViewAddon.InputFieldView, { states: states, content: content });
@@ -5840,7 +5848,7 @@ const SqmReferralIframe = class {
       },
     ]);
     if (missingProps) {
-      return index.h(RequiredPropsError, { missingProps: missingProps });
+      return (index.h(RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this page", subheading: "A technical problem prevented this iframe from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }));
     }
     const { states, data } = index_module.jn()
       ? useReferralIframeDemo(utils.getProps(this))

package/dist/cjs/sqm-stencilbook.cjs.entry.js

@@ -9893,7 +9893,7 @@ const NameFields$1 = /*#__PURE__*/Object.freeze({
   NameFieldsWithErrors: NameFieldsWithErrors
 });
 
-const scenario$i = "@owner:sam\r\n@author:sam\r\nFeature: Checkbox Field\r\n\r\n  Field to be used to be used as a checkbox during registration. A motivating use case is to use this component as a terms\r\n  and conditions field, to sastisfy legal requirements that a customer might have for their end users.\r\n\r\n  Background: A user is on the portal registration page\r\n    Given a user is viewing the \"/register\"\r\n    And \"/register\" contains the registration form\r\n    And the registration form has the following fields\r\n      | fields     |\r\n      | first name |\r\n      | last name  |\r\n      | email      |\r\n      | password   |\r\n      | checkbox   |\r\n\r\n  @motivating\r\n  Scenario: Checkbox is required by default\r\n    Given the user is filling out the registration form\r\n    And the name fields have valid input\r\n    And the email field has valid input\r\n    And the password field has valid input\r\n    And the checkbox is not checked\r\n    When they try to register\r\n    Then the checkbox is highlighted in red\r\n    And the error message says \"Must be checked\"\r\n\r\n  @landmine\r\n  Scenario: Checkboxes with the same \"checkbox-name\" are not submitted in the form data\r\n    Given the register form has the following html\r\n      \"\"\"\r\n      <sqm-portal-register>\r\n      <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n      <sqm-checkbox-field\r\n      slot=\"formData\"\r\n      checkbox-label=\"I am not a robot\"\r\n      error-message=\"Cannot be a robot\"\r\n      checkbox-name=\"isHuman\"\r\n      ></sqm-checkbox-field>\r\n      <div slot=\"terms\">\r\n      <sqm-checkbox-field checkbox-name=\"isHuman\"></sqm-checkbox-field>\r\n      </div>\r\n      </sqm-portal-register>\r\n      \"\"\"\r\n    And the checkboxes are checked\r\n    When the user tries to register\r\n    Then the form is submitted\r\n    But no field with key \"isHuman\" is included in the form data\r\n\r\n  @motivating\r\n  Scenario: Multiple checkboxes need different \"checkbox-name\" values\r\n    Given the register form has the following html\r\n      \"\"\"\r\n      <sqm-portal-register>\r\n      <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n      <sqm-checkbox-field\r\n      slot=\"formData\"\r\n      checkbox-label=\"I am not a robot\"\r\n      error-message=\"Cannot be a robot\"\r\n      checkbox-name=\"isHuman\"\r\n      ></sqm-checkbox-field>\r\n      <div slot=\"terms\">\r\n      <sqm-checkbox-field checkbox-name=\"myCheckbox\"></sqm-checkbox-field>\r\n      </div>\r\n      </sqm-portal-register>\r\n      \"\"\"\r\n    And the checkboxes are not checked\r\n    When the user tries to register\r\n    Then both checkboxes are bordered in red\r\n    And the checkboxes have different error messages\r\n    When the user checks the boxes\r\n    And tries to register\r\n    Then the form is submitted\r\n    And the following fields are included in the form data\r\n      | feilds     |\r\n      | isHuman    |\r\n      | myCheckbox |\r\n\r\n  @motivating\r\n  Scenario: Checkboxes can be optional\r\n    Given the register form has the following html\r\n      \"\"\"\r\n      <sqm-portal-register>\r\n      <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n      <sqm-checkbox-field\r\n      slot=\"formData\"\r\n      checkbox-label=\"I am not a robot\"\r\n      checkbox-optional=\"true\"\r\n      checkbox-name=\"isHuman\"\r\n      />\r\n      </sqm-portal-register>\r\n      \"\"\"\r\n    And the checkbox is not checked\r\n    When the user tries to register\r\n    Then there is no error for the checkbox\r\n\r\n  @minutae\r\n  Scenario Outline: Validation error message is configurable\r\n    The error message string is evaluated as an ICU string, but currently is provided no context\r\n    Given the checkbox is required\r\n    And the checkbox has prop \"error-message\" with <propValue>\r\n    When the user tries to register\r\n    But they havent checked the checkbox\r\n    Then they see <errorMessage> below\r\n    Examples:\r\n      | propValue         | errorMessage      |\r\n      |                   | Must be checked   |\r\n      | My Custom Message | My Custom Message |\r\n\r\n  @motivating\r\n  Scenario Outline: Checkbox text and link are configurable\r\n    Given the checkbox has the following prop values\r\n      | prop                     | value           |\r\n      | checkbox-label           | <labelText>     |\r\n      | checkbox-label-link      | <labelLink>     |\r\n      | checkbox-label-link-text | <labelLinkText> |\r\n    When the user views the checkbox\r\n    Then they see <text>\r\n    And when they click <labelLinkText> they are redirected to <labelLink>\r\n    #First example below is the defaults set by the controller\r\n    Examples:\r\n      | labelText                                            | labelLinkText        | labelLink                 | text                                                 |\r\n      | By signing up you agree to the {labelLink}           | Terms and Conditions | https://example.com       | By signing up you agree to the Terms and Conditions  |\r\n      | Read our {labelLink} before registration             | Terms of Service     | https://example.com/terms | Read our Terms of Service before registration        |\r\n      | By registering you agree to our terms and conditions | N/A                  | N/A                       | By registering you agree to our terms and conditions |\r\n\r\n  @motivating\r\n  Scenario: The form field name attribute is configurable\r\n    Given the checkbox has prop \"checkbox-name\" with value \"myCheckBox\"\r\n    When the user checks the box\r\n    And they register\r\n    Then the value of the checkbox is submitted under \"myCheckBox\" field\r\n\r\n  @minutae\r\n  Scenario Outline: The checkbox field component fails fast if a checkbox name isn't provided\r\n    Given the checkbox <mayHave> prop \"checkbox-name\"\r\n    And it <mayHavePropValue>\r\n    When a user views the checkbox\r\n    Then an alert with an error message is displayed in place of the checkbox\r\n    And it has a details section\r\n    When \"More details\" is clicked\r\n    Then the following information will be displayed\r\n      | component being used |\r\n      | missing attribute(s) |\r\n    Examples:\r\n      | mayBeAnAttribute | mayHavePropValue |\r\n      | doesn't have     | N/A              |\r\n      | has              | \"\"               |\r\n      | has              |                  |";
+const scenario$i = "@owner:sam\r\n@author:sam\r\nFeature: Checkbox Field\r\n\r\n  Field to be used to be used as a checkbox during registration. A motivating use case is to use this component as a terms\r\n  and conditions field, to sastisfy legal requirements that a customer might have for their end users.\r\n\r\n  Background: A user is on the portal registration page\r\n    Given a user is viewing the \"/register\"\r\n    And \"/register\" contains the registration form\r\n    And the registration form has the following fields\r\n      | fields     |\r\n      | first name |\r\n      | last name  |\r\n      | email      |\r\n      | password   |\r\n      | checkbox   |\r\n\r\n  @motivating\r\n  Scenario: Checkbox is required by default\r\n    Given the user is filling out the registration form\r\n    And the name fields have valid input\r\n    And the email field has valid input\r\n    And the password field has valid input\r\n    And the checkbox is not checked\r\n    When they try to register\r\n    Then the checkbox is highlighted in red\r\n    And the error message says \"Must be checked\"\r\n\r\n  @landmine\r\n  Scenario: Checkboxes with the same \"checkbox-name\" are not submitted in the form data\r\n    Given the register form has the following html\r\n      \"\"\"\r\n      <sqm-portal-register>\r\n      <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n      <sqm-checkbox-field\r\n      slot=\"formData\"\r\n      checkbox-label=\"I am not a robot\"\r\n      error-message=\"Cannot be a robot\"\r\n      checkbox-name=\"isHuman\"\r\n      ></sqm-checkbox-field>\r\n      <div slot=\"terms\">\r\n      <sqm-checkbox-field checkbox-name=\"isHuman\"></sqm-checkbox-field>\r\n      </div>\r\n      </sqm-portal-register>\r\n      \"\"\"\r\n    And the checkboxes are checked\r\n    When the user tries to register\r\n    Then the form is submitted\r\n    But no field with key \"isHuman\" is included in the form data\r\n\r\n  @motivating\r\n  Scenario: Multiple checkboxes need different \"checkbox-name\" values\r\n    Given the register form has the following html\r\n      \"\"\"\r\n      <sqm-portal-register>\r\n      <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n      <sqm-checkbox-field\r\n      slot=\"formData\"\r\n      checkbox-label=\"I am not a robot\"\r\n      error-message=\"Cannot be a robot\"\r\n      checkbox-name=\"isHuman\"\r\n      ></sqm-checkbox-field>\r\n      <div slot=\"terms\">\r\n      <sqm-checkbox-field checkbox-name=\"myCheckbox\"></sqm-checkbox-field>\r\n      </div>\r\n      </sqm-portal-register>\r\n      \"\"\"\r\n    And the checkboxes are not checked\r\n    When the user tries to register\r\n    Then both checkboxes are bordered in red\r\n    And the checkboxes have different error messages\r\n    When the user checks the boxes\r\n    And tries to register\r\n    Then the form is submitted\r\n    And the following fields are included in the form data\r\n      | feilds     |\r\n      | isHuman    |\r\n      | myCheckbox |\r\n\r\n  @motivating\r\n  Scenario: Checkboxes can be optional\r\n    Given the register form has the following html\r\n      \"\"\"\r\n      <sqm-portal-register>\r\n      <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n      <sqm-checkbox-field\r\n      slot=\"formData\"\r\n      checkbox-label=\"I am not a robot\"\r\n      checkbox-optional=\"true\"\r\n      checkbox-name=\"isHuman\"\r\n      />\r\n      </sqm-portal-register>\r\n      \"\"\"\r\n    And the checkbox is not checked\r\n    When the user tries to register\r\n    Then there is no error for the checkbox\r\n\r\n  @minutae\r\n  Scenario Outline: Validation error message is configurable\r\n    The error message string is evaluated as an ICU string, but currently is provided no context\r\n    Given the checkbox is required\r\n    And the checkbox has prop \"error-message\" with <propValue>\r\n    When the user tries to register\r\n    But they havent checked the checkbox\r\n    Then they see <errorMessage> below\r\n    Examples:\r\n      | propValue         | errorMessage      |\r\n      |                   | Must be checked   |\r\n      | My Custom Message | My Custom Message |\r\n\r\n  @motivating\r\n  Scenario Outline: Checkbox text and link are configurable\r\n    Given the checkbox has the following prop values\r\n      | prop                     | value           |\r\n      | checkbox-label           | <labelText>     |\r\n      | checkbox-label-link      | <labelLink>     |\r\n      | checkbox-label-link-text | <labelLinkText> |\r\n    When the user views the checkbox\r\n    Then they see <text>\r\n    And when they click <labelLinkText> they are redirected to <labelLink>\r\n    #First example below is the defaults set by the controller\r\n    Examples:\r\n      | labelText                                            | labelLinkText        | labelLink                 | text                                                 |\r\n      | By signing up you agree to the {labelLink}           | Terms and Conditions | https://example.com       | By signing up you agree to the Terms and Conditions  |\r\n      | Read our {labelLink} before registration             | Terms of Service     | https://example.com/terms | Read our Terms of Service before registration        |\r\n      | By registering you agree to our terms and conditions | N/A                  | N/A                       | By registering you agree to our terms and conditions |\r\n\r\n  @motivating\r\n  Scenario: The form field name attribute is configurable\r\n    Given the checkbox has prop \"checkbox-name\" with value \"myCheckBox\"\r\n    When the user checks the box\r\n    And they register\r\n    Then the boolean value of the checkbox is submitted under \"myCheckBox\" field\r\n\r\n  @minutae\r\n  Scenario Outline: The checkbox field component fails fast if a checkbox name isn't provided\r\n    Given the checkbox <mayHave> prop \"checkbox-name\"\r\n    And it <mayHavePropValue>\r\n    When a user views the checkbox\r\n    Then an alert with an error message is displayed in place of the checkbox\r\n    And it has a details section\r\n    When \"More details\" is clicked\r\n    Then the following information is displayed\r\n      | information          |\r\n      | component being used |\r\n      | missing attribute(s) |\r\n    Examples:\r\n      | mayBeAnAttribute | mayHavePropValue |\r\n      | doesn't have     | N/A              |\r\n      | has              | \"\"               |\r\n      | has              |                  |";
 
 const CheckboxField_stories = {
   title: "Components/Checkbox Field",
@@ -10042,7 +10042,7 @@ const MultipleCheckboxes = createHookStory(() => {
     index.h("sqm-name-fields", { slot: "formData" }),
     index.h("sqm-checkbox-field", { slot: "formData", "checkbox-label": "I am not a robot", "error-message": "Cannot be a robot", "checkbox-name": "isHuman" }),
     index.h("div", { slot: "terms" },
-      index.h("sqm-checkbox-field", null))));
+      index.h("sqm-checkbox-field", { "checkbox-name": "otherCheckbox" }))));
 });
 const OptionalCheckboxes = createHookStory(() => {
   setupGraphQL$9();
@@ -10050,7 +10050,7 @@ const OptionalCheckboxes = createHookStory(() => {
     index.h("sqm-name-fields", { slot: "formData" }),
     index.h("sqm-checkbox-field", { slot: "formData", "checkbox-label": "I am not a robot", "checkbox-optional": "true", "checkbox-name": "isHuman" }),
     index.h("div", { slot: "terms" },
-      index.h("sqm-checkbox-field", null))));
+      index.h("sqm-checkbox-field", { "checkbox-name": "required" }))));
 });
 const MissingName = createHookStory(() => {
   setupGraphQL$9();
@@ -10173,7 +10173,7 @@ const UseDropdownField = /*#__PURE__*/Object.freeze({
   MissingName: MissingName$1
 });
 
-const scenario$j = "@author:derek\r\n@owner:derek\r\nFeature: Form Input Field\r\n\r\n    This component is used as a custom registration field during registration. The field can be text,\r\n    a date or phone number. A motivating use case is to ask for a users company name, this value would then be mapped\r\n    through the Managed Identity Service and upserted on the user after registration.\r\n\r\n    Background: A user exists and is viewing the hosted portal registration\r\n        Given a user is viewing \"/register\"\r\n        And \"/register\" contains the registration form\r\n        And the registration form has a custom input field\r\n\r\n    @motivating\r\n    Scenario Outline: Input fields are required by default but can be optional\r\n        Given the input has prop \"field-optional\" with <value>\r\n        And the input is empty\r\n        When the user tries to register\r\n        Then the input <mayBe> highlighted in red\r\n        And an error message <mayAppear> in red below\r\n        And form submission <mayBe> blocked\r\n        Examples:\r\n            | value | mayBe | mayAppear      |\r\n            | false | is    | appears        |\r\n            |       | is    | appears        |\r\n            | true  | isn't | doesn't appear |\r\n\r\n    @motivating\r\n    Scenario: Input field labels are configurable\r\n        Given the input has prop \"field-label\" with value \"My Custom Input\"\r\n        When the user views the registration form\r\n        Then they see the input field\r\n        And it has label \"My Custom Input\" above the input\r\n\r\n    @minutae\r\n    Scenario Outline: The validation error message is configurable\r\n        The error message string is evaluated as an ICU string, but currently is provided no context\r\n        Given the input is required\r\n        And it has prop \"error-message\" with <value>\r\n        When the user tries to register\r\n        But they haven't filled in the input\r\n        Then they see <errorMessage> below\r\n        Examples:\r\n            | value             | errorMessage      |\r\n            |                   | Cannot be empty   |\r\n            | My Custom Message | My Custom Message |\r\n\r\n    @motivating\r\n    Scenario: Form data attribute name is configurable\r\n        Given the input has prop \"field-name\" with value \"myCustomField\"\r\n        When the user types \"testing testing\" into the input\r\n        And they register\r\n        Then \"testing testing\" is submitted under \"myCustomField\" in the form data\r\n\r\n    @motivating\r\n    Scenario Outline: The input field is a text input by default\r\n        Given the input <mayHave> prop \"field-type\" with <value>\r\n        When the user views the input field\r\n        Then it is a text input\r\n        Examples:\r\n            | mayHave      | value |\r\n            | has          | text  |\r\n            | doesn't have |       |\r\n\r\n    @motivating\r\n    Scenario: Date type inputs are supported\r\n        Given the input has prop \"field-type\" \"date\"\r\n        When the user views the input field\r\n        Then they see \"mm/dd/yyyy\" as a placeholder\r\n        And they see a calendar icon on the right\r\n        When they start typing a date\r\n        Then it maintains the \"mm/dd/yyyy\" format\r\n        When they click the calendar icon\r\n        Then a dropdown appears\r\n        And they see a calendar\r\n        When they select a date\r\n        Then it is applied to the input\r\n\r\n    @motivating\r\n    Scenario: Phone number type inputs are supported\r\n        Given the input has prop \"field-type\" with value \"tel\"\r\n        When the user starts typing a phone number in the input\r\n        Then it is formatted into the following form \"(XXX) XXX-XXXX\"\r\n        When they pre-fix their phone number with a \"1\"\r\n        Then it is formatted into the following form \"1 (XXX) XXX-XXXX\"\r\n\r\n    @landmine\r\n    Scenario: Telephone formatting is removed after 10 numbers\r\n        Given a user using a phone number input field\r\n        And they entered their 10 character phone number\r\n        And it was not prefixed with a 1\r\n        When they add another character\r\n        Then the formatting is removed\r\n\r\n    @landmine\r\n    Scenario Outline: Input values are always recorded as strings in the form data\r\n        Given the input has prop \"field-type\" with <value>\r\n        And it has a \"field-name\"\r\n        When the user inputs <formInput>\r\n        And they register\r\n        Then <formData> is recorded in the form data as a string\r\n        Examples:\r\n            | value | formInput      | formData       |\r\n            | text  | Hello there    | Hello there    |\r\n            | date  | 05/07/2021     | 2021-05-07     |\r\n            | tel   | (250) 234-9877 | (250) 234-9877 |\r\n\r\n    @minutae\r\n    Scenario Outline: The input field component fails fast if a field name isn't provided\r\n        Given the input <mayHave> prop \"field-name\"\r\n        And it <mayHavePropValue>\r\n        When a user views the input\r\n        Then an alert with an error message is displayed in place of the input\r\n        And it has a details section\r\n        When \"More details\" is clicked\r\n        Then the following information will be displayed\r\n            | component being used |\r\n            | missing attribute(s) |\r\n        Examples:\r\n            | mayBeAnAttribute | mayHavePropValue |\r\n            | doesn't have     | N/A              |\r\n            | has              | \"\"               |\r\n            | has              |                  |";
+const scenario$j = "@author:derek\r\n@owner:derek\r\nFeature: Form Input Field\r\n\r\n    This component is used as a custom registration field during registration. The field can be text,\r\n    a date or phone number. A motivating use case is to ask for a users company name, this value would then be mapped\r\n    through the Managed Identity Service and upserted on the user after registration.\r\n\r\n    Background: A user exists and is viewing the hosted portal registration\r\n        Given a user is viewing \"/register\"\r\n        And \"/register\" contains the registration form\r\n        And the registration form has a custom input field\r\n\r\n    @motivating\r\n    Scenario Outline: Input fields are required by default but can be optional\r\n        Given the input has prop \"field-optional\" with <value>\r\n        And the input is empty\r\n        When the user tries to register\r\n        Then the input <mayBe> highlighted in red\r\n        And an error message <mayAppear> in red below\r\n        And form submission <mayBe> blocked\r\n        Examples:\r\n            | value | mayBe | mayAppear      |\r\n            | false | is    | appears        |\r\n            |       | is    | appears        |\r\n            | true  | isn't | doesn't appear |\r\n\r\n    @motivating\r\n    Scenario: Input field labels are configurable\r\n        Given the input has prop \"field-label\" with value \"My Custom Input\"\r\n        When the user views the registration form\r\n        Then they see the input field\r\n        And it has label \"My Custom Input\" above the input\r\n\r\n    @minutae\r\n    Scenario Outline: The validation error message is configurable\r\n        The error message string is evaluated as an ICU string, but currently is provided no context\r\n        Given the input is required\r\n        And it has prop \"error-message\" with <value>\r\n        When the user tries to register\r\n        But they haven't filled in the input\r\n        Then they see <errorMessage> below\r\n        Examples:\r\n            | value             | errorMessage      |\r\n            |                   | Cannot be empty   |\r\n            | My Custom Message | My Custom Message |\r\n\r\n    @motivating\r\n    Scenario: Form data attribute name is configurable\r\n        Given the input has prop \"field-name\" with value \"myCustomField\"\r\n        When the user types \"testing testing\" into the input\r\n        And they register\r\n        Then \"testing testing\" is submitted under \"myCustomField\" in the form data\r\n\r\n    @motivating\r\n    Scenario Outline: The input field is a text input by default\r\n        Given the input <mayHave> prop \"field-type\" with <value>\r\n        When the user views the input field\r\n        Then it is a text input\r\n        Examples:\r\n            | mayHave      | value |\r\n            | has          | text  |\r\n            | doesn't have |       |\r\n\r\n    @motivating\r\n    Scenario: Date type inputs are supported\r\n        Given the input has prop \"field-type\" \"date\"\r\n        When the user views the input field\r\n        Then they see \"mm/dd/yyyy\" as a placeholder\r\n        And they see a calendar icon on the right\r\n        When they start typing a date\r\n        Then it maintains the \"mm/dd/yyyy\" format\r\n        When they click the calendar icon\r\n        Then a dropdown appears\r\n        And they see a calendar\r\n        When they select a date\r\n        Then it is applied to the input\r\n\r\n    @landmine\r\n    Scenario: The clear text button in the date picker does not clear the date\r\n        Due to an incompatibility between our shoelace version and the browser, the clear funtionality is not supported currently\r\n        Given the input has prop \"field-type\" \"date\"\r\n        And the user has entered a date\r\n        When they click the calendar icon\r\n        And click the 'clear' text button\r\n        Then their selected date is not cleared\r\n\r\n    @motivating\r\n    Scenario: Phone number type inputs are supported\r\n        Given the input has prop \"field-type\" with value \"tel\"\r\n        When the user starts typing a phone number in the input\r\n        Then it is formatted into the following form \"(XXX) XXX-XXXX\"\r\n        When they pre-fix their phone number with a \"1\"\r\n        Then it is formatted into the following form \"1 (XXX) XXX-XXXX\"\r\n\r\n    @landmine\r\n    Scenario: Telephone formatting is removed after 10 numbers\r\n        Given a user using a phone number input field\r\n        And they entered their 10 character phone number\r\n        And it was not prefixed with a 1\r\n        When they add another character\r\n        Then the formatting is removed\r\n\r\n    @landmine\r\n    Scenario Outline: Input values are always recorded as strings in the form data\r\n        Given the input has prop \"field-type\" with <value>\r\n        And it has a \"field-name\"\r\n        When the user inputs <formInput>\r\n        And they register\r\n        Then <formData> is recorded in the form data as a string\r\n        Examples:\r\n            | value | formInput      | formData       |\r\n            | text  | Hello there    | Hello there    |\r\n            | date  | 05/07/2021     | 2021-05-07     |\r\n            | tel   | (250) 234-9877 | (250) 234-9877 |\r\n\r\n    @minutae\r\n    Scenario Outline: The input field component fails fast if a field name isn't provided\r\n        Given the input <mayHave> prop \"field-name\"\r\n        And it <mayHavePropValue>\r\n        When a user views the input\r\n        Then an alert with an error message is displayed in place of the input\r\n        And it has a details section\r\n        When \"More details\" is clicked\r\n        Then the following information is displayed\r\n            | information          |\r\n            | component being used |\r\n            | missing attribute(s) |\r\n        Examples:\r\n            | mayBeAnAttribute | mayHavePropValue |\r\n            | doesn't have     | N/A              |\r\n            | has              | \"\"               |\r\n            | has              |                  |";
 
 const InputField_stories = {
   title: "Components/Input Field",

package/dist/collection/components/sqm-checkbox-field/UseCheckboxField.stories.js

@@ -50,7 +50,7 @@ export const MultipleCheckboxes = createHookStory(() => {
     h("sqm-name-fields", { slot: "formData" }),
     h("sqm-checkbox-field", { slot: "formData", "checkbox-label": "I am not a robot", "error-message": "Cannot be a robot", "checkbox-name": "isHuman" }),
     h("div", { slot: "terms" },
-      h("sqm-checkbox-field", null))));
+      h("sqm-checkbox-field", { "checkbox-name": "otherCheckbox" }))));
 });
 export const OptionalCheckboxes = createHookStory(() => {
   setupGraphQL();
@@ -58,7 +58,7 @@ export const OptionalCheckboxes = createHookStory(() => {
     h("sqm-name-fields", { slot: "formData" }),
     h("sqm-checkbox-field", { slot: "formData", "checkbox-label": "I am not a robot", "checkbox-optional": "true", "checkbox-name": "isHuman" }),
     h("div", { slot: "terms" },
-      h("sqm-checkbox-field", null))));
+      h("sqm-checkbox-field", { "checkbox-name": "required" }))));
 });
 export const MissingName = createHookStory(() => {
   setupGraphQL();

package/dist/collection/components/sqm-checkbox-field/sqm-checkbox-field.js

@@ -44,7 +44,7 @@ export class CheckboxField {
       },
     ]);
     if (!isDemo() && missingProps) {
-      return h(RequiredPropsError, { missingProps: missingProps });
+      return (h(RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this form", subheading: "A technical problem prevented this checkbox field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }));
     }
     const content = {
       ...getProps(this),
@@ -204,6 +204,9 @@ export class CheckboxField {
         "tags": [{
             "text": undefined,
             "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
           }],
         "text": ""
       }

package/dist/collection/components/sqm-dropdown-field/sqm-dropdown-field.js

@@ -35,7 +35,8 @@ export class DropdownField {
       },
     ]);
     if (!isDemo() && missingProps) {
-      return h(RequiredPropsError, { missingProps: missingProps });
+      return (h(RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this form", subheading: "A technical problem prevented this drop down field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" },
+        h("slot", null)));
     }
     const content = {
       ...getProps(this),
@@ -154,6 +155,9 @@ export class DropdownField {
         "tags": [{
             "text": undefined,
             "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
           }],
         "text": ""
       }

package/dist/collection/components/sqm-input-field/sqm-input-field.js

@@ -16,10 +16,11 @@ export class InputField {
      * @uiName Input Type
      * @uiType string
      * @uiEnum ["text", "date", "tel"]
+     * @uiEnumNames ["Text", "Date", "Phone Number"]
      */
     this.fieldType = "text";
     /**
-     * @uiName Empty error message
+     * @uiName Required Error Message
      */
     this.errorMessage = "Cannot be empty";
     /**
@@ -40,7 +41,7 @@ export class InputField {
       },
     ]);
     if (!isDemo() && missingProps) {
-      return h(RequiredPropsError, { missingProps: missingProps });
+      return (h(RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this form", subheading: "A technical problem prevented this input field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }));
     }
     const { states } = isDemo() ? useInputFieldDemo(this) : useInputField();
     return h(InputFieldView, { states: states, content: content });
@@ -59,10 +60,10 @@ export class InputField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Input name attribute",
+            "text": "Input Name Attribute",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Used as the key of the inputs value in form data."
       },
       "attribute": "field-name",
       "reflect": false
@@ -79,7 +80,7 @@ export class InputField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Input label",
+            "text": "Input Label",
             "name": "uiName"
           }],
         "text": ""
@@ -107,6 +108,9 @@ export class InputField {
           }, {
             "text": "[\"text\", \"date\", \"tel\"]",
             "name": "uiEnum"
+          }, {
+            "text": "[\"Text\", \"Date\", \"Phone Number\"]",
+            "name": "uiEnumNames"
           }],
         "text": ""
       },
@@ -126,7 +130,7 @@ export class InputField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Empty error message",
+            "text": "Required Error Message",
             "name": "uiName"
           }],
         "text": ""
@@ -179,6 +183,9 @@ export class InputField {
         "tags": [{
             "text": undefined,
             "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
           }],
         "text": ""
       }

package/dist/collection/components/sqm-name-fields/sqm-name-fields.js

@@ -92,6 +92,9 @@ export class NameFields {
         "tags": [{
             "text": undefined,
             "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
           }],
         "text": ""
       }

package/dist/collection/components/sqm-referral-iframe/sqm-referral-iframe.js

@@ -31,7 +31,7 @@ export class SqmReferralIframe {
       },
     ]);
     if (missingProps) {
-      return h(RequiredPropsError, { missingProps: missingProps });
+      return (h(RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this page", subheading: "A technical problem prevented this iframe from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }));
     }
     const { states, data } = isDemo()
       ? useReferralIframeDemo(getProps(this))

package/dist/collection/utils/RequiredPropsError.js

@@ -1,6 +1,7 @@
 import { useHost } from "@saasquatch/component-boilerplate";
 import { useState } from "@saasquatch/universal-hooks";
 import { h } from "@stencil/core";
+import { intl } from "../global/global";
 import { createStyleSheet } from "../styling/JSS";
 const style = {
   IconStyle: {
@@ -17,32 +18,39 @@ const style = {
   Heading: {
     display: "inline-block",
   },
-  Alert: {
-    margin: "28px",
+  Children: {
+    display: "none",
   },
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
-export function RequiredPropsError({ missingProps }) {
+export function RequiredPropsError({ missingProps, heading = "There was a problem loading this section", subheading = "There was a technical problem that prevented this section from loading. Please contact us with the link to this page.", description = "Error occured while loading <{tagName}>. Values for the following attributes are missing:", }, children) {
   if (!missingProps)
     return false;
   const host = useHost();
   const [detailsOpen, setDetailsOpen] = useState(false);
-  return (h("sl-alert", { type: "danger", open: true, class: sheet.classes.Alert },
+  return (h("sl-alert", { type: "danger", open: true },
     h("style", { type: "text/css" }, styleString),
     h("div", { slot: "icon", class: sheet.classes.IconStyle },
       h("sl-icon", { name: "exclamation-octagon" })),
     h("div", { class: sheet.classes.DivStyle },
-      h("h2", { class: sheet.classes.Heading }, "There was a problem loading this section"),
-      h("p", null, "There was a technical problem that prevented this section from loading. Please contact us with the link to this page.")),
+      h("h2", { class: sheet.classes.Heading }, intl.formatMessage({
+        id: `error-heading`,
+        defaultMessage: heading,
+      })),
+      h("p", null, intl.formatMessage({
+        id: `error-subheading`,
+        defaultMessage: subheading,
+      }))),
     h("details", { class: sheet.classes.Details },
       h("summary", { onClick: () => setDetailsOpen(!detailsOpen) },
         detailsOpen ? "Less" : "More",
         " details"),
-      h("p", null,
-        "Error occured while loading ",
-        `<${host.tagName.toLowerCase()}>`,
-        ". Values for the following attributes are missing:"),
+      h("p", null, intl.formatMessage({
+        id: `error-description`,
+        defaultMessage: description,
+      }, { tagName: host.tagName.toLowerCase() })),
       h("ul", null, missingProps.map((prop) => (h("li", null,
-        h("strong", null, prop.attribute))))))));
+        h("strong", null, prop.attribute)))))),
+    h("div", { class: sheet.classes.Children }, children)));
 }

package/dist/esm/sqm-big-stat_35.entry.js

@@ -134,34 +134,41 @@ const style = {
   Heading: {
     display: "inline-block",
   },
-  Alert: {
-    margin: "28px",
+  Children: {
+    display: "none",
   },
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
-function RequiredPropsError({ missingProps }) {
+function RequiredPropsError({ missingProps, heading = "There was a problem loading this section", subheading = "There was a technical problem that prevented this section from loading. Please contact us with the link to this page.", description = "Error occured while loading <{tagName}>. Values for the following attributes are missing:", }, children) {
   if (!missingProps)
     return false;
   const host = P();
   const [detailsOpen, setDetailsOpen] = useState(false);
-  return (h$1("sl-alert", { type: "danger", open: true, class: sheet.classes.Alert },
+  return (h$1("sl-alert", { type: "danger", open: true },
     h$1("style", { type: "text/css" }, styleString),
     h$1("div", { slot: "icon", class: sheet.classes.IconStyle },
       h$1("sl-icon", { name: "exclamation-octagon" })),
     h$1("div", { class: sheet.classes.DivStyle },
-      h$1("h2", { class: sheet.classes.Heading }, "There was a problem loading this section"),
-      h$1("p", null, "There was a technical problem that prevented this section from loading. Please contact us with the link to this page.")),
+      h$1("h2", { class: sheet.classes.Heading }, intl.formatMessage({
+        id: `error-heading`,
+        defaultMessage: heading,
+      })),
+      h$1("p", null, intl.formatMessage({
+        id: `error-subheading`,
+        defaultMessage: subheading,
+      }))),
     h$1("details", { class: sheet.classes.Details },
       h$1("summary", { onClick: () => setDetailsOpen(!detailsOpen) },
         detailsOpen ? "Less" : "More",
         " details"),
-      h$1("p", null,
-        "Error occured while loading ",
-        `<${host.tagName.toLowerCase()}>`,
-        ". Values for the following attributes are missing:"),
+      h$1("p", null, intl.formatMessage({
+        id: `error-description`,
+        defaultMessage: description,
+      }, { tagName: host.tagName.toLowerCase() })),
       h$1("ul", null, missingProps.map((prop) => (h$1("li", null,
-        h$1("strong", null, prop.attribute))))))));
+        h$1("strong", null, prop.attribute)))))),
+    h$1("div", { class: sheet.classes.Children }, children)));
 }
 
 const FORM_VALIDATION_CONTEXT = "sq:validation-state";
@@ -221,7 +228,7 @@ const CheckboxField = class {
       },
     ]);
     if (!jn() && missingProps) {
-      return h$1(RequiredPropsError, { missingProps: missingProps });
+      return (h$1(RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this form", subheading: "A technical problem prevented this checkbox field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }));
     }
     const content = {
       ...getProps(this),
@@ -347,7 +354,7 @@ const DropdownField = class {
       },
     ]);
     if (!jn() && missingProps) {
-      return h$1(RequiredPropsError, { missingProps: missingProps });
+      return (h$1(RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this form", subheading: "A technical problem prevented this drop down field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }, h$1("slot", null)));
     }
     const content = {
       ...getProps(this),
@@ -817,10 +824,11 @@ const InputField = class {
      * @uiName Input Type
      * @uiType string
      * @uiEnum ["text", "date", "tel"]
+     * @uiEnumNames ["Text", "Date", "Phone Number"]
      */
     this.fieldType = "text";
     /**
-     * @uiName Empty error message
+     * @uiName Required Error Message
      */
     this.errorMessage = "Cannot be empty";
     /**
@@ -841,7 +849,7 @@ const InputField = class {
       },
     ]);
     if (!jn() && missingProps) {
-      return h$1(RequiredPropsError, { missingProps: missingProps });
+      return (h$1(RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this form", subheading: "A technical problem prevented this input field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }));
     }
     const { states } = jn() ? useInputFieldDemo(this) : useInputField();
     return h$1(InputFieldView, { states: states, content: content });
@@ -5836,7 +5844,7 @@ const SqmReferralIframe = class {
       },
     ]);
     if (missingProps) {
-      return h$1(RequiredPropsError, { missingProps: missingProps });
+      return (h$1(RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this page", subheading: "A technical problem prevented this iframe from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }));
     }
     const { states, data } = jn()
       ? useReferralIframeDemo(getProps(this))