@saasquatch/mint-components 1.6.2-17 → 1.6.2-18

package/dist/collection/components/sqm-titled-section/TitledSection.stories.js

@@ -1,224 +1,224 @@
-import { h } from "@stencil/core";
-import scenario from "./sqm-titled-section.feature";
-export default {
-  title: "Components/Titled Section",
-  parameters: {
-    scenario,
-  },
-};
-export const AlignLeft = () => {
-  return (h("sqm-titled-section", { "text-align": "left" },
-    h("sqm-text", { slot: "label" },
-      h("h3", null, "Earn more rewards"),
-      h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))));
-};
-export const AlignCenter = () => {
-  return (h("sqm-titled-section", { "text-align": "center" },
-    h("sqm-text", { slot: "label" },
-      h("h3", null, "Earn more rewards"),
-      h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))));
-};
-export const AlignRight = () => {
-  return (h("sqm-titled-section", { "text-align": "right" },
-    h("sqm-text", { slot: "label" },
-      h("h3", null, "Earn more rewards"),
-      h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))));
-};
-export const Padding = () => {
-  return (h("div", null,
-    h("h3", null, "None"),
-    h("sqm-titled-section", { padding: "none" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "xxx-small"),
-    h("sqm-titled-section", { padding: "xxx-small" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "xx-small"),
-    h("sqm-titled-section", { padding: "xx-small" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "x-small"),
-    h("sqm-titled-section", { padding: "x-small" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "small"),
-    h("sqm-titled-section", { padding: "small" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "medium"),
-    h("sqm-titled-section", { padding: "medium" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "large"),
-    h("sqm-titled-section", { padding: "large" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "x-large"),
-    h("sqm-titled-section", { padding: "x-large" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "xx-large"),
-    h("sqm-titled-section", { padding: "xx-large" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "xxx-large"),
-    h("sqm-titled-section", { padding: "xxx-large" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "xxxx-large"),
-    h("sqm-titled-section", { padding: "xxxx-large" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))));
-};
-export const LabelMargin = () => {
-  return (h("div", null,
-    h("h3", null, "None"),
-    h("sqm-titled-section", { "label-margin": "none" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "xxx-small"),
-    h("sqm-titled-section", { "label-margin": "xxx-small" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "xx-small"),
-    h("sqm-titled-section", { "label-margin": "xx-small" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "x-small"),
-    h("sqm-titled-section", { "label-margin": "x-small" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "small"),
-    h("sqm-titled-section", { "label-margin": "small" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "medium"),
-    h("sqm-titled-section", { "label-margin": "medium" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "large"),
-    h("sqm-titled-section", { "label-margin": "large" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "x-large"),
-    h("sqm-titled-section", { "label-margin": "x-large" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "xx-large"),
-    h("sqm-titled-section", { "label-margin": "xx-large" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "xxx-large"),
-    h("sqm-titled-section", { "label-margin": "xxx-large" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "xxxx-large"),
-    h("sqm-titled-section", { "label-margin": "xxxx-large" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))));
-};
+import { h } from "@stencil/core";
+import scenario from "./sqm-titled-section.feature";
+export default {
+  title: "Components/Titled Section",
+  parameters: {
+    scenario,
+  },
+};
+export const AlignLeft = () => {
+  return (h("sqm-titled-section", { "text-align": "left" },
+    h("sqm-text", { slot: "label" },
+      h("h3", null, "Earn more rewards"),
+      h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))));
+};
+export const AlignCenter = () => {
+  return (h("sqm-titled-section", { "text-align": "center" },
+    h("sqm-text", { slot: "label" },
+      h("h3", null, "Earn more rewards"),
+      h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))));
+};
+export const AlignRight = () => {
+  return (h("sqm-titled-section", { "text-align": "right" },
+    h("sqm-text", { slot: "label" },
+      h("h3", null, "Earn more rewards"),
+      h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))));
+};
+export const Padding = () => {
+  return (h("div", null,
+    h("h3", null, "None"),
+    h("sqm-titled-section", { padding: "none" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xxx-small"),
+    h("sqm-titled-section", { padding: "xxx-small" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xx-small"),
+    h("sqm-titled-section", { padding: "xx-small" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "x-small"),
+    h("sqm-titled-section", { padding: "x-small" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "small"),
+    h("sqm-titled-section", { padding: "small" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "medium"),
+    h("sqm-titled-section", { padding: "medium" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "large"),
+    h("sqm-titled-section", { padding: "large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "x-large"),
+    h("sqm-titled-section", { padding: "x-large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xx-large"),
+    h("sqm-titled-section", { padding: "xx-large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xxx-large"),
+    h("sqm-titled-section", { padding: "xxx-large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xxxx-large"),
+    h("sqm-titled-section", { padding: "xxxx-large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))));
+};
+export const LabelMargin = () => {
+  return (h("div", null,
+    h("h3", null, "None"),
+    h("sqm-titled-section", { "label-margin": "none" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xxx-small"),
+    h("sqm-titled-section", { "label-margin": "xxx-small" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xx-small"),
+    h("sqm-titled-section", { "label-margin": "xx-small" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "x-small"),
+    h("sqm-titled-section", { "label-margin": "x-small" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "small"),
+    h("sqm-titled-section", { "label-margin": "small" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "medium"),
+    h("sqm-titled-section", { "label-margin": "medium" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "large"),
+    h("sqm-titled-section", { "label-margin": "large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "x-large"),
+    h("sqm-titled-section", { "label-margin": "x-large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xx-large"),
+    h("sqm-titled-section", { "label-margin": "xx-large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xxx-large"),
+    h("sqm-titled-section", { "label-margin": "xxx-large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xxxx-large"),
+    h("sqm-titled-section", { "label-margin": "xxxx-large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))));
+};

package/dist/collection/components/sqm-titled-section/sqm-portal-section-view.js

@@ -1,22 +1,22 @@
-import { h } from "@stencil/core";
-import { createStyleSheet } from "../../styling/JSS";
-export function PortalSectionView(props) {
-  // Due to sole usage of props, not feasiable to move out of render function
-  const style = {
-    LabelContainer: {
-      "margin-bottom": props.labelMargin === "none"
-        ? props.labelMargin
-        : `var(--sl-spacing-${props.labelMargin})`,
-    },
-    SectionContainer: {
-      textAlign: props.textAlign || "left",
-      padding: props.padding === "none" ? "0" : `var(--sl-spacing-${props.padding})`,
-    },
-  };
-  const sheet = createStyleSheet(style);
-  const styleString = sheet.toString();
-  return (h("div", { class: sheet.classes.SectionContainer },
-    h("style", { type: "text/css" }, styleString),
-    h("div", { class: sheet.classes.LabelContainer }, props.label),
-    props.content));
-}
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+export function PortalSectionView(props) {
+  // Due to sole usage of props, not feasiable to move out of render function
+  const style = {
+    LabelContainer: {
+      "margin-bottom": props.labelMargin === "none"
+        ? props.labelMargin
+        : `var(--sl-spacing-${props.labelMargin})`,
+    },
+    SectionContainer: {
+      textAlign: props.textAlign || "left",
+      padding: props.padding === "none" ? "0" : `var(--sl-spacing-${props.padding})`,
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("div", { class: sheet.classes.SectionContainer },
+    h("style", { type: "text/css" }, styleString),
+    h("div", { class: sheet.classes.LabelContainer }, props.label),
+    props.content));
+}