@saasquatch/mint-components 1.4.2 → 1.5.0-100

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

@@ -1,48 +1,71 @@
 import { h, Component, Host, State } from "@stencil/core";
 import { useStencilbook } from "@saasquatch/stencilbook";
-import { withHooks } from "@saasquatch/stencil-hooks";
-import * as ShareButton from "../../stories/ShareButton.stories";
-import * as ShareLink from "../../stories/ShareLink.stories";
-import * as BigStat from "../../stories/BigStat.stories";
-import * as Leaderboard from "../../stories/Leaderboard.stories";
-import * as Router from "../../stories/Router.stories";
-import * as LeaderboardRank from "../../stories/LeaderboardRank.stories";
-import * as PortalFrame from "../../stories/PortalFrame.stories";
-import * as EditProfile from "../../stories/EditProfileForm.stories";
-import * as UseShareLink from "../../stories/UseShareLink.stories";
-import * as UseShareButton from "../../stories/UseShareButton.stories";
-import * as UseBigStat from "../../stories/UseBigStat.stories";
-import * as UseEditProfile from "../../stories/UseEditProfile.stories";
-import * as UseLeaderboard from "../../stories/UseLeaderboard.stories";
-import * as FormMessage from "../../stories/FormMessage.stories";
+import { useState, withHooks } from "@saasquatch/stencil-hooks";
+import * as ShareButton from "../sqm-share-button/ShareButton.stories";
+import * as ShareLink from "../sqm-share-link/ShareLink.stories";
+import * as BigStat from "../sqm-big-stat/BigStat.stories";
+import * as Leaderboard from "../sqm-leaderboard/Leaderboard.stories";
+import * as Router from "../sqm-router/Router.stories";
+import * as LeaderboardRank from "../sqm-leaderboard-rank/LeaderboardRank.stories";
+import * as PortalFrame from "../sqm-portal-frame/PortalFrame.stories";
+import * as EditProfile from "../sqm-edit-profile/EditProfileForm.stories";
+import * as UseShareLink from "../sqm-share-link/UseShareLink.stories";
+import * as UseShareButton from "../sqm-share-button/UseShareButton.stories";
+import * as UseBigStat from "../sqm-big-stat/UseBigStat.stories";
+import * as UseEditProfile from "../sqm-edit-profile/UseEditProfile.stories";
+import * as UseLeaderboard from "../sqm-leaderboard/UseLeaderboard.stories";
+import * as FormMessage from "../sqm-form-message/FormMessage.stories";
+import * as UseRewardExchangeList from "../sqm-reward-exchange-list/UseRewardExchangeList.stories";
+import * as UseRewardsTable from "../sqm-rewards-table/UseRewardsTable.stories";
+import * as UseTaskCard from "../sqm-task-card/UseTaskCard.stories";
 import * as NewPortal from "../../stories/NewPortal.stories";
-import * as SidebarItem from "../../stories/SidebarItem.stories";
-import * as NavigationSidebar from "../../stories/NavigationSidebar.stories";
-import * as PortalLogin from "../../stories/PortalLogin.stories";
-import * as PortalRegister from "../../stories/PortalRegister.stories";
-import * as PortalForgotPassword from "../../stories/PortalForgotPassword.stories";
-import * as PortalEmailVerification from "../../stories/PortalEmailVerification.stories";
-import * as PortalResetPassword from "../../stories/PortalResetPassword.stories";
-import * as PortalVerifyEmail from "../../stories/PortalVerifyEmail.stories";
-import * as AssetCard from "../../stories/AssetCard.stories";
-import * as DividedLayout from "../../stories/DividedLayout.stories";
-import * as ChangePassword from "../../stories/ChangePassword.stories";
-import * as PortalProfile from "../../stories/PortalProfile.stories";
-import * as ReferralTable from "../../stories/ReferralTable.stories";
-import * as ReferralTableCell from "../../stories/ReferralTableCell.stories";
-import * as ReferralTableRewardsCell from "../../stories/ReferralTableRewardsCell.stories";
-import * as UserName from "../../stories/UserName.stories";
-import * as PasswordField from "../../stories/PasswordField.stories";
+import * as SidebarItem from "../sqm-navigation-sidebar-item/SidebarItem.stories";
+import * as NavigationSidebar from "../sqm-navigation-sidebar/NavigationSidebar.stories";
+import * as PortalLogin from "../sqm-portal-login/PortalLogin.stories";
+import * as PortalRegister from "../sqm-portal-register/PortalRegister.stories";
+import * as PortalForgotPassword from "../sqm-portal-forgot-password/PortalForgotPassword.stories";
+import * as PortalEmailVerification from "../sqm-portal-email-verification/PortalEmailVerification.stories";
+import * as PortalResetPassword from "../sqm-portal-reset-password/PortalResetPassword.stories";
+import * as PortalVerifyEmail from "../sqm-portal-verify-email/PortalVerifyEmail.stories";
+import * as AssetCard from "../sqm-asset-card/AssetCard.stories";
+import * as DividedLayout from "../sqm-divided-layout/DividedLayout.stories";
+import * as ChangePassword from "../sqm-portal-change-password/ChangePassword.stories";
+import * as PortalProfile from "../sqm-portal-profile/PortalProfile.stories";
+import * as ReferralTable from "../sqm-referral-table/ReferralTable.stories";
+import * as ReferralTableCell from "../sqm-referral-table/ReferralTableCell.stories";
+import * as ReferralTableRewardsCell from "../sqm-referral-table/ReferralTableRewardsCell.stories";
+import * as UserName from "../sqm-user-name/UserName.stories";
+import * as PasswordField from "../sqm-password-field/PasswordField.stories";
+import * as TaskCard from "../sqm-task-card/TaskCard.stories";
 import * as PortalTemplates from "../../stories/PortalTemplates.stories";
-import * as ProgramMenu from "../../stories/ProgramMenu.stories";
+import * as ProgramMenu from "../sqm-program-menu/ProgramMenu.stories";
 import * as PoweredByImg from "../../stories/PoweredByImg.stories";
-import * as PortalFooter from "../../stories/PortalFooter.stories";
-import * as Hero from "../../stories/Hero.stories";
-import * as ReferralIframe from "../../stories/ReferralIframe.stories";
-import * as NameFields from "../../stories/NameFields.stories";
+import * as PortalFooter from "../sqm-portal-footer/PortalFooter.stories";
+import * as Hero from "../sqm-hero/Hero.stories";
+import * as ReferralIframe from "../sqm-referral-iframe/ReferralIframe.stories";
+import * as NameFields from "../sqm-name-fields/NameFields.stories";
+import * as RewardExchangeList from "../sqm-reward-exchange-list/RewardExchangeList.stories";
+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 HeroImage from "../sqm-hero-image/HeroImage.stories";
+import * as ReferralCard from "../sqm-referral-card/ReferralCard.stories";
+import * as Timeline from "../sqm-timeline/Timeline.stories";
+import * as Image from "../sqm-image/Image.stories";
+import * as TitledSection from "../sqm-titled-section/TitledSection.stories";
+import * as Scroll from "../sqm-scroll/Scroll.stories";
+import * as Tabs from "../sqm-tabs/Tabs.stories";
+import * as ShareCode from "../sqm-share-code/ShareCode.stories";
+import * as Themes from "./Themes";
 import { CucumberAddon } from "./CucumberAddon";
 import { HookStoryAddon } from "./HookStoryAddon";
 import { ShadowViewAddon } from "../../ShadowViewAddon";
+import { ResizerStylesheet } from "./Resizer";
 const stories = [
   ShareButton,
   ShareLink,
@@ -76,6 +99,7 @@ const stories = [
   ReferralTableRewardsCell,
   UserName,
   PasswordField,
+  TaskCard,
   PortalTemplates,
   ProgramMenu,
   PoweredByImg,
@@ -83,6 +107,26 @@ const stories = [
   Hero,
   ReferralIframe,
   NameFields,
+  RewardExchangeList,
+  UseRewardExchangeList,
+  UseTaskCard,
+  UseRewardsTable,
+  ProgramExplainer,
+  ProgramExplainerStep,
+  BrandStories,
+  CardFeed,
+  PortalContainer,
+  RewardsTableCell,
+  RewardsTable,
+  UseReferralTable,
+  HeroImage,
+  ReferralCard,
+  Timeline,
+  Image,
+  TitledSection,
+  Scroll,
+  Tabs,
+  ShareCode,
 ];
 /**
  * For internal documentation
@@ -101,10 +145,47 @@ export class StencilStorybook {
       title: "Mint Components",
       addons: [CucumberAddon, ShadowViewAddon, HookStoryAddon],
     });
-    return (h(Host, { class: Style, onClick: {} }, children));
+    const [selectedTheme, setSelected] = useState("Default");
+    const [checkerboard, setCheckerboard] = useState(true);
+    const themes = Object.keys(Themes);
+    const theme = Themes[selectedTheme];
+    return (h(Host, { class: Style, onClick: {} },
+      h("div", { style: {
+          position: "absolute",
+          top: "0",
+          right: "0",
+          zIndex: "999999",
+        } },
+        "Branding:",
+        h("select", { onChange: (e) => setSelected(e.target.value) }, themes.map((t) => (h("option", { selected: t === selectedTheme }, t)))),
+        h("div", null,
+          h("div", null)),
+        h(ColorScale, null),
+        h("br", null),
+        h("input", { type: "checkbox", id: "checkerboard", onClick: () => setCheckerboard(!checkerboard), onChange: () => document.documentElement.style.setProperty("--checker-color-1", checkerboard ? "#ebebeb" : "#ffffff00") }),
+        h("label", { htmlFor: "checkerboard" }, "Checkerboard?")),
+      h("style", null, theme),
+      h("style", null, ResizerStylesheet),
+      children));
   }
   static get is() { return "sqm-stencilbook"; }
   static get states() { return {
     "ignored": {}
   }; }
 }
+function ColorScale() {
+  return (h("span", null,
+    h(ColorToken, null),
+    h(ColorToken, { type: "success" }),
+    h(ColorToken, { type: "warning" }),
+    h(ColorToken, { type: "danger" }),
+    h(ColorToken, { type: "neutral" })));
+}
+function ColorToken({ type = "primary" }) {
+  return (h("span", { style: {
+      background: `var(--sl-color-${type}-500)`,
+      width: "1em",
+      marginRight: "2px",
+      padding: "0 4px",
+    }, title: type }, type.charAt(0)));
+}

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

@@ -0,0 +1,4 @@
+import { h, Host } from "@stencil/core";
+export const TabView = ({}, children) => {
+  return h(Host, null, children);
+};

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

@@ -0,0 +1,28 @@
+import { Component, h, Prop } from "@stencil/core";
+import { TabView } from "./sqm-tab-view";
+export class Tab {
+  render() {
+    return (h(TabView, null,
+      h("slot", null)));
+  }
+  static get is() { return "sqm-tab"; }
+  static get properties() { return {
+    "header": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "header",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/sqm-tabs/Tabs.stories.js

@@ -0,0 +1,150 @@
+import { h } from "@stencil/core";
+import scenario from "./tabs.feature";
+export default {
+  title: "Components/Tabs",
+  parameters: {
+    scenario,
+  },
+};
+export const SimpleTabs = () => (h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
+     <sqm-tabs>
+        <sqm-tab header="General">This is the general tab</sqm-tab>
+        <sqm-tab header="Custom">This is the custom tab</sqm-tab>
+        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>
+      </sqm-tabs>
+    ` }));
+export const ManyTabs = () => (h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
+     <sqm-tabs>
+        <sqm-tab header="General">This is the general tab</sqm-tab>
+        <sqm-tab header="Custom">This is the custom tab</sqm-tab>
+        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>        <sqm-tab header="General">This is the general tab</sqm-tab>
+        <sqm-tab header="Custom">This is the custom tab</sqm-tab>
+        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>
+        <sqm-tab header="General">This is the general tab</sqm-tab>
+        <sqm-tab header="Custom">This is the custom tab</sqm-tab>
+        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>
+        <sqm-tab header="General">This is the general tab</sqm-tab>
+        <sqm-tab header="Custom">This is the custom tab</sqm-tab>
+        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>
+      </sqm-tabs>
+    ` }));
+export const SingleTab = () => (h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
+     <sqm-tabs>
+        <sqm-tab header="Redeem">
+          <sqm-reward-exchange-list></sqm-reward-exchange-list>
+        </sqm-tab>
+      </sqm-tabs>
+    ` }));
+export const ReferralProgram = () => (h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
+     <sqm-tabs>
+        <sqm-tab header="Leaderboard">
+          <sqm-leaderboard></sqm-leaderboard>
+        </sqm-tab>
+        <sqm-tab header="Referral history">
+          <sqm-referral-table></sqm-referral-table>
+        </sqm-tab>
+        <sqm-tab header="Reward history">
+          <sqm-rewards-table></sqm-rewards-table>
+        </sqm-tab>
+      </sqm-tabs>
+    ` }));
+export const LoyaltyProgram = () => (h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
+     <sqm-tabs placement="top">
+        <sqm-tab header="Leaderboard">
+          <sqm-hero-image
+            image-url="https://i.imgur.com/MVgOJn7.png"
+            description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
+            layout="columns"
+            image-percentage="33%"
+            padding-image="large"
+            padding-text="large"
+            background-color=""
+          ></sqm-hero-image>
+          <sqm-leaderboard></sqm-leaderboard>
+        </sqm-tab>
+        <sqm-tab header="Referral history">
+          <sqm-referral-table></sqm-referral-table>
+        </sqm-tab>
+        <sqm-tab header="Reward history">
+          <sqm-rewards-table></sqm-rewards-table>
+        </sqm-tab>
+        <sqm-tab header="Redeem">
+          <sqm-reward-exchange-list></sqm-reward-exchange-list>
+        </sqm-tab>
+      </sqm-tabs>
+    ` }));
+export const BottomTabs = () => (h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
+     <sqm-tabs placement="bottom">
+        <sqm-tab header="Leaderboard">
+          <sqm-hero-image
+            image-url="https://i.imgur.com/MVgOJn7.png"
+            description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
+            layout="columns"
+            image-percentage="33%"
+            padding-image="large"
+            padding-text="large"
+            background-color=""
+          ></sqm-hero-image>
+          <sqm-leaderboard></sqm-leaderboard>
+        </sqm-tab>
+        <sqm-tab header="Referral history">
+          <sqm-referral-table></sqm-referral-table>
+        </sqm-tab>
+        <sqm-tab header="Reward history">
+          <sqm-rewards-table></sqm-rewards-table>
+        </sqm-tab>
+        <sqm-tab header="Redeem">
+          <sqm-reward-exchange-list></sqm-reward-exchange-list>
+        </sqm-tab>
+      </sqm-tabs>
+    ` }));
+export const LeftTabs = () => (h("div", { style: { maxWidth: "900px", margin: "auto" }, innerHTML: `
+     <sqm-tabs placement="left">
+        <sqm-tab header="Leaderboard">
+          <sqm-hero-image
+            image-url="https://i.imgur.com/MVgOJn7.png"
+            description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
+            layout="columns"
+            image-percentage="33%"
+            padding-image="large"
+            padding-text="large"
+            background-color=""
+          ></sqm-hero-image>
+          <sqm-leaderboard></sqm-leaderboard>
+        </sqm-tab>
+        <sqm-tab header="Referral history">
+          <sqm-referral-table></sqm-referral-table>
+        </sqm-tab>
+        <sqm-tab header="Reward history">
+          <sqm-rewards-table></sqm-rewards-table>
+        </sqm-tab>
+        <sqm-tab header="Redeem">
+          <sqm-reward-exchange-list></sqm-reward-exchange-list>
+        </sqm-tab>
+      </sqm-tabs>
+    ` }));
+export const RightTabs = () => (h("div", { style: { maxWidth: "900px", margin: "auto" }, innerHTML: `
+     <sqm-tabs placement="right">
+        <sqm-tab header="Leaderboard">
+          <sqm-hero-image
+            image-url="https://i.imgur.com/MVgOJn7.png"
+            description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
+            layout="columns"
+            image-percentage="33%"
+            padding-image="large"
+            padding-text="large"
+            background-color=""
+          ></sqm-hero-image>
+          <sqm-leaderboard></sqm-leaderboard>
+        </sqm-tab>
+        <sqm-tab header="Referral history">
+          <sqm-referral-table></sqm-referral-table>
+        </sqm-tab>
+        <sqm-tab header="Reward history">
+          <sqm-rewards-table></sqm-rewards-table>
+        </sqm-tab>
+        <sqm-tab header="Redeem">
+          <sqm-reward-exchange-list></sqm-reward-exchange-list>
+        </sqm-tab>
+      </sqm-tabs>
+    ` }));

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

@@ -0,0 +1,27 @@
+import { useHost } from "@saasquatch/stencil-hooks";
+import { h, Host } from "@stencil/core";
+export const TabsView = ({ content, placement, }) => {
+  // Vertical padding for top & bottom placement, horizontal for left & right.
+  const padding = !placement || placement === "top" || placement === "bottom"
+    ? "var(--sl-spacing-x-large) 0;"
+    : "0 var(--sl-spacing-xx-large);";
+  const vanillaStyle = `
+    sl-tab-panel::part(base) {
+      padding: ${padding};
+    }
+  `;
+  const host = useHost();
+  console.log("sam host", host);
+  return (h(Host, null,
+    h("style", { type: "text/css" }, vanillaStyle),
+    h("sl-tab-group", { placement: placement }, content.tabs.map((tab) => {
+      const slotName = tab.getAttribute("slot");
+      return [
+        h("sl-tab", { slot: "nav", panel: slotName, id: tab.getAttribute("id") || slotName }, tab.getAttribute("header")),
+        h("sl-tab-panel", { name: slotName },
+          h("slot", { name: slotName })),
+      ];
+    })),
+    h("div", { style: { display: "none" } },
+      h("slot", null))));
+};

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

@@ -0,0 +1,50 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop } from "@stencil/core";
+import { getProps } from "../../utils/utils";
+import { TabsView } from "./sqm-tabs-view";
+import { useTabs } from "./useTabs";
+/**
+ * @uiName Tabs
+ */
+export class Tabs {
+  constructor() {
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { content } = useTabs();
+    const { placement } = getProps(this);
+    return (h(TabsView, { placement: placement, content: content },
+      h("slot", null)));
+  }
+  static get is() { return "sqm-tabs"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "placement": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"left\" | \"right\" | \"bottom\" | \"top\"",
+        "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Tabs Placement",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"left\", \"right\", \"bottom\", \"top\"]",
+            "name": "uiEnum"
+          }],
+        "text": "Used to specify the placement of the tabs"
+      },
+      "attribute": "placement",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/sqm-tabs/useTabs.js

@@ -0,0 +1,39 @@
+import { useHost } from "@saasquatch/component-boilerplate";
+import { useEffect, useMemo } from "@saasquatch/universal-hooks";
+import { useChildElements } from "../../tables/useChildElements";
+const REVEAL_EVENT = "sq:reveal";
+export function useTabs() {
+  const rawTabs = useChildElements();
+  const host = useHost();
+  const tabs = useMemo(() => rawTabs
+    .filter((tab) => tab.tagName === "SQM-TAB")
+    .map((tab, i) => {
+    tab.setAttribute("slot", "tab-" + i);
+    // set id as targets for scroll component
+    tab.setAttribute("id", "tab-" + i);
+    return tab;
+  }), [rawTabs]);
+  useEffect(() => {
+    const listener = (e) => {
+      var _a, _b, _c, _d, _e, _f;
+      // Prevents recursively nested components from sending requests up all the way
+      e.stopPropagation();
+      //@ts-ignore
+      if (!host.contains(e === null || e === void 0 ? void 0 : e.target) || !((_b = (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.shadowRoot))
+        return;
+      const element = (_e = (_d = (_c = 
+      //@ts-ignore
+      e === null || 
+      //@ts-ignore
+      e === void 0 ? void 0 : 
+      //@ts-ignore
+      e.target) === null || _c === void 0 ? void 0 : _c.parentElement) === null || _d === void 0 ? void 0 : _d.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector(`#${e.target.id}`);
+      (_f = element.parentElement) === null || _f === void 0 ? void 0 : _f.show(element === null || element === void 0 ? void 0 : element.panel);
+    };
+    host.addEventListener(REVEAL_EVENT, listener);
+    return () => {
+      host.removeEventListener(REVEAL_EVENT, listener);
+    };
+  }, []);
+  return { content: { tabs } };
+}

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))));
+}

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

@@ -0,0 +1,14 @@
+import { h } from "@stencil/core";
+export const checkmark_circle = () => {
+  return (h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.81818 10C1.81818 5.48131 5.48131 1.81818 10 1.81818C14.5187 1.81818 18.1818 5.48131 18.1818 10C18.1818 14.5187 14.5187 18.1818 10 18.1818C5.48131 18.1818 1.81818 14.5187 1.81818 10ZM10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0ZM15.7692 6.96189C16.1398 6.48683 16.0551 5.80132 15.58 5.43077C15.1049 5.06022 14.4194 5.14495 14.0489 5.62001L8.72994 12.4391L5.86229 9.5715C5.43627 9.14548 4.74554 9.14548 4.31952 9.5715C3.89349 9.99752 3.89349 10.6882 4.31952 11.1143L8.05976 14.8545C8.28083 15.0756 8.58613 15.1912 8.89818 15.172C9.21023 15.1528 9.49905 15.0006 9.69133 14.7541L15.7692 6.96189Z", fill: "currentColor" })));
+};
+export const checkmark_filled = () => {
+  return (h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    h("circle", { cx: "10", cy: "10", r: "10", fill: "currentColor" }),
+    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14.65 6.19231C15.0459 6.5011 15.1165 7.07236 14.8077 7.46825L9.74277 13.9617C9.58254 14.1672 9.34186 14.294 9.08182 14.31C8.82178 14.326 8.56736 14.2297 8.38314 14.0454L5.26627 10.9286C4.91124 10.5735 4.91124 9.99794 5.26627 9.64292C5.62129 9.2879 6.19689 9.2879 6.55191 9.64292L8.94162 12.0326L13.3741 6.35001C13.6828 5.95412 14.2541 5.88352 14.65 6.19231Z", fill: "white" })));
+};
+export const arrow_left_right = () => {
+  return (h("svg", { width: 11, height: 12, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.265 2.789a.346.346 0 000-.489L8.066.101a.346.346 0 10-.489.489l1.61 1.609H2.073a.691.691 0 00-.69.691v1.728a.346.346 0 00.69 0V2.89h7.114L7.577 4.5a.346.346 0 10.49.488l2.198-2.2zM.101 9.21a.346.346 0 000 .489l2.2 2.199a.346.346 0 00.488-.489l-1.61-1.609h7.114c.382 0 .691-.31.691-.691V7.382a.346.346 0 00-.691 0V9.11H1.18L2.789 7.5a.346.346 0 10-.489-.488l-2.199 2.2z", fill: "currentColor" })));
+};