@spscommerce/ds-web-components 5.0.2 → 5.2.2-ie

package/dist/components/insight-card/insight-card.d.ts

@@ -0,0 +1,40 @@
+/** @jsx h */
+import { SpsInsightCardKind, SpsIcon } from "@spscommerce/ds-shared";
+import { ClassBindings } from "../../decorators/index";
+export declare class SpsInsightCardComponent extends HTMLElement {
+    static readonly displayName = "sps-insight-card";
+    static readonly props: {
+        icon: string;
+        kind: string;
+        title: string;
+        metric: string;
+        partnerCount: string;
+        totalPartners: string;
+        secondary: string;
+    };
+    /** If icon is provided then it will override the default icon associated with kind */
+    icon: SpsIcon;
+    /** Specifies which of the visual styling variants of the Insight Card to use. */
+    kind: SpsInsightCardKind;
+    title: string;
+    /** The main number representing the metric that the Insight Card is intended to surface. */
+    metric: number;
+    /**
+     * The number of partners this insight applies to.
+     * Must be used together with `totalPartners`.
+     */
+    partnerCount: number;
+    /** The total number of partners. Must be used together with `partnerCount`. */
+    totalPartners: number;
+    /**
+     * Whether this is a "secondary" Insight Card,
+     * meaning it will be displayed in a compact layout.
+     */
+    secondary: boolean;
+    private content;
+    private detail;
+    get [ClassBindings](): string[];
+    render({ t }: {
+        t: any;
+    }): JSX.Element;
+}

package/dist/components/insight-card/insight-card.examples.d.ts

@@ -0,0 +1,51 @@
+export declare const SpsInsightCardExamples: {
+    basic: {
+        label: string;
+        examples: {
+            basic: {
+                jsx: string;
+            };
+        };
+    };
+    details: {
+        label: string;
+        examples: {
+            details: {
+                jsx: string;
+            };
+        };
+    };
+    partner_count: {
+        label: string;
+        examples: {
+            partner_count: {
+                jsx: string;
+            };
+        };
+    };
+    expansion: {
+        label: string;
+        examples: {
+            expansion: {
+                jsx: string;
+            };
+        };
+    };
+    events: {
+        label: string;
+        description: string;
+        examples: {
+            events: {
+                react: string;
+            };
+        };
+    };
+    alternateIcon: {
+        label: string;
+        examples: {
+            basic: {
+                react: string;
+            };
+        };
+    };
+};

package/dist/components/insight-card/insight-card.examples.js

@@ -0,0 +1,58 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { code } from "@spscommerce/utils";
+export var SpsInsightCardExamples = {
+    basic: {
+        label: "Basic Insight Cards",
+        examples: {
+            basic: {
+                jsx: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            <sps-insights>\n                <sps-insight-card kind=\"general\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"processing\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"success\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"warning\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"error\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                ></sps-insight-card>\n            </sps-insights>\n        "], ["\n            <sps-insights>\n                <sps-insight-card kind=\"general\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"processing\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"success\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"warning\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"error\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                ></sps-insight-card>\n            </sps-insights>\n        "]))),
+            },
+        },
+    },
+    details: {
+        label: "With Details",
+        examples: {
+            details: {
+                jsx: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            <sps-insights>\n                <sps-insight-card kind=\"general\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"processing\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"success\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"warning\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"error\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"success\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"error\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n            </sps-insights>\n        "], ["\n            <sps-insights>\n                <sps-insight-card kind=\"general\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"processing\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"success\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"warning\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"error\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"success\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"error\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n            </sps-insights>\n        "]))),
+            },
+        },
+    },
+    partner_count: {
+        label: "Partner Count",
+        examples: {
+            partner_count: {
+                jsx: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n            <sps-insights>\n                <sps-insight-card kind=\"general\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"250\"\n                    totalPartners=\"250\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"processing\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"122\"\n                    totalPartners=\"250\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"success\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"207\"\n                    totalPartners=\"250\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"warning\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"12\"\n                    totalPartners=\"250\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"error\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"94\"\n                    totalPartners=\"250\"\n                ></sps-insight-card>\n            </sps-insights>\n        "], ["\n            <sps-insights>\n                <sps-insight-card kind=\"general\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"250\"\n                    totalPartners=\"250\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"processing\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"122\"\n                    totalPartners=\"250\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"success\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"207\"\n                    totalPartners=\"250\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"warning\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"12\"\n                    totalPartners=\"250\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"error\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"94\"\n                    totalPartners=\"250\"\n                ></sps-insight-card>\n            </sps-insights>\n        "]))),
+            },
+        },
+    },
+    expansion: {
+        label: "10+ Insight Cards",
+        examples: {
+            expansion: {
+                jsx: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            <sps-insights>\n                <sps-insight-card kind=\"general\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"processing\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"success\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"warning\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"error\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"general\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"processing\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"success\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"warning\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"error\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"general\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"processing\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"success\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"warning\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"error\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n            </sps-insights>\n        "], ["\n            <sps-insights>\n                <sps-insight-card kind=\"general\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"processing\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"success\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"warning\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"error\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"general\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"processing\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"success\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"warning\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"error\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"general\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"processing\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"success\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"warning\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"error\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n            </sps-insights>\n        "]))),
+            },
+        },
+    },
+    events: {
+        label: "Adding a click handler",
+        description: code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          <p>Attaching event handlers to native web components in React cannot be done the usual way at this time.\n          Here is how to do it:</p>\n      "], ["\n          <p>Attaching event handlers to native web components in React cannot be done the usual way at this time.\n          Here is how to do it:</p>\n      "]))),
+        examples: {
+            events: {
+                react: code(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                  function Component() {\n                      function handleClick() {\n                          window.alert(\"Insight card clicked\");\n                      }\n\n                      const ref = React.useRef();\n                      React.useEffect(() => {\n                          ref.current.addEventListener(\"click\", handleClick);\n                          return () => {\n                              ref.current.removeEventListener(\"click\", handleClick);\n                          };\n                      }, []);\n\n                        return (\n                            <sps-insights>\n                                <sps-insight-card ref={ref}\n                                    kind=\"general\"\n                                    metric=\"1234\"\n                                    title=\"Insight Card Title\"\n                                ></sps-insight-card>\n                                <sps-insight-card kind=\"general\"\n                                    metric=\"1234\"\n                                    title=\"Insight Card Title\"\n                                ></sps-insight-card>\n                                <sps-insight-card kind=\"general\"\n                                    metric=\"1234\"\n                                    title=\"Insight Card Title\"\n                                ></sps-insight-card>\n                            </sps-insights>\n                        );\n                    }\n                "], ["\n                  function Component() {\n                      function handleClick() {\n                          window.alert(\"Insight card clicked\");\n                      }\n\n                      const ref = React.useRef();\n                      React.useEffect(() => {\n                          ref.current.addEventListener(\"click\", handleClick);\n                          return () => {\n                              ref.current.removeEventListener(\"click\", handleClick);\n                          };\n                      }, []);\n\n                        return (\n                            <sps-insights>\n                                <sps-insight-card ref={ref}\n                                    kind=\"general\"\n                                    metric=\"1234\"\n                                    title=\"Insight Card Title\"\n                                ></sps-insight-card>\n                                <sps-insight-card kind=\"general\"\n                                    metric=\"1234\"\n                                    title=\"Insight Card Title\"\n                                ></sps-insight-card>\n                                <sps-insight-card kind=\"general\"\n                                    metric=\"1234\"\n                                    title=\"Insight Card Title\"\n                                ></sps-insight-card>\n                            </sps-insights>\n                        );\n                    }\n                "]))),
+            },
+        },
+    },
+    alternateIcon: {
+        label: "Using alternate icons",
+        examples: {
+            basic: {
+                react: code(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        return (\n                            <sps-insights>\n                                <sps-insight-card\n                                    kind=\"general\"\n                                    metric=\"1234\"\n                                    icon={SpsIcon.DOLLAR_SIGN}\n                                    title=\"Insight Card Title\"\n                                ></sps-insight-card>\n                                <sps-insight-card\n                                    kind=\"processing\"\n                                    metric=\"1234\"\n                                    icon={SpsIcon.ASTERISK}\n                                    title=\"Insight Card Title\"\n                                ></sps-insight-card>\n                                <sps-insight-card\n                                    kind=\"success\"\n                                    metric=\"1234\"\n                                    icon={SpsIcon.USER}\n                                    title=\"Insight Card Title\"\n                                ></sps-insight-card>\n                                <sps-insight-card\n                                    kind=\"warning\"\n                                    metric=\"1234\"\n                                    icon={SpsIcon.FOLDER_OPEN}\n                                    title=\"Insight Card Title\"\n                                ></sps-insight-card>\n                                <sps-insight-card\n                                    kind=\"error\"\n                                    metric=\"1234\"\n                                    icon={SpsIcon.BAN}\n                                    title=\"Insight Card Title\"\n                                ></sps-insight-card>\n                            </sps-insights>\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        return (\n                            <sps-insights>\n                                <sps-insight-card\n                                    kind=\"general\"\n                                    metric=\"1234\"\n                                    icon={SpsIcon.DOLLAR_SIGN}\n                                    title=\"Insight Card Title\"\n                                ></sps-insight-card>\n                                <sps-insight-card\n                                    kind=\"processing\"\n                                    metric=\"1234\"\n                                    icon={SpsIcon.ASTERISK}\n                                    title=\"Insight Card Title\"\n                                ></sps-insight-card>\n                                <sps-insight-card\n                                    kind=\"success\"\n                                    metric=\"1234\"\n                                    icon={SpsIcon.USER}\n                                    title=\"Insight Card Title\"\n                                ></sps-insight-card>\n                                <sps-insight-card\n                                    kind=\"warning\"\n                                    metric=\"1234\"\n                                    icon={SpsIcon.FOLDER_OPEN}\n                                    title=\"Insight Card Title\"\n                                ></sps-insight-card>\n                                <sps-insight-card\n                                    kind=\"error\"\n                                    metric=\"1234\"\n                                    icon={SpsIcon.BAN}\n                                    title=\"Insight Card Title\"\n                                ></sps-insight-card>\n                            </sps-insights>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+//# sourceMappingURL=insight-card.examples.js.map

package/dist/components/insight-card/insight-card.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"insight-card.examples.js","sourceRoot":"","sources":["../../../src/components/insight-card/insight-card.examples.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAE1C,MAAM,CAAC,IAAM,sBAAsB,GAAG;IACpC,KAAK,EAAE;QACL,KAAK,EAAE,qBAAqB;QAC5B,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,GAAG,EAAE,IAAI,8/BAAA,27BAuBR,IAAA;aACF;SACF;KACF;IACD,OAAO,EAAE;QACP,KAAK,EAAE,cAAc;QACrB,QAAQ,EAAE;YACR,OAAO,EAAE;gBACP,GAAG,EAAE,IAAI,ylEAAA,shEA6CR,IAAA;aACF;SACF;KACF;IACD,aAAa,EAAE;QACb,KAAK,EAAE,eAAe;QACtB,QAAQ,EAAE;YACR,aAAa,EAAE;gBACb,GAAG,EAAE,IAAI,q6CAAA,k2CAiCR,IAAA;aACF;SACF;KACF;IACD,SAAS,EAAE;QACT,KAAK,EAAE,mBAAmB;QAC1B,QAAQ,EAAE;YACR,SAAS,EAAE;gBACT,GAAG,EAAE,IAAI,60JAAA,0wJA6GR,IAAA;aACF;SACF;KACF;IACD,MAAM,EAAE;QACN,KAAK,EAAE,wBAAwB;QAC/B,WAAW,EAAE,IAAI,sOAAA,mKAGd,IAAA;QACH,QAAQ,EAAE;YACR,MAAM,EAAE;gBACN,KAAK,EAAE,IAAI,mjDAAA,g/CAgCF,IAAA;aACV;SACF;KACF;IACD,aAAa,EAAE;QACb,KAAK,EAAE,uBAAuB;QAC9B,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,i9DAAA,84DAqCF,IAAA;aACV;SACF;KACF;CACF,CAAC"}

package/dist/components/insight-card/insight-card.js

@@ -0,0 +1,147 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+/** @jsx h */
+/* eslint-disable new-cap */
+import { SpsInsightCardKind, SpsInsightCardIcons, SpsIcon } from "@spscommerce/ds-shared";
+import { ClassBindings, Component, Content, Prop, QuerySelector, } from "../../decorators/index";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h } from "../../utils/pragma";
+var CPT_NAME = "sps-insight-card";
+var SpsInsightCardComponent = /** @class */ (function (_super) {
+    __extends(SpsInsightCardComponent, _super);
+    function SpsInsightCardComponent() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        /** Specifies which of the visual styling variants of the Insight Card to use. */
+        _this.kind = SpsInsightCardKind.GENERAL;
+        return _this;
+    }
+    Object.defineProperty(SpsInsightCardComponent.prototype, ClassBindings, {
+        get: function () {
+            return [
+                CPT_NAME,
+                CPT_NAME + "--" + this.kind,
+                this.detail && this.detail.children.length ? CPT_NAME + "--has-detail" : null,
+            ];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SpsInsightCardComponent.prototype.render = function (_a) {
+        var t = _a.t;
+        var metric = h("div", { className: CPT_NAME + "__metric-count" }, this.metric);
+        var description = (h("div", { className: CPT_NAME + "__description" },
+            h("div", { className: CPT_NAME + "__title", 
+                /*
+                 * Both Chrome & FF ignore -webkit-box-orient in the actual CSS for some reason
+                 * Also the TS types don't think -webkit-box-orient is a real CSS property
+                 */
+                style: { "-webkit-box-orient": "vertical" } }, this.title),
+            h("div", { className: CPT_NAME + "__detail" }, this.content)));
+        var _b = __read((this.partnerCount
+            ? t("design-system:insightCard.partnerCount", { count: this.partnerCount, total: this.totalPartners })
+            : "").split("|"), 3), count = _b[0], ofText = _b[1], total = _b[2];
+        return (h("div", { "data-fragment": true },
+            h("div", { className: CPT_NAME + "__body" },
+                this.icon ? h("i", { className: "sps-icon sps-icon-" + this.icon }) : h("i", { className: "sps-icon sps-icon-" + SpsInsightCardIcons[this.kind] }),
+                metric,
+                description),
+            this.partnerCount && (h("div", { className: CPT_NAME + "__partner-count" },
+                this.partnerCount === this.totalPartners
+                    ? h("div", null, t("design-system:insightCard.all"))
+                    : (h("div", { "data-fragment": true },
+                        h("div", null, count),
+                        h("div", null, ofText),
+                        h("div", null, total))),
+                h("div", { className: CPT_NAME + "__partners-text" }, t("design-system:insightCard.partners"))))));
+    };
+    SpsInsightCardComponent.displayName = CPT_NAME;
+    SpsInsightCardComponent.props = {
+        icon: "SpsIcon",
+        kind: "SpsInsightCardKind",
+        title: "string",
+        metric: "number",
+        partnerCount: "number",
+        totalPartners: "number",
+        secondary: "boolean",
+    };
+    __decorate([
+        Prop(),
+        __metadata("design:type", String)
+    ], SpsInsightCardComponent.prototype, "icon", void 0);
+    __decorate([
+        Prop(),
+        __metadata("design:type", Object)
+    ], SpsInsightCardComponent.prototype, "kind", void 0);
+    __decorate([
+        Prop(),
+        __metadata("design:type", String)
+    ], SpsInsightCardComponent.prototype, "title", void 0);
+    __decorate([
+        Prop(),
+        __metadata("design:type", Number)
+    ], SpsInsightCardComponent.prototype, "metric", void 0);
+    __decorate([
+        Prop(),
+        __metadata("design:type", Number)
+    ], SpsInsightCardComponent.prototype, "partnerCount", void 0);
+    __decorate([
+        Prop(),
+        __metadata("design:type", Number)
+    ], SpsInsightCardComponent.prototype, "totalPartners", void 0);
+    __decorate([
+        Prop(),
+        __metadata("design:type", Boolean)
+    ], SpsInsightCardComponent.prototype, "secondary", void 0);
+    __decorate([
+        Content(),
+        __metadata("design:type", Object)
+    ], SpsInsightCardComponent.prototype, "content", void 0);
+    __decorate([
+        QuerySelector("." + CPT_NAME + "__detail"),
+        __metadata("design:type", Object)
+    ], SpsInsightCardComponent.prototype, "detail", void 0);
+    SpsInsightCardComponent = __decorate([
+        Component({ tag: CPT_NAME })
+    ], SpsInsightCardComponent);
+    return SpsInsightCardComponent;
+}(HTMLElement));
+export { SpsInsightCardComponent };
+//# sourceMappingURL=insight-card.js.map

package/dist/components/insight-card/insight-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"insight-card.js","sourceRoot":"","sources":["../../../src/components/insight-card/insight-card.tsx"],"names":[],"mappings":"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"}

package/dist/components/insight-card/insights.d.ts

@@ -0,0 +1,18 @@
+import { ClassBindings } from "../../decorators/index";
+/** Container for Insight Cards. */
+export declare class SpsInsightsComponent extends HTMLElement {
+    static readonly displayName = "sps-insights";
+    static readonly props: {};
+    private content;
+    private details;
+    private showAdditionalInsights;
+    get [ClassBindings](): string[];
+    constructor();
+    /**
+     * Only the first ten Insight Cards are visible by default; the rest are behind
+     * the "Show Additional Insights"/"Hide Additional Insights" button. This method
+     * will toggle the additional insights.
+     */
+    toggleAdditionalInsights(): void;
+    render(): JSX.Element;
+}

package/dist/components/insight-card/insights.js

@@ -0,0 +1,90 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { ClassBindings, Component, Content, QuerySelectorAll, } from "../../decorators/index";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h } from "../../utils/pragma";
+var CPT_NAME = "sps-insights";
+/** Container for Insight Cards. */
+var SpsInsightsComponent = /** @class */ (function (_super) {
+    __extends(SpsInsightsComponent, _super);
+    function SpsInsightsComponent() {
+        var _this = _super.call(this) || this;
+        _this.content = [];
+        _this.showAdditionalInsights = false;
+        _this.toggleAdditionalInsights = _this.toggleAdditionalInsights.bind(_this);
+        return _this;
+    }
+    Object.defineProperty(SpsInsightsComponent.prototype, ClassBindings, {
+        get: function () {
+            return [
+                CPT_NAME,
+                this.showAdditionalInsights && CPT_NAME + "--show-additional",
+                this.details && Array.from(this.details).every(function (d) { return !d.textContent; })
+                    ? CPT_NAME + "--no-details"
+                    : null,
+                this.content.length === 6 ? CPT_NAME + "--break-4" : null,
+                this.content.length === 7 ? CPT_NAME + "--break-5" : null,
+                this.content.length === 8 ? CPT_NAME + "--break-5" : null,
+            ];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Only the first ten Insight Cards are visible by default; the rest are behind
+     * the "Show Additional Insights"/"Hide Additional Insights" button. This method
+     * will toggle the additional insights.
+     */
+    SpsInsightsComponent.prototype.toggleAdditionalInsights = function () {
+        this.showAdditionalInsights = !this.showAdditionalInsights;
+        this.update();
+    };
+    SpsInsightsComponent.prototype.render = function () {
+        return (h("div", { "data-fragment": true },
+            this.content,
+            this.content.length > 10
+                && (h("div", { className: "sps-button sps-button--link", onClick: this.toggleAdditionalInsights },
+                    h("button", { type: "button" },
+                        this.showAdditionalInsights ? "Hide " : "Show ",
+                        "Additional Insights")))));
+    };
+    SpsInsightsComponent.displayName = CPT_NAME;
+    SpsInsightsComponent.props = {};
+    __decorate([
+        Content(),
+        __metadata("design:type", Object)
+    ], SpsInsightsComponent.prototype, "content", void 0);
+    __decorate([
+        QuerySelectorAll(".sps-insight-card__detail"),
+        __metadata("design:type", NodeList)
+    ], SpsInsightsComponent.prototype, "details", void 0);
+    SpsInsightsComponent = __decorate([
+        Component({ tag: CPT_NAME }),
+        __metadata("design:paramtypes", [])
+    ], SpsInsightsComponent);
+    return SpsInsightsComponent;
+}(HTMLElement));
+export { SpsInsightsComponent };
+//# sourceMappingURL=insights.js.map

package/dist/components/insight-card/insights.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"insights.js","sourceRoot":"","sources":["../../../src/components/insight-card/insights.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAGA,OAAO,EACL,aAAa,EAAE,SAAS,EAAE,OAAO,EAAE,gBAAgB,GACpD,MAAM,wBAAwB,CAAC;AAChC,6DAA6D;AAC7D,OAAO,EAAE,CAAC,EAAE,MAAM,oBAAoB,CAAC;AAEvC,IAAM,QAAQ,GAAG,cAAc,CAAC;AAEhC,mCAAmC;AAEnC;IAA0C,wCAAW;IAwBnD;QAAA,YACE,iBAAO,SAER;QAtBkB,aAAO,GAAG,EAAE,CAAC;QAIxB,4BAAsB,GAAG,KAAK,CAAC;QAiBrC,KAAI,CAAC,wBAAwB,GAAG,KAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,KAAI,CAAC,CAAC;;IAC3E,CAAC;IAhBD,sBAAI,6CAAe;aAAnB;YACE,OAAO;gBACL,QAAQ;gBACR,IAAI,CAAC,sBAAsB,IAAO,QAAQ,sBAAmB;gBAC7D,IAAI,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,CAAC,WAAW,EAAd,CAAc,CAAC;oBACnE,CAAC,CAAI,QAAQ,iBAAc;oBAC3B,CAAC,CAAC,IAAI;gBACR,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAI,QAAQ,cAAW,CAAC,CAAC,CAAC,IAAI;gBACzD,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAI,QAAQ,cAAW,CAAC,CAAC,CAAC,IAAI;gBACzD,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAI,QAAQ,cAAW,CAAC,CAAC,CAAC,IAAI;aAC1D,CAAC;QACJ,CAAC;;;OAAA;IAOD;;;;OAIG;IACH,uDAAwB,GAAxB;QACE,IAAI,CAAC,sBAAsB,GAAG,CAAC,IAAI,CAAC,sBAAsB,CAAC;QAC1D,IAA2B,CAAC,MAAM,EAAE,CAAC;IACxC,CAAC;IAED,qCAAM,GAAN;QACE,OAAO,CACL;YACG,IAAI,CAAC,OAAO;YACZ,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,EAAE;mBACV,CACD,WAAK,SAAS,EAAC,6BAA6B,EAAC,OAAO,EAAE,IAAI,CAAC,wBAAwB;oBACjF,cAAQ,IAAI,EAAC,QAAQ;wBAClB,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO;8CAEzC,CACL,CACP,CACT,CACP,CAAC;IACJ,CAAC;IArDe,gCAAW,GAAG,QAAS,CAAA;IAEvB,0BAAK,GAAG,EAAG,CAAA;IAEhB;QAAV,OAAO,EAAE;;yDAAsB;IAEe;QAA9C,gBAAgB,CAAC,2BAA2B,CAAC;kCAAkB,QAAQ;yDAAC;IAP9D,oBAAoB;QADhC,SAAS,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC;;OAChB,oBAAoB,CAuDhC;IAAD,2BAAC;CAAA,AAvDD,CAA0C,WAAW,GAuDpD;SAvDY,oBAAoB"}

package/dist/components/nav-tabs/nav-tab-set.d.ts

@@ -0,0 +1,7 @@
+/** Contains a set of navigation tabs. */
+export declare class SpsNavTabSetComponent extends HTMLElement {
+    static readonly displayName = "sps-nav-tab-set";
+    static readonly props: {};
+    private content;
+    render(): JSX.Element;
+}

package/dist/components/nav-tabs/nav-tab-set.js

@@ -0,0 +1,53 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+/** @jsx h */
+/* eslint-disable new-cap */
+import { Component, Content } from "../../decorators/index";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h } from "../../utils/pragma";
+/** Contains a set of navigation tabs. */
+var SpsNavTabSetComponent = /** @class */ (function (_super) {
+    __extends(SpsNavTabSetComponent, _super);
+    function SpsNavTabSetComponent() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.content = [];
+        return _this;
+    }
+    SpsNavTabSetComponent.prototype.render = function () {
+        return (h("nav", { className: "sps-tabbed-nav" }, this.content));
+    };
+    SpsNavTabSetComponent.displayName = "sps-nav-tab-set";
+    SpsNavTabSetComponent.props = {};
+    __decorate([
+        Content(),
+        __metadata("design:type", Object)
+    ], SpsNavTabSetComponent.prototype, "content", void 0);
+    SpsNavTabSetComponent = __decorate([
+        Component({ tag: "sps-nav-tab-set" })
+    ], SpsNavTabSetComponent);
+    return SpsNavTabSetComponent;
+}(HTMLElement));
+export { SpsNavTabSetComponent };
+//# sourceMappingURL=nav-tab-set.js.map

package/dist/components/nav-tabs/nav-tab-set.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-tab-set.js","sourceRoot":"","sources":["../../../src/components/nav-tabs/nav-tab-set.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,aAAa;AACb,4BAA4B;AAC5B,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAC5D,6DAA6D;AAC7D,OAAO,EAAE,CAAC,EAAE,MAAM,oBAAoB,CAAC;AAEvC,yCAAyC;AAEzC;IAA2C,yCAAW;IAAtD;QAAA,qEAcC;QAToB,aAAO,GAAG,EAAE,CAAC;;IASlC,CAAC;IAPC,sCAAM,GAAN;QACE,OAAO,CACL,WAAK,SAAS,EAAC,gBAAgB,IAC5B,IAAI,CAAC,OAAO,CACT,CACP,CAAC;IACJ,CAAC;IAZe,iCAAW,GAAG,iBAAkB,CAAA;IAEhC,2BAAK,GAAG,EAAG,CAAA;IAEhB;QAAV,OAAO,EAAE;;0DAAsB;IALrB,qBAAqB;QADjC,SAAS,CAAC,EAAE,GAAG,EAAE,iBAAiB,EAAE,CAAC;OACzB,qBAAqB,CAcjC;IAAD,4BAAC;CAAA,AAdD,CAA2C,WAAW,GAcrD;SAdY,qBAAqB"}

package/dist/components/nav-tabs/nav-tab.d.ts

@@ -0,0 +1,24 @@
+/** @jsx h */
+import { SpsIcon } from "@spscommerce/ds-shared";
+import { ClassBindings } from "../../decorators/index";
+export declare class SpsNavTabComponent extends HTMLElement {
+    static readonly displayName = "sps-nav-tab";
+    static readonly props: {
+        active: string;
+        label: string;
+        icon: string;
+        tag: string;
+        href: string;
+        target: string;
+    };
+    active: boolean;
+    label: string;
+    icon: SpsIcon;
+    tag: string;
+    /** If you need the tab to operate as an HTML link, provide an href. */
+    href: string;
+    /** If you provide href, target is the same attribute as on an <a> element. */
+    target: string;
+    get [ClassBindings](): string[];
+    render(): JSX.Element;
+}