@spscommerce/ds-react 5.20.2 → 5.20.3-ie

package/dist/out-tsc/button/SpsButton.examples.js

@@ -0,0 +1,201 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+/* eslint-disable react/prop-types */
+/* eslint-disable react/jsx-one-expression-per-line */
+import { code } from "@spscommerce/utils";
+import * as React from "react";
+export var SpsButtonExamples = {
+    basic: {
+        label: "Basic Buttons",
+        description: function (_a) {
+            var NavigateTo = _a.NavigateTo;
+            return (React.createElement("span", { className: "sps-body-14 mt-4" },
+                "The most common type of button that can be used in most cases. Example: Basic Buttons in a ",
+                React.createElement(NavigateTo, { to: "Modal" }, "Modal"),
+                "."));
+        },
+        examples: {
+            basic: {
+                description: "Without Icons",
+                jsx: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    <>\n                        <SpsButton className=\"mr-1 mb-1\">Default</SpsButton>\n                        <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.KEY}>Key</SpsButton>\n                        <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.CONFIRM}>Confirm</SpsButton>\n                        <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.DELETE}>Delete</SpsButton>\n                        <SpsButton className=\"mr-1 mb-1\" disabled>Disabled</SpsButton>\n                    </>\n                "], ["\n                    <>\n                        <SpsButton className=\"mr-1 mb-1\">Default</SpsButton>\n                        <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.KEY}>Key</SpsButton>\n                        <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.CONFIRM}>Confirm</SpsButton>\n                        <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.DELETE}>Delete</SpsButton>\n                        <SpsButton className=\"mr-1 mb-1\" disabled>Disabled</SpsButton>\n                    </>\n                "]))),
+            },
+            buttonsWithIcons: {
+                description: "With Icons",
+                jsx: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    <>\n                        <SpsButton className=\"mr-1 mb-1\" icon={SpsIcon.DOWNLOAD_CLOUD}>\n                            Default\n                        </SpsButton>\n                        <SpsButton className=\"mr-1 mb-1\" icon={SpsIcon.KEY} kind={ButtonKind.KEY}>\n                            Key\n                        </SpsButton>\n                        <SpsButton\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.DOWNLOAD_CLOUD}\n                            kind={ButtonKind.CONFIRM}\n                        >\n                            Confirm\n                        </SpsButton>\n                        <SpsButton\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.TRASH}\n                            kind={ButtonKind.DELETE}\n                        >\n                            Delete\n                        </SpsButton>\n                        <SpsButton className=\"mr-1 mb-1\" icon={SpsIcon.DOWNLOAD_CLOUD} disabled>\n                            Disabled\n                        </SpsButton>\n                    </>\n                "], ["\n                    <>\n                        <SpsButton className=\"mr-1 mb-1\" icon={SpsIcon.DOWNLOAD_CLOUD}>\n                            Default\n                        </SpsButton>\n                        <SpsButton className=\"mr-1 mb-1\" icon={SpsIcon.KEY} kind={ButtonKind.KEY}>\n                            Key\n                        </SpsButton>\n                        <SpsButton\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.DOWNLOAD_CLOUD}\n                            kind={ButtonKind.CONFIRM}\n                        >\n                            Confirm\n                        </SpsButton>\n                        <SpsButton\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.TRASH}\n                            kind={ButtonKind.DELETE}\n                        >\n                            Delete\n                        </SpsButton>\n                        <SpsButton className=\"mr-1 mb-1\" icon={SpsIcon.DOWNLOAD_CLOUD} disabled>\n                            Disabled\n                        </SpsButton>\n                    </>\n                "]))),
+            },
+            spinning: {
+                description: "Spinning",
+                jsx: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    <>\n                        <SpsButton className=\"mr-1 mb-1\" spinning>Default</SpsButton>\n                        <SpsButton className=\"mr-1 mb-1\" spinning kind={ButtonKind.KEY}>Key</SpsButton>\n                        <SpsButton className=\"mr-1 mb-1\" spinning kind={ButtonKind.CONFIRM}>Confirm</SpsButton>\n                        <SpsButton className=\"mr-1 mb-1\" spinning kind={ButtonKind.DELETE}>Delete</SpsButton>\n                    </>\n                "], ["\n                    <>\n                        <SpsButton className=\"mr-1 mb-1\" spinning>Default</SpsButton>\n                        <SpsButton className=\"mr-1 mb-1\" spinning kind={ButtonKind.KEY}>Key</SpsButton>\n                        <SpsButton className=\"mr-1 mb-1\" spinning kind={ButtonKind.CONFIRM}>Confirm</SpsButton>\n                        <SpsButton className=\"mr-1 mb-1\" spinning kind={ButtonKind.DELETE}>Delete</SpsButton>\n                    </>\n                "]))),
+            },
+        },
+    },
+    dropDown: {
+        label: "Dropdown Buttons",
+        description: "Use these for actions that need to select an option to proceed. Example: Download button with options related to the file format (PDF, PPT, etc.).",
+        examples: {
+            basic: {
+                description: "Without Icons",
+                jsx: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                    <>\n                        <SpsDropdown\n                            className=\"mr-1 mb-1\"\n                            label=\"Default\"\n                            options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                        />\n                        <SpsDropdown\n                            className=\"mr-1 mb-1\"\n                            kind={ButtonKind.KEY}\n                            label=\"Key\"\n                            options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                        />\n                        <SpsDropdown\n                            className=\"mr-1 mb-1\"\n                            kind={ButtonKind.CONFIRM}\n                            label=\"Confirm\"\n                            options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                        />\n                        <SpsDropdown\n                            className=\"mr-1 mb-1\"\n                            kind={ButtonKind.DELETE}\n                            label=\"Delete\"\n                            options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                        />\n                        <SpsDropdown\n                            className=\"mr-1 mb-1\"\n                            disabled\n                            label=\"Disabled\"\n                            options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                        />\n                    </>\n                "], ["\n                    <>\n                        <SpsDropdown\n                            className=\"mr-1 mb-1\"\n                            label=\"Default\"\n                            options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                        />\n                        <SpsDropdown\n                            className=\"mr-1 mb-1\"\n                            kind={ButtonKind.KEY}\n                            label=\"Key\"\n                            options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                        />\n                        <SpsDropdown\n                            className=\"mr-1 mb-1\"\n                            kind={ButtonKind.CONFIRM}\n                            label=\"Confirm\"\n                            options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                        />\n                        <SpsDropdown\n                            className=\"mr-1 mb-1\"\n                            kind={ButtonKind.DELETE}\n                            label=\"Delete\"\n                            options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                        />\n                        <SpsDropdown\n                            className=\"mr-1 mb-1\"\n                            disabled\n                            label=\"Disabled\"\n                            options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                        />\n                    </>\n                "]))),
+            },
+            withIcon: {
+                description: "With Icons",
+                jsx: code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                    <>\n                        <SpsDropdown\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.DOWNLOAD_CLOUD}\n                            label=\"Default\"\n                            options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                        />\n                        <SpsDropdown\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.DOWNLOAD_CLOUD}\n                            kind={ButtonKind.KEY}\n                            label=\"Key\"\n                            options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                        />\n                        <SpsDropdown\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.DOWNLOAD_CLOUD}\n                            kind={ButtonKind.CONFIRM}\n                            label=\"Confirm\"\n                            options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                        />\n                        <SpsDropdown\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.TRASH}\n                            kind={ButtonKind.DELETE}\n                            label=\"Delete\"\n                            options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                        />\n                        <SpsDropdown\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.DOWNLOAD_CLOUD}\n                            disabled\n                            label=\"Disabled\"\n                            options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                        />\n                    </>\n                "], ["\n                    <>\n                        <SpsDropdown\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.DOWNLOAD_CLOUD}\n                            label=\"Default\"\n                            options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                        />\n                        <SpsDropdown\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.DOWNLOAD_CLOUD}\n                            kind={ButtonKind.KEY}\n                            label=\"Key\"\n                            options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                        />\n                        <SpsDropdown\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.DOWNLOAD_CLOUD}\n                            kind={ButtonKind.CONFIRM}\n                            label=\"Confirm\"\n                            options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                        />\n                        <SpsDropdown\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.TRASH}\n                            kind={ButtonKind.DELETE}\n                            label=\"Delete\"\n                            options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                        />\n                        <SpsDropdown\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.DOWNLOAD_CLOUD}\n                            disabled\n                            label=\"Disabled\"\n                            options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                        />\n                    </>\n                "]))),
+            },
+            spinning: {
+                description: "Spinning",
+                jsx: code(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                    <>\n                        <SpsDropdown\n                            spinning\n                            className=\"mr-1 mb-1\"\n                            label=\"Default\"\n                            options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                        />\n                        <SpsDropdown\n                            spinning\n                            className=\"mr-1 mb-1\"\n                            kind={ButtonKind.KEY}\n                            label=\"Key\"\n                            options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                        />\n                        <SpsDropdown\n                            spinning\n                            className=\"mr-1 mb-1\"\n                            kind={ButtonKind.CONFIRM}\n                            label=\"Confirm\"\n                            options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                        />\n                        <SpsDropdown\n                            spinning\n                            className=\"mr-1 mb-1\"\n                            kind={ButtonKind.DELETE}\n                            label=\"Delete\"\n                            options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                        />\n                    </>\n                "], ["\n                    <>\n                        <SpsDropdown\n                            spinning\n                            className=\"mr-1 mb-1\"\n                            label=\"Default\"\n                            options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                        />\n                        <SpsDropdown\n                            spinning\n                            className=\"mr-1 mb-1\"\n                            kind={ButtonKind.KEY}\n                            label=\"Key\"\n                            options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                        />\n                        <SpsDropdown\n                            spinning\n                            className=\"mr-1 mb-1\"\n                            kind={ButtonKind.CONFIRM}\n                            label=\"Confirm\"\n                            options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                        />\n                        <SpsDropdown\n                            spinning\n                            className=\"mr-1 mb-1\"\n                            kind={ButtonKind.DELETE}\n                            label=\"Delete\"\n                            options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                        />\n                    </>\n                "]))),
+            },
+        },
+    },
+    split: {
+        label: "Split Buttons",
+        description: "Use when there is 1 primary action and other related actions can be taken.",
+        examples: {
+            basic: {
+                description: "Without Icons",
+                jsx: code(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n                <>\n                    <SpsSplitButton className=\"mr-1 mb-1\" label=\"Default\" />\n                    <SpsSplitButton className=\"mr-1 mb-1\" kind={ButtonKind.KEY} label=\"Key\" />\n                    <SpsSplitButton className=\"mr-1 mb-1\" kind={ButtonKind.CONFIRM} label=\"Confirm\" />\n                    <SpsSplitButton className=\"mr-1 mb-1\" kind={ButtonKind.DELETE} label=\"Delete\" />\n                    <SpsSplitButton className=\"mr-1 mb-1\" disabled label=\"Disabled\" />\n                </>\n                "], ["\n                <>\n                    <SpsSplitButton className=\"mr-1 mb-1\" label=\"Default\" />\n                    <SpsSplitButton className=\"mr-1 mb-1\" kind={ButtonKind.KEY} label=\"Key\" />\n                    <SpsSplitButton className=\"mr-1 mb-1\" kind={ButtonKind.CONFIRM} label=\"Confirm\" />\n                    <SpsSplitButton className=\"mr-1 mb-1\" kind={ButtonKind.DELETE} label=\"Delete\" />\n                    <SpsSplitButton className=\"mr-1 mb-1\" disabled label=\"Disabled\" />\n                </>\n                "]))),
+            },
+            withIcon: {
+                description: "With Icons",
+                jsx: code(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n                    <>\n                        <SpsSplitButton\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.PLUS_SIGN}\n                            label=\"Default\"\n                        />\n                        <SpsSplitButton\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.PLUS_SIGN}\n                            kind={ButtonKind.KEY}\n                            label=\"Key\"\n                        />\n                        <SpsSplitButton\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.PLUS_SIGN}\n                            kind={ButtonKind.CONFIRM}\n                            label=\"Confirm\"\n                        />\n                        <SpsSplitButton\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.PLUS_SIGN}\n                            kind={ButtonKind.DELETE}\n                            label=\"Delete\"\n                        />\n                        <SpsSplitButton\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.PLUS_SIGN}\n                            disabled\n                            label=\"Disabled\"\n                        />\n                    </>\n                "], ["\n                    <>\n                        <SpsSplitButton\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.PLUS_SIGN}\n                            label=\"Default\"\n                        />\n                        <SpsSplitButton\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.PLUS_SIGN}\n                            kind={ButtonKind.KEY}\n                            label=\"Key\"\n                        />\n                        <SpsSplitButton\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.PLUS_SIGN}\n                            kind={ButtonKind.CONFIRM}\n                            label=\"Confirm\"\n                        />\n                        <SpsSplitButton\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.PLUS_SIGN}\n                            kind={ButtonKind.DELETE}\n                            label=\"Delete\"\n                        />\n                        <SpsSplitButton\n                            className=\"mr-1 mb-1\"\n                            icon={SpsIcon.PLUS_SIGN}\n                            disabled\n                            label=\"Disabled\"\n                        />\n                    </>\n                "]))),
+            },
+        },
+    },
+    iconButtons: {
+        label: "Icon Buttons",
+        description: function (_a) {
+            var NavigateTo = _a.NavigateTo;
+            return (React.createElement("span", { className: "sps-body-14 mt-4" },
+                "Use these for quick actions that can clearly be articulated by the use of an icon. Example: A Print button in the",
+                " ",
+                React.createElement(NavigateTo, { to: "List Action Bar" }, "List Action Bar"),
+                ". ",
+                React.createElement("br", null),
+                " Do not use an icon that that doesn\u2019t have a universally understood meaning; instead use a Basic Button or a Basic Button with an icon. ",
+                React.createElement("br", null),
+                " ",
+                React.createElement("a", { href: "#style-and-layout/icons" }, "View All Icons")));
+        },
+        examples: {
+            basic: {
+                description: "Standard Icon Buttons",
+                jsx: code(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n                <>\n                    <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.ICON} icon={SpsIcon.PRINTER} />\n                    <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.ICON} icon={SpsIcon.PENCIL} />\n                    <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.ICON} icon={SpsIcon.X} />\n                    <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.ICON} icon={SpsIcon.TRASH} />\n                    <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.ICON} icon={SpsIcon.GEAR} />\n                    <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.ICON} icon={SpsIcon.DOWNLOAD_CLOUD} />\n                    <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} />\n                    <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.ICON} icon={SpsIcon.PLUS_SIGN} />\n                    <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.ICON} icon={SpsIcon.MINUS} />\n                </>\n                "], ["\n                <>\n                    <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.ICON} icon={SpsIcon.PRINTER} />\n                    <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.ICON} icon={SpsIcon.PENCIL} />\n                    <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.ICON} icon={SpsIcon.X} />\n                    <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.ICON} icon={SpsIcon.TRASH} />\n                    <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.ICON} icon={SpsIcon.GEAR} />\n                    <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.ICON} icon={SpsIcon.DOWNLOAD_CLOUD} />\n                    <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} />\n                    <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.ICON} icon={SpsIcon.PLUS_SIGN} />\n                    <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.ICON} icon={SpsIcon.MINUS} />\n                </>\n                "]))),
+            },
+            dropdown: {
+                description: function (_a) {
+                    var NavigateTo = _a.NavigateTo;
+                    return (React.createElement(React.Fragment, null,
+                        React.createElement("h5", null, "Dropdown Icon Button"),
+                        React.createElement("span", { className: "sps-body-14 mt-4" },
+                            "Use these when there are several options available for action. Example: Dropdown Icon Button in a",
+                            " ",
+                            React.createElement(NavigateTo, { to: "Content Row" }, "Content Row"),
+                            ".")));
+                },
+                jsx: code(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n                    <SpsDropdown\n                        className=\"mr-1 mb-1\"\n                        kind={ButtonKind.ICON}\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                    />\n                "], ["\n                    <SpsDropdown\n                        className=\"mr-1 mb-1\"\n                        kind={ButtonKind.ICON}\n                        options={[[{ label: \"Option A\" }, () => console.log(\"Option A\")]]}\n                    />\n                "]))),
+            },
+            spin: {
+                description: "Spinner",
+                jsx: code(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n                    <SpsButton className=\"mr-1 mb-1\" icon={SpsIcon.DOWNLOAD_CLOUD} spinning kind={ButtonKind.ICON} />\n                "], ["\n                    <SpsButton className=\"mr-1 mb-1\" icon={SpsIcon.DOWNLOAD_CLOUD} spinning kind={ButtonKind.ICON} />\n                "]))),
+            },
+        },
+    },
+    textButtons: {
+        label: "Text Buttons",
+        description: function (_a) {
+            var NavigateTo = _a.NavigateTo;
+            return (React.createElement("span", { className: "sps-body-14 mt-4" },
+                "Use for less important actions, or ones that aren't taken as frequently. They should not appear inline with other copy. Example: Advanced Search button in the",
+                " ",
+                React.createElement(NavigateTo, { to: "List Toolbar" }, "List Toolbar"),
+                "."));
+        },
+        examples: {
+            basic: {
+                description: "Without Icons",
+                jsx: code(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n                <>\n                    <SpsButton className=\"mr-2 mb-1\" kind={ButtonKind.LINK}>Default</SpsButton>\n                    <SpsButton className=\"mr-2 mb-1 red200\" kind={ButtonKind.LINK}>Delete</SpsButton>\n                    <SpsButton className=\"mr-2 mb-1 gray500\" kind={ButtonKind.LINK} disabled>Disabled</SpsButton>\n                </>\n                "], ["\n                <>\n                    <SpsButton className=\"mr-2 mb-1\" kind={ButtonKind.LINK}>Default</SpsButton>\n                    <SpsButton className=\"mr-2 mb-1 red200\" kind={ButtonKind.LINK}>Delete</SpsButton>\n                    <SpsButton className=\"mr-2 mb-1 gray500\" kind={ButtonKind.LINK} disabled>Disabled</SpsButton>\n                </>\n                "]))),
+            },
+            icon: {
+                description: "With Icons",
+                jsx: code(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n                    <>\n                        <SpsButton\n                            className=\"mr-2 mb-1\"\n                            kind={ButtonKind.LINK}\n                            icon={SpsIcon.DOWNLOAD_CLOUD}\n                        >\n                            Default\n                        </SpsButton>\n                        <SpsButton\n                            className=\"mr-2 mb-1 red200\"\n                            kind={ButtonKind.LINK}\n                            icon={SpsIcon.TRASH}\n                        >\n                            Delete\n                        </SpsButton>\n                        <SpsButton\n                            className=\"mr-2 mb-1 gray500\"\n                            kind={ButtonKind.LINK}\n                            icon={SpsIcon.GEAR}\n                            disabled\n                        >\n                            Disabled\n                        </SpsButton>\n                    </>\n                "], ["\n                    <>\n                        <SpsButton\n                            className=\"mr-2 mb-1\"\n                            kind={ButtonKind.LINK}\n                            icon={SpsIcon.DOWNLOAD_CLOUD}\n                        >\n                            Default\n                        </SpsButton>\n                        <SpsButton\n                            className=\"mr-2 mb-1 red200\"\n                            kind={ButtonKind.LINK}\n                            icon={SpsIcon.TRASH}\n                        >\n                            Delete\n                        </SpsButton>\n                        <SpsButton\n                            className=\"mr-2 mb-1 gray500\"\n                            kind={ButtonKind.LINK}\n                            icon={SpsIcon.GEAR}\n                            disabled\n                        >\n                            Disabled\n                        </SpsButton>\n                    </>\n                "]))),
+            },
+            spin: {
+                description: "Spinner",
+                jsx: code(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n                    <SpsButton className=\"mr-2 mb-1\" kind={ButtonKind.LINK} spinning>Default</SpsButton>\n                "], ["\n                    <SpsButton className=\"mr-2 mb-1\" kind={ButtonKind.LINK} spinning>Default</SpsButton>\n                "]))),
+            },
+        },
+    },
+    submitButtons: {
+        label: "Submit Buttons",
+        description: function (_a) {
+            var NavigateTo = _a.NavigateTo;
+            return (React.createElement("span", { className: "sps-body-14 mt-4" },
+                "Used to submit a form. There can be a number of visual variations, for example a",
+                " ",
+                React.createElement(NavigateTo, { to: "Modal" }, "Modal"),
+                " uses Basic Button (Key) as its Submit Button."));
+        },
+        examples: {
+            basic: {
+                react: code(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const { formMeta, formValue, updateForm } = useSpsForm({});\n\n                        function alertOnSubmit() {\n                            window.alert(\"Form submitted\");\n                        }\n\n                        return (\n                            <>\n                                <SpsForm formMeta={formMeta} onSubmit={alertOnSubmit}>\n                                    {/* Use only one Submit button in your form */}\n                                    <SpsButton\n                                        className=\"mr-2 mb-1\"\n                                        type={ButtonType.SUBMIT}\n                                        kind={ButtonKind.KEY}\n                                    >\n                                        Key\n                                    </SpsButton>\n                                    <SpsButton\n                                        className=\"mr-2 mb-1\"\n                                        type={ButtonType.SUBMIT}\n                                        kind={ButtonKind.CONFIRM}\n                                    >\n                                        Confirm\n                                    </SpsButton>\n                                </SpsForm>\n                            </>\n                        );\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const { formMeta, formValue, updateForm } = useSpsForm({});\n\n                        function alertOnSubmit() {\n                            window.alert(\"Form submitted\");\n                        }\n\n                        return (\n                            <>\n                                <SpsForm formMeta={formMeta} onSubmit={alertOnSubmit}>\n                                    {/* Use only one Submit button in your form */}\n                                    <SpsButton\n                                        className=\"mr-2 mb-1\"\n                                        type={ButtonType.SUBMIT}\n                                        kind={ButtonKind.KEY}\n                                    >\n                                        Key\n                                    </SpsButton>\n                                    <SpsButton\n                                        className=\"mr-2 mb-1\"\n                                        type={ButtonType.SUBMIT}\n                                        kind={ButtonKind.CONFIRM}\n                                    >\n                                        Confirm\n                                    </SpsButton>\n                                </SpsForm>\n                            </>\n                        );\n                    }\n                "]))),
+            },
+        },
+    },
+    linkButtons: {
+        label: "Button as Link",
+        description: function (_a) {
+            var NavigateTo = _a.NavigateTo;
+            return (React.createElement("span", { className: "sps-body-14 mt-4" },
+                "Used to link to another page, such as an external website. They may open in the same window or in a new one. It should only be used when a",
+                " ",
+                React.createElement(NavigateTo, { to: "Text Button" }, "Text Button"),
+                " doesn't provide enough visual emphasis."));
+        },
+        examples: {
+            basic: {
+                jsx: code(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n                    <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.DEFAULT} href=\"https://google.com\">Button Text</SpsButton>\n                "], ["\n                    <SpsButton className=\"mr-1 mb-1\" kind={ButtonKind.DEFAULT} href=\"https://google.com\">Button Text</SpsButton>\n                "]))),
+            },
+        },
+    },
+    groupButtons: {
+        label: "Button Groups",
+        description: function (_a) {
+            var NavigateTo = _a.NavigateTo;
+            return (React.createElement("span", { className: "sps-body-14 mt-4" },
+                "Use button groups when there are a number of actions that can be taken in a view. When there are multiple button types in a group, they are separated using dividers. Example: Button groups in",
+                " ",
+                React.createElement(NavigateTo, { to: "List Action Bar" }, "List Action Bar"),
+                "."));
+        },
+        examples: {
+            basic: {
+                description: "Basic Button Groups",
+                jsx: code(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n                <>\n                    <SpsButton className=\"mr-2 mb-1\" kind={ButtonKind.DEFAULT}>Cancel</SpsButton>\n                    <SpsButton className=\"mr-2 mb-1\" kind={ButtonKind.KEY}>Save</SpsButton>\n                </>\n                "], ["\n                <>\n                    <SpsButton className=\"mr-2 mb-1\" kind={ButtonKind.DEFAULT}>Cancel</SpsButton>\n                    <SpsButton className=\"mr-2 mb-1\" kind={ButtonKind.KEY}>Save</SpsButton>\n                </>\n                "]))),
+            },
+            icon: {
+                description: "Icon Button Groups",
+                jsx: code(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n                <>\n                    <SpsButton className=\"mb-1\" kind={ButtonKind.ICON} icon={SpsIcon.PENCIL}/>\n                    <SpsButton className=\"mb-1\" kind={ButtonKind.ICON} icon={SpsIcon.TRASH}/>\n                </>\n                "], ["\n                <>\n                    <SpsButton className=\"mb-1\" kind={ButtonKind.ICON} icon={SpsIcon.PENCIL}/>\n                    <SpsButton className=\"mb-1\" kind={ButtonKind.ICON} icon={SpsIcon.TRASH}/>\n                </>\n                "]))),
+            },
+            textIcon: {
+                description: "Text Buttons + Icon Buttons Group",
+                jsx: code(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n                <>\n                    <SpsButton className=\"mr-2 mb-1\" kind={ButtonKind.LINK}>Text Button</SpsButton>\n                    <SpsVr/>\n                    <SpsButton className=\"mb-1\" kind={ButtonKind.ICON} icon={SpsIcon.DOWNLOAD_CLOUD}/>\n                    <SpsButton className=\"mb-1\" kind={ButtonKind.ICON} icon={SpsIcon.PRINTER}/>\n                </>\n                "], ["\n                <>\n                    <SpsButton className=\"mr-2 mb-1\" kind={ButtonKind.LINK}>Text Button</SpsButton>\n                    <SpsVr/>\n                    <SpsButton className=\"mb-1\" kind={ButtonKind.ICON} icon={SpsIcon.DOWNLOAD_CLOUD}/>\n                    <SpsButton className=\"mb-1\" kind={ButtonKind.ICON} icon={SpsIcon.PRINTER}/>\n                </>\n                "]))),
+            },
+            textBasic: {
+                description: "Text Buttons + Basic Buttons Group",
+                jsx: code(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n                <>\n                    <SpsButton className=\"mr-2 mb-1\" kind={ButtonKind.LINK}>Text Button</SpsButton>\n                    <SpsVr/>\n                    <SpsButton className=\"ml-2 mr-2 mb-1\" kind={ButtonKind.DEFAULT}>Button</SpsButton>\n                    <SpsButton className=\"mr-2 mb-1\" kind={ButtonKind.KEY}>Button</SpsButton>\n                    <SpsButton className=\"mr-2 mb-1\" kind={ButtonKind.CONFIRM}>Button</SpsButton>\n                </>\n                "], ["\n                <>\n                    <SpsButton className=\"mr-2 mb-1\" kind={ButtonKind.LINK}>Text Button</SpsButton>\n                    <SpsVr/>\n                    <SpsButton className=\"ml-2 mr-2 mb-1\" kind={ButtonKind.DEFAULT}>Button</SpsButton>\n                    <SpsButton className=\"mr-2 mb-1\" kind={ButtonKind.KEY}>Button</SpsButton>\n                    <SpsButton className=\"mr-2 mb-1\" kind={ButtonKind.CONFIRM}>Button</SpsButton>\n                </>\n                "]))),
+            },
+            iconBasic: {
+                description: "Icon Buttons + Basic Buttons Group",
+                jsx: code(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n                <>\n                    <SpsButton className=\"mb-1\" kind={ButtonKind.ICON} icon={SpsIcon.DOWNLOAD_CLOUD}/>\n                    <SpsButton className=\"mb-1\" kind={ButtonKind.ICON} icon={SpsIcon.PRINTER}/>\n                    <SpsVr/>\n                    <SpsButton className=\"ml-2 mr-2 mb-1\" kind={ButtonKind.DEFAULT}>Button</SpsButton>\n                    <SpsButton className=\"mr-2 mb-1\" kind={ButtonKind.KEY}>Button</SpsButton>\n                    <SpsButton className=\"mr-2 mb-1\" kind={ButtonKind.CONFIRM}>Button</SpsButton>\n                </>\n                "], ["\n                <>\n                    <SpsButton className=\"mb-1\" kind={ButtonKind.ICON} icon={SpsIcon.DOWNLOAD_CLOUD}/>\n                    <SpsButton className=\"mb-1\" kind={ButtonKind.ICON} icon={SpsIcon.PRINTER}/>\n                    <SpsVr/>\n                    <SpsButton className=\"ml-2 mr-2 mb-1\" kind={ButtonKind.DEFAULT}>Button</SpsButton>\n                    <SpsButton className=\"mr-2 mb-1\" kind={ButtonKind.KEY}>Button</SpsButton>\n                    <SpsButton className=\"mr-2 mb-1\" kind={ButtonKind.CONFIRM}>Button</SpsButton>\n                </>\n                "]))),
+            },
+            textIconBasic: {
+                description: "Text Buttons + Icon Buttons + Basic Buttons Group",
+                jsx: code(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n                <>\n                    <SpsButton className=\"mr-2 mb-1\" kind={ButtonKind.LINK}>Text Button</SpsButton>\n                    <SpsVr/>\n                    <SpsButton className=\"mb-1\" kind={ButtonKind.ICON} icon={SpsIcon.DOWNLOAD_CLOUD}/>\n                    <SpsButton className=\"mb-1\" kind={ButtonKind.ICON} icon={SpsIcon.PRINTER}/>\n                    <SpsVr/>\n                    <SpsButton className=\"ml-2 mr-2 mb-1\" kind={ButtonKind.DEFAULT}>Button</SpsButton>\n                    <SpsButton className=\"mr-2 mb-1\" kind={ButtonKind.KEY}>Button</SpsButton>\n                    <SpsButton className=\"mr-2 mb-1\" kind={ButtonKind.CONFIRM}>Button</SpsButton>\n                </>\n                "], ["\n                <>\n                    <SpsButton className=\"mr-2 mb-1\" kind={ButtonKind.LINK}>Text Button</SpsButton>\n                    <SpsVr/>\n                    <SpsButton className=\"mb-1\" kind={ButtonKind.ICON} icon={SpsIcon.DOWNLOAD_CLOUD}/>\n                    <SpsButton className=\"mb-1\" kind={ButtonKind.ICON} icon={SpsIcon.PRINTER}/>\n                    <SpsVr/>\n                    <SpsButton className=\"ml-2 mr-2 mb-1\" kind={ButtonKind.DEFAULT}>Button</SpsButton>\n                    <SpsButton className=\"mr-2 mb-1\" kind={ButtonKind.KEY}>Button</SpsButton>\n                    <SpsButton className=\"mr-2 mb-1\" kind={ButtonKind.CONFIRM}>Button</SpsButton>\n                </>\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22;
+//# sourceMappingURL=SpsButton.examples.js.map

package/dist/out-tsc/button/SpsButton.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsButton.examples.js","sourceRoot":"","sources":["../../../src/button/SpsButton.examples.tsx"],"names":[],"mappings":";;;;AAAA,qCAAqC;AACrC,sDAAsD;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAE1C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,CAAC,IAAM,iBAAiB,GAAoB;IAChD,KAAK,EAAE;QACL,KAAK,EAAE,eAAe;QACtB,WAAW,EAAE,UAAC,EAAc;gBAAZ,UAAU,gBAAA;YAAO,OAAA,CAC/B,8BAAM,SAAS,EAAC,kBAAkB;;gBAEX,oBAAC,UAAU,IAAC,EAAE,EAAC,OAAO,YAAmB;oBACzD,CACR;QALgC,CAKhC;QACD,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,WAAW,EAAE,eAAe;gBAC5B,GAAG,EAAE,IAAI,smBAAA,miBAQA,IAAA;aACV;YACD,gBAAgB,EAAE;gBAChB,WAAW,EAAE,YAAY;gBACzB,GAAG,EAAE,IAAI,kuCAAA,+pCA0BA,IAAA;aACV;YACD,QAAQ,EAAE;gBACR,WAAW,EAAE,UAAU;gBACvB,GAAG,EAAE,IAAI,gjBAAA,6eAOA,IAAA;aACV;SACF;KACF;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,kBAAkB;QACzB,WAAW,EACH,oJAAoJ;QAC5J,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,WAAW,EAAE,eAAe;gBAC5B,GAAG,EAAE,IAAI,4nDAAA,yjDAgCA,IAAA;aACV;YACD,QAAQ,EAAE;gBACR,WAAW,EAAE,YAAY;gBACzB,GAAG,EAAE,IAAI,05DAAA,u1DAqCA,IAAA;aACV;YACD,QAAQ,EAAE;gBACR,WAAW,EAAE,UAAU;gBACvB,GAAG,EAAE,IAAI,m+CAAA,g6CA8BA,IAAA;aACV;SACF;KACF;IACD,KAAK,EAAE;QACL,KAAK,EAAE,eAAe;QACtB,WAAW,EAAE,4EAA4E;QACzF,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,WAAW,EAAE,eAAe;gBAC5B,GAAG,EAAE,IAAI,wmBAAA,qiBAQA,IAAA;aACV;YACD,QAAQ,EAAE;gBACR,WAAW,EAAE,YAAY;gBACzB,GAAG,EAAE,IAAI,q6CAAA,k2CAgCA,IAAA;aACV;SACF;KACF;IACD,WAAW,EAAE;QACX,KAAK,EAAE,cAAc;QACrB,WAAW,EAAE,UAAC,EAAc;gBAAZ,UAAU,gBAAA;YAAO,OAAA,CAC/B,8BAAM,SAAS,EAAC,kBAAkB;;gBAEO,GAAG;gBAC1C,oBAAC,UAAU,IAAC,EAAE,EAAC,iBAAiB,sBAA6B;;gBAAE,+BAAM;;gBAEtB,+BAAM;gBAAC,GAAG;gBACzD,2BAAG,IAAI,EAAC,yBAAyB,qBAAmB,CAC/C,CACR;QATgC,CAShC;QACD,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,WAAW,EAAE,uBAAuB;gBACpC,GAAG,EAAE,IAAI,2iCAAA,w+BAYA,IAAA;aACV;YACD,QAAQ,EAAE;gBACR,WAAW,EAAE,UAAC,EAAc;wBAAZ,UAAU,gBAAA;oBAAO,OAAA,CAC/B;wBACE,uDAA6B;wBAC7B,8BAAM,SAAS,EAAC,kBAAkB;;4BAEQ,GAAG;4BAC3C,oBAAC,UAAU,IAAC,EAAE,EAAC,aAAa,kBAAyB;gCAChD,CACN,CACJ;gBATgC,CAShC;gBACD,GAAG,EAAE,IAAI,oVAAA,+QAMA,IAAA;aACV;YACD,IAAI,EAAE;gBACJ,WAAW,EAAE,SAAS;gBACtB,GAAG,EAAE,IAAI,kNAAA,6IAEA,IAAA;aACV;SACF;KACF;IACD,WAAW,EAAE;QACX,KAAK,EAAE,cAAc;QACrB,WAAW,EAAE,UAAC,EAAc;gBAAZ,UAAU,gBAAA;YAAO,OAAA,CAC/B,8BAAM,SAAS,EAAC,kBAAkB;;gBAEkD,GAAG;gBACrF,oBAAC,UAAU,IAAC,EAAE,EAAC,cAAc,mBAA0B;oBAClD,CACR;QANgC,CAMhC;QACD,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,WAAW,EAAE,eAAe;gBAC5B,GAAG,EAAE,IAAI,mcAAA,8XAMA,IAAA;aACV;YACD,IAAI,EAAE;gBACJ,WAAW,EAAE,YAAY;gBACzB,GAAG,EAAE,IAAI,sjCAAA,i/BAyBA,IAAA;aACV;YACD,IAAI,EAAE;gBACJ,WAAW,EAAE,SAAS;gBACtB,GAAG,EAAE,IAAI,qMAAA,gIAEA,IAAA;aACV;SACF;KACF;IACD,aAAa,EAAE;QACb,KAAK,EAAE,gBAAgB;QACvB,WAAW,EAAE,UAAC,EAAc;gBAAZ,UAAU,gBAAA;YAAO,OAAA,CAC/B,8BAAM,SAAS,EAAC,kBAAkB;;gBACyD,GAAG;gBAC5F,oBAAC,UAAU,IAAC,EAAE,EAAC,OAAO,YAAmB;iEAEpC,CACR;QANgC,CAMhC;QACD,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,u9CAAA,k5CA8BF,IAAA;aACV;SACF;KACF;IACD,WAAW,EAAE;QACX,KAAK,EAAE,gBAAgB;QACvB,WAAW,EAAE,UAAC,EAAc;gBAAZ,UAAU,gBAAA;YAAO,OAAA,CAC/B,8BAAM,SAAS,EAAC,kBAAkB;;gBAE8B,GAAG;gBACjE,oBAAC,UAAU,IAAC,EAAE,EAAC,aAAa,kBAAyB;2DAEhD,CACR;QAPgC,CAOhC;QACD,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,GAAG,EAAE,IAAI,+NAAA,0JAEA,IAAA;aACV;SACF;KACF;IACD,YAAY,EAAE;QACZ,KAAK,EAAE,eAAe;QACtB,WAAW,EAAE,UAAC,EAAc;gBAAZ,UAAU,gBAAA;YAAO,OAAA,CAC/B,8BAAM,SAAS,EAAC,kBAAkB;;gBAGE,GAAG;gBACrC,oBAAC,UAAU,IAAC,EAAE,EAAC,iBAAiB,sBAA6B;oBACxD,CACR;QAPgC,CAOhC;QACD,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,WAAW,EAAE,qBAAqB;gBAClC,GAAG,EAAE,IAAI,sUAAA,iQAKA,IAAA;aACV;YACD,IAAI,EAAE;gBACJ,WAAW,EAAE,oBAAoB;gBACjC,GAAG,EAAE,IAAI,qUAAA,gQAKA,IAAA;aACV;YACD,QAAQ,EAAE;gBACR,WAAW,EAAE,mCAAmC;gBAChD,GAAG,EAAE,IAAI,odAAA,+YAOA,IAAA;aACV;YACD,SAAS,EAAE;gBACT,WAAW,EAAE,oCAAoC;gBACjD,GAAG,EAAE,IAAI,ujBAAA,kfAQA,IAAA;aACV;YACD,SAAS,EAAE;gBACT,WAAW,EAAE,oCAAoC;gBACjD,GAAG,EAAE,IAAI,6pBAAA,wlBASA,IAAA;aACV;YACD,aAAa,EAAE;gBACb,WAAW,EAAE,mDAAmD;gBAChE,GAAG,EAAE,IAAI,kyBAAA,6tBAWA,IAAA;aACV;SACF;KACF;CACF,CAAC"}

package/dist/out-tsc/button/SpsButton.js

@@ -0,0 +1,67 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { ButtonKind, ButtonType, SpsIcon } from "@spscommerce/ds-shared";
+import clsx from "clsx";
+import * as React from "react";
+import * as PropTypes from "../prop-types";
+import { I18nContext } from "../i18n";
+var propsDoc = {
+    disabled: "boolean",
+    href: "string",
+    icon: "SpsIcon",
+    kind: "ButtonKind",
+    spinning: "boolean",
+    spinningTitle: "string",
+    type: "ButtonType",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { disabled: PropTypes.bool, href: PropTypes.string, icon: PropTypes.enumValue(SpsIcon), kind: PropTypes.enumValue(ButtonKind), spinning: PropTypes.bool, spinningTitle: PropTypes.string, type: PropTypes.enumValue(ButtonType) });
+export function SpsButton(props) {
+    var children = props.children, className = props.className, href = props.href, icon = props.icon, _a = props.kind, kind = _a === void 0 ? ButtonKind.DEFAULT : _a, spinning = props.spinning, spinningTitle = props.spinningTitle, _b = props.type, type = _b === void 0 ? ButtonType.BUTTON : _b, unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "href", "icon", "kind", "spinning", "spinningTitle", "type", "unsafelyReplaceClassName"]);
+    var disabled = props.disabled;
+    if (spinning) {
+        disabled = true;
+    }
+    var t = React.useContext(I18nContext).t;
+    var classes = clsx(unsafelyReplaceClassName || "sps-button", "sps-button--" + kind, disabled && "sps-button--disabled", spinning && "sps-button--spinning", className);
+    var iconElement = icon && React.createElement("i", { className: clsx("sps-icon", "sps-icon-" + icon), "aria-hidden": "true" });
+    var spinner = spinning && (React.createElement("div", { className: "sps-spinner" }, spinningTitle || t("design-system:button.spinningTitle")));
+    return (React.createElement("div", { className: classes }, href ? (React.createElement("a", __assign({}, rest, { href: href, className: "sps-button__clickable-element" }),
+        iconElement,
+        children,
+        spinner)) : (React.createElement("button", __assign({}, rest, { 
+        /**
+         * eslint wants type to be ONLY a string or a ternary with strings for both
+         * branches, but this is a generic button component. we NEED it to be a prop.
+         */
+        /* eslint-disable-next-line react/button-has-type */
+        type: type, className: "sps-button__clickable-element", disabled: disabled }),
+        iconElement,
+        children,
+        spinner))));
+}
+Object.assign(SpsButton, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsButton",
+});
+//# sourceMappingURL=SpsButton.js.map

package/dist/out-tsc/button/SpsButton.js.map

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

package/dist/out-tsc/button/SpsButtonGroup.d.ts

@@ -0,0 +1,10 @@
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsButtonGroupProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsButtonGroup(props: SpsButtonGroupProps): JSX.Element;
+export {};

package/dist/out-tsc/button/SpsButtonGroup.js

@@ -0,0 +1,68 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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;
+};
+import { ButtonKind } from "@spscommerce/ds-shared";
+import clsx from "clsx";
+import * as React from "react";
+import { SpsDropdown } from "../dropdown/SpsDropdown";
+import * as PropTypes from "../prop-types";
+import { selectChildren } from "../utils/selectChildren";
+import { SpsButton } from "./SpsButton";
+var propsDoc = {};
+var propTypes = __assign({}, PropTypes.spsGlobalPropTypes);
+export function SpsButtonGroup(props) {
+    var children = props.children, className = props.className, unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "unsafelyReplaceClassName"]);
+    var _a = __read(selectChildren(children, [
+        { type: SpsButton, props: { kind: ButtonKind.LINK } }, [{ type: SpsButton, props: { kind: ButtonKind.ICON } }, { type: SpsDropdown }],
+    ]), 3), links = _a[0], iconButtons = _a[1], others = _a[2];
+    var linkAndIconOrOther = links.length > 0 && (iconButtons.length > 0 || others.length > 0);
+    var iconAndOther = iconButtons.length > 0 && others.length > 0;
+    var classes = clsx(unsafelyReplaceClassName || "sps-button-group", className);
+    return (React.createElement("div", __assign({ className: classes }, rest),
+        links.length > 0 && links,
+        linkAndIconOrOther && React.createElement("div", { className: "sps-vertical-rule" }),
+        iconButtons.length > 0 && iconButtons,
+        iconAndOther && React.createElement("div", { className: "sps-vertical-rule" }),
+        others.length > 0 && others));
+}
+Object.assign(SpsButtonGroup, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsButtonGroup",
+});
+//# sourceMappingURL=SpsButtonGroup.js.map

package/dist/out-tsc/button/SpsButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsButtonGroup.js","sourceRoot":"","sources":["../../../src/button/SpsButtonGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,IAAM,QAAQ,GAAG,EAAE,CAAC;AAEpB,IAAM,SAAS,gBACV,SAAS,CAAC,kBAAkB,CAChC,CAAC;AAIF,MAAM,UAAU,cAAc,CAAC,KAA0B;IAErD,IAAA,QAAQ,GAIN,KAAK,SAJC,EACR,SAAS,GAGP,KAAK,UAHE,EACT,wBAAwB,GAEtB,KAAK,yBAFiB,EACrB,IAAI,UACL,KAAK,EALH,qDAKL,CADQ,CACC;IAEJ,IAAA,KAAA,OAIF,cAAc,CAAC,QAAQ,EAAE;QAC3B,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;KACtI,CAAC,IAAA,EALA,KAAK,QAAA,EACL,WAAW,QAAA,EACX,MAAM,QAGN,CAAC;IAEH,IAAM,kBAAkB,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAC7F,IAAM,YAAY,GAAG,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;IAEjE,IAAM,OAAO,GAAG,IAAI,CAClB,wBAAwB,IAAI,kBAAkB,EAC9C,SAAS,CACV,CAAC;IAEF,OAAO,CACL,sCAAK,SAAS,EAAE,OAAO,IAAM,IAAI;QAC9B,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,KAAK;QACzB,kBAAkB,IAAI,6BAAK,SAAS,EAAC,mBAAmB,GAAG;QAC3D,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,WAAW;QACrC,YAAY,IAAI,6BAAK,SAAS,EAAC,mBAAmB,GAAG;QACrD,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,MAAM,CACxB,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,cAAc,EAAE;IAC5B,KAAK,EAAE,QAAQ;IACf,SAAS,WAAA;IACT,WAAW,EAAE,gBAAgB;CAC9B,CAAC,CAAC"}

package/dist/out-tsc/button/SpsIconButtonPanel.d.ts

@@ -0,0 +1,10 @@
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsIconButtonPanelProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsIconButtonPanel({ children, className, ...rest }: SpsIconButtonPanelProps): JSX.Element;
+export {};

package/dist/out-tsc/button/SpsIconButtonPanel.js

@@ -0,0 +1,61 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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;
+};
+import clsx from "clsx";
+import * as React from "react";
+import { ButtonKind } from "@spscommerce/ds-shared";
+import * as PropTypes from "../prop-types";
+import { selectChildren } from "../utils/selectChildren";
+import { SpsButton } from "./SpsButton";
+var propsDoc = {};
+var propTypes = __assign({}, PropTypes.spsGlobalPropTypes);
+var CSS_BLOCK = "sps-icon-button-panel";
+export function SpsIconButtonPanel(_a) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    var classes = clsx(CSS_BLOCK, className);
+    var _b = __read(selectChildren(children, [
+        { type: SpsButton, props: { kind: ButtonKind.ICON } },
+    ]), 1), iconButtons = _b[0];
+    return (React.createElement("div", __assign({ className: classes }, rest), iconButtons));
+}
+Object.assign(SpsIconButtonPanel, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsIconButtonPanel",
+});
+//# sourceMappingURL=SpsIconButtonPanel.js.map

package/dist/out-tsc/button/SpsIconButtonPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsIconButtonPanel.js","sourceRoot":"","sources":["../../../src/button/SpsIconButtonPanel.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,IAAM,QAAQ,GAAG,EAChB,CAAC;AAEF,IAAM,SAAS,gBACV,SAAS,CAAC,kBAAkB,CAChC,CAAC;AAIF,IAAM,SAAS,GAAG,uBAAuB,CAAC;AAE1C,MAAM,UAAU,kBAAkB,CAAC,EAIT;IAHxB,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACN,IAAI,cAH0B,yBAIlC,CADQ;IAEP,IAAM,OAAO,GAAG,IAAI,CAClB,SAAS,EACT,SAAS,CACV,CAAC;IAEI,IAAA,KAAA,OAAgB,cAAc,CAAC,QAAQ,EAAE;QAC7C,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,CAAC,IAAI,EAAE,EAAE;KACtD,CAAC,IAAA,EAFK,WAAW,QAEhB,CAAC;IAEH,OAAO,CACL,sCAAK,SAAS,EAAE,OAAO,IAAM,IAAI,GAC9B,WAAW,CACR,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,kBAAkB,EAAE;IAChC,KAAK,EAAE,QAAQ;IACf,SAAS,WAAA;IACT,WAAW,EAAE,oBAAoB;CAClC,CAAC,CAAC"}

package/dist/out-tsc/button/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./SpsButton";
+export * from "./SpsButtonGroup";
+export * from "./SpsButton.examples";
+export * from "./SpsIconButtonPanel";

package/dist/out-tsc/button/index.js

@@ -0,0 +1,5 @@
+export * from "./SpsButton";
+export * from "./SpsButtonGroup";
+export * from "./SpsButton.examples";
+export * from "./SpsIconButtonPanel";
+//# sourceMappingURL=index.js.map

package/dist/out-tsc/button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC"}

package/dist/out-tsc/card/SpsCard.d.ts

@@ -0,0 +1,16 @@
+import { SpsIcon } from '@spscommerce/ds-shared';
+import * as PropTypes from '../prop-types';
+declare const propTypes: {
+    activeTab: PropTypes.Requireable<string>;
+    footer: PropTypes.Requireable<PropTypes.ReactNodeOrRenderFn>;
+    headerContent: PropTypes.Requireable<PropTypes.ReactNodeOrRenderFn>;
+    headerIcon: PropTypes.Requireable<SpsIcon>;
+    headerTitle: PropTypes.Requireable<string>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsCardProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsCard(props: SpsCardProps): JSX.Element;
+export {};

package/dist/out-tsc/card/SpsCard.examples.d.ts

@@ -0,0 +1,2 @@
+import type { DSReactExamples } from '@spscommerce/ds-shared';
+export declare const SpsCardExamples: DSReactExamples;