@saasquatch/mint-components 1.15.0-79 → 1.15.0-80
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/sqm-stencilbook.cjs.entry.js +1 -1
- package/dist/collection/components/sqm-leaderboard/sqm-leaderboard.js +1 -1
- package/dist/esm/sqm-stencilbook.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-2a8e2f28.system.js +1 -1
- package/dist/mint-components/{p-0f941bb6.entry.js → p-64d7775b.entry.js} +1 -1
- package/dist/mint-components/p-f6665d99.system.entry.js +1 -0
- package/dist/types/components/sqm-leaderboard/sqm-leaderboard.d.ts +1 -1
- package/dist/types/global/android.d.ts +7 -0
- package/dist/types/global/demo.d.ts +2 -0
- package/dist/types/stories/features.d.ts +4 -0
- package/dist/types/stories/templates.d.ts +4 -0
- package/docs/docs.docx +0 -0
- package/docs/raisins.json +1 -1
- package/package.json +1 -1
- package/dist/mint-components/p-65d2f344.system.entry.js +0 -1
- package/shoelace/assets/icons/twitter-x.svg +0 -4
|
@@ -6518,7 +6518,7 @@ const HeroImage = /*#__PURE__*/Object.freeze({
|
|
|
6518
6518
|
ColumnsCustomColors: ColumnsCustomColors
|
|
6519
6519
|
});
|
|
6520
6520
|
|
|
6521
|
-
const scenario$7 = "@author:noah\n@owner:noah\n\nFeature: Hero Unit\n\n Background: A portal with a hero unit exists\n Given a hosted portal\n And the portal has hero unit on the login page\n And a user is viewing the login page\n\n Scenario: The hero unit defaults to a single column layout\n Given a hero unit does not have a \"columns\" prop\n But the following html is wrapped by the hero unit\n \"\"\"\n <sqm-portal-login></sqm-portal-login>\n <div slot=\"secondary-column\">\n <h1 style=\"text-align:center\">Get Referring!</h1>\n <p style=\"text-align:center\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n aliquip ex ea commodo consequat. Duis aute irure dolor in\n reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n pariatur.\n </p>\n </div>\n \"\"\"\n Then only a single column will be displayed\n And within it will be the login component\n\n Scenario Outline: The hero unit supports single or dual column layouts\n Given a hero unit with prop \"columns\" having <columnValue>\n And it wraps <html>\n Then the hero unit displays <columnValue> columns\n Examples:\n | columnValue | html |\n | 1 | <h1>Column 1!</h1> |\n | 2 | <h1>Column 1!</h1><div slot=\"secondary-column\"><h1 style=\"text-align:center\">Column 2!</h1></div> |\n\n Scenario: HTML to be displayed in the second column comes from the \"secondary-column\" slot\n Given a hero unit with \"columns\" \"2\"\n And the following html\n \"\"\"\n <h1>Column 1!</h1>\n <div>\n <h1 style=\"text-align:center\">Column 2!</h1>\n </div>\n \"\"\"\n When the hero unit is rendered\n Then only one column is displayed with content\n And column 1 will contain the \"Column 1!\" text\n And column 1 will contain the \"Column 2!\" text\n When the div for column two is updated to have 'slot=\"secondary-column\"'\n Then the two columns are displayed with content\n And column 1 will contain the \"Column 1!\" text\n And column 2 will contain the \"Column 2!\" text\n\n Scenario Outline: A background for the hero unit can be set as an image or colour\n Given a hero unit with <backgroundPropValue>\n Then the background will be <background>\n Examples:\n | background | background |\n | https://images.unsplash.com/photo-1599676821464-3555954838dc | image of misty mountains |\n | LightSlateGrey | light slate grey |\n | #00FF00 | green |\n | rgb(128,0,128) | purple |\n\n Scenario Outline: Wrap Direction can be configured for mobile experiences\n Given a hero unit with the following HTML\n \"\"\"\n <h1>Column 1!</h1>\n <div slot=\"secondary-column\">\n <h1 style=\"text-align:center\">Column 2!</h1>\n </div>\n \"\"\"\n And prop \"wrap-direction\" has <value>\n When the window width is less than 600px\n Then the two columns will stack\n And <column> will be on top\n Examples:\n | value | column |\n | wrap | 1 |\n | wrap-reverse | 2 |\n | <null> | 1 |\n\n Scenario Outline: Minimum height can be customized\n Given the option \"Mininum Height (in px)\" is <value>\n Then the hero image minimum height is <effectiveValue>\n And the change is reflected in mobile view\n Examples:\n | value | effectiveValue |\n | unset (default value) | 200px |\n | 200px | 500px |";
|
|
6521
|
+
const scenario$7 = "@author:noah\n@owner:noah\n\nFeature: Hero Unit\n\n Background: A portal with a hero unit exists\n Given a hosted portal\n And the portal has hero unit on the login page\n And a user is viewing the login page\n\n Scenario: The hero unit defaults to a single column layout\n Given a hero unit does not have a \"columns\" prop\n But the following html is wrapped by the hero unit\n \"\"\"\n <sqm-portal-login></sqm-portal-login>\n <div slot=\"secondary-column\">\n <h1 style=\"text-align:center\">Get Referring!</h1>\n <p style=\"text-align:center\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n aliquip ex ea commodo consequat. Duis aute irure dolor in\n reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n pariatur.\n </p>\n </div>\n \"\"\"\n Then only a single column will be displayed\n And within it will be the login component\n\n Scenario: Hero layout can hide a column at 1023px or less\n Given the user is viewing an hero unit with a \"primary\" and \"secondary\" column\n And they want to hide the image in the \"primary\" column\n And the \"column-to-hide-in-mobile\" is set to \"primary\"\n When the user views the hero unit at 1023px or less\n Then the image in the \"primary\" column is hidden\n\n Scenario Outline: The hero unit supports single or dual column layouts\n Given a hero unit with prop \"columns\" having <columnValue>\n And it wraps <html>\n Then the hero unit displays <columnValue> columns\n Examples:\n | columnValue | html |\n | 1 | <h1>Column 1!</h1> |\n | 2 | <h1>Column 1!</h1><div slot=\"secondary-column\"><h1 style=\"text-align:center\">Column 2!</h1></div> |\n\n Scenario: HTML to be displayed in the second column comes from the \"secondary-column\" slot\n Given a hero unit with \"columns\" \"2\"\n And the following html\n \"\"\"\n <h1>Column 1!</h1>\n <div>\n <h1 style=\"text-align:center\">Column 2!</h1>\n </div>\n \"\"\"\n When the hero unit is rendered\n Then only one column is displayed with content\n And column 1 will contain the \"Column 1!\" text\n And column 1 will contain the \"Column 2!\" text\n When the div for column two is updated to have 'slot=\"secondary-column\"'\n Then the two columns are displayed with content\n And column 1 will contain the \"Column 1!\" text\n And column 2 will contain the \"Column 2!\" text\n\n Scenario Outline: A background for the hero unit can be set as an image or colour\n Given a hero unit with <backgroundPropValue>\n Then the background will be <background>\n Examples:\n | background | background |\n | https://images.unsplash.com/photo-1599676821464-3555954838dc | image of misty mountains |\n | LightSlateGrey | light slate grey |\n | #00FF00 | green |\n | rgb(128,0,128) | purple |\n\n Scenario Outline: Wrap Direction can be configured for mobile experiences\n Given a hero unit with the following HTML\n \"\"\"\n <h1>Column 1!</h1>\n <div slot=\"secondary-column\">\n <h1 style=\"text-align:center\">Column 2!</h1>\n </div>\n \"\"\"\n And prop \"wrap-direction\" has <value>\n When the window width is less than 600px\n Then the two columns will stack\n And <column> will be on top\n Examples:\n | value | column |\n | wrap | 1 |\n | wrap-reverse | 2 |\n | <null> | 1 |\n\n Scenario Outline: Minimum height can be customized\n Given the option \"Mininum Height (in px)\" is <value>\n Then the hero image minimum height is <effectiveValue>\n And the change is reflected in mobile view\n Examples:\n | value | effectiveValue |\n | unset (default value) | 200px |\n | 200px | 500px |";
|
|
6522
6522
|
|
|
6523
6523
|
const Hero_stories = {
|
|
6524
6524
|
title: "Components/Hero Layout",
|
|
@@ -14,7 +14,7 @@ import { useLeaderboard } from "./useLeaderboard";
|
|
|
14
14
|
* @example Referral Started - <sqm-leaderboard usersheading="Referrer" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" statsheading="Referrals" rank-type="rank" leaderboard-type="topStartedReferrers" rankheading="Rank" show-rank="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard" ></sqm-empty></sqm-leaderboard>
|
|
15
15
|
* @example Referral Converted - <sqm-leaderboard usersheading="Referrer" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" statsheading="Referrals" rank-type="rank" leaderboard-type="topConvertedReferrers" rankheading="Rank" show-rank="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard" ></sqm-empty></sqm-leaderboard>
|
|
16
16
|
* @example Points Earned - <sqm-leaderboard usersheading="Name" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" statsheading="Points" rank-type="rank" leaderboard-type="topPointEarners" rankheading="Rank" show-rank="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard" ></sqm-empty></sqm-leaderboard>
|
|
17
|
-
* @example Anonymous Leaderboard - <
|
|
17
|
+
* @example Anonymous Leaderboard - <sqm-leaderboard width="300px" usersheading="Referrer" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" statsheading="Referrals" rank-type="rank" leaderboard-type="topStartedReferrers" rankheading="Rank" show-rank="true" hide-names="true" hide-viewer="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard"></sqm-empty></sqm-leaderboard>
|
|
18
18
|
* @featureTooltip <div>Motivate your participants by gamifying your program. Contact <a href="mailto:saasquatch-support%40impact.com?subject=Next steps for Leaderboards feature&body=Hi Support Team, %0D%0A%0D%0A I am interested in learning more about how Leaderboards can support the growth of our referral program. Please connect me with a program strategy manager to discuss this feature further, and determine the next steps.%0D%0A%0D%0A%0D%0AThank you,%0D%0A[Add your name here]">Support</a> to upgrade your plan and add a leaderboard.</div>
|
|
19
19
|
*/
|
|
20
20
|
export class Leaderboard {
|
|
@@ -6514,7 +6514,7 @@ const HeroImage = /*#__PURE__*/Object.freeze({
|
|
|
6514
6514
|
ColumnsCustomColors: ColumnsCustomColors
|
|
6515
6515
|
});
|
|
6516
6516
|
|
|
6517
|
-
const scenario$7 = "@author:noah\n@owner:noah\n\nFeature: Hero Unit\n\n Background: A portal with a hero unit exists\n Given a hosted portal\n And the portal has hero unit on the login page\n And a user is viewing the login page\n\n Scenario: The hero unit defaults to a single column layout\n Given a hero unit does not have a \"columns\" prop\n But the following html is wrapped by the hero unit\n \"\"\"\n <sqm-portal-login></sqm-portal-login>\n <div slot=\"secondary-column\">\n <h1 style=\"text-align:center\">Get Referring!</h1>\n <p style=\"text-align:center\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n aliquip ex ea commodo consequat. Duis aute irure dolor in\n reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n pariatur.\n </p>\n </div>\n \"\"\"\n Then only a single column will be displayed\n And within it will be the login component\n\n Scenario Outline: The hero unit supports single or dual column layouts\n Given a hero unit with prop \"columns\" having <columnValue>\n And it wraps <html>\n Then the hero unit displays <columnValue> columns\n Examples:\n | columnValue | html |\n | 1 | <h1>Column 1!</h1> |\n | 2 | <h1>Column 1!</h1><div slot=\"secondary-column\"><h1 style=\"text-align:center\">Column 2!</h1></div> |\n\n Scenario: HTML to be displayed in the second column comes from the \"secondary-column\" slot\n Given a hero unit with \"columns\" \"2\"\n And the following html\n \"\"\"\n <h1>Column 1!</h1>\n <div>\n <h1 style=\"text-align:center\">Column 2!</h1>\n </div>\n \"\"\"\n When the hero unit is rendered\n Then only one column is displayed with content\n And column 1 will contain the \"Column 1!\" text\n And column 1 will contain the \"Column 2!\" text\n When the div for column two is updated to have 'slot=\"secondary-column\"'\n Then the two columns are displayed with content\n And column 1 will contain the \"Column 1!\" text\n And column 2 will contain the \"Column 2!\" text\n\n Scenario Outline: A background for the hero unit can be set as an image or colour\n Given a hero unit with <backgroundPropValue>\n Then the background will be <background>\n Examples:\n | background | background |\n | https://images.unsplash.com/photo-1599676821464-3555954838dc | image of misty mountains |\n | LightSlateGrey | light slate grey |\n | #00FF00 | green |\n | rgb(128,0,128) | purple |\n\n Scenario Outline: Wrap Direction can be configured for mobile experiences\n Given a hero unit with the following HTML\n \"\"\"\n <h1>Column 1!</h1>\n <div slot=\"secondary-column\">\n <h1 style=\"text-align:center\">Column 2!</h1>\n </div>\n \"\"\"\n And prop \"wrap-direction\" has <value>\n When the window width is less than 600px\n Then the two columns will stack\n And <column> will be on top\n Examples:\n | value | column |\n | wrap | 1 |\n | wrap-reverse | 2 |\n | <null> | 1 |\n\n Scenario Outline: Minimum height can be customized\n Given the option \"Mininum Height (in px)\" is <value>\n Then the hero image minimum height is <effectiveValue>\n And the change is reflected in mobile view\n Examples:\n | value | effectiveValue |\n | unset (default value) | 200px |\n | 200px | 500px |";
|
|
6517
|
+
const scenario$7 = "@author:noah\n@owner:noah\n\nFeature: Hero Unit\n\n Background: A portal with a hero unit exists\n Given a hosted portal\n And the portal has hero unit on the login page\n And a user is viewing the login page\n\n Scenario: The hero unit defaults to a single column layout\n Given a hero unit does not have a \"columns\" prop\n But the following html is wrapped by the hero unit\n \"\"\"\n <sqm-portal-login></sqm-portal-login>\n <div slot=\"secondary-column\">\n <h1 style=\"text-align:center\">Get Referring!</h1>\n <p style=\"text-align:center\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n aliquip ex ea commodo consequat. Duis aute irure dolor in\n reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n pariatur.\n </p>\n </div>\n \"\"\"\n Then only a single column will be displayed\n And within it will be the login component\n\n Scenario: Hero layout can hide a column at 1023px or less\n Given the user is viewing an hero unit with a \"primary\" and \"secondary\" column\n And they want to hide the image in the \"primary\" column\n And the \"column-to-hide-in-mobile\" is set to \"primary\"\n When the user views the hero unit at 1023px or less\n Then the image in the \"primary\" column is hidden\n\n Scenario Outline: The hero unit supports single or dual column layouts\n Given a hero unit with prop \"columns\" having <columnValue>\n And it wraps <html>\n Then the hero unit displays <columnValue> columns\n Examples:\n | columnValue | html |\n | 1 | <h1>Column 1!</h1> |\n | 2 | <h1>Column 1!</h1><div slot=\"secondary-column\"><h1 style=\"text-align:center\">Column 2!</h1></div> |\n\n Scenario: HTML to be displayed in the second column comes from the \"secondary-column\" slot\n Given a hero unit with \"columns\" \"2\"\n And the following html\n \"\"\"\n <h1>Column 1!</h1>\n <div>\n <h1 style=\"text-align:center\">Column 2!</h1>\n </div>\n \"\"\"\n When the hero unit is rendered\n Then only one column is displayed with content\n And column 1 will contain the \"Column 1!\" text\n And column 1 will contain the \"Column 2!\" text\n When the div for column two is updated to have 'slot=\"secondary-column\"'\n Then the two columns are displayed with content\n And column 1 will contain the \"Column 1!\" text\n And column 2 will contain the \"Column 2!\" text\n\n Scenario Outline: A background for the hero unit can be set as an image or colour\n Given a hero unit with <backgroundPropValue>\n Then the background will be <background>\n Examples:\n | background | background |\n | https://images.unsplash.com/photo-1599676821464-3555954838dc | image of misty mountains |\n | LightSlateGrey | light slate grey |\n | #00FF00 | green |\n | rgb(128,0,128) | purple |\n\n Scenario Outline: Wrap Direction can be configured for mobile experiences\n Given a hero unit with the following HTML\n \"\"\"\n <h1>Column 1!</h1>\n <div slot=\"secondary-column\">\n <h1 style=\"text-align:center\">Column 2!</h1>\n </div>\n \"\"\"\n And prop \"wrap-direction\" has <value>\n When the window width is less than 600px\n Then the two columns will stack\n And <column> will be on top\n Examples:\n | value | column |\n | wrap | 1 |\n | wrap-reverse | 2 |\n | <null> | 1 |\n\n Scenario Outline: Minimum height can be customized\n Given the option \"Mininum Height (in px)\" is <value>\n Then the hero image minimum height is <effectiveValue>\n And the change is reflected in mobile view\n Examples:\n | value | effectiveValue |\n | unset (default value) | 200px |\n | 200px | 500px |";
|
|
6518
6518
|
|
|
6519
6519
|
const Hero_stories = {
|
|
6520
6520
|
title: "Components/Hero Layout",
|