@saasquatch/mint-components 1.4.1-0 → 1.4.2

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.
Files changed (19) hide show
  1. package/CHANGELOG.md +20 -1
  2. package/dist/cjs/sqm-divided-layout_26.cjs.entry.js +49 -9
  3. package/dist/collection/components/sqm-portal-register/sqm-portal-register-view.js +1 -0
  4. package/dist/collection/components/sqm-portal-register/sqm-portal-register.js +2 -1
  5. package/dist/collection/stories/PortalRegister.stories.js +12 -5
  6. package/dist/collection/stories/ShareButton.stories.js +29 -0
  7. package/dist/esm/sqm-divided-layout_26.entry.js +49 -9
  8. package/dist/esm-es5/sqm-divided-layout_26.entry.js +1 -1
  9. package/dist/mint-components/mint-components.esm.js +1 -1
  10. package/dist/mint-components/mint-components.js +1 -1
  11. package/dist/mint-components/p-bf26396f.system.js +1 -1
  12. package/dist/mint-components/p-c833872f.system.entry.js +1 -0
  13. package/dist/mint-components/p-db062719.entry.js +230 -0
  14. package/dist/types/components/sqm-portal-register/sqm-portal-register-view.d.ts +5 -3
  15. package/dist/types/stories/PortalRegister.stories.d.ts +1 -0
  16. package/dist/types/stories/ShareButton.stories.d.ts +1 -0
  17. package/package.json +1 -1
  18. package/dist/mint-components/p-554a6339.entry.js +0 -230
  19. package/dist/mint-components/p-d96e22c6.system.entry.js +0 -1
package/CHANGELOG.md CHANGED
@@ -7,8 +7,24 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
7
7
 
8
8
  ## [Unreleased]
9
9
 
10
+
11
+ ## [1.4.2] - 2022-01-14
12
+
13
+ ### Changed
14
+
15
+ - Added ability to include slotted content on \<sqm-portal-register> using `slot="terms"`
16
+ - Slotted content is displayed above the registration button
17
+
18
+ ## [1.4.1] - 2021-01-17
19
+
20
+ ### Fixed
21
+
22
+ - Fixed broken WhatsApp icon by updating the version of bootstrap icons from 1.2.0 to 1.7.2
23
+
10
24
  ## [1.4.0] - 2021-12-09
11
25
 
26
+ ### Changed
27
+
12
28
  - Updated version of component-boilerplate to prevent rare case of user context being deleted during register
13
29
  - Updated version of component-boilerplate to support new registration, password reset, and verify requests
14
30
  - Changed components:
@@ -182,7 +198,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
182
198
  - \<sqm-popup-container>
183
199
  - \<sqm-stencilbook>
184
200
 
185
- [unreleased]: https://github.com/saasquatch/program-tools/compare/mint-components@1.4.0...HEAD
201
+
202
+ [unreleased]: https://github.com/saasquatch/program-tools/compare/mint-components@1.4.2...HEAD
203
+ [1.4.2]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.4.2
204
+ [1.4.1]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.4.1
186
205
  [1.4.0]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.4.0
187
206
  [1.3.0]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.3.0
188
207
  [1.2.0]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.2.0
package/dist/cjs/sqm-divided-layout_26.cjs.entry.js CHANGED
@@ -1579,6 +1579,7 @@ function PortalRegisterView(props) {
1579
1579
  "Cannot be empty",
1580
1580
  }
1581
1581
  : [])))),
1582
+ content.terms,
1582
1583
  index.h("div", { class: sheet$4.classes.ButtonsContainer },
1583
1584
  index.h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"),
1584
1585
  content.secondaryButton))));
@@ -5637,6 +5638,7 @@ const PortalRegister = class {
5637
5638
  const content = {
5638
5639
  formData: index.h("slot", { name: "formData" }),
5639
5640
  secondaryButton: (index.h("slot", { name: "secondaryButton" }, index.h("sl-button", { type: "text", disabled: states.loading, onClick: () => index_module.mn.push(states.loginPath) }, this.loginLabel))),
5641
+ terms: index.h("slot", { name: "terms" }),
5640
5642
  emailLabel: this.emailLabel,
5641
5643
  passwordLabel: this.passwordLabel,
5642
5644
  submitLabel: this.submitLabel,
@@ -16561,6 +16563,35 @@ const FullStackIcon = () => {
16561
16563
  index.h("br", null),
16562
16564
  index.h("sqm-share-button", { medium: "email", icon: "envelope", iconslot: "prefix" },
16563
16565
  index.h("span", null, "Email"))));
16566
+ };
16567
+ const AllMediums = () => {
16568
+ return (index.h("div", null,
16569
+ index.h("sqm-share-button", { medium: "facebook", iconslot: "prefix" },
16570
+ index.h("span", null, "Facebook")),
16571
+ index.h("br", null),
16572
+ index.h("sqm-share-button", { medium: "email", icon: "envelope", iconslot: "prefix" },
16573
+ index.h("span", null, "Email")),
16574
+ index.h("br", null),
16575
+ index.h("sqm-share-button", { medium: "whatsapp", icon: "whatsapp", iconslot: "prefix" },
16576
+ index.h("span", null, "WhatsApp")),
16577
+ index.h("br", null),
16578
+ index.h("sqm-share-button", { medium: "linkedin", iconslot: "prefix" },
16579
+ index.h("span", null, "Linkedin")),
16580
+ index.h("br", null),
16581
+ index.h("sqm-share-button", { medium: "twitter", iconslot: "prefix" },
16582
+ index.h("span", null, "Twitter")),
16583
+ index.h("br", null),
16584
+ index.h("sqm-share-button", { medium: "pinterest", iconslot: "prefix" },
16585
+ index.h("span", null, "Pinterest")),
16586
+ index.h("br", null),
16587
+ index.h("sqm-share-button", { medium: "fbmessenger", icon: "messenger", iconslot: "prefix" },
16588
+ index.h("span", null, "Messenger")),
16589
+ index.h("br", null),
16590
+ index.h("sqm-share-button", { medium: "sms", icon: "chat", iconslot: "prefix" },
16591
+ index.h("span", null, "SMS")),
16592
+ index.h("br", null),
16593
+ index.h("sqm-share-button", { medium: "linemessenger", icon: "line", iconslot: "prefix" },
16594
+ index.h("span", null, "Line Messenger"))));
16564
16595
  };
16565
16596
 
16566
16597
  const ShareButton$1 = /*#__PURE__*/Object.freeze({
@@ -16572,7 +16603,8 @@ const ShareButton$1 = /*#__PURE__*/Object.freeze({
16572
16603
  WithoutIcon: WithoutIcon,
16573
16604
  WithoutText: WithoutText,
16574
16605
  TextStyleWithoutIcon: TextStyleWithoutIcon,
16575
- FullStackIcon: FullStackIcon
16606
+ FullStackIcon: FullStackIcon,
16607
+ AllMediums: AllMediums
16576
16608
  });
16577
16609
 
16578
16610
  const ShareLink_stories = {
@@ -18037,7 +18069,7 @@ const defaultProps$3 = {
18037
18069
  loading: false,
18038
18070
  confirmPassword: true,
18039
18071
  hideInputs: false,
18040
- loginPath: "/login"
18072
+ loginPath: "/login",
18041
18073
  },
18042
18074
  callbacks: {
18043
18075
  submit: () => console.log("Submit!"),
@@ -18054,7 +18086,7 @@ const errorProps$1 = {
18054
18086
  loading: false,
18055
18087
  confirmPassword: true,
18056
18088
  hideInputs: false,
18057
- loginPath: "/login"
18089
+ loginPath: "/login",
18058
18090
  },
18059
18091
  callbacks: {
18060
18092
  submit: () => console.log("Submit!"),
@@ -18074,7 +18106,7 @@ const loadingProps$1 = {
18074
18106
  loading: true,
18075
18107
  confirmPassword: true,
18076
18108
  hideInputs: false,
18077
- loginPath: "/login"
18109
+ loginPath: "/login",
18078
18110
  },
18079
18111
  callbacks: {
18080
18112
  submit: () => console.log("Submit!"),
@@ -18091,7 +18123,7 @@ const slottedProps = {
18091
18123
  loading: false,
18092
18124
  confirmPassword: true,
18093
18125
  hideInputs: false,
18094
- loginPath: "/login"
18126
+ loginPath: "/login",
18095
18127
  },
18096
18128
  callbacks: {
18097
18129
  submit: () => console.log("Submit!"),
@@ -18118,11 +18150,18 @@ const FieldsHidden = () => {
18118
18150
  loading: true,
18119
18151
  confirmPassword: true,
18120
18152
  hideInputs: true,
18121
- loginPath: "/login"
18153
+ loginPath: "/login",
18122
18154
  },
18123
18155
  } }));
18124
18156
  };
18125
- const SlottedInputs = () => index.h(PortalRegisterView, Object.assign({}, slottedProps));
18157
+ const SlottedInputs = () => index.h(PortalRegisterView, Object.assign({}, slottedProps));
18158
+ const TermsAndConditions = () => (index.h(PortalRegisterView, Object.assign({}, defaultProps$3, { content: {
18159
+ ...defaultProps$3.content,
18160
+ terms: (index.h("p", null,
18161
+ "By signing up you agree to the",
18162
+ " ",
18163
+ index.h("a", { href: "https://example.com", target: "_blank" }, "Terms and Conditions"))),
18164
+ } })));
18126
18165
 
18127
18166
  const PortalRegister$1 = /*#__PURE__*/Object.freeze({
18128
18167
  __proto__: null,
@@ -18131,7 +18170,8 @@ const PortalRegister$1 = /*#__PURE__*/Object.freeze({
18131
18170
  RegisterWithError: RegisterWithError,
18132
18171
  RegisterLoading: RegisterLoading,
18133
18172
  FieldsHidden: FieldsHidden,
18134
- SlottedInputs: SlottedInputs
18173
+ SlottedInputs: SlottedInputs,
18174
+ TermsAndConditions: TermsAndConditions
18135
18175
  });
18136
18176
 
18137
18177
  const scenario = "@author:derek\r\n@owner:ian\r\nFeature: Forgot Password\r\n\r\n @motivating\r\n Scenario: Users can request to reset their password\r\n Given a user enters their email address\r\n And that email address is linked to a previously created account\r\n When they click \"Reset Password\"\r\n Then the button enters a loading state\r\n When the password reset email is sent\r\n Then a confirmation banner is shown stating a password reset email was sent\r\n\r\n @motivating\r\n Scenario: Users are notified if sending their password reset email fails\r\n Given a user enters their email address\r\n And that email address is linked to a previously created account\r\n When they click \"Reset Password\"\r\n Then the button enters a loading state\r\n When the password reset email fails to send\r\n Then the user does not receive a password reset email\r\n And an error banner is shown stating that they should try again\r\n\r\n @motivating\r\n @landmine\r\n Scenario: If the input email is not associated to an account a success banner is shown but an email is not be sent\r\n Given the user entered an email address that is not associated to an accoun\r\n When they click \"Reset Password\"\r\n Then the button enters a loading state\r\n But no email is sent\r\n And a success banner is shown stating a password reset email was sent if the given email was associated to an account\r\n\r\n @motivating\r\n Scenario: Users can resend password reset email\r\n Given a user had previously requested to reset their password\r\n When they enter their email address\r\n And that email address is linked to a previously created account\r\n And they click \"Reset Password\"\r\n Then the user receives a second password reset email\r\n And a success banner is shown stating that their email was sent\r\n\r\n @motivating\r\n Scenario Outline: The email link can be configured to redirect users to a specific base path but defaults to \"/resetPassword\"\r\n Given a user viewing the password reset component\r\n And the component <mayHave> \"redirect-path\" with <value>\r\n When they request a password reset email\r\n And they click the link in the email\r\n Then they are redirected to <redirectPath>\r\n Examples:\r\n | mayHave | value | redirectPath |\r\n | doesn't have | N/A | /resetPassword |\r\n | has | /resetMyPassword | /resetMyPassword |\r\n\r\n @minutae\r\n Scenario Outline: Navigation back to the login page can be customized but defaults to \"/login\"\r\n Given a user viewing the password reset component\r\n And the component <mayHave> \"login-path\" with <value>\r\n Then they see a \"Sign In\" text button\r\n When they click \"Sign In\"\r\n Then they are redirected to <redirectPath>\r\n Examples:\r\n | mayHave | value | redirectPath |\r\n | doesn't have | N/A | /login |\r\n | has | /signin | /signin |";
@@ -22910,7 +22950,7 @@ const ReferralIframeReadme = "# sqm-referral-iframe\r\n\r\n\r\n\r\n<!-- Auto Gen
22910
22950
 
22911
22951
  const ForgotPasswordReadme = "# sqm-portal-forgot-password\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| -------------- | --------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |\r\n| `demoData` | -- | | `{ states?: { error: string; loading: boolean; success: boolean; loginPath: string; }; content?: { secondaryButton: any; messageSlot: any; emailLabel?: string; submitLabel?: string; }; }` | `undefined` |\r\n| `emailLabel` | `email-label` | | `string` | `\"Email\"` |\r\n| `loginPath` | `login-path` | | `string` | `\"/login\"` |\r\n| `redirectPath` | `redirect-path` | The page that users are redirected to from the password reset email. | `string` | `\"/resetPassword\"` |\r\n| `submitLabel` | `submit-label` | | `string` | `\"Request Password Reset\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n sqm-portal-forgot-password --> sqm-form-message\r\n style sqm-portal-forgot-password fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
22912
22952
 
22913
- const RegisterReadme = "# sqm-portal-register\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| -------------------------- | ---------------------------- | ------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |\r\n| `confirmPassword` | `confirm-password` | | `boolean` | `false` |\r\n| `confirmPasswordLabel` | `confirm-password-label` | | `string` | `\"Confirm Password\"` |\r\n| `demoData` | -- | | `{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; loginPath: string; }; content?: { formData?: any; passwordField?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; refs?: { formRef: any; }; }` | `undefined` |\r\n| `emailLabel` | `email-label` | | `string` | `\"Email\"` |\r\n| `enablePasswordValidation` | `enable-password-validation` | | `boolean` | `true` |\r\n| `hideInputs` | `hide-inputs` | | `boolean` | `false` |\r\n| `loginLabel` | `login-label` | | `string` | `\"Sign in\"` |\r\n| `loginPath` | `login-path` | | `string` | `\"/login\"` |\r\n| `nextPage` | `next-page` | | `string` | `\"/\"` |\r\n| `pageLabel` | `page-label` | | `string` | `\"Register\"` |\r\n| `passwordLabel` | `password-label` | | `string` | `\"Password\"` |\r\n| `redirectPath` | `redirect-path` | The page that users are redirected to from the verification email. | `string` | `\"/verifyEmail\"` |\r\n| `submitLabel` | `submit-label` | | `string` | `\"Register\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Used by\r\n\r\n - [sqm-stencilbook](../sqm-stencilbook)\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n- [sqm-password-field](../sqm-password-field)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n sqm-portal-register --> sqm-form-message\r\n sqm-portal-register --> sqm-password-field\r\n sqm-stencilbook --> sqm-portal-register\r\n style sqm-portal-register fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
22953
+ const RegisterReadme = "# sqm-portal-register\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| -------------------------- | ---------------------------- | ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |\r\n| `confirmPassword` | `confirm-password` | | `boolean` | `false` |\r\n| `confirmPasswordLabel` | `confirm-password-label` | | `string` | `\"Confirm Password\"` |\r\n| `demoData` | -- | | `{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; loginPath: string; }; content?: { formData?: VNode; terms?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; refs?: { formRef: any; }; }` | `undefined` |\r\n| `emailLabel` | `email-label` | | `string` | `\"Email\"` |\r\n| `enablePasswordValidation` | `enable-password-validation` | | `boolean` | `true` |\r\n| `hideInputs` | `hide-inputs` | | `boolean` | `false` |\r\n| `loginLabel` | `login-label` | | `string` | `\"Sign in\"` |\r\n| `loginPath` | `login-path` | | `string` | `\"/login\"` |\r\n| `nextPage` | `next-page` | | `string` | `\"/\"` |\r\n| `pageLabel` | `page-label` | | `string` | `\"Register\"` |\r\n| `passwordLabel` | `password-label` | | `string` | `\"Password\"` |\r\n| `redirectPath` | `redirect-path` | The page that users are redirected to from the verification email. | `string` | `\"/verifyEmail\"` |\r\n| `submitLabel` | `submit-label` | | `string` | `\"Register\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Used by\r\n\r\n - [sqm-stencilbook](../sqm-stencilbook)\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n- [sqm-password-field](../sqm-password-field)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n sqm-portal-register --> sqm-form-message\r\n sqm-portal-register --> sqm-password-field\r\n sqm-stencilbook --> sqm-portal-register\r\n style sqm-portal-register fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
22914
22954
 
22915
22955
  const EditProfileReadme = "# sqm-portal-profile\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| ------------------------ | --------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |\r\n| `countrytext` | `countrytext` | | `string` | `\"Country\"` |\r\n| `demoData` | -- | | `{ states?: { success: boolean; loading: boolean; submitDisabled: boolean; showCountry: boolean; formState: { country: string; firstName: string; lastName: string; errors: any; error: string; }; user: { id: string; accountId: string; firstName: string; lastName: string; email: string; countryCode: string; }; text: { firstnametext: string; lastnametext: string; emailtext: string; countrytext: string; editProfileHeader: string; editProfileSubHeader: string; submitChangeButtonText: string; }; }; }` | `undefined` |\r\n| `editProfileHeader` | `edit-profile-header` | | `string` | `\"Edit your profile\"` |\r\n| `editProfileSubHeader` | `edit-profile-sub-header` | | `string` | `\"Personal Information\"` |\r\n| `emailtext` | `emailtext` | | `string` | `\"Email\"` |\r\n| `firstnametext` | `firstnametext` | | `string` | `\"First Name\"` |\r\n| `lastnametext` | `lastnametext` | | `string` | `\"Last Name\"` |\r\n| `showCountry` | `show-country` | | `boolean` | `true` |\r\n| `submitChangeButtonText` | `submit-change-button-text` | | `string` | `\"Submit Changes\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n sqm-portal-profile --> sqm-form-message\r\n style sqm-portal-profile fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
22916
22956
 
package/dist/collection/components/sqm-portal-register/sqm-portal-register-view.js CHANGED
@@ -69,6 +69,7 @@ export function PortalRegisterView(props) {
69
69
  "Cannot be empty",
70
70
  }
71
71
  : [])))),
72
+ content.terms,
72
73
  h("div", { class: sheet.classes.ButtonsContainer },
73
74
  h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"),
74
75
  content.secondaryButton))));
package/dist/collection/components/sqm-portal-register/sqm-portal-register.js CHANGED
@@ -71,6 +71,7 @@ export class PortalRegister {
71
71
  formData: h("slot", { name: "formData" }),
72
72
  secondaryButton: (h("slot", { name: "secondaryButton" },
73
73
  h("sl-button", { type: "text", disabled: states.loading, onClick: () => navigation.push(states.loginPath) }, this.loginLabel))),
74
+ terms: h("slot", { name: "terms" }),
74
75
  emailLabel: this.emailLabel,
75
76
  passwordLabel: this.passwordLabel,
76
77
  submitLabel: this.submitLabel,
@@ -339,7 +340,7 @@ export class PortalRegister {
339
340
  "mutable": false,
340
341
  "complexType": {
341
342
  "original": "DemoData<PortalRegisterViewProps>",
342
- "resolved": "{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; loginPath: string; }; content?: { formData?: any; passwordField?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; refs?: { formRef: any; }; }",
343
+ "resolved": "{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; loginPath: string; }; content?: { formData?: VNode; terms?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; refs?: { formRef: any; }; }",
343
344
  "references": {
344
345
  "DemoData": {
345
346
  "location": "import",
package/dist/collection/stories/PortalRegister.stories.js CHANGED
@@ -9,7 +9,7 @@ const defaultProps = {
9
9
  loading: false,
10
10
  confirmPassword: true,
11
11
  hideInputs: false,
12
- loginPath: "/login"
12
+ loginPath: "/login",
13
13
  },
14
14
  callbacks: {
15
15
  submit: () => console.log("Submit!"),
@@ -26,7 +26,7 @@ const errorProps = {
26
26
  loading: false,
27
27
  confirmPassword: true,
28
28
  hideInputs: false,
29
- loginPath: "/login"
29
+ loginPath: "/login",
30
30
  },
31
31
  callbacks: {
32
32
  submit: () => console.log("Submit!"),
@@ -46,7 +46,7 @@ const loadingProps = {
46
46
  loading: true,
47
47
  confirmPassword: true,
48
48
  hideInputs: false,
49
- loginPath: "/login"
49
+ loginPath: "/login",
50
50
  },
51
51
  callbacks: {
52
52
  submit: () => console.log("Submit!"),
@@ -63,7 +63,7 @@ const slottedProps = {
63
63
  loading: false,
64
64
  confirmPassword: true,
65
65
  hideInputs: false,
66
- loginPath: "/login"
66
+ loginPath: "/login",
67
67
  },
68
68
  callbacks: {
69
69
  submit: () => console.log("Submit!"),
@@ -90,8 +90,15 @@ export const FieldsHidden = () => {
90
90
  loading: true,
91
91
  confirmPassword: true,
92
92
  hideInputs: true,
93
- loginPath: "/login"
93
+ loginPath: "/login",
94
94
  },
95
95
  } }));
96
96
  };
97
97
  export const SlottedInputs = () => h(PortalRegisterView, Object.assign({}, slottedProps));
98
+ export const TermsAndConditions = () => (h(PortalRegisterView, Object.assign({}, defaultProps, { content: {
99
+ ...defaultProps.content,
100
+ terms: (h("p", null,
101
+ "By signing up you agree to the",
102
+ " ",
103
+ h("a", { href: "https://example.com", target: "_blank" }, "Terms and Conditions"))),
104
+ } })));
package/dist/collection/stories/ShareButton.stories.js CHANGED
@@ -43,3 +43,32 @@ export const FullStackIcon = () => {
43
43
  h("sqm-share-button", { medium: "email", icon: "envelope", iconslot: "prefix" },
44
44
  h("span", null, "Email"))));
45
45
  };
46
+ export const AllMediums = () => {
47
+ return (h("div", null,
48
+ h("sqm-share-button", { medium: "facebook", iconslot: "prefix" },
49
+ h("span", null, "Facebook")),
50
+ h("br", null),
51
+ h("sqm-share-button", { medium: "email", icon: "envelope", iconslot: "prefix" },
52
+ h("span", null, "Email")),
53
+ h("br", null),
54
+ h("sqm-share-button", { medium: "whatsapp", icon: "whatsapp", iconslot: "prefix" },
55
+ h("span", null, "WhatsApp")),
56
+ h("br", null),
57
+ h("sqm-share-button", { medium: "linkedin", iconslot: "prefix" },
58
+ h("span", null, "Linkedin")),
59
+ h("br", null),
60
+ h("sqm-share-button", { medium: "twitter", iconslot: "prefix" },
61
+ h("span", null, "Twitter")),
62
+ h("br", null),
63
+ h("sqm-share-button", { medium: "pinterest", iconslot: "prefix" },
64
+ h("span", null, "Pinterest")),
65
+ h("br", null),
66
+ h("sqm-share-button", { medium: "fbmessenger", icon: "messenger", iconslot: "prefix" },
67
+ h("span", null, "Messenger")),
68
+ h("br", null),
69
+ h("sqm-share-button", { medium: "sms", icon: "chat", iconslot: "prefix" },
70
+ h("span", null, "SMS")),
71
+ h("br", null),
72
+ h("sqm-share-button", { medium: "linemessenger", icon: "line", iconslot: "prefix" },
73
+ h("span", null, "Line Messenger"))));
74
+ };
package/dist/esm/sqm-divided-layout_26.entry.js CHANGED
@@ -1575,6 +1575,7 @@ function PortalRegisterView(props) {
1575
1575
  "Cannot be empty",
1576
1576
  }
1577
1577
  : [])))),
1578
+ content.terms,
1578
1579
  h("div", { class: sheet$4.classes.ButtonsContainer },
1579
1580
  h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"),
1580
1581
  content.secondaryButton))));
@@ -5633,6 +5634,7 @@ const PortalRegister = class {
5633
5634
  const content = {
5634
5635
  formData: h("slot", { name: "formData" }),
5635
5636
  secondaryButton: (h("slot", { name: "secondaryButton" }, h("sl-button", { type: "text", disabled: states.loading, onClick: () => mn.push(states.loginPath) }, this.loginLabel))),
5637
+ terms: h("slot", { name: "terms" }),
5636
5638
  emailLabel: this.emailLabel,
5637
5639
  passwordLabel: this.passwordLabel,
5638
5640
  submitLabel: this.submitLabel,
@@ -16557,6 +16559,35 @@ const FullStackIcon = () => {
16557
16559
  h("br", null),
16558
16560
  h("sqm-share-button", { medium: "email", icon: "envelope", iconslot: "prefix" },
16559
16561
  h("span", null, "Email"))));
16562
+ };
16563
+ const AllMediums = () => {
16564
+ return (h("div", null,
16565
+ h("sqm-share-button", { medium: "facebook", iconslot: "prefix" },
16566
+ h("span", null, "Facebook")),
16567
+ h("br", null),
16568
+ h("sqm-share-button", { medium: "email", icon: "envelope", iconslot: "prefix" },
16569
+ h("span", null, "Email")),
16570
+ h("br", null),
16571
+ h("sqm-share-button", { medium: "whatsapp", icon: "whatsapp", iconslot: "prefix" },
16572
+ h("span", null, "WhatsApp")),
16573
+ h("br", null),
16574
+ h("sqm-share-button", { medium: "linkedin", iconslot: "prefix" },
16575
+ h("span", null, "Linkedin")),
16576
+ h("br", null),
16577
+ h("sqm-share-button", { medium: "twitter", iconslot: "prefix" },
16578
+ h("span", null, "Twitter")),
16579
+ h("br", null),
16580
+ h("sqm-share-button", { medium: "pinterest", iconslot: "prefix" },
16581
+ h("span", null, "Pinterest")),
16582
+ h("br", null),
16583
+ h("sqm-share-button", { medium: "fbmessenger", icon: "messenger", iconslot: "prefix" },
16584
+ h("span", null, "Messenger")),
16585
+ h("br", null),
16586
+ h("sqm-share-button", { medium: "sms", icon: "chat", iconslot: "prefix" },
16587
+ h("span", null, "SMS")),
16588
+ h("br", null),
16589
+ h("sqm-share-button", { medium: "linemessenger", icon: "line", iconslot: "prefix" },
16590
+ h("span", null, "Line Messenger"))));
16560
16591
  };
16561
16592
 
16562
16593
  const ShareButton$1 = /*#__PURE__*/Object.freeze({
@@ -16568,7 +16599,8 @@ const ShareButton$1 = /*#__PURE__*/Object.freeze({
16568
16599
  WithoutIcon: WithoutIcon,
16569
16600
  WithoutText: WithoutText,
16570
16601
  TextStyleWithoutIcon: TextStyleWithoutIcon,
16571
- FullStackIcon: FullStackIcon
16602
+ FullStackIcon: FullStackIcon,
16603
+ AllMediums: AllMediums
16572
16604
  });
16573
16605
 
16574
16606
  const ShareLink_stories = {
@@ -18033,7 +18065,7 @@ const defaultProps$3 = {
18033
18065
  loading: false,
18034
18066
  confirmPassword: true,
18035
18067
  hideInputs: false,
18036
- loginPath: "/login"
18068
+ loginPath: "/login",
18037
18069
  },
18038
18070
  callbacks: {
18039
18071
  submit: () => console.log("Submit!"),
@@ -18050,7 +18082,7 @@ const errorProps$1 = {
18050
18082
  loading: false,
18051
18083
  confirmPassword: true,
18052
18084
  hideInputs: false,
18053
- loginPath: "/login"
18085
+ loginPath: "/login",
18054
18086
  },
18055
18087
  callbacks: {
18056
18088
  submit: () => console.log("Submit!"),
@@ -18070,7 +18102,7 @@ const loadingProps$1 = {
18070
18102
  loading: true,
18071
18103
  confirmPassword: true,
18072
18104
  hideInputs: false,
18073
- loginPath: "/login"
18105
+ loginPath: "/login",
18074
18106
  },
18075
18107
  callbacks: {
18076
18108
  submit: () => console.log("Submit!"),
@@ -18087,7 +18119,7 @@ const slottedProps = {
18087
18119
  loading: false,
18088
18120
  confirmPassword: true,
18089
18121
  hideInputs: false,
18090
- loginPath: "/login"
18122
+ loginPath: "/login",
18091
18123
  },
18092
18124
  callbacks: {
18093
18125
  submit: () => console.log("Submit!"),
@@ -18114,11 +18146,18 @@ const FieldsHidden = () => {
18114
18146
  loading: true,
18115
18147
  confirmPassword: true,
18116
18148
  hideInputs: true,
18117
- loginPath: "/login"
18149
+ loginPath: "/login",
18118
18150
  },
18119
18151
  } }));
18120
18152
  };
18121
- const SlottedInputs = () => h(PortalRegisterView, Object.assign({}, slottedProps));
18153
+ const SlottedInputs = () => h(PortalRegisterView, Object.assign({}, slottedProps));
18154
+ const TermsAndConditions = () => (h(PortalRegisterView, Object.assign({}, defaultProps$3, { content: {
18155
+ ...defaultProps$3.content,
18156
+ terms: (h("p", null,
18157
+ "By signing up you agree to the",
18158
+ " ",
18159
+ h("a", { href: "https://example.com", target: "_blank" }, "Terms and Conditions"))),
18160
+ } })));
18122
18161
 
18123
18162
  const PortalRegister$1 = /*#__PURE__*/Object.freeze({
18124
18163
  __proto__: null,
@@ -18127,7 +18166,8 @@ const PortalRegister$1 = /*#__PURE__*/Object.freeze({
18127
18166
  RegisterWithError: RegisterWithError,
18128
18167
  RegisterLoading: RegisterLoading,
18129
18168
  FieldsHidden: FieldsHidden,
18130
- SlottedInputs: SlottedInputs
18169
+ SlottedInputs: SlottedInputs,
18170
+ TermsAndConditions: TermsAndConditions
18131
18171
  });
18132
18172
 
18133
18173
  const scenario = "@author:derek\r\n@owner:ian\r\nFeature: Forgot Password\r\n\r\n @motivating\r\n Scenario: Users can request to reset their password\r\n Given a user enters their email address\r\n And that email address is linked to a previously created account\r\n When they click \"Reset Password\"\r\n Then the button enters a loading state\r\n When the password reset email is sent\r\n Then a confirmation banner is shown stating a password reset email was sent\r\n\r\n @motivating\r\n Scenario: Users are notified if sending their password reset email fails\r\n Given a user enters their email address\r\n And that email address is linked to a previously created account\r\n When they click \"Reset Password\"\r\n Then the button enters a loading state\r\n When the password reset email fails to send\r\n Then the user does not receive a password reset email\r\n And an error banner is shown stating that they should try again\r\n\r\n @motivating\r\n @landmine\r\n Scenario: If the input email is not associated to an account a success banner is shown but an email is not be sent\r\n Given the user entered an email address that is not associated to an accoun\r\n When they click \"Reset Password\"\r\n Then the button enters a loading state\r\n But no email is sent\r\n And a success banner is shown stating a password reset email was sent if the given email was associated to an account\r\n\r\n @motivating\r\n Scenario: Users can resend password reset email\r\n Given a user had previously requested to reset their password\r\n When they enter their email address\r\n And that email address is linked to a previously created account\r\n And they click \"Reset Password\"\r\n Then the user receives a second password reset email\r\n And a success banner is shown stating that their email was sent\r\n\r\n @motivating\r\n Scenario Outline: The email link can be configured to redirect users to a specific base path but defaults to \"/resetPassword\"\r\n Given a user viewing the password reset component\r\n And the component <mayHave> \"redirect-path\" with <value>\r\n When they request a password reset email\r\n And they click the link in the email\r\n Then they are redirected to <redirectPath>\r\n Examples:\r\n | mayHave | value | redirectPath |\r\n | doesn't have | N/A | /resetPassword |\r\n | has | /resetMyPassword | /resetMyPassword |\r\n\r\n @minutae\r\n Scenario Outline: Navigation back to the login page can be customized but defaults to \"/login\"\r\n Given a user viewing the password reset component\r\n And the component <mayHave> \"login-path\" with <value>\r\n Then they see a \"Sign In\" text button\r\n When they click \"Sign In\"\r\n Then they are redirected to <redirectPath>\r\n Examples:\r\n | mayHave | value | redirectPath |\r\n | doesn't have | N/A | /login |\r\n | has | /signin | /signin |";
@@ -22906,7 +22946,7 @@ const ReferralIframeReadme = "# sqm-referral-iframe\r\n\r\n\r\n\r\n<!-- Auto Gen
22906
22946
 
22907
22947
  const ForgotPasswordReadme = "# sqm-portal-forgot-password\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| -------------- | --------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |\r\n| `demoData` | -- | | `{ states?: { error: string; loading: boolean; success: boolean; loginPath: string; }; content?: { secondaryButton: any; messageSlot: any; emailLabel?: string; submitLabel?: string; }; }` | `undefined` |\r\n| `emailLabel` | `email-label` | | `string` | `\"Email\"` |\r\n| `loginPath` | `login-path` | | `string` | `\"/login\"` |\r\n| `redirectPath` | `redirect-path` | The page that users are redirected to from the password reset email. | `string` | `\"/resetPassword\"` |\r\n| `submitLabel` | `submit-label` | | `string` | `\"Request Password Reset\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n sqm-portal-forgot-password --> sqm-form-message\r\n style sqm-portal-forgot-password fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
22908
22948
 
22909
- const RegisterReadme = "# sqm-portal-register\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| -------------------------- | ---------------------------- | ------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |\r\n| `confirmPassword` | `confirm-password` | | `boolean` | `false` |\r\n| `confirmPasswordLabel` | `confirm-password-label` | | `string` | `\"Confirm Password\"` |\r\n| `demoData` | -- | | `{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; loginPath: string; }; content?: { formData?: any; passwordField?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; refs?: { formRef: any; }; }` | `undefined` |\r\n| `emailLabel` | `email-label` | | `string` | `\"Email\"` |\r\n| `enablePasswordValidation` | `enable-password-validation` | | `boolean` | `true` |\r\n| `hideInputs` | `hide-inputs` | | `boolean` | `false` |\r\n| `loginLabel` | `login-label` | | `string` | `\"Sign in\"` |\r\n| `loginPath` | `login-path` | | `string` | `\"/login\"` |\r\n| `nextPage` | `next-page` | | `string` | `\"/\"` |\r\n| `pageLabel` | `page-label` | | `string` | `\"Register\"` |\r\n| `passwordLabel` | `password-label` | | `string` | `\"Password\"` |\r\n| `redirectPath` | `redirect-path` | The page that users are redirected to from the verification email. | `string` | `\"/verifyEmail\"` |\r\n| `submitLabel` | `submit-label` | | `string` | `\"Register\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Used by\r\n\r\n - [sqm-stencilbook](../sqm-stencilbook)\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n- [sqm-password-field](../sqm-password-field)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n sqm-portal-register --> sqm-form-message\r\n sqm-portal-register --> sqm-password-field\r\n sqm-stencilbook --> sqm-portal-register\r\n style sqm-portal-register fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
22949
+ const RegisterReadme = "# sqm-portal-register\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| -------------------------- | ---------------------------- | ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |\r\n| `confirmPassword` | `confirm-password` | | `boolean` | `false` |\r\n| `confirmPasswordLabel` | `confirm-password-label` | | `string` | `\"Confirm Password\"` |\r\n| `demoData` | -- | | `{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; loginPath: string; }; content?: { formData?: VNode; terms?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; refs?: { formRef: any; }; }` | `undefined` |\r\n| `emailLabel` | `email-label` | | `string` | `\"Email\"` |\r\n| `enablePasswordValidation` | `enable-password-validation` | | `boolean` | `true` |\r\n| `hideInputs` | `hide-inputs` | | `boolean` | `false` |\r\n| `loginLabel` | `login-label` | | `string` | `\"Sign in\"` |\r\n| `loginPath` | `login-path` | | `string` | `\"/login\"` |\r\n| `nextPage` | `next-page` | | `string` | `\"/\"` |\r\n| `pageLabel` | `page-label` | | `string` | `\"Register\"` |\r\n| `passwordLabel` | `password-label` | | `string` | `\"Password\"` |\r\n| `redirectPath` | `redirect-path` | The page that users are redirected to from the verification email. | `string` | `\"/verifyEmail\"` |\r\n| `submitLabel` | `submit-label` | | `string` | `\"Register\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Used by\r\n\r\n - [sqm-stencilbook](../sqm-stencilbook)\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n- [sqm-password-field](../sqm-password-field)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n sqm-portal-register --> sqm-form-message\r\n sqm-portal-register --> sqm-password-field\r\n sqm-stencilbook --> sqm-portal-register\r\n style sqm-portal-register fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
22910
22950
 
22911
22951
  const EditProfileReadme = "# sqm-portal-profile\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| ------------------------ | --------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |\r\n| `countrytext` | `countrytext` | | `string` | `\"Country\"` |\r\n| `demoData` | -- | | `{ states?: { success: boolean; loading: boolean; submitDisabled: boolean; showCountry: boolean; formState: { country: string; firstName: string; lastName: string; errors: any; error: string; }; user: { id: string; accountId: string; firstName: string; lastName: string; email: string; countryCode: string; }; text: { firstnametext: string; lastnametext: string; emailtext: string; countrytext: string; editProfileHeader: string; editProfileSubHeader: string; submitChangeButtonText: string; }; }; }` | `undefined` |\r\n| `editProfileHeader` | `edit-profile-header` | | `string` | `\"Edit your profile\"` |\r\n| `editProfileSubHeader` | `edit-profile-sub-header` | | `string` | `\"Personal Information\"` |\r\n| `emailtext` | `emailtext` | | `string` | `\"Email\"` |\r\n| `firstnametext` | `firstnametext` | | `string` | `\"First Name\"` |\r\n| `lastnametext` | `lastnametext` | | `string` | `\"Last Name\"` |\r\n| `showCountry` | `show-country` | | `boolean` | `true` |\r\n| `submitChangeButtonText` | `submit-change-button-text` | | `string` | `\"Submit Changes\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n sqm-portal-profile --> sqm-form-message\r\n style sqm-portal-profile fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
22912
22952