@mitodl/smoot-design 0.0.0-0a23f44

package/dist/cjs/components/Button/ActionButton.stories.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Showcase = exports.Links = exports.VariantsAndEdge = void 0;
+const React = require("react");
+const ActionButton_1 = require("./ActionButton");
+const Grid2_1 = require("@mui/material/Grid2");
+const Stack_1 = require("@mui/material/Stack");
+const react_1 = require("@remixicon/react");
+const test_1 = require("@storybook/test");
+const story_utils_1 = require("../../story-utils");
+const ICONS = {
+    None: undefined,
+    ArrowBackIcon: React.createElement(react_1.RiArrowLeftLine, null),
+    DeleteIcon: React.createElement(react_1.RiDeleteBinLine, null),
+    TestTubeIcon: React.createElement(react_1.RiTestTubeLine, null),
+};
+const VARIANTS = (0, story_utils_1.enumValues)({
+    primary: true,
+    secondary: true,
+    tertiary: true,
+    bordered: true,
+    text: true,
+});
+const STABLE_VARIANTS = VARIANTS.filter((v) => !v.startsWith("unstable"));
+const SIZES = (0, story_utils_1.enumValues)({
+    small: true,
+    medium: true,
+    large: true,
+});
+const EDGES = (0, story_utils_1.enumValues)({
+    circular: true,
+    rounded: true,
+    none: true,
+});
+const meta = {
+    title: "smoot-design/ActionButton",
+    component: ActionButton_1.ActionButton,
+    argTypes: {
+        variant: {
+            control: { type: "select" },
+            table: {
+                defaultValue: { summary: ActionButton_1.DEFAULT_PROPS.variant },
+            },
+        },
+        size: {
+            control: { type: "select" },
+            table: {
+                defaultValue: { summary: ActionButton_1.DEFAULT_PROPS.size },
+            },
+        },
+        edge: {
+            control: { type: "select" },
+            table: {
+                defaultValue: { summary: ActionButton_1.DEFAULT_PROPS.edge },
+            },
+        },
+    },
+    args: {
+        onClick: (0, test_1.fn)(),
+    },
+};
+exports.default = meta;
+exports.VariantsAndEdge = {
+    render: (args) => (React.createElement(React.Fragment, null,
+        React.createElement(Stack_1.default, { direction: "row", gap: 2, sx: { my: 2 } },
+            React.createElement(ActionButton_1.ActionButton, Object.assign({}, args, { edge: "none", variant: "primary" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton_1.ActionButton, Object.assign({}, args, { edge: "none", variant: "secondary" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton_1.ActionButton, Object.assign({}, args, { edge: "none", variant: "tertiary" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton_1.ActionButton, Object.assign({}, args, { edge: "none", variant: "bordered" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton_1.ActionButton, Object.assign({}, args, { edge: "none", variant: "text" }), ICONS.DeleteIcon)),
+        React.createElement(Stack_1.default, { direction: "row", gap: 2, sx: { my: 2 } },
+            React.createElement(ActionButton_1.ActionButton, Object.assign({}, args, { edge: "rounded", variant: "primary" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton_1.ActionButton, Object.assign({}, args, { edge: "rounded", variant: "secondary" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton_1.ActionButton, Object.assign({}, args, { edge: "rounded", variant: "tertiary" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton_1.ActionButton, Object.assign({}, args, { edge: "rounded", variant: "bordered" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton_1.ActionButton, Object.assign({}, args, { edge: "rounded", variant: "text" }), ICONS.DeleteIcon)),
+        React.createElement(Stack_1.default, { direction: "row", gap: 2, sx: { my: 2 } },
+            React.createElement(ActionButton_1.ActionButton, Object.assign({}, args, { edge: "circular", variant: "primary" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton_1.ActionButton, Object.assign({}, args, { edge: "circular", variant: "secondary" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton_1.ActionButton, Object.assign({}, args, { edge: "circular", variant: "tertiary" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton_1.ActionButton, Object.assign({}, args, { edge: "circular", variant: "bordered" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton_1.ActionButton, Object.assign({}, args, { edge: "circular", variant: "text" }), ICONS.DeleteIcon)))),
+    tags: ["main"],
+};
+/**
+ * `ActionButtonLink` is styled as a `ActionButton` that renders an anchor tag.
+ *
+ * To use a custom link component (E.g. `Link` from `react-router` or `next/link`),
+ * pass it as the `Component` prop. Alternatively, customize the project-wide
+ * default link adapter via [Theme's LinkAdapter](../?path=/docs/smoot-design-themeprovider--docs)
+ */
+exports.Links = {
+    render: () => (React.createElement(Stack_1.default, { direction: "row", gap: 2, sx: { my: 2 } },
+        React.createElement(ActionButton_1.ActionButtonLink, { href: "#fake", variant: "primary" }, ICONS.DeleteIcon),
+        React.createElement(ActionButton_1.ActionButtonLink, { href: "#fake", variant: "secondary" }, ICONS.DeleteIcon),
+        React.createElement(ActionButton_1.ActionButtonLink, { href: "#fake", variant: "tertiary" }, ICONS.DeleteIcon),
+        React.createElement(ActionButton_1.ActionButtonLink, { href: "#fake", variant: "bordered" }, ICONS.DeleteIcon),
+        React.createElement(ActionButton_1.ActionButtonLink, { href: "#fake", variant: "text" }, ICONS.DeleteIcon))),
+};
+exports.Showcase = {
+    render: (args) => (React.createElement(Grid2_1.default, { container: true, sx: { maxWidth: "750px" }, rowGap: 2 }, STABLE_VARIANTS.flatMap((variant) => EDGES.flatMap((edge) => (React.createElement(React.Fragment, { key: `${variant}-${edge}` },
+        React.createElement(Grid2_1.default, { size: { xs: 12, sm: 3 }, alignItems: "center" },
+            React.createElement("code", null,
+                "variant=",
+                variant,
+                React.createElement("br", null),
+                "edge=",
+                edge)),
+        SIZES.flatMap((size) => Object.entries(ICONS)
+            .filter(([_key, icon]) => icon)
+            .map(([iconKey, icon]) => (React.createElement(Grid2_1.default, { size: { xs: 4, sm: 1 }, key: `${size}-${iconKey}` },
+            React.createElement(ActionButton_1.ActionButton, Object.assign({ variant: variant, edge: edge, size: size }, args), icon))))))))))),
+};

package/dist/cjs/components/Button/Button.d.ts

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { LinkAdapterPropsOverrides } from "../LinkAdapter/LinkAdapter";
+type ButtonVariant = "primary" | "secondary" | "tertiary" | "text" | "bordered";
+type ButtonSize = "small" | "medium" | "large";
+type ButtonEdge = "circular" | "rounded" | "none";
+type ButtonStyleProps = {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    edge?: ButtonEdge;
+    /**
+     * Display an icon before the button text
+     */
+    startIcon?: React.ReactNode;
+    /**
+     * Display an icon after the button text.
+     */
+    endIcon?: React.ReactNode;
+    /**
+     * If true (default: `false`), the button will become one size smaller at the
+     * `sm` breakpoint.
+     *  - large -> medium
+     *  - medium -> small
+     *  - small -> small
+     */
+    responsive?: boolean;
+    color?: "secondary";
+};
+declare const DEFAULT_PROPS: Required<Omit<ButtonStyleProps, "startIcon" | "endIcon" | "color">>;
+declare const RESPONSIVE_SIZES: Record<ButtonSize, ButtonSize>;
+declare const ButtonRoot: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & ButtonStyleProps, React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+declare const ButtonLinkRoot: import("@emotion/styled").StyledComponent<Omit<import("../LinkAdapter/LinkAdapter").LinkAdapterProps, "ref"> & React.RefAttributes<HTMLAnchorElement> & {
+    theme?: import("@emotion/react").Theme;
+} & ButtonStyleProps, {}, {}>;
+type ButtonProps = ButtonStyleProps & React.ComponentProps<"button">;
+/**
+ * Our standard button component. See [Button Docs](https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-button--docs).
+ *
+ * See also:
+ * - [ButtonLink](https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-button--docs#links)
+ * - [ActionButton](https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-actionbutton--docs) for icon-only uses
+ */
+declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+type ButtonLinkProps = ButtonStyleProps & React.ComponentProps<"a"> & {
+    Component?: React.ElementType;
+} & LinkAdapterPropsOverrides;
+/**
+ * See [ButtonLink docs](https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-button--docs#links)
+ */
+declare const ButtonLink: React.ForwardRefExoticComponent<Omit<ButtonLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+/**
+ * A loading spinner sized for our buttons; use it as the `startIcon` or `endIcon` prop.
+ */
+declare const ButtonLoadingIcon: React.FC;
+export { Button, ButtonLink, ButtonRoot, DEFAULT_PROPS, ButtonLinkRoot, RESPONSIVE_SIZES, ButtonLoadingIcon, };
+export type { ButtonProps, ButtonLinkProps, ButtonStyleProps, ButtonSize };

package/dist/cjs/components/Button/Button.js

@@ -0,0 +1,261 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonLoadingIcon = exports.RESPONSIVE_SIZES = exports.ButtonLinkRoot = exports.DEFAULT_PROPS = exports.ButtonRoot = exports.ButtonLink = exports.Button = void 0;
+const React = require("react");
+const styled_1 = require("@emotion/styled");
+const react_1 = require("@emotion/react");
+const typography_1 = require("../ThemeProvider/typography");
+const CircularProgress_1 = require("@mui/material/CircularProgress");
+const LinkAdapter_1 = require("../LinkAdapter/LinkAdapter");
+const styleProps = {
+    variant: true,
+    size: true,
+    edge: true,
+    startIcon: true,
+    endIcon: true,
+    responsive: true,
+    color: true,
+};
+const shouldForwardButtonProp = (prop) => !styleProps[prop];
+const DEFAULT_PROPS = {
+    variant: "primary",
+    size: "medium",
+    edge: "rounded",
+    responsive: false,
+};
+exports.DEFAULT_PROPS = DEFAULT_PROPS;
+const BORDER_WIDTHS = {
+    small: 1,
+    medium: 1,
+    large: 2,
+};
+const RESPONSIVE_SIZES = {
+    small: "small",
+    medium: "small",
+    large: "medium",
+};
+exports.RESPONSIVE_SIZES = RESPONSIVE_SIZES;
+const sizeStyles = (size, hasBorder, theme) => {
+    const paddingAdjust = hasBorder ? BORDER_WIDTHS[size] : 0;
+    return [
+        {
+            boxSizing: "border-box",
+            borderWidth: BORDER_WIDTHS[size],
+        },
+        size === "large" && Object.assign({ padding: `${14 - paddingAdjust}px 24px` }, theme.typography.buttonLarge),
+        size === "medium" && Object.assign({ padding: `${11 - paddingAdjust}px 16px` }, theme.typography.button),
+        size === "small" && Object.assign({ padding: `${8 - paddingAdjust}px 12px` }, theme.typography.buttonSmall),
+    ];
+};
+const buttonStyles = (props) => {
+    const { size, variant, edge, theme, color, responsive } = Object.assign(Object.assign({}, DEFAULT_PROPS), props);
+    const { colors } = theme.custom;
+    const hasBorder = variant === "secondary" || variant === "bordered";
+    return (0, react_1.css)([
+        {
+            color: theme.palette.text.primary,
+            textAlign: "center",
+            // display
+            display: "inline-flex",
+            justifyContent: "center",
+            alignItems: "center",
+            // transitions
+            transition: `background ${theme.transitions.duration.short}ms`,
+            // cursor
+            cursor: "pointer",
+            ":disabled": {
+                cursor: "default",
+            },
+            minWidth: "100px",
+        },
+        ...sizeStyles(size, hasBorder, theme),
+        // responsive
+        responsive && {
+            [theme.breakpoints.down("sm")]: sizeStyles(RESPONSIVE_SIZES[size], hasBorder, theme),
+        },
+        // variant
+        variant === "primary" && {
+            backgroundColor: colors.mitRed,
+            color: colors.white,
+            border: "none",
+            /* Shadow/04dp */
+            boxShadow: "0px 2px 4px 0px rgba(37, 38, 43, 0.10), 0px 3px 8px 0px rgba(37, 38, 43, 0.12)",
+            ":hover:not(:disabled)": {
+                backgroundColor: colors.red,
+                boxShadow: "none",
+            },
+            ":disabled": {
+                backgroundColor: colors.silverGray,
+                boxShadow: "none",
+            },
+        },
+        variant === "secondary" && {
+            color: colors.red,
+            backgroundColor: "transparent",
+            borderColor: "currentcolor",
+            borderStyle: "solid",
+            ":hover:not(:disabled)": {
+                // brightRed at 0.06 alpha
+                backgroundColor: "rgba(255, 20, 35, 0.06)",
+            },
+            ":disabled": {
+                color: colors.silverGray,
+            },
+        },
+        variant === "text" && {
+            backgroundColor: "transparent",
+            borderStyle: "none",
+            color: colors.darkGray2,
+            ":hover:not(:disabled)": {
+                // darkGray1 at 6% alpha
+                backgroundColor: "rgba(64, 70, 76, 0.06)",
+            },
+            ":disabled": {
+                color: colors.silverGray,
+            },
+        },
+        variant === "bordered" && {
+            backgroundColor: colors.white,
+            color: colors.silverGrayDark,
+            border: `1px solid ${colors.silverGrayLight}`,
+            ":hover:not(:disabled)": {
+                backgroundColor: colors.lightGray1,
+                color: colors.darkGray2,
+            },
+            ":disabled": {
+                backgroundColor: colors.lightGray2,
+                border: `1px solid ${colors.lightGray2}`,
+                color: colors.silverGrayDark,
+            },
+        },
+        variant === "tertiary" && {
+            color: colors.darkGray2,
+            border: "none",
+            backgroundColor: colors.lightGray2,
+            ":hover:not(:disabled)": {
+                backgroundColor: colors.white,
+            },
+            ":disabled": {
+                backgroundColor: colors.lightGray2,
+                color: colors.silverGrayLight,
+            },
+        },
+        // edge
+        edge === "rounded" && {
+            borderRadius: "4px",
+        },
+        edge === "circular" && {
+            // Pill-shaped buttons... Overlapping border radius get clipped to pill.
+            borderRadius: "100vh",
+        },
+        // color
+        color === "secondary" && {
+            color: theme.custom.colors.silverGray,
+            borderColor: theme.custom.colors.silverGray,
+            ":hover:not(:disabled)": {
+                backgroundColor: theme.custom.colors.lightGray1,
+            },
+        },
+    ]);
+};
+const ButtonRoot = (0, styled_1.default)("button", {
+    shouldForwardProp: shouldForwardButtonProp,
+})(buttonStyles);
+exports.ButtonRoot = ButtonRoot;
+const ButtonLinkRoot = (0, styled_1.default)(LinkAdapter_1.LinkAdapter, {
+    shouldForwardProp: shouldForwardButtonProp,
+})(buttonStyles);
+exports.ButtonLinkRoot = ButtonLinkRoot;
+const iconSizeStyles = (size) => ({
+    "& > *": {
+        width: "1em",
+        height: "1em",
+        fontSize: (0, typography_1.pxToRem)({
+            small: 16,
+            medium: 20,
+            large: 24,
+        }[size]),
+    },
+});
+const IconContainer = styled_1.default.span(({ theme, responsive, side, size }) => {
+    return [
+        {
+            height: "1em",
+            display: "flex",
+            alignItems: "center",
+        },
+        side === "start" && {
+            /**
+             * The negative margin is to counteract the padding on the button itself.
+             * Without icons, the left space is 24/16/12 px.
+             * With icons, the left space is 20/12/8 px.
+             */
+            marginLeft: "-4px",
+            marginRight: "8px",
+        },
+        side === "end" && {
+            marginLeft: "8px",
+            marginRight: "-4px",
+        },
+        iconSizeStyles(size),
+        responsive && {
+            [theme.breakpoints.down("sm")]: iconSizeStyles(RESPONSIVE_SIZES[size]),
+        },
+    ];
+});
+const ButtonInner = (props) => {
+    const { children, size = DEFAULT_PROPS.size, responsive } = props;
+    return (React.createElement(React.Fragment, null,
+        props.startIcon ? (React.createElement(IconContainer, { responsive: responsive, size: size, side: "start" }, props.startIcon)) : null,
+        children,
+        props.endIcon ? (React.createElement(IconContainer, { responsive: responsive, size: size, side: "end" }, props.endIcon)) : null));
+};
+/**
+ * Our standard button component. See [Button Docs](https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-button--docs).
+ *
+ * See also:
+ * - [ButtonLink](https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-button--docs#links)
+ * - [ActionButton](https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-actionbutton--docs) for icon-only uses
+ */
+const Button = React.forwardRef((_a, ref) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (React.createElement(ButtonRoot, Object.assign({ ref: ref, type: "button" }, props),
+        React.createElement(ButtonInner, Object.assign({}, props), children)));
+});
+exports.Button = Button;
+Button.displayName = "Button";
+/**
+ * See [ButtonLink docs](https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-button--docs#links)
+ */
+const ButtonLink = React.forwardRef((_a, ref) => {
+    var { children, Component } = _a, props = __rest(_a, ["children", "Component"]);
+    return (React.createElement(ButtonLinkRoot, Object.assign({ Component: Component, ref: ref }, props),
+        React.createElement(ButtonInner, Object.assign({}, props), children)));
+});
+exports.ButtonLink = ButtonLink;
+ButtonLink.displayName = "ButtonLink";
+/**
+ * A loading spinner sized for our buttons; use it as the `startIcon` or `endIcon` prop.
+ */
+const ButtonLoadingIcon = () => {
+    return (React.createElement(CircularProgress_1.default, { color: "inherit", size: "1em", 
+        /**
+         * MUI's spinner's viewbox is 44x44, so when we resize this, it ends up being
+         * 5.5 * (24/44) = 3.0px
+         * 5.5 * (20/44) = 2.5px
+         * 5.5 * (16/44) = 2.0px
+         */
+        thickness: 5.5 }));
+};
+exports.ButtonLoadingIcon = ButtonLoadingIcon;

package/dist/cjs/components/Button/Button.stories.d.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./Button";
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const VariantsAndEdge: Story;
+export declare const Sizes: Story;
+export declare const WithLoadingSpinner: Story;
+export declare const WithIcons: Story;
+/**
+ * `ButtonLink` is a styled `Button` that renders an anchor tag.
+ *
+ * To use a custom link component (E.g. `Link` from `react-router` or `next/link`),
+ * pass it as the `Component` prop. Alternatively, customize the project-wide
+ * default link adapter via [Theme's LinkAdapter](../?path=/docs/smoot-design-themeprovider--docs)
+ */
+export declare const Links: Story;
+export declare const Showcase: Story;

package/dist/cjs/components/Button/Button.stories.js

@@ -0,0 +1,148 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Showcase = exports.Links = exports.WithIcons = exports.WithLoadingSpinner = exports.Sizes = exports.VariantsAndEdge = void 0;
+const React = require("react");
+const Button_1 = require("./Button");
+const Grid2_1 = require("@mui/material/Grid2");
+const Stack_1 = require("@mui/material/Stack");
+const react_1 = require("@remixicon/react");
+const test_1 = require("@storybook/test");
+const story_utils_1 = require("../../story-utils");
+const ICONS = {
+    None: undefined,
+    ArrowBackIcon: React.createElement(react_1.RiArrowLeftLine, null),
+    DeleteIcon: React.createElement(react_1.RiDeleteBinLine, null),
+    TestTubeIcon: React.createElement(react_1.RiTestTubeLine, null),
+};
+const VARIANTS = (0, story_utils_1.enumValues)({
+    primary: true,
+    secondary: true,
+    tertiary: true,
+    bordered: true,
+    text: true,
+});
+const STABLE_VARIANTS = VARIANTS.filter((v) => !v.startsWith("unstable"));
+const SIZES = (0, story_utils_1.enumValues)({
+    small: true,
+    medium: true,
+    large: true,
+});
+const EDGES = (0, story_utils_1.enumValues)({
+    circular: true,
+    rounded: true,
+    none: true,
+});
+const meta = {
+    title: "smoot-design/Button",
+    component: Button_1.Button,
+    argTypes: {
+        startIcon: {
+            options: Object.keys(ICONS),
+            mapping: ICONS,
+        },
+        endIcon: {
+            options: Object.keys(ICONS),
+            mapping: ICONS,
+        },
+    },
+    args: {
+        onClick: (0, test_1.fn)(),
+    },
+};
+exports.default = meta;
+exports.VariantsAndEdge = {
+    render: (args) => (React.createElement(React.Fragment, null,
+        React.createElement(Stack_1.default, { direction: "row", gap: 2, sx: { my: 2 } },
+            React.createElement(Button_1.Button, Object.assign({ edge: "none", variant: "primary" }, args), "Primary"),
+            React.createElement(Button_1.Button, Object.assign({ edge: "none", variant: "secondary" }, args), "Secondary"),
+            React.createElement(Button_1.Button, Object.assign({ edge: "none", variant: "tertiary" }, args), "Tertiary"),
+            React.createElement(Button_1.Button, Object.assign({ edge: "none", variant: "bordered" }, args), "Bordered"),
+            React.createElement(Button_1.Button, Object.assign({ edge: "none", variant: "text" }, args), "Text")),
+        React.createElement(Stack_1.default, { direction: "row", gap: 2, sx: { my: 2 } },
+            React.createElement(Button_1.Button, Object.assign({ edge: "rounded", variant: "primary" }, args), "Primary"),
+            React.createElement(Button_1.Button, Object.assign({ edge: "rounded", variant: "secondary" }, args), "Secondary"),
+            React.createElement(Button_1.Button, Object.assign({ edge: "rounded", variant: "tertiary" }, args), "Tertiary"),
+            React.createElement(Button_1.Button, Object.assign({ edge: "rounded", variant: "bordered" }, args), "Bordered"),
+            React.createElement(Button_1.Button, Object.assign({ edge: "rounded", variant: "text" }, args), "Text")),
+        React.createElement(Stack_1.default, { direction: "row", gap: 2, sx: { my: 2 } },
+            React.createElement(Button_1.Button, Object.assign({ edge: "circular", variant: "primary" }, args), "Primary"),
+            React.createElement(Button_1.Button, Object.assign({ edge: "circular", variant: "secondary" }, args), "Secondary"),
+            React.createElement(Button_1.Button, Object.assign({ edge: "circular", variant: "tertiary" }, args), "Tertiary"),
+            React.createElement(Button_1.Button, Object.assign({ edge: "circular", variant: "bordered" }, args), "Bordered"),
+            React.createElement(Button_1.Button, Object.assign({ edge: "circular", variant: "text" }, args), "Text")))),
+    tags: ["main"],
+};
+const RESPONSIVE = [true, false];
+exports.Sizes = {
+    argTypes: {
+        size: { table: { disable: true } },
+    },
+    render: (args) => (React.createElement(Grid2_1.default, { container: true, sx: { my: 2, maxWidth: "600px" }, alignItems: "center" }, RESPONSIVE.flatMap((responsive) => {
+        return (React.createElement(React.Fragment, { key: String(responsive) },
+            React.createElement(Grid2_1.default, { size: { xs: 12 } },
+                React.createElement("code", null, `responsive={${responsive.toString()}}`)),
+            SIZES.map((size) => (React.createElement(Grid2_1.default, { size: { xs: 4 }, gap: 2, display: "flex", alignItems: "center", key: size },
+                React.createElement(Button_1.Button, Object.assign({}, args, { size: size, responsive: responsive }), size))))));
+    }))),
+};
+exports.WithLoadingSpinner = {
+    render: (args) => (React.createElement(Stack_1.default, { direction: "row", justifyContent: "space-around" },
+        React.createElement(Stack_1.default, { direction: "column", alignItems: "end", gap: 2, sx: { my: 2 } },
+            React.createElement(Button_1.Button, Object.assign({}, args, { variant: "primary", endIcon: React.createElement(Button_1.ButtonLoadingIcon, null) }), "Primary"),
+            React.createElement(Button_1.Button, Object.assign({}, args, { variant: "secondary", endIcon: React.createElement(Button_1.ButtonLoadingIcon, null) }), "Secondary"),
+            React.createElement(Button_1.Button, Object.assign({}, args, { variant: "tertiary", endIcon: React.createElement(Button_1.ButtonLoadingIcon, null) }), "Tertiary")),
+        React.createElement(Stack_1.default, { direction: "column", alignItems: "end", gap: 2, sx: { my: 2 } },
+            React.createElement(Button_1.Button, Object.assign({}, args, { disabled: true, variant: "primary", endIcon: React.createElement(Button_1.ButtonLoadingIcon, null) }), "Primary"),
+            React.createElement(Button_1.Button, Object.assign({}, args, { disabled: true, variant: "secondary", endIcon: React.createElement(Button_1.ButtonLoadingIcon, null) }), "Secondary"),
+            React.createElement(Button_1.Button, Object.assign({}, args, { disabled: true, variant: "tertiary", endIcon: React.createElement(Button_1.ButtonLoadingIcon, null) }), "Tertiary")))),
+};
+exports.WithIcons = {
+    render: (args) => (React.createElement(Stack_1.default, { direction: "row", justifyContent: "space-around" },
+        React.createElement(Stack_1.default, { direction: "column", alignItems: "start", gap: 2, sx: { my: 2 } }, Object.entries(ICONS).map(([key, icon]) => (React.createElement(Button_1.Button, Object.assign({}, args, { startIcon: icon, key: key }), key)))),
+        React.createElement(Stack_1.default, { direction: "column", alignItems: "end", gap: 2, sx: { my: 2 } }, Object.entries(ICONS).map(([key, icon]) => (React.createElement(Button_1.Button, Object.assign({}, args, { endIcon: icon, key: key }), key)))))),
+};
+const EXTRA_PROPS = [
+    {},
+    /**
+     * Show RiTestTubeLine because it is a fairly thin icon
+     */
+    { startIcon: React.createElement(react_1.RiTestTubeLine, null) },
+    /**
+     * Show RiTestTubeLine because it is a fairly thick icon
+     */
+    { startIcon: React.createElement(react_1.RiMailLine, null) },
+    { endIcon: React.createElement(react_1.RiTestTubeLine, null) },
+    { endIcon: React.createElement(react_1.RiMailLine, null) },
+];
+/**
+ * `ButtonLink` is a styled `Button` that renders an anchor tag.
+ *
+ * To use a custom link component (E.g. `Link` from `react-router` or `next/link`),
+ * pass it as the `Component` prop. Alternatively, customize the project-wide
+ * default link adapter via [Theme's LinkAdapter](../?path=/docs/smoot-design-themeprovider--docs)
+ */
+exports.Links = {
+    render: () => (React.createElement(Stack_1.default, { direction: "row", gap: 2, sx: { my: 2 } },
+        React.createElement(Button_1.ButtonLink, { href: "#fake", variant: "primary" }, "Link"),
+        React.createElement(Button_1.ButtonLink, { href: "#fake", variant: "secondary" }, "Link"),
+        React.createElement(Button_1.ButtonLink, { href: "#fake", variant: "tertiary" }, "Link"),
+        React.createElement(Button_1.ButtonLink, { href: "#fake", variant: "bordered" }, "Link"),
+        React.createElement(Button_1.ButtonLink, { href: "#fake", variant: "text" }, "Link"))),
+};
+exports.Showcase = {
+    render: (args) => (React.createElement(Grid2_1.default, { container: true, rowGap: 2, sx: { maxWidth: "600px" } }, STABLE_VARIANTS.flatMap((variant) => EDGES.flatMap((edge) => EXTRA_PROPS.map((extraProps, i) => {
+        return (React.createElement(React.Fragment, { key: `${variant}-${edge}-${i}` },
+            React.createElement(Grid2_1.default, { size: { xs: 3 } },
+                React.createElement("pre", null,
+                    "variant=",
+                    variant,
+                    React.createElement("br", null),
+                    "edge=",
+                    edge)),
+            SIZES.map((size) => (React.createElement(Grid2_1.default, { size: { xs: 3 }, display: "flex", alignItems: "center", key: `${size}` },
+                React.createElement(Button_1.Button, Object.assign({}, args, { variant: variant, edge: edge, size: size }, extraProps), args.children))))));
+    }))))),
+    args: {
+        children: "Click me",
+    },
+};

package/dist/cjs/components/Button/Button.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/components/Button/Button.test.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_1 = require("@testing-library/react");
+const ThemeProvider_1 = require("../ThemeProvider/ThemeProvider");
+const Button_1 = require("./Button");
+const ActionButton_1 = require("./ActionButton");
+const withLinkOverride = (0, ThemeProvider_1.createTheme)({
+    custom: {
+        LinkAdapter: React.forwardRef(function LinkAdapter(props, ref) {
+            return (
+            // eslint-disable-next-line jsx-a11y/anchor-has-content
+            React.createElement("a", Object.assign({ ref: ref, "data-custom": "theme-default" }, props)));
+        }),
+    },
+});
+describe.each([
+    //
+    { ButtonComponent: Button_1.ButtonLink },
+    { ButtonComponent: ActionButton_1.ActionButtonLink },
+])("$ButtonComponent.displayName overrides", ({ ButtonComponent }) => {
+    test("Uses anchor by default", () => {
+        (0, react_1.render)(React.createElement(ButtonComponent, { href: "/test" }, "Link text here"), {
+            wrapper: ThemeProvider_1.ThemeProvider,
+        });
+        const link = react_1.screen.getByRole("link");
+        expect(link.dataset.custom).toBe(undefined);
+    });
+    test("Uses theme's override if supplied", () => {
+        (0, react_1.render)(React.createElement(ButtonComponent, { href: "/test" }, "Link text here"), {
+            wrapper: (props) => React.createElement(ThemeProvider_1.ThemeProvider, Object.assign({ theme: withLinkOverride }, props)),
+        });
+        const link = react_1.screen.getByRole("link");
+        expect(link.dataset.custom).toBe("theme-default");
+    });
+    test("Uses component's override if supplied", () => {
+        const LinkImplementation = (props) => (
+        // eslint-disable-next-line jsx-a11y/anchor-has-content
+        React.createElement("a", Object.assign({ "data-custom": "anchor-override" }, props)));
+        (0, react_1.render)(React.createElement(ButtonComponent, { Component: LinkImplementation, href: "/test" }, "Link text here"), {
+            wrapper: (props) => (React.createElement(ThemeProvider_1.ThemeProvider, Object.assign({ theme: withLinkOverride }, props))),
+        });
+        const link = react_1.screen.getByRole("link");
+        expect(link.dataset.custom).toBe("anchor-override");
+    });
+});