@sitecore/sc-contenthub-blok
Version:
A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).
67 lines • 8.44 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.PlayGround = exports.AllButtons = 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 BlokButton_1 = require("./BlokButton");
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/BlokButton",
component: BlokButton_1.BlokButton,
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.AllButtons = {
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)(BlokButton_1.BlokButton, { id: "large", variant: "solid", colorScheme: "primary", size: "large", children: "solid lg" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { id: "medium", variant: "solid", colorScheme: "primary", size: "medium", children: "solid md" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { id: "small", variant: "solid", colorScheme: "primary", size: "small", children: "solid sm" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { id: "extraSmall", variant: "solid", colorScheme: "primary", size: "extraSmall", children: "solid xs" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { id: "extraSmall", variant: "solid", colorScheme: "primary", size: "extraSmall", startIcon: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "plus" }), children: "solid xs" })] }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { style: { width: "200px" }, children: (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { id: "medium", variant: "solid", colorScheme: "primary", size: "medium", children: "Text overflow when there is not enough space" }) }) }), 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.jsxs)(BlokButton_1.BlokButton, { colorScheme: colorScheme, variant: variant, id: `${colorScheme}-${variant}`, children: [variant, " ", colorScheme] }, `${colorScheme}-${variant}`), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { colorScheme: colorScheme, variant: variant, id: `${colorScheme}-${variant}`, isActive: true, children: "isActive" }, `${colorScheme}-${variant}`), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { colorScheme: colorScheme, variant: variant, id: `${colorScheme}-${variant}`, isDisabled: true, children: "isDisabled" }, `${colorScheme}-${variant}`), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { colorScheme: colorScheme, variant: variant, id: `${colorScheme}-${variant}`, isLoading: true, loadingText: "isLoading", children: variant }, `${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)(BlokButton_1.BlokButton, { id: "ai1", variant: "ai", children: "AI" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { id: "ai1", variant: "ai", isActive: true, children: "isActive" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { id: "ai1", variant: "ai", isDisabled: true, children: "isDisabled" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { id: "ai1", variant: "ai", isLoading: true, loadingText: "isLoading", children: "AI" })] }) }), (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)(BlokButton_1.BlokButton, { id: "filter1", variant: "filter", children: "Filter" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { id: "ai1", variant: "filter", isActive: true, children: "isActive" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { id: "ai1", variant: "filter", isDisabled: true, children: "isDisabled" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { id: "ai1", variant: "filter", isLoading: true, loadingText: "isLoading", children: "Filter" })] }) }), (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)(BlokButton_1.BlokButton, { id: "filter1", variant: "navigation", children: "Navigation" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { id: "ai1", variant: "navigation", isActive: true, children: "isActive" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { id: "ai1", variant: "navigation", isDisabled: true, children: "isDisabled" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { id: "ai1", variant: "navigation", isLoading: true, loadingText: "isLoading", children: "Navigation" })] }) }), (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)(BlokButton_1.BlokButton, { id: "filter1", variant: "toggle", children: "Toggle" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { id: "ai1", variant: "toggle", isActive: true, children: "Toggle" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { id: "ai1", variant: "toggle", isDisabled: true, children: "isDisabled" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { id: "ai1", variant: "toggle", isLoading: true, loadingText: "isLoading", children: "Toggle" })] }) }), (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)(BlokButton_1.BlokButton, { id: "filter1", variant: "solid", colorScheme: "primary", isFloating: true, children: "Floating" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { id: "filter1", variant: "ghost", colorScheme: "neutral", isFloating: true, children: "Floating" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { id: "filter1", variant: "ghost", colorScheme: "neutral", href: "https://www.google.com", target: "_blank", children: "href" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { id: "filter1", variant: "ghost", colorScheme: "neutral", onClick: () => alert("clicked"), children: "onClick" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { id: "filter1", variant: "solid", colorScheme: "primary", count: 5, children: "With count" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { id: "filter1", variant: "solid", colorScheme: "primary", startIcon: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "plus" }), children: "Start icon" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { id: "filter1", variant: "solid", colorScheme: "primary", endIcon: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "trash" }), children: "End icon" })] }) })] })),
};
exports.PlayGround = {
args: {
colorScheme: "neutral",
id: "test",
children: "Test button",
variant: "ghost",
},
};
//# sourceMappingURL=BlokButton.stories.js.map