@saasquatch/mint-components 1.5.0-3 → 1.5.0-33

package/dist/collection/components/sqm-stencilbook/AutoColor.js

@@ -1,54 +1,49 @@
-import chroma from "chroma-js";
-/**
- * Generated a Shoelace color scale css string from a base color
- *
- * @param color
- * @param name
- * @returns
- */
-export function autoColorScaleCss(color, name = "primary") {
-  if (!chroma.valid(color)) {
-    return "";
+import { ColorError, guard, hsla, parseToHsla } from "color2k";
+const colorScale = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+const lScale = [
+  0.95,
+  0.86,
+  0.76,
+  0.66,
+  0.56,
+  0.46,
+  0.39,
+  0.32,
+  0.25,
+  0.18,
+  0.15,
+];
+// https://github.com/ricokahler/color2k/blob/main/src/parseToRgba.ts
+const hslaRegex = /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i;
+function niceParseToHsla(color) {
+  const normalizedColor = color.trim();
+  const hslaMatch = hslaRegex.exec(normalizedColor);
+  if (hslaMatch) {
+    const [h, s, l, a] = Array.from(hslaMatch).slice(1).map(parseFloat);
+    if (guard(0, 100, s) !== s)
+      throw new ColorError(color);
+    if (guard(0, 100, l) !== l)
+      throw new ColorError(color);
+    return [h, s, l, a || 1];
   }
-  const { scale, colorScale } = makeColorScale(color);
-  return scale
-    .map((color, index) => `--sl-color-${name}-${colorScale[index]}: ${chroma(color).hex()};`)
-    .join("\n");
+  // Warning -- converts to RGB first, so is lossy
+  return parseToHsla(color);
+}
+function generateScale(color, name = "primary") {
+  const [h, s, l, a] = niceParseToHsla(color);
+  return lScale
+    .map((l) => hsla(h, s, l, a))
+    .map((color, index) => {
+    return `--sl-color-${name}-${colorScale[index]}: ${color};\n`;
+  });
 }
 /**
- * Generate a Shoelace color scale style objects from a base color
+ * Generated a Shoelace color scale css string from a base color
  *
  * @param color
  * @param name
  * @returns
  */
-export function autoColorScaleStyleObject(color, name = "primary") {
-  if (!chroma.valid(color)) {
-    return {};
-  }
-  const { scale, colorScale } = makeColorScale(color);
-  return scale.reduce((agg, color, index) => ({
-    ...agg,
-    [`--sl-color-${name}-${colorScale[index]}`]: `${chroma(color).hex()};`,
-  }), { color: "blue", "--sl-color-primary-50": "#eaffea;" });
-}
-function makeColorScale(color) {
-  const colorScale = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
-  const hex = chroma(color).hex();
-  const scale = chroma
-    .scale([
-    chroma(hex).luminance(0.95),
-    chroma(hex).luminance(0.84),
-    chroma(hex).luminance(0.73),
-    chroma(hex).luminance(0.62),
-    chroma(hex).luminance(0.49),
-    chroma(hex).luminance(0.35),
-    chroma(hex).luminance(0.23),
-    chroma(hex).luminance(0.15),
-    chroma(hex).luminance(0.1),
-    chroma(hex).luminance(0.05),
-    chroma(hex).luminance(0.02),
-  ])
-    .colors(colorScale.length);
-  return { scale, colorScale };
+export function autoColorScaleCss(color, name = "primary") {
+  return generateScale(color, name).join("\n");
 }

package/dist/collection/components/sqm-stencilbook/Themes.js

@@ -26,7 +26,7 @@ export const Netflix = `
 `;
 export const SaaSquatchCorporate = `
 :root{
-    ${autoColorScaleCss("green")}
+    ${autoColorScaleCss("#65bd60")}
     --sl-font-sans: Arial;
 }
 `;
@@ -38,15 +38,7 @@ export const NYTimes = `
 `;
 export const Klip = `
 :root{
-	--sl-color-primary-50: #E8E5F8;
-    --sl-color-primary-100: #C6BEED;
-    --sl-color-primary-200: #A192E2;
-    --sl-color-primary-300: #7B66D6;
-    --sl-color-primary-400: #5E46CD;
-    --sl-color-primary-500: #4225C4;
-    --sl-color-primary-600: #3C21BE;
-    --sl-color-primary-700: #331BB6;
-    --sl-color-primary-800: #2B16AF;
-    --sl-color-primary-900: #1D0DA2;
+    ${autoColorScaleCss("#4225C4")};
 }
+
 `;

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

@@ -48,6 +48,12 @@ import * as RewardExchangeList from "../sqm-reward-exchange-list/RewardExchangeL
 import * as ProgramExplainer from "../sqm-program-explainer/ProgramExplainer.stories";
 import * as ProgramExplainerStep from "../sqm-program-explainer-step/ProgramExplainerStep.stories";
 import * as BrandStories from "../sqm-brand/SqmBrand.stories";
+import * as CardFeed from "../sqm-card-feed/CardFeed.stories";
+import * as PortalContainer from "../sqm-portal-container/PortalContainer.stories";
+import * as RewardsTableCell from "../sqm-rewards-table/RewardsTableCell.stories";
+import * as RewardsTable from "../sqm-rewards-table/RewardsTable.stories";
+import * as UseReferralTable from "../sqm-referral-table/UseReferralTable.stories";
+import * as Media from "../sqm-media/Media.stories";
 import * as Themes from "./Themes";
 import { CucumberAddon } from "./CucumberAddon";
 import { HookStoryAddon } from "./HookStoryAddon";
@@ -100,7 +106,13 @@ const stories = [
   UseRewardsTable,
   ProgramExplainer,
   ProgramExplainerStep,
-  BrandStories
+  BrandStories,
+  CardFeed,
+  PortalContainer,
+  RewardsTableCell,
+  RewardsTable,
+  UseReferralTable,
+  Media,
 ];
 /**
  * For internal documentation

package/dist/collection/components/sqm-task-card/DetailsView.js

@@ -0,0 +1,53 @@
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+export const style = {
+  Description: {
+    "& input[type=checkbox]": {
+      display: "none",
+    },
+    "& input:checked ~ .details": {
+      transform: "rotate(-180deg)",
+    },
+    "& .details": {
+      position: "absolute",
+      top: "var(--sl-spacing-medium)",
+      right: "var(--sl-spacing-medium)",
+      color: "var(--sl-color-neutral-700)",
+      fontSize: "var(--sl-font-size-large)",
+      "& :hover": {
+        color: "var(--sl-color-primary-700)",
+      },
+      transformOrigin: "50% 37%",
+      transition: "transform var(--sl-transition-medium) ease",
+      cursor: "pointer",
+    },
+    "& input:checked ~ .summary": {
+      transition: "all var(--sl-transition-medium) ease",
+      maxHeight: "300px",
+      marginBottom: "var(--sl-spacing-x-large)",
+    },
+    "& input:checked ~ .summary[progress-bar]": {
+      marginBottom: "var(--sl-spacing-xx-large)",
+    },
+    "& .summary": {
+      display: "block",
+      overflow: "hidden",
+      fontSize: "var(--sl-font-size-small)",
+      maxHeight: "0px",
+      transition: "all var(--sl-transition-fast) ease-out",
+      marginBottom: "var(--sl-spacing-medium)",
+    },
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+export function Details(props) {
+  const rid = Math.random().toString(36).slice(2);
+  return (h("div", null,
+    h("style", { type: "text/css" }, styleString),
+    h("span", { class: sheet.classes.Description },
+      h("input", { type: "checkbox", id: "details-" + rid }),
+      h("label", { class: "details", htmlFor: "details-" + rid },
+        h("sl-icon", { name: "chevron-down" })),
+      h("span", { class: "summary", "progress-bar": props.progressBar }, props.content.description))));
+}