@saasquatch/mint-components 1.5.3-2 → 1.5.3-5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{ShadowViewAddon-8de07cc1.js → ShadowViewAddon-a94a1ff9.js} +12 -3
- package/dist/cjs/sqm-big-stat_35.cjs.entry.js +16 -12
- package/dist/cjs/sqm-stencilbook.cjs.entry.js +34 -8
- package/dist/collection/components/sqm-checkbox-field/CheckboxField.stories.js +4 -1
- package/dist/collection/components/sqm-checkbox-field/UseCheckboxField.stories.js +7 -1
- package/dist/collection/components/sqm-checkbox-field/sqm-checkbox-field-view.js +4 -1
- package/dist/collection/components/sqm-checkbox-field/sqm-checkbox-field.js +1 -1
- package/dist/collection/components/sqm-dropdown-field/UseDropdownField.stories.js +8 -0
- package/dist/collection/components/sqm-dropdown-field/sqm-dropdown-field-view.js +5 -1
- package/dist/collection/components/sqm-dropdown-field/sqm-dropdown-field.js +3 -2
- package/dist/collection/components/sqm-input-field/UseInputField.stories.js +6 -0
- package/dist/collection/components/sqm-input-field/sqm-input-field-view.js +5 -1
- package/dist/collection/components/sqm-input-field/sqm-input-field.js +1 -1
- package/dist/collection/utils/RequiredPropsError.js +11 -7
- package/dist/esm/{ShadowViewAddon-63a40a95.js → ShadowViewAddon-87c6e4d6.js} +12 -3
- package/dist/esm/sqm-big-stat_35.entry.js +16 -12
- package/dist/esm/sqm-stencilbook.entry.js +34 -8
- package/dist/esm-es5/{ShadowViewAddon-63a40a95.js → ShadowViewAddon-87c6e4d6.js} +1 -1
- package/dist/esm-es5/sqm-big-stat_35.entry.js +1 -1
- package/dist/esm-es5/sqm-stencilbook.entry.js +1 -1
- package/dist/mint-components/mint-components.esm.js +1 -1
- package/dist/mint-components/{p-d336a610.system.js → p-02b6ea85.system.js} +1 -1
- package/dist/mint-components/p-436da6b8.system.js +1 -1
- package/dist/mint-components/{p-ff22834a.entry.js → p-4bf2f76f.entry.js} +2 -2
- package/dist/mint-components/p-bd39e245.system.entry.js +1 -0
- package/dist/mint-components/{p-86263d7f.js → p-c195994f.js} +1 -1
- package/dist/mint-components/{p-e218474f.entry.js → p-e77873f3.entry.js} +2 -2
- package/dist/mint-components/{p-aa5474be.system.entry.js → p-f31aa58a.system.entry.js} +1 -1
- package/dist/types/components/sqm-checkbox-field/UseCheckboxField.stories.d.ts +6 -0
- package/dist/types/components/sqm-dropdown-field/UseDropdownField.stories.d.ts +6 -0
- package/dist/types/components/sqm-input-field/UseInputField.stories.d.ts +6 -0
- package/dist/types/global/android.d.ts +7 -0
- package/dist/types/global/demo.d.ts +1 -0
- package/dist/types/stories/features.d.ts +4 -0
- package/dist/types/stories/templates.d.ts +4 -0
- package/dist/types/utils/RequiredPropsError.d.ts +1 -1
- package/package.json +1 -1
- package/dist/mint-components/p-9e34ff81.system.entry.js +0 -1
|
@@ -2525,7 +2525,10 @@ function CheckboxFieldView(props) {
|
|
|
2525
2525
|
}, {
|
|
2526
2526
|
labelLink: (index.h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
|
|
2527
2527
|
}),
|
|
2528
|
-
!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (index.h("p", { class: sheet$a.classes.ErrorMessageStyle },
|
|
2528
|
+
!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (index.h("p", { class: sheet$a.classes.ErrorMessageStyle }, global.intl.formatMessage({
|
|
2529
|
+
id: `errorMessage-${content.checkboxName}`,
|
|
2530
|
+
defaultMessage: content.errorMessage,
|
|
2531
|
+
}))))));
|
|
2529
2532
|
}
|
|
2530
2533
|
|
|
2531
2534
|
const style$b = {
|
|
@@ -2569,7 +2572,10 @@ function DropdownFieldView(props) {
|
|
|
2569
2572
|
class: sheet$b.classes.ErrorStyle,
|
|
2570
2573
|
}
|
|
2571
2574
|
: [])), content.selectOptions),
|
|
2572
|
-
(validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (index.h("p", { class: sheet$b.classes.ErrorMessageStyle },
|
|
2575
|
+
(validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (index.h("p", { class: sheet$b.classes.ErrorMessageStyle }, global.intl.formatMessage({
|
|
2576
|
+
id: `errorMessage-${content.dropdownName}`,
|
|
2577
|
+
defaultMessage: content.errorMessage,
|
|
2578
|
+
})))));
|
|
2573
2579
|
}
|
|
2574
2580
|
|
|
2575
2581
|
const style$c = {
|
|
@@ -2597,7 +2603,10 @@ function InputFieldView(props) {
|
|
|
2597
2603
|
styleString$c),
|
|
2598
2604
|
index.h("sl-input", Object.assign({ exportparts: "label: input-label", name: `/${content.fieldName}`, type: content.fieldType, label: content.fieldLabel }, (!content.fieldOptional ? { required: true } : []), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]) ? {
|
|
2599
2605
|
class: sheet$c.classes.ErrorStyle,
|
|
2600
|
-
helpText:
|
|
2606
|
+
helpText: global.intl.formatMessage({
|
|
2607
|
+
id: `errorMessage-${content.fieldName}`,
|
|
2608
|
+
defaultMessage: content.errorMessage || (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]),
|
|
2609
|
+
}),
|
|
2601
2610
|
}
|
|
2602
2611
|
: [])))));
|
|
2603
2612
|
}
|
|
@@ -18,7 +18,7 @@ require('./luxon-59ca7d19.js');
|
|
|
18
18
|
const utils = require('./utils-8ef4fe4a.js');
|
|
19
19
|
require('./sqm-text-span-view-ab4ad6ef.js');
|
|
20
20
|
require('./sqm-portal-container-view-2d11ed71.js');
|
|
21
|
-
const ShadowViewAddon = require('./ShadowViewAddon-
|
|
21
|
+
const ShadowViewAddon = require('./ShadowViewAddon-a94a1ff9.js');
|
|
22
22
|
require('./sqm-portal-section-view-765aae4d.js');
|
|
23
23
|
|
|
24
24
|
const BigStat = class {
|
|
@@ -130,21 +130,24 @@ const style = {
|
|
|
130
130
|
top: "23px",
|
|
131
131
|
},
|
|
132
132
|
DivStyle: {
|
|
133
|
-
marginLeft: "
|
|
133
|
+
marginLeft: "28px",
|
|
134
134
|
},
|
|
135
135
|
Details: {
|
|
136
|
-
marginLeft: "
|
|
136
|
+
marginLeft: "28px",
|
|
137
137
|
},
|
|
138
138
|
Heading: {
|
|
139
139
|
display: "inline-block",
|
|
140
140
|
},
|
|
141
141
|
Alert: {
|
|
142
|
-
margin: "
|
|
142
|
+
margin: "28px",
|
|
143
|
+
},
|
|
144
|
+
Children: {
|
|
145
|
+
display: "none",
|
|
143
146
|
},
|
|
144
147
|
};
|
|
145
148
|
const sheet = JSS.createStyleSheet(style);
|
|
146
149
|
const styleString = sheet.toString();
|
|
147
|
-
function RequiredPropsError({ missingProps }) {
|
|
150
|
+
function RequiredPropsError({ missingProps }, children) {
|
|
148
151
|
if (!missingProps)
|
|
149
152
|
return false;
|
|
150
153
|
const host = index_module.P();
|
|
@@ -154,8 +157,8 @@ function RequiredPropsError({ missingProps }) {
|
|
|
154
157
|
index.h("div", { slot: "icon", class: sheet.classes.IconStyle },
|
|
155
158
|
index.h("sl-icon", { name: "exclamation-octagon" })),
|
|
156
159
|
index.h("div", { class: sheet.classes.DivStyle },
|
|
157
|
-
index.h("h2", { class: sheet.classes.Heading }, "There was a problem loading this
|
|
158
|
-
index.h("p", null, "There was a technical problem that prevented this
|
|
160
|
+
index.h("h2", { class: sheet.classes.Heading }, "There was a problem loading this section"),
|
|
161
|
+
index.h("p", null, "There was a technical problem that prevented this section from loading. Please contact us with the link to this page.")),
|
|
159
162
|
index.h("details", { class: sheet.classes.Details },
|
|
160
163
|
index.h("summary", { onClick: () => setDetailsOpen(!detailsOpen) },
|
|
161
164
|
detailsOpen ? "Less" : "More",
|
|
@@ -165,7 +168,8 @@ function RequiredPropsError({ missingProps }) {
|
|
|
165
168
|
`<${host.tagName.toLowerCase()}>`,
|
|
166
169
|
". Values for the following attributes are missing:"),
|
|
167
170
|
index.h("ul", null, missingProps.map((prop) => (index.h("li", null,
|
|
168
|
-
index.h("strong", null, prop.attribute))))))
|
|
171
|
+
index.h("strong", null, prop.attribute)))))),
|
|
172
|
+
index.h("div", { class: sheet.classes.Children }, children)));
|
|
169
173
|
}
|
|
170
174
|
|
|
171
175
|
const FORM_VALIDATION_CONTEXT = "sq:validation-state";
|
|
@@ -224,7 +228,7 @@ const CheckboxField = class {
|
|
|
224
228
|
value: this.checkboxName,
|
|
225
229
|
},
|
|
226
230
|
]);
|
|
227
|
-
if (missingProps) {
|
|
231
|
+
if (!index_module.jn() && missingProps) {
|
|
228
232
|
return index.h(RequiredPropsError, { missingProps: missingProps });
|
|
229
233
|
}
|
|
230
234
|
const content = {
|
|
@@ -350,8 +354,8 @@ const DropdownField = class {
|
|
|
350
354
|
value: this.dropdownName,
|
|
351
355
|
},
|
|
352
356
|
]);
|
|
353
|
-
if (missingProps) {
|
|
354
|
-
return index.h(RequiredPropsError, { missingProps: missingProps });
|
|
357
|
+
if (!index_module.jn() && missingProps) {
|
|
358
|
+
return (index.h(RequiredPropsError, { missingProps: missingProps }, index.h("slot", null)));
|
|
355
359
|
}
|
|
356
360
|
const content = {
|
|
357
361
|
...utils.getProps(this),
|
|
@@ -844,7 +848,7 @@ const InputField = class {
|
|
|
844
848
|
value: this.fieldName,
|
|
845
849
|
},
|
|
846
850
|
]);
|
|
847
|
-
if (missingProps) {
|
|
851
|
+
if (!index_module.jn() && missingProps) {
|
|
848
852
|
return index.h(RequiredPropsError, { missingProps: missingProps });
|
|
849
853
|
}
|
|
850
854
|
const { states } = index_module.jn() ? useInputFieldDemo(this) : useInputField();
|
|
@@ -27,7 +27,7 @@ const sqmPortalContainerView = require('./sqm-portal-container-view-2d11ed71.js'
|
|
|
27
27
|
const sqmPortalProfileView = require('./sqm-portal-profile-view-b77382f6.js');
|
|
28
28
|
const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-042073ca.js');
|
|
29
29
|
const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-cb3c9c2f.js');
|
|
30
|
-
const ShadowViewAddon = require('./ShadowViewAddon-
|
|
30
|
+
const ShadowViewAddon = require('./ShadowViewAddon-a94a1ff9.js');
|
|
31
31
|
const sqmPortalSectionView = require('./sqm-portal-section-view-765aae4d.js');
|
|
32
32
|
|
|
33
33
|
/**
|
|
@@ -9893,7 +9893,7 @@ const NameFields$1 = /*#__PURE__*/Object.freeze({
|
|
|
9893
9893
|
NameFieldsWithErrors: NameFieldsWithErrors
|
|
9894
9894
|
});
|
|
9895
9895
|
|
|
9896
|
-
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
|
|
9896
|
+
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 | |";
|
|
9897
9897
|
|
|
9898
9898
|
const CheckboxField_stories = {
|
|
9899
9899
|
title: "Components/Checkbox Field",
|
|
@@ -9952,8 +9952,11 @@ const Error$3 = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView
|
|
|
9952
9952
|
const CustomError = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$a, { states: {
|
|
9953
9953
|
...defaultProps$a.states,
|
|
9954
9954
|
validationErrors: {
|
|
9955
|
-
agree: "
|
|
9955
|
+
agree: "Must be checked",
|
|
9956
9956
|
},
|
|
9957
|
+
}, content: {
|
|
9958
|
+
...defaultProps$a.content,
|
|
9959
|
+
errorMessage: "This checkbox must be checked to continue",
|
|
9957
9960
|
} }))));
|
|
9958
9961
|
const TermsAndConditions$1 = createHookStory(() => (index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, defaultRegisterProps, {
|
|
9959
9962
|
//@ts-ignore
|
|
@@ -10039,13 +10042,19 @@ const MultipleCheckboxes = createHookStory(() => {
|
|
|
10039
10042
|
index.h("sqm-name-fields", { slot: "formData" }),
|
|
10040
10043
|
index.h("sqm-checkbox-field", { slot: "formData", "checkbox-label": "I am not a robot", "error-message": "Cannot be a robot", "checkbox-name": "isHuman" }),
|
|
10041
10044
|
index.h("div", { slot: "terms" },
|
|
10042
|
-
index.h("sqm-checkbox-field",
|
|
10045
|
+
index.h("sqm-checkbox-field", { "checkbox-name": "otherCheckbox" }))));
|
|
10043
10046
|
});
|
|
10044
10047
|
const OptionalCheckboxes = createHookStory(() => {
|
|
10045
10048
|
setupGraphQL$9();
|
|
10046
10049
|
return (index.h("sqm-portal-register", null,
|
|
10047
10050
|
index.h("sqm-name-fields", { slot: "formData" }),
|
|
10048
10051
|
index.h("sqm-checkbox-field", { slot: "formData", "checkbox-label": "I am not a robot", "checkbox-optional": "true", "checkbox-name": "isHuman" }),
|
|
10052
|
+
index.h("div", { slot: "terms" },
|
|
10053
|
+
index.h("sqm-checkbox-field", { "checkbox-name": "required" }))));
|
|
10054
|
+
});
|
|
10055
|
+
const MissingName = createHookStory(() => {
|
|
10056
|
+
setupGraphQL$9();
|
|
10057
|
+
return (index.h("sqm-portal-register", null,
|
|
10049
10058
|
index.h("div", { slot: "terms" },
|
|
10050
10059
|
index.h("sqm-checkbox-field", null))));
|
|
10051
10060
|
});
|
|
@@ -10056,7 +10065,8 @@ const UseCheckboxField = /*#__PURE__*/Object.freeze({
|
|
|
10056
10065
|
TermsAndConditions: TermsAndConditions$2,
|
|
10057
10066
|
TermsAndConditionsWithLabel: TermsAndConditionsWithLabel,
|
|
10058
10067
|
MultipleCheckboxes: MultipleCheckboxes,
|
|
10059
|
-
OptionalCheckboxes: OptionalCheckboxes
|
|
10068
|
+
OptionalCheckboxes: OptionalCheckboxes,
|
|
10069
|
+
MissingName: MissingName
|
|
10060
10070
|
});
|
|
10061
10071
|
|
|
10062
10072
|
const DropdownField_stories = {
|
|
@@ -10145,16 +10155,25 @@ const Countries = createHookStory(() => {
|
|
|
10145
10155
|
index.h("sl-menu-item", { value: "CA" }, "Canada"),
|
|
10146
10156
|
index.h("sl-menu-item", { value: "US" }, "United States"),
|
|
10147
10157
|
index.h("sl-menu-item", { value: "GB" }, "United Kingdom"))));
|
|
10158
|
+
});
|
|
10159
|
+
const MissingName$1 = createHookStory(() => {
|
|
10160
|
+
setupGraphQL$a();
|
|
10161
|
+
return (index.h("sqm-portal-register", null,
|
|
10162
|
+
index.h("sqm-dropdown-field", { slot: "formData", "dropdown-label": "Country" },
|
|
10163
|
+
index.h("sl-menu-item", { value: "CA" }, "Canada"),
|
|
10164
|
+
index.h("sl-menu-item", { value: "US" }, "United States"),
|
|
10165
|
+
index.h("sl-menu-item", { value: "GB" }, "United Kingdom"))));
|
|
10148
10166
|
});
|
|
10149
10167
|
|
|
10150
10168
|
const UseDropdownField = /*#__PURE__*/Object.freeze({
|
|
10151
10169
|
__proto__: null,
|
|
10152
10170
|
'default': UseDropdownField_stories,
|
|
10153
10171
|
SelectOptions: SelectOptions,
|
|
10154
|
-
Countries: Countries
|
|
10172
|
+
Countries: Countries,
|
|
10173
|
+
MissingName: MissingName$1
|
|
10155
10174
|
});
|
|
10156
10175
|
|
|
10157
|
-
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
|
|
10176
|
+
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 | |";
|
|
10158
10177
|
|
|
10159
10178
|
const InputField_stories = {
|
|
10160
10179
|
title: "Components/Input Field",
|
|
@@ -10312,6 +10331,12 @@ const TelType$1 = createHookStory(() => {
|
|
|
10312
10331
|
return (index.h("sqm-portal-register", null,
|
|
10313
10332
|
index.h("sqm-name-fields", { slot: "formData" }),
|
|
10314
10333
|
index.h("sqm-input-field", { slot: "formData", "field-label": "Phone Number", "field-name": "tel", "field-type": "tel" })));
|
|
10334
|
+
});
|
|
10335
|
+
const MissingName$2 = createHookStory(() => {
|
|
10336
|
+
setupGraphQL$b();
|
|
10337
|
+
return (index.h("sqm-portal-register", null,
|
|
10338
|
+
index.h("sqm-name-fields", { slot: "formData" }),
|
|
10339
|
+
index.h("sqm-input-field", { slot: "formData", "field-label": "Phone Number", "field-type": "tel" })));
|
|
10315
10340
|
});
|
|
10316
10341
|
|
|
10317
10342
|
const UseInputField = /*#__PURE__*/Object.freeze({
|
|
@@ -10322,7 +10347,8 @@ const UseInputField = /*#__PURE__*/Object.freeze({
|
|
|
10322
10347
|
MultipleInputs: MultipleInputs,
|
|
10323
10348
|
OptionalInputs: OptionalInputs,
|
|
10324
10349
|
DateType: DateType$1,
|
|
10325
|
-
TelType: TelType$1
|
|
10350
|
+
TelType: TelType$1,
|
|
10351
|
+
MissingName: MissingName$2
|
|
10326
10352
|
});
|
|
10327
10353
|
|
|
10328
10354
|
const scenario$k = "@author:derek\r\n@owner:derek\r\nFeature: Reward Exchange List\r\n\r\n The Reward Exchange List gives end users the power to exchange their rewards for other rewards.\r\n It populates a list from the reward exchange rules set up on a given tenant.\r\n\r\n Background:\r\n Given a tenant with reward exchange rules\r\n\r\n @motivating\r\n @ui\r\n Scenario: The empty state is shown if there are no visible exchanges\r\n Given a user with no visible exchanges\r\n When they view the reward exchange\r\n Then no exchange options are displayed\r\n And they see an image of a present\r\n And \"Redeem Rewards\" in bold\r\n And \"Use your points to redeem rewards once they become available\" below the bolded text\r\n And the pagination buttons are disabled\r\n\r\n @minutae\r\n @ui\r\n Scenario: A custom empty state can be provided\r\n Given a user with no visible exchanges\r\n And a custom empty state has been supplied in the \"empty\" slot\r\n When they view the reward exchange\r\n Then they see the custom empty state\r\n\r\n @motivating\r\n @ui\r\n Scenario: A Loading Skeleton is displayed when the reward exchange rules are loading\r\n Given a user\r\n When they load the reward exchange list\r\n Then they see a loading Skeleton\r\n And it has 8 skeleton cards\r\n When the reward exchange rules have loaded\r\n Then the skeleton is replaced with reward exchange options\r\n\r\n @motivating\r\n Scenario: An error banner appears when the reward exchange list fails to load\r\n Given a user trying to view the reward exchange list\r\n But it fails to load\r\n Then an error banner is displayed\r\n And it displays \"Unable to load reward exchange list. Please try again\"\r\n\r\n @motivating\r\n @ui\r\n Scenario: The exchange progress bar progresses through the exchange process\r\n Given a user who is eligible for the tenants reward exchange rules\r\n When they view the reward exchange list\r\n Then the process bar displays the following elements\r\n | elements |\r\n | Step 1 `Rewards` title in black |\r\n | Step 1 circle with green outline, white fill and number 1 in green |\r\n | Step 2 `Select` title in grey |\r\n | Step 2 circle with grey fill and number 2 in white |\r\n | Step 3 `Confirm` title in grey |\r\n | Step 3 circle with grey fill and number 3 in white |\r\n | lines between all steps are greyed out |\r\n When they continue to the selection page\r\n Then the progress bar displays the following elements\r\n | elements |\r\n | Step 1 `Rewards` title in black |\r\n | Step 1 circle with white checkmark and green fill |\r\n | Step 2 `Select` title in black |\r\n | Step 2 circle with green outline, white fill and number 2 in green |\r\n | Step 3 `Confirm` title in grey |\r\n | Step 3 circle with grey fill and number 3 in white |\r\n | Green line between step 1 and 2 |\r\n | Grey line between step 2 and 3 |\r\n When they continue to the confirmation page\r\n Then the progress bar displays the following elements\r\n | elements |\r\n | Step 1 `Rewards` title in black |\r\n | Step 1 circle with white checkmark and green fill |\r\n | Step 2 `Select` title in black |\r\n | Step 2 circle with white checkmark and green fill |\r\n | Step 3 `Confirm` title in black |\r\n | Step 3 circle with green outline, white fill and number 3 in green |\r\n | Green line between all steps |\r\n When they continue to the redemption page\r\n Then the progress bar displays the following elements\r\n | elements |\r\n | Step 1 `Rewards` title in black |\r\n | Step 1 circle with white checkmark and green fill |\r\n | Step 2 `Select` title in black |\r\n | Step 2 circle with white checkmark and green fill |\r\n | Step 3 `Confirm` title in black |\r\n | Step 3 circle with white checkmark and green fill |\r\n | Green line between all steps |\r\n\r\n @motivating\r\n Scenario: Users must choose a reward exchange option to continue to the selection page\r\n Given a user who is eligible for the tenants reward exchange rules\r\n When they view the reward exchange list\r\n Then the 'Continue' button is disabled\r\n When they select a reward exchange card\r\n Then the card is outlined in brand colour with a brand colour cirlcular check box icon in the top right\r\n And the continue button is no longer disabled\r\n When they click \"Continue\"\r\n Then they are brought to the selection page\r\n\r\n @motivating\r\n @ui\r\n Scenario: Reward exchange rule names and images are used in the reward exchange cards\r\n Given a tenant reward exchange rule\r\n And it has name \"My Visa Exchange Rule\"\r\n And it has an image\r\n When a user views the reward exchange list\r\n Then they see a exchange card with title \"My Visa Exchange Rule\"\r\n And the exchange image on the left hand side of the card\r\n\r\n @motivating\r\n Scenario Outline: Reward exchange source values are displayed on reward exchange cards\r\n Given a <type> reward exchange rule\r\n When a user views the reward exchange list\r\n Then they see <text> under the name on the exchange option cards\r\n And the pretty values are localized to a user locale\r\n Examples:\r\n | type | text |\r\n | FIXED_GLOBAL_REWARD | the exchange source pretty value |\r\n | STEPPED_FIXED_GLOBAL_REWARD | the exchange source min pretty value to the source max pretty value |\r\n | VARIABLE_GLOBAL_REWARD | the exchange source min pretty value to the source max pretty value |\r\n | VARIABLE_CREDIT_REWARD | the exchange source min pretty value to the source max pretty value |\r\n\r\n @motivating\r\n Scenario Outline: Reward exchange cards can display customized error messages\r\n Given a reward exchange rule\r\n And it has <availabilityPredicate>\r\n And the reward exchange list has prop \"not-available-error\" with <value>\r\n When the user views the reward exchange list\r\n Then the card for the reward exchange rule is disabled\r\n And <message> is displayed\r\n Examples:\r\n | availabilityPredicate | value | message |\r\n | 'champion' in user.segments ? \"NOT_CHAMPION\" : true | {unavailableReasonCode, select, NOT_CHAMPION {Sorry must be a champion!} other {unavailableReasonCode} } | Sorry must be a champion! |\r\n | user.customFields.purchaseCount < 10 ? \"MORE_PURCHASE\" : true | {unavailableReasonCode, select, MORE_PURCHASE {Complete 10 purchases to unlock} other {unavailableReasonCode} } | Complete 10 purchases to unlock |\r\n\r\n @motivating\r\n Scenario: Exchange options are disabled if they put a user over the W9 limit\r\n Given a user who is approaching their W9 limit\r\n And a reward exchange rule\r\n And its destination reward has a US taxable value that would put the user over their limit\r\n When they view the reward exchange list\r\n Then the reward exchange card is disabled\r\n And a \"US Tax Limit\" error message is displayed on to the right of a exclamation triangle icon\r\n And the text is orange\r\n And the icon is orange\r\n\r\n @motivating\r\n Scenario Outline: Exchange options are disabled if a users lacks enough credit to redeem\r\n Given a <type> reward exchange rule\r\n But the user lacks enough credit to exchange for it\r\n When they view the reward exchange list\r\n Then the reward exchange card is disabled\r\n And a <text> error message is displayed on to the right of a exclamation triangle icon\r\n And the text is orange\r\n And the icon is orange\r\n Examples:\r\n | type | text |\r\n | FIXED_GLOBAL_REWARD | {prettySourceValue} required |\r\n | STEPPED_FIXED_GLOBAL_REWARD | {prettySourceMinValue} required |\r\n | VARIABLE_GLOBAL_REWARD | {prettySourceMinValue} required |\r\n | VARIABLE_CREDIT_REWARD | {prettySourceMinValue} required |\r\n\r\n @motivating\r\n Scenario: Users can go back to the Rewards page from the Select page\r\n Given a user viewing the Select page\r\n Then they see a \"Cancel\" text button\r\n And a \"Continue to confirmation\" brand colour button in the bottom right corner\r\n When they click \"Cancel\"\r\n Then they return to the Rewards page\r\n\r\n @motivating\r\n Scenario: Users can go back to the Select Page from the Confirm page\r\n Given a user viewing the Confirm page\r\n Then they see a \"Back\" text button\r\n And a \"Redeem\" brand colour button in the bottom right corner\r\n When they click \"Back\"\r\n Then they return to the Select Page\r\n\r\n @motivating\r\n Scenario: Reward rules with visibility predicates that evaluates to false are not shown\r\n Given a tenant reward exchange rule with visibility predicates that evaluates to false\r\n When a user views the reward exchange list\r\n Then they do not see the card for that reward exchange rule\r\n\r\n @motivating\r\n Scenario Outline: Users can choose their reward option for variable rewards on the Select page\r\n Given a <type> exchange rule\r\n And it has the following fields\r\n | fields |\r\n | name |\r\n | description |\r\n | image |\r\n When a user views the reward exchange list\r\n And they progress to the Select page for this exchange\r\n Then they see the exchange rule image on the left hand side\r\n And on the right hand side they see the following in this order from top to bottom\r\n | elements |\r\n | exchange name |\r\n | exchange description |\r\n | select list with all exchange options using pretty values, destination reward above source reward |\r\n Examples:\r\n | type |\r\n | STEPPED_FIXED_GLOBAL_REWARD |\r\n | VARIABLE_GLOBAL_REWARD |\r\n | VARIABLE_CREDIT_REWARD |\r\n\r\n @motivating\r\n Scenario: Users who selected a fixed exchange rule see exchange information on the Select page\r\n Given a \"FIXED_GLOBAL_REWARD\" exchange rule\r\n And it has the following fields\r\n | fields |\r\n | name |\r\n | description |\r\n | image |\r\n When a user views the reward exchange list\r\n And they progress to the Select page for this exchange\r\n Then they see the exchange rule image on the left hand side\r\n And on the right hand side they see the following in this order from top to bottom\r\n | elements |\r\n | exchange name |\r\n | exchange source pretty value displayed in brand colour |\r\n | exchange description |\r\n\r\n @motivating\r\n Scenario Outline: Users selection variable rewards can only select rewards they are eligible to exchange for\r\n Given a <type> exchange rule\r\n When a user views the reward exchange list\r\n And they progress to the Select page for this exchange\r\n Then they see a drop down with all the reward exchange selections\r\n When they click on the drop down\r\n But they are not eligible for all of the exchanges options <dueToReason>\r\n Then the ineligble options are disabled\r\n And under the source value is <text>\r\n Examples:\r\n | type | dueToReason | text |\r\n | STEPPED_FIXED_GLOBAL_REWARD | due to insufficent source value | {prettySourceValue} required |\r\n | VARIABLE_GLOBAL_REWARD | due to insufficent source value | {prettySourceValue} required |\r\n | VARIABLE_CREDIT_REWARD | due to insufficent source value | {prettySourceValue} required |\r\n | STEPPED_FIXED_GLOBAL_REWARD | W9 | US Tax Limit |\r\n | VARIABLE_GLOBAL_REWARD | W9 | US Tax Limit |\r\n | VARIABLE_CREDIT_REWARD | W9 | US Tax Limit |\r\n\r\n @motivating\r\n Scenario Outline: The Confirm page allows users to view their exchange before committing\r\n Given a <type> exchange rule\r\n When a user views the reward exchange list\r\n And they select the exchange\r\n And they progress to Confirm page\r\n Then they see a row with title \"Reward\"\r\n And it contains the exchange name\r\n And it contains the exchange image\r\n And they <maySee> a row with title \"Reward Amount\"\r\n And it <mayContain> <amountTitle>\r\n And they see a row with title \"Cost to Redeem\"\r\n And it contains the source reward pretty value in bolded text\r\n Examples:\r\n | type | maySee | mayContain | amountTitle |\r\n | FIXED_GLOBAL_REWARD | don't | doesn't contain | N/A |\r\n | VARIABLE_GLOBAL_REWARD | see | contains | the pretty destination value |\r\n | STEPPED_FIXED_GLOBAL_REWARD | see | contains | the pretty destination value |\r\n | VARIABLE_CREDIT_REWARD | see | contains | the pretty destination value |\r\n\r\n @motivating\r\n Scenario: An error banner is displayed if an error occurs during redemeption\r\n Given a user has selected a reward to exchange\r\n And is on the confirmation page\r\n When they click \"Redeem\"\r\n But an error occurs\r\n Then an error banner appears\r\n And it contains details about the error\r\n And the reward exchange is not completed\r\n\r\n @motivating\r\n Scenario: Confetti is displayed when a reward exchange succeeds\r\n Given a user has selected a reward to exchange\r\n And they are on the confirmation page\r\n When they click \"Redeem\"\r\n And the exchange is successful\r\n Then they see confetti centered on the success page\r\n And they see text describing what they exchanged for their new reward\r\n And they see a \"Done\" brand colour button\r\n When they click \"Done\"\r\n Then they see the Rewards page\r\n\r\n @motivating\r\n Scenario: Fuel tank codes are shown when a reward exchange succeeds\r\n Given a user has selected to exchange for a fuel tank reward\r\n When they complete the reward exchange\r\n And are on the success page\r\n Then they see a textbox with their fuel tank code\r\n And a clipboard icon\r\n When they click the clipboard icon\r\n Then their fuel tank code is copied to their clipboard\r\n\r\n @motivating\r\n Scenario Outline: Users can exchange for any type of reward\r\n Given a <type> reward exchange rule for a <reward>\r\n And a user who has enough source credit to exchange for the reward\r\n When they go through the exchange flow\r\n And exchange for their reward\r\n Then their credit is exchanged for the <reward>\r\n Examples:\r\n | type | reward |\r\n | FIXED_GLOBAL_REWARD | gift card |\r\n | FIXED_GLOBAL_REWARD | fuel tank code |\r\n | FIXED_GLOBAL_REWARD | discount |\r\n | FIXED_GLOBAL_REWARD | credit reward |\r\n | STEPPED_FIXED_GLOBAL_REWARD | gift card |\r\n | STEPPED_FIXED_GLOBAL_REWARD | discount |\r\n | STEPPED_FIXED_GLOBAL_REWARD | credit reward |\r\n | VARIABLE_GLOBAL_REWARD | gift card |\r\n | VARIABLE_GLOBAL_REWARD | discount |\r\n | VARIABLE_GLOBAL_REWARD | credit reward |\r\n | VARIABLE_CREDIT_REWARD | credit reward |";
|
|
@@ -60,8 +60,11 @@ export const Error = createHookStory(() => (h(CheckboxFieldView, Object.assign({
|
|
|
60
60
|
export const CustomError = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps, { states: {
|
|
61
61
|
...defaultProps.states,
|
|
62
62
|
validationErrors: {
|
|
63
|
-
agree: "
|
|
63
|
+
agree: "Must be checked",
|
|
64
64
|
},
|
|
65
|
+
}, content: {
|
|
66
|
+
...defaultProps.content,
|
|
67
|
+
errorMessage: "This checkbox must be checked to continue",
|
|
65
68
|
} }))));
|
|
66
69
|
export const TermsAndConditions = createHookStory(() => (h(PortalRegisterView, Object.assign({}, defaultRegisterProps, {
|
|
67
70
|
//@ts-ignore
|
|
@@ -50,13 +50,19 @@ export const MultipleCheckboxes = createHookStory(() => {
|
|
|
50
50
|
h("sqm-name-fields", { slot: "formData" }),
|
|
51
51
|
h("sqm-checkbox-field", { slot: "formData", "checkbox-label": "I am not a robot", "error-message": "Cannot be a robot", "checkbox-name": "isHuman" }),
|
|
52
52
|
h("div", { slot: "terms" },
|
|
53
|
-
h("sqm-checkbox-field",
|
|
53
|
+
h("sqm-checkbox-field", { "checkbox-name": "otherCheckbox" }))));
|
|
54
54
|
});
|
|
55
55
|
export const OptionalCheckboxes = createHookStory(() => {
|
|
56
56
|
setupGraphQL();
|
|
57
57
|
return (h("sqm-portal-register", null,
|
|
58
58
|
h("sqm-name-fields", { slot: "formData" }),
|
|
59
59
|
h("sqm-checkbox-field", { slot: "formData", "checkbox-label": "I am not a robot", "checkbox-optional": "true", "checkbox-name": "isHuman" }),
|
|
60
|
+
h("div", { slot: "terms" },
|
|
61
|
+
h("sqm-checkbox-field", { "checkbox-name": "required" }))));
|
|
62
|
+
});
|
|
63
|
+
export const MissingName = createHookStory(() => {
|
|
64
|
+
setupGraphQL();
|
|
65
|
+
return (h("sqm-portal-register", null,
|
|
60
66
|
h("div", { slot: "terms" },
|
|
61
67
|
h("sqm-checkbox-field", null))));
|
|
62
68
|
});
|
|
@@ -64,5 +64,8 @@ export function CheckboxFieldView(props) {
|
|
|
64
64
|
}, {
|
|
65
65
|
labelLink: (h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
|
|
66
66
|
}),
|
|
67
|
-
!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (h("p", { class: sheet.classes.ErrorMessageStyle },
|
|
67
|
+
!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (h("p", { class: sheet.classes.ErrorMessageStyle }, intl.formatMessage({
|
|
68
|
+
id: `errorMessage-${content.checkboxName}`,
|
|
69
|
+
defaultMessage: content.errorMessage,
|
|
70
|
+
}))))));
|
|
68
71
|
}
|
|
@@ -44,3 +44,11 @@ export const Countries = createHookStory(() => {
|
|
|
44
44
|
h("sl-menu-item", { value: "US" }, "United States"),
|
|
45
45
|
h("sl-menu-item", { value: "GB" }, "United Kingdom"))));
|
|
46
46
|
});
|
|
47
|
+
export const MissingName = createHookStory(() => {
|
|
48
|
+
setupGraphQL();
|
|
49
|
+
return (h("sqm-portal-register", null,
|
|
50
|
+
h("sqm-dropdown-field", { slot: "formData", "dropdown-label": "Country" },
|
|
51
|
+
h("sl-menu-item", { value: "CA" }, "Canada"),
|
|
52
|
+
h("sl-menu-item", { value: "US" }, "United States"),
|
|
53
|
+
h("sl-menu-item", { value: "GB" }, "United Kingdom"))));
|
|
54
|
+
});
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import jss from "jss";
|
|
3
3
|
import preset from "jss-preset-default";
|
|
4
|
+
import { intl } from "../../global/global";
|
|
4
5
|
const style = {
|
|
5
6
|
ErrorStyle: {
|
|
6
7
|
"--sl-input-border-color": "var(--sl-color-danger-500)",
|
|
@@ -42,5 +43,8 @@ export function DropdownFieldView(props) {
|
|
|
42
43
|
class: sheet.classes.ErrorStyle,
|
|
43
44
|
}
|
|
44
45
|
: [])), content.selectOptions),
|
|
45
|
-
(validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (h("p", { class: sheet.classes.ErrorMessageStyle },
|
|
46
|
+
(validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (h("p", { class: sheet.classes.ErrorMessageStyle }, intl.formatMessage({
|
|
47
|
+
id: `errorMessage-${content.dropdownName}`,
|
|
48
|
+
defaultMessage: content.errorMessage,
|
|
49
|
+
})))));
|
|
46
50
|
}
|
|
@@ -34,8 +34,9 @@ export class DropdownField {
|
|
|
34
34
|
value: this.dropdownName,
|
|
35
35
|
},
|
|
36
36
|
]);
|
|
37
|
-
if (missingProps) {
|
|
38
|
-
return h(RequiredPropsError, { missingProps: missingProps }
|
|
37
|
+
if (!isDemo() && missingProps) {
|
|
38
|
+
return (h(RequiredPropsError, { missingProps: missingProps },
|
|
39
|
+
h("slot", null)));
|
|
39
40
|
}
|
|
40
41
|
const content = {
|
|
41
42
|
...getProps(this),
|
|
@@ -69,3 +69,9 @@ export const TelType = createHookStory(() => {
|
|
|
69
69
|
h("sqm-name-fields", { slot: "formData" }),
|
|
70
70
|
h("sqm-input-field", { slot: "formData", "field-label": "Phone Number", "field-name": "tel", "field-type": "tel" })));
|
|
71
71
|
});
|
|
72
|
+
export const MissingName = createHookStory(() => {
|
|
73
|
+
setupGraphQL();
|
|
74
|
+
return (h("sqm-portal-register", null,
|
|
75
|
+
h("sqm-name-fields", { slot: "formData" }),
|
|
76
|
+
h("sqm-input-field", { slot: "formData", "field-label": "Phone Number", "field-type": "tel" })));
|
|
77
|
+
});
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import jss from "jss";
|
|
3
3
|
import preset from "jss-preset-default";
|
|
4
|
+
import { intl } from "../../global/global";
|
|
4
5
|
import { ErrorStyles } from "../../global/mixins";
|
|
5
6
|
const style = {
|
|
6
7
|
ErrorStyle: ErrorStyles,
|
|
@@ -27,7 +28,10 @@ export function InputFieldView(props) {
|
|
|
27
28
|
styleString),
|
|
28
29
|
h("sl-input", Object.assign({ exportparts: "label: input-label", name: `/${content.fieldName}`, type: content.fieldType, label: content.fieldLabel }, (!content.fieldOptional ? { required: true } : []), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]) ? {
|
|
29
30
|
class: sheet.classes.ErrorStyle,
|
|
30
|
-
helpText:
|
|
31
|
+
helpText: intl.formatMessage({
|
|
32
|
+
id: `errorMessage-${content.fieldName}`,
|
|
33
|
+
defaultMessage: content.errorMessage || (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]),
|
|
34
|
+
}),
|
|
31
35
|
}
|
|
32
36
|
: [])))));
|
|
33
37
|
}
|
|
@@ -39,7 +39,7 @@ export class InputField {
|
|
|
39
39
|
value: this.fieldName,
|
|
40
40
|
},
|
|
41
41
|
]);
|
|
42
|
-
if (missingProps) {
|
|
42
|
+
if (!isDemo() && missingProps) {
|
|
43
43
|
return h(RequiredPropsError, { missingProps: missingProps });
|
|
44
44
|
}
|
|
45
45
|
const { states } = isDemo() ? useInputFieldDemo(this) : useInputField();
|
|
@@ -9,21 +9,24 @@ const style = {
|
|
|
9
9
|
top: "23px",
|
|
10
10
|
},
|
|
11
11
|
DivStyle: {
|
|
12
|
-
marginLeft: "
|
|
12
|
+
marginLeft: "28px",
|
|
13
13
|
},
|
|
14
14
|
Details: {
|
|
15
|
-
marginLeft: "
|
|
15
|
+
marginLeft: "28px",
|
|
16
16
|
},
|
|
17
17
|
Heading: {
|
|
18
18
|
display: "inline-block",
|
|
19
19
|
},
|
|
20
20
|
Alert: {
|
|
21
|
-
margin: "
|
|
21
|
+
margin: "28px",
|
|
22
|
+
},
|
|
23
|
+
Children: {
|
|
24
|
+
display: "none",
|
|
22
25
|
},
|
|
23
26
|
};
|
|
24
27
|
const sheet = createStyleSheet(style);
|
|
25
28
|
const styleString = sheet.toString();
|
|
26
|
-
export function RequiredPropsError({ missingProps }) {
|
|
29
|
+
export function RequiredPropsError({ missingProps }, children) {
|
|
27
30
|
if (!missingProps)
|
|
28
31
|
return false;
|
|
29
32
|
const host = useHost();
|
|
@@ -33,8 +36,8 @@ export function RequiredPropsError({ missingProps }) {
|
|
|
33
36
|
h("div", { slot: "icon", class: sheet.classes.IconStyle },
|
|
34
37
|
h("sl-icon", { name: "exclamation-octagon" })),
|
|
35
38
|
h("div", { class: sheet.classes.DivStyle },
|
|
36
|
-
h("h2", { class: sheet.classes.Heading }, "There was a problem loading this
|
|
37
|
-
h("p", null, "There was a technical problem that prevented this
|
|
39
|
+
h("h2", { class: sheet.classes.Heading }, "There was a problem loading this section"),
|
|
40
|
+
h("p", null, "There was a technical problem that prevented this section from loading. Please contact us with the link to this page.")),
|
|
38
41
|
h("details", { class: sheet.classes.Details },
|
|
39
42
|
h("summary", { onClick: () => setDetailsOpen(!detailsOpen) },
|
|
40
43
|
detailsOpen ? "Less" : "More",
|
|
@@ -44,5 +47,6 @@ export function RequiredPropsError({ missingProps }) {
|
|
|
44
47
|
`<${host.tagName.toLowerCase()}>`,
|
|
45
48
|
". Values for the following attributes are missing:"),
|
|
46
49
|
h("ul", null, missingProps.map((prop) => (h("li", null,
|
|
47
|
-
h("strong", null, prop.attribute))))))
|
|
50
|
+
h("strong", null, prop.attribute)))))),
|
|
51
|
+
h("div", { class: sheet.classes.Children }, children)));
|
|
48
52
|
}
|
|
@@ -2523,7 +2523,10 @@ function CheckboxFieldView(props) {
|
|
|
2523
2523
|
}, {
|
|
2524
2524
|
labelLink: (h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
|
|
2525
2525
|
}),
|
|
2526
|
-
!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (h("p", { class: sheet$a.classes.ErrorMessageStyle },
|
|
2526
|
+
!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (h("p", { class: sheet$a.classes.ErrorMessageStyle }, intl.formatMessage({
|
|
2527
|
+
id: `errorMessage-${content.checkboxName}`,
|
|
2528
|
+
defaultMessage: content.errorMessage,
|
|
2529
|
+
}))))));
|
|
2527
2530
|
}
|
|
2528
2531
|
|
|
2529
2532
|
const style$b = {
|
|
@@ -2567,7 +2570,10 @@ function DropdownFieldView(props) {
|
|
|
2567
2570
|
class: sheet$b.classes.ErrorStyle,
|
|
2568
2571
|
}
|
|
2569
2572
|
: [])), content.selectOptions),
|
|
2570
|
-
(validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (h("p", { class: sheet$b.classes.ErrorMessageStyle },
|
|
2573
|
+
(validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (h("p", { class: sheet$b.classes.ErrorMessageStyle }, intl.formatMessage({
|
|
2574
|
+
id: `errorMessage-${content.dropdownName}`,
|
|
2575
|
+
defaultMessage: content.errorMessage,
|
|
2576
|
+
})))));
|
|
2571
2577
|
}
|
|
2572
2578
|
|
|
2573
2579
|
const style$c = {
|
|
@@ -2595,7 +2601,10 @@ function InputFieldView(props) {
|
|
|
2595
2601
|
styleString$c),
|
|
2596
2602
|
h("sl-input", Object.assign({ exportparts: "label: input-label", name: `/${content.fieldName}`, type: content.fieldType, label: content.fieldLabel }, (!content.fieldOptional ? { required: true } : []), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]) ? {
|
|
2597
2603
|
class: sheet$c.classes.ErrorStyle,
|
|
2598
|
-
helpText:
|
|
2604
|
+
helpText: intl.formatMessage({
|
|
2605
|
+
id: `errorMessage-${content.fieldName}`,
|
|
2606
|
+
defaultMessage: content.errorMessage || (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]),
|
|
2607
|
+
}),
|
|
2599
2608
|
}
|
|
2600
2609
|
: [])))));
|
|
2601
2610
|
}
|