@saasquatch/mint-components 1.5.0-0 → 1.5.0-101

package/dist/collection/components/sqm-leaderboard/sqm-leaderboard-view.js

@@ -1,22 +1,109 @@
 import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+const style = {
+  Leaderboard: {
+    "& table": {
+      width: "100%",
+      borderCollapse: "collapse",
+    },
+    "& th": {
+      textAlign: "left",
+      padding: "var(--sl-spacing-medium)",
+      paddingTop: "0",
+      fontSize: "var(--sl-font-size-medium)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+    },
+    "& tr:not(:first-child)": {
+      borderTop: "1px solid var(--sl-color-neutral-200)",
+    },
+    "& td": {
+      fontSize: "var(--sl-font-size-medium)",
+      fontWeight: "var(--sl-font-weight-normal)",
+    },
+    "& .ellipses": {
+      textAlign: "center",
+      padding: "0",
+      color: "var(--sl-color-neutral-500)",
+    },
+    "& .highlight": {
+      background: "var(--sl-color-primary-50)",
+    },
+    "& td, th": {
+      color: "var(--sl-color-gray-800)",
+      padding: "var(--sl-spacing-medium)",
+    },
+    "& .User": {
+      width: "100%",
+    },
+    "& .Score": {
+      width: "auto",
+      whiteSpace: "nowrap",
+    },
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+const vanillaStyle = `
+	:host{
+		display: block;
+	}
+`;
 export function LeaderboardView(props) {
-  var _a;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
   const { states, data, elements } = props;
   const { styles } = states;
-  if (states.loading) {
-    return elements.loadingstate;
+  console.log("LEADERBOARD PROPS", props);
+  if (states.loading)
+    return (h("div", { class: sheet.classes.Leaderboard },
+      h("style", { type: "text/css" },
+        styleString,
+        vanillaStyle),
+      elements.loadingstate));
+  let userSeenFlag = false;
+  if (!states.hasLeaders) {
+    return (h("div", { class: sheet.classes.Leaderboard },
+      h("style", { type: "text/css" },
+        styleString,
+        vanillaStyle),
+      h("table", null,
+        h("tr", null,
+          styles.showRank && h("th", { class: "Rank" }, styles.rankheading),
+          h("th", { class: "User" }, styles.usersheading),
+          h("th", { class: "Score" }, styles.statsheading))),
+      elements.empty));
   }
-  return (h("div", null,
-    !states.hasLeaders && elements.empty,
-    states.hasLeaders && (h("table", null,
+  return (h("div", { class: sheet.classes.Leaderboard },
+    h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    h("table", null,
       h("tr", null,
         styles.showRank && h("th", { class: "Rank" }, styles.rankheading),
         h("th", { class: "User" }, styles.usersheading),
         h("th", { class: "Score" }, styles.statsheading)), (_a = data.leaderboard) === null || _a === void 0 ? void 0 :
       _a.map((user) => {
-        return (h("tr", { class: "SeparateContent" },
+        var _a, _b;
+        if (user.rowNumber === ((_a = data.userRank) === null || _a === void 0 ? void 0 : _a.rowNumber))
+          userSeenFlag = true;
+        return (h("tr", { class: user.rowNumber === ((_b = data.userRank) === null || _b === void 0 ? void 0 : _b.rowNumber) ? "highlight" : "" },
           styles.showRank && h("td", { class: "Rank" }, user.rank),
-          h("td", { class: "User" }, `${user.firstName} ${user.lastInitial} `),
+          h("td", { class: "User" }, user.firstName && user.lastInitial
+            ? user.firstName + " " + user.lastInitial
+            : user.firstName || user.lastInitial
+              ? user.firstName || user.lastInitial
+              : styles.anonymousUser || "Anonymous User"),
           h("td", { class: "Score" }, user.value)));
-      })))));
+      }),
+      states.hasLeaders && !userSeenFlag && data.showUser && (h("tr", null,
+        h("td", { colSpan: 100, class: "ellipses" },
+          h("sl-icon", { name: "three-dots", style: { verticalAlign: "middle" } })))),
+      states.hasLeaders && !userSeenFlag && data.showUser && (h("tr", { class: "highlight" },
+        styles.showRank && (h("td", { class: "Rank" }, ((_b = data.userRank) === null || _b === void 0 ? void 0 : _b.rank) || "-")),
+        h("td", { class: "User" }, ((_c = data.userRank) === null || _c === void 0 ? void 0 : _c.firstName) && ((_d = data.userRank) === null || _d === void 0 ? void 0 : _d.lastInitial)
+          ? ((_e = data.userRank) === null || _e === void 0 ? void 0 : _e.firstName) + " " + ((_f = data.userRank) === null || _f === void 0 ? void 0 : _f.lastInitial)
+          : ((_g = data.userRank) === null || _g === void 0 ? void 0 : _g.firstName) || ((_h = data.userRank) === null || _h === void 0 ? void 0 : _h.lastInitial)
+            ? ((_j = data.userRank) === null || _j === void 0 ? void 0 : _j.firstName) || ((_k = data.userRank) === null || _k === void 0 ? void 0 : _k.lastInitial)
+            : styles.anonymousUser || "Anonymous User"),
+        h("td", { class: "Score" }, ((_l = data.userRank) === null || _l === void 0 ? void 0 : _l.value) || "0"))),
+      data.leaderboard.length ? elements.empty : "")));
 }

package/dist/collection/components/sqm-leaderboard/sqm-leaderboard.js

@@ -10,6 +10,16 @@ import { useLeaderboard } from "./useLeaderboard";
  */
 export class Leaderboard {
   constructor() {
+    /**
+     * Shows the current user's leaderboard information even if they are not in the top 10
+     *
+     * @uiName Show viewing user
+     */
+    this.showUser = false;
+    /**
+     * @uiName Title displayed for users without names
+     */
+    this.anonymousUser = "Anonymous User";
     this.ignored = true;
     withHooks(this);
     withShadowView(this);
@@ -18,27 +28,25 @@ export class Leaderboard {
   render() {
     const props = {
       empty: h("slot", { name: "empty" }),
-      loadingstate: h("slot", { name: "loading" }),
+      loadingstate: h(LoadingSlot, null),
       usersheading: this.usersheading,
       statsheading: this.statsheading,
+      rankheading: this.rankheading,
       rankType: this.rankType,
       leaderboardType: this.leaderboardType,
+      anonymousUser: this.anonymousUser,
       interval: this.interval,
+      showUser: this.showUser,
+      showRank: this.showRank,
     };
     const demoProps = { ...props, demoData: this.demoData };
     const viewprops = isDemo()
       ? useLeaderboardDemo(demoProps)
       : useLeaderboard(props);
-    return h(LeaderboardView, Object.assign({}, viewprops));
+    return (h(LeaderboardView, Object.assign({}, viewprops),
+      h("slot", null)));
   }
   static get is() { return "sqm-leaderboard"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["sqm-leaderboard.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["sqm-leaderboard.css"]
-  }; }
   static get properties() { return {
     "usersheading": {
       "type": "string",
@@ -89,7 +97,7 @@ export class Leaderboard {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [{
             "text": "Rank Heading",
@@ -112,7 +120,7 @@ export class Leaderboard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Show the ranking numbers",
+            "text": "Show leaderboard rank",
             "name": "uiName"
           }],
         "text": ""
@@ -120,6 +128,27 @@ export class Leaderboard {
       "attribute": "show-rank",
       "reflect": false
     },
+    "showUser": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Show viewing user",
+            "name": "uiName"
+          }],
+        "text": "Shows the current user's leaderboard information even if they are not in the top 10"
+      },
+      "attribute": "show-user",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "rankType": {
       "type": "string",
       "mutable": false,
@@ -172,6 +201,27 @@ export class Leaderboard {
       "attribute": "leaderboard-type",
       "reflect": false
     },
+    "anonymousUser": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Title displayed for users without names",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "anonymous-user",
+      "reflect": false,
+      "defaultValue": "\"Anonymous User\""
+    },
     "interval": {
       "type": "string",
       "mutable": false,
@@ -203,7 +253,7 @@ export class Leaderboard {
       "mutable": false,
       "complexType": {
         "original": "DemoData<LeaderboardViewProps>",
-        "resolved": "{ states?: { loading: boolean; hasLeaders: boolean; styles: { usersheading: string; statsheading: string; rankheading?: string; showRank?: boolean; }; }; data?: { rankType: string; leaderboard: { value: number; rank: number; firstName: string; lastInitial: string; }[]; }; elements?: { empty: VNode; loadingstate: VNode; }; }",
+        "resolved": "{ states?: { loading: boolean; hasLeaders: boolean; styles: { usersheading: string; statsheading: string; rankheading?: string; showRank?: boolean; anonymousUser?: string; }; }; data?: { rankType: string; leaderboard: { value: number; rank: number; firstName: string; lastInitial: string; rowNumber: number; }[]; showUser?: boolean; userRank?: { value: number; rank: number; firstName: string; lastInitial: string; rowNumber: number; }; }; elements?: { empty: VNode; loadingstate: VNode; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -233,7 +283,52 @@ export class Leaderboard {
     "ignored": {}
   }; }
 }
+function LoadingSlot() {
+  return (h("slot", { name: "loading" },
+    h("table", null, [...Array(10)].map(() => {
+      return (h("tr", null,
+        h("td", null,
+          h("sl-skeleton", null))));
+    }))));
+}
 function useLeaderboardDemo(props) {
+  var _a, _b;
+  console.log("SAM", props.demoData);
+  const data = ((_b = (_a = props.demoData) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.leaderboard) || [
+    {
+      firstName: "Viktor",
+      lastInitial: "V",
+      value: 82,
+      rank: 1,
+      rowNumber: 1,
+    },
+    {
+      firstName: "MF",
+      lastInitial: "D",
+      value: 73,
+      rank: 2,
+      rowNumber: 2,
+    },
+    {
+      firstName: "Freddie",
+      lastInitial: "G",
+      value: 64,
+      rank: 3,
+      rowNumber: 3,
+    },
+    {
+      firstName: "Benny",
+      lastInitial: "B",
+      value: 55,
+      rank: 4,
+      rowNumber: 4,
+    },
+    {
+      value: 46,
+      rank: 5,
+      rowNumber: 5,
+    },
+  ];
   return deepmerge({
     states: {
       loading: false,
@@ -241,23 +336,26 @@ function useLeaderboardDemo(props) {
       styles: {
         usersheading: props.usersheading
           ? props.usersheading
-          : "TOP REFERRERS",
-        statsheading: props.statsheading ? props.statsheading : "NEW TITANS",
+          : "Top referrers",
+        statsheading: props.statsheading
+          ? props.statsheading
+          : "New customers",
+        rankheading: props.rankheading ? props.rankheading : "Rank",
+        anonymousUser: props.anonymousUser
+          ? props.anonymousUser
+          : "Anonymous User",
+        showRank: props.showRank,
       },
     },
     data: {
       rankType: "rowNumber",
-      leaderboard: [
-        { firstName: "Viktor", lastInitial: "V", value: 82, rank: 1 },
-        { firstName: "MF", lastInitial: "D", value: 73, rank: 2 },
-        { firstName: "Freddie", lastInitial: "G", value: 64, rank: 3 },
-        { firstName: "Benny", lastInitial: "B", value: 55, rank: 4 },
-        { firstName: "Mos", lastInitial: "D", value: 46, rank: 5 },
-      ],
+      leaderboard: data,
+      showUser: props.showUser,
     },
     elements: {
-      empty: props.empty ? props.empty : h("div", null, "Empty"),
-      loadingstate: props.loadingstate ? (props.loadingstate) : (h("div", null, "Loading")),
+      empty: !(data === null || data === void 0 ? void 0 : data.length) ? (h("slot", { name: "empty" })) : (h("div", { style: { display: "none" } },
+        h("slot", { name: "empty" }))),
+      loadingstate: h(LoadingSlot, null),
     },
   }, props.demoProps || {}, { arrayMerge: (_, a) => a });
 }

package/dist/collection/components/sqm-leaderboard/useLeaderboard.js

@@ -17,8 +17,24 @@ const GET_LEADERBOARD = gql `
     }
   }
 `;
+const GET_RANK = gql `
+  query ($type: String!, $filter: UserLeaderboardFilterInput) {
+    viewer {
+      ... on User {
+        firstName
+        lastInitial
+        leaderboardRank(type: $type, filter: $filter) {
+          value
+          rank
+          denseRank
+          rowNumber
+        }
+      }
+    }
+  }
+`;
 export function useLeaderboard(props) {
-  var _a;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
   const programId = useProgramId();
   const user = useUserIdentity();
   const variables = {
@@ -29,6 +45,7 @@ export function useLeaderboard(props) {
     variables.filter["interval"] = props.interval;
   }
   const { data: leaderboardData, loading: loadingLeaderboard } = useQuery(GET_LEADERBOARD, variables, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const { data: rankData } = useQuery(GET_RANK, variables, !(user === null || user === void 0 ? void 0 : user.jwt));
   const leaderboardRows = (_a = leaderboardData === null || leaderboardData === void 0 ? void 0 : leaderboardData.userLeaderboard) === null || _a === void 0 ? void 0 : _a.rows;
   const flattenedLeaderboard = getFlattenedLeaderboard(leaderboardRows);
   const sortedLeaderboard = flattenedLeaderboard === null || flattenedLeaderboard === void 0 ? void 0 : flattenedLeaderboard.sort(function (a, b) {
@@ -36,15 +53,24 @@ export function useLeaderboard(props) {
   });
   function getFlattenedLeaderboard(leaderboardRows) {
     return leaderboardRows === null || leaderboardRows === void 0 ? void 0 : leaderboardRows.flatMap((user) => {
-      var _a;
+      var _a, _b;
       return ({
         value: user.value,
-        firstName: user.firstName || "Anonymous",
+        firstName: user.firstName,
         lastInitial: user.lastInitial,
         rank: (_a = user.rank) === null || _a === void 0 ? void 0 : _a[props.rankType],
+        rowNumber: (_b = user.rank) === null || _b === void 0 ? void 0 : _b.rowNumber,
       });
     });
   }
+  console.log(rankData);
+  const viewingUser = {
+    value: (_c = (_b = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _b === void 0 ? void 0 : _b.leaderboardRank) === null || _c === void 0 ? void 0 : _c.value,
+    firstName: (_d = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _d === void 0 ? void 0 : _d.firstName,
+    lastInitial: (_e = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _e === void 0 ? void 0 : _e.lastInitial,
+    rank: (_g = (_f = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _f === void 0 ? void 0 : _f.leaderboardRank) === null || _g === void 0 ? void 0 : _g[props.rankType],
+    rowNumber: (_j = (_h = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _h === void 0 ? void 0 : _h.leaderboardRank) === null || _j === void 0 ? void 0 : _j.rowNumber,
+  };
   return {
     states: {
       loading: loadingLeaderboard,
@@ -54,6 +80,8 @@ export function useLeaderboard(props) {
     data: {
       leaderboard: sortedLeaderboard,
       rankType: props.rankType,
+      userRank: viewingUser,
+      showUser: props.showUser,
     },
     elements: {
       empty: props.empty,

package/dist/collection/components/sqm-leaderboard-rank/sqm-leaderboard-rank.js

@@ -1,10 +1,10 @@
-import { createIntl } from "@formatjs/intl";
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, Prop, h } from "@stencil/core";
 import { isDemo } from "@saasquatch/component-boilerplate";
 import { LeaderboardRankView, } from "./sqm-leaderboard-rank-view";
 import { useLeaderboardRank } from "./useLeaderboardRank";
 import deepmerge from "deepmerge";
+import { intl } from "../../global/global";
 /**
  * @uiName Leaderboard Rank
  */
@@ -184,9 +184,6 @@ export class LeaderboardRank {
   }; }
 }
 function useLeaderboardRankDemo(props) {
-  const intl = createIntl({
-    locale: "en",
-  });
   const rank = intl.formatMessage({ id: "rankText", defaultMessage: props.rankText }, {
     rank: 1,
   }) || "1st";

package/dist/collection/components/sqm-leaderboard-rank/useLeaderboardRank.js

@@ -1,5 +1,5 @@
 import { useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
-import gql from "graphql-tag";
+import { gql } from "graphql-request";
 import { intl } from "../../global/global";
 const GET_RANK = gql `
   query ($type: String!, $filter: UserLeaderboardFilterInput) {

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

@@ -1,6 +1,5 @@
 import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 import { ErrorStyles } from "../../global/mixins";
 const style = {
   InputContainer: {
@@ -27,8 +26,7 @@ sl-input::part(label){
   font-weight: var(--sl-font-weight-semibold);
 }
 `;
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function NameFieldsView(props) {
   const { states } = props;

package/dist/collection/components/sqm-navigation-sidebar/sqm-navigation-sidebar-view.js

@@ -1,6 +1,5 @@
 import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 import { gap } from "../../global/mixins";
 const style = {
   ItemsContainer: {
@@ -18,8 +17,7 @@ const vanillaStyle = `
     max-width: 320px;
   }
 `;
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function NavigationSidebarView(
 // @ts-ignore - Stencil requires props (even if empty)

package/dist/collection/components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view.js

@@ -1,6 +1,5 @@
 import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 import { gap } from "../../global/mixins";
 import { navigation } from "@saasquatch/component-boilerplate";
 export function NavigationSidebarItemView(props) {
@@ -17,7 +16,9 @@ export function NavigationSidebarItemView(props) {
       ...gap({ direction: "row", size: "var(--sl-font-size-small)" }),
       "&:hover": {
         cursor: "pointer",
-        background: states.active ? "var(--sl-color-gray-300)" : "var(--sl-color-gray-50)",
+        background: states.active
+          ? "var(--sl-color-gray-300)"
+          : "var(--sl-color-gray-50)",
       },
     },
     Label: {
@@ -27,8 +28,7 @@ export function NavigationSidebarItemView(props) {
       "flex-shrink": "0",
     },
   };
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
+  const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
   return (h("a", { href: data.path, onClick: (e) => {
       e.preventDefault();

package/dist/collection/components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item.js

@@ -57,7 +57,7 @@ export class NavigationSidebarItem {
             "text": "Icon",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Options available at https://shoelace.style/components/icon"
       },
       "attribute": "icon",
       "reflect": false

package/dist/collection/components/sqm-password-field/passwordValidation.js

@@ -1,7 +1,6 @@
 import { h } from "@stencil/core";
 import PasswordValidator from "password-validator";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 const passwordSchema = new PasswordValidator()
   .is()
   .min(8) // Minimum length 8
@@ -55,8 +54,7 @@ const style = {
   },
   ValidationItemInvalid: { ...baseItem },
 };
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 const getErrorMessage = (errorKeys, password) => {
   if (!errorKeys.length && password)

package/dist/collection/components/sqm-password-field/sqm-password-field-view.js

@@ -1,6 +1,5 @@
 import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 import { ErrorStyles } from "../../global/mixins";
 const style = {
   InputContainer: {
@@ -20,8 +19,7 @@ const vanillaStyle = `
   display: none;
 }
 `;
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PortalResetPasswordView(props) {
   var _a, _b;

package/dist/collection/components/sqm-portal-change-password/sqm-portal-change-password-view.js

@@ -1,6 +1,5 @@
 import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 import { PortalContainerView } from "../sqm-portal-container/sqm-portal-container-view";
 import { PortalSectionView } from "../sqm-titled-section/sqm-portal-section-view";
 import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
@@ -43,8 +42,7 @@ export function PortalChangePasswordView(props) {
       paddingTop: "var(--sl-spacing-x-large)",
     },
   };
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
+  const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
   return (h("div", null,
     h("style", { type: "text/css" }, styleString),

package/dist/collection/components/sqm-portal-container/PortalContainer.stories.js

@@ -0,0 +1,47 @@
+import { h } from "@stencil/core";
+import scenario from "./sqm-portal-container.feature";
+export default {
+  title: "Components/Portal Container",
+  parameters: {
+    scenario,
+  },
+};
+export const TooWideColumn = () => (h("div", { style: { width: "200px", border: "1px dashed grey" } },
+  h("sqm-portal-container", { gap: "xxx-large" },
+    h("div", { style: { background: "grey", border: "1px solid red" } }, "Small"),
+    h("div", { style: { background: "lightblue", width: "1000px" } }, "Too wide, content goes off the side of the page for ever and is hidden."))));
+export const TooWideRow = () => (h("div", { style: { width: "500px", border: "1px dashed grey" } },
+  h("sqm-portal-container", { gap: "xxx-large", direction: "row", "min-width": "160px" },
+    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
+export const TooWideSmallGap = () => (h("div", { style: { width: "500px", border: "1px dashed grey" } },
+  h("sqm-portal-container", { gap: "small", direction: "row", "min-width": "160px" },
+    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
+export const TooWidePadding = () => (h("div", { style: { width: "500px", border: "1px dashed grey" } },
+  h("sqm-portal-container", { padding: "xxx-large", gap: "xxx-large", direction: "row", "min-width": "160px" },
+    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
+export const TooWideDisplayFlex = () => (h("div", { style: { width: "500px", border: "1px dashed grey" } },
+  h("sqm-portal-container", { gap: "xxx-large", direction: "row", display: "flex", "min-width": "160px" },
+    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
+export const HalfWidth = () => (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
+  h("sqm-portal-container", { gap: "xxx-large", direction: "row", minWidth: "160px", maxWidth: "50%" },
+    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
+export const HalfWidthCenter = () => (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
+  h("sqm-portal-container", { gap: "xxx-large", direction: "row", minWidth: "160px", maxWidth: "50%", center: true },
+    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
+export const FullWidth = () => (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
+  h("sqm-portal-container", { gap: "xxx-large", direction: "row", maxWidth: "100%" },
+    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));

package/dist/collection/components/sqm-portal-container/sqm-portal-container-view.js

@@ -1,23 +1,26 @@
 import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 export function PortalContainerView(props, children) {
   const style = {
     Container: {
-      display: "grid",
+      display: props.display || "grid",
+      flexWrap: "wrap",
       "grid-template-columns": props.direction === "row"
         ? `repeat(auto-fill, minmax(${props.minWidth}, auto))`
-        : "",
+        : "100%",
       "grid-gap": `var(--sl-spacing-${props.gap})`,
       padding: props.padding === "none" ? "0" : `var(--sl-spacing-${props.padding})`,
+      maxWidth: props.maxWidth ? props.maxWidth : "",
+      background: "var(--sqm-portal-background)",
+      margin: props.center && "auto",
     },
   };
   const vanillaStyle = `
   :host{
     width: 100%;
+    display: block;
   }`;
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
+  const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
   return (h("div", { class: sheet.classes.Container },
     h("style", { type: "text/css" },