@sitecore/sc-contenthub-blok/dist/Components/BlokIconButton/BlokIconButton.stories.js

A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.IconButtonPlayground = exports.AllIconButtons = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const Foundations_1 = require("../../Foundations");
const BlokIcon_1 = require("../BlokIcon/BlokIcon");
const BlokIconButton_1 = require("./BlokIconButton");
const classes = {
    horizontalWrapper: (0, css_1.css)({ display: "flex", gap: "8px", alignItems: "center" }),
    verticalWrapper: (0, css_1.css)({
        display: "flex",
        flexDirection: "column",
        gap: "30px",
    }),
    separator: (0, css_1.css)({
        borderBottom: `1px solid ${Foundations_1.semanticTokens.borderColor.default}`,
        paddingBottom: "30px",
    }),
};
const meta = {
    title: "Components/Form/BlokIconButton",
    component: BlokIconButton_1.BlokIconButton,
    tags: ["autodocs"],
    argTypes: {},
    args: {},
};
exports.default = meta;
const colorSchemes = [
    "primary",
    "danger",
    "warning",
    "success",
    "info",
    "neutral",
    "ai",
];
const variants = [
    "solid",
    "outline",
    "ghost",
    "link",
    "toggle",
    "ai",
    "navigation",
    "filter",
];
const variantsToLoopOver = ["solid", "outline", "ghost", "link"];
exports.AllIconButtons = {
    parameters: {
        viewMode: "story",
        controls: { disable: true, expanded: false },
        options: { showPanel: false },
    },
    render: () => ((0, jsx_runtime_1.jsxs)("div", { className: classes.verticalWrapper, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.verticalWrapper, classes.separator), children: (0, jsx_runtime_1.jsxs)("div", { className: classes.horizontalWrapper, children: [(0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "large", variant: "solid", colorScheme: "primary", size: "large", children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "trash" }) }), (0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "medium", variant: "solid", colorScheme: "primary", size: "medium", children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "trash" }) }), (0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "small", variant: "solid", colorScheme: "primary", size: "small", children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "trash" }) })] }) }), variants
                .filter((item) => variantsToLoopOver.includes(item))
                .map((variant) => ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.verticalWrapper, classes.separator), children: colorSchemes.map((colorScheme) => ((0, jsx_runtime_1.jsxs)("div", { className: classes.horizontalWrapper, children: [(0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { colorScheme: colorScheme, variant: variant, id: `${colorScheme}-${variant}`, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "trash" }) }, `${colorScheme}-${variant}`), (0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { colorScheme: colorScheme, variant: variant, id: `${colorScheme}-${variant}`, isActive: true, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "trash" }) }, `${colorScheme}-${variant}`), (0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { colorScheme: colorScheme, variant: variant, id: `${colorScheme}-${variant}`, isDisabled: true, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "trash" }) }, `${colorScheme}-${variant}`), (0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { colorScheme: colorScheme, variant: variant, id: `${colorScheme}-${variant}`, isLoading: true, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "trash" }) }, `${colorScheme}-${variant}`)] }))) }, variant))), (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.verticalWrapper, classes.separator), children: (0, jsx_runtime_1.jsxs)("div", { className: classes.horizontalWrapper, children: [(0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "ai1", variant: "ai", children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "trash" }) }), (0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "ai1", variant: "ai", isActive: true, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "trash" }) }), (0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "ai1", variant: "ai", isDisabled: true, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "trash" }) }), (0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "ai1", variant: "ai", isLoading: true, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "trash" }) })] }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.verticalWrapper, classes.separator), children: (0, jsx_runtime_1.jsxs)("div", { className: classes.horizontalWrapper, children: [(0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "filter1", variant: "filter", children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "trash" }) }), (0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "ai1", variant: "filter", isActive: true, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "trash" }) }), (0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "ai1", variant: "filter", isDisabled: true, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "trash" }) }), (0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "ai1", variant: "filter", isLoading: true, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "trash" }) })] }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.verticalWrapper, classes.separator), children: (0, jsx_runtime_1.jsxs)("div", { className: classes.horizontalWrapper, children: [(0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "filter1", variant: "navigation", children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "trash" }) }), (0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "ai1", variant: "navigation", isActive: true, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "trash" }) }), (0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "ai1", variant: "navigation", isDisabled: true, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "trash" }) }), (0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "ai1", variant: "navigation", isLoading: true, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "trash" }) })] }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.verticalWrapper, classes.separator), children: (0, jsx_runtime_1.jsxs)("div", { className: classes.horizontalWrapper, children: [(0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "filter1", variant: "solid", colorScheme: "primary", isFloating: true, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "trash" }) }), (0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "filter1", variant: "ghost", colorScheme: "neutral", isFloating: true, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "trash" }) }), (0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "filter1", variant: "ghost", colorScheme: "neutral", href: "https://www.google.com", target: "_blank", children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "trash" }) }), (0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "filter1", variant: "ghost", colorScheme: "neutral", onClick: () => alert("clicked"), children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "trash" }) }), (0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "filter1", variant: "solid", colorScheme: "primary", count: 5, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "trash" }) })] }) })] })),
};
exports.IconButtonPlayground = {
    args: {
        colorScheme: "neutral",
        id: "test",
        children: "Test button",
        variant: "ghost",
    },
};
//# sourceMappingURL=BlokIconButton.stories.js.map